effector-react - npm Package Compare versions

Comparing version 21.2.1 to 21.3.0

compat.d.ts

@@ -28,3 +28,16 @@ import React from 'react'
   readonly fn: (state: State, keys: Keys) => Result
+  readonly updateFilter?: (update: Result, current: Result) => boolean
 }): Result
+export function useStoreMap<State, Result>(
+  store: Store<State>,
+  fn: (state: State) => Result,
+): Result
+export function useList<T, Key extends React.Key>(
+  list: Store<T[]> | Store<ReadonlyArray<T>>,
+  renderItem: {
+    readonly keys?: any[]
+    readonly fn: (item: T, key: Key) => React.ReactNode
+    readonly getKey: (item: T) => Key
+  },
+): JSX.Element
 export function useList<T>(
@@ -31,0 +44,0 @@ list: Store<T[]> | Store<ReadonlyArray<T>>,

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){c.is.store(e)||p('expect useStore argument to be a store');var t=f.useRef(e),n=f.useState(e.getState())[1];return i((function(){return t.current===e&&n(e.getState()),t.current=e,e.updates.watch(n)}),[e]),e.getState()}function n(e){var n=e.store,r=e.keys,o=e.fn;c.is.store(n)||p('useStoreMap expects a store'),Array.isArray(r)||p('useStoreMap expects an array as keys'),'function'!=typeof o&&p('useStoreMap expects a function');var u=f.useMemo((function(){return c.createStore(o(n.getState(),r)).on(n,(function(e,t){return o(t,r)}))}),r),a=t(u);return i((function(){return function(){u.off(n),c.clearNode(u,{deep:1})}}),r),a}function r(e,t){return t.displayName=e,t}function o(e,n){function o(e){var r=f.useRef(e),o=t(u);i((function(){return s({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;c.is.store(e)?u=e:'object'==typeof e&&null!==e?u=c.combine(e):p('shape should be a store or object with stores');var a='Unknown';u&&u.shortName&&(a=u.shortName);var s=c.createEvent(),l=c.createEvent();return o.mounted=s,o.unmounted=l,r(a+".View",o)}function u(e,n){return r("Connect("+(n.displayName||n.name||'Unknown')+")",(function(r){return f.createElement(n,Object.assign({},r,t(e)))}))}function a(e,t){void 0===t&&(t={});var n=f.useRef(null);i((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 s=require('react'),c=require('effector/compat'),f=e(s),i='undefined'!=typeof window?f.useLayoutEffect:f.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=f.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 s(t,e),null}var n=e.name,o=void 0===n?'gate':n,u=e.domain,a=e.defaultState,s=e.hook,f=c.createEvent(),i=c.createEvent(),p=c.createEvent(),l=c.createStore(Boolean(0),{named:'status'}).on(i,(function(){return Boolean(1)})).on(p,(function(){return Boolean(0)})),m=c.createStore(a,{named:'state'}).on(f,(function(e,t){return t})).reset(p);if(u){var v=u.hooks;c.launch({target:[v.store,v.store,v.event,v.event,v.event],params:[l,m,i,p,f]})}return t.open=i,t.close=p,t.status=l,t.state=m,t.set=f,r("Gate:"+o,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,t){var o,u=[];'object'==typeof t&&null!==t?(t.keys&&(u=t.keys),o=t.fn):o=t,c.is.store(e)||p('expect useList first argument to be a store'),'function'!=typeof o&&p("expect useList's renderItem to be a function"),Array.isArray(u)||p("expect useList's keys to be an array");var a=f.useMemo((function(){var t=r((e.shortName||'Unknown')+".Item",(function(t){var r=t.index,o=n({store:e,keys:[r].concat(t.keys),fn:function(e,t){return e[t[0]]}});return i.current(o,r)}));return f.memo(t)}),[e]),s=n({store:e,keys:[e],fn:function(e){return e.length}}),i=f.useRef(o);i.current=o;var l=f.useMemo((function(){return u}),u);return Array.from({length:s},(function(e,t){return f.createElement(a,{index:t,key:t,keys:l})}))},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){s.is.store(e)||p('expect useStore argument to be a store');var t=i.useRef(e),n=i.useReducer((function(e,t){return t}),e.getState())[1];return f((function(){return t.current===e&&n(e.getState()),t.current=e,e.updates.watch(n)}),[e]),e.getState()}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)})),m=s.createStore(u,{name:c+".state"}).on(i,(function(e,t){return t})).reset(p);if(o){var v=o.hooks;s.launch({target:[v.store,v.store,v.event,v.event,v.event],params:[l,m,f,p,i]})}return t.open=f,t.close=p,t.status=l,t.state=m,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 m=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:m,value:e})}));var v=n({store:e,keys:[e],fn:function(e){return e.length}});return Array.from({length:v},(function(e,t){return i.createElement(f,{index:t,key:t,keys:m})}))},exports.useStore=t,exports.useStoreMap=n;
 //# sourceMappingURL=compat.js.map

effector-react.cjs.d.ts

@@ -28,3 +28,16 @@ import React from 'react'
   readonly fn: (state: State, keys: Keys) => Result
+  readonly updateFilter?: (update: Result, current: Result) => boolean
 }): Result
+export function useStoreMap<State, Result>(
+  store: Store<State>,
+  fn: (state: State) => Result,
+): Result
+export function useList<T, Key extends React.Key>(
+  list: Store<T[]> | Store<ReadonlyArray<T>>,
+  renderItem: {
+    readonly keys?: any[]
+    readonly fn: (item: T, key: Key) => React.ReactNode
+    readonly getKey: (item: T) => Key
+  },
+): JSX.Element
 export function useList<T>(
@@ -31,0 +44,0 @@ list: Store<T[]> | Store<ReadonlyArray<T>>,

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)||f('expect useStore argument to be a store');let t=c.useRef(e),r=c.useState(e.getState())[1];return l((()=>(t.current===e&&r(e.getState()),t.current=e,e.updates.watch(r))),[e]),e.getState()}function r({store:e,keys:r,fn:n}){effector.is.store(e)||f('useStoreMap expects a store'),Array.isArray(r)||f('useStoreMap expects an array as keys'),'function'!=typeof n&&f('useStoreMap expects a function');let o=c.useMemo((()=>effector.createStore(n(e.getState(),r)).on(e,((e,t)=>n(t,r)))),r),s=t(o);return l((()=>()=>{o.off(e),effector.clearNode(o,{deep:1})}),r),s}function n(e,t){return t.displayName=e,t}function o(e,r){function o(e){let n=c.useRef(e),o=t(s);l((()=>(u({props:n.current,state:s.getState()}),()=>{i({props:n.current,state:s.getState()})})),[]);let a=r(e,o);return n.current=e,a}let s;effector.is.store(e)?s=e:'object'==typeof e&&null!==e?s=effector.combine(e):f('shape should be a store or object with stores');let a='Unknown';s&&s.shortName&&(a=s.shortName);let u=effector.createEvent(),i=effector.createEvent();return o.mounted=u,o.unmounted=i,n(a+".View",o)}function s(e,r){return n(`Connect(${r.displayName||r.name||'Unknown'})`,(n=>c.createElement(r,Object.assign({},n,t(e)))))}function a(e,t={}){let r=c.useRef(null);l((()=>(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'),c=e(u);let l='undefined'!=typeof window?c.useLayoutEffect:c.useEffect,f=e=>{throw Error(e)};exports.connect=e=>t=>{let r=e;return'function'!=typeof e&&(r=t,t=e),s(t,r)},exports.createComponent=o,exports.createContextComponent=(e,r,o)=>n((e.shortName||'Unknown')+".ContextComponent",(n=>{let s=c.useContext(r),a=t(e);return o(n,a,s)})),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 s(e){return o(s,e),null}let a=effector.createEvent(),u=effector.createEvent(),c=effector.createEvent(),l=effector.createStore(Boolean(0),{named:'status'}).on(u,(()=>Boolean(1))).on(c,(()=>Boolean(0))),f=effector.createStore(r,{named:'state'}).on(a,((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:[l,f,u,c,a]})}return s.open=u,s.close=c,s.status=l,s.state=f,s.set=a,n("Gate:"+e,s)})({name:e,domain:r,defaultState:t,hook:a})},exports.createReactState=s,exports.createStoreConsumer=e=>o(e,(({children:e},t)=>e(t))),exports.useEvent=e=>e,exports.useGate=a,exports.useList=(e,t)=>{let o,s=[];'object'==typeof t&&null!==t?(t.keys&&(s=t.keys),o=t.fn):o=t,effector.is.store(e)||f('expect useList first argument to be a store'),'function'!=typeof o&&f("expect useList's renderItem to be a function"),Array.isArray(s)||f("expect useList's keys to be an array");let a=c.useMemo((()=>{let t=n((e.shortName||'Unknown')+".Item",(({index:t,keys:n})=>{let o=r({store:e,keys:[t,...n],fn:(e,t)=>e[t[0]]});return l.current(o,t)}));return c.memo(t)}),[e]),u=r({store:e,keys:[e],fn:e=>e.length}),l=c.useRef(o);l.current=o;let i=c.useMemo((()=>s),s);return Array.from({length:u},((e,t)=>c.createElement(a,{index:t,key:t,keys:i})))},exports.useStore=t,exports.useStoreMap=r;
+function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e){effector.is.store(e)||f('expect useStore argument to be a store');let t=c.useRef(e),r=c.useReducer(((e,t)=>t),e.getState())[1];return l((()=>(t.current===e&&r(e.getState()),t.current=e,e.updates.watch(r))),[e]),e.getState()}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)||f('useStoreMap expects a store'),Array.isArray(s)||f('useStoreMap expects an array as keys'),'function'!=typeof n&&f('useStoreMap expects a function');let u=c.useMemo((()=>effector.createStore(n(a.getState(),s),{updateFilter:o}).on(a,((e,t)=>n(t,s)))),s),i=t(u);return l((()=>()=>{u.off(a),effector.clearNode(u,{deep:1})}),s),i}function n(e,t){return t.displayName=e,t}function o(e,r){function o(e){let n=c.useRef(e),o=t(a);l((()=>(u({props:n.current,state:a.getState()}),()=>{i({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):f('shape should be a store or object with stores');let s='Unknown';a&&a.shortName&&(s=a.shortName);let u=effector.createEvent(),i=effector.createEvent();return o.mounted=u,o.unmounted=i,n(s+".View",o)}function a(e,r){return n(`Connect(${r.displayName||r.name||'Unknown'})`,(n=>c.createElement(r,Object.assign({},n,t(e)))))}function s(e,t={}){let r=c.useRef(null);l((()=>(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'),c=e(u);let l='undefined'!=typeof window?c.useLayoutEffect:c.useEffect,f=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=c.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"),c=effector.createEvent(s+".open"),l=effector.createEvent(s+".close"),f=effector.createStore(Boolean(0),{name:s+".status"}).on(c,(()=>Boolean(1))).on(l,(()=>Boolean(0))),i=effector.createStore(r,{name:s+".state"}).on(u,((e,t)=>t)).reset(l);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[f,i,c,l,u]})}return a.open=c,a.close=l,a.status=f,a.state=i,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)||f('expect useList first argument to be a store'),'function'!=typeof a&&f("expect useList's renderItem to be a function"),Array.isArray(u)||f("expect useList's keys to be an array");let l=c.useMemo((()=>{let t=n((e.shortName||'Unknown')+".Item",(t=>{let{index:n,keys:o,keyVal:a,value:s}=t;if(i.current[1])return i.current[0](s,a);let u=r({store:e,keys:[n,...o],fn:(e,t)=>e[t[0]]});return i.current[0](u,n)}));return c.memo(t)}),[e,!!s]),i=c.useRef([a,s]);i.current=[a,s];let p=c.useMemo((()=>u),u);if(s)return t(e).map((e=>{let t=i.current[1](e);return c.createElement(l,{keyVal:t,key:t,keys:p,value:e})}));{let t=r({store:e,keys:[e],fn:e=>e.length});return Array.from({length:t},((e,t)=>c.createElement(l,{index:t,key:t,keys:p})))}},exports.useStore=t,exports.useStoreMap=r;
 //# sourceMappingURL=effector-react.cjs.js.map

effector-react.mjs.d.ts

@@ -28,3 +28,16 @@ import React from 'react'
   readonly fn: (state: State, keys: Keys) => Result
+  readonly updateFilter?: (update: Result, current: Result) => boolean
 }): Result
+export function useStoreMap<State, Result>(
+  store: Store<State>,
+  fn: (state: State) => Result,
+): Result
+export function useList<T, Key extends React.Key>(
+  list: Store<T[]> | Store<ReadonlyArray<T>>,
+  renderItem: {
+    readonly keys?: any[]
+    readonly fn: (item: T, key: Key) => React.ReactNode
+    readonly getKey: (item: T) => Key
+  },
+): JSX.Element
 export function useList<T>(
@@ -31,0 +44,0 @@ list: Store<T[]> | Store<ReadonlyArray<T>>,

effector-react.umd.d.ts

@@ -28,3 +28,16 @@ import React from 'react'
   readonly fn: (state: State, keys: Keys) => Result
+  readonly updateFilter?: (update: Result, current: Result) => boolean
 }): Result
+export function useStoreMap<State, Result>(
+  store: Store<State>,
+  fn: (state: State) => Result,
+): Result
+export function useList<T, Key extends React.Key>(
+  list: Store<T[]> | Store<ReadonlyArray<T>>,
+  renderItem: {
+    readonly keys?: any[]
+    readonly fn: (item: T, key: Key) => React.ReactNode
+    readonly getKey: (item: T) => Key
+  },
+): JSX.Element
 export function useList<T>(
@@ -31,0 +44,0 @@ list: Store<T[]> | Store<ReadonlyArray<T>>,

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=l.default.useRef(e),n=l.default.useState(e.getState())[1];return c((()=>(t.current===e&&n(e.getState()),t.current=e,e.updates.watch(n))),[e]),e.getState()}function o({store:e,keys:t,fn:n}){effector.is.store(e)||i('useStoreMap expects a store'),Array.isArray(t)||i('useStoreMap expects an array as keys'),'function'!=typeof n&&i('useStoreMap expects a function');let o=l.default.useMemo((()=>effector.createStore(n(e.getState(),t)).on(e,((e,r)=>n(r,t)))),t),a=r(o);return c((()=>()=>{o.off(e),effector.clearNode(o,{deep:1})}),t),a}function a(e,t){return t.displayName=e,t}function u(e,t){function n(e){let n=l.default.useRef(e),a=r(o);c((()=>(s({props:n.current,state:o.getState()}),()=>{f({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(),f=effector.createEvent();return n.mounted=s,n.unmounted=f,a(u+".View",n)}function s(e,t){return a(`Connect(${t.displayName||t.name||'Unknown'})`,(n=>l.default.createElement(t,Object.assign({},n,r(e)))))}function f(e,t={}){let n=l.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 l=n(t);let c='undefined'!=typeof window?l.default.useLayoutEffect:l.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=l.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=effector.createEvent(),s=effector.createEvent(),f=effector.createEvent(),l=effector.createStore(Boolean(0),{named:'status'}).on(s,(()=>Boolean(1))).on(f,(()=>Boolean(0))),c=effector.createStore(n,{named:'state'}).on(u,((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:[l,c,s,f,u]})}return o.open=s,o.close=f,o.status=l,o.state=c,o.set=u,a("Gate:"+e,o)})({name:e,domain:n,defaultState:t,hook:f})},e.createReactState=s,e.createStoreConsumer=e=>u(e,(({children:e},t)=>e(t))),e.useEvent=e=>e,e.useGate=f,e.useList=(e,t)=>{let n,r=[];'object'==typeof t&&null!==t?(t.keys&&(r=t.keys),n=t.fn):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(r)||i("expect useList's keys to be an array");let u=l.default.useMemo((()=>{let t=a((e.shortName||'Unknown')+".Item",(({index:t,keys:n})=>{let r=o({store:e,keys:[t,...n],fn:(e,t)=>e[t[0]]});return f.current(r,t)}));return l.default.memo(t)}),[e]),s=o({store:e,keys:[e],fn:e=>e.length}),f=l.default.useRef(n);f.current=n;let c=l.default.useMemo((()=>r),r);return Array.from({length:s},((e,t)=>l.default.createElement(u,{index:t,key:t,keys:c})))},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 r(e){return e&&'object'==typeof e&&'default'in e?e:{default:e}}function n(e){effector.is.store(e)||i('expect useStore argument to be a store');let t=f.default.useRef(e),r=f.default.useReducer(((e,t)=>t),e.getState())[1];return c((()=>(t.current===e&&r(e.getState()),t.current=e,e.updates.watch(r))),[e]),e.getState()}function o(e,t){let r,o,a,u;t?(r=t,a=e,u=[]):(r=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 r&&i('useStoreMap expects a function');let s=f.default.useMemo((()=>effector.createStore(r(a.getState(),u),{updateFilter:o}).on(a,((e,t)=>r(t,u)))),u),l=n(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 r(e){let r=f.default.useRef(e),a=n(o);c((()=>(s({props:r.current,state:o.getState()}),()=>{l({props:r.current,state:o.getState()})})),[]);let u=t(e,a);return r.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 r.mounted=s,r.unmounted=l,a(u+".View",r)}function s(e,t){return a(`Connect(${t.displayName||t.name||'Unknown'})`,(r=>f.default.createElement(t,Object.assign({},r,n(e)))))}function l(e,t={}){let r=f.default.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))}var f=r(t);let c='undefined'!=typeof window?f.default.useLayoutEffect:f.default.useEffect,i=e=>{throw Error(e)};e.connect=e=>t=>{let r=e;return'function'!=typeof e&&(r=t,t=e),s(t,r)},e.createComponent=u,e.createContextComponent=(e,t,r)=>a((e.shortName||'Unknown')+".ContextComponent",(o=>{let a=f.default.useContext(t),u=n(e);return r(o,u,a)})),e.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:n})=>{function o(e){return n(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(r,{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:r,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 r,u,s=[];'object'==typeof t&&null!==t?(t.keys&&(s=t.keys),r=t.fn,t.getKey&&(u=t.getKey)):r=t,effector.is.store(e)||i('expect useList first argument to be a store'),'function'!=typeof r&&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:r,keys:n,keyVal:a,value:u}=t;if(c.current[1])return c.current[0](u,a);let s=o({store:e,keys:[r,...n],fn:(e,t)=>e[t[0]]});return c.current[0](s,r)}));return f.default.memo(t)}),[e,!!u]),c=f.default.useRef([r,u]);c.current=[r,u];let d=f.default.useMemo((()=>s),s);if(u)return n(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=n,e.useStoreMap=o,Object.defineProperty(e,'__esModule',{value:1})}));
 //# sourceMappingURL=effector-react.umd.js.map

index.d.ts

@@ -28,3 +28,16 @@ import React from 'react'
   readonly fn: (state: State, keys: Keys) => Result
+  readonly updateFilter?: (update: Result, current: Result) => boolean
 }): Result
+export function useStoreMap<State, Result>(
+  store: Store<State>,
+  fn: (state: State) => Result,
+): Result
+export function useList<T, Key extends React.Key>(
+  list: Store<T[]> | Store<ReadonlyArray<T>>,
+  renderItem: {
+    readonly keys?: any[]
+    readonly fn: (item: T, key: Key) => React.ReactNode
+    readonly getKey: (item: T) => Key
+  },
+): JSX.Element
 export function useList<T>(
@@ -31,0 +44,0 @@ list: Store<T[]> | Store<ReadonlyArray<T>>,

package.json

 {
   "name": "effector-react",
-  "version": "21.2.1",
+  "version": "21.3.0",
   "description": "React bindings for effector",
@@ -25,3 +25,3 @@ "main": "effector-react.cjs.js",
     "react": ">=16.8.0 <18.0.0",
-    "effector": "^21.0.2"
+    "effector": "^21.8.0"
   },
@@ -56,10 +56,13 @@ "files": [
     "react",
-    "data",
+    "hooks",
+    "state management",
+    "state manager",
+    "algebraic effects",
+    "model",
+    "reactive",
+    "state",
+    "frp",
+    "event",
     "effect",
-    "event",
     "functional",
-    "reactive",
-    "state manager",
-    "state-manager",
-    "state",
     "store"
@@ -66,0 +69,0 @@ ],

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=f.useRef(e),r=f.useState(e.getState())[1];return p((()=>(t.current===e&&r(e.getState()),t.current=e,e.updates.watch(r))),[e]),e.getState()}function r({store:e,keys:r,fn:n}){effector.is.store(e)||d('useStoreMap expects a store'),Array.isArray(r)||d('useStoreMap expects an array as keys'),'function'!=typeof n&&d('useStoreMap expects a function');let o=f.useMemo((()=>effector.createStore(n(e.getState(),r)).on(e,((e,t)=>n(t,r)))),r),s=t(o);return p((()=>()=>{o.off(e),effector.clearNode(o,{deep:1})}),r),s}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=i(e.open),n=i(e.close),o=i(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 c(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})();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 i(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 c(e,t);let r=Array.isArray(e)?[]:{};for(let n in e)r[n]=c(e[n],t);return r}),[t,...Object.keys(r),...Object.values(r)])}Object.defineProperty(exports,'__esModule',{value:1});var l=require('react'),effector=require('effector'),f=e(l);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=effector.createEvent(),u=effector.createEvent(),c=effector.createEvent(),i=effector.createStore(Boolean(0),{named:'status'}).on(u,(()=>Boolean(1))).on(c,(()=>Boolean(0))),l=effector.createStore(r,{named:'state'}).on(a,((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,l,u,c,a]})}return s.open=u,s.close=c,s.status=i,s.state=l,s.set=a,n("Gate:"+e,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=i,exports.useGate=s,exports.useList=(e,t)=>((e,t)=>{let o,s=[];'object'==typeof t&&null!==t?(t.keys&&(s=t.keys),o=t.fn):o=t,effector.is.store(e)||d('expect useList first argument to be a store'),'function'!=typeof o&&d("expect useList's renderItem to be a function"),Array.isArray(s)||d("expect useList's keys to be an array");let a=f.useMemo((()=>{let t=n((e.shortName||'Unknown')+".Item",(({index:t,keys:n})=>{let o=r({store:e,keys:[t,...n],fn:(e,t)=>e[t[0]]});return c.current(o,t)}));return f.memo(t)}),[e]),u=r({store:e,keys:[e],fn:e=>e.length}),c=f.useRef(o);c.current=o;let i=f.useMemo((()=>s),s);return Array.from({length:u},((e,t)=>f.createElement(a,{index:t,key:t,keys:i})))})(o(e),t),exports.useStore=u,exports.useStoreMap=({store:e,keys:t,fn:n})=>r({store:o(e),keys:t,fn:n});
+function e(e){return e&&'object'==typeof e&&'default'in e?e.default:e}function t(e){effector.is.store(e)||m('expect useStore argument to be a store');let t=f.useRef(e),r=f.useReducer(((e,t)=>t),e.getState())[1];return p((()=>(t.current===e&&r(e.getState()),t.current=e,e.updates.watch(r))),[e]),e.getState()}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)||m('useStoreMap expects a store'),Array.isArray(a)||m('useStoreMap expects an array as keys'),'function'!=typeof n&&m('useStoreMap expects a function');let u=f.useMemo((()=>effector.createStore(n(s.getState(),a),{updateFilter:o}).on(s,((e,t)=>n(t,a)))),a),c=t(u);return p((()=>()=>{u.off(s),effector.clearNode(u,{deep:1})}),a),c}function n(e,t){return t.displayName=e,t}function o(e){let t=f.useContext(d);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=l(e.open),n=l(e.close),o=l(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 c(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 l(e){let t=f.useContext(d),r=effector.is.unit(e)||'object'!=typeof e?{event:e}:e;return f.useMemo((()=>{if(effector.is.unit(e))return c(e,t);let r=Array.isArray(e)?[]:{};for(let n in e)r[n]=c(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,m=e=>{throw Error(e)};const d=f.createContext(null);let{Provider:y}=d;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"),c=effector.createEvent(a+".open"),l=effector.createEvent(a+".close"),i=effector.createStore(Boolean(0),{name:a+".status"}).on(c,(()=>Boolean(1))).on(l,(()=>Boolean(0))),f=effector.createStore(r,{name:a+".state"}).on(u,((e,t)=>t)).reset(l);if(t){let{hooks:e}=t;effector.launch({target:[e.store,e.store,e.event,e.event,e.event],params:[i,f,c,l,u]})}return s.open=c,s.close=l,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=l,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)||m('expect useList first argument to be a store'),'function'!=typeof s&&m("expect useList's renderItem to be a function"),Array.isArray(u)||m("expect useList's keys to be an array");let c=f.useMemo((()=>{let t=n((e.shortName||'Unknown')+".Item",(t=>{let{index:n,keys:o,keyVal:s,value:a}=t;if(l.current[1])return l.current[0](a,s);let u=r({store:e,keys:[n,...o],fn:(e,t)=>e[t[0]]});return l.current[0](u,n)}));return f.memo(t)}),[e,!!a]),l=f.useRef([s,a]);l.current=[s,a];let i=f.useMemo((()=>u),u);if(a)return t(e).map((e=>{let t=l.current[1](e);return f.createElement(c,{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(c,{index:t,key:t,keys:i})))}})(o(e),s),exports.useStore=u,exports.useStoreMap=(e,t)=>t?r(o(e),t):r({store:o(t.store),keys:t.keys,fn:t.fn,updateFilter:t.updateFilter});
 //# sourceMappingURL=ssr.js.map

No alert changes

Improved metrics

Total package byte prevSize

170678

increased by12.78%

Lines of code

723

increased by11.57%

No dependency changes