@hrnec06/react_utils 1.5.1 → 1.7.0

package/src/components/Debugger/parser/ValueFunction.tsx

@@ -1,10 +1,18 @@
+import { forwardRef, useImperativeHandle } from "react";
+import { ParseValueRef } from "./DebugParser";
+
 interface ValueFunctionProps {
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 	value: Function
 }
-export default function ValueFunction({
+const ValueFunction = forwardRef<ParseValueRef, ValueFunctionProps>(({
 	value
-}: ValueFunctionProps) {
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "Function",
+		copyValue: value.toString()
+	}), [value]);
+
 	const argsMatch = value.toString().match(/^[^(]*\(\s*([^)]*)\)/);
 	let args: string = '';
 
@@ -12,14 +20,18 @@ export default function ValueFunction({
 		args = argsMatch[1]!;
 	}
 
+	const displayValue = `${value.name}(${args})`;
+
 	return (
 		<>
 			<span className="text-[#f2824a]">
 				{'ƒ '}
 			</span>
 			<span className="text-white">
-				{`${value.name}(${args})`}
+				{displayValue}
 			</span>
 		</>
-	)
-}
+	);
+});
+
+export default ValueFunction;

package/src/components/Debugger/parser/ValueNumber.tsx

@@ -1,12 +1,22 @@
+import { forwardRef, useImperativeHandle } from "react"
+import { ParseValueRef } from "./DebugParser";
+
 interface ValueNumberProps {
 	value: number | bigint | string
 }
-export default function ValueNumber({
+const ValueNumber = forwardRef<ParseValueRef, ValueNumberProps>(({
 	value
-}: ValueNumberProps) {
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "Number",
+		copyValue: value.toString()
+	}), [value]);
+
 	return (
 		<span className="text-[#a7ce9b]">
 			{value}
 		</span>
-	)
-}
+	);
+});
+
+export default ValueNumber;

package/src/components/Debugger/parser/ValueObject.tsx

@@ -1,25 +1,41 @@
-import React, { useLayoutEffect, useMemo, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import useDebugger from "../DebuggerContext";
-import { entries, keys } from "@hrnec06/util";
+import { entries, keys, Nullable } from "@hrnec06/util";
 import { Char_Bracket, Char_Colon, Char_Comma, Chevron_Toggle } from "../DebuggerSymbols";
-import ParseValue from "./DebugParser";
+import ParseValue, { DebugCTXMProvider, ParseValueRef } from "./DebugParser";
+import useSyncRef from "../../../hooks/useSyncRef";
+import { useCTXMListener } from "../../ContextMenu/ContextMenuCtx";
 
 interface ValueObjectProps {
 	value: object,
 	path: string[],
 	defaultExpanded?: boolean
 }
-export default function ValueObject({
+const ValueObject = forwardRef<ParseValueRef, ValueObjectProps>(({
 	value,
 	path,
 	defaultExpanded = false
-}: ValueObjectProps) {
+}, ref) => {
 	const debug = useDebugger();
 
 	const [expanded, setExpanded] = useState(defaultExpanded);
 
 	const objectEntries = entries(value);
 
+	useImperativeHandle(ref, () => ({
+		name: `Object {${objectEntries.length}}`,
+		copyValue: JSON.stringify(value),
+		menu: [
+			{
+				id: "open-toggle",
+				label: expanded ? "Collapse" : "Expand",
+				onClick: () => {
+					setExpanded(!expanded);
+				}
+			}
+		]
+	}), [value, expanded]);
+
 	const collapsedPreview = useMemo(() => {
 		const children: React.ReactNode[] = [];
 		const keyList = keys(value);
@@ -48,6 +64,8 @@ export default function ValueObject({
 		setExpanded(state);
 	}
 
+	const ctxmListener = useCTXMListener();
+
 	return (
 		<>
 			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
@@ -65,16 +83,13 @@ export default function ValueObject({
 							{
 								objectEntries.map(([key, value], ix) => {
 									return (
-										<li key={ix}>
-											<ValueObjectKey text={key} />
-											<Char_Colon />
-
-											<ParseValue value={value} path={[...path, `${key}`]} />
-
-											{ix < objectEntries.length - 1 && (
-												<Char_Comma />
-											)}
-										</li>
+										<ValueObjectEntry
+											key={ix}
+											entryKey={key}
+											value={value}
+											path={path}
+											isLast={ix === objectEntries.length - 1}
+										/>
 									);
 								})
 							}
@@ -97,7 +112,7 @@ export default function ValueObject({
 			}
 		</>
 	);
-}
+});
 
 interface ValueObjectKeyProps {
 	text: string,
@@ -110,4 +125,33 @@ function ValueObjectKey({
 			{text}
 		</span>
 	)
-}
+}
+
+interface ValueObjectEntryProps {
+	entryKey: string,
+	value: unknown,
+	path: string[],
+	isLast: boolean
+}
+function ValueObjectEntry({
+	entryKey: key,
+	value,
+	path,
+	isLast
+}: ValueObjectEntryProps)
+{
+	return (
+		<li>
+			<ParseValue value={value} path={[...path, `${key}`]}>
+				<ValueObjectKey text={key} />
+				<Char_Colon />
+			</ParseValue>
+
+			{!isLast && (
+				<Char_Comma />
+			)}
+		</li>
+	)
+}
+
+export default ValueObject;

package/src/components/Debugger/parser/ValueString.tsx

@@ -1,16 +1,25 @@
 import { padString } from "@hrnec06/util"
+import { forwardRef, useImperativeHandle } from "react"
+import { ParseValueRef } from "./DebugParser";
 
 interface ValueStringProps {
 	value: string,
 	noEncase?: boolean
 }
-export default function ValueString({
+const ValueString = forwardRef<ParseValueRef, ValueStringProps>(({
 	value,
 	noEncase = false
-}: ValueStringProps) {
+}, ref) => {
+	useImperativeHandle(ref, () => ({
+		name: "String",
+		copyValue: value
+	}), [value]);
+
 	return (
 		<span className="text-[#ce9178]">
 			{padString(value, noEncase ? 0 : 1, '"')}
 		</span>
-	)
-}
+	);
+});
+
+export default ValueString;

package/src/components/ResizeableBox/ResizeableBox.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useEffect } from "react";
 import DragAreas from "./DragAreas";
 import useSignal from "../../hooks/useSignal";
-import useUpdatedRef from "../../hooks/useUpdatedRef";
+import useUpdatedRef from "../../hooks/useLatestRef";
 import useListener from "../../hooks/useListener";
 import { ResizeableBoxContext } from "./ResizeableBoxContext";
 import RB from "./ResizeableBox.types";

package/src/hooks/useDebounce.ts

@@ -0,0 +1,26 @@
+import { useCallback, useLayoutEffect, useState } from "react";
+
+export default function useDebounce<T>(value: T, delay: number, updateOnUnmount: boolean = false): T
+{
+	const [debounced, setValue] = useState(value);
+
+	const update = useCallback((value: T) => setValue(value), []);
+
+	useLayoutEffect(() => {
+		let updated = false;
+
+		const t = setTimeout(() => {
+			update(value);
+			updated = true;
+		}, delay);
+
+		return () => {
+			clearTimeout(t);
+
+			if (!updated && updateOnUnmount)
+				update(value);
+		}
+	}, [value]);
+
+	return debounced;
+}

package/src/hooks/useDefaultValue.ts

@@ -0,0 +1,8 @@
+import { useState } from "react";
+
+export default function useDefaultValue<T>(value: T | (() => T)): T
+{
+	const [_] = useState(value);
+
+	return _;
+}

package/src/hooks/useEfficientRef.ts

@@ -1,8 +1,9 @@
 import { useMemo, useRef } from "react";
+import useDefaultValue from "./useDefaultValue";
 
 export default function useEfficientRef<T>(callback: () => T): React.RefObject<T>
 {
-	const defaultValue = useMemo(() => callback(), []);
+	const value = useDefaultValue(callback);
 
-	return useRef<T>(defaultValue);
+	return useRef<T>(value);
 }

package/src/hooks/useEvent.ts

@@ -0,0 +1,15 @@
+import { useCallback } from "react";
+import useLatestRef from "./useLatestRef";
+
+export default function useEvent<
+	F extends (...args: any[]) => any,
+	P extends any[] = Parameters<F>,
+	R = ReturnType<F>,
+> (
+	cb: (...args: P) => R
+)
+{
+	const cache = useLatestRef(cb);
+
+	return useCallback((...args: P) => cache.current(...args), [cache]);
+}

package/src/hooks/useLatestRef.ts

@@ -0,0 +1,12 @@
+import { useLayoutEffect, useRef } from "react";
+import useUpdateEffect from "./useUpdateEffect";
+
+export default function useLatestRef<V>(value: V): React.RefObject<V> {
+	const ref = useRef(value);
+
+	useLayoutEffect(() => {
+		ref.current = value;
+	});
+
+	return ref;
+}

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,134 @@
+import { disposables, Listenable, Nullable, Optional, ReactUtils } from "@hrnec06/util";
+import useSignal, { Signal } from "./useSignal";
+import useUpdateEffect from "./useUpdateEffect";
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import useDisposables from "./useDisposables";
+import useDefaultValue from "./useDefaultValue";
+import z from "zod";
+
+type StateValue<T> = T | StateCallback<T>;
+type StateCallback<T> = (value: T) => T;
+
+function isStateCallback<T>(v: StateValue<T>): v is StateCallback<T> {
+	return typeof v === "function";
+}
+
+function encodeValue(value: unknown): Optional<string>
+{
+	if (value === undefined)
+		return undefined;
+
+	try
+	{
+		const encoded = JSON.stringify(value);
+
+		return encoded;
+	}
+	catch (error)
+	{
+		console.error(error);
+
+		return undefined;
+	}
+}
+
+function decodeValue(value: Nullable<string>): unknown
+{
+	if (value === null)
+		return undefined;
+
+	try
+	{
+		const decoded = JSON.parse(value);
+
+		return decoded;
+	}
+	catch (error)
+	{
+		console.error(error);
+
+		return undefined;
+	}
+}
+
+class StorageEventEmitter extends Listenable<{
+	storage: void
+}> {
+	constructor
+	(
+		private readonly key: string
+	)
+	{
+		super();
+	}
+
+	public setLocalStorage = (value: string) => {
+		localStorage.setItem(this.key, value);
+
+		this.triggerListener("storage");
+	}
+
+	public removeLocalStorage = () => {
+		localStorage.removeItem(this.key);
+
+		this.triggerListener("storage");
+	}
+
+	public getLocalStorage = () => {
+		return localStorage.getItem(this.key);
+	}
+
+	public subscribe = (onStoreChange: () => void) => {
+		const id = this.on("storage", onStoreChange);
+
+		return () => {
+			this.off("storage", id);
+		}
+	}
+}
+
+export default function useLocalStorage<T>(key: string, defaultValue: T, schema?: z.ZodType): ReactUtils.State<T>
+{
+	const storageManager = useMemo(() => new StorageEventEmitter(key), [key]);
+	const [currentValue, setCurrentValue] = useState(defaultValue);
+
+	const store = useSyncExternalStore(
+		storageManager.subscribe,
+		storageManager.getLocalStorage,
+	);
+
+	useEffect(() => {
+		const decoded = decodeValue(store);
+
+		if (decoded === undefined || ((schema && !schema.safeParse(decoded).success) || (typeof decoded !== typeof defaultValue)))
+		{
+			storageManager.removeLocalStorage();
+
+			setCurrentValue(defaultValue);
+			return;
+		}
+
+		setCurrentValue(decoded as T);
+	}, [store]);
+
+	const setState = useCallback((value: StateValue<T>) => {
+		setCurrentValue(prevCurrentValue => {
+			const newValue = isStateCallback(value) ? value(prevCurrentValue) : value;
+
+			const encoded = encodeValue(newValue);
+
+			if (encoded === undefined)
+			{
+				storageManager.removeLocalStorage();
+			}
+			else
+			{
+				storageManager.setLocalStorage(encoded);
+			}
+
+			return newValue;
+		});
+	}, [key, currentValue]);
+
+	return [currentValue, setState];
+}

package/src/hooks/useSyncRef.ts

@@ -0,0 +1,17 @@
+import { Nullable } from '@hrnec06/util'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import useEvent from './useEvent';
+
+export default function useSyncRef<T>(
+	ref: React.RefObject<T>,
+	state: (value: T) => void
+)
+{
+	const syncRefs = useEvent((value: T) => {
+		ref.current = value;
+		
+		state(value);
+	});
+
+	return syncRefs;
+}

package/src/hooks/useTransition.ts

@@ -1,5 +1,5 @@
 import { disposables, mapRecord, Nullable } from "@hrnec06/util";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 import useFlags from "./useFlags";
 import useDisposables from "./useDisposables";
 
@@ -235,6 +235,7 @@ function prepareTransition(
 	if (inFlight?.current)
 	{
 		prepare();
+		
 		return;
 	}
 

package/src/index.ts

@@ -1,15 +1,15 @@
+import useDefaultValue from "./hooks/useDefaultValue";
+import useDisposables from "./hooks/useDisposables";
 import useKeyListener from "./hooks/useKeyListener";
 import useListener from "./hooks/useListener";
-import useUpdatedRef from "./hooks/useUpdatedRef";
 import useUpdateEffect from "./hooks/useUpdateEffect";
 import useWindowSize from "./hooks/useWindowSize";
 import useEfficientRef from "./hooks/useEfficientRef";
-import useEfficientState from "./hooks/useEfficientState";
 import useUUID from "./hooks/useUUID";
 import useFlags from "./hooks/useFlags";
-import useDisposables from "./hooks/useDisposables";
 import useNamespacedId from "./hooks/useNamespacedId";
 import useTransition from "./hooks/useTransition";
+import useLocalStorage from "./hooks/useLocalStorage";
 
 import useSignal, { Signal } from "./hooks/useSignal";
 import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
@@ -19,20 +19,30 @@ import * as Debugger from './components/Debugger/Debugger';
 import ResizeableBox from "./components/ResizeableBox/ResizeableBox";
 import Dialog from "./components/Dialog/Dialog";
 
+import ContextMenu from "./components/ContextMenu/ContextMenu";
+
 import * as util from './lib/utils';
+import useDebounce from "./hooks/useDebounce";
+import useEvent from "./hooks/useEvent";
+import useLatestRef from "./hooks/useLatestRef";
+import useSyncRef from "./hooks/useSyncRef";
 
 
 export {
 	// Hooks
+	useDebounce,
+	useDefaultValue,
 	useDisposables,
 	useEfficientRef,
-	useEfficientState,
+	useEvent,
 	useFlags,
 	useKeyListener,
+	useLatestRef,
 	useListener,
+	useLocalStorage,
 	useNamespacedId,
+	useSyncRef,
 	useTransition,
-	useUpdatedRef,
 	useUpdateEffect,
 	useUUID,
 	useWindowSize,
@@ -47,6 +57,7 @@ export {
 	Debugger,
 	ResizeableBox,
 	Dialog,
+	ContextMenu,
 
 	// Utilities
 	util,

package/src/lib/errors/ContextError.ts

@@ -0,0 +1,11 @@
+import { capitalizeString } from '@hrnec06/util';
+
+export default class ContextError extends Error
+{
+	constructor(context: string)
+	{
+		const name = capitalizeString(context.toLowerCase());
+		
+		super(`use${name}() may be used only within ${name}Context.Provider!`)
+	}
+}

package/src/hooks/useEfficientState.ts

@@ -1,9 +0,0 @@
-import { ReactUtils } from "@hrnec06/util";
-import { useMemo, useState } from "react";
-
-export default function useEfficientState<T>(callback: () => T): [T, ReactUtils.SetState<T>]
-{
-	const defaultValue = useMemo(() => callback(), []);
-
-	return useState<T>(defaultValue);
-}

package/src/hooks/useUpdatedRef.ts

@@ -1,12 +0,0 @@
-import { useRef } from "react";
-import useUpdateEffect from "./useUpdateEffect";
-
-export default function useUpdatedRef<V>(value: V): React.RefObject<V> {
-	const ref = useRef(value);
-
-	useUpdateEffect(() => {
-		ref.current = value;
-	}, [value]);
-
-	return ref;
-}