feat(auto-effect): add autoEffect and clearEffect

Author: solkimicreb

__tests__/autoEffect.no-hook.test.jsx

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { render, cleanup } from '@testing-library/react/pure';
+// eslint-disable-next-line import/no-unresolved
+import { view, store, autoEffect } from 'react-easy-state';
+
+describe('AutoEffect edge cases and errors', () => {
+  afterEach(cleanup);
+
+  test(`Using autoEffect in a function component ${
+    process.env.NOHOOK
+      ? 'with a version of react that has no hooks should'
+      : 'should not'
+  } throw an error`, () => {
+    const someEffect = () => {};
+
+    const MyComp = view(() => {
+      const person = store({ name: 'Bob' });
+      autoEffect(() => someEffect(person.name));
+      return <div>{person.name}</div>;
+    });
+
+    if (process.env.NOHOOK) {
+      expect(() => render(<MyComp />)).toThrow(
+        '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.',
+      );
+    } else {
+      expect(() => render(<MyComp />)).not.toThrow();
+    }
+  });
+
+  test('Using autoEffect inside a render of a class component should throw an error', () => {
+    const someEffect = () => {};
+    const person = store({ name: 'Bob' });
+
+    const MyComp = view(
+      class extends Component {
+        render() {
+          autoEffect(() => someEffect(person.name));
+          return <div>{person.name}</div>;
+        }
+      },
+    );
+
+    expect(() => render(<MyComp />)).toThrow(
+      'You cannot use autoEffect inside a render of a class component. Please use it in the constructor or lifecycle methods instead.',
+    );
+  });
+});

__tests__/autoEffect.test.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { render, cleanup, act } from '@testing-library/react/pure';
+import {
+  view,
+  store,
+  autoEffect,
+  clearEffect,
+  // eslint-disable-next-line import/no-unresolved
+} from 'react-easy-state';
+
+describe.only('autoEffect', () => {
+  afterEach(cleanup);
+
+  test('should auto run global effects', () => {
+    let documentTitle = '';
+    const app = store({ name: 'Online Store' });
+
+    const effect = autoEffect(() => {
+      documentTitle = app.name;
+    });
+    expect(documentTitle).toBe('Online Store');
+
+    act(() => {
+      app.name = 'Learning Platform';
+    });
+    expect(documentTitle).toBe('Learning Platform');
+
+    clearEffect(effect);
+    act(() => {
+      app.name = 'Social Platform';
+    });
+    expect(documentTitle).toBe('Learning Platform');
+  });
+
+  test('should auto run local effects in function components', () => {
+    let documentTitle = '';
+
+    const app = store({ name: 'Online Store' });
+
+    const MyComp = view(() => {
+      autoEffect(() => {
+        documentTitle = app.name;
+      });
+      return <div>{app.name}</div>;
+    });
+
+    const { container, unmount } = render(<MyComp />);
+    expect(container).toHaveTextContent('Online Store');
+    expect(documentTitle).toBe('Online Store');
+
+    act(() => {
+      app.name = 'Learning Platform';
+    });
+    expect(container).toHaveTextContent('Learning Platform');
+    expect(documentTitle).toBe('Learning Platform');
+
+    unmount();
+    act(() => {
+      app.name = 'Social Platform';
+    });
+    expect(documentTitle).toBe('Learning Platform');
+  });
+
+  test('should be recreated on dependency changes in function components', () => {
+    let documentTitle = '';
+
+    const app = store({ name: 'Store' });
+
+    const MyComp = view(({ name }) => {
+      autoEffect(() => {
+        documentTitle = `${name} ${app.name}`;
+      }, [name]);
+      return (
+        <div>
+          {name}
+          {app.name}
+        </div>
+      );
+    });
+
+    const { container, rerender } = render(<MyComp name="Online" />);
+    expect(container).toHaveTextContent('Online Store');
+    expect(documentTitle).toBe('Online Store');
+
+    rerender(<MyComp name="Awesome" />);
+    expect(container).toHaveTextContent('Awesome Store');
+    expect(documentTitle).toBe('Awesome Store');
+
+    act(() => {
+      app.name = 'Page';
+    });
+    expect(container).toHaveTextContent('Awesome Page');
+    expect(documentTitle).toBe('Awesome Page');
+  });
+});

__tests__/store.no-hook.test.jsx

@@ -3,7 +3,7 @@ import { render, cleanup } from '@testing-library/react/pure';
 // eslint-disable-next-line import/no-unresolved
 import { view, store } from 'react-easy-state';
 
-describe('Using an old react version', () => {
+describe('Store edge cases and errors', () => {
   afterEach(cleanup);
 
   test(`Using local state in a function component ${

src/autoEffect.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { observe, unobserve } from '@nx-js/observer-util';
+
+import {
+  isInsideFunctionComponent,
+  isInsideClassComponentRender,
+  isInsideFunctionComponentWithoutHooks,
+} from './view';
+
+export function autoEffect(fn, deps = []) {
+  if (isInsideFunctionComponent) {
+    return useEffect(() => {
+      const observer = observe(fn);
+      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.',
+    );
+  }
+  if (isInsideClassComponentRender) {
+    throw new Error(
+      'You cannot use autoEffect inside a render of a class component. Please use it in the constructor or lifecycle methods instead.',
+    );
+  }
+  return observe(fn);
+}
+
+export { unobserve as clearEffect };

src/index.js

@@ -1,5 +1,4 @@
-export { observe, unobserve } from '@nx-js/observer-util';
-
 export { view } from './view';
 export { store } from './store';
 export { batch } from './scheduler';
+export { autoEffect, clearEffect } from './autoEffect';