yuustate 3.9.0 → 3.10.1

package/esm/react/create-query.d.mts

@@ -350,7 +350,7 @@ export declare const createQuery: <TData, TVariable extends StoreKey = never, TE
      */
     initialDataIsStale?: boolean;
 } | {
-    initialData?: never;
+    initialData?: never | undefined;
     initialDataIsStale?: never;
 })) => QueryState<TData, TError>) & {
     setState: (value: SetStateInput<QueryState<TData, TError>>) => void;

package/esm/react/create-store.d.mts

@@ -31,5 +31,5 @@ export declare const createStore: <TState extends Record<string, any>>(initialSt
     /**
      * Initial state used on first render (and will also update the store state right after that)
      */
-    initialState?: Partial<TState>;
+    initialState?: Partial<TState> | undefined;
 }) => TState) & import("../vanilla.d.mts").StoreApi<TState>;

package/esm/react/use-store.d.mts

@@ -4,7 +4,6 @@ export declare const getValueByPath: (obj: any, path: Path) => any;
 export declare const isPrefixPath: (candidatePrefix: Path, targetPath: Path) => boolean;
 export declare const compressPaths: (paths: Path[]) => Path[];
 export declare const useStoreStateProxy: <TState extends Record<string, any>>(storeState: TState) => readonly [TState, import("react").RefObject<Path[]>];
-export declare const NO_INITIAL_VALUE: {};
 export declare const useStoreStateWithInitializer: <TState extends Record<string, any>>(store: StoreApi<TState>, initialState?: Partial<TState>) => readonly [TState, import("react").RefObject<WeakMap<StoreApi<TState>, number>>];
 /**
  * React hook for subscribing to a store using automatic dependency tracking.
@@ -29,6 +28,6 @@ export declare const useStoreStateWithInitializer: <TState extends Record<string
  * // Component will only re-render if `user.name` changes
  */
 export declare const useStoreState: <TState extends Record<string, any>>(store: StoreApi<TState>, options?: {
-    initialState?: Partial<TState>;
+    initialState?: Partial<TState> | undefined;
 }) => TState;
 export {};

package/esm/react.mjs

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useEffect, useState, useRef, useMemo, useCallback } from 'react';
+import { useLayoutEffect, useEffect, useRef, useSyncExternalStore, useCallback, useMemo, useState } from 'react';
 import { isClient, initStore, getHash, noop } from 'yuustate/vanilla';
 
 const useIsomorphicLayoutEffect = isClient ? useLayoutEffect : useEffect;
@@ -49,34 +49,46 @@ const useStoreStateProxy = (storeState) => {
   }, [storeState]);
   return [trackedState, usedPathsRef];
 };
-const NO_INITIAL_VALUE = {};
-const useStoreStateWithInitializer = (store, initialState = NO_INITIAL_VALUE) => {
+const useStoreStateWithInitializer = (store, initialState) => {
   const initiatedAt = useRef(new WeakMap([[store, 0]]));
   useEffect(() => {
-    if (initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store)) return;
+    if (initialState === void 0 || initiatedAt.current.get(store)) return;
     store.setState(initialState);
     initiatedAt.current.set(store, Date.now());
   }, [store, initialState]);
   const storeState = store.getState();
-  const finalState = initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store) ? storeState : { ...storeState, ...initialState };
+  const finalState = initialState === void 0 || initiatedAt.current.get(store) ? storeState : { ...storeState, ...initialState };
   return [finalState, initiatedAt];
 };
 const useStoreState = (store, options = {}) => {
   const [state] = useStoreStateWithInitializer(store, options.initialState);
   const [trackedState, usedPathsRef] = useStoreStateProxy(state);
-  const [, reRender] = useState({});
-  useEffect(() => {
-    return store.subscribe((nextState, prevState, changedKeys) => {
-      const paths = compressPaths(usedPathsRef.current);
-      for (const path of paths) {
-        const rootKey = path[0];
-        if (!changedKeys.includes(rootKey)) continue;
-        const prevVal = getValueByPath(prevState, path);
-        const nextVal = getValueByPath(nextState, path);
-        if (!Object.is(prevVal, nextVal)) return reRender({});
-      }
-    });
-  }, [store]);
+  const snapshotRef = useRef(store.getState());
+  const getSnapshot = () => snapshotRef.current;
+  useSyncExternalStore(
+    useCallback(
+      (onStoreChange) => {
+        return store.subscribe((nextState, prevState, changedKeys) => {
+          const paths = compressPaths(usedPathsRef.current);
+          for (const path of paths) {
+            const rootKey = path[0];
+            if (!changedKeys.includes(rootKey)) continue;
+            const prevVal = getValueByPath(prevState, path);
+            const nextVal = getValueByPath(nextState, path);
+            if (!Object.is(prevVal, nextVal)) {
+              snapshotRef.current = nextState;
+              return onStoreChange();
+            }
+          }
+        });
+      },
+      // False positive (missing dependency: 'usedPathsRef'): usedPathsRef is a ref, no need to add to deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [store]
+    ),
+    getSnapshot,
+    getSnapshot
+  );
   return trackedState;
 };
 
@@ -413,14 +425,14 @@ const createQuery = (queryFn, options = {}) => {
     }
     const useStore = (options2 = {}) => {
       const {
-        initialData = NO_INITIAL_VALUE,
+        initialData,
         initialDataIsStale = false,
         revalidateOnMount = true,
         keepPreviousData
       } = options2;
       const [storeState, initialDataInitiatedAt] = useStoreStateWithInitializer(
         store,
-        initialData === NO_INITIAL_VALUE ? void 0 : {
+        initialData === void 0 ? void 0 : {
           state: "SUCCESS",
           isSuccess: true,
           data: initialData
@@ -444,22 +456,35 @@ const createQuery = (queryFn, options = {}) => {
           { ...storeStateToBeUsed, isPending: true }
         ) : storeStateToBeUsed
       );
-      const [, reRender] = useState({});
-      useEffect(() => {
-        return store.subscribe((nextState, prevState2, changedKeys) => {
-          if (prevState2.state === "INITIAL" && !prevState2.isPending && nextState.isPending && !nextState.isRetrying) {
-            return;
-          }
-          const paths = compressPaths(usedPathsRef.current);
-          for (const path of paths) {
-            const rootKey = path[0];
-            if (!changedKeys.includes(rootKey)) continue;
-            const prevVal = getValueByPath(prevState2, path);
-            const nextVal = getValueByPath(nextState, path);
-            if (!Object.is(prevVal, nextVal)) return reRender({});
-          }
-        });
-      }, [store]);
+      const snapshotRef = useRef(store.getState());
+      const getSnapshot = () => snapshotRef.current;
+      useSyncExternalStore(
+        useCallback(
+          (onStoreChange) => {
+            return store.subscribe((nextState, prevState2, changedKeys) => {
+              if (prevState2.state === "INITIAL" && !prevState2.isPending && nextState.isPending && !nextState.isRetrying) {
+                return;
+              }
+              const paths = compressPaths(usedPathsRef.current);
+              for (const path of paths) {
+                const rootKey = path[0];
+                if (!changedKeys.includes(rootKey)) continue;
+                const prevVal = getValueByPath(prevState2, path);
+                const nextVal = getValueByPath(nextState, path);
+                if (!Object.is(prevVal, nextVal)) {
+                  snapshotRef.current = nextState;
+                  return onStoreChange();
+                }
+              }
+            });
+          },
+          // False positive (missing dependency: 'usedPathsRef'): usedPathsRef is a ref, no need to add to deps
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          [store]
+        ),
+        getSnapshot,
+        getSnapshot
+      );
       useEffect(() => {
         if (revalidateOnMount !== false) {
           if (!initialDataIsStale) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "yuustate",
   "description": "Lightweight unified state management for sync and async data.",
   "private": false,
-  "version": "3.9.0",
+  "version": "3.10.1",
   "keywords": [
     "utilities",
     "store",
@@ -70,8 +70,8 @@
   },
   "packageManager": "pnpm@10.32.1",
   "peerDependencies": {
-    "@types/react": ">=17.0",
-    "react": ">=17.0"
+    "@types/react": ">=18.0",
+    "react": ">=18.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/react/create-query.d.ts

@@ -350,7 +350,7 @@ export declare const createQuery: <TData, TVariable extends StoreKey = never, TE
      */
     initialDataIsStale?: boolean;
 } | {
-    initialData?: never;
+    initialData?: never | undefined;
     initialDataIsStale?: never;
 })) => QueryState<TData, TError>) & {
     setState: (value: SetStateInput<QueryState<TData, TError>>) => void;

package/react/create-store.d.ts

@@ -31,5 +31,5 @@ export declare const createStore: <TState extends Record<string, any>>(initialSt
     /**
      * Initial state used on first render (and will also update the store state right after that)
      */
-    initialState?: Partial<TState>;
+    initialState?: Partial<TState> | undefined;
 }) => TState) & import("../vanilla.ts").StoreApi<TState>;

package/react/use-store.d.ts

@@ -4,7 +4,6 @@ export declare const getValueByPath: (obj: any, path: Path) => any;
 export declare const isPrefixPath: (candidatePrefix: Path, targetPath: Path) => boolean;
 export declare const compressPaths: (paths: Path[]) => Path[];
 export declare const useStoreStateProxy: <TState extends Record<string, any>>(storeState: TState) => readonly [TState, import("react").RefObject<Path[]>];
-export declare const NO_INITIAL_VALUE: {};
 export declare const useStoreStateWithInitializer: <TState extends Record<string, any>>(store: StoreApi<TState>, initialState?: Partial<TState>) => readonly [TState, import("react").RefObject<WeakMap<StoreApi<TState>, number>>];
 /**
  * React hook for subscribing to a store using automatic dependency tracking.
@@ -29,6 +28,6 @@ export declare const useStoreStateWithInitializer: <TState extends Record<string
  * // Component will only re-render if `user.name` changes
  */
 export declare const useStoreState: <TState extends Record<string, any>>(store: StoreApi<TState>, options?: {
-    initialState?: Partial<TState>;
+    initialState?: Partial<TState> | undefined;
 }) => TState;
 export {};

package/react.js

@@ -51,34 +51,46 @@ const useStoreStateProxy = (storeState) => {
   }, [storeState]);
   return [trackedState, usedPathsRef];
 };
-const NO_INITIAL_VALUE = {};
-const useStoreStateWithInitializer = (store, initialState = NO_INITIAL_VALUE) => {
+const useStoreStateWithInitializer = (store, initialState) => {
   const initiatedAt = react.useRef(new WeakMap([[store, 0]]));
   react.useEffect(() => {
-    if (initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store)) return;
+    if (initialState === void 0 || initiatedAt.current.get(store)) return;
     store.setState(initialState);
     initiatedAt.current.set(store, Date.now());
   }, [store, initialState]);
   const storeState = store.getState();
-  const finalState = initialState === NO_INITIAL_VALUE || initiatedAt.current.get(store) ? storeState : { ...storeState, ...initialState };
+  const finalState = initialState === void 0 || initiatedAt.current.get(store) ? storeState : { ...storeState, ...initialState };
   return [finalState, initiatedAt];
 };
 const useStoreState = (store, options = {}) => {
   const [state] = useStoreStateWithInitializer(store, options.initialState);
   const [trackedState, usedPathsRef] = useStoreStateProxy(state);
-  const [, reRender] = react.useState({});
-  react.useEffect(() => {
-    return store.subscribe((nextState, prevState, changedKeys) => {
-      const paths = compressPaths(usedPathsRef.current);
-      for (const path of paths) {
-        const rootKey = path[0];
-        if (!changedKeys.includes(rootKey)) continue;
-        const prevVal = getValueByPath(prevState, path);
-        const nextVal = getValueByPath(nextState, path);
-        if (!Object.is(prevVal, nextVal)) return reRender({});
-      }
-    });
-  }, [store]);
+  const snapshotRef = react.useRef(store.getState());
+  const getSnapshot = () => snapshotRef.current;
+  react.useSyncExternalStore(
+    react.useCallback(
+      (onStoreChange) => {
+        return store.subscribe((nextState, prevState, changedKeys) => {
+          const paths = compressPaths(usedPathsRef.current);
+          for (const path of paths) {
+            const rootKey = path[0];
+            if (!changedKeys.includes(rootKey)) continue;
+            const prevVal = getValueByPath(prevState, path);
+            const nextVal = getValueByPath(nextState, path);
+            if (!Object.is(prevVal, nextVal)) {
+              snapshotRef.current = nextState;
+              return onStoreChange();
+            }
+          }
+        });
+      },
+      // False positive (missing dependency: 'usedPathsRef'): usedPathsRef is a ref, no need to add to deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [store]
+    ),
+    getSnapshot,
+    getSnapshot
+  );
   return trackedState;
 };
 
@@ -415,14 +427,14 @@ const createQuery = (queryFn, options = {}) => {
     }
     const useStore = (options2 = {}) => {
       const {
-        initialData = NO_INITIAL_VALUE,
+        initialData,
         initialDataIsStale = false,
         revalidateOnMount = true,
         keepPreviousData
       } = options2;
       const [storeState, initialDataInitiatedAt] = useStoreStateWithInitializer(
         store,
-        initialData === NO_INITIAL_VALUE ? void 0 : {
+        initialData === void 0 ? void 0 : {
           state: "SUCCESS",
           isSuccess: true,
           data: initialData
@@ -446,22 +458,35 @@ const createQuery = (queryFn, options = {}) => {
           { ...storeStateToBeUsed, isPending: true }
         ) : storeStateToBeUsed
       );
-      const [, reRender] = react.useState({});
-      react.useEffect(() => {
-        return store.subscribe((nextState, prevState2, changedKeys) => {
-          if (prevState2.state === "INITIAL" && !prevState2.isPending && nextState.isPending && !nextState.isRetrying) {
-            return;
-          }
-          const paths = compressPaths(usedPathsRef.current);
-          for (const path of paths) {
-            const rootKey = path[0];
-            if (!changedKeys.includes(rootKey)) continue;
-            const prevVal = getValueByPath(prevState2, path);
-            const nextVal = getValueByPath(nextState, path);
-            if (!Object.is(prevVal, nextVal)) return reRender({});
-          }
-        });
-      }, [store]);
+      const snapshotRef = react.useRef(store.getState());
+      const getSnapshot = () => snapshotRef.current;
+      react.useSyncExternalStore(
+        react.useCallback(
+          (onStoreChange) => {
+            return store.subscribe((nextState, prevState2, changedKeys) => {
+              if (prevState2.state === "INITIAL" && !prevState2.isPending && nextState.isPending && !nextState.isRetrying) {
+                return;
+              }
+              const paths = compressPaths(usedPathsRef.current);
+              for (const path of paths) {
+                const rootKey = path[0];
+                if (!changedKeys.includes(rootKey)) continue;
+                const prevVal = getValueByPath(prevState2, path);
+                const nextVal = getValueByPath(nextState, path);
+                if (!Object.is(prevVal, nextVal)) {
+                  snapshotRef.current = nextState;
+                  return onStoreChange();
+                }
+              }
+            });
+          },
+          // False positive (missing dependency: 'usedPathsRef'): usedPathsRef is a ref, no need to add to deps
+          // eslint-disable-next-line react-hooks/exhaustive-deps
+          [store]
+        ),
+        getSnapshot,
+        getSnapshot
+      );
       react.useEffect(() => {
         if (revalidateOnMount !== false) {
           if (!initialDataIsStale) {