Merge pull request #3 from JuliusKoronci/feat/refactor-store-names

Feat/refactor store names

e2e/counter.spec.ts

@@ -21,10 +21,14 @@ test('test counter with classic store', async ({ page }) => {
   const counter3Text = getStorybookLocator(page).locator(
     'text=We are counting third: 0',
   );
+  const counterPromiseText = getStorybookLocator(page).locator(
+    'text=We are counting hydrating default: 88',
+  );
 
   await expect(counter1Text).toBeVisible();
   await expect(counter2Text).toBeVisible();
   await expect(counter3Text).toBeVisible();
+  await expect(counterPromiseText).toBeVisible();
 
   const button3 = getStorybookLocator(page).locator(
     'button:has-text("Let\'s go, third counter, reusing second store")',
@@ -68,4 +72,14 @@ test('test counter with classic store', async ({ page }) => {
   await expect(
     getStorybookLocator(page).locator('text=We are counting second: 2'),
   ).toBeVisible();
+
+  const buttonPromise = getStorybookLocator(page).locator(
+    'button:has-text("Let\'s go, promise counter")',
+  );
+  await buttonPromise.click();
+  await expect(
+    getStorybookLocator(page).locator(
+      'text=We are counting hydrating default: 89',
+    ),
+  ).toBeVisible();
 });

lib/__tests__/index.test.ts

@@ -3,6 +3,6 @@ import * as publicApi from '../index';
 
 describe('Public api', () => {
   it('Should have a test export', () => {
-    expect(publicApi.buildStore).toBeDefined();
+    expect(publicApi.buildClassicStore).toBeDefined();
   });
 });

lib/store.ts → lib/classic-store.ts

@@ -3,10 +3,22 @@ import { useMemo, useSyncExternalStore } from 'react';
 
 type UpdateFunction<T> = (state: T) => T;
 type Updater<T> = (cb: UpdateFunction<T>) => void;
+
+type DefaultState<T> =
+  | T
+  | {
+    hydrator: () => Promise<T>
+    beforeLoadState: T
+    persist?: (state: T) => Promise<void>
+  };
+
 interface StoreBuilder<T> {
-  defaultState: T
+  defaultState: DefaultState<T>
   useStore: () => [T, Updater<T>]
   useSelector: <S>(selector: (state: T) => S) => S
+  subject$: BehaviorSubject<T>
+  update: Updater<T>
+  getValue: () => T
 }
 
 const createStore = <T>(initialState: T) => {
@@ -20,12 +32,35 @@ const createStore = <T>(initialState: T) => {
   };
 };
 
-export const buildStore = <T>(defaultState: T): StoreBuilder<T> => {
-  const getStoreInstance = createStore(defaultState);
+const isDefaultState = <T>(
+  defaultState: DefaultState<T>
+): defaultState is T => {
+  if (
+    typeof defaultState === 'object' &&
+    defaultState !== null &&
+    'hydrator' in defaultState
+  ) {
+    return false;
+  }
+  return true;
+};
 
-  const useStore = () => {
-    const store = getStoreInstance();
+export const buildClassicStore = async <T>(
+  defaultState: DefaultState<T>
+): Promise<StoreBuilder<T>> => {
+  const initialState = isDefaultState<T>(defaultState)
+    ? defaultState
+    : await defaultState.hydrator();
+
+  const getStoreInstance = createStore(initialState);
 
+  const store = getStoreInstance();
+
+  const update: Updater<T> = (updater) => {
+    store.next(updater(store.getValue()));
+  };
+
+  const useStore = () => {
     const subscribe = (onStoreChange: () => void) => {
       const subscription = store.subscribe({
         next: onStoreChange,
@@ -36,10 +71,11 @@ export const buildStore = <T>(defaultState: T): StoreBuilder<T> => {
         subscription.unsubscribe();
       };
     };
-    const update: Updater<T> = (updater) => {
-      store.next(updater(store.getValue()));
-    };
-    const state: T = useSyncExternalStore(subscribe, () => store.getValue());
+    const state: T = useSyncExternalStore(
+      subscribe,
+      () => store.getValue(),
+      () => initialState
+    );
 
     return [state, update] satisfies [T, Updater<T>];
   };
@@ -51,9 +87,13 @@ export const buildStore = <T>(defaultState: T): StoreBuilder<T> => {
 
     return useMemo(() => selectedValue, [selectedValue]);
   };
+
   return {
     defaultState,
     useStore,
-    useSelector
+    useSelector,
+    subject$: store,
+    update,
+    getValue: () => store.getValue()
   };
 };

lib/index.ts

@@ -1 +1 @@
-export * from './store';
+export * from './classic-store';

stories/counter/DefaultPromise.tsx

@@ -0,0 +1,16 @@
+import { Button, Flex, Text } from '@radix-ui/themes';
+import React from 'react';
+import useStore, { useCounterPromiseSelector } from './counterStorePromise';
+
+export const DefaultPromise = () => {
+  const [, updateCount] = useStore();
+  const count = useCounterPromiseSelector((state) => state.count);
+  const increment = () =>
+    updateCount((prevState) => ({ ...prevState, count: prevState.count + 1 }));
+  return (
+    <Flex direction="column" gap="2">
+      <Text>We are counting hydrating default: {count}</Text>
+      <Button onClick={increment}>Let's go, promise counter</Button>
+    </Flex>
+  );
+};

stories/counter/Root.tsx

@@ -3,13 +3,15 @@ import { Counter } from './Counter';
 import React from 'react';
 import { Counter2 } from './Counter2';
 import { Counter3 } from './Counter3';
+import { DefaultPromise } from './DefaultPromise';
 
 export const Root = () => {
   return (
     <Flex direction="column" gap="2">
       <Counter />
       <Counter2 />
       <Counter3 />
+      <DefaultPromise />
     </Flex>
   );
 };

stories/counter/counterStore.ts

@@ -1,10 +1,10 @@
-import { buildStore } from '../../lib';
+import { buildClassicStore } from '../../lib';
 
 export interface CounterState {
   count: number;
 }
 
-const counterStoreBuilder = buildStore<CounterState>({ count: 0 });
+const counterStoreBuilder = await buildClassicStore<CounterState>({ count: 0 });
 const { useStore, useSelector: useCounterSelector } = counterStoreBuilder;
 
 export { useCounterSelector };

stories/counter/counterStore2.ts

@@ -1,10 +1,12 @@
-import { buildStore } from '../../lib';
+import { buildClassicStore } from '../../lib';
 
 export interface Counter2State {
   count: number;
 }
 
-const counter2StoreBuilder = buildStore<Counter2State>({ count: 0 });
+const counter2StoreBuilder = await buildClassicStore<Counter2State>({
+  count: 0,
+});
 const { useStore, useSelector: useCounter2Selector } = counter2StoreBuilder;
 
 export { useCounter2Selector };

stories/counter/counterStorePromise.ts

@@ -0,0 +1,15 @@
+import { buildClassicStore } from '../../lib';
+
+export interface CounterState {
+  count: number;
+}
+
+const counterStore3Builder = await buildClassicStore<CounterState>({
+  hydrator: () => Promise.resolve({ count: 88 }),
+  beforeLoadState: { count: 0 },
+});
+const { useStore, useSelector: useCounterPromiseSelector } =
+  counterStore3Builder;
+
+export { useCounterPromiseSelector };
+export default useStore;