{"id":18535573,"url":"https://github.com/beforesemicolon/client-web-storage","last_synced_at":"2025-04-09T15:32:36.264Z","repository":{"id":37067211,"uuid":"488784053","full_name":"beforesemicolon/client-web-storage","owner":"beforesemicolon","description":"Powerful Web Application Data Storage and State Management Solution.","archived":false,"fork":false,"pushed_at":"2023-10-22T03:19:16.000Z","size":891,"stargazers_count":28,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-01T09:46:48.082Z","etag":null,"topics":["clientdata","indexeddb","inmemory-db","javascript","localstorage","memorystorage","state-management","storage","websql","webstorage"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beforesemicolon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["beforesemicolon"]}},"created_at":"2022-05-05T00:35:49.000Z","updated_at":"2024-03-17T22:09:03.000Z","dependencies_parsed_at":"2022-09-11T07:01:41.631Z","dependency_job_id":"88e2772e-4be8-4489-8965-d5315c1e07bf","html_url":"https://github.com/beforesemicolon/client-web-storage","commit_stats":{"total_commits":72,"total_committers":3,"mean_commits":24.0,"dds":"0.16666666666666663","last_synced_commit":"8a7c83311602c42c21eec032260ec68cfff89dc3"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fclient-web-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fclient-web-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fclient-web-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fclient-web-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beforesemicolon","download_url":"https://codeload.github.com/beforesemicolon/client-web-storage/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248058167,"owners_count":21040710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clientdata","indexeddb","inmemory-db","javascript","localstorage","memorystorage","state-management","storage","websql","webstorage"],"created_at":"2024-11-06T19:25:35.576Z","updated_at":"2025-04-09T15:32:36.245Z","avatar_url":"https://github.com/beforesemicolon.png","language":"TypeScript","funding_links":["https://github.com/sponsors/beforesemicolon"],"categories":[],"sub_categories":[],"readme":"# Client Web Storage\nPowerful Web Application Data Storage and State Management Solution.\n\n[![npm](https://img.shields.io/npm/v/client-web-storage)](https://www.npmjs.com/package/client-web-storage)\n\n- Same simple API for [IndexedDB](), [LocalStorage](), [WebSQL](), and in-memory data storage;\n- Event driven and asynchronous;\n- Automatic data validation done at the store level - ***Guarantees that all data fields are of the right type and exists with configurable automatic defaults;***\n- No actions or reducers setup needed - ***The easiest store to configure ever***;\n- Easy setup for Client-Server data synchronization using [interceptors]();\n- **NOT UI framework specific!** Works with any UI Framework (React, Angular, VueJs, etc) - ***Take your storage setup with you when you migrate to a different framework and eliminate the need to learn a new state management solution for your app.***\n- Easy to maintain and perform all data logic and fetching away from your components - ***Keep data concerns away from UI side of your app;***\n- Highly and easily configurable;\n- Easy to tap into any store events to perform side effect logic;\n\n## Quick Example\n\n```ts\n// todo.store.ts\n\nimport {ClientStore} from \"client-web-storage\";\n\ninterface ToDo {\n    name: string;\n    description: string;\n    complete: boolean;\n}\n\n// create a store providing the name and schema object\n// with default values or javasctipt types\nconst todoStore = new ClientStore\u003cToDo\u003e(\"todo\", {\n    $name: String,\n    description: \"No Description\",\n    complete: false\n});\n```\n\nWorks with any web library or framework. Here is an example using React.\n\n```ts\n// app.tsx\n\nimport {useClientStore} from \"client-web-storage/helpers/use-client-store\";\nimport {Todo} from \"./stores/todo.store\";\nimport FlatList from \"flatlist-react\";\n\nconst App = () =\u003e {\n    const todos = useClientStore\u003cTodo\u003e(\"todo\");\n\t\t\n    if(todos.processing) {\n        return \u003cSpinner /\u003e\n    }\n    \n    if(todos.error) {\n        return \u003cp className=\"error\"\u003e{error.message}\u003c/p\u003e\n    }\n\t\n    const handleCreatItem = async () =\u003e {\n        await todos.createItem({\n            // only name is required (marked with $), the store will auto fill the other fields with defaults\n            name: \"Go to Gym\" \n        });\n    }\n    \n    return (\n        \u003c\u003e\n            \u003cbutton type=\"button\" onClick={handleCreatItem}\u003ecreate todo\u003c/button\u003e\n            \u003cFlatList list={todos.items} renderItem={renderTodo}/\u003e\n        \u003c/\u003e\n    )\n}\n```\n\n## Installation\n\n### In Node Projects:\n\n```bash\nnpm install client-web-storage\n```\n\n```js\nimport {Schema, ClientStore} from \"client-web-storage\";\n```\n\n### In the Browser\n\n```html\n\u003c!-- use the latest version --\u003e\n\u003cscript src=\"https://unpkg.com/client-web-storage/client-web-storage.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- use a specific version --\u003e\n\u003cscript src=\"https://unpkg.com/client-web-storage@1.7.5/client-web-storage.min.js\"\u003e\u003c/script\u003e\n```\n\n```html\n\u003cscript\u003e\n  const {Schema, ClientStore} = window.CWS;\n\u003c/script\u003e\n```\n\n## Documentation\n\n[Documentation](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/docs.md)\n\n#### Application Examples\n- [React](https://github.com/beforesemicolon/client-web-storage-project-examples/tree/main/react);\n- [Angular](https://github.com/beforesemicolon/client-web-storage-project-examples/tree/main/angular);\n\n[-- Check them All ---](https://github.com/beforesemicolon/client-web-storage-project-examples)\n\n#### API References\n- **[ClientStore](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/ClientStore.md)**\n- **[Schema](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/Schema.md)**\n- **[SchemaValue](https://github.com/beforesemicolon/client-web-storage/blob/main/documentation/api-references/SchemaValue.md)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fclient-web-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeforesemicolon%2Fclient-web-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fclient-web-storage/lists"}