doura-react - npm Package Compare versions

Comparing version 0.0.0-rc.4 to 0.0.0-rc.5

dist/batchManager.d.ts

@@ -1,6 +0,6 @@
-import type { AnyModel, Doura } from 'doura';
+import type { AnyModel, ModelPublicInstance } from 'doura';
 declare const createBatchManager: () => {
-    addSubscribe: (model: AnyModel, store: Doura, fn: () => void) => () => void;
-    triggerSubscribe: (model: AnyModel) => void;
+    addSubscribe: (model: ModelPublicInstance<AnyModel>, fn: () => void) => () => void;
+    triggerSubscribe: (model: ModelPublicInstance<AnyModel>) => void;
 };
 export { createBatchManager };

dist/createContainer.d.ts

 import { PropsWithChildren } from 'react';
 import type { Doura, DouraOptions } from 'doura';
-import { IUseModel, IUseStaticModel } from './types';
+import { IUseNamedModel, IUseNamedStaticModel } from './types';
 declare const createContainer: (options?: DouraOptions) => {
@@ -8,9 +8,9 @@ Provider: (props: PropsWithChildren<{
     }>) => JSX.Element;
-    useSharedModel: IUseModel;
-    useStaticModel: IUseStaticModel;
+    useSharedModel: IUseNamedModel;
+    useStaticModel: IUseNamedStaticModel;
 };
 declare const DouraRoot: (props: PropsWithChildren<{
     store?: Doura;
-}>) => JSX.Element, useRootModel: IUseModel, useRootStaticModel: IUseStaticModel;
+}>) => JSX.Element, useRootModel: IUseNamedModel, useRootStaticModel: IUseNamedStaticModel;
 export { DouraRoot, useRootModel, useRootStaticModel };
 export default createContainer;

dist/createUseModel.d.ts

 import { Doura, AnyModel, Selector } from 'doura';
 import { createBatchManager } from './batchManager';
+export declare const createUseNamedModel: (doura: Doura, batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel, S extends Selector<IModel, any>>(name: string, model: IModel, selector?: S | undefined, depends?: any[]) => [any, any];
 export declare const createUseModel: (doura: Doura, batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel, S extends Selector<IModel, any>>(model: IModel, selector?: S | undefined, depends?: any[]) => [any, any];
-export declare const createUseStaticModel: (doura: Doura, _batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel>(model: IModel) => [any, any];
+export declare const createUseNamedStaticModel: (doura: Doura, _batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel>(name: string, model: IModel) => [any, any];

dist/dourareact.umd.development.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('doura'), require('use-sync-external-store/shim'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'doura', 'use-sync-external-store/shim', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.douraReact = {}, global.React, global.doura, global.shim, global.reactDom));
-})(this, (function (exports, React, doura, shim, reactDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('doura'), require('doura/devtool'), require('use-sync-external-store/shim'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'doura', 'doura/devtool', 'use-sync-external-store/shim', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.douraReact = {}, global.React, global.doura, global.devtool, global.shim, global.reactDom));
+})(this, (function (exports, React, doura, devtool, shim, reactDom) { 'use strict';
 
@@ -10,2 +10,3 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var devtool__default = /*#__PURE__*/_interopDefaultLegacy(devtool);
 
@@ -30,37 +31,13 @@ function readonlyModel(model) {
   }
-  function useModel$1(doura, batchManager, model) {
-    var _useMemo = React.useMemo(function () {
-        return {
-          modelInstance: doura.getModel(model),
-          subscribe: function subscribe(onModelChange) {
-            return batchManager.addSubscribe(model, doura, onModelChange);
-          }
-        };
-      },
-      // ignore model's change
-      [doura]),
-      modelInstance = _useMemo.modelInstance,
-      subscribe = _useMemo.subscribe;
+  function useModel$1(model, subscribe) {
     var view = React.useMemo(function () {
       return function () {
-        return modelInstance.$getSnapshot();
+        return model.$getSnapshot();
       };
-    }, [modelInstance]);
+    }, [model]);
     var state = shim.useSyncExternalStore(subscribe, view, view);
     React.useDebugValue(state);
-    return [state, modelInstance.$actions];
+    return [state, model.$actions];
   }
-  function useModelWithSelector(doura, batchManager, model, selector, depends) {
-    var _useMemo2 = React.useMemo(function () {
-        return {
-          modelInstance: doura.getModel(model),
-          subscribe: function subscribe(onModelChange) {
-            return batchManager.addSubscribe(model, doura, onModelChange);
-          }
-        };
-      },
-      // ignore model's change
-      [doura]),
-      modelInstance = _useMemo2.modelInstance,
-      subscribe = _useMemo2.subscribe;
+  function useModelWithSelector(model, subscribe, selector, depends) {
     var selectorRef = React.useRef(undefined);
@@ -73,24 +50,62 @@ var view = React.useMemo(function () {
       }
-      mv = selectorRef.current = modelInstance.$createSelector(selector);
+      mv = selectorRef.current = model.$createView(selector);
       return mv;
-    }, [modelInstance].concat(depends ? depends : [selector]));
+    }, [model].concat(depends ? depends : [selector]));
     var state = shim.useSyncExternalStore(subscribe, view, view);
     React.useDebugValue(state);
-    return [state, modelInstance.$actions];
+    return [state, model.$actions];
   }
+  function useModelInstance(name, model, doura, batchManager) {
+    var _useMemo = React.useMemo(function () {
+        var modelInstance = doura.getModel(name, model);
+        return {
+          modelInstance: modelInstance,
+          subscribe: function subscribe(onModelChange) {
+            return batchManager.addSubscribe(modelInstance, onModelChange);
+          }
+        };
+      },
+      // ignore model's change
+      [name, doura]),
+      modelInstance = _useMemo.modelInstance,
+      subscribe = _useMemo.subscribe;
+    return {
+      modelInstance: modelInstance,
+      subscribe: subscribe
+    };
+  }
+  var createUseNamedModel = function createUseNamedModel(doura, batchManager) {
+    return function (name, model, selector, depends) {
+      var hasSelector = React.useRef(selector);
+      var _useModelInstance = useModelInstance(name, model, doura, batchManager),
+        modelInstance = _useModelInstance.modelInstance,
+        subscribe = _useModelInstance.subscribe;
+      // todo: warn when hasSelector changes
+      if (hasSelector.current) {
+        return useModelWithSelector(modelInstance, subscribe, selector, depends);
+      } else {
+        return useModel$1(modelInstance, subscribe);
+      }
+    };
+  };
   var createUseModel = function createUseModel(doura, batchManager) {
     return function (model, selector, depends) {
       var hasSelector = React.useRef(selector);
+      var _useModelInstance2 = useModelInstance('useModel',
+        // name donen't matter here, use "@" for simplicity
+        model, doura, batchManager),
+        modelInstance = _useModelInstance2.modelInstance,
+        subscribe = _useModelInstance2.subscribe;
       // todo: warn when hasSelector changes
       if (hasSelector.current) {
-        return useModelWithSelector(doura, batchManager, model, selector, depends);
+        return useModelWithSelector(modelInstance, subscribe, selector, depends);
       } else {
-        return useModel$1(doura, batchManager, model);
+        return useModel$1(modelInstance, subscribe);
       }
     };
   };
-  var createUseStaticModel = function createUseStaticModel(doura, _batchManager) {
-    return function (model) {
+  var createUseNamedStaticModel = function createUseNamedStaticModel(doura, _batchManager) {
+    return function (name, model) {
       var modelInstance = React.useMemo(function () {
-        return doura.getModel(model);
+        return doura.getModel(name, model);
       },
@@ -120,3 +135,3 @@ // ignore model's change
     // add models to listen
-    var addSubscribe = function addSubscribe(model, store, fn) {
+    var addSubscribe = function addSubscribe(model, fn) {
       var modelsFnSet = modelBindRender.get(model);
@@ -126,3 +141,3 @@ if (!modelsFnSet) {
         modelsFnSet.add(fn);
-        var unSubscribe = store.subscribe(model, function () {
+        var unSubscribe = model.$subscribe(function () {
           triggerSubscribe(model); // render self;
@@ -210,5 +225,5 @@ });
     }
-    var useSharedModel = function useSharedModel(model, selector, depends) {
+    var useSharedModel = function useSharedModel(name, model, selector, depends) {
       var context = React.useContext(Context);
-      !model.name ? invariant(false, 'name is required.')  : void 0;
+      !name ? invariant(false, 'name is required.')  : void 0;
       !context ? invariant(false, 'You should wrap your Component in createContainer().Provider.')  : void 0;
@@ -218,8 +233,8 @@ var store = context.store,
       return React.useMemo(function () {
-        return createUseModel(store, batchManager);
-      }, [store, batchManager])(model, selector, depends);
+        return createUseNamedModel(store, batchManager);
+      }, [store, batchManager])(name, model, selector, depends);
     };
-    var useStaticModel = function useStaticModel(model) {
+    var useStaticModel = function useStaticModel(name, model) {
       var context = React.useContext(Context);
-      !model.name ? invariant(false, 'name is required.')  : void 0;
+      !name ? invariant(false, 'name is required.')  : void 0;
       !context ? invariant(false, 'You should wrap your Component in createContainer().Provider.')  : void 0;
@@ -229,4 +244,4 @@ var store = context.store,
       return React.useMemo(function () {
-        return createUseStaticModel(store);
-      }, [store, batchManager])(model);
+        return createUseNamedStaticModel(store);
+      }, [store, batchManager])(name, model);
     };
@@ -239,3 +254,5 @@ return {
   };
-  var _createContainer = /*#__PURE__*/createContainer(),
+  var _createContainer = /*#__PURE__*/createContainer({
+      plugins: [[devtool__default["default"]]] 
+    }),
     DouraRoot = _createContainer.Provider,
@@ -242,0 +259,0 @@ useRootModel = _createContainer.useSharedModel,

dist/dourareact.umd.production.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("doura"),require("use-sync-external-store/shim"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","doura","use-sync-external-store/shim","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).douraReact={},e.React,e.doura,e.shim,e.reactDom)}(this,(function(e,t,r,n,u){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t),c=function(e,r){return function(u,o,a){return t.useRef(o).current?function(e,r,u,o,a){var c=t.useMemo((function(){return{modelInstance:e.getModel(u),subscribe:function(t){return r.addSubscribe(u,e,t)}}}),[e]),i=c.modelInstance,s=c.subscribe,f=t.useRef(void 0),d=t.useMemo((function(){var e=f.current;return e&&e.destory(),f.current=i.$createSelector(o)}),[i].concat(a||[o])),l=n.useSyncExternalStore(s,d,d);return t.useDebugValue(l),[l,i.$actions]}(e,r,u,o,a):function(e,r,u){var o=t.useMemo((function(){return{modelInstance:e.getModel(u),subscribe:function(t){return r.addSubscribe(u,e,t)}}}),[e]),a=o.modelInstance,c=o.subscribe,i=t.useMemo((function(){return function(){return a.$getSnapshot()}}),[a]),s=n.useSyncExternalStore(c,i,i);return t.useDebugValue(s),[s,a.$actions]}(e,r,u)}},i=function(){var e=new WeakMap,t=new WeakMap,r=function(t){var r=Array.from(e.get(t)||[]);u.unstable_batchedUpdates((function(){for(var e=r.pop();e;)e(),e=r.pop()}))};return{addSubscribe:function(n,u,o){var a=e.get(n);if(a)a.add(o);else{(a=new Set).add(o);var c=u.subscribe(n,(function(){r(n)}));e.set(n,a),t.set(n,c)}return function(){return function(r,n){var u=e.get(r);if(u&&(u.delete(n),0===u.size&&t.has(r))){e.delete(r);var o=t.get(r);o&&(o(),t.delete(r))}}(n,o)}},triggerSubscribe:r}};function s(e,t){if(!e)throw new Error("[Doura React]: "+(t||""))}var f=function(e){var n=t.createContext(null);return{Provider:function(u){var o=u.children,c=u.store,s=t.useMemo((function(){return{store:c||r.doura(e),batchManager:i()}}),[c]),f=t.useState(s),d=f[0],l=f[1];return t.useEffect((function(){l(s)}),[c]),a.default.createElement(n.Provider,{value:d},o)},useSharedModel:function(e,r,u){var o=t.useContext(n);e.name||s(!1),o||s(!1);var a=o.store,i=o.batchManager;return t.useMemo((function(){return c(a,i)}),[a,i])(e,r,u)},useStaticModel:function(e){var r=t.useContext(n);e.name||s(!1),r||s(!1);var u=r.store;return t.useMemo((function(){return function(e,r){return function(r){var n=t.useMemo((function(){return e.getModel(r)}),[e]),u=t.useRef(),o=t.useMemo((function(){return{get current(){return n}}}),[n]);return u.current=o,[u.current,n.$actions]}}(u)}),[u,r.batchManager])(e)}}},d=f(),l=d.useSharedModel,b=d.useStaticModel;e.DouraRoot=d.Provider,e.createContainer=f,e.useModel=function(e,n,u){var o=t.useMemo((function(){return[r.doura(),i()]}),[]),a=o[0],s=o[1];return t.useMemo((function(){return c(a,s)}),[a,s])(e,n,u)},e.useRootModel=l,e.useRootStaticModel=b,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react"),require("doura"),require("doura/devtool"),require("use-sync-external-store/shim"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","doura","doura/devtool","use-sync-external-store/shim","react-dom"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).douraReact={},e.React,e.doura,0,e.shim,e.reactDom)}(this,(function(e,r,t,n,u,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(r);function i(e,t){var n=r.useMemo((function(){return function(){return e.$getSnapshot()}}),[e]),o=u.useSyncExternalStore(t,n,n);return r.useDebugValue(o),[o,e.$actions]}function s(e,t,n,o){var a=r.useRef(void 0),c=r.useMemo((function(){var r=a.current;return r&&r.destory(),a.current=e.$createView(n)}),[e].concat(o||[n])),i=u.useSyncExternalStore(t,c,c);return r.useDebugValue(i),[i,e.$actions]}function f(e,t,n,u){var o=r.useMemo((function(){var r=n.getModel(e,t);return{modelInstance:r,subscribe:function(e){return u.addSubscribe(r,e)}}}),[e,n]);return{modelInstance:o.modelInstance,subscribe:o.subscribe}}var d=function(){var e=new WeakMap,r=new WeakMap,t=function(r){var t=Array.from(e.get(r)||[]);o.unstable_batchedUpdates((function(){for(var e=t.pop();e;)e(),e=t.pop()}))};return{addSubscribe:function(n,u){var o=e.get(n);if(o)o.add(u);else{(o=new Set).add(u);var a=n.$subscribe((function(){t(n)}));e.set(n,o),r.set(n,a)}return function(){return function(t,n){var u=e.get(t);if(u&&(u.delete(n),0===u.size&&r.has(t))){e.delete(t);var o=r.get(t);o&&(o(),r.delete(t))}}(n,u)}},triggerSubscribe:t}};function l(e,r){if(!e)throw new Error("[Doura React]: "+(r||""))}var v=function(e){var n=r.createContext(null);return{Provider:function(u){var o=u.children,a=u.store,i=r.useMemo((function(){return{store:a||t.doura(e),batchManager:d()}}),[a]),s=r.useState(i),f=s[0],l=s[1];return r.useEffect((function(){l(i)}),[a]),c.default.createElement(n.Provider,{value:f},o)},useSharedModel:function(e,t,u,o){var a=r.useContext(n);e||l(!1),a||l(!1);var c=a.store,d=a.batchManager;return r.useMemo((function(){return function(e,t){return function(n,u,o,a){var c=r.useRef(o),d=f(n,u,e,t),l=d.modelInstance,v=d.subscribe;return c.current?s(l,v,o,a):i(l,v)}}(c,d)}),[c,d])(e,t,u,o)},useStaticModel:function(e,t){var u=r.useContext(n);e||l(!1),u||l(!1);var o=u.store;return r.useMemo((function(){return function(e,t){return function(t,n){var u=r.useMemo((function(){return e.getModel(t,n)}),[e]),o=r.useRef(),a=r.useMemo((function(){return{get current(){return u}}}),[u]);return o.current=a,[o.current,u.$actions]}}(o)}),[o,u.batchManager])(e,t)}}},b=v({plugins:[]}),M=b.useSharedModel,m=b.useStaticModel;e.DouraRoot=b.Provider,e.createContainer=v,e.useModel=function(e,n,u){var o=r.useMemo((function(){return[t.doura(),d()]}),[]),a=o[0],c=o[1];return r.useMemo((function(){return function(e,t){return function(n,u,o){var a=r.useRef(u),c=f("useModel",n,e,t),d=c.modelInstance,l=c.subscribe;return a.current?s(d,l,u,o):i(d,l)}}(a,c)}),[a,c])(e,n,u)},e.useRootModel=M,e.useRootStaticModel=m,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=dourareact.umd.production.min.js.map

dist/types.d.ts

@@ -10,4 +10,11 @@ import { AnyModel, Selector, ModelPublicInstance, ModelData } from 'doura';
 }
-export interface IUseStaticModel {
-    <IModel extends AnyModel>(model: IModel): [
+export interface IUseNamedModel {
+    <IModel extends AnyModel>(name: string, model: IModel): [
+        ModelData<IModel>,
+        IActions<IModel>
+    ];
+    <IModel extends AnyModel, S extends Selector<IModel>>(name: string, model: IModel, selectors: S, depends?: any[]): [ReturnType<S>, IActions<IModel>];
+}
+export interface IUseNamedStaticModel {
+    <IModel extends AnyModel>(name: string, model: IModel): [
         {
@@ -14,0 +21,0 @@ current: ModelData<IModel>;

esm/batchManager.d.ts

@@ -1,6 +0,6 @@
-import type { AnyModel, Doura } from 'doura';
+import type { AnyModel, ModelPublicInstance } from 'doura';
 declare const createBatchManager: () => {
-    addSubscribe: (model: AnyModel, store: Doura, fn: () => void) => () => void;
-    triggerSubscribe: (model: AnyModel) => void;
+    addSubscribe: (model: ModelPublicInstance<AnyModel>, fn: () => void) => () => void;
+    triggerSubscribe: (model: ModelPublicInstance<AnyModel>) => void;
 };
 export { createBatchManager };

esm/batchManager.js

@@ -7,3 +7,3 @@ import { unstable_batchedUpdates } from 'react-dom';
     // add models to listen
-    const addSubscribe = function (model, store, fn) {
+    const addSubscribe = function (model, fn) {
         let modelsFnSet = modelBindRender.get(model);
@@ -13,3 +13,3 @@ if (!modelsFnSet) {
             modelsFnSet.add(fn);
-            const unSubscribe = store.subscribe(model, function () {
+            const unSubscribe = model.$subscribe(function () {
                 triggerSubscribe(model); // render self;
@@ -16,0 +16,0 @@ });

esm/createContainer.d.ts

 import { PropsWithChildren } from 'react';
 import type { Doura, DouraOptions } from 'doura';
-import { IUseModel, IUseStaticModel } from './types';
+import { IUseNamedModel, IUseNamedStaticModel } from './types';
 declare const createContainer: (options?: DouraOptions) => {
@@ -8,9 +8,9 @@ Provider: (props: PropsWithChildren<{
     }>) => JSX.Element;
-    useSharedModel: IUseModel;
-    useStaticModel: IUseStaticModel;
+    useSharedModel: IUseNamedModel;
+    useStaticModel: IUseNamedStaticModel;
 };
 declare const DouraRoot: (props: PropsWithChildren<{
     store?: Doura;
-}>) => JSX.Element, useRootModel: IUseModel, useRootStaticModel: IUseStaticModel;
+}>) => JSX.Element, useRootModel: IUseNamedModel, useRootStaticModel: IUseNamedStaticModel;
 export { DouraRoot, useRootModel, useRootStaticModel };
 export default createContainer;

esm/createContainer.js

 import React, { createContext, useContext, useEffect, useMemo, useState, } from 'react';
 import { doura } from 'doura';
-import { createUseModel, createUseStaticModel } from './createUseModel';
+import devtool from 'doura/devtool';
+import { createUseNamedModel, createUseNamedStaticModel, } from './createUseModel';
 import { createBatchManager } from './batchManager';
@@ -30,15 +31,15 @@ import { invariant } from './utils';
     }
-    const useSharedModel = (model, selector, depends) => {
+    const useSharedModel = (name, model, selector, depends) => {
         const context = useContext(Context);
-        invariant(model.name, 'name is required.');
+        invariant(name, 'name is required.');
         invariant(context, 'You should wrap your Component in createContainer().Provider.');
         const { store, batchManager } = context;
-        return useMemo(() => createUseModel(store, batchManager), [store, batchManager])(model, selector, depends);
+        return useMemo(() => createUseNamedModel(store, batchManager), [store, batchManager])(name, model, selector, depends);
     };
-    const useStaticModel = (model) => {
+    const useStaticModel = (name, model) => {
         const context = useContext(Context);
-        invariant(model.name, 'name is required.');
+        invariant(name, 'name is required.');
         invariant(context, 'You should wrap your Component in createContainer().Provider.');
         const { store, batchManager } = context;
-        return useMemo(() => createUseStaticModel(store, batchManager), [store, batchManager])(model);
+        return useMemo(() => createUseNamedStaticModel(store, batchManager), [store, batchManager])(name, model);
     };
@@ -51,4 +52,6 @@ return {
 };
-const { Provider: DouraRoot, useSharedModel: useRootModel, useStaticModel: useRootStaticModel, } = createContainer();
+const { Provider: DouraRoot, useSharedModel: useRootModel, useStaticModel: useRootStaticModel, } = createContainer({
+    plugins: process.env.NODE_ENV === 'development' ? [[devtool]] : [],
+});
 export { DouraRoot, useRootModel, useRootStaticModel };
 export default createContainer;

esm/createUseModel.d.ts

 import { Doura, AnyModel, Selector } from 'doura';
 import { createBatchManager } from './batchManager';
+export declare const createUseNamedModel: (doura: Doura, batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel, S extends Selector<IModel, any>>(name: string, model: IModel, selector?: S | undefined, depends?: any[]) => [any, any];
 export declare const createUseModel: (doura: Doura, batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel, S extends Selector<IModel, any>>(model: IModel, selector?: S | undefined, depends?: any[]) => [any, any];
-export declare const createUseStaticModel: (doura: Doura, _batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel>(model: IModel) => [any, any];
+export declare const createUseNamedStaticModel: (doura: Doura, _batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel>(name: string, model: IModel) => [any, any];

esm/createUseModel.js

@@ -24,25 +24,9 @@ import { useDebugValue, useMemo, useRef } from 'react';
 }
-function useModel(doura, batchManager, model) {
-    const { modelInstance, subscribe } = useMemo(() => {
-        return {
-            modelInstance: doura.getModel(model),
-            subscribe: (onModelChange) => batchManager.addSubscribe(model, doura, onModelChange),
-        };
-    }, 
-    // ignore model's change
-    [doura]);
-    const view = useMemo(() => () => modelInstance.$getSnapshot(), [modelInstance]);
+function useModel(model, subscribe) {
+    const view = useMemo(() => () => model.$getSnapshot(), [model]);
     const state = useSyncExternalStore(subscribe, view, view);
     useDebugValue(state);
-    return [state, modelInstance.$actions];
+    return [state, model.$actions];
 }
-function useModelWithSelector(doura, batchManager, model, selector, depends) {
-    const { modelInstance, subscribe } = useMemo(() => {
-        return {
-            modelInstance: doura.getModel(model),
-            subscribe: (onModelChange) => batchManager.addSubscribe(model, doura, onModelChange),
-        };
-    }, 
-    // ignore model's change
-    [doura]);
+function useModelWithSelector(model, subscribe, selector, depends) {
     const selectorRef = useRef(undefined);
@@ -55,21 +39,49 @@ const view = useMemo(() => {
         }
-        mv = selectorRef.current = modelInstance.$createSelector(selector);
+        mv = selectorRef.current = model.$createView(selector);
         return mv;
-    }, [modelInstance, ...(depends ? depends : [selector])]);
+    }, [model, ...(depends ? depends : [selector])]);
     const state = useSyncExternalStore(subscribe, view, view);
     useDebugValue(state);
-    return [state, modelInstance.$actions];
+    return [state, model.$actions];
 }
+function useModelInstance(name, model, doura, batchManager) {
+    const { modelInstance, subscribe } = useMemo(() => {
+        const modelInstance = doura.getModel(name, model);
+        return {
+            modelInstance,
+            subscribe: (onModelChange) => batchManager.addSubscribe(modelInstance, onModelChange),
+        };
+    }, 
+    // ignore model's change
+    [name, doura]);
+    return {
+        modelInstance,
+        subscribe,
+    };
+}
+export const createUseNamedModel = (doura, batchManager) => (name, model, selector, depends) => {
+    const hasSelector = useRef(selector);
+    const { modelInstance, subscribe } = useModelInstance(name, model, doura, batchManager);
+    // todo: warn when hasSelector changes
+    if (hasSelector.current) {
+        return useModelWithSelector(modelInstance, subscribe, selector, depends);
+    }
+    else {
+        return useModel(modelInstance, subscribe);
+    }
+};
 export const createUseModel = (doura, batchManager) => (model, selector, depends) => {
     const hasSelector = useRef(selector);
+    const { modelInstance, subscribe } = useModelInstance('useModel', // name donen't matter here, use "@" for simplicity
+    model, doura, batchManager);
     // todo: warn when hasSelector changes
     if (hasSelector.current) {
-        return useModelWithSelector(doura, batchManager, model, selector, depends);
+        return useModelWithSelector(modelInstance, subscribe, selector, depends);
     }
     else {
-        return useModel(doura, batchManager, model);
+        return useModel(modelInstance, subscribe);
     }
 };
-export const createUseStaticModel = (doura, _batchManager) => (model) => {
-    const modelInstance = useMemo(() => doura.getModel(model), 
+export const createUseNamedStaticModel = (doura, _batchManager) => (name, model) => {
+    const modelInstance = useMemo(() => doura.getModel(name, model), 
     // ignore model's change
@@ -76,0 +88,0 @@ [doura]);

esm/types.d.ts

@@ -10,4 +10,11 @@ import { AnyModel, Selector, ModelPublicInstance, ModelData } from 'doura';
 }
-export interface IUseStaticModel {
-    <IModel extends AnyModel>(model: IModel): [
+export interface IUseNamedModel {
+    <IModel extends AnyModel>(name: string, model: IModel): [
+        ModelData<IModel>,
+        IActions<IModel>
+    ];
+    <IModel extends AnyModel, S extends Selector<IModel>>(name: string, model: IModel, selectors: S, depends?: any[]): [ReturnType<S>, IActions<IModel>];
+}
+export interface IUseNamedStaticModel {
+    <IModel extends AnyModel>(name: string, model: IModel): [
         {
@@ -14,0 +21,0 @@ current: ModelData<IModel>;

lib/batchManager.d.ts

@@ -1,6 +0,6 @@
-import type { AnyModel, Doura } from 'doura';
+import type { AnyModel, ModelPublicInstance } from 'doura';
 declare const createBatchManager: () => {
-    addSubscribe: (model: AnyModel, store: Doura, fn: () => void) => () => void;
-    triggerSubscribe: (model: AnyModel) => void;
+    addSubscribe: (model: ModelPublicInstance<AnyModel>, fn: () => void) => () => void;
+    triggerSubscribe: (model: ModelPublicInstance<AnyModel>) => void;
 };
 export { createBatchManager };

lib/batchManager.js

@@ -10,3 +10,3 @@ "use strict";
     // add models to listen
-    const addSubscribe = function (model, store, fn) {
+    const addSubscribe = function (model, fn) {
         let modelsFnSet = modelBindRender.get(model);
@@ -16,3 +16,3 @@ if (!modelsFnSet) {
             modelsFnSet.add(fn);
-            const unSubscribe = store.subscribe(model, function () {
+            const unSubscribe = model.$subscribe(function () {
                 triggerSubscribe(model); // render self;
@@ -19,0 +19,0 @@ });

lib/createContainer.d.ts

 import { PropsWithChildren } from 'react';
 import type { Doura, DouraOptions } from 'doura';
-import { IUseModel, IUseStaticModel } from './types';
+import { IUseNamedModel, IUseNamedStaticModel } from './types';
 declare const createContainer: (options?: DouraOptions) => {
@@ -8,9 +8,9 @@ Provider: (props: PropsWithChildren<{
     }>) => JSX.Element;
-    useSharedModel: IUseModel;
-    useStaticModel: IUseStaticModel;
+    useSharedModel: IUseNamedModel;
+    useStaticModel: IUseNamedStaticModel;
 };
 declare const DouraRoot: (props: PropsWithChildren<{
     store?: Doura;
-}>) => JSX.Element, useRootModel: IUseModel, useRootStaticModel: IUseStaticModel;
+}>) => JSX.Element, useRootModel: IUseNamedModel, useRootStaticModel: IUseNamedStaticModel;
 export { DouraRoot, useRootModel, useRootStaticModel };
 export default createContainer;

lib/createContainer.js

@@ -25,2 +25,5 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -30,2 +33,3 @@ exports.useRootStaticModel = exports.useRootModel = exports.DouraRoot = void 0;
 const doura_1 = require("doura");
+const devtool_1 = __importDefault(require("doura/devtool"));
 const createUseModel_1 = require("./createUseModel");
@@ -58,15 +62,15 @@ const batchManager_1 = require("./batchManager");
     }
-    const useSharedModel = (model, selector, depends) => {
+    const useSharedModel = (name, model, selector, depends) => {
         const context = (0, react_1.useContext)(Context);
-        (0, utils_1.invariant)(model.name, 'name is required.');
+        (0, utils_1.invariant)(name, 'name is required.');
         (0, utils_1.invariant)(context, 'You should wrap your Component in createContainer().Provider.');
         const { store, batchManager } = context;
-        return (0, react_1.useMemo)(() => (0, createUseModel_1.createUseModel)(store, batchManager), [store, batchManager])(model, selector, depends);
+        return (0, react_1.useMemo)(() => (0, createUseModel_1.createUseNamedModel)(store, batchManager), [store, batchManager])(name, model, selector, depends);
     };
-    const useStaticModel = (model) => {
+    const useStaticModel = (name, model) => {
         const context = (0, react_1.useContext)(Context);
-        (0, utils_1.invariant)(model.name, 'name is required.');
+        (0, utils_1.invariant)(name, 'name is required.');
         (0, utils_1.invariant)(context, 'You should wrap your Component in createContainer().Provider.');
         const { store, batchManager } = context;
-        return (0, react_1.useMemo)(() => (0, createUseModel_1.createUseStaticModel)(store, batchManager), [store, batchManager])(model);
+        return (0, react_1.useMemo)(() => (0, createUseModel_1.createUseNamedStaticModel)(store, batchManager), [store, batchManager])(name, model);
     };
@@ -79,3 +83,5 @@ return {
 };
-const { Provider: DouraRoot, useSharedModel: useRootModel, useStaticModel: useRootStaticModel, } = createContainer();
+const { Provider: DouraRoot, useSharedModel: useRootModel, useStaticModel: useRootStaticModel, } = createContainer({
+    plugins: process.env.NODE_ENV === 'development' ? [[devtool_1.default]] : [],
+});
 exports.DouraRoot = DouraRoot;
@@ -82,0 +88,0 @@ exports.useRootModel = useRootModel;

lib/createUseModel.d.ts

 import { Doura, AnyModel, Selector } from 'doura';
 import { createBatchManager } from './batchManager';
+export declare const createUseNamedModel: (doura: Doura, batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel, S extends Selector<IModel, any>>(name: string, model: IModel, selector?: S | undefined, depends?: any[]) => [any, any];
 export declare const createUseModel: (doura: Doura, batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel, S extends Selector<IModel, any>>(model: IModel, selector?: S | undefined, depends?: any[]) => [any, any];
-export declare const createUseStaticModel: (doura: Doura, _batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel>(model: IModel) => [any, any];
+export declare const createUseNamedStaticModel: (doura: Doura, _batchManager: ReturnType<typeof createBatchManager>) => <IModel extends AnyModel>(name: string, model: IModel) => [any, any];

lib/createUseModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createUseStaticModel = exports.createUseModel = void 0;
+exports.createUseNamedStaticModel = exports.createUseModel = exports.createUseNamedModel = void 0;
 const react_1 = require("react");
@@ -27,25 +27,9 @@ const doura_1 = require("doura");
 }
-function useModel(doura, batchManager, model) {
-    const { modelInstance, subscribe } = (0, react_1.useMemo)(() => {
-        return {
-            modelInstance: doura.getModel(model),
-            subscribe: (onModelChange) => batchManager.addSubscribe(model, doura, onModelChange),
-        };
-    }, 
-    // ignore model's change
-    [doura]);
-    const view = (0, react_1.useMemo)(() => () => modelInstance.$getSnapshot(), [modelInstance]);
+function useModel(model, subscribe) {
+    const view = (0, react_1.useMemo)(() => () => model.$getSnapshot(), [model]);
     const state = (0, shim_1.useSyncExternalStore)(subscribe, view, view);
     (0, react_1.useDebugValue)(state);
-    return [state, modelInstance.$actions];
+    return [state, model.$actions];
 }
-function useModelWithSelector(doura, batchManager, model, selector, depends) {
-    const { modelInstance, subscribe } = (0, react_1.useMemo)(() => {
-        return {
-            modelInstance: doura.getModel(model),
-            subscribe: (onModelChange) => batchManager.addSubscribe(model, doura, onModelChange),
-        };
-    }, 
-    // ignore model's change
-    [doura]);
+function useModelWithSelector(model, subscribe, selector, depends) {
     const selectorRef = (0, react_1.useRef)(undefined);
@@ -58,22 +42,51 @@ const view = (0, react_1.useMemo)(() => {
         }
-        mv = selectorRef.current = modelInstance.$createSelector(selector);
+        mv = selectorRef.current = model.$createView(selector);
         return mv;
-    }, [modelInstance, ...(depends ? depends : [selector])]);
+    }, [model, ...(depends ? depends : [selector])]);
     const state = (0, shim_1.useSyncExternalStore)(subscribe, view, view);
     (0, react_1.useDebugValue)(state);
-    return [state, modelInstance.$actions];
+    return [state, model.$actions];
 }
+function useModelInstance(name, model, doura, batchManager) {
+    const { modelInstance, subscribe } = (0, react_1.useMemo)(() => {
+        const modelInstance = doura.getModel(name, model);
+        return {
+            modelInstance,
+            subscribe: (onModelChange) => batchManager.addSubscribe(modelInstance, onModelChange),
+        };
+    }, 
+    // ignore model's change
+    [name, doura]);
+    return {
+        modelInstance,
+        subscribe,
+    };
+}
+const createUseNamedModel = (doura, batchManager) => (name, model, selector, depends) => {
+    const hasSelector = (0, react_1.useRef)(selector);
+    const { modelInstance, subscribe } = useModelInstance(name, model, doura, batchManager);
+    // todo: warn when hasSelector changes
+    if (hasSelector.current) {
+        return useModelWithSelector(modelInstance, subscribe, selector, depends);
+    }
+    else {
+        return useModel(modelInstance, subscribe);
+    }
+};
+exports.createUseNamedModel = createUseNamedModel;
 const createUseModel = (doura, batchManager) => (model, selector, depends) => {
     const hasSelector = (0, react_1.useRef)(selector);
+    const { modelInstance, subscribe } = useModelInstance('useModel', // name donen't matter here, use "@" for simplicity
+    model, doura, batchManager);
     // todo: warn when hasSelector changes
     if (hasSelector.current) {
-        return useModelWithSelector(doura, batchManager, model, selector, depends);
+        return useModelWithSelector(modelInstance, subscribe, selector, depends);
     }
     else {
-        return useModel(doura, batchManager, model);
+        return useModel(modelInstance, subscribe);
     }
 };
 exports.createUseModel = createUseModel;
-const createUseStaticModel = (doura, _batchManager) => (model) => {
-    const modelInstance = (0, react_1.useMemo)(() => doura.getModel(model), 
+const createUseNamedStaticModel = (doura, _batchManager) => (name, model) => {
+    const modelInstance = (0, react_1.useMemo)(() => doura.getModel(name, model), 
     // ignore model's change
@@ -98,2 +111,2 @@ [doura]);
 };
-exports.createUseStaticModel = createUseStaticModel;
+exports.createUseNamedStaticModel = createUseNamedStaticModel;

lib/types.d.ts

@@ -10,4 +10,11 @@ import { AnyModel, Selector, ModelPublicInstance, ModelData } from 'doura';
 }
-export interface IUseStaticModel {
-    <IModel extends AnyModel>(model: IModel): [
+export interface IUseNamedModel {
+    <IModel extends AnyModel>(name: string, model: IModel): [
+        ModelData<IModel>,
+        IActions<IModel>
+    ];
+    <IModel extends AnyModel, S extends Selector<IModel>>(name: string, model: IModel, selectors: S, depends?: any[]): [ReturnType<S>, IActions<IModel>];
+}
+export interface IUseNamedStaticModel {
+    <IModel extends AnyModel>(name: string, model: IModel): [
         {
@@ -14,0 +21,0 @@ current: ModelData<IModel>;

package.json

 {
   "name": "doura-react",
-  "version": "0.0.0-rc.4",
+  "version": "0.0.0-rc.5",
   "description": "Doura react integration",
@@ -8,3 +8,3 @@ "main": "lib/index.js",
   "browser": "esm/index.js",
-  "unpkg": "dist/dourareact.umd.production.min.js",
+  "unpkg": "dist/doura-react.umd.production.min.js",
   "types": "esm/index.d.ts",
@@ -27,5 +27,7 @@ "sideEffects": false,
     "doura",
-    "doura",
-    "react",
-    "redux"
+    "reactive",
+    "state management",
+    "javascript",
+    "typescript",
+    "react"
   ],
@@ -46,5 +48,5 @@ "homepage": "https://dourajs.github.io/doura",
   "files": [
+    "dist",
     "esm",
-    "lib",
-    "dist"
+    "lib"
   ],
@@ -64,3 +66,3 @@ "dependencies": {
   "peerDependencies": {
-    "doura": "0.0.0-rc.4",
+    "doura": "0.0.0-rc.5",
     "react": ">=16.8",
@@ -67,0 +69,0 @@ "react-dom": ">=16.8"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89090

increased by9.32%

Lines of code

1008

increased by8.15%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

No dependency changes