react-ui-basics 0.0.217 → 0.0.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.217",
+  "version": "0.0.219",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/src/ReactConstants.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useReducer, useRef} from 'react';
 
 const EMPTY = {};
 export const props: <P>(that: React.Component<P>) => P = that => that.props;
@@ -29,6 +29,24 @@ export const stateGSs = (that, num) => {
     return result;
 };
 
+const useSyncExternalStoreShim = (subscribe, getSnapshot) => {
+    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    const cb = useRef();
+    cb.current = getSnapshot;
+    let value = getSnapshot()
+
+    useEffect(() => subscribe(() => {
+        let next = cb.current()
+        if (value !== next) {
+            value = next
+            forceUpdate()
+        }
+    }), []);
+    return value
+}
+
+export const useSyncExternalStore = React.useSyncExternalStore || useSyncExternalStoreShim
+
 export const componentDidMount = 'componentDidMount';
 export const componentWillUnmount = 'componentWillUnmount';
 export const componentDidUpdate = 'componentDidUpdate';

package/src/store/Store.test.js

@@ -3,7 +3,7 @@ import {mount} from 'enzyme';
 import Store, {useStore} from "./Store";
 import {act} from 'react-dom/test-utils';
 
-it('test 1', () => {
+it('basic test, rerender on each change', () => {
     const store = new Store({
         count: 0,
         value: ''
@@ -44,14 +44,14 @@ it('test 1', () => {
 });
 
 
-it('test 2', () => {
+it('no rerender if selector value doesn\'t change', () => {
     const store = new Store({
         count: 0,
         value: ''
     });
     let renderCount = 0
     const MyComponent = () => {
-        let count = useStore(store, it=> it.count);
+        let count = useStore(store, it => it.count);
         renderCount++
         return <div>{count}</div>;
     };
@@ -73,8 +73,7 @@ it('test 2', () => {
         })
     });
     expect(wrapper).toHaveHTML('<div>1</div>');
-    // react executes functional-component after first setState with the same value
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(2);
 
     act(() => {
         store.set({
@@ -82,5 +81,36 @@ it('test 2', () => {
         })
     });
     expect(wrapper).toHaveHTML('<div>1</div>');
-    expect(renderCount).toBe(3);
+    expect(renderCount).toBe(2);
+});
+
+it('update value if selector dependencies change', () => {
+    const store = new Store({
+        key: 'foo',
+        foo: 'foo',
+        bar: 'bar',
+    });
+    let renderCount = 0
+    let renderedValue = []
+
+    const MyComponent = () => {
+        let key = useStore(store, it => it.key);
+        let value = useStore(store, it => it[key], [key]);
+        renderCount++
+        renderedValue.push(value)
+        return <div>{value}</div>;
+    };
+    const wrapper = mount(<MyComponent/>);
+    expect(wrapper).toHaveHTML('<div>foo</div>');
+    expect(renderCount).toBe(1);
+    expect(renderedValue).toEqual(['foo']);
+
+    act(() => {
+        store.set(it => {
+            it.key = 'bar'
+        })
+    });
+    expect(wrapper).toHaveHTML('<div>bar</div>');
+    expect(renderCount).toBe(2);
+    expect(renderedValue).toEqual(['foo', 'bar']);
 });

package/src/store/Store.ts

@@ -1,6 +1,7 @@
-import {useEffect, useState} from "react";
+import {useEffect, useReducer} from "react";
 import {createProxy} from "./ProxyTools";
 import {isFunction, isObject} from "../Tools";
+import {useSyncExternalStore} from "../ReactConstants";
 
 const STORES = new Map<Symbol, Store<any>>()
 
@@ -77,24 +78,7 @@ export function getGlobalState() {
 
 export type Selector<T, R> = (t: T) => R;
 
-export const defaultSelector = <T>(store: T): T => store;
-
-export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies: ReadonlyArray<any>): R
-export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies?: undefined): R
-export function useStore<T>(store: Store<T>, selector?: undefined, selectorDependencies?: undefined): T
-export function useStore<T, R>(store: Store<T>, selector?: Selector<T, R>, selectorDependencies: ReadonlyArray<any> = []): R {
-    if (!selector)
-        selector = (defaultSelector as Selector<T, R>)
-
-    const [state, setState] = useState(() => selector(store.get()))
-
-    useEffect(() => {
-        const updateState = () => {
-            setState(selector(store.get()))
-        };
-        updateState()
-        return store.subscribe(updateState)
-    }, selectorDependencies)
-
-    return state
-}
+export function useStore<T, R>(store: Store<T>, selector: Selector<T, R>): R
+export function useStore<T>(store: Store<T>, selector?: undefined): T
+export const useStore = <T, R>(store: Store<T>, selector?: Selector<T, R>): R =>
+    useSyncExternalStore(store.subscribe, selector ? () => selector(store.get()) : store.get);

package/store/Store.d.ts

@@ -19,7 +19,6 @@ export declare class Store<T> extends AbstractStore<T> {
 export default Store;
 export declare function getGlobalState(): Map<Symbol, Store<any>>;
 export declare type Selector<T, R> = (t: T) => R;
-export declare const defaultSelector: <T>(store: T) => T;
-export declare function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies: ReadonlyArray<any>): R;
-export declare function useStore<T, R>(store: Store<T>, selector: Selector<T, R>, selectorDependencies?: undefined): R;
-export declare function useStore<T>(store: Store<T>, selector?: undefined, selectorDependencies?: undefined): T;
+export declare function useStore<T, R>(store: Store<T>, selector: Selector<T, R>): R;
+export declare function useStore<T>(store: Store<T>, selector?: undefined): T;
+export declare const useStore: <T, R>(store: Store<T>, selector?: Selector<T, R>) => R;

package/store/Store.js

@@ -1,6 +1,6 @@
-import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import { useState, useEffect } from 'react';
-import { createProxy } from './ProxyTools.js';
+import ReactConstants from "./../ReactConstants"; import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./../CommonFields"; import {toConsumableArray as __toConsumableArray} from "./../_virtual/_rollupPluginBabelHelpers"; import {extends as __extends} from "./../_virtual/_rollupPluginBabelHelpers"; import {inherits as __inherits} from "./../_virtual/_rollupPluginBabelHelpers"; import { createProxy } from './ProxyTools.js';
 import { isFunction, isObject } from '../Tools.js';
+import { useSyncExternalStore } from '../ReactConstants.js';
 
 const STORES = new Map();
 class AbstractStore {
@@ -52,20 +52,7 @@ class Store extends AbstractStore {
 function getGlobalState() {
     return STORES;
 }
-const defaultSelector = (store) => store;
-function useStore(store, selector, selectorDependencies = []) {
-    if (!selector)
-        selector = defaultSelector;
-    const [state, setState] = useState(() => selector(store.get()));
-    useEffect(() => {
-        const updateState = () => {
-            setState(selector(store.get()));
-        };
-        updateState();
-        return store.subscribe(updateState);
-    }, selectorDependencies);
-    return state;
-}
+const useStore = (store, selector) => useSyncExternalStore(store.subscribe, selector ? () => selector(store.get()) : store.get);
 
-export { Store, Store as default, defaultSelector, getGlobalState, useStore };
+export { Store, Store as default, getGlobalState, useStore };
 //# sourceMappingURL=Store.js.map

package/store/Store.js.map

@@ -1 +1 @@
-{"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"Store.js","sources":["../src/store/Store.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAsB,CAAA;AAM5C,MAAe,aAAa,CAAA;AAW3B,CAAA;AAGK,MAAO,KAAS,SAAQ,aAAgB,CAAA;IAE1C,WAAY,CAAA,YAAe,EAAE,IAAa,EAAA;AACtC,QAAA,KAAK,EAAE,CAAA;QACP,IAAI,IAAI,GAAG,IAAI,CAAC;AAChB,QAAA,IAAI,SAAS,GAA4B,IAAI,GAAG,EAAsB,CAAA;QACtE,IAAI,KAAK,GAAG,YAAY,CAAC;QACzB,IAAI,YAAY,GAAG,MAAK;AACpB,YAAA,KAAK,IAAI,QAAQ,IAAI,SAAS,CAAC,MAAM,EAAE,EAAE;AACrC,gBAAA,QAAQ,EAAE,CAAA;AACb,aAAA;AACL,SAAC,CAAC;AACF,QAAA,IAAI,CAAC,GAAG,GAAG,MAAS,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,GAAG,GAAG,CAAC,MAAM,KAAI;AAClB,YAAA,IAAI,MAAM,CAAC;AACX,YAAA,IAAI,UAAU,CAAC,MAAM,CAAC,EAAE;AACpB,gBAAA,MAAM,KAAK,GAAG,WAAW,CAAC,KAAe,CAAC,CAAC;AAC3C,gBAAA,MAAM,GAAI,MAAoB,CAAC,KAAK,CAAC,CAAC;AACtC,gBAAA,IAAI,CAAC,MAAM,IAAI,MAAM,KAAK,KAAK;AAC3B,oBAAA,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;AAC5B,aAAA;AAAM,iBAAA,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;AACzB,gBAAA,MAAM,GAAO,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,KAAK,CAAK,EAAA,MAAM,CAAC,CAAA;AACjC,aAAA;AAAM,iBAAA;gBACH,MAAM,GAAG,MAAM,CAAA;AAClB,aAAA;YAED,KAAK,GAAG,MAAM,CAAA;AACd,YAAA,YAAY,EAAE,CAAC;AACnB,SAAC,CAAA;AACD,QAAA,IAAI,CAAC,KAAK,GAAG,MAAK;YACd,KAAK,GAAG,YAAY,CAAA;AACpB,YAAA,YAAY,EAAE,CAAC;AACnB,SAAC,CAAA;AAED,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,EAAc,KAAI;AAChC,YAAA,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;AACrB,YAAA,SAAS,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;AACtB,YAAA,OAAO,MAAK;AACR,gBAAA,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;AACzB,aAAC,CAAA;AACL,SAAC,CAAA;AAED,QAAA,IAAI,CAAC,QAAQ,GAAG,MAAc,IAAI,CAAC;QACnC,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,CAAA;KAC7B;AACJ,CAAA;SAIe,cAAc,GAAA;AAC1B,IAAA,OAAO,MAAM,CAAA;AACjB,CAAC;AAMY,MAAA,QAAQ,GAAG,CAAO,KAAe,EAAE,QAAyB,KACrE,oBAAoB,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,GAAG,MAAM,QAAQ,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,GAAG;;;;"}