dantian 0.0.2-beta.0

package/.eslintignore

@@ -0,0 +1 @@
+.eslintrc.cjs

package/.eslintrc.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'standard-with-typescript',
+    'plugin:react/recommended',
+    'plugin:storybook/recommended',
+    'prettier',
+  ],
+  plugins: ['prettier'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    '@typescript-eslint/semi': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};

package/.github/workflows/ci.yml

@@ -0,0 +1,74 @@
+name: CI
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  ci-checks-and-publish:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Configure Git
+        run: |
+          git config --global user.name "JuliusKoronciCH"
+          git config --global user.email "julius.koronci@gmail.com"
+      - uses: actions/checkout@v3
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install Dependencies
+        run: corepack enable
+        if: ${{ !steps.cache.outputs.cache-hit }}
+
+      - name: Cache Dependencies (Yarn Berry)
+        uses: actions/cache@v3
+        with:
+          path: ~/.yarn/cache # Cache location for Yarn Berry
+          key: ${{ runner.os }}-yarn-berry-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-berry-
+
+      - name: Install Dependencies
+        run: yarn install --immutable
+
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+
+      - name: Run Linters
+        run: yarn lint
+
+      - name: Run Prettier
+        run: yarn format
+
+      - name: Run Tests
+        run: yarn test
+
+      - name: Start Storybook
+        run: yarn storybook &
+
+      - name: Run Playwright tests
+        run: yarn playwright test
+
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Publish to npm (on merge to main)
+        if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
+        run: |
+          yarn standard-version
+          npm publish --tag beta
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.CHANGELOG_TOKEN }}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true
+}

package/.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import type { Preview } from '@storybook/react';
+import React from 'react';
+import { ThemeProvider } from './theme';
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/theme.tsx

@@ -0,0 +1,7 @@
+import '@radix-ui/themes/styles.css';
+import React, { PropsWithChildren } from 'react';
+import { Theme } from '@radix-ui/themes';
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  return <Theme>{children}</Theme>;
+};

package/.versionrc.json

@@ -0,0 +1,9 @@
+{
+  "bumpFiles": [
+    {
+      "filename": "package.json",
+      "type": "json"
+    }
+  ],
+  "prerelease": "beta"
+}

package/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.0.2-beta.0 (2024-04-04)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Igsem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+**Dantian - React State Management Reimagined**
+
+npm version: [replace with package version badge]
+
+Dantian is an event-based state management library for React applications that delivers pinpoint performance and effortless integration with forms. Say goodbye to unnecessary rerenders and complex state comparisons – Dantian ensures that components only update when they subscribe to specific state changes.
+
+**The Problem**
+
+Traditional state management solutions in React often lead to performance issues, especially in applications with frequent updates or large forms. Unnecessary rerenders can slow down the user experience.
+
+**Our Solution**
+
+Dantian's event-driven approach focuses on precision. State updates are triggered by events, and only components subscribed to those events rerender. This provides granular control and optimizes performance where it matters most.
+
+**Features**
+
+- **useState-like hooks:** Familiar interface for ease of use.
+- **Custom events:** Power and flexibility for complex scenarios.
+- **Asynchronous state updates:** Handle async patterns gracefully.
+- **Optimized form integration:** Tackle large forms without performance compromises.
+
+**Installation**
+
+```bash
+npm install dantian
+```
+
+**Basic usage**
+
+```TypeScript
+import { useEventState } from 'dantian';
+
+function MyComponent() {
+  const [count, setCount] = useEventState('counter', 0);
+
+  const increment = () => setCount(count + 1);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+**Getting Started**
+
+**Why Dantian?**
+
+Performance by design: Avoid unnecessary rerenders, especially in complex forms.
+Developer-friendly: Intuitive API and seamless form integration.
+**License**
+
+MIT

package/commitlint.config.js

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

package/e2e/counter.spec.ts

@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/test';
+import { getStorybookLocator } from './getLocator';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    'http://localhost:6006/?path=/story/dantian-counter--primary',
+  );
+});
+
+test('page title', async ({ page }) => {
+  await expect(page).toHaveTitle(/Dantian \/ Counter.*/);
+});
+
+test('test counter with classic store', async ({ page }) => {
+  const counter1Text = getStorybookLocator(page).locator(
+    'text=We are counting first: 0',
+  );
+  const counter2Text = getStorybookLocator(page).locator(
+    'text=We are counting second: 0',
+  );
+  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")',
+  );
+  await button3.click();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting first: 0'),
+  ).toBeVisible();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting third: 1'),
+  ).toBeVisible();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting second: 1'),
+  ).toBeVisible();
+
+  const button2 = getStorybookLocator(page).locator(
+    'button:has-text("Let\'s go, second counter")',
+  );
+  await button2.click();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting first: 0'),
+  ).toBeVisible();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting third: 2'),
+  ).toBeVisible();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting second: 2'),
+  ).toBeVisible();
+
+  const button1 = getStorybookLocator(page).locator(
+    'button:has-text("Let\'s go, first counter")',
+  );
+  await button1.click();
+
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting first: 1'),
+  ).toBeVisible();
+  await expect(
+    getStorybookLocator(page).locator('text=We are counting third: 2'),
+  ).toBeVisible();
+  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();
+});

package/e2e/getLocator.ts

@@ -0,0 +1,4 @@
+import { Page } from '@playwright/test';
+
+export const getStorybookLocator = (page: Page) =>
+  page.frameLocator('[id="storybook-preview-iframe"]');

package/lib/__tests__/index.test.ts

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

package/lib/classic-store.ts

@@ -0,0 +1,86 @@
+import { BehaviorSubject } from 'rxjs';
+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: DefaultState<T>;
+  useStore: () => [T, Updater<T>];
+  useSelector: <S>(selector: (state: T) => S) => S;
+  subject$: BehaviorSubject<T>;
+  update: Updater<T>;
+  getValue: () => T;
+}
+
+const isDefaultState = <T>(
+  defaultState: DefaultState<T>,
+): defaultState is T => {
+  if (
+    typeof defaultState === 'object' &&
+    defaultState !== null &&
+    'hydrator' in defaultState
+  ) {
+    return false;
+  }
+  return true;
+};
+
+export const buildClassicStore = async <T>(
+  defaultState: DefaultState<T>,
+): Promise<StoreBuilder<T>> => {
+  const initialState = isDefaultState<T>(defaultState)
+    ? defaultState
+    : await defaultState.hydrator();
+
+  const store = new BehaviorSubject<T>(initialState);
+
+  const update: Updater<T> = (updater) => {
+    store.next(updater(store.getValue()));
+  };
+
+  const useStore = () => {
+    const subscribe = (onStoreChange: () => void) => {
+      const subscription = store.subscribe({
+        next: onStoreChange,
+        error: console.error,
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    };
+    const state: T = useSyncExternalStore(
+      subscribe,
+      () => store.getValue(),
+      () => initialState,
+    );
+
+    return [state, update] satisfies [T, Updater<T>];
+  };
+
+  const useSelector = <S>(selector: (state: T) => S) => {
+    const [value] = useStore();
+
+    const selectedValue = selector(value);
+
+    return useMemo(() => selectedValue, [selectedValue]);
+  };
+
+  return {
+    defaultState,
+    useStore,
+    useSelector,
+    subject$: store,
+    update,
+    getValue: () => store.getValue(),
+  };
+};

package/lib/dao.ts

@@ -0,0 +1,3 @@
+import { createEventStore } from '.';
+
+export const wuji = createEventStore;

package/lib/event-store.ts

@@ -0,0 +1,169 @@
+import { BehaviorSubject, type Observable } from 'rxjs';
+import {
+  distinctUntilChanged,
+  filter,
+  map,
+  scan,
+  startWith,
+  tap,
+} from 'rxjs/operators';
+import {
+  type GetValueType,
+  type NestedEvent,
+  type PropertyPath,
+  type SystemEvent,
+} from './types';
+import { set, get } from 'lodash/fp';
+
+import { useCallback, useEffect, useState } from 'react';
+
+export function createEventStore<T extends object>(
+  initialState: T,
+  options?: {
+    debug?: boolean;
+    hydrator: () => Promise<T>;
+    persist?: (state: T) => Promise<void>;
+  },
+) {
+  const debug = options?.debug === true ? options.debug : false;
+  const globalEventStore = new BehaviorSubject<NestedEvent<T> | SystemEvent<T>>(
+    {
+      type: '@@INIT',
+      payload: initialState,
+    },
+  );
+  const publish = <
+    TType extends PropertyPath<T>,
+    TPayload extends GetValueType<T, TType>,
+  >(
+    type: TType,
+    payload: TPayload,
+  ) => {
+    // eslint-disable-next-line
+    const event = { type, payload } as NestedEvent<T>;
+    globalEventStore.next(event);
+  };
+
+  const getPropertyObservable = <K extends PropertyPath<T>>(
+    eventType: K,
+  ): Observable<GetValueType<T, K>> => {
+    return globalEventStore.pipe(
+      filter((event) => event.type.startsWith(eventType)),
+      map((event) => event.payload as GetValueType<T, K>),
+      scan((__, curr) => curr),
+      distinctUntilChanged(),
+    );
+  };
+
+  const getHydrationObservable$ = (): Observable<T> => {
+    return globalEventStore.pipe(
+      filter((event) => event.type === '@@HYDRATED'),
+      map((event) => event.payload as T),
+      scan((__, curr) => curr),
+      distinctUntilChanged(),
+    );
+  };
+
+  const state$ = new BehaviorSubject<T>(initialState);
+
+  globalEventStore
+    .pipe(
+      tap((event) => {
+        if (debug) {
+          console.info(event);
+        }
+      }),
+      scan((state, event) => {
+        if (event.type === '@@INIT' || event.type === '@@HYDRATED') {
+          return event.payload as T;
+        }
+        return set(event.type, event.payload, state);
+      }, initialState),
+      tap((state) => {
+        if (debug) {
+          console.info('State after update', state);
+        }
+      }),
+      startWith(initialState),
+    )
+    .subscribe(state$);
+
+  options
+    ?.hydrator?.()
+    .then((payload) => {
+      globalEventStore.next({ type: '@@HYDRATED', payload });
+    })
+    .catch((error) => {
+      console.error('Failed to hydrate store', error);
+    });
+
+  state$.subscribe({ next: options?.persist });
+
+  const useStoreValue = <K extends PropertyPath<T>>(
+    type: K,
+  ): [GetValueType<T, K>, (payload: GetValueType<T, K>) => void] => {
+    const defaultValue: GetValueType<T, K> = get(type, state$.getValue());
+    const [value, setValue] = useState<GetValueType<T, K>>(defaultValue);
+    const handleUpdate = useCallback((payload: GetValueType<T, K>) => {
+      publish(type, payload);
+    }, []);
+
+    useEffect(() => {
+      const subscription = getHydrationObservable$().subscribe({
+        next: (nextState) => {
+          setValue(get(type, nextState) as GetValueType<T, K>);
+        },
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    useEffect(() => {
+      const subscription = getPropertyObservable(type).subscribe({
+        next: (value) => {
+          setValue(value);
+        },
+      });
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    return [value, handleUpdate];
+  };
+  const useHydrateStore = () => {
+    return (payload: T) => {
+      globalEventStore.next({ type: '@@HYDRATED', payload });
+    };
+  };
+  const useIsHydrated = () => {
+    const [isHydrated, setIsHydrated] = useState(false);
+    useEffect(() => {
+      const subscription = getHydrationObservable$().subscribe({
+        next: () => {
+          setIsHydrated(true);
+        },
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+    return isHydrated;
+  };
+  const systemEvents$ = globalEventStore.pipe(
+    filter((event) => event.type.startsWith('@@')),
+  );
+
+  return {
+    useStoreValue,
+    useHydrateStore,
+    useIsHydrated,
+    publish,
+    getPropertyObservable,
+    state$,
+    systemEvents$,
+  };
+}

package/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './classic-store';
+export * from './event-store';
+export * from './dao';

package/lib/types.ts

@@ -0,0 +1,28 @@
+export type PropertyPath<T> = {
+  [K in keyof T]: K extends string
+    ? T[K] extends object
+      ? `${K}.${PropertyPath<T[K]>}` | K
+      : K
+    : never;
+}[keyof T];
+
+export type GetValueType<
+  T,
+  Path extends PropertyPath<T>,
+> = Path extends `${infer Key}.${infer Rest}`
+  ? Key extends keyof T
+    ? Rest extends PropertyPath<T[Key]>
+      ? GetValueType<T[Key], Rest>
+      : never
+    : never
+  : Path extends keyof T
+    ? T[Path]
+    : never;
+
+export interface NestedEvent<T> {
+  type: PropertyPath<T>;
+  payload: GetValueType<T, PropertyPath<T>>;
+}
+export type SystemEvent<T> =
+  | { type: '@@INIT'; payload: T }
+  | { type: '@@HYDRATED'; payload: T };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "dantian",
+  "version": "0.0.2-beta.0",
+  "type": "module",
+  "main": "./dist/dantian.cjs",
+  "module": "./dist/dantian.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "format": "prettier --write .",
+    "lint": "eslint ./lib/**/*.ts",
+    "prepare": "husky install",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "e2e": "playwright test"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,tsx}": [
+      "eslint --fix"
+    ],
+    "**/*": "prettier --write --ignore-unknown"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "@playwright/test": "^1.41.2",
+    "@radix-ui/themes": "^2.0.3",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/lodash.set": "^4",
+    "@types/node": "^20.11.20",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/parser": "^7.0.2",
+    "@vitest/ui": "^1.3.1",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "react": "18.2.0",
+    "react-dom": "^18.2.0",
+    "standard-version": "^9.5.0",
+    "storybook": "^7.6.17",
+    "typescript": "*",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vitest": "^1.3.1"
+  },
+  "packageManager": "yarn@4.1.0",
+  "dependencies": {
+    "lodash.set": "^4.3.2",
+    "rxjs": "^7.8.1"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

package/stories/counter/Counter.tsx

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

package/stories/counter/Counter2.tsx

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

package/stories/counter/Counter3.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Flex, Text, Button } from '@radix-ui/themes';
+import useStore from './counterStore2';
+
+export const Counter3 = () => {
+  const [state, updateCount] = useStore();
+  const increment = () =>
+    updateCount((prevState) => ({ ...prevState, count: prevState.count + 1 }));
+
+  return (
+    <Flex direction="column" gap="2">
+      <Text>We are counting third: {state.count}</Text>
+      <Button onClick={increment}>
+        Let's go, third counter, reusing second store
+      </Button>
+    </Flex>
+  );
+};

package/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>
+  );
+};

package/stories/counter/Root.tsx

@@ -0,0 +1,17 @@
+import { Flex } from '@radix-ui/themes';
+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>
+  );
+};

package/stories/counter/counterStore.ts

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

package/stories/counter/counterStore2.ts

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

package/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;

package/stories/counter.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Root } from './counter/Root';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Dantian/Counter',
+  component: Root,
+  parameters: {
+    layout: 'centered',
+  },
+
+  tags: ['autodocs'],
+
+  argTypes: {},
+} satisfies Meta<typeof Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/stories/event-store/Root.tsx

@@ -0,0 +1,19 @@
+import { Flex } from '@radix-ui/themes';
+
+import React from 'react';
+import { state$, useStoreValue } from './store';
+
+export const Root = () => {
+  const [name] = useStoreValue('user.name');
+  return (
+    <Flex direction="column" gap="2">
+      <Flex direction="row" gap="2" align={'center'}>
+        State: <pre>{JSON.stringify(state$.getValue())}</pre>
+      </Flex>
+
+      <Flex direction="row" gap="2" align={'center'}>
+        User name: {name}
+      </Flex>
+    </Flex>
+  );
+};

package/stories/event-store/state.ts

@@ -0,0 +1,9 @@
+interface State {
+  user: {
+    name: string;
+    address: {
+      city: string;
+      street: string;
+    };
+  };
+}

package/stories/event-store/store.ts

@@ -0,0 +1,28 @@
+import { wuji } from '../../lib';
+
+export const { state$, useStoreValue, useHydrateStore, useIsHydrated } =
+  wuji<State>(
+    {
+      user: { address: { city: 'n/a', street: 'n/a' }, name: 'n/a' },
+    },
+    {
+      hydrator: () => {
+        return new Promise((resolve) => {
+          setTimeout(
+            () =>
+              resolve({
+                user: {
+                  address: {
+                    city: 'Aubonne',
+                    street: 'Chemin du Mont-Blanc 16',
+                  },
+                  name: 'Julius',
+                },
+              }),
+            3000,
+          );
+        });
+      },
+      debug: true,
+    },
+  );

package/stories/event-store.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Root } from './event-store/Root';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Dantian/Event Store',
+  component: Root,
+  parameters: {
+    layout: 'centered',
+  },
+
+  tags: ['autodocs'],
+
+  argTypes: {},
+} satisfies Meta<typeof Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {},
+};

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["lib"]
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+export default defineConfig({
+  build: {
+    copyPublicDir: false,
+    lib: {
+      entry: 'lib/index.ts',
+      name: 'dantian',
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+        },
+      },
+    },
+  },
+  plugins: [dts({ include: ['lib'], insertTypesEntry: true })],
+});

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['lib/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});