atlassian · albertogasparin · May 16, 2023 · May 11, 2023 · May 11, 2023 · May 16, 2023
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,7 +26,7 @@ module.exports = {
     // fix for eslint-plugin-flowtype/384 not supporting wildcard
     _: 'readonly',
   },
-  plugins: ['react', 'react-hooks', 'import', 'flowtype'],
+  plugins: ['react', 'react-hooks', 'import'],
   rules: {
     'no-shadow': ['error'],
     indent: ['off'],

diff --git a/examples/advanced-shared/components/color.tsx b/examples/advanced-shared/components/color.tsx
@@ -0,0 +1,37 @@
+import {
+  createStore,
+  createHook,
+  type StoreActionApi,
+} from 'react-sweet-state';
+import { ThemingContainer } from './theming';
+
+type State = {
+  color: string;
+};
+
+const initialState: State = {
+  color: 'white',
+};
+
+const actions = {
+  set:
+    (color: string) =>
+    ({ setState }: StoreActionApi<State>) => {
+      setState({ color });
+    },
+};
+
+const Store = createStore({
+  initialState,
+  actions,
+  containedBy: ThemingContainer,
+  handlers: {
+    onInit:
+      () =>
+      ({ setState }, { initialData }) => {
+        if (initialData) setState({ color: initialData.color });
+      },
+  },
+});
+
+export const useColor = createHook(Store);
diff --git a/examples/advanced-shared/components/theming.tsx b/examples/advanced-shared/components/theming.tsx
@@ -0,0 +1,6 @@
+import { createContainer } from 'react-sweet-state';
+
+export type ThemingContainerProps = {
+  initialData?: { width: number; color: string };
+};
+export const ThemingContainer = createContainer<ThemingContainerProps>();
diff --git a/examples/advanced-shared/components/width.tsx b/examples/advanced-shared/components/width.tsx
@@ -0,0 +1,37 @@
+import {
+  createStore,
+  createHook,
+  type StoreActionApi,
+} from 'react-sweet-state';
+import { ThemingContainer } from './theming';
+
+type State = {
+  width: number;
+};
+
+const initialState: State = {
+  width: 200,
+};
+
+const actions = {
+  set:
+    (width: number) =>
+    ({ setState }: StoreActionApi<State>) => {
+      setState({ width });
+    },
+};
+
+const Store = createStore({
+  initialState,
+  actions,
+  containedBy: ThemingContainer,
+  handlers: {
+    onInit:
+      () =>
+      ({ setState }, { initialData }) => {
+        if (initialData) setState({ width: initialData.width });
+      },
+  },
+});
+
+export const useWidth = createHook(Store);
diff --git a/examples/advanced-shared/index.html b/examples/advanced-shared/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Advanced shared scoped example</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/advanced-shared/index.tsx b/examples/advanced-shared/index.tsx
@@ -0,0 +1,56 @@
+import React, { StrictMode } from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { useColor } from './components/color';
+import { useWidth } from './components/width';
+import { ThemingContainer } from './components/theming';
+
+const colors = ['white', 'aliceblue', 'beige', 'gainsboro', 'honeydew'];
+const widths = [200, 220, 240, 260, 280];
+const rand = () => Math.floor(Math.random() * colors.length);
+const initialData = { color: colors[rand()], width: widths[rand()] };
+
+/**
+ * Components
+ */
+const ThemeHook = ({ title }: { title: string }) => {
+  const [{ color }, { set: setColor }] = useColor();
+  const [{ width }, { set: setWidth }] = useWidth();
+
+  return (
+    <div style={{ background: color, width }}>
+      <h3>Component {title}</h3>
+      <p>Color: {color}</p>
+      <p>Width: {width}</p>
+      <button onClick={() => setColor(colors[rand()])}>Change color</button>
+      <button onClick={() => setWidth(widths[rand()])}>Change width</button>
+    </div>
+  );
+};
+
+/**
+ * Main App
+ */
+const App = () => (
+  <div>
+    <h1>Advanced dynamic scoped example</h1>
+    <main>
+      <ThemingContainer scope="t1">
+        <ThemeHook title="scope" />
+      </ThemingContainer>
+      <ThemingContainer initialData={initialData}>
+        <ThemeHook title="local" />
+      </ThemingContainer>
+      <ThemingContainer scope="t1">
+        <ThemeHook title="scope sync" />
+      </ThemingContainer>
+    </main>
+  </div>
+);
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/examples/basic-flow/components.js b/examples/basic-flow/components.js
diff --git a/examples/basic-flow/index.html b/examples/basic-flow/index.html
diff --git a/examples/basic-flow/index.js b/examples/basic-flow/index.js
diff --git a/examples/basic-ts/index.tsx b/examples/basic-ts/index.tsx
@@ -1,4 +1,3 @@
-// @flow
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 

diff --git a/src/__tests__/mocks.js b/src/__tests__/mocks.js
@@ -21,9 +21,3 @@ export const storeStateMock = {
   listeners: () => [],
   mutator: () => {},
 };
-
-export const registryMock = {
-  configure: jest.fn(),
-  getStoreState: jest.fn(),
-  deleteStoreState: jest.fn(),
-};
diff --git a/src/__tests__/types.flow.js b/src/__tests__/types.flow.js
@@ -426,3 +426,48 @@ Test = (
     bla
   </TypePropsContainer>
 );
+
+/**
+ * Shared Container types tests
+ */
+
+type SharedContainerProps = {|
+  initValue?: number,
+|};
+const TypeSharedContainer = createContainer<SharedContainerProps>();
+
+Test = (
+  // $FlowExpectedError[incompatible-type]
+  <TypeSharedContainer>{({ count }) => count}</TypeSharedContainer>
+);
+
+Test = (
+  // $FlowExpectedError[prop-missing]
+  <TypeSharedContainer foo="1">bla</TypeSharedContainer>
+);
+
+// Correct
+Test = <TypeSharedContainer>bla</TypeSharedContainer>;
+Test = <TypeSharedContainer scope="a">bla</TypeSharedContainer>;
+Test = <TypeSharedContainer isGlobal>bla</TypeSharedContainer>;
+Test = <TypeSharedContainer initValue={1}>bla</TypeSharedContainer>;
+
+createStore<State, Actions, SharedContainerProps>({
+  initialState: { count: 0 },
+  actions: {},
+  containedBy: TypeSharedContainer,
+  handlers: {
+    onInit:
+      () =>
+      ({ setState }, { initValue }) => {
+        if (initValue) {
+          // $FlowExpectedError[prop-missing]
+          initValue.split;
+          setState({ count: initValue });
+        }
+      },
+    onUpdate: () => () => undefined,
+    onDestroy: () => () => undefined,
+    onContainerUpdate: () => () => undefined,
+  },
+});
diff --git a/src/components/__tests__/container.test.js b/src/components/__tests__/container.test.js
@@ -12,6 +12,7 @@ import { createSubscriber } from '../subscriber';
 const mockLocalRegistry = {
   configure: jest.fn(),
   getStore: jest.fn(),
+  hasStore: jest.fn(),
   deleteStore: jest.fn(),
 };
 
@@ -21,6 +22,7 @@ jest.mock('../../store/registry', () => ({
   defaultRegistry: {
     configure: jest.fn(),
     getStore: jest.fn(),
+    hasStore: jest.fn(),
     deleteStore: jest.fn(),
   },
 }));