juststore 0.3.5 → 0.4.1

package/dist/form.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import { pascalCase } from 'change-case';
-import { useId } from 'react';
+import { useEffect, useId, useMemo } from 'react';
 import { getSnapshot, produce } from './impl';
 import { createNode } from './node';
 import { createStoreRoot } from './root';
@@ -36,7 +36,7 @@ function useForm(defaultValue, fieldConfigs = {}) {
     const errorNamespace = `errors.${namespace}`;
     const storeApi = createStoreRoot(namespace, defaultValue, { memoryOnly: true });
     const errorStore = createStoreRoot(errorNamespace, {}, { memoryOnly: true });
-    const formStore = {
+    const formStore = useMemo(() => ({
         clearErrors: () => produce(errorNamespace, undefined, false, true),
         handleSubmit: (onSubmit) => (e) => {
             e.preventDefault();
@@ -45,8 +45,8 @@ function useForm(defaultValue, fieldConfigs = {}) {
                 onSubmit(getSnapshot(namespace));
             }
         }
-    };
-    const store = new Proxy(storeApi, {
+    }), [namespace, errorNamespace]);
+    const store = useMemo(() => new Proxy(storeApi, {
         get(_target, prop) {
             if (prop in formStore) {
                 return formStore[prop];
@@ -59,22 +59,34 @@ function useForm(defaultValue, fieldConfigs = {}) {
             }
             return undefined;
         }
-    });
-    for (const entry of Object.entries(fieldConfigs)) {
-        const [path, config] = entry;
-        const validator = getValidator(path, config?.validate);
-        if (validator) {
-            storeApi.subscribe(path, (value) => {
-                const error = validator(value, store);
-                if (!error) {
-                    errorStore.reset(path);
-                }
-                else {
-                    errorStore.set(path, error);
-                }
-            });
+    }), [storeApi, formStore, errorStore]);
+    const unsubscribeFns = useMemo(() => {
+        const unsubscribeFns = [];
+        for (const entry of Object.entries(fieldConfigs)) {
+            const [path, config] = entry;
+            const validator = getValidator(path, config?.validate);
+            if (validator) {
+                const unsubscribe = storeApi.subscribe(path, (value) => {
+                    const error = validator(value, store);
+                    if (!error) {
+                        errorStore.reset(path);
+                    }
+                    else {
+                        errorStore.set(path, error);
+                    }
+                });
+                unsubscribeFns.push(unsubscribe);
+            }
         }
-    }
+        return unsubscribeFns;
+    }, [fieldConfigs, storeApi, errorStore, store]);
+    useEffect(() => {
+        return () => {
+            for (const unsubscribe of unsubscribeFns) {
+                unsubscribe();
+            }
+        };
+    }, [unsubscribeFns]);
     return store;
 }
 /**

package/dist/impl.d.ts

@@ -1,5 +1,5 @@
 import type { FieldPath, FieldPathValue, FieldValues } from './path';
-export { getNestedValue, getSnapshot, getStableKeys, isClass, isEqual, joinPath, notifyListeners, produce, rename, setExternalKeyOrder, setLeaf, subscribe, useDebounce, useObject, useSubscribe };
+export { getNestedValue, getSnapshot, getStableKeys, isClass, isEqual, joinPath, notifyListeners, produce, rename, setExternalKeyOrder, setLeaf, subscribe, useDebounce, useObject };
 declare function setExternalKeyOrder(target: object, keys: string[]): void;
 declare function getStableKeys(value: unknown): string[];
 declare function isClass(value: unknown): boolean;
@@ -97,17 +97,6 @@ declare function useObject<T extends FieldValues, P extends FieldPath<T>>(key: s
  * @returns The debounced value at the path
  */
 declare function useDebounce<T extends FieldValues, P extends FieldPath<T>>(key: string, path: P, delay: number): FieldPathValue<T, P> | undefined;
-/**
- * React hook for side effects when a value changes.
- *
- * Unlike `use()`, this doesn't cause re-renders. Instead, it calls the
- * provided callback whenever the value changes, useful for syncing with
- * external systems or triggering effects.
- *
- * @param key - The full key path to subscribe to
- * @param onChange - Callback invoked with the new value on each change
- */
-declare function useSubscribe<T>(key: string, onChange: (value: T) => void): void;
 /**
  * Sets a value at a specific path within a namespace.
  *

package/dist/impl.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import rfcIsEqual from 'react-fast-compare';
 import { localStorageDelete, localStorageGet, localStorageSet } from './local_storage';
-export { getNestedValue, getSnapshot, getStableKeys, isClass, isEqual, joinPath, notifyListeners, produce, rename, setExternalKeyOrder, setLeaf, subscribe, useDebounce, useObject, useSubscribe };
+export { getNestedValue, getSnapshot, getStableKeys, isClass, isEqual, joinPath, notifyListeners, produce, rename, setExternalKeyOrder, setLeaf, subscribe, useDebounce, useObject };
 const memoryStore = new Map();
 const listeners = new Map();
 const descendantListenerKeysByPrefix = new Map();
@@ -659,29 +659,6 @@ function useDebounce(key, path, delay) {
     }, [currentValue, delay, debouncedValue]);
     return debouncedValue;
 }
-/**
- * React hook for side effects when a value changes.
- *
- * Unlike `use()`, this doesn't cause re-renders. Instead, it calls the
- * provided callback whenever the value changes, useful for syncing with
- * external systems or triggering effects.
- *
- * @param key - The full key path to subscribe to
- * @param onChange - Callback invoked with the new value on each change
- */
-function useSubscribe(key, onChange) {
-    const onChangeRef = useRef(onChange);
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-    useEffect(() => {
-        const unsubscribe = subscribe(key, () => {
-            const value = getSnapshot(key);
-            onChangeRef.current(value);
-        });
-        return unsubscribe;
-    }, [key]);
-}
 /**
  * Sets a value at a specific path within a namespace.
  *

package/dist/root.js

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useSyncExternalStore } from 'react';
-import { getNestedValue, getSnapshot, isEqual, joinPath, notifyListeners, produce, rename, setLeaf, subscribe, useDebounce, useObject, useSubscribe } from './impl';
+import { getNestedValue, getSnapshot, isEqual, joinPath, notifyListeners, produce, rename, setLeaf, subscribe, useDebounce, useObject } from './impl';
 import { createRootNode } from './node';
 export { createStoreRoot };
 /**
@@ -34,9 +34,9 @@ function createStoreRoot(namespace, defaultValue, options = {}) {
         value: (path) => getSnapshot(joinPath(namespace, path)),
         reset: (path) => produce(joinPath(namespace, path), undefined, false, memoryOnly),
         rename: (path, oldKey, newKey) => rename(joinPath(namespace, path), oldKey, newKey),
-        subscribe: (path, listener) => 
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useSubscribe(joinPath(namespace, path), listener),
+        subscribe: (path, listener) => () => {
+            subscribe(joinPath(namespace, path), () => listener(getSnapshot(joinPath(namespace, path))));
+        },
         useCompute: (path, fn, deps) => {
             const fullPath = joinPath(namespace, path);
             const fnRef = useRef(fn);

package/dist/types.d.ts

@@ -59,8 +59,11 @@ type StoreRoot<T extends FieldValues> = {
     reset: <P extends FieldPath<T>>(path: P) => void;
     /** Rename a key in an object. */
     rename: <P extends FieldPath<T>>(path: P, oldKey: string, newKey: string) => void;
-    /** Subscribe to changes at path and invoke listener with the new value. */
-    subscribe: <P extends FieldPath<T>>(path: P, listener: (value: FieldPathValue<T, P>) => void) => void;
+    /** Subscribe to changes at path and invoke listener with the new value
+     *
+     * @returns A function to unsubscribe from the path.
+     */
+    subscribe: <P extends FieldPath<T>>(path: P, listener: (value: FieldPathValue<T, P>) => void) => () => void;
     /** Compute a derived value from the current value, similar to useState + useMemo */
     useCompute: <P extends FieldPath<T>, R>(path: P, fn: (value: FieldPathValue<T, P>) => R, deps?: readonly unknown[]) => R;
     /** Notify listeners at path. */
@@ -86,8 +89,19 @@ type ValueState<T> = {
     set(value: T | undefined | ((prev: T) => T), skipUpdate?: boolean): void;
     /** Delete value at path (for arrays, removes index; for objects, deletes key). */
     reset(): void;
-    /** Subscribe to changes at path and invoke listener with the new value. */
-    subscribe(listener: (value: T) => void): void;
+    /** Subscribe to changes at path and invoke listener with the new value.
+     *
+     * @returns A function to unsubscribe.
+     * @example
+     *
+     * useEffect(() => {
+     *   const unsubscribe = store.a.b.c.subscribe(value => {
+     *     console.log(value)
+     *   })
+     *   return unsubscribe
+     * }, [])
+     */
+    subscribe(listener: (value: T) => void): () => void;
     /** Compute a derived value from the current value, similar to useState + useMemo */
     useCompute: <R>(fn: (value: T) => R, deps?: readonly unknown[]) => R;
     /** Ensure the value is an array. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juststore",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "description": "A small, expressive, and type-safe state management library for React.",
   "type": "module",
   "main": "dist/index.js",