react-state-custom 1.0.22 → 1.0.24

package/src/examples/timer/state.ts

@@ -0,0 +1,43 @@
+import { createRootCtx, createAutoCtx } from '../../index'
+import { useCallback, useEffect, useState } from 'react'
+
+export const { useCtxState: useTimerCtx } = createAutoCtx(
+    createRootCtx(
+        "timer",
+        ({ timerId }: { timerId: string }) => {
+            const [milliseconds, setMilliseconds] = useState(0)
+            const [isRunning, setIsRunning] = useState(false)
+
+            useEffect(() => {
+                if (!isRunning) return
+                const interval = setInterval(() => {
+                    setMilliseconds(ms => ms + 10)
+                }, 10)
+                return () => clearInterval(interval)
+            }, [isRunning])
+
+            const totalSeconds = Math.floor(milliseconds / 1000)
+            const minutes = Math.floor(totalSeconds / 60)
+            const seconds = totalSeconds % 60
+            const ms = Math.floor((milliseconds % 1000) / 10)
+            const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`
+            
+            const start = useCallback(() => setIsRunning(true), [])
+            const pause = useCallback(() => setIsRunning(false), [])
+            const reset = useCallback(() => {
+                setIsRunning(false)
+                setMilliseconds(0)
+            }, [])
+
+            return {
+                timerId,
+                milliseconds,
+                isRunning,
+                formattedTime,
+                start,
+                pause,
+                reset,
+            }
+        }
+    )
+)

package/src/examples/timer/view.tsx

@@ -0,0 +1,26 @@
+import { useQuickSubscribe } from '../../index'
+import { useTimerCtx } from './state'
+
+export const TimerExample = ({ timerId = "main-timer" }: { timerId?: string }) => {
+    const { formattedTime, isRunning, start, pause, reset } = 
+        useQuickSubscribe(useTimerCtx({ timerId }))
+
+    return (
+        <div style={{ padding: '1rem', border: '1px solid #ccc', marginBottom: '1rem' }}>
+            <h3>Timer ({timerId})</h3>
+            <div style={{ fontSize: '2rem', fontFamily: 'monospace', marginBottom: '1rem' }}>
+                {formattedTime}
+            </div>
+            <div style={{ display: 'flex', gap: '0.5rem' }}>
+                {!isRunning ? (
+                    <button onClick={start}>Start</button>
+                ) : (
+                    <button onClick={pause}>Pause</button>
+                )}
+                <button onClick={reset}>Reset</button>
+            </div>
+        </div>
+    )
+}
+
+export default TimerExample

package/src/examples/todo/app.tsx

@@ -0,0 +1,16 @@
+import { TodoExample } from './view'
+
+export default function App() {
+    return (
+        <>
+            {/* <AutoRootCtx/> */}
+            <TodoExample listId="main" />
+            <TodoExample listId="work" />
+            <p style={{ color: '#666', fontSize: '0.875rem' }}>
+                Multiple independent todo lists showing how contexts can be scoped by parameters (listId).
+                Each list maintains its own state.
+            </p>
+            {/* <DevToolContainer Component={DataView} /> */}
+        </>
+    )
+}

package/src/examples/todo/index.ts

@@ -0,0 +1,3 @@
+export { TodoExample, TodoExample as default } from './view'
+export { useTodoCtx } from './state'
+export type { Todo } from './state'

package/src/examples/todo/state.ts

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

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

@@ -18,4 +18,5 @@ export { useArrayHash } from "./state-utils/useArrayHash"
 
 export { useQuickSubscribe } from "./state-utils/useQuickSubscribe"
 
-export { DevToolContainer } from "./DevTool"
+export { DevToolContainer } from "./dev-tool/DevTool"
+export type { DataViewComponent } from "./dev-tool/DataViewComponent"

package/src/state-utils/ctx.ts

@@ -4,12 +4,22 @@ import { useArrayHash } from "./useArrayHash"
 
 
 
-class DataEvent extends Event {
+const CHANGE_EVENT = "@--change-event"
+
+class DataEvent<D> extends Event {
   constructor(
-    public event: string,
-    public value: any
+    public event: keyof D,
+    public value: D[typeof event] | undefined
   ) {
-    super(event);
+    super(String(event));
+  }
+}
+
+class ChangeEvent<D> extends Event {
+  constructor(
+    public value: DataEvent<D>
+  ) {
+    super(CHANGE_EVENT, value);
   }
 }
 
@@ -28,8 +38,6 @@ export class Context<D> extends EventTarget {
     super();
   }
 
-  // private event = new EventEmitter()
-
   /**
    * The current data held by the context.
    */
@@ -48,9 +56,9 @@ export class Context<D> extends EventTarget {
 
     if (value != this.data[key]) {
       this.data[key] = value
-      // console.count("[COUNT] " + String(key))
-      // this.event.emit(String(key), { value })
-      this.dispatchEvent(new DataEvent(String(key), value))
+      let event = new DataEvent(key, value);
+      this.dispatchEvent(event);
+      this.dispatchEvent(new ChangeEvent(event))
     }
   }
 
@@ -71,7 +79,22 @@ export class Context<D> extends EventTarget {
 
     if (key in this.data) _listener(this.data[key])
 
-    return () => (this.removeEventListener(String(key), listener), undefined)
+    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)
+
   }
 
 }
@@ -237,10 +260,10 @@ export const useDataSourceMultiple = <D, T extends readonly (keyof D)[]>(
  * @param keys - Keys to subscribe to.
  * @returns An object with the current values for the keys.
  */
-export const useDataSubscribeMultiple = <D, K extends keyof D>(
+export const useDataSubscribeMultiple = <D, K extends (keyof D)[]>(
   ctx: Context<D> | undefined,
-  ...keys: K[]
-): Pick<D, K> => {
+  ...keys: K
+): { [i in keyof K]: D[K[i]] | undefined } => {
   const [, setCounter] = useState(0)
 
   const returnValues = keys.map(key => ctx?.data?.[key])

package/src/vite-env.d.ts

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

package/tsconfig.json

@@ -2,7 +2,10 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "lib": ["dom", "esnext"],
+    "lib": [
+      "dom",
+      "esnext"
+    ],
     "moduleResolution": "node",
     "jsx": "react-jsx",
     "strict": true,
@@ -13,6 +16,12 @@
     "declaration": true,
     "sourceMap": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "include": [
+    "vite/client",
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }

package/vite.config.dev.ts

@@ -2,10 +2,15 @@ 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/dist/DevTool.d.ts

@@ -1,4 +0,0 @@
-export declare const DevToolContainer: ({ toggleButton, ...props }: {
-    [x: string]: any;
-    toggleButton?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/DevToolState.d.ts

@@ -1,15 +0,0 @@
-import { default as React } from 'react';
-export declare const DevToolState: ({}: {}) => import("react/jsx-runtime").JSX.Element;
-export declare const StateView: React.FC<{
-    dataKey: string;
-}>;
-export declare const ChangeFlashWrappper: React.FC<React.ComponentProps<'div'> & {
-    value: any;
-    deepCompare?: boolean;
-}>;
-export declare const JSONView: React.FC<{
-    value: any;
-    name?: string;
-    style?: any;
-    expandLevel?: number | boolean;
-}>;

package/dist/Test.d.ts

@@ -1 +0,0 @@
-export declare const Test: ({}: {}) => import("react/jsx-runtime").JSX.Element;

package/src/DevTool.css

@@ -1,192 +0,0 @@
-:root {
-    color-scheme: light dark;
-}
-
-.react-state-dev-btn {
-    position: fixed;
-    bottom: 30px;
-    right: 30px;
-    transition: opacity 0.3s;
-
-    &[data-active="true"] {
-        opacity: 0;
-        pointer-events: none;
-    }
-}
-
-
-.react-state-dev-container {
-    --color: light-dark(#333b3c, #efefec);
-    --bg-color: light-dark(#f9f9f9, #212121);
-    align-items: stretch;
-    font-size: 14px;
-    color: var(--color);
-    background-color: var(--bg-color);
-    position: fixed;
-    bottom: 0px;
-    right: 0px;
-    left: 0px;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s, transform 0.3s;
-    transform: translateY(100%);
-    padding: 0.5em;
-
-    &[data-active="true"] {
-        opacity: 1;
-        pointer-events: all;
-        transform: translateY(0%);
-    }
-
-    .close-btn {
-        position: absolute;
-        top: -20px;
-        right: 0px;
-    }
-
-    .main-panel {
-        display: flex;
-        flex-direction: row;
-        gap: 1em;
-        padding: 1em;
-        resize: vertical;
-        min-height: 200px;
-        max-height: 60vh;
-        background-color: #8882;
-        overflow: hidden;
-        justify-items: stretch;
-
-        .state-list {
-            max-width: 50%;
-            min-width: 100px;
-            overflow: auto;
-            align-self: stretch;
-            resize: horizontal;
-
-            .state-key {
-                cursor: pointer;
-                padding: 0.2em;
-                border-bottom: solid 1px #8884;
-                font-family: monospace;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-
-                &[data-active="true"] {
-                    background-color: light-dark(#0003, #fff3);
-                }
-            }
-
-        }
-
-        .state-view {
-            flex: 1;
-            overflow: auto;
-            border-inline-start: solid 1px #8888;;
-            padding-inline-start: 1em;
-        }
-    }
-}
-
-.jv-root {
-    font-family: monospace;
-    user-select: none;
-
-    .jv-name {
-        opacity: 0.8;
-    }
-
-    .jv-type {
-        opacity: 0.5;
-        font-size: smaller;
-        padding-inline: 0.4em;
-    }
-
-    .jv-cursor {
-        cursor: pointer;
-    }
-
-    .jv-field {
-        margin-block: 1px;
-    }
-
-    .jv-field .jv-field {
-        transition: border-color 1s, background-color 1s;
-        border-color: #0000;
-        background-color: #0000;
-        border-width: 1px;
-        border-style: solid;
-
-        &.jv-updated {
-            transition: border-color 0.00s, background-color 0.00s;
-            border-color: #f00;
-            background-color: #f001;
-        }
-    }
-
-    .jv-field-obj>.jv-value {
-        padding-inline-start: 1em;
-        margin-inline-start: 0.6em;
-        border-inline-start: solid 1px #8888;
-    }
-
-    .jv-field-obj>:first-child>:first-child>.jv-name {
-        cursor: pointer;
-    }
-
-
-    .jv-field-obj {
-        --lv: 0;
-
-        .jv-field-obj {
-            --lv: 1;
-
-            .jv-field-obj {
-                --lv: 2;
-
-                .jv-field-obj {
-                    --lv: 3;
-
-                    .jv-field-obj {
-                        --lv: 4;
-                    }
-                }
-            }
-        }
-    }
-
-    .jv-field-obj>:first-child {
-        container-type: scroll-state;
-        position: sticky;
-        top: calc(var(--lv, 0) * 1.25em);
-        z-index: calc(10 - var(--lv, 0));
-
-        @container scroll-state(stuck: top) {
-            >div {
-                background-color: var(--bg-color);
-                border-bottom: solid 1px #8884;
-                font-weight: bold;
-            }
-
-        }
-    }
-
-
-
-
-    .jv-field-string> :is(.jv-type, .jv-value) {
-        color: orange;
-    }
-
-    .jv-field-number> :is(.jv-type, .jv-value) {
-        color: red;
-    }
-
-    .jv-field-boolean> :is(.jv-type, .jv-value) {
-        color: #08f;
-    }
-
-    .jv-field-function> :is(.jv-type, .jv-value) {
-        color: #08f;
-    }
-}