added nanostores

bennobuilder · bennobuilder · commit a4d440f64301 · 2021-07-05T07:37:42.000+02:00
diff --git a/benchmark/benchmarks/react/1000fields/bench/agilets/collection.tsx b/benchmark/benchmarks/react/1000fields/bench/agilets/collection.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { Agile, Logger } from '@agile-ts/core';
 import { useAgile, useValue } from '@agile-ts/react';
 
diff --git a/benchmark/benchmarks/react/1000fields/bench/agilets/state.tsx b/benchmark/benchmarks/react/1000fields/bench/agilets/state.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { Agile, Logger } from '@agile-ts/core';
 import { useProxy, useSelector } from '@agile-ts/react';
 
diff --git a/benchmark/benchmarks/react/1000fields/bench/hookstate.tsx b/benchmark/benchmarks/react/1000fields/bench/hookstate.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { createState, useHookstate, State } from '@hookstate/core';
 
 const fields = createState(
diff --git a/benchmark/benchmarks/react/1000fields/bench/jotai.tsx b/benchmark/benchmarks/react/1000fields/bench/jotai.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { atom, useAtom, Atom } from 'jotai';
 
 const fields = Array.from(Array(1000).keys()).map((i) =>
diff --git a/benchmark/benchmarks/react/1000fields/bench/mobx.tsx b/benchmark/benchmarks/react/1000fields/bench/mobx.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 
diff --git a/benchmark/benchmarks/react/1000fields/bench/nanostores.tsx b/benchmark/benchmarks/react/1000fields/bench/nanostores.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { createStore, WritableStore } from 'nanostores';
+import { useStore } from 'nanostores/react';
+
+const fieldsStore = createStore<WritableStore<string>[]>(() => {
+  const fields = Array.from(Array(1000).keys()).map((i) => {
+    const fieldStore = createStore<string>(() => {
+      fieldsStore.set(`Field #${i + 1}` as any);
+    });
+    return fieldStore;
+  });
+
+  fieldsStore.set(fields);
+});
+
+let updatedFieldsCount = 0;
+
+function Field({ field }: { field: WritableStore<string> }) {
+  const name = useStore(field);
+
+  updatedFieldsCount++;
+
+  return (
+    <div>
+      Last {`<Field>`} render at: {new Date().toISOString()}
+      &nbsp;
+      <input
+        value={name}
+        onChange={(e) => {
+          field.set(e.target.value);
+          (document.getElementById(
+            'updatedFieldsCount'
+          ) as any).innerText = updatedFieldsCount;
+        }}
+      />
+    </div>
+  );
+}
+
+function App() {
+  const fields = useStore(fieldsStore);
+  return (
+    <div>
+      <div>
+        Last {`<App>`} render at: {new Date().toISOString()}
+      </div>
+      <br />
+      {fields.map((field, index) => (
+        <Field key={index} field={field} />
+      ))}
+      <div id={'updatedFieldsCount'} />
+    </div>
+  );
+}
+
+export default function (target: HTMLElement) {
+  ReactDom.render(<App key={'nanostores'} />, target);
+}
diff --git a/benchmark/benchmarks/react/1000fields/bench/recoil.tsx b/benchmark/benchmarks/react/1000fields/bench/recoil.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { atom, RecoilRoot, RecoilState, useRecoilState } from 'recoil';
 
 const fields = Array.from(Array(1000).keys()).map((i) =>
diff --git a/benchmark/benchmarks/react/1000fields/bench/redux.tsx b/benchmark/benchmarks/react/1000fields/bench/redux.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { configureStore, createSlice } from '@reduxjs/toolkit';
 import { Provider, useDispatch, useSelector } from 'react-redux';
 
diff --git a/benchmark/benchmarks/react/1000fields/bench/valtio.tsx b/benchmark/benchmarks/react/1000fields/bench/valtio.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import * as ReactDom from 'react-dom';
+import React from 'react';
+import ReactDom from 'react-dom';
 import { proxy, useSnapshot } from 'valtio';
 
 const state = proxy({
diff --git a/benchmark/benchmarks/react/1000fields/index.ts b/benchmark/benchmarks/react/1000fields/index.ts
@@ -8,6 +8,7 @@ import agileNestedState from './bench/agilets/nestedState';
 import hookstate from './bench/hookstate';
 import jotai from './bench/jotai';
 import mobx from './bench/mobx';
+import nanostores from './bench/nanostores';
 import recoil from './bench/recoil';
 import redux from './bench/redux';
 import valtio from './bench/valtio';
@@ -65,6 +66,7 @@ suite
   .add('Hookstate', configTest(hookstate))
   .add('Jotai', configTest(jotai))
   .add('Mobx', configTest(mobx))
+  .add('Nano Stores', configTest(nanostores))
   .add('Recoil', configTest(recoil))
   .add('Redux', configTest(redux))
   .add('Valtio', configTest(valtio))
diff --git a/benchmark/benchmarks/react/computed/bench/agilets/autoTracking.tsx b/benchmark/benchmarks/react/computed/bench/agilets/autoTracking.tsx
@@ -9,12 +9,21 @@ const COMPUTED_COUNT = AgileApp.createComputed(() => {
   return COUNT.value * 5;
 });
 
+const CountView = () => {
+  const count = useAgile(COUNT);
+  return <h1 onClick={() => COUNT.set((state) => state + 1)}>{count}</h1>;
+};
+
+const ComputedCountView = () => {
+  const computedCount = useAgile(COMPUTED_COUNT);
+  return <p>{computedCount}</p>;
+};
+
 const App = () => {
-  const [count, computedCount] = useAgile([COUNT, COMPUTED_COUNT]);
   return (
     <div>
-      <h1 onClick={() => COUNT.set((state) => state + 1)}>{count}</h1>
-      <p>{computedCount}</p>
+      <CountView />
+      <ComputedCountView />
     </div>
   );
 };
diff --git a/benchmark/benchmarks/react/computed/bench/agilets/hardCoded.tsx b/benchmark/benchmarks/react/computed/bench/agilets/hardCoded.tsx
@@ -12,12 +12,21 @@ const COMPUTED_COUNT = AgileApp.createComputed(
   { autodetect: false, computedDeps: [COUNT] }
 );
 
+const CountView = () => {
+  const count = useAgile(COUNT);
+  return <h1 onClick={() => COUNT.set((state) => state + 1)}>{count}</h1>;
+};
+
+const ComputedCountView = () => {
+  const computedCount = useAgile(COMPUTED_COUNT);
+  return <p>{computedCount}</p>;
+};
+
 const App = () => {
-  const [count, computedCount] = useAgile([COUNT, COMPUTED_COUNT]);
   return (
     <div>
-      <h1 onClick={() => COUNT.set((state) => state + 1)}>{count}</h1>
-      <p>{computedCount}</p>
+      <CountView />
+      <ComputedCountView />
     </div>
   );
 };
diff --git a/benchmark/benchmarks/react/computed/bench/jotai.tsx b/benchmark/benchmarks/react/computed/bench/jotai.tsx
@@ -5,13 +5,21 @@ import { atom, useAtom } from 'jotai';
 const countAtom = atom(0);
 const computedCountAtom = atom((get) => get(countAtom) * 5);
 
-const App = () => {
+const CountView = () => {
   const [count, setCount] = useAtom(countAtom);
+  return <h1 onClick={() => setCount((v) => v + 1)}>{count}</h1>;
+};
+
+const ComputedCountView = () => {
   const [computedCount] = useAtom(computedCountAtom);
+  return <p>{computedCount}</p>;
+};
+
+const App = () => {
   return (
     <div>
-      <h1 onClick={() => setCount((v) => v + 1)}>{count}</h1>
-      <p>{computedCount}</p>
+      <CountView />
+      <ComputedCountView />
     </div>
   );
 };
diff --git a/benchmark/benchmarks/react/computed/bench/nanostores.tsx b/benchmark/benchmarks/react/computed/bench/nanostores.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { createDerived, createStore, getValue } from 'nanostores';
+import { useStore } from 'nanostores/react';
+
+const countStore = createStore<number>(() => {
+  countStore.set(0);
+});
+const computedStore = createDerived(countStore, (count) => {
+  return count * 5;
+});
+
+const CountView = () => {
+  const count = useStore(countStore);
+  return (
+    <h1 onClick={() => countStore.set(getValue(countStore) + 1)}>{count}</h1>
+  );
+};
+
+const ComputedCountView = () => {
+  const computedCount = useStore(computedStore);
+  return <p>{computedCount}</p>;
+};
+
+const App = () => {
+  return (
+    <div>
+      <CountView />
+      <ComputedCountView />
+    </div>
+  );
+};
+
+export default function (target: HTMLElement) {
+  ReactDom.render(<App key={'nanostores'} />, target);
+}
diff --git a/benchmark/benchmarks/react/computed/bench/recoil.tsx b/benchmark/benchmarks/react/computed/bench/recoil.tsx
@@ -7,25 +7,34 @@ import {
   selector,
   useRecoilValue,
 } from 'recoil';
+import { useAtom } from 'jotai';
 
-const counterState = atom({
-  key: 'counterState',
+const countState = atom({
+  key: 'countState',
   default: 0,
 });
-const computedCounterState = selector({
-  key: 'computedCounterState',
+const computedCountState = selector({
+  key: 'computedCountState',
   get: ({ get }) => {
-    return get(counterState) * 5;
+    return get(countState) * 5;
   },
 });
 
+const CountView = () => {
+  const [count, setCount] = useRecoilState(countState);
+  return <h1 onClick={() => setCount((v) => v + 1)}>{count}</h1>;
+};
+
+const ComputedCountView = () => {
+  const computedCount = useRecoilValue(computedCountState);
+  return <p>{computedCount}</p>;
+};
+
 const App = () => {
-  const [count, setCount] = useRecoilState(counterState);
-  const computedCount = useRecoilValue(computedCounterState);
   return (
     <div>
-      <h1 onClick={() => setCount((v) => v + 1)}>{count}</h1>
-      <p>{computedCount}</p>
+      <CountView />
+      <ComputedCountView />
     </div>
   );
 };
diff --git a/benchmark/benchmarks/react/computed/index.ts b/benchmark/benchmarks/react/computed/index.ts
@@ -5,6 +5,7 @@ import Benchmark, { Suite, Options } from 'benchmark';
 import agileAutoTracking from './bench/agilets/autoTracking';
 import agileHardCoded from './bench/agilets/hardCoded';
 import jotai from './bench/jotai';
+import nanostores from './bench/nanostores';
 import recoil from './bench/recoil';
 
 // @ts-ignore
@@ -55,8 +56,9 @@ function configTest(renderElement: (target: HTMLElement) => void): Options {
 // Add Tests to the Benchmark Test Suite
 suite
   .add('Agile Auto Tracking', configTest(agileAutoTracking))
-  .add('Agile Hard Coded', configTest(agileAutoTracking))
+  .add('Agile Hard Coded', configTest(agileHardCoded))
   .add('Jotai', configTest(jotai))
+  .add('Nano Stores', configTest(nanostores))
   .add('Recoil', configTest(recoil))
 
   // Add Listener
diff --git a/benchmark/benchmarks/react/counter/bench/nanostores.tsx b/benchmark/benchmarks/react/counter/bench/nanostores.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { createStore, getValue } from 'nanostores';
+import { useStore } from 'nanostores/react';
+
+const countStore = createStore<number>(() => {
+  countStore.set(0);
+});
+
+const App = () => {
+  const count = useStore(countStore);
+  return (
+    <h1 onClick={() => countStore.set(getValue(countStore) + 1)}>{count}</h1>
+  );
+};
+
+export default function (target: HTMLElement) {
+  ReactDom.render(<App key={'nanostores'} />, target);
+}
diff --git a/benchmark/benchmarks/react/counter/index.ts b/benchmark/benchmarks/react/counter/index.ts
@@ -6,6 +6,7 @@ import agilets from './bench/agilets';
 import hookstate from './bench/hookstate';
 import jotai from './bench/jotai';
 import mobx from './bench/mobx';
+import nanostores from './bench/nanostores';
 import recoil from './bench/recoil';
 import redux from './bench/redux';
 import reduxToolkit from './bench/redux-toolkit';
@@ -56,6 +57,7 @@ suite
   .add('Hookstate', configTest(hookstate))
   .add('Jotai', configTest(jotai))
   .add('Mobx', configTest(mobx))
+  .add('Nano Stores', configTest(nanostores))
   .add('Recoil', configTest(recoil))
   .add('Redux', configTest(redux))
   .add('Redux-Toolkit', configTest(reduxToolkit))
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -32,6 +32,7 @@
     "lodash": "^4.17.21",
     "mobx": "^6.3.2",
     "mobx-react": "^7.2.0",
+    "nanostores": "^0.3.3",
     "playwright": "^1.12.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/benchmark/yarn.lock b/benchmark/yarn.lock
@@ -351,6 +351,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+nanostores@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/nanostores/-/nanostores-0.3.3.tgz#3f6a858d3e2700c70c7942301380550f66a8e9ee"
+  integrity sha512-+MemxV/HzzTPJQCvzEmwfIFMAIcDEiod37A5F1ERyKQqtm6hbEfuNokfmJfecYM2gjunlPdPHA5lQ9cwHHSYNg==
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
