add effector

Author: Sergey Sova

README.md

@@ -291,6 +291,19 @@ in your browser, and click the button very quickly. (check the console log)
     check with intensive auto increment
       ✓ check 8: updated properly with auto increment (2944 ms)
       ✕ check 9: no tearing with auto increment (1 ms)
+  effector
+    check with events from outside
+      ✓ check 1: updated properly (3249 ms)
+      ✕ check 2: no tearing during update (22 ms)
+      ✓ check 3: ability to interrupt render
+      ✓ check 4: proper update after interrupt (1518 ms)
+    check with useTransition
+      ✓ check 5: updated properly with transition (3533 ms)
+      ✕ check 6: no tearing with transition (2 ms)
+      ✕ check 7: proper branching with transition (5423 ms)
+    check with intensive auto increment
+      ✓ check 8: updated properly with auto increment (3055 ms)
+      ✕ check 9: no tearing with auto increment (2 ms)
 ```
 
 </details>
@@ -438,7 +451,7 @@ in your browser, and click the button very quickly. (check the console log)
     <td>:white_check_mark:</td>
     <td>:white_check_mark:</td>
   </tr>
-  
+
   </tr>
     <th><a href="https://github.com/mobxjs/mobx-react-lite">mobx-react-lite</a></th>
     <td>:white_check_mark:</td>
@@ -528,6 +541,19 @@ in your browser, and click the button very quickly. (check the console log)
     <td>:white_check_mark:</td>
     <td>:x:</td>
   </tr>
+
+  <tr>
+    <th><a href="https://github.com/zerobias/effector">effector</a></th>
+    <td>:white_check_mark:</td>
+    <td>:x:</td>
+    <td>:white_check_mark:</td>
+    <td>:white_check_mark:</td>
+    <td>:white_check_mark:</td>
+    <td>:x:</td>
+    <td>:x:</td>
+    <td>:white_check_mark:</td>
+    <td>:x:</td>
+  </tr>
 </table>
 
 ## Caution

__tests__/all_spec.js

@@ -21,6 +21,7 @@ const names = [
   'simplux',
   'react-apollo',
   'recoil',
+  'effector',
 ];
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

package.json

@@ -33,6 +33,7 @@
     "build:simplux": "cross-env NAME=simplux webpack",
     "build:react-apollo": "cross-env NAME=react-apollo webpack",
     "build:recoil": "cross-env NAME=recoil webpack",
+    "build:effector": "cross-env NAME=effector webpack",
     "build-all": "run-s build:*"
   },
   "keywords": [
@@ -49,6 +50,8 @@
     "@simplux/react": "^0.13.0",
     "apollo-boost": "^0.4.9",
     "constate": "^2.0.0",
+    "effector": "^20.15.0",
+    "effector-react": "^20.7.2",
     "graphql": "^15.0.0",
     "mobx": "^5.15.4",
     "mobx-react-lite": "^2.0.6",

src/effector/index.js

@@ -0,0 +1,64 @@
+import React, { unstable_useTransition as useTransition } from 'react';
+import { createStore, createEvent } from 'effector';
+import { useStore } from 'effector-react';
+
+import {
+  ids,
+  initialState,
+  reducer,
+  syncBlock,
+  useCheckTearing,
+  useRegisterIncrementDispatcher,
+} from '../common';
+
+const dispatch = createEvent();
+const $store = createStore(initialState)
+  .on(dispatch, reducer);
+
+const $count = $store.map((value) => value.count);
+
+$store.watch((s) => console.log('store', s));
+$count.watch((c) => console.log('count', c));
+
+const Counter = React.memo(() => {
+  const count = useStore($count);
+  syncBlock();
+  return <div className="count">{count}</div>;
+});
+
+const Main = () => {
+  const count = useStore($count);
+  useCheckTearing();
+  useRegisterIncrementDispatcher(React.useCallback(() => {
+    dispatch({ type: 'increment' });
+  }, []));
+  const [localCount, localIncrement] = React.useReducer((c) => c + 1, 0);
+  const normalIncrement = () => {
+    dispatch({ type: 'increment' });
+  };
+  const [startTransition, isPending] = useTransition();
+  const transitionIncrement = () => {
+    startTransition(() => {
+      dispatch({ type: 'increment' });
+    });
+  };
+  return (
+    <div>
+      <button type="button" id="normalIncrement" onClick={normalIncrement}>Increment shared count normally (two clicks to increment one)</button>
+      <button type="button" id="transitionIncrement" onClick={transitionIncrement}>Increment shared count in transition (two clicks to increment one)</button>
+      <span id="pending">{isPending && 'Pending...'}</span>
+      <h1>Shared Count</h1>
+      {ids.map((id) => <Counter key={id} />)}
+      <div className="count">{count}</div>
+      <h1>Local Count</h1>
+      {localCount}
+      <button type="button" id="localIncrement" onClick={localIncrement}>Increment local count</button>
+    </div>
+  );
+};
+
+const App = () => (
+  <Main />
+);
+
+export default App;

yarn.lock

@@ -3125,6 +3125,18 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+effector-react@^20.7.2:
+  version "20.7.2"
+  resolved "https://registry.yarnpkg.com/effector-react/-/effector-react-20.7.2.tgz#e22ab98339b3c8737f0918a9d9fd87c406cd22ca"
+  integrity sha512-oVGD6hwKeZtym0lQL7voB09Pb3lFGFJPkQ4TIj8LiGPDTesZvowr3PhnTRIOWFJ1XAjuM/kDSjVZnZikJYeRBg==
+
+effector@^20.15.0:
+  version "20.15.0"
+  resolved "https://registry.yarnpkg.com/effector/-/effector-20.15.0.tgz#5138ca72d2bc7f02cd68236831a7a5a325ddd5df"
+  integrity sha512-R1D4mtqL37Jjma+Sjw+QlBuP2nlMS2adROnvK3kmQMHs4MSHuwFYzdw9OVbaG0yL3a2aWsoh6LfdfhP2Ol1ftQ==
+  dependencies:
+    symbol-observable "^1.2.0"
+
 electron-to-chromium@^1.3.413:
   version "1.3.438"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.438.tgz#56051a9b148842fec813b113e8070ae892a85920"