Fix render crash when text updates (#32)

Author: weizman

packages/core/src/lavadome.mjs

@@ -7,6 +7,7 @@ import {
     from, stringify,
     createElement,
     appendChild,
+    replaceChildren,
     textContentSet,
 } from './native.mjs';
 import {distraction, unselectable} from './element.mjs';
@@ -18,9 +19,12 @@ export function LavaDome(host, opts) {
     // make exported API tamper-proof
     defineProperties(this, {text: {value: text}});
 
+    // get/create shadow for host (empty shadow content if there's any already)
+    const shadow = getShadow(host, opts);
+    replaceChildren(shadow);
+
     // child of the shadow, where the secret is set, must be unselectable
     const child = unselectable();
-    const shadow = getShadow(host, opts);
     appendChild(shadow, child);
 
     function text(text) {

packages/core/src/native.mjs

@@ -20,6 +20,7 @@ const randomUUID = crypto?.randomUUID?.bind(crypto);
 const n = (obj, prop, accessor) =>
     obj && Function.prototype.call.bind(getOwnPropertyDescriptor(obj, prop)[accessor]);
 
+export const replaceChildren = n(globalThis?.DocumentFragment?.prototype, 'replaceChildren', 'value');
 export const attachShadow = n(globalThis?.Element?.prototype, 'attachShadow', 'value');
 export const createElement = n(globalThis?.Document?.prototype, 'createElement', 'value');
 export const appendChild = n(globalThis?.Node?.prototype, 'appendChild', 'value');

packages/react/demo/App.jsx

@@ -22,7 +22,7 @@ export default function App() {
                 <p id="PRIVATE">
                     <LavaDomeReact
                         unsafeOpenModeShadow={unsafeOpenModeShadow}
-                        text={toLavaDomeToken('SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME')}
+                        text={toLavaDomeToken(`SECRET_CONTENT_ONLY_ACCESSIBLE_TO_LAVADOME: "${count}"`)}
                     />
                 </p>
             </div>

packages/react/src/lavadome.jsx

@@ -18,23 +18,14 @@ export const LavaDome = ({ text, unsafeOpenModeShadow }) => {
 };
 
 function LavaDomeShadow({ host, token, unsafeOpenModeShadow }) {
-    let lavadome;
-
-    // exchange token for sensitive text before check
-    const text = tokenToText(token, unsafeOpenModeShadow);
-
-    // generate a lavadome instance reference with a teardown
-    useEffect(() => {
-        const opts = { unsafeOpenModeShadow };
-        lavadome = new LavaDomeCore(host.current, opts);
-        return () => lavadome = null;
-    }, []);
-
-    // use a unique and useless representation of the token as the useEffect dep
-    const dep = tokenToDep(token);
+    const
+        // exchange token for sensitive text before check
+        text = tokenToText(token, unsafeOpenModeShadow),
+        // use a unique and useless representation of the token as the useEffect dep
+        dep = tokenToDep(token);
 
     // update lavadome secret text (given that the token is updated too)
-    useEffect(() => lavadome.text(text), [dep]);
+    useEffect(() => new LavaDomeCore(host.current, { unsafeOpenModeShadow }).text(text), [dep]);
 
     return <></>;
 }