atlassian · albertogasparin · Jan 5, 2024 · Mar 17, 2024
diff --git a/examples/batch-order/controllers/alpha.tsx b/examples/batch-order/controllers/alpha.tsx
@@ -0,0 +1,37 @@
+import {
+  StoreActionApi,
+  createStore,
+  createContainer,
+  createStateHook,
+  createActionsHook,
+} from 'react-sweet-state';
+
+type State = {
+  value: number;
+};
+
+type StoreAPI = StoreActionApi<State>;
+
+const setValue =
+  (value: number) =>
+  ({ setState }: StoreAPI) => {
+    setState({ value });
+  };
+
+const actions = { setValue };
+
+const Store = createStore<State, typeof actions>({
+  initialState: { value: 0 },
+  actions,
+  name: 'alpha',
+});
+
+export const AlphaContainer = createContainer<State, typeof actions>(Store, {
+  displayName: 'AlphaContainer',
+});
+
+export const useAlphaValue = createStateHook(Store, {
+  selector: (state: State) => state.value,
+});
+
+export const useAlphaActions = createActionsHook(Store);
diff --git a/examples/batch-order/controllers/beta.tsx b/examples/batch-order/controllers/beta.tsx
@@ -0,0 +1,46 @@
+import {
+  StoreActionApi,
+  createStore,
+  createContainer,
+  createStateHook,
+  defaults,
+} from 'react-sweet-state';
+
+type Props = {
+  input: number;
+};
+
+type State = {
+  ouput: number | undefined;
+};
+
+type StoreAPI = StoreActionApi<State>;
+
+const init =
+  () =>
+  ({ setState }: StoreAPI, { input }: Props) => {
+    console.log('===== updating beta', input);
+    setState({ ouput: input });
+    if (input > 0) throw new Error('');
+  };
+
+const actions = {};
+
+const Store = createStore<State, typeof actions>({
+  initialState: { ouput: undefined },
+  actions,
+  name: 'beta',
+});
+
+export const BetaContainer = createContainer<State, typeof actions, Props>(
+  Store,
+  {
+    displayName: 'BetaContainer',
+    onInit: init,
+    onUpdate: init,
+  }
+);
+
+export const useBetaValue = createStateHook(Store, {
+  selector: (state) => state.ouput,
+});
diff --git a/examples/batch-order/controllers/gamma.tsx b/examples/batch-order/controllers/gamma.tsx
@@ -0,0 +1,44 @@
+import {
+  StoreActionApi,
+  createStore,
+  createContainer,
+  createStateHook,
+} from 'react-sweet-state';
+
+type Props = {
+  input: number | undefined;
+};
+
+type State = {
+  ouput: number | undefined;
+};
+
+type StoreAPI = StoreActionApi<State>;
+
+const init =
+  () =>
+  ({ setState }: StoreAPI, { input }: Props) => {
+    console.log('===== updating gamma');
+    setState({ ouput: input });
+  };
+
+const actions = {};
+
+const Store = createStore<State, typeof actions>({
+  initialState: { ouput: undefined },
+  actions,
+  name: 'gamma',
+});
+
+export const GammaContainer = createContainer<State, typeof actions, Props>(
+  Store,
+  {
+    displayName: 'GammaContainer',
+    onInit: init,
+    onUpdate: init,
+  }
+);
+
+export const useGammaValue = createStateHook(Store, {
+  selector: (state) => state.ouput,
+});
diff --git a/examples/batch-order/index.html b/examples/batch-order/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Basic example with TypeScript</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      main {
+        display: flex;
+        line-height: 1.5;
+      }
+      hr {
+        margin: 1em;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./bundle.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/examples/batch-order/index.tsx b/examples/batch-order/index.tsx
@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import ReactDOM from 'react-dom/client';
+
+import {
+  AlphaContainer,
+  useAlphaActions,
+  useAlphaValue,
+} from './controllers/alpha';
+import { BetaContainer, useBetaValue } from './controllers/beta';
+import { GammaContainer, useGammaValue } from './controllers/gamma';
+
+// uncomment and reload to "fix" behaviour
+import { defaults } from 'react-sweet-state';
+defaults.batchUpdates = false;
+
+const WiredBetaContainer = (props: { children?: ReactNode }) => {
+  console.log('Beta', 'useAlphaValue()', useAlphaValue());
+  return <BetaContainer input={useAlphaValue()} {...props} />;
+};
+
+const WiredGammaContainer = (props: { children?: ReactNode }) => {
+  console.log('Gamma');
+  return <GammaContainer input={useBetaValue()} {...props} />;
+};
+
+const Delta = () => {
+  const alphaValue = useAlphaValue();
+  const gammaValue = useGammaValue();
+
+  console.log('Delta', alphaValue, gammaValue);
+
+  const { setValue } = useAlphaActions();
+
+  return (
+    <button type="button" onClick={() => setValue((alphaValue ?? 0) + 1)}>
+      Update
+    </button>
+  );
+};
+
+function App() {
+  return (
+    <AlphaContainer>
+      <WiredBetaContainer>
+        <WiredGammaContainer>
+          <Delta />
+        </WiredGammaContainer>
+      </WiredBetaContainer>
+    </AlphaContainer>
+  );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<App />);
diff --git a/examples/concurrent/components.tsx b/examples/concurrent/components.tsx
@@ -0,0 +1,28 @@
+import { createStore, createHook, defaults, Action } from 'react-sweet-state';
+
+defaults.unstable_concurrent = false;
+
+type State = {
+  count: number;
+};
+
+const initialState: State = {
+  count: 0,
+};
+
+const actions = {
+  increment:
+    (): Action<State> =>
+    ({ setState, getState }) => {
+      setState({
+        count: getState().count + 1,
+      });
+    },
+};
+
+const Store = createStore({
+  initialState,
+  actions,
+});
+
+export const useCounter = createHook(Store);
diff --git a/examples/concurrent/index.html b/examples/concurrent/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Concurrent example</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      hr {
+        margin: 1em;
+      }
+      #fps {
+        background: #333;
+        color: #fff;
+        padding: 1em;
+      }
+      #fps::before {
+        content: 'FPS: ';
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="fps">0</div>
+    <div id="root"></div>
+    <script src="./bundle.js" type="text/javascript"></script>
+    <script>
+      let counter = 0;
+      let start = Date.now();
+      const el = document.querySelector('#fps');
+      function fps() {
+        const now = Date.now();
+        counter++;
+        if (now - start > 1000) {
+          el.innerHTML = counter;
+          counter = 0;
+          start = now;
+        }
+        window.requestAnimationFrame(fps);
+      }
+      fps();
+    </script>
+  </body>
+</html>
diff --git a/examples/concurrent/index.tsx b/examples/concurrent/index.tsx
@@ -0,0 +1,43 @@
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { useCounter } from './components';
+
+export const Expensive = () => {
+  // Hog main thread for 500 milliseconds
+  const start = Date.now();
+  while (Date.now() - start < 100) {
+    // do nothing
+  }
+  console.log('Render Expensive');
+
+  return <div style={{ border: '1px solid black' }}>Expensive</div>;
+};
+
+/**
+ * Main App
+ */
+const App = () => {
+  const [{ count }, { increment }] = useCounter();
+
+  return (
+    <div>
+      <h1>Expensive counter example</h1>
+      <main>
+        <p>{count}</p>
+        <button onClick={increment}>+1</button>
+        <hr />
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => (
+          <Expensive key={value} />
+        ))}
+      </main>
+    </div>
+  );
+};
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);