react-ui-basics 0.0.216 → 0.0.218

package/package.json

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

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,8 +1,8 @@
-import {useEffect, useState} from "react";
+import {useEffect, useReducer} from "react";
 import {createProxy} from "./ProxyTools";
 import {isFunction, isObject} from "../Tools";
 
-const STORES = new Map<Symbol, any>()
+const STORES = new Map<Symbol, Store<any>>()
 
 type Setter<T> = (oldState: T) => T | void;
 type ListenerFn = () => void;
@@ -28,38 +28,33 @@ export class Store<T> extends AbstractStore<T> {
         super()
         let that = this;
         let listeners: Map<Symbol, ListenerFn> = new Map<Symbol, () => void>()
-        let index = Symbol();
+        let value = initialState;
         let runListeners = () => {
             for (let listener of listeners.values()) {
                 listener()
             }
         };
-
-        let get = (): T => STORES.get(index);
-        let reset = () => {
-            STORES.set(index, initialState)
-            runListeners();
-        };
-        reset()
-
-        that.get = get
+        that.get = (): T => value;
         that.set = (setter) => {
             let result;
             if (isFunction(setter)) {
-                const proxy = createProxy(get() as object);
+                const proxy = createProxy(value as object);
                 result = (setter as Setter<T>)(proxy);
                 if (!result || result === proxy)
                     result = proxy.bake()
             } else if (isObject(setter)) {
-                result = {...get(), ...setter}
+                result = {...value, ...setter}
             } else {
                 result = setter
             }
 
-            STORES.set(index, result)
+            value = result
+            runListeners();
+        }
+        that.reset = () => {
+            value = initialState
             runListeners();
         }
-        that.reset = reset
 
         that.subscribe = (fn: ListenerFn) => {
             const key = Symbol();
@@ -70,6 +65,7 @@ export class Store<T> extends AbstractStore<T> {
         }
 
         that.toString = (): string => name;
+        STORES.set(Symbol(), that)
     }
 }
 
@@ -90,15 +86,19 @@ export function useStore<T, R>(store: Store<T>, selector?: Selector<T, R>, selec
     if (!selector)
         selector = (defaultSelector as Selector<T, R>)
 
-    const [state, setState] = useState(() => selector(store.get()))
+    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    let value = selector(store.get())
 
     useEffect(() => {
         const updateState = () => {
-            setState(selector(store.get()))
+            let next = selector(store.get())
+            if (value !== next) {
+                value = next
+                forceUpdate()
+            }
         };
-        updateState()
         return store.subscribe(updateState)
     }, selectorDependencies)
 
-    return state
+    return value
 }

package/store/Store.d.ts

@@ -17,7 +17,7 @@ export declare class Store<T> extends AbstractStore<T> {
     constructor(initialState: T, name?: string);
 }
 export default Store;
-export declare function getGlobalState(): Map<Symbol, any>;
+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;

package/store/Store.js

@@ -1,4 +1,4 @@
-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 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 { useReducer, useEffect } from 'react';
 import { createProxy } from './ProxyTools.js';
 import { isFunction, isObject } from '../Tools.js';
 
@@ -10,37 +10,34 @@ class Store extends AbstractStore {
         super();
         let that = this;
         let listeners = new Map();
-        let index = Symbol();
+        let value = initialState;
         let runListeners = () => {
             for (let listener of listeners.values()) {
                 listener();
             }
         };
-        let get = () => STORES.get(index);
-        let reset = () => {
-            STORES.set(index, initialState);
-            runListeners();
-        };
-        reset();
-        that.get = get;
+        that.get = () => value;
         that.set = (setter) => {
             let result;
             if (isFunction(setter)) {
-                const proxy = createProxy(get());
+                const proxy = createProxy(value);
                 result = setter(proxy);
                 if (!result || result === proxy)
                     result = proxy.bake();
             }
             else if (isObject(setter)) {
-                result = __extends(__extends({}, get()), setter);
+                result = __extends(__extends({}, value), setter);
             }
             else {
                 result = setter;
             }
-            STORES.set(index, result);
+            value = result;
+            runListeners();
+        };
+        that.reset = () => {
+            value = initialState;
             runListeners();
         };
-        that.reset = reset;
         that.subscribe = (fn) => {
             const key = Symbol();
             listeners.set(key, fn);
@@ -49,6 +46,7 @@ class Store extends AbstractStore {
             };
         };
         that.toString = () => name;
+        STORES.set(Symbol(), that);
     }
 }
 function getGlobalState() {
@@ -58,15 +56,19 @@ const defaultSelector = (store) => store;
 function useStore(store, selector, selectorDependencies = []) {
     if (!selector)
         selector = defaultSelector;
-    const [state, setState] = useState(() => selector(store.get()));
+    const [_, forceUpdate] = useReducer(x => x + 1, 0);
+    let value = selector(store.get());
     useEffect(() => {
         const updateState = () => {
-            setState(selector(store.get()));
+            let next = selector(store.get());
+            if (value !== next) {
+                value = next;
+                forceUpdate();
+            }
         };
-        updateState();
         return store.subscribe(updateState);
     }, selectorDependencies);
-    return state;
+    return value;
 }
 
 export { Store, Store as default, defaultSelector, getGlobalState, useStore };

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":"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"}