ccstate-react 3.0.0

package/dist/index.cjs

@@ -0,0 +1,150 @@
+'use strict';
+
+var react = require('react');
+var ccstate = require('ccstate');
+
+var StoreContext = react.createContext(null);
+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 store;
+}
+
+function useGet(atom) {
+  var store = useStore();
+  return react.useSyncExternalStore(function (fn) {
+    var ctrl = new AbortController();
+    store.sub(atom, ccstate.command(fn), {
+      signal: ctrl.signal
+    });
+    return function () {
+      ctrl.abort();
+    };
+  }, function () {
+    return store.get(atom);
+  });
+}
+
+function useSet(atom) {
+  var store = useStore();
+  if ('write' in atom) {
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var ret = store.set.apply(store, [atom].concat(args));
+      return ret;
+    };
+  }
+  return function (value) {
+    store.set(atom, value);
+  };
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function useLoadableInternal(atom, keepLastResolved) {
+  var promise = useGet(atom);
+  var _useState = react.useState({
+      state: 'loading'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    promiseResult = _useState2[0],
+    setPromiseResult = _useState2[1];
+  react.useEffect(function () {
+    var ctrl = new AbortController();
+    var signal = ctrl.signal;
+    if (!keepLastResolved) {
+      setPromiseResult({
+        state: 'loading'
+      });
+    }
+    void promise.then(function (ret) {
+      if (signal.aborted) return;
+      setPromiseResult({
+        state: 'hasData',
+        data: ret
+      });
+    })["catch"](function (error) {
+      if (signal.aborted) return;
+      setPromiseResult({
+        state: 'hasError',
+        error: error
+      });
+    });
+    return function () {
+      ctrl.abort();
+    };
+  }, [promise]);
+  return promiseResult;
+}
+function useLoadable(atom) {
+  return useLoadableInternal(atom, false);
+}
+function useLastLoadable(atom) {
+  return useLoadableInternal(atom, true);
+}
+
+function useResolved(atom) {
+  var loadable = useLoadable(atom);
+  return loadable.state === 'hasData' ? loadable.data : undefined;
+}
+function useLastResolved(atom) {
+  var loadable = useLastLoadable(atom);
+  return loadable.state === 'hasData' ? loadable.data : undefined;
+}
+
+exports.StoreProvider = StoreProvider;
+exports.useGet = useGet;
+exports.useLastLoadable = useLastLoadable;
+exports.useLastResolved = useLastResolved;
+exports.useLoadable = useLoadable;
+exports.useResolved = useResolved;
+exports.useSet = useSet;

package/dist/index.d.cts

@@ -0,0 +1,26 @@
+import { State, Computed, Updater, Command, Store } from 'ccstate';
+import * as react from 'react';
+
+declare function useGet<T>(atom: State<T> | Computed<T>): T;
+
+declare function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
+declare function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+
+declare function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
+declare function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
+
+type Loadable<T> = {
+    state: 'loading';
+} | {
+    state: 'hasData';
+    data: T;
+} | {
+    state: 'hasError';
+    error: unknown;
+};
+declare function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
+declare function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
+
+declare const StoreProvider: react.Provider<Store | null>;
+
+export { StoreProvider, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import { State, Computed, Updater, Command, Store } from 'ccstate';
+import * as react from 'react';
+
+declare function useGet<T>(atom: State<T> | Computed<T>): T;
+
+declare function useSet<T>(atom: State<T>): (value: T | Updater<T>) => void;
+declare function useSet<T, ARGS extends unknown[]>(atom: Command<T, ARGS>): (...args: ARGS) => T;
+
+declare function useResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
+declare function useLastResolved<T>(atom: State<Promise<T>> | Computed<Promise<T>>): T | undefined;
+
+type Loadable<T> = {
+    state: 'loading';
+} | {
+    state: 'hasData';
+    data: T;
+} | {
+    state: 'hasError';
+    error: unknown;
+};
+declare function useLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
+declare function useLastLoadable<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Loadable<T>;
+
+declare const StoreProvider: react.Provider<Store | null>;
+
+export { StoreProvider, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/dist/index.js

@@ -0,0 +1,142 @@
+import { createContext, useContext, useSyncExternalStore, useState, useEffect } from 'react';
+import { 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 store;
+}
+
+function useGet(atom) {
+  var store = useStore();
+  return useSyncExternalStore(function (fn) {
+    var ctrl = new AbortController();
+    store.sub(atom, command(fn), {
+      signal: ctrl.signal
+    });
+    return function () {
+      ctrl.abort();
+    };
+  }, function () {
+    return store.get(atom);
+  });
+}
+
+function useSet(atom) {
+  var store = useStore();
+  if ('write' in atom) {
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      var ret = store.set.apply(store, [atom].concat(args));
+      return ret;
+    };
+  }
+  return function (value) {
+    store.set(atom, value);
+  };
+}
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+function useLoadableInternal(atom, keepLastResolved) {
+  var promise = useGet(atom);
+  var _useState = useState({
+      state: 'loading'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    promiseResult = _useState2[0],
+    setPromiseResult = _useState2[1];
+  useEffect(function () {
+    var ctrl = new AbortController();
+    var signal = ctrl.signal;
+    if (!keepLastResolved) {
+      setPromiseResult({
+        state: 'loading'
+      });
+    }
+    void promise.then(function (ret) {
+      if (signal.aborted) return;
+      setPromiseResult({
+        state: 'hasData',
+        data: ret
+      });
+    })["catch"](function (error) {
+      if (signal.aborted) return;
+      setPromiseResult({
+        state: 'hasError',
+        error: error
+      });
+    });
+    return function () {
+      ctrl.abort();
+    };
+  }, [promise]);
+  return promiseResult;
+}
+function useLoadable(atom) {
+  return useLoadableInternal(atom, false);
+}
+function useLastLoadable(atom) {
+  return useLoadableInternal(atom, true);
+}
+
+function useResolved(atom) {
+  var loadable = useLoadable(atom);
+  return loadable.state === 'hasData' ? loadable.data : undefined;
+}
+function useLastResolved(atom) {
+  var loadable = useLastLoadable(atom);
+  return loadable.state === 'hasData' ? loadable.data : undefined;
+}
+
+export { StoreProvider, useGet, useLastLoadable, useLastResolved, useLoadable, useResolved, useSet };

package/dist/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "ccstate-react",
+  "version": "2.2.0",
+  "description": "CCState React Hooks",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e7h4n/ccstate.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "@types/react": ">=17.0.0",
+    "react": ">=17.0.0",
+    "ccstate": "workspace:^"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "ccstate-react",
+  "version": "3.0.0",
+  "description": "CCState React Hooks",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/e7h4n/ccstate.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "@types/react": ">=17.0.0",
+    "react": ">=17.0.0",
+    "ccstate": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-typescript": "^7.26.0",
+    "@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/user-event": "^14.5.2",
+    "@types/react": "^18.3.1",
+    "@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",
+    "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"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prebuild": "shx rm -rf dist"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,84 @@
+// @ts-check
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { babel } from '@rollup/plugin-babel';
+import { dts } from 'rollup-plugin-dts';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+const projectRootDir = path.resolve(__dirname);
+
+/**
+ * @param {string} id
+ * @returns {boolean}
+ */
+function external(id) {
+  return !id.startsWith('.') && !id.startsWith(projectRootDir);
+}
+
+/**
+ * @param {{input:string, targetCJS:string, targetES:string}} param0
+ * @returns {import('rollup').RollupOptions[]}
+ */
+function generateTarget({ input, targetCJS, targetES }) {
+  return [
+    {
+      input,
+      onwarn: (warning) => {
+        throw new Error(warning?.message);
+      },
+      external,
+      plugins: [
+        nodeResolve({
+          extensions: ['.ts'],
+        }),
+        babel({
+          exclude: 'node_modules/**',
+          extensions: ['.ts'],
+          babelHelpers: 'bundled',
+          configFile: path.resolve(projectRootDir, './babel.config.json'),
+        }),
+      ],
+      output: [
+        {
+          file: targetCJS,
+          format: 'cjs',
+        },
+        {
+          file: targetES,
+          format: 'es',
+        },
+      ],
+    },
+    {
+      input,
+      onwarn: (warning) => {
+        throw new Error(warning?.message);
+      },
+      external,
+      plugins: [
+        dts({
+          respectExternal: true,
+          tsconfig: path.resolve(projectRootDir, './tsconfig.json'),
+          // https://github.com/Swatinem/rollup-plugin-dts/issues/143
+          compilerOptions: { preserveSymlinks: false },
+        }),
+      ],
+      output: [
+        {
+          file: targetCJS.replace(/\.cjs$/, '.d.cts'),
+        },
+        {
+          file: targetES.replace(/\.js$/, '.d.ts'),
+        },
+      ],
+    },
+  ];
+}
+
+/** @type { Array<import('rollup').RollupOptions> } */
+export default generateTarget({
+  input: './src/index.ts',
+  targetCJS: './dist/index.cjs',
+  targetES: './dist/index.js',
+});