react-state-custom 1.0.24 → 1.0.25

package/src/state-utils/ctx.ts

@@ -1,346 +0,0 @@
-import { debounce, memoize } from "./utils";
-import { useEffect, useMemo, useState } from "react"
-import { useArrayHash } from "./useArrayHash"
-
-
-
-const CHANGE_EVENT = "@--change-event"
-
-class DataEvent<D> extends Event {
-  constructor(
-    public event: keyof D,
-    public value: D[typeof event] | undefined
-  ) {
-    super(String(event));
-  }
-}
-
-class ChangeEvent<D> extends Event {
-  constructor(
-    public value: DataEvent<D>
-  ) {
-    super(CHANGE_EVENT, value);
-  }
-}
-
-/**
- * Generic context for managing shared state and event subscriptions.
- * @template D - The shape of the data managed by the context.
- */
-export class Context<D> extends EventTarget {
-  /**
-   * Create a new Context instance.
-   * @param name - The name of the context (for debugging).
-   */
-  constructor(public name: string) {
-    console.log("[CONTEXT] %s", name)
-    // this.event.setMaxListeners(100)
-    super();
-  }
-
-  /**
-   * The current data held by the context.
-   */
-  public data: Partial<D> = {}
-  /**
-   * Registry for tracking active keys (for duplicate detection).
-   */
-  public registry = new Set<string>()
-
-  /**
-   * Publish a value to the context and notify subscribers if it changed.
-   * @param key - The key to update.
-   * @param value - The new value.
-   */
-  public publish(key: keyof D, value: D[typeof key] | undefined) {
-
-    if (value != this.data[key]) {
-      this.data[key] = value
-      let event = new DataEvent(key, value);
-      this.dispatchEvent(event);
-      this.dispatchEvent(new ChangeEvent(event))
-    }
-  }
-
-  /**
-   * Subscribe to changes for a specific key in the context.
-   * @param key - The key to subscribe to.
-   * @param _listener - Callback invoked with the new value.
-   * @returns Unsubscribe function.
-   */
-  public subscribe(key: keyof D, _listener: (e: D[typeof key] | undefined) => void) {
-
-    const listener = ({ event, value }: any) => {
-      _listener(value)
-    }
-
-    this.addEventListener(String(key), listener)
-    // console.log("listenerCount:", String(key), this.event.listenerCount(String(key)))
-
-    if (key in this.data) _listener(this.data[key])
-
-    return () => this.removeEventListener(String(key), listener)
-  }
-
-  public subscribeAll(_listener: (changeKey: keyof D, newData: Partial<D>) => void) {
-
-    const listener = (event: any) => {
-      if (event instanceof ChangeEvent) {
-        const { value: data } = event
-        _listener(data.event as any as keyof D, this.data)
-      }
-    }
-
-    this.addEventListener(String(CHANGE_EVENT), listener)
-
-    return () => this.removeEventListener(String(CHANGE_EVENT), listener)
-
-  }
-
-}
-
-/**
- * Get or create a memoized Context instance by name.
- * @param name - The context name.
- * @returns The Context instance.
- */
-export const getContext = memoize((name: string) => new Context<any>(name))
-
-/**
- * Type alias for a function that returns a Context instance.
- */
-export type getContext<D> = (e: string) => Context<D>
-
-/**
- * React hook to get a typed Context instance by name.
- * @param name - The context name.
- * @returns The Context instance.
- */
-export const useDataContext = <D>(name: string = "noname") => {
-
-  const ctx = useMemo(() => getContext(name), [name])
-
-  return ctx as any as Context<D>
-}
-
-/**
- * Internal hook to check for duplicate registry entries in a context.
- * Warns if any of the provided names are already registered.
- * @param ctx - The context instance.
- * @param names - Names to check and register.
- */
-const useRegistryChecker = (ctx: Context<any> | undefined, ...names: string[]) => {
-  // return;
-  const stack = new Error("[ctx] useRegistryChecker failed " + JSON.stringify({ names, ctx: ctx?.name ?? 'undefined' }))
-
-  useEffect(
-    () => {
-      if (ctx) {
-        if (names.some(name => ctx.registry.has(name))) {
-          console.error(stack)
-        }
-        names.forEach(e => ctx.registry.add(e))
-
-        // console.debug("[ctx] %s%s add datasource", componentId, ctx.name, names)
-        return () => {
-          // console.debug("[ctx] %s %s remove datasource", componentId, ctx.name, names)
-
-          names.forEach(e => ctx.registry.delete(e))
-        }
-      }
-    },
-    [ctx, names.length]
-  )
-
-}
-
-/**
- * React hook to publish a value to the context when it changes.
- * @param ctx - The context instance.
- * @param key - The key to update.
- * @param value - The new value.
- */
-export const useDataSource = <D, K extends keyof D>(ctx: Context<D> | undefined, key: K, value: D[K] | undefined) => {
-  //@ts-check
-  useEffect(() => {
-    if (ctx && ctx.data[key] != value) {
-
-      ctx.publish(key, value)
-    }
-  }, [key, value, ctx])
-
-  useRegistryChecker(ctx, key as any)
-}
-
-/**
- * React hook to subscribe to a context value, with optional debounce.
- * @param ctx - The context instance.
- * @param key - The key to subscribe to.
- * @param debounceTime - Debounce time in ms (default 0).
- * @returns The current value for the key.
- */
-export const useDataSubscribe = <D, K extends keyof D>(ctx: Context<D> | undefined, key: K, debounceTime = 0): D[K] | undefined => {
-  //@ts-check
-  const [{ value }, setState] = useState(() => ({ value: ctx?.data?.[key] }))
-
-  useEffect(() => {
-    if (ctx) {
-      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 () => {
-        unsub()
-      }
-    }
-  }, [key, ctx])
-
-  return ctx?.data[key]
-}
-
-/**
- * React hook to subscribe to a context value and transform it before returning.
- * @param ctx - The context instance.
- * @param key - The key to subscribe to.
- * @param transform - Function to transform the value.
- * @returns The transformed value.
- */
-export const useDataSubscribeWithTransform = <D, K extends keyof D, E>(ctx: Context<D> | undefined, key: K, transform: (e: D[K] | undefined) => E): E => {
-  const [, setState] = useState(0)
-  const result = useMemo(
-    () => transform(ctx?.data[key]),
-    [transform, ctx?.data[key]]
-  )
-
-  useEffect(() => {
-    if (ctx) {
-      let preValue = result
-      let callback = () => {
-        let newValue = transform(ctx.data[key])
-        if (newValue != preValue) {
-          preValue = newValue;
-          setState(e => e + 1)
-        };
-      }
-      let unsub = ctx.subscribe(key, callback)
-      callback();
-      return () => unsub()
-    }
-  }, [key, ctx])
-
-  return result
-}
-
-/**
- * React hook to publish multiple values to the context.
- * @param ctx - The context instance.
- * @param entries - Array of [key, value] pairs to update.
- */
-export const useDataSourceMultiple = <D, T extends readonly (keyof D)[]>(
-  ctx: Context<D> | undefined,
-  ...entries: { -readonly [P in keyof T]: [T[P], D[T[P]]] }
-) => {
-  //@ts-check
-  useEffect(() => {
-    if (ctx) {
-      for (let [key, value] of entries) {
-        ctx.data[key] != value && ctx.publish(key, value)
-      }
-    }
-  }, [ctx, useArrayHash(entries.flat())])
-
-  useRegistryChecker(ctx, ...entries.map(e => e[0]) as any)
-
-}
-
-/**
- * React hook to subscribe to multiple context values.
- * @param ctx - The context instance.
- * @param keys - Keys to subscribe to.
- * @returns An object with the current values for the keys.
- */
-export const useDataSubscribeMultiple = <D, K extends (keyof D)[]>(
-  ctx: Context<D> | undefined,
-  ...keys: K
-): { [i in keyof K]: D[K[i]] | undefined } => {
-  const [, setCounter] = useState(0)
-
-  const returnValues = keys.map(key => ctx?.data?.[key])
-
-  useEffect(() => {
-    if (ctx) {
-      let prevValues = returnValues
-      const callback = debounce(() => {
-        let currentValues = keys.map(key => ctx?.data?.[key])
-        if (keys.some((key, i) => prevValues[i] != currentValues[i])) {
-          // console.log("DIFF", keys.filter((e, i) => prevValues[i] != currentValues[i]))
-          prevValues = currentValues
-          setCounter(c => c + 1)
-        }
-      }, 1)
-
-      let handles = keys.map(key => ctx.subscribe(key, callback))
-
-      let firstCall = setTimeout(callback, 1);
-
-      return () => {
-        clearTimeout(firstCall)
-        callback.cancel();
-        handles.forEach(unsub => unsub())
-      }
-
-    }
-  }, [ctx, ...keys])
-
-
-  return Object
-    .fromEntries(keys.map((key, index) => [key, returnValues[index]])) as any
-}
-
-/**
- * React hook to subscribe to multiple context values with throttling.
- * @param ctx - The context instance.
- * @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 = 50,
-  ...keys: K
-): { [i in keyof K]: D[K[i]] | undefined } => {
-  //@ts-check
-  const [, setCounter] = useState(0)
-
-  const returnValues = keys.map(key => ctx?.data?.[key])
-
-  useEffect(() => {
-    if (ctx) {
-      let prevValues = returnValues
-      const callback = debounce(() => {
-        let currentValues = keys.map(key => ctx?.data?.[key])
-        if (keys.some((key, i) => prevValues[i] != currentValues[i])) {
-          prevValues = currentValues
-          setCounter(c => c + 1)
-        }
-      }, debounceTime)
-
-      let handles = keys.map(key => ctx.subscribe(key, callback))
-
-      let firstCall = setTimeout(callback, 1);
-
-      return () => {
-        clearTimeout(firstCall)
-        callback.cancel();
-        handles.forEach(unsub => unsub())
-      }
-
-    }
-  }, [ctx, ...keys])
-
-  return returnValues as any
-}
-
-
-

package/src/state-utils/useArrayHash.ts

@@ -1,53 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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/useQuickSubscribe.ts

@@ -1,110 +0,0 @@
-
-import { debounce } from "./utils";
-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.
- * 
- * @template D - The shape of the context data.
- * @param {Context<D> | undefined} ctx - The context object containing data and a subscribe method.
- * @returns {Partial<D>} A proxy object that mirrors the context data, automatically subscribing to properties as they are accessed.
- *
- * This hook tracks which properties of the context data are accessed by the component and subscribes to updates for only those properties.
- * When any of the subscribed properties change, the hook triggers a re-render. Subscriptions are managed and cleaned up automatically
- * when the component unmounts or the context changes. This approach minimizes unnecessary re-renders and resource usage by only
- * subscribing to the data that the component actually uses.
- *
- * Example usage:
- *   const {name} = useQuickSubscribe(userContext);
- *   // Accessing name will subscribe to changes in 'name' only
- *   return <div>{name}</div>;
- */
-
-export const useQuickSubscribe = <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;
-
-
-};

package/src/state-utils/useRefValue.ts

@@ -1,8 +0,0 @@
-import { useMemo } from "react"
-
-
-export const useRefValue = <T extends object>(e: T) => {
-  const ref = useMemo(() => ({ ...e }), [])
-  Object.assign(ref, e)
-  return ref
-}

package/src/state-utils/utils.ts

@@ -1,43 +0,0 @@
-// Debounce function
-export function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  wait: number
-): ((...args: Parameters<T>) => void) & { cancel: any } {
-  let timeout: ReturnType<typeof setTimeout> | null = null;
-
-  let fn: Function & { cancel: any } = function (...args: Parameters<T>): void {
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    timeout = setTimeout(() => {
-      func(...args);
-    }, wait);
-  } as any;
-
-  fn.cancel = () => clearTimeout(timeout!);
-
-  return fn as any;
-}
-
-// Memoize function
-export function memoize<T extends (...args: any[]) => any>(
-  func: T
-): ((...args: Parameters<T>) => ReturnType<T>) & { cache: Map<string, ReturnType<T>> } {
-  
-  const cache = new Map<string, ReturnType<T>>();
-
-  const cachedFunc: any = function (...args: Parameters<T>): ReturnType<T> {
-    const key = JSON.stringify(args);
-    if (cache.has(key)) {
-      return cache.get(key) as ReturnType<T>;
-    }
-    const result = func(...args);
-    cache.set(key, result);
-    return result;
-  }
-
-  cachedFunc.cache = cache;
-
-  return cachedFunc
-}
-

package/src/vite-env.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*?raw' {
-  const content: string
-  export default content
-}

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "lib": [
-      "dom",
-      "esnext"
-    ],
-    "moduleResolution": "node",
-    "jsx": "react-jsx",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "outDir": "./dist",
-    "declaration": true,
-    "sourceMap": true
-  },
-  "include": [
-    "vite/client",
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}

package/vite.config.dev.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-export default defineConfig({
-  base: '/react-state-custom/',
-  plugins: [
-    react(),
-  ],
-  build: {
-    target: 'esnext',
-    outDir: 'demo-dist',
-  },
-  server: {
-    port: 3000,
-  },
-});

package/vite.config.ts

@@ -1,39 +0,0 @@
-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: {
-      entry: 'src/index.ts',
-      name: 'RState',
-      fileName: (format) => `index.${format}.js`,
-      formats: ['es', 'umd'],
-    },
-    rollupOptions: {
-      // Ensure to externalize deps that shouldn't be bundled
-      external: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
-      output: {
-        globals: {
-          'react': 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
-    sourcemap: true
-  },
-  server: {
-    port: 3000,
-  },
-});