@venizia/ardor-react 0.4.8-4 → 0.4.8-6

package/dist/hooks/resize-observation.js

@@ -16,7 +16,8 @@ export class ResizeObservation {
                 onFrame(batch);
             }
         };
-        const observer = new ResizeObserver((entries) => {
+        let observer;
+        const onEntries = (entries) => {
             for (const entry of entries) {
                 latest.set(entry.target, entry);
             }
@@ -31,9 +32,14 @@ export class ResizeObservation {
                 frame = undefined;
                 flush();
             });
-        });
+        };
         const update = (targets) => {
             const wanted = new Set(children ? targets.flatMap((target) => [target, ...target.children]) : targets);
+            // No target and no observer yet: there is nothing to watch, so none is made.
+            if (!observer && wanted.size === 0) {
+                return;
+            }
+            observer ??= new ResizeObserver(onEntries);
             for (const element of watched) {
                 if (!wanted.has(element)) {
                     observer.unobserve(element);
@@ -47,7 +53,7 @@ export class ResizeObservation {
             }
             watched = wanted;
         };
-        const mutations = children ? new MutationObserver(() => update(current)) : undefined;
+        let mutations;
         return {
             sync: (targets) => {
                 if (targets.length === current.length &&
@@ -57,13 +63,16 @@ export class ResizeObservation {
                 current = targets;
                 update(targets);
                 // A removed target stays registered on `mutations` until `stop`; its callback only updates the current targets.
-                for (const target of targets) {
-                    mutations?.observe(target, { childList: true });
+                if (children && targets.length > 0) {
+                    mutations ??= new MutationObserver(() => update(current));
+                    for (const target of targets) {
+                        mutations.observe(target, { childList: true });
+                    }
                 }
             },
             stop: () => {
                 mutations?.disconnect();
-                observer.disconnect();
+                observer?.disconnect();
                 if (frame !== undefined) {
                     cancelAnimationFrame(frame);
                 }

package/dist/hooks/use-stored-state.d.ts

@@ -35,14 +35,14 @@ export interface IUseStoredState {
  * that writes through `BrowserStorage`, and with other tabs. Pass a stable `codec` and `defaultValue`.
  * A write or a removal that the storage refuses is kept in this hook until the storage next changes.
  * With `writeDelayMs` the value waits in the same place for the delay: a change of the storage from
- * outside drops it, and an unmount or a new key or storage writes it at once.
+ * outside drops it, and an unmount, a new key or storage, a `pagehide` event or a hidden page writes it at once.
  *
  * @example
  * ```tsx
  * import { useStoredState } from '@venizia/ardor';
  *
  * export function ThemeToggle() {
- *   const { value, setValue } = useStoredState({ key: '@app/store/theme', defaultValue: 'light' });
+ *   const { value, setValue } = useStoredState({ key: '@app/prefs/theme', defaultValue: 'light' });
  *   return <button onClick={() => setValue(value === 'light' ? 'dark' : 'light')}>{value}</button>;
  * }
  * ```

package/dist/hooks/use-stored-state.js

@@ -7,14 +7,14 @@ const isUpdater = (next) => typeof next === 'function';
  * that writes through `BrowserStorage`, and with other tabs. Pass a stable `codec` and `defaultValue`.
  * A write or a removal that the storage refuses is kept in this hook until the storage next changes.
  * With `writeDelayMs` the value waits in the same place for the delay: a change of the storage from
- * outside drops it, and an unmount or a new key or storage writes it at once.
+ * outside drops it, and an unmount, a new key or storage, a `pagehide` event or a hidden page writes it at once.
  *
  * @example
  * ```tsx
  * import { useStoredState } from '@venizia/ardor';
  *
  * export function ThemeToggle() {
- *   const { value, setValue } = useStoredState({ key: '@app/store/theme', defaultValue: 'light' });
+ *   const { value, setValue } = useStoredState({ key: '@app/prefs/theme', defaultValue: 'light' });
  *   return <button onClick={() => setValue(value === 'light' ? 'dark' : 'light')}>{value}</button>;
  * }
  * ```
@@ -35,14 +35,30 @@ export const useStoredState = (opts) => {
     const write = React.useCallback((entry) => {
         keep(BrowserStorage.set(entry) ? undefined : entry);
     }, [keep]);
-    // A new key or storage, and an unmount, write the pending value to the key it was set for.
+    const isDelayed = writeDelayMs > 0;
+    const flush = React.useCallback(() => {
+        if (timerRef.current !== undefined && keptRef.current) {
+            write(keptRef.current);
+        }
+    }, [write]);
+    // A new key or storage, an unmount, and a page that closes or hides write the pending value to the
+    // key it was set for: closing a tab does not unmount.
     React.useEffect(() => {
-        return () => {
-            if (timerRef.current !== undefined && keptRef.current) {
-                write(keptRef.current);
+        const onHide = () => {
+            if (document.visibilityState === 'hidden') {
+                flush();
             }
         };
-    }, [key, storage, write]);
+        if (isDelayed) {
+            window.addEventListener('pagehide', flush);
+            document.addEventListener('visibilitychange', onHide);
+        }
+        return () => {
+            window.removeEventListener('pagehide', flush);
+            document.removeEventListener('visibilitychange', onHide);
+            flush();
+        };
+    }, [key, storage, isDelayed, flush]);
     const subscribe = React.useCallback((listener) => {
         return BrowserStorage.subscribe({
             key,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@venizia/ardor-react",
-  "version": "0.4.8-4",
+  "version": "0.4.8-6",
   "description": "ARDOR React bindings - the application context, the injectable and logger hooks that read it, typed Redux hook factories, and the framework-agnostic UI hooks (debounce, autosave, confirm, clipboard, element size, window dimensions). No react-admin.",
   "keywords": [
     "ardor",
@@ -59,7 +59,7 @@
     "prepublishOnly": "make rebuild"
   },
   "dependencies": {
-    "@venizia/ardor-kernel": "0.4.8-4"
+    "@venizia/ardor-kernel": "0.4.8-6"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^21.0.4",
@@ -70,10 +70,10 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@venizia/dev-configs": "^0.4.8-2",
-    "@venizia/ignis-filter": "^0.4.7-2",
-    "@venizia/ignis-helpers": "^0.4.8-3",
+    "@venizia/ignis-filter": "^0.4.7-3",
+    "@venizia/ignis-helpers": "^0.4.8-5",
     "@venizia/ignis-inversion": "^0.4.7-2",
-    "@venizia/ignis-kernel": "^0.4.8-3",
+    "@venizia/ignis-kernel": "^0.4.8-5",
     "eslint": "^10.13.0",
     "oxlint": "1.89.0",
     "oxlint-tsgolint": "7.0.2004",
@@ -87,10 +87,10 @@
   },
   "peerDependencies": {
     "@reduxjs/toolkit": ">=2.13.0",
-    "@venizia/ignis-filter": "^0.4.7-2",
-    "@venizia/ignis-helpers": "^0.4.8-3",
+    "@venizia/ignis-filter": "^0.4.7-3",
+    "@venizia/ignis-helpers": "^0.4.8-5",
     "@venizia/ignis-inversion": "^0.4.7-2",
-    "@venizia/ignis-kernel": "^0.4.8-3",
+    "@venizia/ignis-kernel": "^0.4.8-5",
     "react": ">=19.3.1",
     "react-redux": ">=9.3.0",
     "reflect-metadata": ">=0.2.2"
@@ -111,7 +111,7 @@
         "react",
         "react-redux"
       ],
-      "limit": "3450 B"
+      "limit": "3540 B"
     }
   ],
   "engines": {