{"id":13805682,"url":"https://github.com/thegenius/svelte-domain","last_synced_at":"2025-10-28T00:07:36.325Z","repository":{"id":60443087,"uuid":"543061843","full_name":"thegenius/svelte-domain","owner":"thegenius","description":"state manager of svelte","archived":false,"fork":false,"pushed_at":"2022-10-01T23:37:09.000Z","size":215,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-22T14:57:53.842Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/thegenius.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-29T10:34:33.000Z","updated_at":"2023-12-25T06:10:58.000Z","dependencies_parsed_at":"2023-01-19T01:45:46.327Z","dependency_job_id":null,"html_url":"https://github.com/thegenius/svelte-domain","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegenius%2Fsvelte-domain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegenius%2Fsvelte-domain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegenius%2Fsvelte-domain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegenius%2Fsvelte-domain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thegenius","download_url":"https://codeload.github.com/thegenius/svelte-domain/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250399501,"owners_count":21424194,"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":[],"created_at":"2024-08-04T01:01:03.771Z","updated_at":"2025-10-28T00:07:31.285Z","avatar_url":"https://github.com/thegenius.png","language":"TypeScript","funding_links":[],"categories":["State Libraries"],"sub_categories":["Mobile"],"readme":"[![npm version](https://badge.fury.io/js/svelte-domain.svg)](https://badge.fury.io/js/svelte-domain)\n[![package size](https://img.badgesize.io/thegenius/svelte-domain/main/dist/index.umd.js.svg)](https://www.npmjs.com/package/svelte-domain)\n[![gzip size](https://img.badgesize.io/thegenius/svelte-domain/main/dist/index.umd.js.svg?compression=gzip)](https://www.npmjs.com/package/svelte-domain)\n[![code quality](https://api.codiga.io/project/34698/score/svg)](https://www.npmjs.com/package/svelte-domain)\n[![license](https://img.shields.io/badge/license-MIT-green)](https://www.npmjs.com/package/svelte-domain)\n![npm](https://img.shields.io/npm/dw/svelte-domain)\n![dependencies](https://img.shields.io/badge/dependencies-0-brightgreen)\n\n# svelte-domain\nThis is a library for svelte state management inspired by dva and rematch.\n\n## Features\n```\n1. Small: Zero dependencies and really small, only 1.26KB and gziped 624B\n2. Clean: Only 2 API you should learn, createModel, createStore.\n3. Support async: Naturally async support you will dream about after using writable.\n4. Cool typescript support: You can enjoy all the good parts of typescript.\n5. Elegant: clean concepts inspired by elm, dva, redux and rematch\n```\n\n## Demo\n\u003ca href=\"https://stackblitz.com/edit/svelte-domain-counter?file=src/lib/Counter.svelte\" target=\"_blank\"\u003eCounter\u003c/a\u003e\n\n\n## Concept\n```\ndomain: An object contains 'state'、'reducer'、'effect'.  \n\nstate: data fields for domain  \n\nreducer: function taking state and payload as input, produce state as output.  \n         reducer output will be updated into state.  \n         reducer is the only way to update state.  \n\neffect: function taking context and payload as input, produce any as output.  \n        effect can not update state  \n        effect can be async  \n        context contains all states cross all domains  \n        context contains all reducers cross all domains  \n        context contains all effects cross all domains  \n```\n\n## 0. Install\n```\nnpm install svelte-domain\n```\n\n\n## 1. Create a simple model\n```typescript\nimport { createModel } from \"svelte-domain\";\n// import type {Context} from './index'; //Context will be produced in 2 step, omit\n\nconst sleep = (ms: number) =\u003e new Promise((r) =\u003e setTimeout(r, ms));\n\nexport const counter1 = createModel\u003cContext\u003e()({\n    state: {\n        count: 0\n    },\n    reducers: {\n        inc1: (state) =\u003e {\n            return {count: state.count + 1};\n        },\n        inc2: (state, payload?: number) =\u003e {\n            return payload?{count: state.count + payload} : {count: state.count};\n        },\n        inc3: (state, payload: number) =\u003e {\n            return {count: state.count};\n        }\n    },\n    effects: {\n        asyncInc1: async (context, payload?: number) =\u003e {\n            await sleep(1000);\n            context.user1.inc1();\n        }\n    }\n})\n```\n\n## 2. Create a store\n```typescript\nimport type { Models, FlatModels } from \"svelte-domain\";\nimport { createStore } from \"svelte-domain\";\nimport {counter1} from './counter1';\nimport {counter2} from './counter2'\n\nexport interface RootModels extends Models\u003cContext\u003e {\n\tcounter1: typeof counter1\n    counter2: typeof counter2\n}\n// here we calculated the Context type, and then you can import into your model file\nexport type Context = FlatModels\u003cRootModels\u003e;\n\nconst store: Context = createStore\u003cRootModels, Context\u003e({counter1, counter2});\nexport default store;\n\n```\n\n## 3. use store in svelte\n``` html\n\u003cscript lang=\"ts\"\u003e\n  import store from '../store';\n  let {counter1, counter2} = store;\n\n  console.log(counter1.state.count); // you can query the state fields\n  const increment1 = () =\u003e {\n      counter1.inc1();\n  }\n  const increment2 = async () =\u003e {\n      await counter2.asyncInc(10);\n  }\n  const increment3 = async () =\u003e {\n      await counter1.asyncMultiInc();\n  }\n\u003c/script\u003e\n\n\u003c!--query the svelte reactive version state by prefix $ --\u003e\n\u003cbutton on:click={increment1}\u003e\n  count: {$counter1.state.count}\n\u003c/button\u003e\n\n\u003cbutton on:click={increment2}\u003e\n  async count: {$counter2.state.count}\n\u003c/button\u003e\n\n\u003cbutton on:click={increment3}\u003e\n  multi count increment\n\u003c/button\u003e\n```\n\n## Typescript Support\n### enjoy the typescript support in svelte\n![](https://github.com/thegenius/svelte-domain/blob/main/docs/tips_in_svelte.jpg)  \n\n### enjoy the typescript support in domain reducer  \n![](https://github.com/thegenius/svelte-domain/blob/main/docs/tips_in_reducer.jpg)\n\n### enjoy the typescript support in domain effect for cross domain\n![](https://github.com/thegenius/svelte-domain/blob/main/docs/tips_in_effect_multi_domain.jpg)\n\n### enjoy the typescript support in domain effect for cross domain action\n![](https://github.com/thegenius/svelte-domain/blob/main/docs/tips_in_effect_actions.jpg)\n\n\n## Example\n```\ngit clone https://github.com/thegenius/svelte-domain.git\ncd svelte-domain/example\nnpm install\nnpm run dev\n```\n\n## LICENSE\n```\nMIT\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegenius%2Fsvelte-domain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegenius%2Fsvelte-domain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegenius%2Fsvelte-domain/lists"}