ccstate-react 3.0.0 → 4.0.0

package/CHANGELOG.md

@@ -1,10 +1,20 @@
 # ccstate-react
 
-## 3.0.0
+## 4.0.0
+
+### Minor Changes
+
+- 42556f2: feat(react): add inline atom hooks
+- 3e45895: feat: add default store
 
 ### Patch Changes
 
-- Updated dependencies [932cb80]
-- Updated dependencies [d3b721c]
-- Updated dependencies [7035e82]
-  - ccstate@3.0.0
+- Updated dependencies [b32ad0a]
+- Updated dependencies [3e45895]
+  - ccstate@4.0.0
+
+## 3.0.0
+
+### Major Changes
+
+- 932cb80: refactor: expose react hooks into independent package 'ccstate-react'

package/dist/experimental.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var ccstate = require('ccstate');
+var react = require('react');
+
+var StoreContext = react.createContext(null);
+StoreContext.Provider;
+function useStore() {
+  var store = react.useContext(StoreContext);
+  if (!store) {
+    return ccstate.getDefaultStore();
+  }
+  return store;
+}
+
+function useRefFactory(factory) {
+  var ref = react.useRef(null);
+  if (!ref.current) {
+    var value = factory();
+    ref.current = value;
+    return value;
+  }
+  return ref.current;
+}
+function useCCState() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return useRefFactory(function () {
+    return ccstate.state.apply(void 0, args);
+  });
+}
+function useComputed() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  return useRefFactory(function () {
+    return ccstate.computed.apply(void 0, args);
+  });
+}
+function useCommand() {
+  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    args[_key3] = arguments[_key3];
+  }
+  return useRefFactory(function () {
+    return ccstate.command.apply(void 0, args);
+  });
+}
+function useSub() {
+  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    args[_key4] = arguments[_key4];
+  }
+  var store = useStore();
+  react.useEffect(function () {
+    return store.sub.apply(store, args);
+  }, []);
+}
+
+exports.useCCState = useCCState;
+exports.useCommand = useCommand;
+exports.useComputed = useComputed;
+exports.useSub = useSub;

package/dist/experimental.d.cts

@@ -0,0 +1,8 @@
+import { state, State, computed, Computed, command, Command, Subscribe } from 'ccstate';
+
+declare function useCCState<T>(...args: Parameters<typeof state<T>>): State<T>;
+declare function useComputed<T>(...args: Parameters<typeof computed<T>>): Computed<T>;
+declare function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof command<T, Args>>): Command<T, Args>;
+declare function useSub(...args: Parameters<Subscribe>): void;
+
+export { useCCState, useCommand, useComputed, useSub };

package/dist/experimental.d.ts

@@ -0,0 +1,8 @@
+import { state, State, computed, Computed, command, Command, Subscribe } from 'ccstate';
+
+declare function useCCState<T>(...args: Parameters<typeof state<T>>): State<T>;
+declare function useComputed<T>(...args: Parameters<typeof computed<T>>): Computed<T>;
+declare function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof command<T, Args>>): Command<T, Args>;
+declare function useSub(...args: Parameters<Subscribe>): void;
+
+export { useCCState, useCommand, useComputed, useSub };

package/dist/experimental.js

@@ -0,0 +1,57 @@
+import { getDefaultStore, state, computed, command } from 'ccstate';
+import { createContext, useContext, useEffect, useRef } from 'react';
+
+var StoreContext = createContext(null);
+StoreContext.Provider;
+function useStore() {
+  var store = useContext(StoreContext);
+  if (!store) {
+    return getDefaultStore();
+  }
+  return store;
+}
+
+function useRefFactory(factory) {
+  var ref = useRef(null);
+  if (!ref.current) {
+    var value = factory();
+    ref.current = value;
+    return value;
+  }
+  return ref.current;
+}
+function useCCState() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return useRefFactory(function () {
+    return state.apply(void 0, args);
+  });
+}
+function useComputed() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  return useRefFactory(function () {
+    return computed.apply(void 0, args);
+  });
+}
+function useCommand() {
+  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    args[_key3] = arguments[_key3];
+  }
+  return useRefFactory(function () {
+    return command.apply(void 0, args);
+  });
+}
+function useSub() {
+  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    args[_key4] = arguments[_key4];
+  }
+  var store = useStore();
+  useEffect(function () {
+    return store.sub.apply(store, args);
+  }, []);
+}
+
+export { useCCState, useCommand, useComputed, useSub };

package/dist/index.cjs

@@ -8,7 +8,7 @@ var StoreProvider = StoreContext.Provider;
 function useStore() {
   var store = react.useContext(StoreContext);
   if (!store) {
-    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+    return ccstate.getDefaultStore();
   }
   return store;
 }

package/dist/index.js

@@ -1,12 +1,12 @@
 import { createContext, useContext, useSyncExternalStore, useState, useEffect } from 'react';
-import { command } from 'ccstate';
+import { getDefaultStore, command } from 'ccstate';
 
 var StoreContext = createContext(null);
 var StoreProvider = StoreContext.Provider;
 function useStore() {
   var store = useContext(StoreContext);
   if (!store) {
-    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+    return getDefaultStore();
   }
   return store;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccstate-react",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "CCState React Hooks",
   "repository": {
     "type": "git",
@@ -14,12 +14,16 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
+    },
+    "./experimental": {
+      "import": "./dist/experimental.js",
+      "require": "./dist/experimental.cjs"
     }
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
     "react": ">=17.0.0",
-    "ccstate": "^3.0.0"
+    "ccstate": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -35,21 +39,21 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/react": "^18.3.1",
+    "@types/react": "^19.0.2",
     "@types/react-dom": "^18.3.1",
     "happy-dom": "^15.11.7",
     "jest-leak-detector": "^29.7.0",
     "json": "^11.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^4.28.1",
     "rollup-plugin-dts": "^6.1.1",
     "shx": "^0.3.4",
     "signal-timers": "^1.0.4",
     "vitest": "^2.1.8",
-    "ccstate": "^3.0.0"
+    "ccstate": "^4.0.0"
   },
   "scripts": {
     "build": "rollup -c",

package/rollup.config.mjs

@@ -77,8 +77,15 @@ function generateTarget({ input, targetCJS, targetES }) {
 }
 
 /** @type { Array<import('rollup').RollupOptions> } */
-export default generateTarget({
-  input: './src/index.ts',
-  targetCJS: './dist/index.cjs',
-  targetES: './dist/index.js',
-});
+export default [
+  ...generateTarget({
+    input: './src/index.ts',
+    targetCJS: './dist/index.cjs',
+    targetES: './dist/index.js',
+  }),
+  ...generateTarget({
+    input: './src/experimental.ts',
+    targetCJS: './dist/experimental.cjs',
+    targetES: './dist/experimental.js',
+  }),
+];

package/src/__tests__/get-and-set.test.tsx

@@ -1,8 +1,7 @@
-// @vitest-environment happy-dom
 import { render, cleanup, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { computed, createStore, command, state, createDebugStore } from 'ccstate';
+import { computed, createStore, command, state, createDebugStore, getDefaultStore } from 'ccstate';
 import { StoreProvider, useGet, useSet } from '..';
 import { StrictMode, useState } from 'react';
 import '@testing-library/jest-dom/vitest';
@@ -199,25 +198,21 @@ describe('react', () => {
     expect(await screen.findByText('1')).toBeInTheDocument();
   });
 
-  it('will throw error if no provider', () => {
+  it('should use default store if no provider', () => {
     const count$ = state(0);
+    getDefaultStore().set(count$, 10);
 
     function App() {
       const count = useGet(count$);
       return <div>{count}</div>;
     }
 
-    // suppress react render error message in console
-    const mock = vi.spyOn(console, 'error').mockImplementation(() => void 0);
-    expect(() =>
-      render(
-        <StrictMode>
-          <App />
-        </StrictMode>,
-      ),
-    ).toThrow();
-
-    mock.mockRestore();
+    render(
+      <StrictMode>
+        <App />
+      </StrictMode>,
+    );
+    expect(screen.getByText('10')).toBeInTheDocument();
   });
 
   it('will unmount when component cleanup', async () => {

package/src/__tests__/inline-atom.test.tsx

@@ -0,0 +1,139 @@
+import { afterEach, expect, it } from 'vitest';
+import { StoreProvider, useGet, useSet } from '..';
+import '@testing-library/jest-dom/vitest';
+import { screen, cleanup, render } from '@testing-library/react';
+import { StrictMode } from 'react';
+import userEvent from '@testing-library/user-event';
+import { useCCState, useCommand, useComputed, useSub } from '../experimental';
+import { createDebugStore } from 'ccstate';
+
+afterEach(() => {
+  cleanup();
+});
+const user = userEvent.setup();
+
+it('use atom in React component', async () => {
+  function Counter() {
+    const count$ = useCCState(0, {
+      debugLabel: 'count$',
+    });
+    const double$ = useComputed(
+      (get) => {
+        return get(count$) * 2;
+      },
+      {
+        debugLabel: 'double$',
+      },
+    );
+    const incrementTriple$ = useCommand(
+      ({ get, set }, diff: number) => {
+        set(count$, get(count$) + diff * 3);
+      },
+      {
+        debugLabel: 'incrementTriple$',
+      },
+    );
+
+    const count = useGet(count$);
+    const double = useGet(double$);
+
+    const setCount = useSet(count$);
+    const incrementTriple = useSet(incrementTriple$);
+
+    return (
+      <>
+        <div>count: {String(count)}</div>
+        <div>double: {String(double)}</div>
+        <button
+          onClick={() => {
+            setCount((prev) => prev + 1);
+          }}
+        >
+          Increment
+        </button>
+        <button
+          onClick={() => {
+            incrementTriple(1);
+          }}
+        >
+          Increment Triple
+        </button>
+      </>
+    );
+  }
+
+  render(
+    <StrictMode>
+      <Counter />
+    </StrictMode>,
+  );
+  expect(screen.getByText('count: 0')).toBeInTheDocument();
+
+  const button = screen.getByText('Increment');
+  await user.click(button);
+  expect(screen.getByText('count: 1')).toBeInTheDocument();
+  expect(screen.getByText('double: 2')).toBeInTheDocument();
+
+  const incrementTripleButton = screen.getByText('Increment Triple');
+  await user.click(incrementTripleButton);
+  expect(screen.getByText('count: 4')).toBeInTheDocument();
+  expect(screen.getByText('double: 8')).toBeInTheDocument();
+});
+
+it('use sub in React component', async () => {
+  function Counter() {
+    const count$ = useCCState(0, {
+      debugLabel: 'count$',
+    });
+    const double$ = useCCState(0, {
+      debugLabel: 'double$',
+    });
+
+    const updateDouble$ = useCommand(
+      ({ get, set }) => {
+        const double = get(count$) * 2;
+        set(double$, double);
+      },
+      {
+        debugLabel: 'updateDouble$',
+      },
+    );
+    useSub(count$, updateDouble$);
+
+    const count = useGet(count$);
+    const double = useGet(double$);
+    const setCount = useSet(count$);
+
+    return (
+      <>
+        <div>count: {String(count)}</div>
+        <div>double: {String(double)}</div>
+        <button
+          onClick={() => {
+            setCount((prev) => prev + 1);
+          }}
+        >
+          Increment
+        </button>
+      </>
+    );
+  }
+
+  const store = createDebugStore();
+  render(
+    <StrictMode>
+      <StoreProvider value={store}>
+        <Counter />
+      </StoreProvider>
+    </StrictMode>,
+  );
+  expect(screen.getByText('count: 0')).toBeInTheDocument();
+
+  const button = screen.getByText('Increment');
+  await user.click(button);
+  expect(screen.getByText('count: 1')).toBeInTheDocument();
+  expect(await screen.findByText('double: 2')).toBeInTheDocument();
+
+  cleanup();
+  expect(store.getSubscribeGraph()).toEqual([]);
+});

package/src/experimental.ts

@@ -0,0 +1 @@
+export { useCCState, useComputed, useCommand, useSub } from './useInlineAtom';

package/src/provider.ts

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import { getDefaultStore } from 'ccstate';
 import type { Store } from 'ccstate';
 
 const StoreContext = createContext<Store | null>(null);
@@ -9,7 +10,7 @@ export function useStore(): Store {
   const store = useContext(StoreContext);
 
   if (!store) {
-    throw new Error('Store context not found - did you forget to wrap your app with StoreProvider?');
+    return getDefaultStore();
   }
 
   return store;

package/src/useInlineAtom.ts

@@ -0,0 +1,40 @@
+import { command, computed, state, type Command, type Computed, type State, type Subscribe } from 'ccstate';
+import { useEffect, useRef } from 'react';
+import { useStore } from './provider';
+
+function useRefFactory<T>(factory: () => T): T {
+  const ref = useRef<T | null>(null);
+  if (!ref.current) {
+    const value = factory();
+    ref.current = value;
+    return value;
+  }
+
+  return ref.current;
+}
+
+export function useCCState<T>(...args: Parameters<typeof state<T>>): State<T> {
+  return useRefFactory<State<T>>(() => {
+    return state(...args);
+  });
+}
+
+export function useComputed<T>(...args: Parameters<typeof computed<T>>): Computed<T> {
+  return useRefFactory<Computed<T>>(() => {
+    return computed(...args);
+  });
+}
+
+export function useCommand<T, Args extends unknown[]>(...args: Parameters<typeof command<T, Args>>): Command<T, Args> {
+  return useRefFactory<Command<T, Args>>(() => {
+    return command(...args);
+  });
+}
+
+export function useSub(...args: Parameters<Subscribe>) {
+  const store = useStore();
+
+  useEffect(() => {
+    return store.sub(...args);
+  }, []);
+}

package/vitest.config.ts

@@ -1,3 +1,7 @@
 import { defineConfig } from 'vitest/config';
 
-export default defineConfig({});
+export default defineConfig({
+  test: {
+    environment: 'happy-dom',
+  },
+});