https://github.com/lab5e/loadabledata
Simple framework-agnostic wrapper around loadable data to help encapsulate and use state changes in a UI.
https://github.com/lab5e/loadabledata
async data loadable state typescript ui
Last synced: 28 days ago
JSON representation
Simple framework-agnostic wrapper around loadable data to help encapsulate and use state changes in a UI.
- Host: GitHub
- URL: https://github.com/lab5e/loadabledata
- Owner: lab5e
- License: apache-2.0
- Created: 2021-06-06T14:09:26.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-30T11:10:21.000Z (almost 5 years ago)
- Last Synced: 2025-02-15T08:04:09.141Z (over 1 year ago)
- Topics: async, data, loadable, state, typescript, ui
- Language: TypeScript
- Homepage: https://lab5e.github.io/loadabledata/
- Size: 3.24 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LoadableData
Simple framework-agnostic wrapper around loadable data to help encapsulate and use state changes in a UI.
[](https://opensource.org/licenses/Apache-2.0)
[](https://lab5e.github.io/loadabledata)
[](#tiny)
[](https://www.npmjs.com/package/@lab5e/loadabledata)
[](https://github.com/lab5e/loadabledata/actions/workflows/main.yml)
## Examples
We have a [TSDoc](https://lab5e.github.io/loadabledata/) that will include all documentation as well as the examples below.
### Play around in codepen
[Codepen example](https://codepen.io/pkkummermo/pen/abJGxbx)
### Example: Vue in browser
```html
...
Loading data
Lab5e has {{ repositories.data.length }} public repositories!
{{ repositories.errorMessage }}
var app = new Vue({
el: "#app",
data() {
return {
repositories: loadabledata.fromUrl(
"https://api.github.com/users/lab5e/repos",
(error) => `Error trying to fetch data. Error: ${error}`,
),
};
},
});
```
### Example: In ts
You must first install the dependency
```bash
npm i -S @lab5e/loadabledata
```
Then you can have a `Lab5eRepos.vue`-file which details the number of repositories Lab5e has publically available.
```html
Loading data
Lab5e has {{ repositories.data.length }} public repositories!
{{ repositories.errorMessage }}
import { fromPromise, LoadableData } from "@lab5e/loadabledata";
import Vue from "vue";
export default Vue.extend({
data(): { repositories: LoadableData<Repositories[]> } {
return {
repositories: fromUrl(
"https://api.github.com/users/lab5e/repos",
(error) => `Failed to list available todos. ${error}`,
[],
),
};
},
});
```
## Development
We use [TSDX](https://github.com/formium/tsdx) for pretty much everything, and most npm scripts just proxy to `tsdx`.
### Run single build
Use `npm run build`.
### Run tests
To run tests, use `npm test`.
## Configuration
Code quality is set up with `prettier`, `husky`, and `lint-staged`.
### Jest
Jest tests are set up to run with `npm test`.
#### Watch mode
To run in watch mode run `npm run test:watch`
#### Coverage
To see coverage run `npm run test:coverage`
### Bundle Analysis
[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.
### Rollup
We us TSDX which uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
We create UMD, CommonJS, and JavaScript Modules in our build. The appropriate paths are configured in `package.json` and `dist/index.js`
### TypeScript
We use TypeScript for everything, giving us types for all the published packages.
## Continuous Integration
### GitHub Actions
- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
## Publishing to NPM
We use `np`. To publish a new version, write `npx np` and follow the interactive tutorial.