reactish-state 1.2.1-alpha.0 → 1.2.1-alpha.2

package/README.md

@@ -273,8 +273,10 @@ const count = countState.get();
 const triple = tripleSelector.get();
 
 // Listen for updates
-const unsub1 = countState.sub(() => console.log(countState.get()));
-const unsub2 = tripleSelector.sub(() => console.log(tripleSelector.get()));
+const unsub1 = countState.subscribe(() => console.log(countState.get()));
+const unsub2 = tripleSelector.subscribe(() =>
+  console.log(tripleSelector.get())
+);
 
 // Updating `countState` will trigger both listeners
 countState.set(10);

package/dist/cjs/react/useSelector.cjs

@@ -9,26 +9,20 @@ const useSelector = (selectorParamFactory, deps) => {
   const cutoff = items.length - 1;
   const selectorFunc = items[cutoff];
   items.length = cutoff;
-  const [context] = React.useState(() => ({
-    sub: utils.createSubscriber(items)
-  }));
-  const get = () => {
-    const {
-      cache
-    } = context;
-    const selectorValues = utils.getSelectorValues(items);
-    const args = selectorValues.concat(deps || selectorFunc);
-    if (cache && utils.isEqual(args, cache.args)) return cache.val;
-    const val = selectorFunc(...selectorValues);
-    context.cache = {
-      args,
-      val
-    };
-    return val;
-  };
+  const [context] = React.useState(() =>
+  // eslint-disable-next-line no-sparse-arrays
+  [, utils.createSubscriber(items)]);
   return useSnapshot.useSnapshot({
-    get,
-    sub: context.sub
+    get: () => {
+      const [cache] = context;
+      const selectorValues = utils.getSelectorValues(items);
+      const args = selectorValues.concat(deps || selectorFunc);
+      if (cache && utils.isEqual(args, cache[0])) return cache[1];
+      const value = selectorFunc(...selectorValues);
+      context[0] = [args, value];
+      return value;
+    },
+    subscribe: context[1]
   });
 };
 

package/dist/cjs/react/useSnapshot.cjs

@@ -3,13 +3,13 @@
 var shim = require('./shim.cjs');
 
 const useSnapshot = ({
-  sub,
+  subscribe,
   get
 }) => {
   if (process.env.NODE_ENV !== 'production' && !shim.useSyncExternalStore) {
     throw new Error('[reactish-state] Shim setup is required for React 16/17. See: https://github.com/szhsin/reactish-state/tree/master?tab=readme-ov-file#react-1617-setup');
   }
-  return shim.useSyncExternalStore(sub, get, get);
+  return shim.useSyncExternalStore(subscribe, get, get);
 };
 
 exports.useSnapshot = useSnapshot;

package/dist/cjs/utils.cjs

@@ -7,7 +7,7 @@ const isEqual = (args1, args2) => {
   return true;
 };
 const createSubscriber = items => listener => {
-  const unsubscribers = items.map(item => item.sub(listener));
+  const unsubscribers = items.map(item => item.subscribe(listener));
   return () => unsubscribers.forEach(unsubscribe => unsubscribe());
 };
 const getSelectorValues = items => items.map(item => item.get());

package/dist/cjs/vanilla/selector.cjs

@@ -5,9 +5,7 @@ var utils = require('../utils.cjs');
 const createSelector = ({
   plugin
 } = {}) => (...items) => {
-  const {
-    length
-  } = items;
+  const length = items.length;
   const cutoff = typeof items[length - 1] === 'function' ? length - 1 : length - 2;
   const selectorFunc = items[cutoff];
   const config = items[cutoff + 1];
@@ -16,15 +14,12 @@ const createSelector = ({
   const selector = {
     get: () => {
       const args = utils.getSelectorValues(items);
-      if (cache && utils.isEqual(args, cache.args)) return cache.val;
-      const val = selectorFunc(...args);
-      cache = {
-        args,
-        val
-      };
-      return val;
+      if (cache && utils.isEqual(args, cache[0])) return cache[1];
+      const value = selectorFunc(...args);
+      cache = [args, value];
+      return value;
     },
-    sub: utils.createSubscriber(items)
+    subscribe: utils.createSubscriber(items)
   };
   plugin?.(selector, config);
   return selector;

package/dist/cjs/vanilla/state.cjs

@@ -6,6 +6,13 @@ const createState = ({
   let value = initialValue;
   const listeners = new Set();
   const get = () => value;
+  const readonlyState = {
+    get,
+    subscribe: listener => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
   let set = newValue => {
     const nextValue = typeof newValue === 'function' ? newValue(value) : newValue;
     if (!Object.is(value, nextValue)) {
@@ -14,20 +21,14 @@ const createState = ({
       listeners.forEach(listener => listener(nextValue, prevValue));
     }
   };
-  const subscribe = listener => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
   if (middleware) set = middleware({
-    set,
-    get,
-    sub: subscribe
+    ...readonlyState,
+    set
   }, config);
   return {
     ...actionBuilder?.(set, get),
-    get,
-    set,
-    sub: subscribe
+    ...readonlyState,
+    set
   };
 };
 const state = /*#__PURE__*/createState();

package/dist/esm/react/useSelector.mjs

@@ -7,26 +7,20 @@ const useSelector = (selectorParamFactory, deps) => {
   const cutoff = items.length - 1;
   const selectorFunc = items[cutoff];
   items.length = cutoff;
-  const [context] = useState(() => ({
-    sub: createSubscriber(items)
-  }));
-  const get = () => {
-    const {
-      cache
-    } = context;
-    const selectorValues = getSelectorValues(items);
-    const args = selectorValues.concat(deps || selectorFunc);
-    if (cache && isEqual(args, cache.args)) return cache.val;
-    const val = selectorFunc(...selectorValues);
-    context.cache = {
-      args,
-      val
-    };
-    return val;
-  };
+  const [context] = useState(() =>
+  // eslint-disable-next-line no-sparse-arrays
+  [, createSubscriber(items)]);
   return useSnapshot({
-    get,
-    sub: context.sub
+    get: () => {
+      const [cache] = context;
+      const selectorValues = getSelectorValues(items);
+      const args = selectorValues.concat(deps || selectorFunc);
+      if (cache && isEqual(args, cache[0])) return cache[1];
+      const value = selectorFunc(...selectorValues);
+      context[0] = [args, value];
+      return value;
+    },
+    subscribe: context[1]
   });
 };
 

package/dist/esm/react/useSnapshot.mjs

@@ -1,13 +1,13 @@
 import { useSyncExternalStore } from './shim.mjs';
 
 const useSnapshot = ({
-  sub,
+  subscribe,
   get
 }) => {
   if (process.env.NODE_ENV !== 'production' && !useSyncExternalStore) {
     throw new Error('[reactish-state] Shim setup is required for React 16/17. See: https://github.com/szhsin/reactish-state/tree/master?tab=readme-ov-file#react-1617-setup');
   }
-  return useSyncExternalStore(sub, get, get);
+  return useSyncExternalStore(subscribe, get, get);
 };
 
 export { useSnapshot };

package/dist/esm/utils.mjs

@@ -5,7 +5,7 @@ const isEqual = (args1, args2) => {
   return true;
 };
 const createSubscriber = items => listener => {
-  const unsubscribers = items.map(item => item.sub(listener));
+  const unsubscribers = items.map(item => item.subscribe(listener));
   return () => unsubscribers.forEach(unsubscribe => unsubscribe());
 };
 const getSelectorValues = items => items.map(item => item.get());

package/dist/esm/vanilla/selector.mjs

@@ -3,9 +3,7 @@ import { createSubscriber, getSelectorValues, isEqual } from '../utils.mjs';
 const createSelector = ({
   plugin
 } = {}) => (...items) => {
-  const {
-    length
-  } = items;
+  const length = items.length;
   const cutoff = typeof items[length - 1] === 'function' ? length - 1 : length - 2;
   const selectorFunc = items[cutoff];
   const config = items[cutoff + 1];
@@ -14,15 +12,12 @@ const createSelector = ({
   const selector = {
     get: () => {
       const args = getSelectorValues(items);
-      if (cache && isEqual(args, cache.args)) return cache.val;
-      const val = selectorFunc(...args);
-      cache = {
-        args,
-        val
-      };
-      return val;
+      if (cache && isEqual(args, cache[0])) return cache[1];
+      const value = selectorFunc(...args);
+      cache = [args, value];
+      return value;
     },
-    sub: createSubscriber(items)
+    subscribe: createSubscriber(items)
   };
   plugin?.(selector, config);
   return selector;

package/dist/esm/vanilla/state.mjs

@@ -4,6 +4,13 @@ const createState = ({
   let value = initialValue;
   const listeners = new Set();
   const get = () => value;
+  const readonlyState = {
+    get,
+    subscribe: listener => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
   let set = newValue => {
     const nextValue = typeof newValue === 'function' ? newValue(value) : newValue;
     if (!Object.is(value, nextValue)) {
@@ -12,20 +19,14 @@ const createState = ({
       listeners.forEach(listener => listener(nextValue, prevValue));
     }
   };
-  const subscribe = listener => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
   if (middleware) set = middleware({
-    set,
-    get,
-    sub: subscribe
+    ...readonlyState,
+    set
   }, config);
   return {
     ...actionBuilder?.(set, get),
-    get,
-    set,
-    sub: subscribe
+    ...readonlyState,
+    set
   };
 };
 const state = /*#__PURE__*/createState();

package/dist/plugin/cjs/reduxDevtools.cjs

@@ -11,7 +11,7 @@ const reduxDevtools = ({
   const mergedState = {};
   return ({
     get,
-    sub: subscribe
+    subscribe
   }, config) => {
     const key = config?.key;
     if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `reduxDevtools` plugin is used.');

package/dist/plugin/esm/reduxDevtools.mjs

@@ -9,7 +9,7 @@ const reduxDevtools = ({
   const mergedState = {};
   return ({
     get,
-    sub: subscribe
+    subscribe
   }, config) => {
     const key = config?.key;
     if (!key) throw new Error('[reactish-state] state should be provided with a string `key` in the config object when the `reduxDevtools` plugin is used.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactish-state",
-  "version": "1.2.1-alpha.0",
+  "version": "1.2.1-alpha.2",
   "description": "Simple, decentralized (atomic) state management for React.",
   "author": "Zheng Song",
   "license": "MIT",

package/types/react/useSnapshot.d.ts

@@ -1,3 +1,3 @@
 import type { Selector } from '../types';
-declare const useSnapshot: <TValue>({ sub, get }: Selector<TValue>) => TValue;
+declare const useSnapshot: <TValue>({ subscribe, get }: Selector<TValue>) => TValue;
 export { useSnapshot };

package/types/types.d.ts

@@ -6,7 +6,7 @@ export type StateSubscriber<TValue> = (listener: StateListener<TValue>) => Unsub
 export interface State<TValue, TContext = unknown> {
     get: Getter<TValue>;
     set: Setter<TValue, TContext>;
-    sub: StateSubscriber<TValue>;
+    subscribe: StateSubscriber<TValue>;
 }
 export type StateWithAction<TValue, TAction, TContext = unknown> = Omit<TAction, keyof State<TValue, TContext>> & State<TValue, TContext>;
 export type ActionBuilder<TValue, TAction, TContext = unknown> = (set: Setter<TValue, TContext>, get: () => TValue) => TAction;
@@ -20,7 +20,7 @@ export type SelectorListener = () => void;
 export type SelectorSubscriber = (listener: SelectorListener) => Unsubscriber;
 export interface Selector<TValue> {
     get: Getter<TValue>;
-    sub: SelectorSubscriber;
+    subscribe: SelectorSubscriber;
 }
 export interface Config {
     key?: string;