https://github.com/thegenius/svelte-domain
state manager of svelte
https://github.com/thegenius/svelte-domain
Last synced: 5 months ago
JSON representation
state manager of svelte
- Host: GitHub
- URL: https://github.com/thegenius/svelte-domain
- Owner: thegenius
- License: mit
- Created: 2022-09-29T10:34:33.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-01T23:37:09.000Z (over 2 years ago)
- Last Synced: 2024-04-10T01:54:34.239Z (about 1 year ago)
- Language: TypeScript
- Size: 210 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - Svelte-Domain - The state management for svelte. (State Libraries / Mobile)
README
[](https://badge.fury.io/js/svelte-domain)
[](https://www.npmjs.com/package/svelte-domain)
[](https://www.npmjs.com/package/svelte-domain)
[](https://www.npmjs.com/package/svelte-domain)
[](https://www.npmjs.com/package/svelte-domain)
# svelte-domain
This is a library for svelte state management inspired by dva and rematch.
## Features
```
1. Small: Zero dependencies and really small, only 1.26KB and gziped 624B
2. Clean: Only 2 API you should learn, createModel, createStore.
3. Support async: Naturally async support you will dream about after using writable.
4. Cool typescript support: You can enjoy all the good parts of typescript.
5. Elegant: clean concepts inspired by elm, dva, redux and rematch
```
## Demo
Counter
## Concept
```
domain: An object contains 'state'、'reducer'、'effect'.
state: data fields for domain
reducer: function taking state and payload as input, produce state as output.
reducer output will be updated into state.
reducer is the only way to update state.
effect: function taking context and payload as input, produce any as output.
effect can not update state
effect can be async
context contains all states cross all domains
context contains all reducers cross all domains
context contains all effects cross all domains
```
## 0. Install
```
npm install svelte-domain
```
## 1. Create a simple model
```typescript
import { createModel } from "svelte-domain";
// import type {Context} from './index'; //Context will be produced in 2 step, omit
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
export const counter1 = createModel()({
state: {
count: 0
},
reducers: {
inc1: (state) => {
return {count: state.count + 1};
},
inc2: (state, payload?: number) => {
return payload?{count: state.count + payload} : {count: state.count};
},
inc3: (state, payload: number) => {
return {count: state.count};
}
},
effects: {
asyncInc1: async (context, payload?: number) => {
await sleep(1000);
context.user1.inc1();
}
}
})
```
## 2. Create a store
```typescript
import type { Models, FlatModels } from "svelte-domain";
import { createStore } from "svelte-domain";
import {counter1} from './counter1';
import {counter2} from './counter2'
export interface RootModels extends Models {
counter1: typeof counter1
counter2: typeof counter2
}
// here we calculated the Context type, and then you can import into your model file
export type Context = FlatModels;
const store: Context = createStore({counter1, counter2});
export default store;
```
## 3. use store in svelte
``` html
import store from '../store';
let {counter1, counter2} = store;
console.log(counter1.state.count); // you can query the state fields
const increment1 = () => {
counter1.inc1();
}
const increment2 = async () => {
await counter2.asyncInc(10);
}
const increment3 = async () => {
await counter1.asyncMultiInc();
}
count: {$counter1.state.count}
async count: {$counter2.state.count}
multi count increment
```
## Typescript Support
### enjoy the typescript support in svelte
### enjoy the typescript support in domain reducer
### enjoy the typescript support in domain effect for cross domain
### enjoy the typescript support in domain effect for cross domain action
## Example
```
git clone https://github.com/thegenius/svelte-domain.git
cd svelte-domain/example
npm install
npm run dev
```
## LICENSE
```
MIT
```