feat(store): add store options

Author: solkimicreb

__tests__/store.no-hook.test.jsx

@@ -73,29 +73,4 @@ describe('Store edge cases and errors', () => {
       'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
     );
   });
-
-  test('Using function parameter for store should use the returned object', () => {
-    const person = store(() => ({ name: 'Bob' }));
-    const MyComp = view(
-      class extends Component {
-        render() {
-          return <div>{person.name}</div>;
-        }
-      },
-    );
-    const { container } = render(<MyComp />);
-    expect(container).toHaveTextContent('Bob');
-  });
-
-  if (!process.env.NOHOOK) {
-    test('Using function parameter for store inside function component should use the returned object', () => {
-      const localStore = () => ({ name: 'Bob' });
-      const MyComp = view(() => {
-        const person = store(localStore);
-        return <div>{person.name}</div>;
-      });
-      const { container } = render(<MyComp />);
-      expect(container).toHaveTextContent('Bob');
-    });
-  }
 });

package-lock.json

@@ -59,7 +59,7 @@
     "es6 proxy"
   ],
   "dependencies": {
-    "@nx-js/observer-util": "^4.2.2"
+    "@nx-js/observer-util": "^4.3.0-alpha.2"
   },
   "peerDependencies": {
     "react": "*"

package.json

@@ -9,14 +9,6 @@ import {
 } from './view';
 
 export function autoEffect(fn, deps = []) {
-  if (isInsideFunctionComponent) {
-    return useEffect(() => {
-      const observer = observe(fn, {
-        scheduler: () => scheduler.add(observer),
-      });
-      return () => unobserve(observer);
-    }, deps);
-  }
   if (isInsideFunctionComponentWithoutHooks) {
     throw new Error(
       'You cannot use autoEffect inside a function component with a pre-hooks version of React. Please update your React version to at least v16.8.0 to use this feature.',
@@ -28,10 +20,18 @@ export function autoEffect(fn, deps = []) {
     );
   }
 
-  const observer = observe(fn, {
-    scheduler: () => scheduler.add(observer),
+  if (isInsideFunctionComponent) {
+    return useEffect(() => {
+      const reaction = observe(fn, {
+        scheduler: scheduler.add,
+      });
+      return () => unobserve(reaction);
+    }, deps);
+  }
+
+  return observe(fn, {
+    scheduler: scheduler.add,
   });
-  return observer;
 }
 
 export { unobserve as clearEffect };

src/autoEffect.js

@@ -8,21 +8,19 @@ import {
   isInsideFunctionComponentWithoutHooks,
 } from './view';
 
-function createStore(obj) {
-  return batchMethods(
-    observable(typeof obj === 'function' ? obj() : obj),
-  );
+function createStore(obj, options) {
+  return batchMethods(observable(obj, options));
 }
 
-export function store(obj) {
+export function store(obj, options) {
   // do not create new versions of the store on every render
   // if it is a local store in a function component
   // create a memoized store at the first call instead
   if (isInsideFunctionComponent) {
     // useMemo is not a semantic guarantee
     // In the future, React may choose to “forget” some previously memoized values and recalculate them on next render
     // see this docs for more explanation: https://reactjs.org/docs/hooks-reference.html#usememo
-    return useMemo(() => createStore(obj), []);
+    return useMemo(() => createStore(obj, options), []);
   }
   if (isInsideFunctionComponentWithoutHooks) {
     throw new Error(
@@ -34,5 +32,5 @@ export function store(obj) {
       'You cannot use state inside a render of a class component. Please create your store outside of the render function.',
     );
   }
-  return createStore(obj);
+  return createStore(obj, options);
 }