effector-react - npm Package Compare versions

Comparing version 21.3.3 to 22.0.0

compat.d.ts

@@ -80,2 +80,5 @@ import React from 'react'
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createContextComponent<Props, State, Context>(
@@ -100,2 +103,5 @@ store: Store<State>,
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createReactState<
@@ -102,0 +108,0 @@ State extends object,

compat.js

@@ -1,2 +0,2 @@
-'use strict';function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e){s.is.store(e)||p('expect useStore argument to be a store');var t=e.getState(),n=i.useReducer((function(e){return e+1}),0)[1],r=i.useRef({store:e,value:t,pending:0});return f((function(){var t=e.updates.watch((function(e){var t=r.current;t.pending||(t.value=e,t.pending=1,n(),t.pending=0)})),o=e.getState(),u=r.current;return u.store===e&&u.value!==o&&(u.value=o,u.pending=1,n(),u.pending=0),u.store=e,t}),[e]),t}function n(e,n){var r,o,u,a;n?(r=n,u=e,a=[]):(r=e.fn,u=e.store,a=e.keys,o=e.updateFilter),s.is.store(u)||p('useStoreMap expects a store'),Array.isArray(a)||p('useStoreMap expects an array as keys'),'function'!=typeof r&&p('useStoreMap expects a function');var c=i.useMemo((function(){return s.createStore(r(u.getState(),a),{updateFilter:o}).on(u,(function(e,t){return r(t,a)}))}),a),l=t(c);return f((function(){return function(){c.off(u),s.clearNode(c,{deep:1})}}),a),l}function r(e,t){return t.displayName=e,t}function o(e,n){function o(e){var r=i.useRef(e),o=t(u);f((function(){return c({props:r.current,state:u.getState()}),function(){l({props:r.current,state:u.getState()})}}),[]);var a=n(e,o);return r.current=e,a}var u;s.is.store(e)?u=e:'object'==typeof e&&null!==e?u=s.combine(e):p('shape should be a store or object with stores');var a='Unknown';u&&u.shortName&&(a=u.shortName);var c=s.createEvent(),l=s.createEvent();return o.mounted=c,o.unmounted=l,r(a+".View",o)}function u(e,n){return r("Connect("+(n.displayName||n.name||'Unknown')+")",(function(r){return i.createElement(n,Object.assign({},r,t(e)))}))}function a(e,t){void 0===t&&(t={});var n=i.useRef(null);f((function(){return e.open(n.current),function(){return e.close(n.current)}}),[e]),function(e,t){if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return 0;for(var o=0;o<n.length;o++){var u=n[o];if(e[u]!==t[u])return 0}return 1}return 0}(n.current,t)||(n.current=t,e.set(t))}Object.defineProperty(exports,'__esModule',{value:1});var c=require('react'),s=require('effector/compat'),i=e(c),f='undefined'!=typeof window?i.useLayoutEffect:i.useEffect,p=function(e){throw Error(e)};exports.connect=function(e){return function(t){var n=e;return'function'!=typeof e&&(n=t,t=e),u(t,n)}},exports.createComponent=o,exports.createContextComponent=function(e,n,o){return r((e.shortName||'Unknown')+".ContextComponent",(function(r){var u=i.useContext(n),a=t(e);return o(r,a,u)}))},exports.createGate=function(e,t){var n;return void 0===e&&(e='gate'),void 0===t&&(t={}),'object'==typeof e&&null!==e&&('defaultState'in e&&(t=e.defaultState),e.domain&&(n=e.domain),e=e.name),function(e){function t(e){return a(t,e),null}var n=e.name,o=e.domain,u=e.defaultState,a=e.hook,c=(o?o.compositeName.fullName+"/":'')+(void 0===n?'gate':n),i=s.createEvent(c+".set"),f=s.createEvent(c+".open"),p=s.createEvent(c+".close"),l=s.createStore(Boolean(0),{name:c+".status"}).on(f,(function(){return Boolean(1)})).on(p,(function(){return Boolean(0)})),v=s.createStore(u,{name:c+".state"}).on(i,(function(e,t){return t})).reset(p);if(o){var m=o.hooks;s.launch({target:[m.store,m.store,m.event,m.event,m.event],params:[l,v,f,p,i]})}return t.open=f,t.close=p,t.status=l,t.state=v,t.set=i,r("Gate:"+c,t)}({name:e,domain:n,defaultState:t,hook:a})},exports.createReactState=u,exports.createStoreConsumer=function(e){return o(e,(function(e,t){return(0,e.children)(t)}))},exports.useEvent=function(e){return e},exports.useGate=a,exports.useList=function(e,o){var u,a,c=[];'object'==typeof o&&null!==o?(o.keys&&(c=o.keys),u=o.fn,o.getKey&&(a=o.getKey)):u=o,s.is.store(e)||p('expect useList first argument to be a store'),'function'!=typeof u&&p("expect useList's renderItem to be a function"),Array.isArray(c)||p("expect useList's keys to be an array");var f=i.useMemo((function(){var t=r((e.shortName||'Unknown')+".Item",(function(t){var r=t.index,o=t.keys;if(l.current[1])return l.current[0](t.value,t.keyVal);var u=n({store:e,keys:[r].concat(o),fn:function(e,t){return e[t[0]]}});return l.current[0](u,r)}));return i.memo(t)}),[e,!!a]),l=i.useRef([u,a]);l.current=[u,a];var v=i.useMemo((function(){return c}),c);if(a)return t(e).map((function(e){var t=l.current[1](e);return i.createElement(f,{keyVal:t,key:t,keys:v,value:e})}));var m=n({store:e,keys:[e],fn:function(e){return e.length}});return Array.from({length:m},(function(e,t){return i.createElement(f,{index:t,key:t,keys:v})}))},exports.useStore=t,exports.useStoreMap=n;
+'use strict';function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e,t,n){var r=[f.step.run({fn:function(e){return t(e)}})];if(n){var o=f.createNode({node:r}),u=e.graphite.id,a=n.additionalLinks,c=a[u]||[];return a[u]=c,c.push(o),function(){var e=c.indexOf(o);-1!==e&&c.splice(e,1),f.clearNode(o)}}var i=f.createNode({node:r,parent:[e],family:{owners:e}});return function(){f.clearNode(i)}}function n(e,t){return t.displayName=e,t}function r(e,n){f.is.store(e)||v('expect useStore argument to be a store');var r=d(e,n),o=y(),u=l.useRef({store:e,value:r,pending:0});return p((function(){var r=t(e,(function(e){var t=u.current;t.pending||(t.value=e,t.pending=1,o(),t.pending=0)}),n),a=d(e,n),c=u.current;return c.store===e&&c.value!==a&&(c.value=a,c.pending=1,o(),c.pending=0),c.store=e,r}),[e,n]),r}function o(e,n){var r,o,a,c=e[0],i=e[1],s=m;i?(r=i,o=c,a=[]):(r=c.fn,o=c.store,a=c.keys,s=c.updateFilter||m),f.is.store(o)||v('useStoreMap expects a store'),Array.isArray(a)||v('useStoreMap expects an array as keys'),'function'!=typeof r&&v('useStoreMap expects a function');var x=l.useRef({}),g=x.current;g.fn=r,g.upd=s,g.init=g.store===o,g.store=o;var k=y(),h=[n].concat(a),S=l.useMemo((function(){return u(d(o,n),a,x.current),t(o,(function(e){return u(e,a,x.current,k)}),n)}),h);return p((function(){return function(){return S()}}),h),g.val}function u(e,t,n,r){var o=n.fn(e,t);n.init?void 0!==o&&m(o,n.val)&&n.upd(o,n.val)&&(n.val=o,r&&r()):(n.val=o,n.init=1)}function a(e){return r(e)}function c(e,t){function r(e){var n=l.useRef(e),r=a(o);p((function(){return c({props:n.current,state:o.getState()}),function(){i({props:n.current,state:o.getState()})}}),[]);var u=t(e,r);return n.current=e,u}var o;f.is.store(e)?o=e:'object'==typeof e&&null!==e?o=f.combine(e):v('shape should be a store or object with stores');var u='Unknown';o&&o.shortName&&(u=o.shortName);var c=f.createEvent(),i=f.createEvent();return r.mounted=c,r.unmounted=i,n(u+".View",r)}function i(e,t){void 0===t&&(t={});var n=l.useRef({value:null,count:0});p((function(){return e.open(n.current.value),function(){return e.close(n.current.value)}}),[e]),function(e,t){if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){var n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return 0;for(var o=0;o<n.length;o++){var u=n[o];if(e[u]!==t[u])return 0}return 1}return 0}(n.current.value,t)||(n.current.value=t,n.current.count+=1),p((function(){e.set(n.current.value)}),[n.current.count])}Object.defineProperty(exports,'__esModule',{value:1});var s=require('react'),f=require('effector/compat'),l=e(s),p='undefined'!=typeof window?l.useLayoutEffect:l.useEffect,v=function(e){throw Error(e)},d=function(e,t){return t?t.getState(e):e.getState()},m=function(e,t){return e!==t},y=function(){return l.useReducer((function(e){return e+1}),0)[1]},x=function(e){return console.error(e+" is deprecated")},g=function(e){return function(t){var r=e;return'function'!=typeof e&&(r=t,t=e),n("Connect("+(r.displayName||r.name||'Unknown')+")",(function(e){return l.createElement(r,Object.assign({},e,a(t)))}))}};exports.connect=g,exports.createComponent=c,exports.createContextComponent=function(e,t,r){return x('createContextComponent'),n((e.shortName||'Unknown')+".ContextComponent",(function(n){var o=l.useContext(t),u=a(e);return r(n,u,o)}))},exports.createGate=function(e,t){var r;return void 0===e&&(e='gate'),void 0===t&&(t={}),'object'==typeof e&&null!==e&&('defaultState'in e&&(t=e.defaultState),e.domain&&(r=e.domain),e=e.name),function(e){function t(e){return a(t,e),null}var r=e.name,o=e.domain,u=e.defaultState,a=e.hook,c=(o?o.compositeName.fullName+"/":'')+(void 0===r?'gate':r),i=f.createEvent(c+".set"),s=f.createEvent(c+".open"),l=f.createEvent(c+".close"),p=f.createStore(Boolean(0),{name:c+".status"}).on(s,(function(){return Boolean(1)})).on(l,(function(){return Boolean(0)})),v=f.createStore(u,{name:c+".state"}).on(i,(function(e,t){return t})).reset(l);if(o){var d=o.hooks;f.launch({target:[d.store,d.store,d.event,d.event,d.event],params:[p,v,s,l,i]})}return t.open=s,t.close=l,t.status=p,t.state=v,t.set=i,n("Gate:"+c,t)}({name:e,domain:r,defaultState:t,hook:i})},exports.createReactState=function(e,t){return x('createReactState'),g(t)(e)},exports.createStoreConsumer=function(e){return c(e,(function(e,t){return(0,e.children)(t)}))},exports.useEvent=function(e){return e},exports.useGate=i,exports.useList=function(e,t){return function(e,t,u){var a,c,i=[];'object'==typeof t&&null!==t?(t.keys&&(i=t.keys),a=t.fn,t.getKey&&(c=t.getKey)):a=t,f.is.store(e)||v('expect useList first argument to be a store'),'function'!=typeof a&&v("expect useList's renderItem to be a function"),Array.isArray(i)||v("expect useList's keys to be an array");var s=l.useMemo((function(){var t=n((e.shortName||'Unknown')+".Item",(function(t){var n=t.index,r=t.keys;if(p.current[1])return p.current[0](t.value,t.keyVal);var a=o([{store:e,keys:[n].concat(r),fn:function(e,t){return e[t[0]]}}],u);return p.current[0](a,n)}));return l.memo(t)}),[e,u,!!c]),p=l.useRef([a,c]);p.current=[a,c];var d=l.useMemo((function(){return i}),i);if(c)return r(e,u).map((function(e){var t=p.current[1](e);return l.createElement(s,{keyVal:t,key:t,keys:d,value:e})}));var m=o([{store:e,keys:[e],fn:function(e){return e.length}}],u);return Array.from({length:m},(function(e,t){return l.createElement(s,{index:t,key:t,keys:d})}))}(e,t)},exports.useStore=a,exports.useStoreMap=function(e,t){return o([e,t])};
 //# sourceMappingURL=compat.js.map

effector-react.cjs.d.ts

@@ -80,2 +80,5 @@ import React from 'react'
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createContextComponent<Props, State, Context>(
@@ -100,2 +103,5 @@ store: Store<State>,
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createReactState<
@@ -102,0 +108,0 @@ State extends object,

effector-react.cjs.js

@@ -1,2 +0,2 @@
-function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e){effector.is.store(e)||i('expect useStore argument to be a store');let t=e.getState(),r=l.useReducer((e=>e+1),0)[1],n=l.useRef({store:e,value:t,pending:0});return c((()=>{let t=e.updates.watch((e=>{let t=n.current;t.pending||(t.value=e,t.pending=1,r(),t.pending=0)})),o=e.getState(),a=n.current;return a.store===e&&a.value!==o&&(a.value=o,a.pending=1,r(),a.pending=0),a.store=e,t}),[e]),t}function r(e,r){let n,o,a,s;r?(n=r,a=e,s=[]):(n=e.fn,a=e.store,s=e.keys,o=e.updateFilter),effector.is.store(a)||i('useStoreMap expects a store'),Array.isArray(s)||i('useStoreMap expects an array as keys'),'function'!=typeof n&&i('useStoreMap expects a function');let u=l.useMemo((()=>effector.createStore(n(a.getState(),s),{updateFilter:o}).on(a,((e,t)=>n(t,s)))),s),p=t(u);return c((()=>()=>{u.off(a),effector.clearNode(u,{deep:1})}),s),p}function n(e,t){return t.displayName=e,t}function o(e,r){function o(e){let n=l.useRef(e),o=t(a);c((()=>(u({props:n.current,state:a.getState()}),()=>{p({props:n.current,state:a.getState()})})),[]);let s=r(e,o);return n.current=e,s}let a;effector.is.store(e)?a=e:'object'==typeof e&&null!==e?a=effector.combine(e):i('shape should be a store or object with stores');let s='Unknown';a&&a.shortName&&(s=a.shortName);let u=effector.createEvent(),p=effector.createEvent();return o.mounted=u,o.unmounted=p,n(`${s}.View`,o)}function a(e,r){return n(`Connect(${r.displayName||r.name||'Unknown'})`,(n=>l.createElement(r,Object.assign({},n,t(e)))))}function s(e,t={}){let r=l.useRef(null);c((()=>(e.open(r.current),()=>e.close(r.current))),[e]),((e,t)=>{if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){let r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return 0;for(let n=0;n<r.length;n++){let o=r[n];if(e[o]!==t[o])return 0}return 1}return 0})(r.current,t)||(r.current=t,e.set(t))}Object.defineProperty(exports,'__esModule',{value:1});var u=require('react'),effector=require('effector'),l=e(u);let c='undefined'!=typeof window?l.useLayoutEffect:l.useEffect,i=e=>{throw Error(e)};exports.connect=e=>t=>{let r=e;return'function'!=typeof e&&(r=t,t=e),a(t,r)},exports.createComponent=o,exports.createContextComponent=(e,r,o)=>n(`${e.shortName||'Unknown'}.ContextComponent`,(n=>{let a=l.useContext(r),s=t(e);return o(n,s,a)})),exports.createGate=(e="gate",t={})=>{let r;return'object'==typeof e&&null!==e&&('defaultState'in e&&(t=e.defaultState),e.domain&&(r=e.domain),e=e.name),(({name:e="gate",domain:t,defaultState:r,hook:o})=>{function a(e){return o(a,e),null}let s=`${t?`${t.compositeName.fullName}/`:''}${e}`,u=effector.createEvent(`${s}.set`),l=effector.createEvent(`${s}.open`),c=effector.createEvent(`${s}.close`),i=effector.createStore(Boolean(0),{name:`${s}.status`}).on(l,(()=>Boolean(1))).on(c,(()=>Boolean(0))),p=effector.createStore(r,{name:`${s}.state`}).on(u,((e,t)=>t)).reset(c);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[i,p,l,c,u]})}return a.open=l,a.close=c,a.status=i,a.state=p,a.set=u,n(`Gate:${s}`,a)})({name:e,domain:r,defaultState:t,hook:s})},exports.createReactState=a,exports.createStoreConsumer=e=>o(e,(({children:e},t)=>e(t))),exports.useEvent=e=>e,exports.useGate=s,exports.useList=(e,o)=>{let a,s,u=[];'object'==typeof o&&null!==o?(o.keys&&(u=o.keys),a=o.fn,o.getKey&&(s=o.getKey)):a=o,effector.is.store(e)||i('expect useList first argument to be a store'),'function'!=typeof a&&i("expect useList's renderItem to be a function"),Array.isArray(u)||i("expect useList's keys to be an array");let c=l.useMemo((()=>{let t=n(`${e.shortName||'Unknown'}.Item`,(t=>{let{index:n,keys:o,keyVal:a,value:s}=t;if(p.current[1])return p.current[0](s,a);let u=r({store:e,keys:[n,...o],fn:(e,t)=>e[t[0]]});return p.current[0](u,n)}));return l.memo(t)}),[e,!!s]),p=l.useRef([a,s]);p.current=[a,s];let f=l.useMemo((()=>u),u);if(s)return t(e).map((e=>{let t=p.current[1](e);return l.createElement(c,{keyVal:t,key:t,keys:f,value:e})}));{let t=r({store:e,keys:[e],fn:e=>e.length});return Array.from({length:t},((e,t)=>l.createElement(c,{index:t,key:t,keys:f})))}},exports.useStore=t,exports.useStoreMap=r;
+function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e,t,r){let n=[effector.step.run({fn:e=>t(e)})];if(r){let t=effector.createNode({node:n}),o=e.graphite.id,u=r.additionalLinks,a=u[o]||[];return u[o]=a,a.push(t),()=>{let e=a.indexOf(t);-1!==e&&a.splice(e,1),effector.clearNode(t)}}{let t=effector.createNode({node:n,parent:[e],family:{owners:e}});return()=>{effector.clearNode(t)}}}function r(e,t){return t.displayName=e,t}function n(e,r){effector.is.store(e)||p('expect useStore argument to be a store');let n=d(e,r),o=y(),u=i.useRef({store:e,value:n,pending:0});return f((()=>{let n=t(e,(e=>{let t=u.current;t.pending||(t.value=e,t.pending=1,o(),t.pending=0)}),r),a=d(e,r),s=u.current;return s.store===e&&s.value!==a&&(s.value=a,s.pending=1,o(),s.pending=0),s.store=e,n}),[e,r]),n}function o([e,r],n){let o,a,s,l=m;r?(o=r,a=e,s=[]):(o=e.fn,a=e.store,s=e.keys,l=e.updateFilter||m),effector.is.store(a)||p('useStoreMap expects a store'),Array.isArray(s)||p('useStoreMap expects an array as keys'),'function'!=typeof o&&p('useStoreMap expects a function');let c=i.useRef({}),v=c.current;v.fn=o,v.upd=l,v.init=v.store===a,v.store=a;let x=y(),k=[n,...s],g=i.useMemo((()=>(u(d(a,n),s,c.current),t(a,(e=>u(e,s,c.current,x)),n))),k);return f((()=>()=>g()),k),v.val}function u(e,t,r,n){let o=r.fn(e,t);r.init?void 0!==o&&m(o,r.val)&&r.upd(o,r.val)&&(r.val=o,n&&n()):(r.val=o,r.init=1)}function a(e){return n(e)}function s(e,t){function n(e){let r=i.useRef(e),n=a(o);f((()=>(s({props:r.current,state:o.getState()}),()=>{l({props:r.current,state:o.getState()})})),[]);let u=t(e,n);return r.current=e,u}let o;effector.is.store(e)?o=e:'object'==typeof e&&null!==e?o=effector.combine(e):p('shape should be a store or object with stores');let u='Unknown';o&&o.shortName&&(u=o.shortName);let s=effector.createEvent(),l=effector.createEvent();return n.mounted=s,n.unmounted=l,r(`${u}.View`,n)}function l(e,t={}){let r=i.useRef({value:null,count:0});f((()=>(e.open(r.current.value),()=>e.close(r.current.value))),[e]),((e,t)=>{if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){let r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return 0;for(let n=0;n<r.length;n++){let o=r[n];if(e[o]!==t[o])return 0}return 1}return 0})(r.current.value,t)||(r.current.value=t,r.current.count+=1),f((()=>{e.set(r.current.value)}),[r.current.count])}Object.defineProperty(exports,'__esModule',{value:1});var c=require('react'),effector=require('effector'),i=e(c);let f='undefined'!=typeof window?i.useLayoutEffect:i.useEffect,p=e=>{throw Error(e)};const d=(e,t)=>t?t.getState(e):e.getState(),m=(e,t)=>e!==t,y=()=>i.useReducer((e=>e+1),0)[1];let v=e=>console.error(`${e} is deprecated`),x=e=>t=>{let n=e;return'function'!=typeof e&&(n=t,t=e),r(`Connect(${n.displayName||n.name||'Unknown'})`,(e=>i.createElement(n,{...e,...a(t)})))};exports.connect=x,exports.createComponent=s,exports.createContextComponent=(e,t,n)=>(v('createContextComponent'),r(`${e.shortName||'Unknown'}.ContextComponent`,(r=>{let o=i.useContext(t),u=a(e);return n(r,u,o)}))),exports.createGate=(e="gate",t={})=>{let n;return'object'==typeof e&&null!==e&&('defaultState'in e&&(t=e.defaultState),e.domain&&(n=e.domain),e=e.name),(({name:e="gate",domain:t,defaultState:n,hook:o})=>{function u(e){return o(u,e),null}let a=`${t?`${t.compositeName.fullName}/`:''}${e}`,s=effector.createEvent(`${a}.set`),l=effector.createEvent(`${a}.open`),c=effector.createEvent(`${a}.close`),i=effector.createStore(Boolean(0),{name:`${a}.status`}).on(l,(()=>Boolean(1))).on(c,(()=>Boolean(0))),f=effector.createStore(n,{name:`${a}.state`}).on(s,((e,t)=>t)).reset(c);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[i,f,l,c,s]})}return u.open=l,u.close=c,u.status=i,u.state=f,u.set=s,r(`Gate:${a}`,u)})({name:e,domain:n,defaultState:t,hook:l})},exports.createReactState=(e,t)=>(v('createReactState'),x(t)(e)),exports.createStoreConsumer=e=>s(e,(({children:e},t)=>e(t))),exports.useEvent=e=>e,exports.useGate=l,exports.useList=(e,t)=>((e,t,u)=>{let a,s,l=[];'object'==typeof t&&null!==t?(t.keys&&(l=t.keys),a=t.fn,t.getKey&&(s=t.getKey)):a=t,effector.is.store(e)||p('expect useList first argument to be a store'),'function'!=typeof a&&p("expect useList's renderItem to be a function"),Array.isArray(l)||p("expect useList's keys to be an array");let c=i.useMemo((()=>{let t=r(`${e.shortName||'Unknown'}.Item`,(t=>{let{index:r,keys:n,keyVal:a,value:s}=t;if(f.current[1])return f.current[0](s,a);let l=o([{store:e,keys:[r,...n],fn:(e,t)=>e[t[0]]}],u);return f.current[0](l,r)}));return i.memo(t)}),[e,u,!!s]),f=i.useRef([a,s]);f.current=[a,s];let d=i.useMemo((()=>l),l);if(s)return n(e,u).map((e=>{let t=f.current[1](e);return i.createElement(c,{keyVal:t,key:t,keys:d,value:e})}));{let t=o([{store:e,keys:[e],fn:e=>e.length}],u);return Array.from({length:t},((e,t)=>i.createElement(c,{index:t,key:t,keys:d})))}})(e,t),exports.useStore=a,exports.useStoreMap=(e,t)=>o([e,t]);
 //# sourceMappingURL=effector-react.cjs.js.map

effector-react.mjs.d.ts

@@ -80,2 +80,5 @@ import React from 'react'
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createContextComponent<Props, State, Context>(
@@ -100,2 +103,5 @@ store: Store<State>,
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createReactState<
@@ -102,0 +108,0 @@ State extends object,

effector-react.umd.d.ts

@@ -80,2 +80,5 @@ import React from 'react'
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createContextComponent<Props, State, Context>(
@@ -100,2 +103,5 @@ store: Store<State>,
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createReactState<
@@ -102,0 +108,0 @@ State extends object,

effector-react.umd.js

@@ -1,2 +0,2 @@
-((e,t)=>{'object'==typeof exports&&'undefined'!=typeof module?t(exports,require('react'),require('effector')):'function'==typeof define&&define.amd?define(['exports','react','effector'],t):t((e='undefined'!=typeof globalThis?globalThis:e||self).effectorReact={},e.React,e.effector)})(this,((e,t,effector)=>{function n(e){return e&&'object'==typeof e&&'default'in e?e:{default:e}}function r(e){effector.is.store(e)||i('expect useStore argument to be a store');let t=e.getState(),n=f.default.useReducer((e=>e+1),0)[1],r=f.default.useRef({store:e,value:t,pending:0});return c((()=>{let t=e.updates.watch((e=>{let t=r.current;t.pending||(t.value=e,t.pending=1,n(),t.pending=0)})),o=e.getState(),a=r.current;return a.store===e&&a.value!==o&&(a.value=o,a.pending=1,n(),a.pending=0),a.store=e,t}),[e]),t}function o(e,t){let n,o,a,u;t?(n=t,a=e,u=[]):(n=e.fn,a=e.store,u=e.keys,o=e.updateFilter),effector.is.store(a)||i('useStoreMap expects a store'),Array.isArray(u)||i('useStoreMap expects an array as keys'),'function'!=typeof n&&i('useStoreMap expects a function');let s=f.default.useMemo((()=>effector.createStore(n(a.getState(),u),{updateFilter:o}).on(a,((e,t)=>n(t,u)))),u),l=r(s);return c((()=>()=>{s.off(a),effector.clearNode(s,{deep:1})}),u),l}function a(e,t){return t.displayName=e,t}function u(e,t){function n(e){let n=f.default.useRef(e),a=r(o);c((()=>(s({props:n.current,state:o.getState()}),()=>{l({props:n.current,state:o.getState()})})),[]);let u=t(e,a);return n.current=e,u}let o;effector.is.store(e)?o=e:'object'==typeof e&&null!==e?o=effector.combine(e):i('shape should be a store or object with stores');let u='Unknown';o&&o.shortName&&(u=o.shortName);let s=effector.createEvent(),l=effector.createEvent();return n.mounted=s,n.unmounted=l,a(`${u}.View`,n)}function s(e,t){return a(`Connect(${t.displayName||t.name||'Unknown'})`,(n=>f.default.createElement(t,Object.assign({},n,r(e)))))}function l(e,t={}){let n=f.default.useRef(null);c((()=>(e.open(n.current),()=>e.close(n.current))),[e]),((e,t)=>{if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){let n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return 0;for(let r=0;r<n.length;r++){let o=n[r];if(e[o]!==t[o])return 0}return 1}return 0})(n.current,t)||(n.current=t,e.set(t))}var f=n(t);let c='undefined'!=typeof window?f.default.useLayoutEffect:f.default.useEffect,i=e=>{throw Error(e)};e.connect=e=>t=>{let n=e;return'function'!=typeof e&&(n=t,t=e),s(t,n)},e.createComponent=u,e.createContextComponent=(e,t,n)=>a(`${e.shortName||'Unknown'}.ContextComponent`,(o=>{let a=f.default.useContext(t),u=r(e);return n(o,u,a)})),e.createGate=(e="gate",t={})=>{let n;return'object'==typeof e&&null!==e&&('defaultState'in e&&(t=e.defaultState),e.domain&&(n=e.domain),e=e.name),(({name:e="gate",domain:t,defaultState:n,hook:r})=>{function o(e){return r(o,e),null}let u=`${t?`${t.compositeName.fullName}/`:''}${e}`,s=effector.createEvent(`${u}.set`),l=effector.createEvent(`${u}.open`),f=effector.createEvent(`${u}.close`),c=effector.createStore(Boolean(0),{name:`${u}.status`}).on(l,(()=>Boolean(1))).on(f,(()=>Boolean(0))),i=effector.createStore(n,{name:`${u}.state`}).on(s,((e,t)=>t)).reset(f);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[c,i,l,f,s]})}return o.open=l,o.close=f,o.status=c,o.state=i,o.set=s,a(`Gate:${u}`,o)})({name:e,domain:n,defaultState:t,hook:l})},e.createReactState=s,e.createStoreConsumer=e=>u(e,(({children:e},t)=>e(t))),e.useEvent=e=>e,e.useGate=l,e.useList=(e,t)=>{let n,u,s=[];'object'==typeof t&&null!==t?(t.keys&&(s=t.keys),n=t.fn,t.getKey&&(u=t.getKey)):n=t,effector.is.store(e)||i('expect useList first argument to be a store'),'function'!=typeof n&&i("expect useList's renderItem to be a function"),Array.isArray(s)||i("expect useList's keys to be an array");let l=f.default.useMemo((()=>{let t=a(`${e.shortName||'Unknown'}.Item`,(t=>{let{index:n,keys:r,keyVal:a,value:u}=t;if(c.current[1])return c.current[0](u,a);let s=o({store:e,keys:[n,...r],fn:(e,t)=>e[t[0]]});return c.current[0](s,n)}));return f.default.memo(t)}),[e,!!u]),c=f.default.useRef([n,u]);c.current=[n,u];let d=f.default.useMemo((()=>s),s);if(u)return r(e).map((e=>{let t=c.current[1](e);return f.default.createElement(l,{keyVal:t,key:t,keys:d,value:e})}));{let t=o({store:e,keys:[e],fn:e=>e.length});return Array.from({length:t},((e,t)=>f.default.createElement(l,{index:t,key:t,keys:d})))}},e.useStore=r,e.useStoreMap=o,Object.defineProperty(e,'__esModule',{value:1})}));
+((e,t)=>{'object'==typeof exports&&'undefined'!=typeof module?t(exports,require('react'),require('effector')):'function'==typeof define&&define.amd?define(['exports','react','effector'],t):t((e='undefined'!=typeof globalThis?globalThis:e||self).effectorReact={},e.React,e.effector)})(this,((e,t,effector)=>{function n(e){return e&&'object'==typeof e&&'default'in e?e:{default:e}}function r(e,t,n){let r=[effector.step.run({fn:e=>t(e)})];if(n){let t=effector.createNode({node:r}),o=e.graphite.id,u=n.additionalLinks,a=u[o]||[];return u[o]=a,a.push(t),()=>{let e=a.indexOf(t);-1!==e&&a.splice(e,1),effector.clearNode(t)}}{let t=effector.createNode({node:r,parent:[e],family:{owners:e}});return()=>{effector.clearNode(t)}}}function o(e,t){return t.displayName=e,t}function u(e,t){effector.is.store(e)||p('expect useStore argument to be a store');let n=m(e,t),o=v(),u=i.default.useRef({store:e,value:n,pending:0});return d((()=>{let n=r(e,(e=>{let t=u.current;t.pending||(t.value=e,t.pending=1,o(),t.pending=0)}),t),a=m(e,t),l=u.current;return l.store===e&&l.value!==a&&(l.value=a,l.pending=1,o(),l.pending=0),l.store=e,n}),[e,t]),n}function a([e,t],n){let o,u,a,s=y;t?(o=t,u=e,a=[]):(o=e.fn,u=e.store,a=e.keys,s=e.updateFilter||y),effector.is.store(u)||p('useStoreMap expects a store'),Array.isArray(a)||p('useStoreMap expects an array as keys'),'function'!=typeof o&&p('useStoreMap expects a function');let c=i.default.useRef({}),f=c.current;f.fn=o,f.upd=s,f.init=f.store===u,f.store=u;let g=v(),k=[n,...a],h=i.default.useMemo((()=>(l(m(u,n),a,c.current),r(u,(e=>l(e,a,c.current,g)),n))),k);return d((()=>()=>h()),k),f.val}function l(e,t,n,r){let o=n.fn(e,t);n.init?void 0!==o&&y(o,n.val)&&n.upd(o,n.val)&&(n.val=o,r&&r()):(n.val=o,n.init=1)}function s(e){return u(e)}function c(e,t){function n(e){let n=i.default.useRef(e),o=s(r);d((()=>(a({props:n.current,state:r.getState()}),()=>{l({props:n.current,state:r.getState()})})),[]);let u=t(e,o);return n.current=e,u}let r;effector.is.store(e)?r=e:'object'==typeof e&&null!==e?r=effector.combine(e):p('shape should be a store or object with stores');let u='Unknown';r&&r.shortName&&(u=r.shortName);let a=effector.createEvent(),l=effector.createEvent();return n.mounted=a,n.unmounted=l,o(`${u}.View`,n)}function f(e,t={}){let n=i.default.useRef({value:null,count:0});d((()=>(e.open(n.current.value),()=>e.close(n.current.value))),[e]),((e,t)=>{if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){let n=Object.keys(e),r=Object.keys(t);if(n.length!==r.length)return 0;for(let r=0;r<n.length;r++){let o=n[r];if(e[o]!==t[o])return 0}return 1}return 0})(n.current.value,t)||(n.current.value=t,n.current.count+=1),d((()=>{e.set(n.current.value)}),[n.current.count])}var i=n(t);let d='undefined'!=typeof window?i.default.useLayoutEffect:i.default.useEffect,p=e=>{throw Error(e)};const m=(e,t)=>t?t.getState(e):e.getState(),y=(e,t)=>e!==t,v=()=>i.default.useReducer((e=>e+1),0)[1];let g=e=>console.error(`${e} is deprecated`),k=e=>t=>{let n=e;return'function'!=typeof e&&(n=t,t=e),o(`Connect(${n.displayName||n.name||'Unknown'})`,(e=>i.default.createElement(n,{...e,...s(t)})))};e.connect=k,e.createComponent=c,e.createContextComponent=(e,t,n)=>(g('createContextComponent'),o(`${e.shortName||'Unknown'}.ContextComponent`,(r=>{let o=i.default.useContext(t),u=s(e);return n(r,u,o)}))),e.createGate=(e="gate",t={})=>{let n;return'object'==typeof e&&null!==e&&('defaultState'in e&&(t=e.defaultState),e.domain&&(n=e.domain),e=e.name),(({name:e="gate",domain:t,defaultState:n,hook:r})=>{function u(e){return r(u,e),null}let a=`${t?`${t.compositeName.fullName}/`:''}${e}`,l=effector.createEvent(`${a}.set`),s=effector.createEvent(`${a}.open`),c=effector.createEvent(`${a}.close`),f=effector.createStore(Boolean(0),{name:`${a}.status`}).on(s,(()=>Boolean(1))).on(c,(()=>Boolean(0))),i=effector.createStore(n,{name:`${a}.state`}).on(l,((e,t)=>t)).reset(c);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[f,i,s,c,l]})}return u.open=s,u.close=c,u.status=f,u.state=i,u.set=l,o(`Gate:${a}`,u)})({name:e,domain:n,defaultState:t,hook:f})},e.createReactState=(e,t)=>(g('createReactState'),k(t)(e)),e.createStoreConsumer=e=>c(e,(({children:e},t)=>e(t))),e.useEvent=e=>e,e.useGate=f,e.useList=(e,t)=>((e,t,n)=>{let r,l,s=[];'object'==typeof t&&null!==t?(t.keys&&(s=t.keys),r=t.fn,t.getKey&&(l=t.getKey)):r=t,effector.is.store(e)||p('expect useList first argument to be a store'),'function'!=typeof r&&p("expect useList's renderItem to be a function"),Array.isArray(s)||p("expect useList's keys to be an array");let c=i.default.useMemo((()=>{let t=o(`${e.shortName||'Unknown'}.Item`,(t=>{let{index:r,keys:o,keyVal:u,value:l}=t;if(f.current[1])return f.current[0](l,u);let s=a([{store:e,keys:[r,...o],fn:(e,t)=>e[t[0]]}],n);return f.current[0](s,r)}));return i.default.memo(t)}),[e,n,!!l]),f=i.default.useRef([r,l]);f.current=[r,l];let d=i.default.useMemo((()=>s),s);if(l)return u(e,n).map((e=>{let t=f.current[1](e);return i.default.createElement(c,{keyVal:t,key:t,keys:d,value:e})}));{let t=a([{store:e,keys:[e],fn:e=>e.length}],n);return Array.from({length:t},((e,t)=>i.default.createElement(c,{index:t,key:t,keys:d})))}})(e,t),e.useStore=s,e.useStoreMap=(e,t)=>a([e,t]),Object.defineProperty(e,'__esModule',{value:1})}));
 //# sourceMappingURL=effector-react.umd.js.map

index.d.ts

@@ -80,2 +80,5 @@ import React from 'react'
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createContextComponent<Props, State, Context>(
@@ -100,2 +103,5 @@ store: Store<State>,
 
+/**
+ * @deprecated use useStore hook instead
+ */
 export function createReactState<
@@ -102,0 +108,0 @@ State extends object,

package.json

 {
   "name": "effector-react",
-  "version": "21.3.3",
+  "version": "22.0.0",
   "description": "React bindings for effector",
@@ -9,2 +9,3 @@ "main": "effector-react.cjs.js",
     ".": {
+      "import": "./effector-react.mjs",
       "require": "./effector-react.cjs.js",
@@ -14,3 +15,9 @@ "default": "./effector-react.mjs"
     "./effector-react.mjs": "./effector-react.mjs",
+    "./scope": {
+      "import": "./scope.mjs",
+      "require": "./scope.js",
+      "default": "./scope.mjs"
+    },
     "./ssr": {
+      "import": "./ssr.mjs",
       "require": "./ssr.js",
@@ -26,4 +33,4 @@ "default": "./ssr.mjs"
   "peerDependencies": {
-    "react": ">=16.8.0 <18.0.0",
-    "effector": "^21.8.0"
+    "react": "^17.0.0",
+    "effector": "^22.0.0"
   },
@@ -50,2 +57,6 @@ "files": [
     "compat.d.ts",
+    "scope.js",
+    "scope.js.map",
+    "scope.mjs",
+    "scope.mjs.map",
     "ssr.js",
@@ -55,2 +66,3 @@ "ssr.js.map",
     "ssr.mjs.map",
+    "scope.d.ts",
     "ssr.d.ts"
@@ -85,3 +97,3 @@ ],
   "repository": "https://github.com/effector/effector",
-  "bugs": "https://github.com/effector/effector/issues",
+  "bugs": "https://github.com/effector/effector/issues?q=is:issue+label:effector-react,effector-react%2Fscope",
   "homepage": "https://effector.dev",
@@ -88,0 +100,0 @@ "engines": {

ssr.js

@@ -1,2 +0,2 @@
-function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e){effector.is.store(e)||d('expect useStore argument to be a store');let t=e.getState(),r=f.useReducer((e=>e+1),0)[1],n=f.useRef({store:e,value:t,pending:0});return p((()=>{let t=e.updates.watch((e=>{let t=n.current;t.pending||(t.value=e,t.pending=1,r(),t.pending=0)})),o=e.getState(),s=n.current;return s.store===e&&s.value!==o&&(s.value=o,s.pending=1,r(),s.pending=0),s.store=e,t}),[e]),t}function r(e,r){let n,o,s,a;r?(n=r,s=e,a=[]):(n=e.fn,s=e.store,a=e.keys,o=e.updateFilter),effector.is.store(s)||d('useStoreMap expects a store'),Array.isArray(a)||d('useStoreMap expects an array as keys'),'function'!=typeof n&&d('useStoreMap expects a function');let u=f.useMemo((()=>effector.createStore(n(s.getState(),a),{updateFilter:o}).on(s,((e,t)=>n(t,a)))),a),l=t(u);return p((()=>()=>{u.off(s),effector.clearNode(u,{deep:1})}),a),l}function n(e,t){return t.displayName=e,t}function o(e){let t=f.useContext(m);if(!t)throw Error('No scope found, consider adding <Provider> to app root');return t.find(e).meta.wrapped}function s(e,t={}){let r=c(e.open),n=c(e.close),o=c(e.set);((e,t={})=>{let r=f.useRef(null);p((()=>(e.open(r.current),()=>e.close(r.current))),[e]),((e,t)=>{if(e===t)return 1;if('object'==typeof e&&null!==e&&'object'==typeof t&&null!==t){let r=Object.keys(e),n=Object.keys(t);if(r.length!==n.length)return 0;for(let n=0;n<r.length;n++){let o=r[n];if(e[o]!==t[o])return 0}return 1}return 0})(r.current,t)||(r.current=t,e.set(t))})(f.useMemo((()=>({open:r,close:n,set:o})),[e,r]),t)}function a(e,t){return n(`Connect(${t.displayName||t.name||'Unknown'})`,(r=>f.createElement(t,Object.assign({},r,u(e)))))}function u(e){return t(o(e))}function l(e,t){let r=t.find(e);return effector.is.effect(e)?e=>{let n=(()=>{let e={};return e.req=new Promise(((t,r)=>{e.rs=t,e.rj=r})),e.req.catch((()=>{})),e})();return effector.launch({target:r,params:{params:e,req:n},forkPage:t}),n.req}:e=>(effector.launch({target:r,params:e,forkPage:t}),e)}function c(e){let t=f.useContext(m),r=effector.is.unit(e)||'object'!=typeof e?{event:e}:e;return f.useMemo((()=>{if(effector.is.unit(e))return l(e,t);let r=Array.isArray(e)?[]:{};for(let n in e)r[n]=l(e[n],t);return r}),[t,...Object.keys(r),...Object.values(r)])}Object.defineProperty(exports,'__esModule',{value:1});var i=require('react'),effector=require('effector'),f=e(i);let p='undefined'!=typeof window?f.useLayoutEffect:f.useEffect,d=e=>{throw Error(e)};const m=f.createContext(null);let{Provider:y}=m;exports.Provider=y,exports.connect=e=>t=>a(t,e),exports.createComponent=()=>{throw new Error('not implemented')},exports.createContextComponent=(e,t,r)=>n=>{let o=f.useContext(t),s=u(e);return r(n,s,o)},exports.createGate=e=>{if(!e||!effector.is.domain(e.domain))throw Error('config.domain should exists');return(({name:e="gate",domain:t,defaultState:r,hook:o})=>{function s(e){return o(s,e),null}let a=`${t?`${t.compositeName.fullName}/`:''}${e}`,u=effector.createEvent(`${a}.set`),l=effector.createEvent(`${a}.open`),c=effector.createEvent(`${a}.close`),i=effector.createStore(Boolean(0),{name:`${a}.status`}).on(l,(()=>Boolean(1))).on(c,(()=>Boolean(0))),f=effector.createStore(r,{name:`${a}.state`}).on(u,((e,t)=>t)).reset(c);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[i,f,l,c,u]})}return s.open=l,s.close=c,s.status=i,s.state=f,s.set=u,n(`Gate:${a}`,s)})({domain:e.domain,name:e.name,defaultState:'defaultState'in e?e.defaultState:{},hook:s})},exports.createReactState=a,exports.createStoreConsumer=e=>t=>{let r=u(e);return t.children(r)},exports.useEvent=c,exports.useGate=s,exports.useList=(e,s)=>((e,o)=>{let s,a,u=[];'object'==typeof o&&null!==o?(o.keys&&(u=o.keys),s=o.fn,o.getKey&&(a=o.getKey)):s=o,effector.is.store(e)||d('expect useList first argument to be a store'),'function'!=typeof s&&d("expect useList's renderItem to be a function"),Array.isArray(u)||d("expect useList's keys to be an array");let l=f.useMemo((()=>{let t=n(`${e.shortName||'Unknown'}.Item`,(t=>{let{index:n,keys:o,keyVal:s,value:a}=t;if(c.current[1])return c.current[0](a,s);let u=r({store:e,keys:[n,...o],fn:(e,t)=>e[t[0]]});return c.current[0](u,n)}));return f.memo(t)}),[e,!!a]),c=f.useRef([s,a]);c.current=[s,a];let i=f.useMemo((()=>u),u);if(a)return t(e).map((e=>{let t=c.current[1](e);return f.createElement(l,{keyVal:t,key:t,keys:i,value:e})}));{let t=r({store:e,keys:[e],fn:e=>e.length});return Array.from({length:t},((e,t)=>f.createElement(l,{index:t,key:t,keys:i})))}})(o(e),s),exports.useStore=u,exports.useStoreMap=(e,t)=>t?r(o(e),t):r({store:o(e.store),keys:e.keys,fn:e.fn,updateFilter:e.updateFilter});
+Object.defineProperty(exports,'__esModule',{value:1});var e=require('effector-react/scope');exports.Provider=e.Provider,exports.connect=e.connect,exports.createComponent=e.createComponent,exports.createContextComponent=e.createContextComponent,exports.createGate=e.createGate,exports.createReactState=e.createReactState,exports.createStoreConsumer=e.createStoreConsumer,exports.useEvent=e.useEvent,exports.useGate=e.useGate,exports.useList=e.useList,exports.useStore=e.useStore,exports.useStoreMap=e.useStoreMap;
 //# sourceMappingURL=ssr.js.map

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

211579

increased by19.74%

Number of package files

30

increased by20%

Lines of code

830

increased by12.47%

Worsened metrics

Number of low quality alerts

5

increased by25%

No dependency changes