react-state-custom 1.0.9 → 1.0.11

package/src/state-utils/createRootCtx.tsx

@@ -3,6 +3,35 @@ import { useDataContext, useDataSourceMultiple, type Context } from "./ctx"
 
 
 
+/**
+ * createRootCtx
+ *
+ * Factory that creates a headless "Root" component and companion hooks for a context namespace.
+ * It derives a unique context name from a base `name` and a props object `U`, then publishes
+ * a computed state `V` (from `useFn`) to that context.
+ *
+ * Usage (manual mounting):
+ * ```
+ * const { Root, useCtxState } = createRootCtx('user-state', useUserState)
+ *  ...
+ * // Mount exactly one Root per unique props combination
+ * <Root userId={id} />
+ *  ...
+ * // Read anywhere ,using the same props shape
+ * const user = useCtxState({ userId: id })
+ *```
+ * Strict vs lenient consumers:
+ * - useCtxStateStrict(props) throws if a matching Root is not mounted.
+ * - useCtxState(props) logs an error (after 1s) instead of throwing.
+ *
+ * Multiple instances safety:
+ * - Mounting more than one Root with the same resolved context name throws (guards accidental duplicates).
+ *
+ * Name resolution notes:
+ * - The context name is built from `name` + sorted key/value pairs of `props` (U), joined by "-".
+ * - Prefer stable, primitive props to avoid collisions; if you need automation, pair with `createAutoCtx` and
+ *   mount a single <AutoRootCtx Wrapper={ErrorBoundary} /> at the app root so you don't manually mount `Root`.
+ */
 export const createRootCtx = <U extends object, V extends object>(name: string, useFn: (e: U) => V) => {
 
   const resolveCtxName = (e: U) => [
@@ -17,9 +46,9 @@ export const createRootCtx = <U extends object, V extends object>(name: string,
 
 
   const RootState: React.FC<U> = (e: U) => {
+    const state = useFn(e)
     const ctxName = resolveCtxName(e)
     const ctx = useDataContext<V>(ctxName)
-    const state = useFn(e)
     const stack = useMemo(() => new Error().stack, [])
 
     useDataSourceMultiple(
@@ -45,6 +74,10 @@ export const createRootCtx = <U extends object, V extends object>(name: string,
   return {
     resolveCtxName,
     Root: RootState,
+  /**
+   * Strict consumer: throws if the corresponding Root for these props isn't mounted.
+   * Use in development/tests to fail fast when wiring is incorrect.
+   */
     useCtxStateStrict: (e: U): Context<V> => {
       const ctxName = resolveCtxName(e)
 
@@ -60,6 +93,10 @@ export const createRootCtx = <U extends object, V extends object>(name: string,
 
       return useDataContext<V>(ctxName)
     },
+  /**
+   * Lenient consumer: schedules a console.error if the Root isn't mounted instead of throwing.
+   * Useful in production to avoid hard crashes while still surfacing misconfiguration.
+   */
     useCtxState: (e: U): Context<V> => {
       const ctxName = resolveCtxName(e)
 

package/src/state-utils/ctx.ts

@@ -1,7 +1,7 @@
-import event from "events"
-import { debounce, memoize, throttle } from "lodash-es"
+import { EventEmitter } from "events"
+import { debounce, memoize } from "lodash-es"
 import { useEffect, useMemo, useState } from "react"
-import { useObjHash } from "./useObjectHash"
+import { useArrayHash } from "./useArrayHash"
 
 
 
@@ -19,7 +19,7 @@ export class Context<D> {
     this.event.setMaxListeners(100)
   }
 
-  private event = new event.EventEmitter()
+  private event = new EventEmitter()
 
   /**
    * The current data held by the context.
@@ -150,7 +150,9 @@ export const useDataSubscribe = <D, K extends keyof D>(ctx: Context<D> | undefin
 
   useEffect(() => {
     if (ctx) {
-      let callback = debounceTime == 0 ? (value: any) => setState({ value } as any) : debounce((value: any) => setState({ value } as any), debounceTime)
+      let callback = debounceTime == 0 
+        ? (value: any) => setState({ value } as any) 
+        : debounce((value: any) => setState({ value } as any), debounceTime)
       let unsub = ctx.subscribe(key, callback)
       value != ctx.data[key] && setState({ value: ctx.data[key] })
       return () => {
@@ -211,7 +213,7 @@ export const useDataSourceMultiple = <D, T extends readonly (keyof D)[]>(
         ctx.data[key] != value && ctx.publish(key, value)
       }
     }
-  }, [ctx, useObjHash(entries.flat())])
+  }, [ctx, useArrayHash(entries.flat())])
 
   useRegistryChecker(ctx, ...entries.map(e => e[0]) as any)
 
@@ -264,13 +266,13 @@ export const useDataSubscribeMultiple = <D, K extends keyof D>(
 /**
  * React hook to subscribe to multiple context values with throttling.
  * @param ctx - The context instance.
- * @param debounceTime - Throttle time in ms (default 100).
+ * @param debounceTime - Debounce time in ms (default 50).
  * @param keys - Keys to subscribe to.
  * @returns Array of current values for the keys.
  */
 export const useDataSubscribeMultipleWithDebounce = <D, K extends (keyof D)[]>(
   ctx: Context<D> | undefined,
-  debounceTime = 100,
+  debounceTime = 50,
   ...keys: K
 ): { [i in keyof K]: D[K[i]] | undefined } => {
   //@ts-check
@@ -281,7 +283,7 @@ export const useDataSubscribeMultipleWithDebounce = <D, K extends (keyof D)[]>(
   useEffect(() => {
     if (ctx) {
       let prevValues = returnValues
-      const callback = throttle(() => {
+      const callback = debounce(() => {
         let currentValues = keys.map(key => ctx?.data?.[key])
         if (keys.some((key, i) => prevValues[i] != currentValues[i])) {
           prevValues = currentValues

package/src/state-utils/useArrayHash.ts

@@ -0,0 +1,53 @@
+import { useRef } from "react"
+
+
+const randomHash = () => Math.random().toString().slice(2)
+
+/**
+ * useArrayHash
+ *
+ * A custom hook that computes a stable hash for an array of values.
+ * The hash changes only when the array's contents differ from the previous call.
+ *
+ * @param e - The input array to hash.
+ * @returns A string hash that updates when the array changes.
+ *
+ * How it works:
+ * - Tracks the previous array and its hash using a `useRef`.
+ * - Compares the new array to the previous one by length and element equality.
+ * - If any difference is detected, generates a new random hash.
+ */
+export const useArrayHash = (e: any[]): string => {
+
+  const { current: { computedHash } } = useRef({
+    /**
+     * Getter for the computed hash function.
+     *
+     * - Initializes with an empty array and a random hash.
+     * - Returns a function that compares the current array to the previous one.
+     * - Updates the hash if any difference is detected.
+     */
+    get computedHash() {
+      let currentValues: any[] = []
+      let currentHash = randomHash()
+      return (e: any[]) => {
+        let isDiff = false
+
+        // Check for differences in array existence, length, or elements.
+        isDiff = isDiff || ((!e) != (!currentValues))
+        isDiff = isDiff || (e?.length != currentValues?.length);
+        isDiff = isDiff || (e.some((f, i) => f != currentValues[i]));
+
+        // Update the hash if differences are found.
+        currentValues = e;
+        if (isDiff) {
+          currentHash = randomHash()
+        }
+
+        return currentHash
+      }
+    }
+  })
+
+  return computedHash(e)
+}

package/src/state-utils/useObjectHash.ts

@@ -3,19 +3,42 @@ import { useRef } from "react"
 
 const randomHash = () => Math.random().toString().slice(2)
 
-export const useObjHash = (e: any[]): string => {
+/**
+ * useArrayHash
+ *
+ * A custom hook that computes a stable hash for an array of values.
+ * The hash changes only when the array's contents differ from the previous call.
+ *
+ * @param e - The input array to hash.
+ * @returns A string hash that updates when the array changes.
+ *
+ * How it works:
+ * - Tracks the previous array and its hash using a `useRef`.
+ * - Compares the new array to the previous one by length and element equality.
+ * - If any difference is detected, generates a new random hash.
+ */
+export const useArrayHash = (e: any[]): string => {
 
   const { current: { computedHash } } = useRef({
+    /**
+     * Getter for the computed hash function.
+     *
+     * - Initializes with an empty array and a random hash.
+     * - Returns a function that compares the current array to the previous one.
+     * - Updates the hash if any difference is detected.
+     */
     get computedHash() {
       let currentValues: any[] = []
       let currentHash = randomHash()
       return (e: any[]) => {
         let isDiff = false
 
+        // Check for differences in array existence, length, or elements.
         isDiff = isDiff || ((!e) != (!currentValues))
         isDiff = isDiff || (e?.length != currentValues?.length);
         isDiff = isDiff || (e.some((f, i) => f != currentValues[i]));
 
+        // Update the hash if differences are found.
         currentValues = e;
         if (isDiff) {
           currentHash = randomHash()

package/src/state-utils/useQuickSubscribe.ts

@@ -1,3 +1,8 @@
+
+import { debounce } from "lodash-es";
+import { useState, useMemo, useEffect } from "react";
+import type { Context } from "./ctx";
+
 /**
  * useQuickSubscribe is a custom React hook for efficiently subscribing to specific properties of a context's data object.
  * 
@@ -16,11 +21,6 @@
  *   return <div>{name}</div>;
  */
 
-import { debounce } from "lodash-es";
-import { useState, useMemo, useEffect } from "react";
-import type { Context } from "./ctx";
-
-
 export const useQuickSubscribe = <D>(
   ctx: Context<D> | undefined
 ): {
@@ -29,85 +29,80 @@ export const useQuickSubscribe = <D>(
 
   const [, setCounter] = useState(0);
 
-  const { proxy, clean, handleOnChange } = useMemo(
+  const { proxy, finalGetter, openGetter, clean } = useMemo(
     () => {
 
       const allKeys = new Set<keyof D>()
-      const allUnsubInstance = new Map<keyof D, Function>()
-      const allCompareValue = ({} as Partial<D>)
-
-      const handleOnChange = debounce(() => {
-        console.log("handleOnChange",allCompareValue)
-        if (ctx && Object
-          .keys(allCompareValue)
-          .some((i: any) => allCompareValue[i as keyof D] != ctx?.data[i as keyof D])) {
-          setCounter(c => c + 1);
-        }
-      }, 1)
-
-      const handleChangeKey = debounce(() => {
-        if (ctx) {
-          console.log("handleChangeKey")
-          let shouldUpdate = false;
-          let keyToDelete: (keyof D)[] = []
-
-          for (let [k, unsub] of allUnsubInstance) {
-            if (!allKeys.has(k)) {
-              console.log("Remove", k)
-              unsub?.();
-              keyToDelete.push(k)
-            }
-          }
-          keyToDelete.forEach(k => {
-            allUnsubInstance.delete(k);
-            delete allCompareValue[k];
-          })
-          for (let k of allKeys) {
-            if (!allUnsubInstance.has(k)) {
-              console.log("Add   ", k)
-              const sub = ctx.subscribe(k, handleOnChange);
-              allUnsubInstance.set(k, sub);
-              shouldUpdate = true;
-            }
-          }
-          allKeys.clear()
-          if (shouldUpdate) handleOnChange?.();
-        }
-      }, 0)
-
-      const handleAddKey = (p: keyof D) => {
-        allKeys.add(p);
-        handleChangeKey();
-      }
+      const allCompareValue: { [P in keyof D]?: D[P] | undefined; } = {}
+      const allUnsub = new Map()
 
       const proxy = new Proxy(
         ctx?.data as any,
         {
           get(target, p) {
-            handleAddKey(p as keyof D);
-            console.log({ [p]: target[p] });
-            return allCompareValue[p as keyof D] = target[p];
+            if (isOpenGetter) {
+              allKeys.add(p as keyof D)
+              return allCompareValue[p as keyof D] = target[p];
+            } else {
+              throw new Error("now allow here")
+            }
           }
         }
       ) as any
 
-      const clean = () => {
-        console.log("Clean", allKeys)
-        handleChangeKey?.()
+      let isOpenGetter = true;
+
+
+      let onChange = debounce(() => {
+        if ([...allKeys.values()]
+          .some(k => allCompareValue[k] != ctx?.data?.[k])) {
+          setCounter(c => c + 1)
+        }
+      }, 0)
+
+      let openGetter = () => {
+        isOpenGetter = true
+        allKeys.clear()
       }
 
-      console.log("NEW")
-      return { proxy, clean, handleOnChange }
+      let finalGetter = () => {
+        isOpenGetter = false;
+
+        [...allKeys.values()]
+          .filter(k => !allUnsub.has(k))
+          .forEach(k => {
+            allUnsub.set(k, ctx?.subscribe(k, onChange))
+          });
+
+        [...allUnsub.keys()]
+          .filter(k => !allKeys.has(k))
+          .forEach(k => {
+            let unsub = allUnsub.get(k)
+            unsub?.();
+            allUnsub.delete(k);
+          });
+
+      }
+
+      let clean = () => {
+        openGetter();
+        finalGetter();
+        setCounter(c => c + 1)
+      }
+
+      return { proxy, finalGetter, openGetter, clean }
     },
     [ctx]
   )
 
-  useEffect(() => () => clean?.(), [clean])
+  openGetter();
 
-  // useEffect(() => {
-  //   let i = setInterval(handleOnChange, 5000);
-  //   return () => clearInterval(i);
-  // },[handleOnChange])
+  setTimeout(finalGetter, 0)
+
+  useEffect(
+    () => () => clean(),
+    [clean]
+  )
 
   return proxy;
 

package/vite.config.ts

@@ -1,13 +1,18 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts'
+import { analyzer } from 'vite-bundle-analyzer'
 
 export default defineConfig({
   plugins: [
     react(),
     dts({
       include: ['src'],
-    })
+    }),
+    analyzer({
+      analyzerMode: "server",
+      openAnalyzer: true
+    }),
   ],
   build: {
     lib: {
@@ -21,11 +26,12 @@ export default defineConfig({
       external: ['react', 'react-dom'],
       output: {
         globals: {
-          react: 'React',
+          'react': 'React',
           'react-dom': 'ReactDOM',
         },
       },
     },
+    sourcemap:true
   },
   server: {
     port: 3000,

package/dist/components/MyComponent.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-interface MyComponentProps {
-    title: string;
-    description?: string;
-}
-declare const MyComponent: React.FC<MyComponentProps>;
-export default MyComponent;

package/dist/state-utils/useQuickSubscribeV2.d.ts

@@ -1,2 +0,0 @@
-import { Context } from './ctx';
-export declare const useQuickSubscribeV2: <D>(ctx: Context<D> | undefined) => { [P in keyof D]?: D[P] | undefined; };

package/src/components/MyComponent.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-interface MyComponentProps {
-    title: string;
-    description?: string;
-}
-
-const MyComponent: React.FC<MyComponentProps> = ({ title, description }) => {
-    return (
-        <div>
-            <h1>{title}</h1>
-            {description && <p>{description}</p>}
-        </div>
-    );
-};
-
-export default MyComponent;

package/src/state-utils/useQuickSubscribeV2.ts

@@ -1,93 +0,0 @@
-
-import { debounce } from "lodash-es";
-import { useState, useMemo, useEffect } from "react";
-import type { Context } from "./ctx";
-
-
-export const useQuickSubscribeV2 = <D>(
-  ctx: Context<D> | undefined
-): {
-    [P in keyof D]?: D[P] | undefined;
-  } => {
-
-  const [, setCounter] = useState(0);
-
-  const { proxy, finalGetter, openGetter, clean } = useMemo(
-    () => {
-
-      const allKeys = new Set<keyof D>()
-      const allCompareValue: { [P in keyof D]?: D[P] | undefined; } = {}
-      const allUnsub = new Map()
-
-      const proxy = new Proxy(
-        ctx?.data as any,
-        {
-          get(target, p) {
-            if (isOpenGetter) {
-              allKeys.add(p as keyof D)
-              return allCompareValue[p as keyof D] = target[p];
-            } else {
-              throw new Error("now allow here")
-            }
-          }
-        }
-      ) as any
-
-      let isOpenGetter = true;
-
-
-      let onChange = debounce(() => {
-        if ([...allKeys.values()]
-          .some(k => allCompareValue[k] != ctx?.data?.[k])) {
-          setCounter(c => c + 1)
-        }
-      }, 0)
-
-      let openGetter = () => {
-        isOpenGetter = true
-        allKeys.clear()
-      }
-
-      let finalGetter = () => {
-        isOpenGetter = false;
-
-        [...allKeys.values()]
-          .filter(k => !allUnsub.has(k))
-          .forEach(k => {
-            allUnsub.set(k, ctx?.subscribe(k, onChange))
-          });
-
-        [...allUnsub.keys()]
-          .filter(k => !allKeys.has(k))
-          .forEach(k => {
-            let unsub = allUnsub.get(k)
-            unsub?.();
-            allUnsub.delete(k);
-          });
-
-      }
-
-      let clean = () => {
-        openGetter();
-        finalGetter();
-        setCounter(c => c + 1)
-      }
-
-      return { proxy, finalGetter, openGetter, clean }
-    },
-    [ctx]
-  )
-
-  openGetter();
-
-  setTimeout(finalGetter, 0)
-
-  useEffect(
-    () => () => clean(),
-    [clean]
-  )
-
-  return proxy;
-
-
-};