react-state-custom 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-state-custom",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "The `react-state-custom` library provides a powerful set of tools for managing shared state in React applications",
   "type": "module",
   "main": "dist/index.umd.js",
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "vite --config vite.config.dev.ts",
     "test": "echo \"No tests specified\" && exit 0"
   },
   "keywords": [
@@ -36,6 +36,8 @@
     "@types/react": "19",
     "@types/react-dom": "19",
     "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.3",
     "vite": "7",
     "vite-bundle-analyzer": "^1.1.0",

package/src/DevTool.css

@@ -0,0 +1,192 @@
+: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;
+    }
+}

package/src/DevTool.tsx

@@ -0,0 +1,19 @@
+import "./devTool.css"
+import { useState } from "react"
+import { DevToolState } from "./DevToolState";
+
+
+export const DevToolContainer = ({ toggleButton = "[x]", ...props }) => {
+    const [active, setActive] = useState(false);
+    return <>
+        <button className="react-state-dev-btn" data-active={active} onClick={() => setActive(true)} {...props}>
+            {props?.children ?? "Toggle Dev Tool"}
+        </button>
+        <div className="react-state-dev-container" data-active={active}>
+            <button className="close-btn" onClick={() => setActive(false)}>
+                [x]
+            </button>
+            <DevToolState />
+        </div>
+    </>
+}

package/src/DevToolState.tsx

@@ -0,0 +1,316 @@
+import { getContext } from "./state-utils/ctx"
+import React, { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import "./devTool.css"
+
+const cache = getContext.cache
+
+export const DevToolState = ({ }) => {
+    const [selectedKey, setKey] = useState("")
+    return <div className="main-panel">
+        <div className="state-list">
+            {[...cache.keys()]
+                .map(e => JSON.parse(e)?.[0])
+                .filter(e => e != "auto-ctx")
+                .map(e => <div
+                    className="state-key"
+                    data-active={e == selectedKey}
+                    onClick={() => setKey(e)}>{e}
+                </div>)}
+        </div>
+        <div className="state-view" >
+            <StateView dataKey={selectedKey} key={selectedKey} />
+        </div>
+    </div>
+}
+
+export const StateView: React.FC<{ dataKey: string }> = ({ dataKey }) => {
+    const ctx = getContext(dataKey)
+    const [currentData, setCurrentData] = useState({ ...ctx?.data })
+
+    useEffect(() => {
+        let checkState = { ...currentData }
+        let interval = setInterval(() => {
+
+            let isDiff = false
+
+            for (let i in ctx?.data) {
+                if (ctx?.data?.[i] != checkState[i]) {
+                    checkState[i] = ctx?.data?.[i];
+                    isDiff = true;
+                }
+            }
+            if (isDiff) setCurrentData({ ...checkState })
+        }, 200)
+
+        return () => clearInterval(interval)
+    }, [ctx])
+
+    return <JSONView
+        value={currentData}
+        name="ROOT"
+        expandLevel={1}
+        style={{  }}
+    />
+}
+
+type JSONViewProps = {
+    value: any,
+    path?: string[],
+    name?: string,
+    expandRoot: Record<string, boolean>,
+    setExpandRoot: Dispatch<SetStateAction<Record<string, boolean>>>,
+    expandLevel: number | boolean,
+    currentField?: any
+    currentType?: any,
+    isGrouped?: boolean,
+}
+
+
+const splitArray = <T,>(array: T[], max = 10) => {
+    return Object.fromEntries(
+        new Array(Math.ceil((array.length + 1) / max))
+            .fill(0)
+            .map((_, i, a) => new Array(i == a.length - 1 ? array.length % max : max)
+                .fill(0)
+                .map((_, j) => i * max + j)
+            )
+            .filter(e => e.length)
+            .map(keys => [`${keys.at(0)}..${keys.at(-1)}`, Object.fromEntries(
+                keys.map(k => [k, array[k]])
+            )])
+    )
+}
+
+
+const splitObject = (object: any, max = 10) => {
+    const keys = Object.keys(object);
+    return Object.fromEntries(
+        Array(Math.ceil((keys.length + 1) / max))
+            .fill(0)
+            .map((_, i, a) => new Array(i == a.length - 1 ? keys.length % max : max)
+                .fill(0)
+                .map((_, j) => i * max + j)
+            )
+            .filter(e => e.length)
+            .map((e) => e.map(i => keys.at(i)))
+            .map(sortedKeys => [
+                `${sortedKeys.at(0)?.slice(0, 15)}...${sortedKeys.at(-1)?.slice(0, 15)}`,
+                Object.fromEntries(sortedKeys.map(key => [key, object[key as any]]))]
+            )
+    )
+}
+
+
+const useExpandState = ({ path, expandLevel, expandRoot, setExpandRoot }: JSONViewProps) => {
+    const expandKeys = path?.join("%") ?? "";
+
+    const defaultExpand = typeof expandLevel == "boolean"
+        ? expandLevel
+        : (typeof expandLevel == 'number' && expandLevel > 0)
+
+    const isExpand = useMemo(
+        () => expandRoot?.[expandKeys] ?? defaultExpand,
+        [expandRoot?.[expandKeys], expandKeys]
+    )
+
+    const setExpand = useCallback(
+        (value: boolean) => setExpandRoot((r: object) => ({ ...r, [expandKeys]: value })),
+        [expandRoot, expandKeys]
+    )
+
+    return { isExpand, setExpand }
+
+}
+
+const ChangeFlashWrappper: React.FC<React.ComponentProps<'div'> & { value: any, deepCompare?: boolean }> = ({ value, deepCompare = false, ...rest }) => {
+
+    const ref = useRef<HTMLElement>(undefined)
+    const refValue = useRef(value);
+
+    useEffect(() => {
+        if (ref.current) {
+            let isDiff = deepCompare && value && refValue.current
+                ? (
+                    Object.keys(value).length != Object.keys(refValue.current).length
+                    || Object.keys(value).some(key => value[key] != refValue.current[key])
+                ) : value != refValue.current
+            if (isDiff) {
+                refValue.current = value;
+                ref.current.classList.add('jv-updated');
+                let t = requestAnimationFrame(() => ref.current?.classList.remove('jv-updated'));
+                return () => cancelAnimationFrame(t)
+            }
+        }
+
+    }, [value, deepCompare, ref])
+
+    return <div  {...rest} ref={ref as any} />
+}
+
+const JSONViewObj: React.FC<JSONViewProps> = (props) => {
+
+    const {
+        currentField,
+        value, path = [], name, expandRoot, setExpandRoot,
+        expandLevel,
+        isGrouped,
+    } = props
+
+    const isArray = value instanceof Array
+
+    const { isExpand, setExpand } = useExpandState(props)
+
+    const childExpandLevel = typeof expandLevel == "number" ? expandLevel - 1 : expandLevel
+
+    const shouldGroup = Object.entries(value).length > 10
+
+    const groupedChilds = useMemo(
+        () => shouldGroup
+            ? (value instanceof Array) ? splitArray(value, 10) : splitObject(value, 10)
+            : value,
+        [value, shouldGroup, splitArray]
+    )
+
+    return (isExpand) ? <ChangeFlashWrappper className="jv-field jv-field-obj" value={value} deepCompare={isGrouped}>
+        {currentField && <div>
+            <div onClick={() => setExpand(false)}>
+                <span className="jv-name">{currentField}</span>
+                <span>:</span>
+                <span>[-]</span>
+                <span className="jv-type">{Object.keys(value).length} items </span>
+                <span> {isArray ? "[" : "{"} </span>
+            </div>
+        </div>}
+        <div className="jv-value">
+            {Object
+                .entries(groupedChilds)
+                .map(([k, v], index) => <JSONViewCurr
+                    {...{
+                        name, expandRoot, setExpandRoot,
+                        expandLevel: childExpandLevel,
+                        value: v,
+                        isGrouped: shouldGroup,
+                    }}
+                    key={[...path, shouldGroup ? index : k].join("%")}
+                    path={[...path, k]}
+                />)}
+        </div>
+        {currentField && <div>
+            <span> {isArray ? "]" : "}"} </span>
+        </div>}
+    </ChangeFlashWrappper> : <ChangeFlashWrappper className="jv-field jv-field-obj" value={value} deepCompare={isGrouped}>
+        <div>
+            <div onClick={() => setExpand(true)}>
+                <span className="jv-name">{currentField}</span>
+                {currentField && <span>:</span>}
+                {currentField && <span>[+]</span>}
+                <span className="jv-type">{Object.keys(value).length} items </span>
+                <span> {isArray ? "[" : "{"} </span>
+                <span> ... </span>
+                <span> {isArray ? "]" : "}"} </span>
+            </div>
+        </div>
+    </ChangeFlashWrappper>
+
+}
+
+const StringViewObj: React.FC<JSONViewProps> = (props) => {
+
+    const { currentType, currentField, value, } = props
+
+    const { isExpand, setExpand } = useExpandState(props)
+
+    const useExpand = String(value).length > 50
+
+    const renderString = useExpand && !isExpand
+        ? `${String(value).slice(0, 15)}...${String(value).slice(-15, -1)}`
+        : String(value)
+
+    return <ChangeFlashWrappper
+        value={props.value}
+        className={`jv-field jv-field-${currentType} ${useExpand ? 'jv-cursor' : ''}`}
+        onClick={() => setExpand(!isExpand)}>
+        <span className="jv-name">{currentField}</span>
+        <span>:</span>
+        <span className="jv-type">{currentType}, lng={value?.length}</span>
+        <span className="jv-value">"{renderString}"</span>
+        <span>,</span>
+    </ChangeFlashWrappper>
+}
+
+
+const FunctionViewObj: React.FC<JSONViewProps> = (props) => {
+
+    const { currentType, currentField, value, } = props
+
+    const { isExpand, setExpand } = useExpandState(props)
+
+    const useExpand = String(value).length > 50
+
+    const renderString = useExpand && !isExpand
+        ? `${String(value).slice(0, 15)}...${String(value).slice(-15, -1)}`
+        : String(value)
+
+    return <ChangeFlashWrappper
+        value={props.value}
+        className={`jv-field jv-field-${currentType} ${useExpand ? 'jv-cursor' : ''}`}
+        onClick={() => setExpand(!isExpand)}>
+        <span className="jv-name">{currentField}</span>
+        <span>:</span>
+        <span className="jv-type">{currentType}</span>
+        <span className="jv-value">"{renderString}"</span>
+        <span>,</span>
+    </ChangeFlashWrappper>
+}
+
+const DefaultValueView: React.FC<JSONViewProps> = (props) => {
+
+    const { currentType, currentField, value, } = props
+
+    return <ChangeFlashWrappper
+        value={props.value}
+        className={`jv-field jv-field-${currentType}`}>
+        <span className="jv-name">{currentField}</span>
+        <span>:</span>
+        <span className="jv-type">{currentType}</span>
+        <span className="jv-value">{String(value)}</span>
+        <span>,</span>
+    </ChangeFlashWrappper>
+}
+
+const JSONViewCurr: React.FC<Omit<JSONViewProps, 'currentField'>> = (props) => {
+
+    const { value, path = [], name } = props
+
+    const currentField = path.at(-1) ?? name ?? undefined;
+
+    const currentType = typeof value
+
+    switch (currentType) {
+        case "object":
+            return <JSONViewObj {...props} {...{ currentField, currentType }} />
+        case "string":
+            return <StringViewObj {...props} {...{ currentField, currentType }} />
+        case "function":
+            return <FunctionViewObj {...props} {...{ currentField, currentType }} />
+        case "number":
+        case "boolean":
+        case "bigint":
+        case "symbol":
+        case "undefined":
+        default:
+            return <DefaultValueView  {...props} {...{ currentField, currentType }} />
+    }
+}
+
+export const JSONView: React.FC<{ value: any, name?: string, style?: any, expandLevel?: number | boolean }> = ({ value, name, style, expandLevel = false }) => {
+
+    const [expandRoot, setExpandRoot] = useState<Record<string, boolean>>({})
+
+    return <div className="jv-root" style={style}>
+        <JSONViewCurr
+            path={[]}
+            {...{ name, value, expandRoot, setExpandRoot, expandLevel }}
+        />
+    </div>
+}

package/src/Test.tsx

@@ -0,0 +1,90 @@
+
+import { createAutoCtx } from './state-utils/createAutoCtx'
+import { createRootCtx } from './state-utils/createRootCtx'
+import { useCallback, useState } from 'react'
+import { useQuickSubscribe } from './state-utils/useQuickSubscribe'
+
+const { useCtxState: useDevCtx } = createAutoCtx(
+    createRootCtx(
+        "devState",
+        ({ }) => {
+            const [state, setState] = useState(0)
+            return {
+                state,
+                increase: useCallback(() => setState(f => f + 1), [setState]),
+                decrease: useCallback(() => setState(f => f - 1), [setState]),
+            }
+        }
+    )
+)
+
+
+
+const { useCtxState: useDevAdvanceCtx } = createAutoCtx(
+    createRootCtx(
+        "devADVState",
+        ({ id }: { id: string }) => {
+            const [counter, setCounter] = useState(0)
+            const [state, setState] = useState(0)
+            const [history, setHistory] = useState([state])
+            const [historyMap, setHistoryMap] = useState({})
+
+            return {
+                id,
+                state,
+                bifIntState: BigInt(state),
+                computed: id + state,
+                history,
+                counter,
+                historyMap,
+                testSrt: "aiwioj ".repeat(counter * 3),
+                increase: useCallback(() => setState(f => {
+                    setCounter(c => {
+                        setHistory(h => [...h, f]);
+                        setHistoryMap(m => ({ ...m, ['state--' + c]: { f, d: Date.now() } }));
+                        return c + 1
+                    })
+                    return f + 1
+                }), [setState]),
+                decrease: useCallback(() => setState(f => {
+                    setCounter(c => {
+                        setHistory(h => [...h, f]);
+                        setHistoryMap(m => ({ ...m, ['state--' + c]: { f, d: Date.now() } }));
+                        return c + 1
+                    })
+                    return f - 1
+                }), [setState])
+            }
+        }
+    )
+)
+
+
+export const Test = ({ }) => {
+    const { state, decrease, increase } = useQuickSubscribe(useDevCtx({}))
+    const { state: advState, computed: advComputed, increase: advIncreaser, decrease: advDecrise } = useQuickSubscribe(useDevAdvanceCtx({ id: "name" }))
+
+    useDevAdvanceCtx({ id: "2123132" })
+    useDevAdvanceCtx({ id: "dfgfd" })
+    useDevAdvanceCtx({ id: "443" })
+    useDevAdvanceCtx({ id: "w3sef" })
+    useDevAdvanceCtx({ id: "erere" })
+    useDevAdvanceCtx({ id: "sdfdsf" })
+    useDevAdvanceCtx({ id: "asdasd" })
+    useDevAdvanceCtx({ id: "66666" })
+    useDevAdvanceCtx({ id: "dddd" })
+    useDevAdvanceCtx({ id: "eeeee" })
+    useDevAdvanceCtx({ id: "44444" })
+    useDevAdvanceCtx({ id: ";;;;" })
+
+    return <div>
+        <hr />
+        <button onClick={increase}>[+]</button>
+        <span>{state}</span>
+        <button onClick={decrease}>[-]</button>
+        <hr />
+        <button onClick={advIncreaser}>[+]</button>
+        <span>{advState}:{advComputed}:</span>
+        <button onClick={advDecrise}>[-]</button>
+    </div>
+}

package/src/dev.tsx

@@ -0,0 +1,14 @@
+import { createRoot } from 'react-dom/client'
+import { DevToolContainer } from './DevTool'
+import { AutoRootCtx, createAutoCtx } from './state-utils/createAutoCtx'
+import { Test } from './Test'
+
+
+
+createRoot(document.getElementById('root')!).render(
+  <>
+    <DevToolContainer />
+    <Test/>
+    <AutoRootCtx/>
+  </>
+)

package/src/index.ts

@@ -18,4 +18,4 @@ export { useArrayHash } from "./state-utils/useArrayHash"
 
 export { useQuickSubscribe } from "./state-utils/useQuickSubscribe"
 
-// export { OBJView } from "./components/ObjectView"
+export { DevToolContainer } from "./DevTool"

package/src/state-utils/utils.ts

@@ -12,7 +12,7 @@ export function debounce<T extends (...args: any[]) => any>(
     timeout = setTimeout(() => {
       func(...args);
     }, wait);
-  } as any; 
+  } as any;
 
   fn.cancel = () => clearTimeout(timeout!);
 
@@ -22,10 +22,11 @@ export function debounce<T extends (...args: any[]) => any>(
 // Memoize function
 export function memoize<T extends (...args: any[]) => any>(
   func: T
-): (...args: Parameters<T>) => ReturnType<T> {
+): ((...args: Parameters<T>) => ReturnType<T>) & { cache: Map<string, ReturnType<T>> } {
+  
   const cache = new Map<string, ReturnType<T>>();
 
-  return function (...args: Parameters<T>): 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>;
@@ -33,6 +34,10 @@ export function memoize<T extends (...args: any[]) => any>(
     const result = func(...args);
     cache.set(key, result);
     return result;
-  };
+  }
+
+  cachedFunc.cache = cache;
+
+  return cachedFunc
 }