juststore 0.0.7 → 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/node.js

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState } from 'react';
-import { isEqual } from './impl';
 export { createNode, createRootNode };
 /**
  * Creates the root proxy node for dynamic path access.
@@ -71,17 +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 => {
-                        const newValue = fn(from(value));
-                        if (!isEqual(computedValue, newValue)) {
-                            setComputedValue(newValue);
-                        }
-                    });
-                    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.7",
+  "version": "0.1.0",
   "description": "A small, expressive, and type-safe state management library for React.",
   "type": "module",
   "main": "dist/index.js",