@variocube/app-ui 1.16.0 → 1.16.2

package/esm/storage/useStorage.js

@@ -14,7 +14,18 @@ export function useStorage(key, defaultValue, storageType) {
         storage.addChangeListener(key, updateStateFromStorage);
         return () => storage.removeChangeListener(key, updateStateFromStorage);
     }, [key, updateStateFromStorage]);
-    const typedValue = useMemo(() => JSON.parse(value), [value]);
+    const typedValue = useMemo(() => {
+        if (value === undefined) {
+            return defaultValueSerialized !== undefined ? JSON.parse(defaultValueSerialized) : undefined;
+        }
+        try {
+            return JSON.parse(value);
+        }
+        catch (e) {
+            console.warn(`Failed to parse storage value for key "${key}", falling back to default value.`, e);
+            return defaultValueSerialized !== undefined ? JSON.parse(defaultValueSerialized) : undefined;
+        }
+    }, [value, key, defaultValueSerialized]);
     const setTypedValue = useCallback((newValue) => {
         const value = JSON.stringify(newValue);
         if (value != defaultValueSerialized) {

package/esm/storage/useStorage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStorage.js","sourceRoot":"","sources":["../../src/storage/useStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACtE,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAGlC,MAAM,UAAU,UAAU,CAAI,GAAW,EAAE,YAAe,EAAE,WAAyB;IACpF,MAAM,sBAAsB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAE3F,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;QACpD,OAAO,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,sBAAsB,CAAC;IAC/C,CAAC,EAAE,CAAC,GAAG,EAAE,sBAAsB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAEzD,MAAM,sBAAsB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,eAAe,CAAC,GAAG,EAAE;QACpB,OAAO,CAAC,iBAAiB,CAAC,GAAG,EAAE,sBAAsB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,oBAAoB,CAAC,GAAG,EAAE,sBAAsB,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,GAAG,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAElC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE7D,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,QAAW,EAAE,EAAE;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACvC,IAAI,KAAK,IAAI,sBAAsB,EAAE,CAAC;YACrC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;QAClC,CAAC;IACF,CAAC,EAAE,CAAC,GAAG,EAAE,sBAAsB,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/C,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;AACpC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAI,GAAW,EAAE,YAAe;IAC9D,OAAO,UAAU,CAAC,GAAG,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAI,GAAW,EAAE,YAAe;IAChE,OAAO,UAAU,CAAC,GAAG,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;AACjD,CAAC"}
+{"version":3,"file":"useStorage.js","sourceRoot":"","sources":["../../src/storage/useStorage.ts"],"names":[],"mappings":"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"}

package/esm/storage/useStorage.spec.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @jest-environment jsdom
+ */
+export {};

package/esm/storage/useStorage.spec.js

@@ -0,0 +1,61 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from "react";
+import { useRef } from "react";
+import { act, create } from "react-test-renderer";
+import { useStorage } from "./useStorage";
+// Reset storage between tests
+beforeEach(() => {
+    localStorage.clear();
+    sessionStorage.clear();
+});
+function TestComponent({ storageKey }) {
+    const renderCount = useRef(0);
+    renderCount.current++;
+    // Inline object literal: new reference every render (the bug trigger)
+    const [value] = useStorage(storageKey, { page: 0, size: 25 });
+    return (React.createElement("div", { "data-render-count": renderCount.current, "data-value": JSON.stringify(value) }));
+}
+function getTestResult(renderer) {
+    const div = renderer.root.findByType("div");
+    return {
+        renderCount: Number(div.props["data-render-count"]),
+        value: JSON.parse(div.props["data-value"]),
+    };
+}
+describe("useStorage", () => {
+    test("does not cause infinite re-renders with unstable object defaultValue", () => {
+        let renderer;
+        act(() => {
+            renderer = create(React.createElement(TestComponent, { storageKey: "test-key" }));
+        });
+        const afterMount = getTestResult(renderer);
+        // Force a re-render with the same props (simulates parent re-render)
+        act(() => {
+            renderer.update(React.createElement(TestComponent, { storageKey: "test-key" }));
+        });
+        const afterUpdate = getTestResult(renderer);
+        // Render count should stay small, not grow unboundedly
+        expect(afterUpdate.renderCount).toBeLessThanOrEqual(3);
+        expect(afterUpdate.value).toEqual({ page: 0, size: 25 });
+    });
+    test("returns default value when no stored value exists", () => {
+        let renderer;
+        act(() => {
+            renderer = create(React.createElement(TestComponent, { storageKey: "missing-key" }));
+        });
+        const result = getTestResult(renderer);
+        expect(result.value).toEqual({ page: 0, size: 25 });
+    });
+    test("returns stored value when it exists", () => {
+        localStorage.setItem("stored-key", JSON.stringify({ page: 2, size: 50 }));
+        let renderer;
+        act(() => {
+            renderer = create(React.createElement(TestComponent, { storageKey: "stored-key" }));
+        });
+        const result = getTestResult(renderer);
+        expect(result.value).toEqual({ page: 2, size: 50 });
+    });
+});
+//# sourceMappingURL=useStorage.spec.js.map

package/esm/storage/useStorage.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStorage.spec.js","sourceRoot":"","sources":["../../src/storage/useStorage.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variocube/app-ui",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "description": "Common UI components for Variocube applications.",
   "module": "esm/index.js",
   "types": "esm/index.d.ts",
@@ -58,7 +58,7 @@
     "react-dom": "^17.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-syntax-highlighter": "^16.1.0",
     "react-test-renderer": "^17.0.2",
     "rimraf": "^3.0.2",
     "ts-jest": "^29.1.2",

package/src/storage/useStorage.spec.tsx

@@ -0,0 +1,86 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from "react";
+import {useRef} from "react";
+import {act, create, ReactTestRenderer} from "react-test-renderer";
+import {useStorage} from "./useStorage";
+
+// Reset storage between tests
+beforeEach(() => {
+	localStorage.clear();
+	sessionStorage.clear();
+});
+
+interface TestResult<T> {
+	value: T;
+	renderCount: number;
+}
+
+function TestComponent({storageKey}: { storageKey: string }) {
+	const renderCount = useRef(0);
+	renderCount.current++;
+
+	// Inline object literal: new reference every render (the bug trigger)
+	const [value] = useStorage(storageKey, {page: 0, size: 25});
+
+	return (
+		<div
+			data-render-count={renderCount.current}
+			data-value={JSON.stringify(value)}
+		/>
+	);
+}
+
+function getTestResult<T>(renderer: ReactTestRenderer): TestResult<T> {
+	const div = renderer.root.findByType("div");
+	return {
+		renderCount: Number(div.props["data-render-count"]),
+		value: JSON.parse(div.props["data-value"]),
+	};
+}
+
+describe("useStorage", () => {
+	test("does not cause infinite re-renders with unstable object defaultValue", () => {
+		let renderer: ReactTestRenderer;
+		act(() => {
+			renderer = create(<TestComponent storageKey="test-key" />);
+		});
+
+		const afterMount = getTestResult(renderer!);
+
+		// Force a re-render with the same props (simulates parent re-render)
+		act(() => {
+			renderer.update(<TestComponent storageKey="test-key" />);
+		});
+
+		const afterUpdate = getTestResult(renderer!);
+
+		// Render count should stay small, not grow unboundedly
+		expect(afterUpdate.renderCount).toBeLessThanOrEqual(3);
+		expect(afterUpdate.value).toEqual({page: 0, size: 25});
+	});
+
+	test("returns default value when no stored value exists", () => {
+		let renderer: ReactTestRenderer;
+		act(() => {
+			renderer = create(<TestComponent storageKey="missing-key" />);
+		});
+
+		const result = getTestResult(renderer!);
+		expect(result.value).toEqual({page: 0, size: 25});
+	});
+
+	test("returns stored value when it exists", () => {
+		localStorage.setItem("stored-key", JSON.stringify({page: 2, size: 50}));
+
+		let renderer: ReactTestRenderer;
+		act(() => {
+			renderer = create(<TestComponent storageKey="stored-key" />);
+		});
+
+		const result = getTestResult(renderer!);
+		expect(result.value).toEqual({page: 2, size: 50});
+	});
+});

package/src/storage/useStorage.ts

@@ -21,7 +21,17 @@ export function useStorage<T>(key: string, defaultValue: T, storageType?: Storag
 		return () => storage.removeChangeListener(key, updateStateFromStorage);
 	}, [key, updateStateFromStorage]);
 
-	const typedValue = useMemo(() => JSON.parse(value), [value]);
+	const typedValue = useMemo(() => {
+		if (value === undefined) {
+			return defaultValueSerialized !== undefined ? JSON.parse(defaultValueSerialized) : undefined;
+		}
+		try {
+			return JSON.parse(value);
+		} catch (e) {
+			console.warn(`Failed to parse storage value for key "${key}", falling back to default value.`, e);
+			return defaultValueSerialized !== undefined ? JSON.parse(defaultValueSerialized) : undefined;
+		}
+	}, [value, key, defaultValueSerialized]);
 
 	const setTypedValue = useCallback((newValue: T) => {
 		const value = JSON.stringify(newValue);