@hrnec06/react_utils 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.ts"

package/src/components/Debugger/Debugger.tsx

@@ -6,9 +6,13 @@ import clsx from "clsx";
 import ScrollBar from "./DebuggerScrollBar";
 import ParseValue from "./parser/DebugParser";
 import useKeyListener from "../../hooks/useKeyListener";
-import useUpdateEffect from "../../hooks/useUpdateEffect";
 import useUpdatedRef from "../../hooks/useUpdatedRef";
 import ResizeableBox from "../ResizeableBox/ResizeableBox";
+import useNamespacedId from "../../hooks/useNamespacedId";
+import useLocalStorage from "../../hooks/useLocalStorage";
+import z from "zod";
+
+const DEBUG_NAMESPACE = "debugger";
 
 interface DebugProps {
 	value: unknown,
@@ -29,24 +33,28 @@ function Debug({
 	openRoot = true
 }: DebugProps) {
 	// Config
-	const LS_POS_KEY = 'debugger_position';
-	const LS_SIZE_KEY = 'debugger_size';
-	const LS_EXPAND_KEY = 'debugger_expanded';
+
+	const id = useNamespacedId(DEBUG_NAMESPACE);
+
+	const { LS_POS_KEY, LS_SIZE_KEY, LS_EXPAND_KEY } = useMemo(() => ({
+		LS_POS_KEY: id + ".position",
+		LS_SIZE_KEY: id + ".size",
+		LS_EXPAND_KEY: id + ".expanded"
+	}), [id]);
 
 	// Keybinds
 	const f9_pressed = useKeyListener('F9');
 
-	// Position
-	const [position, setPosition] = useState<Vector2>([0, 0]);
+	// Position and resize
+	const [position, setPosition] = useLocalStorage<Vector2>(LS_POS_KEY, [0, 0], z.tuple([z.number(), z.number()]));
+	const [windowSize, setWindowSize] = useLocalStorage<Vector2>(LS_SIZE_KEY, [500, 500], z.tuple([z.number(), z.number()]));
+
 	const [grab, setGrab] = useState<Nullable<{
 		windowOrigin: Vector2,
 		positionOrigin: Vector2
 	}>>(null);
 	const [grabOffset, setGrabOffset] = useState<Nullable<Vector2>>(null);
 
-	// Resize
-	const [windowSize, setWindowSize] = useState<Vector2>([500, 500]);
-
 	// Scroll
 	const [scrollHeight, setScrollHeight] = useState(0);
 	const [containerHeight, setContainerHeight] = useState(0);
@@ -98,64 +106,6 @@ function Debug({
 
 	const isScrollable = useMemo(() => scrollHeight > 0, [scrollHeight]);
 
-	// Load saved position
-	useEffect(() => {
-		try {
-			const saved_position = localStorage.getItem(LS_POS_KEY);
-			if (saved_position) {
-				const [v1, v2] = saved_position.split(',');
-
-				if (v1 === undefined || v2 === undefined)
-					throw new Error('Invalid vector: ' + saved_position);
-
-				const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
-
-				if (isNaN(v1_p) || isNaN(v2_p))
-					throw new Error('Invalid vector values: ' + saved_position);
-
-				setPosition([v1_p, v2_p]);
-			}
-		} catch (error) {
-			console.error(`Error loading saved position: `, error);
-
-			localStorage.removeItem(LS_POS_KEY);
-		}
-	}, []);
-
-	// Load saved size
-	useEffect(() => {
-		try {
-			const saved_size = localStorage.getItem(LS_SIZE_KEY);
-			if (saved_size) {
-				const [v1, v2] = saved_size.split(',');
-
-				if (v1 === undefined || v2 === undefined)
-					throw new Error('Invalid vector: ' + saved_size);
-
-				const [v1_p, v2_p] = [parseInt(v1), parseInt(v2)];
-
-				if (isNaN(v1_p) || isNaN(v2_p))
-					throw new Error('Invalid vector values: ' + saved_size);
-
-				setWindowSize([v1_p, v2_p]);
-			}
-		} catch (error) {
-			console.error(`Error loading saved size: `, error);
-
-			localStorage.removeItem(LS_POS_KEY);
-		}
-	}, []);
-
-	// Save saved position
-	useUpdateEffect(() => {
-		localStorage.setItem(LS_POS_KEY, `${position[0]},${position[1]}`);
-	}, [position]);
-
-	// Save saved size
-	useUpdateEffect(() => {
-		localStorage.setItem(LS_SIZE_KEY, `${windowSize[0]},${windowSize[1]}`);
-	}, [windowSize]);
-
 	// Reset position
 	useEffect(() => {
 		if (!f9_pressed)
@@ -291,7 +241,7 @@ function Debug({
 								<div
 									ref={containerRef}
 									onMouseDown={handleMouseDown}
-									className=" cursor-grab w-full"
+									className="cursor-grab w-full"
 									style={{
 										transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
 									}}

package/src/components/Debugger/DebuggerTerminal.tsx

@@ -3,6 +3,7 @@ import { assert, Optional, ReactUtils } from "@hrnec06/util";
 import useUpdateEffect from "../../hooks/useUpdateEffect";
 import useNamespacedId from "../../hooks/useNamespacedId";
 import z from "zod";
+import useLocalStorage from "../../hooks/useLocalStorage";
 
 const TERMINAL_NAMESPACE = "terminal";
 
@@ -73,11 +74,6 @@ class Terminal
 		this.history = history;
 	}
 
-	public getLsKey(): string
-	{
-		return "terminal." + this.id;
-	}
-
 	public clear(): Terminal
 	{
 		this.history[1]([]);
@@ -214,37 +210,6 @@ function TerminalContextProvider({
 		</TerminalContext.Provider>
 	)
 }
-
-/**
- * Returns the default history for a terminal
- */
-function getDefaultHistory(terminal: Terminal)
-{
-	try
-	{
-		const savedValue = localStorage.getItem(terminal.getLsKey());
-
-		const savedValueJSON = JSON.parse(savedValue ?? "[]");
-
-		const schema = z.array(z.object({
-			value: z.any(),
-			role: z.enum(LogRole),
-			type: z.enum(LogType)
-		}));
-
-		const parsed = schema.parse(savedValueJSON);
-
-		return parsed;
-	}
-	catch (error)
-	{
-		localStorage.removeItem(terminal.getLsKey());
-		console.error("Terminal data parse failed: ", error);
-
-		return [];
-	}
-}
-
 /**
  * Recursively browses the contexts to find a matching terminal
  */
@@ -304,22 +269,26 @@ function useTerminal(
 {
 	const id = useNamespacedId(TERMINAL_NAMESPACE);
 
-	const history = useState<LogItem[]>([]);
+	const history = useLocalStorage<LogItem[]>(
+		"terminal." + id,
+		[],
+		z.array(z.object({
+			value: z.any(),
+			role: z.enum(LogRole),
+			type: z.enum(LogType)
+		}))
+	);
+
+	// const history = useState<LogItem[]>(storage);
 	const inputHistory = useState<string[]>([]);
 
 	const terminal = useMemo(() => {
 		return new Terminal(id, name, history, inputHistory, onInput);
 	}, [name, history, onInput]);
 
-	useEffect(() => {
-		const def = getDefaultHistory(terminal);
-
-		history[1](def);
-	}, []);
-
-	useUpdateEffect(() => {
-		localStorage.setItem(terminal.getLsKey(), JSON.stringify(history[0]));
-	}, [history]);
+	// useUpdateEffect(() => {
+	// 	setStorage(history[0]);
+	// }, [history]);
 
 	return terminal;
 }

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/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/index.ts

@@ -1,12 +1,16 @@
+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 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";
@@ -18,17 +22,22 @@ import Dialog from "./components/Dialog/Dialog";
 
 import * as util from './lib/utils';
 
+
 export {
 	// Hooks
+	useDefaultValue,
+	useDisposables,
+	useEfficientRef,
+	useFlags,
 	useKeyListener,
 	useListener,
+	useNamespacedId,
+	useTransition,
 	useUpdatedRef,
 	useUpdateEffect,
-	useWindowSize,
-	useEfficientRef,
-	useEfficientState,
 	useUUID,
-	useFlags,
+	useWindowSize,
+	useLocalStorage,
 
 	// Signals
 	useSignal,

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);
-}