as-model 0.3.2 → 0.3.3

package/README.md

@@ -1,558 +1,558 @@
-[![npm][npm-image]][npm-url]
-[![NPM downloads][npm-downloads-image]][npm-url]
-[![standard][standard-image]][standard-url]
-
-[npm-image]: https://img.shields.io/npm/v/as-model.svg?style=flat-square
-[npm-url]: https://www.npmjs.com/package/as-model
-[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
-[standard-url]: http://npm.im/standard
-[npm-downloads-image]: https://img.shields.io/npm/dm/as-model.svg?style=flat-square
-
-
-# as-model
-
-This is a simple state management library with model coding style for javascript/typescript.
-
-## Code first
-
-Create a model function:
-
-```js
-// model.js
-// A parameter for model state.
-export function counting(state){
-    // Define instance object for outside usage.
-    return {
-        // Define properties for instance.
-        count: state,
-        symbol: !state? '': (state > 0? '+' : '-'),
-        // Create action methods for changing state.
-        increase:()=> state + 1,
-        decrease:()=> state - 1,
-        add(...additions){
-            return additions.reduce((result, current)=>{
-                return result + current;
-            }, state);
-        }
-    };
-}
-```
-
-Create store:
-
-```js
-// store.js
-import {counting} from './model';
-import {createStore} from 'as-model';
-
-// Create and initialize a model store.
-const store = createStore(counting, 0); 
-// Get instance and call action methods to change state.
-store.getInstance().increase();
-// Get new properties from instance.
-console.log(store.getInstance().count); // 1
-store.getInstance().add(2,3);
-console.log(store.getInstance().count); // 6
-```
-
-Create multiple stores:
-
-```js
-import {counting} from './model';
-import {createKey, createStores} from 'as-model';
-
-// Create model key with initial state.
-const countingKey0 = createKey(counting, 0);
-const countingKey1 = createKey(counting, 1); 
-
-// Use model keys as templates to create multiple stores.
-const stores = createStores(countingKey0, countingKey1);
-// Find store by model key
-const store0 = stores.find(countingKey0);
-store0?.getInstance().increase();
-console.log(store0?.getInstance().count); // 1
-```
-
-Model key is a template for creating multiple stores, and it is also an identifier to find the right store from multiple stores.
-
-Use **model** API to create store or key.
-
-```js
-import {counting} from './model';
-import {model} from 'as-model';
-
-const store = model(counting).createStore(0);
-const key = model(counting).createKey(0);
-......
-```
-
-In typescript develop environment, `model` API can do a type check for making sure every model action method returns a correct type.
-
-```js
-// ts
-import {model} from 'as-model';
-
-// The model api ensures every action method returns a same type value with model state.
-const counting = model((state: number)=>{
-    return {
-        count: state,
-        increase:()=>state + 1 + '', // type error, should be number, but returns string.
-        decrease:()=>state - 1,
-        add(...additions: number[]){
-            return additions.reduce((result, current)=>{
-                return result + current;
-            }, state);
-        }
-    };
-});
-
-const store = counting.createStore(0);
-const key = counting.createKey(0);
-......
-```
-
-Subscribe store
-
-```js
-import {counting} from './model';
-import {model} from 'as-model';
-
-const store = model(counting).createStore(0);
-const {getInstance} = store;
-// Subscribe the state changes.
-const unsubscribe = store.subscribe((action)=>{
-    console.log(store.getInstance());
-});
-getInstance().increase(); // output: {count: 1}
-// Destroy subscription.
-unsubscribe();
-```
-
-Want to use async operations?
-
-```js
-import {counting} from './model';
-import {model, createSelector} from 'as-model';
-
-const store = model(counting).select((getInstance)=>{
-    const instance = getInstance();
-    return {
-        ...instance,
-        async delayIncrease(){
-            const ok = await new Promise((resolve)=>{
-                setTimeout(()=>{
-                    resolve(true);
-                },200);
-            });
-            if(ok){
-                getInstance().increase();
-            }
-        }
-    }
-}).createStore(0);
-
-const {subscribe, select} = createSelector(store);
-const unsubscribe = subscribe();
-// When use select with no parameter,
-// select method finds default selector for reproducing result 
-const {delayIncrease} = select();
-await delayIncrease();
-select().count // 1
-```
-
-Subscribe store in react hooks:
-
-```js
-import {model, createStores} from 'as-model';
-import {
-    createContext, 
-    useRef, 
-    useState, 
-    useEffect, 
-    useContext
-} from 'react';
-
-// Local state management
-function useModel(modelFn, defaultState){
-    // Use ref to persist the store object.
-    const storeRef = useRef(model(modelFn).createStore(defaultState));
-    const store = storeRef.current;
-    // Set store instance as an initial state for useState.
-    const [state, setState] = useState(store.getInstance());
-
-    useEffect(()=>{
-        // Subscribe the state changes.
-        const unsubscribe = store.subscribe((action)=>{
-            setState(store.getInstance());
-        });
-        // Destroy subscription when component unmounts.
-        return unsubscribe;
-    }, []);
-
-    return state;
-}
-
-function App(){
-    const {
-        count, 
-        increase
-    } = useModel(counting, 0);
-}
-
-// global static state management
-function useModelStore(store){
-    const [state, setState] = useState(store.getInstance());
-
-    useEffect(()=>{
-        const unsubscribe = store.subscribe((action)=>{
-            setState(store.getInstance());
-        });
-        return unsubscribe;
-    }, []);
-
-    return state;
-}
-
-const store = model(counting).createStore({state: 0});
-
-function App(){
-    const {
-        count, 
-        increase
-    } = useModelStore(store);
-}
-
-// global dynamic state management
-const ModelContext = createContext(null);
-
-function create(...keys){
-    return {
-        provide(Component){
-            return function Provider(props){
-                // Create and persist multiple stores in Component, that makes different elements from this Component carry different stores.
-                const storesRef = useRef(createStores(...keys));
-                const stores = storesRef.current;
-                // Use Context to provide multiple stores to all the children.
-                return (
-                    <ModelContext.Provider value={stores}>
-                        <Component {...props} />
-                    </ModelContext.Provider>
-                );
-            }
-        }
-    }
-}
-
-function useModelKey(key){
-    const stores = useContext(ModelContext);
-    if(stores==null){
-        throw new Error('ModelContext is not provided');
-    }
-    // Use model key to find the right store.
-    const store = stores.find(key);
-    if(store==null){
-        throw new Error('Can not find store by model key');
-    }
-    const [state, setState] = useState(store.getInstance());
-
-    useEffect(()=>{
-        const unsubscribe = store.subscribe((action)=>{
-            setState(store.getInstance());
-        });
-        return unsubscribe;
-    }, []);
-
-    return state;
-}
-
-const countingKey = model(counting).createKey(0);
-
-const App = create(countingKey).provide(function App(){
-    const {
-        count, 
-        increase
-    } = useModelKey(countingKey);  
-});
-```
-
-## Install
-
-```
-npm install as-model
-```
-
-## Simplify API
-
-### createStore
-
-```js
-function createStore(modelFnOrKey, initialState?):store
-```
-
-#### parameters
-
-* modelFnOrKey - a model function accepts a state parameter and returns an object with action methods, or a model key of model function.
-* initialState - the initial state of the model.
-
-#### return
-
-A store object with model key and methods. The store object has `getInstance` method to get the instance of the model; `subscribe` method to subscribe the state changes; `update` method to update the store with new model function and initial state; `destroy` method to destroy the store.
-
-**store** structure:
-
-```js
-{
-    getInstance: ()=>instance,
-    subscribe: (listener)=>unsubscribe,
-    key: modelKey,
-    destroy: ()=>void,
-    update: (
-        data:{
-            model?:modelFn, 
-            key?: modelKey,
-            initialState?: any
-            state?: any;
-        }
-    )=>void,
-}
-```
-
-### createKey
-
-```js
-function createKey(modelFn, initialState?):key
-```
-
-#### parameters
-
-* modelFn - a model function accepts a state parameter and returns an object with action methods.
-* initialState - the initial state of the model.
-
-#### return
-
-A model key function with `createStore` method to create a store with the model key.
-
-**key** structure:
-
-```js
-{
-    createStore: (initialState?)=>Store
-}
-```
-
-### createStores
-
-```js
-function createStores(...keys):StoreCollection
-```
-
-#### parameters
-
-* keys - multiple model keys of model functions.
-
-#### return
-
-StoreCollection created by the model keys.
-
-**StoreCollection** structure:
-
-```js
-{
-    find: (key)=>store,
-    destroy: ()=>void
-}
-```
-
-### createSignal
-
-```js
-function createSignal(store):SignalStore
-```
-
-#### parameters
-
-* store - a store object created by `createStore` method.
-
-#### return
-
-Signal store object with `subscribe` method to subscribe the state changes, and `getSignal` method to get the Signal callback function.
-
-**SignalStore** structure:
-
-```js
-{
-    subscribe: (listener)=>unsubscribe,
-    getSignal: ()=>Signal,
-    key: modelKey,
-}
-```
-
-The Signal function returns a real time instance from store. Only when the properties picked from real time instance are changed, the subscribed listener can receive an action notification.
-
-```js
-// Signal
-function signal():instance;
-// to start statistic the picked properties change
-signal.startStatistics():void;
-// to end statistic the picked properties change
-signal.stopStatistics():void;
-```
-
-### createSelector
-
-```js
-function createSelector(store, opts?:SelectorOptions):SelectorStore
-```
-
-#### parameters
-
-* store - a store object created by `createStore` method.
-* opts - (Optional) an object config to optimize createSelector.
-  
- ```js
- // opts
-  {
-    // When the selector is drived to reproduce a new data,
-    // it compares if the result is different with the previous one,
-    // if the camparing result is true, it represents no differ happens,
-    // the subscribed callback will not be called.  
-    equality?: (current: T, next: T) => boolean;
-  }
- ```
-
- #### return
-
- Selector store object with `subscribe` method to subscribe the state changes, and `select` method for reselecting instance.
-
- ```js
- {
-    subscribe: (listener)=>unsubscribe,
-    select: (selector?:(getInstance:()=>Instance)=>)=>any,
-    key: modelKey,
- }
- ```
-
-
-### model
-
-```js
-function model(modelFn):ModelUsage
-```
-
-#### parameters
-
-* modelFn - a model function accepts a state parameter and returns an object with action methods.
-
-#### return
-
-ModelUsage object with `createStore`, `createKey` methods to create store, key for the model function, and `select` method to set a default selector function (Use `createSelector(store).select()` to select the default one). 
-
-**ModelUsage** structure:
-
-```js
-{
-    createStore: (initialState?)=> store,
-    createKey: (initialState?)=> key,
-    select: (
-      selector:(getInstance:()=>Instance)=>Record<string, any>|Array<any>
-    )=>ModelUsage 
-}
-```
-
-### config
-
-```js
-function config(options):configAPI
-```
-
-#### parameters
-
-##### options - (Optional) an object with the following properties:
-* notify - (Optional) a callback function for noticing an action to every subscriber, it accepts a notifier function and an action as parameters.
-* controlled - (Optional) a boolean state to tell as-model use controlled mode to output instance changes.
-* middleWares - (Optional) a middleWare array for reproducing state or ignore actions.
-
-#### return
-
-All apis above except `createSignal` and `createSelector` API.
-
-```js
-{
-    createStore: (modelFnOrKey, initialState?)=>store,
-    createKey: (modelFn, initialState?)=>key,
-    createStores: (...keys)=>stores,
-    model: (modelFn)=>ModelUsage
-}
-```
-
-### validations
-
-A validate callback collection object.
-
-#### validations.isInstanceFromNoStateModel
-
-```js
-function isInstanceFromNoStateModel(instance: any): boolean
-```
-
-To validate if the parameter object is a uninitialized store instance.
-
-#### validations.isModelKey
-
-```js
-function isModelKey<
-    S,
-    T extends ModelInstance,
-    R extends (ins: () => T) => any = (ins: () => T) => T
-  >(
-    data: any
-  ): data is ModelKey<S, T, R>;
-```
-
-To validate if the parameter object is a model key.
-
-#### validations.isModelStore
-
-```js
-function isModelStore<
-    S,
-    T extends ModelInstance,
-    R extends (ins: () => T) => any = (ins: () => T) => T
-  >(
-    data: any
-  ): data is Store<S, T, R>;
-```
-
-To validate if the parameter object is a store.
-
-#### validations.isModelUsage
-
-```js
-function isModelUsage<
-    S,
-    T extends ModelInstance,
-    R extends (ins: () => T) => any = (ins: () => T) => T
-  >(
-    data: any
-  ): data is ModelUsage<S, T, R>;
-```
-
-To validate if the parameter object is a model usage. A model usage is created by API **model**, it is a tool collection provides **createKey**, **createStore**, **select** APIs based on the model.
-
-### shallowEqual
-
-```js
-function shallowEqual(prev: any, current: any): boolean
-```
-
-To validate if the value of left is shallow equal with the value of right.
-
-## Browser Support 
-
-```
-chrome: '>=91',
-edge: '>=91',
-firefox: '=>90',
-safari: '>=15'
-```
-
+[![npm][npm-image]][npm-url]
+[![NPM downloads][npm-downloads-image]][npm-url]
+[![standard][standard-image]][standard-url]
+
+[npm-image]: https://img.shields.io/npm/v/as-model.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/as-model
+[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
+[standard-url]: http://npm.im/standard
+[npm-downloads-image]: https://img.shields.io/npm/dm/as-model.svg?style=flat-square
+
+
+# as-model
+
+This is a simple state management library with model coding style for javascript/typescript.
+
+## Code first
+
+Create a model function:
+
+```js
+// model.js
+// A parameter for model state.
+export function counting(state){
+    // Define instance object for outside usage.
+    return {
+        // Define properties for instance.
+        count: state,
+        symbol: !state? '': (state > 0? '+' : '-'),
+        // Create action methods for changing state.
+        increase:()=> state + 1,
+        decrease:()=> state - 1,
+        add(...additions){
+            return additions.reduce((result, current)=>{
+                return result + current;
+            }, state);
+        }
+    };
+}
+```
+
+Create store:
+
+```js
+// store.js
+import {counting} from './model';
+import {createStore} from 'as-model';
+
+// Create and initialize a model store.
+const store = createStore(counting, 0); 
+// Get instance and call action methods to change state.
+store.getInstance().increase();
+// Get new properties from instance.
+console.log(store.getInstance().count); // 1
+store.getInstance().add(2,3);
+console.log(store.getInstance().count); // 6
+```
+
+Create multiple stores:
+
+```js
+import {counting} from './model';
+import {createKey, createStores} from 'as-model';
+
+// Create model key with initial state.
+const countingKey0 = createKey(counting, 0);
+const countingKey1 = createKey(counting, 1); 
+
+// Use model keys as templates to create multiple stores.
+const stores = createStores(countingKey0, countingKey1);
+// Find store by model key
+const store0 = stores.find(countingKey0);
+store0?.getInstance().increase();
+console.log(store0?.getInstance().count); // 1
+```
+
+Model key is a template for creating multiple stores, and it is also an identifier to find the right store from multiple stores.
+
+Use **model** API to create store or key.
+
+```js
+import {counting} from './model';
+import {model} from 'as-model';
+
+const store = model(counting).createStore(0);
+const key = model(counting).createKey(0);
+......
+```
+
+In typescript develop environment, `model` API can do a type check for making sure every model action method returns a correct type.
+
+```js
+// ts
+import {model} from 'as-model';
+
+// The model api ensures every action method returns a same type value with model state.
+const counting = model((state: number)=>{
+    return {
+        count: state,
+        increase:()=>state + 1 + '', // type error, should be number, but returns string.
+        decrease:()=>state - 1,
+        add(...additions: number[]){
+            return additions.reduce((result, current)=>{
+                return result + current;
+            }, state);
+        }
+    };
+});
+
+const store = counting.createStore(0);
+const key = counting.createKey(0);
+......
+```
+
+Subscribe store
+
+```js
+import {counting} from './model';
+import {model} from 'as-model';
+
+const store = model(counting).createStore(0);
+const {getInstance} = store;
+// Subscribe the state changes.
+const unsubscribe = store.subscribe((action)=>{
+    console.log(store.getInstance());
+});
+getInstance().increase(); // output: {count: 1}
+// Destroy subscription.
+unsubscribe();
+```
+
+Want to use async operations?
+
+```js
+import {counting} from './model';
+import {model, createSelector} from 'as-model';
+
+const store = model(counting).select((getInstance)=>{
+    const instance = getInstance();
+    return {
+        ...instance,
+        async delayIncrease(){
+            const ok = await new Promise((resolve)=>{
+                setTimeout(()=>{
+                    resolve(true);
+                },200);
+            });
+            if(ok){
+                getInstance().increase();
+            }
+        }
+    }
+}).createStore(0);
+
+const {subscribe, select} = createSelector(store);
+const unsubscribe = subscribe();
+// When use select with no parameter,
+// select method finds default selector for reproducing result 
+const {delayIncrease} = select();
+await delayIncrease();
+select().count // 1
+```
+
+Subscribe store in react hooks:
+
+```js
+import {model, createStores} from 'as-model';
+import {
+    createContext, 
+    useRef, 
+    useState, 
+    useEffect, 
+    useContext
+} from 'react';
+
+// Local state management
+function useModel(modelFn, defaultState){
+    // Use ref to persist the store object.
+    const storeRef = useRef(model(modelFn).createStore(defaultState));
+    const store = storeRef.current;
+    // Set store instance as an initial state for useState.
+    const [state, setState] = useState(store.getInstance());
+
+    useEffect(()=>{
+        // Subscribe the state changes.
+        const unsubscribe = store.subscribe((action)=>{
+            setState(store.getInstance());
+        });
+        // Destroy subscription when component unmounts.
+        return unsubscribe;
+    }, []);
+
+    return state;
+}
+
+function App(){
+    const {
+        count, 
+        increase
+    } = useModel(counting, 0);
+}
+
+// global static state management
+function useModelStore(store){
+    const [state, setState] = useState(store.getInstance());
+
+    useEffect(()=>{
+        const unsubscribe = store.subscribe((action)=>{
+            setState(store.getInstance());
+        });
+        return unsubscribe;
+    }, []);
+
+    return state;
+}
+
+const store = model(counting).createStore({state: 0});
+
+function App(){
+    const {
+        count, 
+        increase
+    } = useModelStore(store);
+}
+
+// global dynamic state management
+const ModelContext = createContext(null);
+
+function create(...keys){
+    return {
+        provide(Component){
+            return function Provider(props){
+                // Create and persist multiple stores in Component, that makes different elements from this Component carry different stores.
+                const storesRef = useRef(createStores(...keys));
+                const stores = storesRef.current;
+                // Use Context to provide multiple stores to all the children.
+                return (
+                    <ModelContext.Provider value={stores}>
+                        <Component {...props} />
+                    </ModelContext.Provider>
+                );
+            }
+        }
+    }
+}
+
+function useModelKey(key){
+    const stores = useContext(ModelContext);
+    if(stores==null){
+        throw new Error('ModelContext is not provided');
+    }
+    // Use model key to find the right store.
+    const store = stores.find(key);
+    if(store==null){
+        throw new Error('Can not find store by model key');
+    }
+    const [state, setState] = useState(store.getInstance());
+
+    useEffect(()=>{
+        const unsubscribe = store.subscribe((action)=>{
+            setState(store.getInstance());
+        });
+        return unsubscribe;
+    }, []);
+
+    return state;
+}
+
+const countingKey = model(counting).createKey(0);
+
+const App = create(countingKey).provide(function App(){
+    const {
+        count, 
+        increase
+    } = useModelKey(countingKey);  
+});
+```
+
+## Install
+
+```
+npm install as-model
+```
+
+## Simplify API
+
+### createStore
+
+```js
+function createStore(modelFnOrKey, initialState?):store
+```
+
+#### parameters
+
+* modelFnOrKey - a model function accepts a state parameter and returns an object with action methods, or a model key of model function.
+* initialState - the initial state of the model.
+
+#### return
+
+A store object with model key and methods. The store object has `getInstance` method to get the instance of the model; `subscribe` method to subscribe the state changes; `update` method to update the store with new model function and initial state; `destroy` method to destroy the store.
+
+**store** structure:
+
+```js
+{
+    getInstance: ()=>instance,
+    subscribe: (listener)=>unsubscribe,
+    key: modelKey,
+    destroy: ()=>void,
+    update: (
+        data:{
+            model?:modelFn, 
+            key?: modelKey,
+            initialState?: any
+            state?: any;
+        }
+    )=>void,
+}
+```
+
+### createKey
+
+```js
+function createKey(modelFn, initialState?):key
+```
+
+#### parameters
+
+* modelFn - a model function accepts a state parameter and returns an object with action methods.
+* initialState - the initial state of the model.
+
+#### return
+
+A model key function with `createStore` method to create a store with the model key.
+
+**key** structure:
+
+```js
+{
+    createStore: (initialState?)=>Store
+}
+```
+
+### createStores
+
+```js
+function createStores(...keys):StoreCollection
+```
+
+#### parameters
+
+* keys - multiple model keys of model functions.
+
+#### return
+
+StoreCollection created by the model keys.
+
+**StoreCollection** structure:
+
+```js
+{
+    find: (key)=>store,
+    destroy: ()=>void
+}
+```
+
+### createSignal
+
+```js
+function createSignal(store):SignalStore
+```
+
+#### parameters
+
+* store - a store object created by `createStore` method.
+
+#### return
+
+Signal store object with `subscribe` method to subscribe the state changes, and `getSignal` method to get the Signal callback function.
+
+**SignalStore** structure:
+
+```js
+{
+    subscribe: (listener)=>unsubscribe,
+    getSignal: ()=>Signal,
+    key: modelKey,
+}
+```
+
+The Signal function returns a real time instance from store. Only when the properties picked from real time instance are changed, the subscribed listener can receive an action notification.
+
+```js
+// Signal
+function signal():instance;
+// to start statistic the picked properties change
+signal.startStatistics():void;
+// to end statistic the picked properties change
+signal.stopStatistics():void;
+```
+
+### createSelector
+
+```js
+function createSelector(store, opts?:SelectorOptions):SelectorStore
+```
+
+#### parameters
+
+* store - a store object created by `createStore` method.
+* opts - (Optional) an object config to optimize createSelector.
+  
+ ```js
+ // opts
+  {
+    // When the selector is drived to reproduce a new data,
+    // it compares if the result is different with the previous one,
+    // if the camparing result is true, it represents no differ happens,
+    // the subscribed callback will not be called.  
+    equality?: (current: T, next: T) => boolean;
+  }
+ ```
+
+ #### return
+
+ Selector store object with `subscribe` method to subscribe the state changes, and `select` method for reselecting instance.
+
+ ```js
+ {
+    subscribe: (listener)=>unsubscribe,
+    select: (selector?:(getInstance:()=>Instance)=>)=>any,
+    key: modelKey,
+ }
+ ```
+
+
+### model
+
+```js
+function model(modelFn):ModelUsage
+```
+
+#### parameters
+
+* modelFn - a model function accepts a state parameter and returns an object with action methods.
+
+#### return
+
+ModelUsage object with `createStore`, `createKey` methods to create store, key for the model function, and `select` method to set a default selector function (Use `createSelector(store).select()` to select the default one). 
+
+**ModelUsage** structure:
+
+```js
+{
+    createStore: (initialState?)=> store,
+    createKey: (initialState?)=> key,
+    select: (
+      selector:(getInstance:()=>Instance)=>Record<string, any>|Array<any>
+    )=>ModelUsage 
+}
+```
+
+### config
+
+```js
+function config(options):configAPI
+```
+
+#### parameters
+
+##### options - (Optional) an object with the following properties:
+* notify - (Optional) a callback function for noticing an action to every subscriber, it accepts a notifier function and an action as parameters.
+* controlled - (Optional) a boolean state to tell as-model use controlled mode to output instance changes.
+* middleWares - (Optional) a middleWare array for reproducing state or ignore actions.
+
+#### return
+
+All apis above except `createSignal` and `createSelector` API.
+
+```js
+{
+    createStore: (modelFnOrKey, initialState?)=>store,
+    createKey: (modelFn, initialState?)=>key,
+    createStores: (...keys)=>stores,
+    model: (modelFn)=>ModelUsage
+}
+```
+
+### validations
+
+A validate callback collection object.
+
+#### validations.isInstanceFromNoStateModel
+
+```js
+function isInstanceFromNoStateModel(instance: any): boolean
+```
+
+To validate if the parameter object is a uninitialized store instance.
+
+#### validations.isModelKey
+
+```js
+function isModelKey<
+    S,
+    T extends ModelInstance,
+    R extends (ins: () => T) => any = (ins: () => T) => T
+  >(
+    data: any
+  ): data is ModelKey<S, T, R>;
+```
+
+To validate if the parameter object is a model key.
+
+#### validations.isModelStore
+
+```js
+function isModelStore<
+    S,
+    T extends ModelInstance,
+    R extends (ins: () => T) => any = (ins: () => T) => T
+  >(
+    data: any
+  ): data is Store<S, T, R>;
+```
+
+To validate if the parameter object is a store.
+
+#### validations.isModelUsage
+
+```js
+function isModelUsage<
+    S,
+    T extends ModelInstance,
+    R extends (ins: () => T) => any = (ins: () => T) => T
+  >(
+    data: any
+  ): data is ModelUsage<S, T, R>;
+```
+
+To validate if the parameter object is a model usage. A model usage is created by API **model**, it is a tool collection provides **createKey**, **createStore**, **select** APIs based on the model.
+
+### shallowEqual
+
+```js
+function shallowEqual(prev: any, current: any): boolean
+```
+
+To validate if the value of left is shallow equal with the value of right.
+
+## Browser Support 
+
+```
+chrome: '>=91',
+edge: '>=91',
+firefox: '=>90',
+safari: '>=15'
+```
+

package/index.d.ts

@@ -27,9 +27,7 @@ declare type ValidInstance<S, T extends ModelInstance> = {
       : T[K];
 };
 
-export declare type Model<S = any, T extends ModelInstance = any> = (
-  state: S
-) => ValidInstance<S, T>;
+export declare type Model = (state: any) => any;
 
 export type PickState<R extends Model> = R extends (state: infer S) => any
   ? S
@@ -57,7 +55,7 @@ export interface Token {
 export declare type Dispatch = (action: Action) => any;
 
 export declare interface Key<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 > extends M {
   (s: PickState<M>): Instance<M>;
@@ -68,7 +66,7 @@ export declare interface Key<
   defaultState?: PickState<M>;
 }
 
-declare interface UpdaterStore<S = any, T extends ModelInstance = any> {
+declare interface UpdaterStore<S = any, T = any> {
   getState: () => { state: S; instance: T };
   dispatch: (action: Action) => void;
 }
@@ -89,14 +87,14 @@ export declare interface Config {
 /** createStore * */
 
 export declare interface StoreIndex<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = any
 > {
   key: Key<M, R>;
 }
 
 export declare interface Store<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 > extends StoreIndex<M, R> {
   subscribe: (dispatcher: Dispatch) => () => void;
@@ -128,16 +126,15 @@ export declare function createStore<
 /** createKey * */
 
 export declare interface ModelKey<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 > extends Key<M, R> {
-  (s: PickState<M>): Instance<M>;
   createStore: <D extends PickState<M>>(initialState?: D) => Store<M, R>;
   extends: <E extends Record<string, any>>(e: E) => ModelKey<M, R> & E;
 }
 
 export declare function createKey<
-  M extends Model = any,
+  M extends Model = Model,
   D extends PickState<M>,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 >(model: M | ModelUsage<M, R>, initialState?: D): ModelKey<M, R>;
@@ -146,7 +143,7 @@ export declare function createKey<
 
 export declare interface StoreCollection {
   find: <
-    M extends Model = any,
+    M extends Model = Model,
     R extends undefined | ((instance: () => Instance<M>) => any) = undefined
   >(
     key: Key<M, R> | StoreIndex<M, R>
@@ -210,7 +207,7 @@ export interface SignalOptions {
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 declare interface SignalStore<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 > extends StoreIndex<M, R> {
   getToken: () => Token;
@@ -229,7 +226,7 @@ declare interface SignalStore<
 }
 
 export declare function createSignal<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 >(store: Store<M, R>): SignalStore<M, R>;
 
@@ -264,7 +261,7 @@ declare type SelectMethod<
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 declare interface SelectorStore<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 > extends StoreIndex<M, R> {
   getToken: () => Token;
@@ -277,7 +274,7 @@ declare interface SelectorOption<T = any> {
 }
 
 export declare function createSelector<
-  M extends Model = any,
+  M extends Model = Model,
   R extends undefined | ((instance: () => Instance<M>) => any) = undefined
 >(store: Store<M, R>, opts?: SelectorOption): SelectorStore<M, R>;
 

package/package.json

@@ -1,68 +1,68 @@
-{
-  "private": false,
-  "name": "as-model",
-  "version": "0.3.2",
-  "description": "This is a model state management tool",
-  "license": "MIT",
-  "author": "Jimmy.Harding",
-  "homepage": "https://github.com/filefoxper/a-model",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/filefoxper/a-model"
-  },
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "files": [
-    "dist",
-    "esm",
-    "index.d.ts"
-  ],
-  "scripts": {
-    "build": "node ./build.js",
-    "docs": "docsify serve ./docs",
-    "lint": "eslint src --fix --ext .ts,.tsx ",
-    "lint-init": "eslint --init",
-    "test": "jest --coverage"
-  },
-  "typings": "index.d.ts",
-  "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/core": "^7.27.4",
-    "@babel/eslint-parser": "^7.27.5",
-    "@babel/plugin-transform-runtime": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-typescript": "^7.27.1",
-    "@babel/runtime": "^7.27.6",
-    "@pmnps/plugin-publish": "4.5.0",
-    "@types/jest": "^29.5.14",
-    "babel-jest": "29.7.0",
-    "esbuild": "^0.25.0",
-    "esbuild-plugin-es5": "2.1.1",
-    "eslint": "^8.49.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-import-resolver-typescript": "^3.6.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "eslint-webpack-plugin": "^4.0.1",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "pmnps": "^4.5.3",
-    "prettier": "^3.0.3",
-    "prettier-eslint": "^15.0.1",
-    "prettier-eslint-cli": "^7.1.0",
-    "ts-node": "^10.8.1",
-    "typescript": "^4.9.5"
-  },
-  "keywords": [
-    "model",
-    "state",
-    "state-management",
-    "typescript"
-  ]
-}
+{
+  "private": false,
+  "name": "as-model",
+  "version": "0.3.3",
+  "description": "This is a model state management tool",
+  "license": "MIT",
+  "author": "Jimmy.Harding",
+  "homepage": "https://github.com/filefoxper/a-model",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/filefoxper/a-model"
+  },
+  "main": "dist/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "dist",
+    "esm",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "build": "node ./build.js",
+    "docs": "docsify serve ./docs",
+    "lint": "eslint src --fix --ext .ts,.tsx ",
+    "lint-init": "eslint --init",
+    "test": "jest --coverage"
+  },
+  "typings": "index.d.ts",
+  "devDependencies": {
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.4",
+    "@babel/eslint-parser": "^7.27.5",
+    "@babel/plugin-transform-runtime": "^7.27.4",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/runtime": "^7.27.6",
+    "@pmnps/plugin-publish": "4.5.0",
+    "@types/jest": "^29.5.14",
+    "babel-jest": "29.7.0",
+    "esbuild": "^0.25.0",
+    "esbuild-plugin-es5": "2.1.1",
+    "eslint": "^8.49.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "pmnps": "^4.5.3",
+    "prettier": "^3.0.3",
+    "prettier-eslint": "^15.0.1",
+    "prettier-eslint-cli": "^7.1.0",
+    "ts-node": "^10.8.1",
+    "typescript": "^4.9.5"
+  },
+  "keywords": [
+    "model",
+    "state",
+    "state-management",
+    "typescript"
+  ]
+}