Store provider migration and rework (#91)

* add store provider variation for testing, add config for array syntax

* update counter examples to work with non-array syntax

* rename provider functions

* update readme doc

* update docs and version

* update spec

* fix other spec

* create unique store instance for the dynamic store example

* fix store spec import

* compact the new store a bit more

* more cleanup

.gitignore

@@ -1,2 +1,4 @@
 dist/
 node_modules/
+
+*.swp

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## v2.0.0
+* BREAKING CHANGE - When subscribing to a store via the `useContext` hook, the returning store object is now a single object which represents the store. Previously this was an array, but the array was arbitrary.
+* chore/bug - Reworked store providers to correctly target rerenders only to subscribing children components. Previously there was a nuance where updates could occur even without a context subscription.
+
 ## v1.3.0
 * feature - support multiple dynamic stores and forwarding props into the store custom hooks
 * chore - fix persisted falsy value causing default value to come back

examples/counter-react/src/__tests__/counter.spec.js

@@ -12,7 +12,7 @@ describe('Counter', () => {
     decrementCount: jest.fn()
   };
   let ContextComponent = () => (
-    <CounterStore.Context.Provider value={[counterStore]}>
+    <CounterStore.Context.Provider value={counterStore}>
       <Counter />
     </CounterStore.Context.Provider>
   );

examples/counter-react/src/counter.js

@@ -2,16 +2,16 @@ import React, { useContext } from 'react';
 import { CounterStore } from './store';
 
 const Counter = () => {
-  const [counterContext] = useContext(CounterStore.Context);
-  let { count } = counterContext.state;
+  const counterStore = useContext(CounterStore.Context);
+  let { count } = counterStore.state;
 
   return (
     <div data-testid="counter-wrap">
       <p>Count: {count}</p>
-      <button data-testid="decrement" onClick={counterContext.decrementCount}>
+      <button data-testid="decrement" onClick={counterStore.decrementCount}>
         -
       </button>
-      <button data-testid="increment" onClick={counterContext.incrementCount}>
+      <button data-testid="increment" onClick={counterStore.incrementCount}>
         +
       </button>
     </div>

examples/counter-react/src/counterByName.js

@@ -1,19 +1,19 @@
 import React, { useContext } from 'react';
-import { CounterStore } from './store';
+import { DynamicCounterStore } from './store';
 
 const Counter = ({ name }) => {
-  const [counterContext] = useContext(CounterStore.Context);
-  let { count } = counterContext.state;
+  const counterStore = useContext(DynamicCounterStore.Context);
+  let { count } = counterStore.state;
 
   // this isn't necessary, but this demonstrates how a store ref would be used if a storeKey is provided
-  const incrementCount = () => CounterStore[name].incrementCount();
+  const incrementCount = () => DynamicCounterStore[name].incrementCount();
 
   return (
     <div data-testid="counter-wrap">
       <p>
         Counter with key {name}: {count}
       </p>
-      <button data-testid="decrement" onClick={counterContext.decrementCount}>
+      <button data-testid="decrement" onClick={counterStore.decrementCount}>
         -
       </button>
       <button data-testid="increment" onClick={incrementCount}>
@@ -23,4 +23,4 @@ const Counter = ({ name }) => {
   );
 };
 
-export default CounterStore.Provider(Counter);
+export default DynamicCounterStore.Provider(Counter);

examples/counter-react/src/dispatchCounter.js

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import { CounterWithReducerStore } from './store';
 
 const PersistedCounter = () => {
-  const [counterContext] = useContext(CounterWithReducerStore.Context);
-  let { dispatch, counterState: { count }} = counterContext;
+  const counterStore = useContext(CounterWithReducerStore.Context);
+  let { dispatch, counterState: { count }} = counterStore;
 
   return (
     <div data-testid="counter-wrap">
@@ -18,4 +18,4 @@ const PersistedCounter = () => {
   );
 };
 
-export default PersistedCounter;
+export default PersistedCounter;

examples/counter-react/src/persistedCounter.js

@@ -2,16 +2,16 @@ import React, { useContext } from 'react';
 import { CounterStore } from './store';
 
 const PersistedCounter = () => {
-  const [counterContext] = useContext(CounterStore.Context);
-  let { persistedCount } = counterContext.state;
+  const counterStore = useContext(CounterStore.Context);
+  let { persistedCount } = counterStore.state;
 
   return (
     <div data-testid="counter-wrap">
       <p>Persisted Count: {persistedCount}</p>
-      <button data-testid="decrement" onClick={counterContext.decrementPersistedCount}>
+      <button data-testid="decrement" onClick={counterStore.decrementPersistedCount}>
         -
       </button>
-      <button data-testid="increment" onClick={counterContext.incrementPersistedCount}>
+      <button data-testid="increment" onClick={counterStore.incrementPersistedCount}>
         +
       </button>
     </div>

examples/counter-react/src/store/__tests__/counter.store.spec.js

@@ -1,13 +1,13 @@
 import React, { useContext } from 'react';
-import CounterStore  from '../counter.store';
+import { CounterStore } from '../counter.store';
 import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 
 describe('CounterStore', () => {
   let store;
   const renderStore = () => {
     let Prep = CounterStore.Provider(() => {
-      store = useContext(CounterStore.Context)[0];
+      store = useContext(CounterStore.Context);
       return null;
     });
     render(<Prep />);

examples/counter-react/src/store/counter.store.js

@@ -28,5 +28,6 @@ const useCounterContainer = () => {
 };
 
 let CounterStore = setupStore(useCounterContainer);
+let DynamicCounterStore = setupStore(useCounterContainer);
 
-export default CounterStore ;
+export { CounterStore, DynamicCounterStore };

examples/counter-react/src/store/index.js

@@ -1,2 +1,2 @@
-export { default as CounterStore } from './counter.store';
+export { CounterStore, DynamicCounterStore } from './counter.store';
 export { default as CounterWithReducerStore } from './counterWithReducer.store.js';

osmosis/README.md

@@ -86,7 +86,7 @@ import React, { useContext } from 'react';
 import { CounterStore } from './counter.store';
 
 export default () => {
-  const [counterStore] = useContext(CounterStore.Context);
+  const counterStore = useContext(CounterStore.Context);
   let { count } = counterStore.state;
 
   return (

osmosis/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipt/osmosis",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "A lightweight state management library for React and React Native",
   "keywords": [
     "react",

osmosis/src/index.js

@@ -1,10 +1,11 @@
 import { StoreProvider } from './storeProvider.js';
-import { setupStore } from './setupStore.js';
+import { setupStore, configureSetupStore } from './setupStore.js';
 import { usePersistedState, configureUsePersistedState } from './usePersistedState.js';
 
-export { setupStore, StoreProvider, usePersistedState, configureUsePersistedState };
+export { setupStore, configureSetupStore, StoreProvider, usePersistedState, configureUsePersistedState };
 export default {
   setupStore,
+  configureSetupStore,
   StoreProvider,
   usePersistedState,
   configureUsePersistedState

osmosis/src/setupStore.js

@@ -1,6 +1,11 @@
+/* eslint-disable react/prop-types */
 import React, { createContext } from 'react';
 
-const _defaultConfig = { proxyEnabled: true };
+let _defaultConfig = { proxyEnabled: true, legacyReturnStoreAsArray: false };
+
+export const configureSetupStore = config => {
+  _defaultConfig = { ..._defaultConfig, ...config };
+};
 
 /**
  * @callback useCustomHook
@@ -26,7 +31,8 @@ const _defaultConfig = { proxyEnabled: true };
  * @param {SetupStoreConfig} [config = { proxyEnabled: false }] - The setup store config
  * @returns {Store}
  */
-const setupStore = (useCustomHook, config = _defaultConfig) => {
+const setupStore = (useCustomHook, config = {}) => {
+  config = { ..._defaultConfig, ...config };
   const StoreContext = createContext();
   // If proxy is not supported
   let storeRef = {};
@@ -35,7 +41,8 @@ const setupStore = (useCustomHook, config = _defaultConfig) => {
   let storeProxy;
   let storeProxyObject = { ref: {} };
 
-  const withStoreContext = WrappedComponent => props => {
+  // Legacy Store Provider
+  const withLegacyStoreContext = WrappedComponent => props => {
     let storeKey = props.storeKey;
     let store = useCustomHook(props);
     if (!!store.Context) throw new Error("'Context' property is protected and cannot exist on a store object");
@@ -55,25 +62,64 @@ const setupStore = (useCustomHook, config = _defaultConfig) => {
       }
     }
 
+    const value = config.legacyReturnStoreAsArray ? [store] : store;
+
     return (
-      <StoreContext.Provider value={[store]}>
+      <StoreContext.Provider value={value}>
         <WrappedComponent {...props} />
       </StoreContext.Provider>
     );
   };
 
+  // New Store Provider
+  const withStoreContext = WrappedComponent => {
+    const StoreContextWrapper = ({ children, ...props }) => {
+      let storeKey = props.storeKey;
+      let store = useCustomHook(props);
+      if (!!store.Context) throw new Error("'Context' property is protected and cannot exist on a store object");
+      if (!!store.Provider) throw new Error("'Provider' property is protected and cannot exist on a store object");
+
+      if (storeProxy) {
+        if (storeKey) {
+          storeProxyObject.ref[storeKey] = store;
+        } else storeProxyObject.ref = store;
+      } else {
+        if (storeKey) {
+          storeRef[storeKey] = store;
+        } else {
+          for (let key in store) {
+            storeRef[key] = store[key];
+          }
+        }
+      }
+
+      const value = config.legacyReturnStoreAsArray ? [store] : store;
+
+      return <StoreContext.Provider value={value}>{children}</StoreContext.Provider>;
+    };
+
+    const Wrapper = props => (
+      <StoreContextWrapper {...props}>
+        <WrappedComponent {...props} />
+      </StoreContextWrapper>
+    );
+    return Wrapper;
+  };
+
   if (!!Proxy && config.proxyEnabled) {
     storeProxy = new Proxy(storeProxyObject, {
       get: (target, property) => {
         if (property === 'Context') return StoreContext;
         if (property === 'Provider') return withStoreContext;
+        if (property === 'LegacyProvider') return withLegacyStoreContext;
         return target.ref[property];
       },
       set: (target, property, value) => (target.ref[property] = value)
     });
   } else {
     storeRef.Context = StoreContext;
     storeRef.Provider = withStoreContext;
+    storeRef.LegacyProvider = withLegacyStoreContext;
   }
 
   return storeProxy || storeRef;