ccstate-solid 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 e7h4n
+
+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 EFFECT 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/babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env"], ["@babel/preset-typescript"]]
+}

package/dist/index.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var ccstate = require('ccstate');
+
+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) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } 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;
+  }
+}
+
+var StoreContext = solidJs.createContext(null);
+var StoreProvider = StoreContext.Provider;
+function useStore() {
+  var store = solidJs.useContext(StoreContext);
+  if (!store) {
+    return ccstate.getDefaultStore();
+  }
+  return store;
+}
+
+function useGet(atom) {
+  var store = useStore();
+  var _createSignal = solidJs.createSignal(store.get(atom)),
+    _createSignal2 = _slicedToArray(_createSignal, 2),
+    value = _createSignal2[0],
+    setValue = _createSignal2[1];
+  var unsub = store.sub(atom, ccstate.command(function () {
+    setValue(function () {
+      return store.get(atom);
+    });
+  }));
+  solidJs.onCleanup(function () {
+    unsub();
+  });
+  return value;
+}
+
+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 useResource(atom) {
+  var _createResource = solidJs.createResource(useGet(atom), function (promise) {
+      return promise;
+    }),
+    _createResource2 = _slicedToArray(_createResource, 1),
+    data = _createResource2[0];
+  return data;
+}
+
+exports.StoreProvider = StoreProvider;
+exports.useGet = useGet;
+exports.useResource = useResource;
+exports.useSet = useSet;

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import * as solid_js from 'solid-js';
+import { Resource } from 'solid-js';
+import { State, Computed, Updater, Command, Store } from 'ccstate';
+
+declare function useGet<T>(atom: State<T> | Computed<T>): solid_js.Accessor<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 useResource<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Resource<T>;
+
+declare const StoreProvider: solid_js.ContextProviderComponent<Store | null>;
+
+export { StoreProvider, useGet, useResource, useSet };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as solid_js from 'solid-js';
+import { Resource } from 'solid-js';
+import { State, Computed, Updater, Command, Store } from 'ccstate';
+
+declare function useGet<T>(atom: State<T> | Computed<T>): solid_js.Accessor<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 useResource<T>(atom: State<Promise<T>> | Computed<Promise<T>>): Resource<T>;
+
+declare const StoreProvider: solid_js.ContextProviderComponent<Store | null>;
+
+export { StoreProvider, useGet, useResource, useSet };

package/dist/index.js

@@ -0,0 +1,105 @@
+import { createContext, useContext, createSignal, onCleanup, createResource } from 'solid-js';
+import { getDefaultStore, command } from 'ccstate';
+
+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) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } 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;
+  }
+}
+
+var StoreContext = createContext(null);
+var StoreProvider = StoreContext.Provider;
+function useStore() {
+  var store = useContext(StoreContext);
+  if (!store) {
+    return getDefaultStore();
+  }
+  return store;
+}
+
+function useGet(atom) {
+  var store = useStore();
+  var _createSignal = createSignal(store.get(atom)),
+    _createSignal2 = _slicedToArray(_createSignal, 2),
+    value = _createSignal2[0],
+    setValue = _createSignal2[1];
+  var unsub = store.sub(atom, command(function () {
+    setValue(function () {
+      return store.get(atom);
+    });
+  }));
+  onCleanup(function () {
+    unsub();
+  });
+  return value;
+}
+
+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 useResource(atom) {
+  var _createResource = createResource(useGet(atom), function (promise) {
+      return promise;
+    }),
+    _createResource2 = _slicedToArray(_createResource, 1),
+    data = _createResource2[0];
+  return data;
+}
+
+export { StoreProvider, useGet, useResource, useSet };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ccstate-solid",
+  "version": "3.0.0",
+  "description": "CCState Solid.js 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": {
+    "solid-js": ">=1.6.0",
+    "ccstate": "^3.0.0"
+  },
+  "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",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.5.2",
+    "happy-dom": "^15.11.7",
+    "jest-leak-detector": "^29.7.0",
+    "json": "^11.0.0",
+    "rollup": "^4.28.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "shx": "^0.3.4",
+    "signal-timers": "^1.0.4",
+    "solid-js": "^1.9.3",
+    "vite-plugin-solid": "^2.11.0",
+    "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',
+});

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

@@ -0,0 +1,189 @@
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { expect, it } from 'vitest';
+import { computed, command, state, createDebugStore, getDefaultStore } from 'ccstate';
+import { StoreProvider, useGet, useSet } from '..';
+import { createSignal } from 'solid-js';
+import '@testing-library/jest-dom/vitest';
+
+it('using ccstate in solid', async () => {
+  const base$ = state(0);
+
+  function App() {
+    const ret = useGet(base$);
+    return <div>{ret()}</div>;
+  }
+
+  const screen = render(() => <App />);
+
+  expect(screen.getByText('0')).toBeInTheDocument();
+  getDefaultStore().set(base$, 1);
+  expect(await screen.findByText('1')).toBeInTheDocument();
+});
+
+it('computed should re-render', async () => {
+  const base$ = state(0);
+  const derived$ = computed((get) => get(base$) * 2);
+
+  function App() {
+    const ret = useGet(derived$);
+    return <div>{ret()}</div>;
+  }
+
+  const screen = render(() => <App />);
+
+  expect(screen.getByText('0')).toBeInTheDocument();
+  getDefaultStore().set(base$, 1);
+  expect(await screen.findByText('2')).toBeInTheDocument();
+});
+
+it('user click counter should increment', async () => {
+  const count$ = state(0);
+  const onClick$ = command(({ get, set }) => {
+    const ret = get(count$);
+    set(count$, ret + 1);
+  });
+
+  function App() {
+    const ret = useGet(count$);
+    const onClick = useSet(onClick$);
+
+    return <button onClick={onClick}>{ret()}</button>;
+  }
+
+  const screen = render(() => <App />);
+  const button = screen.getByText('0');
+  expect(button).toBeInTheDocument();
+
+  const user = userEvent.setup();
+  await user.click(button);
+  expect(screen.getByText('1')).toBeInTheDocument();
+  await user.click(button);
+  expect(screen.getByText('2')).toBeInTheDocument();
+});
+
+it('two atom changes should re-render once', async () => {
+  const state1$ = state(0);
+  const state2$ = state(0);
+
+  function App() {
+    const ret1 = useGet(state1$);
+    const ret2 = useGet(state2$);
+    return <div>{ret1() + ret2()}</div>;
+  }
+
+  const screen = render(() => <App />);
+  expect(screen.getByText('0')).toBeInTheDocument();
+
+  getDefaultStore().set(state1$, 1);
+  getDefaultStore().set(state2$, 2);
+  await Promise.resolve();
+  expect(screen.getByText('3')).toBeInTheDocument();
+});
+
+it('async callback will trigger rerender', async () => {
+  const count$ = state(0);
+  const onClick$ = command(({ get, set }) => {
+    return Promise.resolve().then(() => {
+      set(count$, get(count$) + 1);
+    });
+  });
+
+  function App() {
+    const val = useGet(count$);
+    const onClick = useSet(onClick$);
+    return (
+      <button
+        onClick={() => {
+          void onClick();
+        }}
+      >
+        {val()}
+      </button>
+    );
+  }
+
+  const screen = render(() => <App />);
+  const button = screen.getByText('0');
+  expect(button).toBeInTheDocument();
+
+  const user = userEvent.setup();
+  await user.click(button);
+  expect(screen.getByText('1')).toBeInTheDocument();
+});
+
+it('floating promise trigger rerender', async () => {
+  const count$ = state(0);
+  const onClick$ = command(({ get, set }) => {
+    void Promise.resolve().then(() => {
+      set(count$, get(count$) + 1);
+    });
+  });
+
+  function App() {
+    const val = useGet(count$);
+    const onClick = useSet(onClick$);
+    return <button onClick={onClick}>{val()}</button>;
+  }
+
+  const screen = render(() => <App />);
+  const button = screen.getByText('0');
+  expect(button).toBeInTheDocument();
+
+  const user = userEvent.setup();
+  await user.click(button);
+  expect(await screen.findByText('1')).toBeInTheDocument();
+});
+
+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>;
+  }
+
+  const screen = render(() => <App />);
+  expect(screen.getByText('10')).toBeInTheDocument();
+});
+
+it('will unmount when component cleanup', async () => {
+  const base$ = state(0);
+
+  function App() {
+    const ret = useGet(base$);
+    return <div>{ret()}</div>;
+  }
+
+  function Container() {
+    const [show, setShow] = createSignal(true);
+
+    return (
+      <div>
+        {show() ? <App /> : <div>unmounted</div>}
+        <button
+          onClick={() => {
+            setShow(false);
+          }}
+        >
+          hide
+        </button>
+      </div>
+    );
+  }
+
+  const store = createDebugStore();
+  const screen = render(() => (
+    <StoreProvider value={store}>
+      <Container />
+    </StoreProvider>
+  ));
+
+  const user = userEvent.setup();
+  expect(store.getSubscribeGraph()).toHaveLength(1);
+  const button = screen.getByText('hide');
+  await user.click(button);
+  expect(await screen.findByText('unmounted')).toBeInTheDocument();
+  expect(store.getSubscribeGraph()).toHaveLength(0);
+});