38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
// Rôle : observe les valeurs validées et les setters différés d'un état lié à une clé.
|
|
/* global sessionStorage */
|
|
import { createElement, StrictMode, useLayoutEffect } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { flushSync } from "react-dom";
|
|
import { useKeyedState } from "../../website/src/hooks/useKeyedState.js";
|
|
|
|
export function mountKeyedStateProbe(element) {
|
|
const root = createRoot(element);
|
|
const snapshots = [];
|
|
const setters = new Map();
|
|
let reads = 0;
|
|
|
|
function Probe({ identity }) {
|
|
const [value, setValue] = useKeyedState(identity, (key) => {
|
|
reads++;
|
|
return JSON.parse(sessionStorage.getItem(`keyed-probe:${key}`) || "[]");
|
|
});
|
|
useLayoutEffect(() => {
|
|
snapshots.push({ key: identity, value });
|
|
setters.set(identity, setValue);
|
|
});
|
|
return createElement("output", null, JSON.stringify(value));
|
|
}
|
|
|
|
function update(identity) {
|
|
snapshots.length = 0;
|
|
flushSync(() => root.render(createElement(StrictMode, null, createElement(Probe, { identity }))));
|
|
}
|
|
update("a");
|
|
return {
|
|
update,
|
|
snapshots,
|
|
get reads() { return reads; },
|
|
append: (key, value) => flushSync(() => setters.get(key)((current) => [...current, value])),
|
|
unmount: () => root.unmount()
|
|
};
|
|
}
|