juststore 0.0.6 → 0.1.0

package/README.md

@@ -291,7 +291,7 @@ function TemperatureInput() {
 
 ```tsx
 function TotalPrice() {
-  const total = store.cart.items.compute(
+  const total = store.cart.items.useCompute(
     items => items?.reduce((sum, item) => sum + item.price * item.qty, 0) ?? 0
   )
   return <span>Total: ${total}</span>
@@ -450,23 +450,42 @@ Creates a component-scoped store that doesn't persist.
 
 Creates a form store with validation support.
 
+### Root Node Methods
+
+The store root provides path-based methods for dynamic access:
+
+| Method                          | Description                                             |
+| ------------------------------- | ------------------------------------------------------- |
+| `.use(path)`                    | Subscribe and read value (triggers re-render on change) |
+| `.useDebounce(path, ms)`        | Subscribe with debounced updates                        |
+| `.useState(path)`               | Returns `[value, setValue]` tuple                       |
+| `.value(path)`                  | Read without subscribing                                |
+| `.set(path, value)`             | Update value                                            |
+| `.set(path, fn)`                | Functional update                                       |
+| `.reset(path)`                  | Delete value at path                                    |
+| `.subscribe(path, fn)`          | Subscribe to changes (for effects)                      |
+| `.notify(path)`                 | Manually trigger subscribers                            |
+| `.useCompute(path, fn)`         | Derive a computed value                                 |
+| `.Render({ path, children })`   | Render prop component                                   |
+| `.Show({ path, children, on })` | Conditional render component                            |
+
 ### State Methods
 
-| Method                   | Description                                             |
-| ------------------------ | ------------------------------------------------------- |
-| `.use()`                 | Subscribe and read value (triggers re-render on change) |
-| `.useDebounce(ms)`       | Subscribe with debounced updates                        |
-| `.useState()`            | Returns `[value, setValue]` tuple                       |
-| `.value`                 | Read without subscribing                                |
-| `.set(value)`            | Update value                                            |
-| `.set(fn)`               | Functional update                                       |
-| `.reset()`               | Delete value at path                                    |
-| `.subscribe(fn)`         | Subscribe to changes (for effects)                      |
-| `.notify()`              | Manually trigger subscribers                            |
-| `.compute(fn)`           | Derive a computed value                                 |
-| `.derived({ from, to })` | Create bidirectional transform                          |
-| `.Render`                | Render prop component                                   |
-| `.Show`                  | Conditional render component                            |
+| Method                    | Description                                             |
+| ------------------------- | ------------------------------------------------------- |
+| `.use()`                  | Subscribe and read value (triggers re-render on change) |
+| `.useDebounce(ms)`        | Subscribe with debounced updates                        |
+| `.useState()`             | Returns `[value, setValue]` tuple                       |
+| `.value`                  | Read without subscribing                                |
+| `.set(value)`             | Update value                                            |
+| `.set(fn)`                | Functional update                                       |
+| `.reset()`                | Delete value at path                                    |
+| `.subscribe(fn)`          | Subscribe to changes (for effects)                      |
+| `.notify()`               | Manually trigger subscribers                            |
+| `.useCompute(fn)`         | Derive a computed value                                 |
+| `.derived({ from, to })`  | Create bidirectional transform                          |
+| `.Render({ children })`   | Render prop component                                   |
+| `.Show({ children, on })` | Conditional render component                            |
 
 ## License
 

package/dist/impl.d.ts

@@ -1,5 +1,15 @@
 import type { FieldPath, FieldPathValue, FieldValues } from './path';
-export { getNestedValue, getSnapshot, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
+export { getNestedValue, getSnapshot, isClass, isEqual, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
+declare function isClass(value: unknown): boolean;
+/** Compare two values for equality
+ * @description
+ * - react-fast-compare for non-class instances
+ * - reference equality for class instances
+ * @param a - The first value to compare
+ * @param b - The second value to compare
+ * @returns True if the values are equal, false otherwise
+ */
+declare function isEqual(a: unknown, b: unknown): boolean;
 /**
  * Joins a namespace and path into a full key string.
  *

package/dist/impl.js

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
-import isEqual from 'react-fast-compare';
+import rfcIsEqual from 'react-fast-compare';
 import { localStorageDelete, localStorageGet, localStorageSet } from './local_storage';
-export { getNestedValue, getSnapshot, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
+export { getNestedValue, getSnapshot, isClass, isEqual, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe };
 const memoryStore = new Map();
 // check if the value is a class instance
 function isClass(value) {
@@ -19,6 +19,19 @@ function isClass(value) {
     }
     return false;
 }
+/** Compare two values for equality
+ * @description
+ * - react-fast-compare for non-class instances
+ * - reference equality for class instances
+ * @param a - The first value to compare
+ * @param b - The second value to compare
+ * @returns True if the values are equal, false otherwise
+ */
+function isEqual(a, b) {
+    if (isClass(a) || isClass(b))
+        return a === b;
+    return rfcIsEqual(a, b);
+}
 /**
  * Joins a namespace and path into a full key string.
  *
@@ -375,8 +388,7 @@ function produce(key, value, skipUpdate = false, memoryOnly = false) {
         store.delete(key, memoryOnly);
     }
     else {
-        const useRefEquality = isClass(current) || isClass(value);
-        if (useRefEquality ? current === value : isEqual(current, value))
+        if (isEqual(current, value))
             return;
         store.set(key, value, memoryOnly);
     }

package/dist/node.js

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState } from 'react';
 export { createNode, createRootNode };
 /**
  * Creates the root proxy node for dynamic path access.
@@ -70,12 +68,9 @@ function createNode(storeApi, path, cache, extensions, from = unchanged, to = un
             if (prop === 'Show') {
                 return ({ children, on }) => storeApi.Show({ path, children, on: value => on(from(value)) });
             }
-            if (prop === 'compute') {
+            if (prop === 'useCompute') {
                 return (fn) => {
-                    const initialValue = from(storeApi.value(path));
-                    const [computedValue, setComputedValue] = useState(() => fn(initialValue));
-                    storeApi.subscribe(path, value => setComputedValue(fn(from(value))));
-                    return computedValue;
+                    return storeApi.useCompute(path, value => fn(from(value)));
                 };
             }
             if (prop === 'derived') {

package/dist/root.js

@@ -1,5 +1,5 @@
-import { useCallback, useRef } from 'react';
-import { getNestedValue, getSnapshot, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe } from './impl';
+import { useCallback, useRef, useState } from 'react';
+import { getNestedValue, getSnapshot, isEqual, joinPath, notifyListeners, produce, setLeaf, useDebounce, useObject, useSubscribe } from './impl';
 export { createStoreRoot };
 /**
  * Creates the core store API with path-based methods.
@@ -34,6 +34,17 @@ function createStoreRoot(namespace, defaultValue, options = {}) {
         subscribe: (path, listener) => 
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useSubscribe(joinPath(namespace, path), listener),
+        useCompute: (path, fn) => {
+            const initialValue = getSnapshot(joinPath(namespace, path));
+            const [computedValue, setComputedValue] = useState(() => fn(initialValue));
+            useSubscribe(path, value => {
+                const newValue = fn(value);
+                if (!isEqual(computedValue, newValue)) {
+                    setComputedValue(newValue);
+                }
+            });
+            return computedValue;
+        },
         notify: (path) => {
             const value = getNestedValue(getSnapshot(namespace), path);
             return notifyListeners(joinPath(namespace, path), value, value, true, true);

package/dist/types.d.ts

@@ -43,6 +43,8 @@ type StoreRoot<T extends FieldValues> = {
     reset: <P extends FieldPath<T>>(path: P) => 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;
+    /** Compute a derived value from the current value, similar to useState + useMemo */
+    useCompute: <P extends FieldPath<T>>(path: P, fn: (value: FieldPathValue<T, P>) => FieldPathValue<T, P>) => FieldPathValue<T, P>;
     /** Notify listeners at path. */
     notify: <P extends FieldPath<T>>(path: P) => void;
     /** Convenience hook returning [value, setValue] for the path. */
@@ -71,7 +73,7 @@ type State<T> = {
     /** Subscribe to changes at path and invoke listener with the new value. */
     subscribe(listener: (value: T) => void): void;
     /** Compute a derived value from the current value, similar to useState + useMemo */
-    compute: <R>(fn: (value: T) => R) => R;
+    useCompute: <R>(fn: (value: T) => R) => R;
     /** Virtual state derived from the current value. */
     derived: <R>({ from, to }: {
         from: (value: T | undefined) => R;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juststore",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "A small, expressive, and type-safe state management library for React.",
   "type": "module",
   "main": "dist/index.js",
@@ -8,7 +8,7 @@
   "author": "Yusing",
   "repository": {
     "type": "git",
-    "url": "https://github.com/yusing/juststore"
+    "url": "git+https://github.com/yusing/juststore.git"
   },
   "homepage": "https://github.com/yusing/juststore",
   "bugs": {