react-state-custom 1.0.24 → 1.0.26

package/src/examples/todo/state.ts

@@ -1,54 +0,0 @@
-import { createRootCtx, createAutoCtx } from '../../index'
-import { useCallback, useState } from 'react'
-
-export interface Todo {
-    id: string
-    text: string
-    completed: boolean
-}
-
-export const { useCtxState: useTodoCtx } = createAutoCtx(
-    createRootCtx(
-        "todos",
-        ({ listId }: { listId: string }) => {
-            const [todos, setTodos] = useState<Todo[]>([])
-            const [input, setInput] = useState('')
-
-            const addTodo = useCallback(() => {
-                if (input.trim()) {
-                    setTodos(prev => [...prev, {
-                        id: Date.now().toString(),
-                        text: input.trim(),
-                        completed: false
-                    }])
-                    setInput('')
-                }
-            }, [input])
-
-            const toggleTodo = useCallback((id: string) => {
-                setTodos(prev => prev.map(t =>
-                    t.id === id ? { ...t, completed: !t.completed } : t
-                ))
-            }, [])
-
-            const removeTodo = useCallback((id: string) => {
-                setTodos(prev => prev.filter(t => t.id !== id))
-            }, [])
-
-            const clearCompleted = useCallback(() => {
-                setTodos(prev => prev.filter(t => !t.completed))
-            }, [])
-
-            return {
-                listId,
-                todos,
-                input,
-                setInput,
-                addTodo,
-                toggleTodo,
-                removeTodo,
-                clearCompleted,
-            }
-        }
-    )
-)

package/src/examples/todo/view.tsx

@@ -1,47 +0,0 @@
-import { useQuickSubscribe } from '../../index'
-import { useTodoCtx } from './state'
-
-export const TodoExample = ({ listId = "main" }: { listId?: string }) => {
-    const { todos, input, setInput, addTodo, toggleTodo, removeTodo, clearCompleted } =
-        useQuickSubscribe(useTodoCtx({ listId }))
-
-    return (
-        <div style={{ padding: '1rem', border: '1px solid #ccc', marginBottom: '1rem' }}>
-            <h3>Todo List ({listId})</h3>
-            <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
-                <input
-                    value={input ?? ''}
-                    onChange={(e) => setInput?.(e.target.value)}
-                    onKeyDown={(e) => e.key === 'Enter' && addTodo?.()}
-                    placeholder="Add todo..."
-                    style={{ flex: 1, padding: '0.25rem' }}
-                />
-                <button onClick={addTodo}>Add</button>
-            </div>
-            <ul style={{ listStyle: 'none', padding: 0 }}>
-                {todos?.map(todo => (
-                    <li key={todo.id} style={{ display: 'flex', gap: '0.5rem', marginBottom: '0.5rem' }}>
-                        <input
-                            type="checkbox"
-                            checked={todo.completed}
-                            onChange={() => toggleTodo?.(todo.id)}
-                        />
-                        <span style={{
-                            flex: 1,
-                            textDecoration: todo.completed ? 'line-through' : 'none',
-                            opacity: todo.completed ? 0.6 : 1
-                        }}>
-                            {todo.text}
-                        </span>
-                        <button onClick={() => removeTodo?.(todo.id)}>×</button>
-                    </li>
-                ))}
-            </ul>
-            {todos?.some(t => t.completed) && (
-                <button onClick={clearCompleted}>Clear Completed</button>
-            )}
-        </div>
-    )
-}
-
-export default TodoExample

package/src/index.ts

@@ -1,22 +0,0 @@
-// export { default as MyComponent } from './components/MyComponent';
-
-export {
-  Context,
-  getContext,
-  useDataContext,
-  useDataSource,
-  useDataSourceMultiple,
-  useDataSubscribe,
-  useDataSubscribeMultiple,
-  useDataSubscribeMultipleWithDebounce,
-  useDataSubscribeWithTransform
-} from "./state-utils/ctx"
-
-export { createRootCtx } from "./state-utils/createRootCtx"
-export { AutoRootCtx, createAutoCtx } from "./state-utils/createAutoCtx"
-export { useArrayHash } from "./state-utils/useArrayHash"
-
-export { useQuickSubscribe } from "./state-utils/useQuickSubscribe"
-
-export { DevToolContainer } from "./dev-tool/DevTool"
-export type { DataViewComponent } from "./dev-tool/DataViewComponent"

package/src/state-utils/createAutoCtx.tsx

@@ -1,191 +0,0 @@
-import { useEffect, useState, Fragment, useCallback } from "react"
-import { useDataContext, useDataSourceMultiple, useDataSubscribe, type Context } from "./ctx"
-import { createRootCtx } from "./createRootCtx"
-
-
-
-
-
-
-const weakmapName = (function () {
-  const weakmap = new WeakMap()
-
-  return (e: any): string => {
-    let result = weakmap.get(e);
-    if (!result) {
-      weakmap.set(e, result = (e?.name ?? "") + Math.random().toString())
-    }
-    return result
-  }
-})()
-
-
-const resolveName = (e: any) => [
-  ...Object
-    .entries(e ?? {})
-    .sort((e, f) => e[0].localeCompare(f[0]))
-    .flat()
-].join("-")
-
-/**
- * Inline docs: createAutoCtx + AutoRootCtx
- *
- * Quick start
- * 1) Mount <AutoRootCtx /> ONCE near your app root. Provide a Wrapper that acts like an ErrorBoundary to isolate and log errors.
- *    Example: <AutoRootCtx Wrapper={MyErrorBoundary} />
- *
- * 2) Create auto contexts from your root context factories:
- * ```
- *    const { useCtxState: useTestCtxState } = createAutoCtx(createRootCtx('test-state', stateFn))
- *    const { useCtxState: useOtherCtxState } = createAutoCtx(createRootCtx('other-state', otherFn))
- * ```
- * 3) Use them in components:
- * ```
- *    const ctx = useTestCtxState({ userId })
- *    const { property1, property2 } = useDataSubscribeMultiple(ctx,'property1','property2')
- *    // No need to mount the Root returned by createRootCtx directly — AutoRootCtx manages it for you.
- * ```
- * Notes
- * - AutoRootCtx must be mounted before any useCtxState hooks created by createAutoCtx run.
- * - Wrapper should be an ErrorBoundary-like component that simply renders {children}; no extra providers or layout required.
- * - For each unique params object (by stable stringified key), AutoRootCtx ensures a corresponding Root instance is rendered.
- */
-
-export const AutoRootCtx = ({ Wrapper = Fragment }) => {
-
-  const ctx = useDataContext<any>("auto-ctx")
-
-
-  const [state, setState] = useState<Record<string, { Component: React.FC, subState: Record<string, { params: any, counter: number }> }>>({})
-
-
-  const subscribeRoot = useCallback(
-    (Comp: any, params: any) => {
-      const weakName = weakmapName(Comp);
-      const key = resolveName(params);
-
-      setState(({
-        [weakName]: {
-          Component = Comp,
-          subState: {
-            [key]: preState = { params, counter: 0 },
-            ...subState
-          } = {}
-        } = {},
-        ...state
-      }) => ({
-        ...state,
-        [weakName]: {
-          Component,
-          subState: {
-            ...subState,
-            [key]: {
-              ...preState,
-              counter: preState.counter + 1,
-            },
-          },
-        }
-      }));
-
-      return () => setState(({
-        [weakName]: {
-          Component = Comp,
-          subState: {
-            [key]: preState = { params, counter: 0 },
-            ...subState
-          } = {}
-        } = {},
-        ...state
-      }) => ({
-        ...state,
-        [weakName]: {
-          Component,
-          subState: {
-            ...subState,
-            ...preState.counter > 1 ? {
-              [key]: {
-                ...preState,
-                counter: preState.counter - 1,
-              },
-            } : {},
-          },
-        }
-      }))
-
-    },
-    []
-  )
-
-  useDataSourceMultiple(ctx,
-    ["subscribe", subscribeRoot],
-    ["state", state],
-  )
-
-
-  return <>
-    {Object.entries(state)
-      .flatMap(([k1, { Component, subState }]) => Object
-        .entries(subState)
-        .map(([k2, { counter, params }]) => ({ key: k1 + k2, Component, params, counter }))
-        .filter(e => e.counter > 0)
-        .map(({ key, params, Component }) => <Wrapper key={key} >
-          <Component {...params} />
-        </Wrapper>)
-      )
-    }
-  </>
-
-}
-
-/**
- * createAutoCtx
- *
- * Bridges a Root context (from createRootCtx) to the global AutoRootCtx renderer.
- * You do NOT mount the Root component yourself — just mount <AutoRootCtx /> once at the app root.
- *
- * Usage: 
- * ```
- *    const { useCtxState: useTestCtxState } = createAutoCtx(createRootCtx(
- *      'test-state', 
- *      stateFn
- *    ))
- *    const { useCtxState: useOtherCtxState } = createAutoCtx(createRootCtx(
- *      'other-state', 
- *      otherFn
- *    ))
- * ```
- * 
- * Then inside components:
- * ```
- *   const ctxState = useTestCtxState({ any: 'params' })
- * ```
- * AutoRootCtx will subscribe/unsubscribe instances per unique params and render the appropriate Root under the hood.
- */
-export const createAutoCtx = <U extends object, V extends object,>(
-  { Root, useCtxState, useCtxStateStrict, resolveCtxName }: ReturnType<typeof createRootCtx<U, V>>,
-  unmountTime = 0
-) => {
-
-  return {
-
-    useCtxState: (e: U): Context<V> => {
-
-      const ctxName = resolveCtxName(e)
-
-      const subscribe = useDataSubscribe(useDataContext<any>("auto-ctx"), "subscribe")
-
-      useEffect(() => {
-        // Subscribe this component to an AutoRootCtx-managed Root instance keyed by e.
-        // AutoRootCtx handles instance ref-counting and cleanup on unmount.
-        if (unmountTime == 0) {
-          return subscribe?.(Root, e)
-        } else {
-          let unsub = subscribe?.(Root, e)
-          return () => setTimeout(unsub, unmountTime)
-        }
-      }, [subscribe, ctxName])
-
-      return useDataContext<V>(ctxName)
-    }
-  }
-}

package/src/state-utils/createRootCtx.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useMemo } from "react"
-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) => [
-    name,
-    ...Object
-      .entries(e ?? {})
-      .sort((e, f) => e[0].localeCompare(f[0]))
-      .flat()
-  ].join("-")
-
-  let ctxMountedCheck = new Set<string>()
-
-
-  const RootState: React.FC<U> = (e: U) => {
-    const state = useFn(e)
-    const ctxName = resolveCtxName(e)
-    const ctx = useDataContext<V>(ctxName)
-    const stack = useMemo(() => new Error().stack, [])
-
-    useDataSourceMultiple(
-      ctx,
-      ...Object.entries(state) as any
-    )
-
-    useEffect(() => {
-      if (ctxMountedCheck.has(ctxName)) {
-        const err = new Error("RootContext " + ctxName + " are mounted more than once")
-        err.stack = stack;
-        throw err
-      }
-      ctxMountedCheck.add(ctxName)
-      return () => { ctxMountedCheck.delete(ctxName) };
-    })
-
-    return <></>
-  }
-
-  RootState.displayName = `State[${useFn?.name??'??'}]`
-
-  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)
-
-      const stack = useMemo(() => new Error().stack, [])
-
-      useEffect(() => {
-        if (!ctxMountedCheck.has(ctxName)) {
-          const err = new Error("RootContext [" + ctxName + "] is not mounted")
-          err.stack = stack;
-          throw err
-        }
-      }, [ctxName])
-
-      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)
-
-      const stack = useMemo(() => new Error().stack, [])
-
-      useEffect(() => {
-        if (!ctxMountedCheck.has(ctxName)) {
-          const err = new Error("RootContext [" + ctxName + "] is not mounted")
-          err.stack = stack;
-          let timeout = setTimeout(() => console.error(err), 1000)
-          return () => clearTimeout(timeout)
-        }
-      }, [ctxMountedCheck.has(ctxName)])
-
-      return useDataContext<V>(ctxName)
-    }
-  }
-}