@takazudo/zfb 4.4.0 → 4.5.0

package/dist/zudo-react/hydrate.js

@@ -1,10 +1,12 @@
-import { activateForms, prepareForms, reconcileForms, FormError } from "./forms.js";
+import { boundaryRenderer, integrity, recoverable } from "./error-boundary-type.js";
+import { islandRootType } from "./island-root-type.js";
+import { activateForms, prepareForms, reconcileForms, formHost, FormError, } from "./forms.js";
 import { Fragment, isDescription } from "./description.js";
-import { createScope, withScope } from "./scope.js";
+import { RuntimeScope, withScope } from "./scope.js";
 import { isReactive, read, styleText, setAttribute, bind, listener } from "./dom-bindings.js";
 import { createRoot, diagnostic, report, rootPath, storedRoot, } from "./root.js";
-import { subscribe } from "./reactive.js";
-import { batch } from "./scheduler.js";
+import { subscribe, untracked } from "./reactive.js";
+import { batch, enqueue } from "./scheduler.js";
 import { rawHtmlReserved } from "./raw-html.js";
 import { Show, For, showProps, forProps, keyed, keyPayload, view } from "./structure.js";
 import { attributeError, commonAttrs, dialectSuggestion, displayOnlyControl, emptyIframeChildren, formProps, htmlAttrs, htmlTags, isDialectProp, reactiveModelSuggestion, svgAttrs, svgTags, voidTags, } from "./vocabulary.js";
@@ -32,14 +34,21 @@ function owned(context, name, namespace, parentTag, path, factory, initial, kind
     const fragment = context.document.createDocumentFragment();
     const operationsStart = context.operations.length;
     const formsStart = context.forms.length;
+    const rangesStart = context.dynamicRanges.length;
     const previous = context.scope;
     context.scope = scope;
     const cleanups = [];
     try {
         withScope(scope, () => {
-            scope.onCleanup(() => {
-                for (const cleanup of [...cleanups].reverse())
-                    cleanup();
+            scope.cleanups.push(() => {
+                for (const cleanup of cleanups.splice(0).reverse()) {
+                    try {
+                        cleanup();
+                    }
+                    catch (error) {
+                        scope.report("ZR_CLEANUP_ERROR", "cleanup", String(error));
+                    }
+                }
             });
             const output = factory();
             if (kind)
@@ -49,16 +58,23 @@ function owned(context, name, namespace, parentTag, path, factory, initial, kind
         });
         const operations = context.operations.splice(operationsStart);
         const forms = initial ? context.forms.slice(formsStart) : context.forms.splice(formsStart);
-        const instance = { scope, fragment, operations, forms, cleanups };
-        if (initial)
-            for (const form of forms)
-                if (!context.formOwners.has(form))
-                    context.formOwners.set(form, instance);
+        const instance = {
+            scope,
+            fragment,
+            operations,
+            forms,
+            formOwners: context.formOwners,
+            cleanups,
+        };
+        for (const form of forms)
+            if (!context.formOwners.has(form))
+                context.formOwners.set(form, instance);
         return instance;
     }
     catch (error) {
         context.operations.length = operationsStart;
         context.forms.length = formsStart;
+        context.dynamicRanges.length = rangesStart;
         scope.dispose();
         throw error;
     }
@@ -69,12 +85,29 @@ function owned(context, name, namespace, parentTag, path, factory, initial, kind
 function installOwned(instance, map, context, mode) {
     if (mode === "mount" && instance.forms.length) {
         const bindings = prepareForms(instance.forms, map, "mount", context.container);
-        reconcileForms(bindings, "mount");
-        activateForms(bindings, instance.scope, instance.cleanups, context.options, context.container);
+        reconcileForms(bindings, "mount", context.container);
+        activateOwnedForms(bindings, instance.forms, map, instance.formOwners, context, instance.scope, instance.cleanups);
     }
     for (const operation of instance.operations)
         operation(map, instance.cleanups);
 }
+function activateOwnedForms(bindings, plans, map, owners, context, scope, cleanups) {
+    const byNode = new Map();
+    for (const plan of plans)
+        byNode.set(map.get(plan.element), owners.get(plan));
+    const groups = new Map();
+    for (const binding of bindings) {
+        const owner = byNode.get(binding.node);
+        const group = groups.get(owner) ?? [];
+        group.push(binding);
+        groups.set(owner, group);
+    }
+    // Root-owned bindings initialize first, as in the root adoption path.
+    activateForms(groups.get(undefined) ?? [], scope, cleanups, context.options, context.container);
+    groups.delete(undefined);
+    for (const [owner, group] of groups)
+        activateForms(group, owner.scope, owner.cleanups, context.options, context.container);
+}
 function selfMap(fragment) {
     const map = new Map();
     const visit = (node) => {
@@ -87,22 +120,23 @@ function selfMap(fragment) {
     return map;
 }
 class Failure extends Error {
-    code;
-    phase;
-    expected;
-    actual;
-    path;
     constructor(code, phase, expected, actual, path) {
         super(`${code}: ${expected}; got ${actual}`);
-        this.code = code;
-        this.phase = phase;
-        this.expected = expected;
-        this.actual = actual;
-        this.path = path;
+        Object.assign(this, { code, phase, expected, actual, path });
     }
 }
-function fail(code, phase, expected, actual, path) {
-    throw new Failure(code, phase, expected, actual, path);
+function fail(code, phase, expected, actual, path, fatal = false) {
+    const error = new Failure(code, phase, expected, actual, path);
+    throw fatal ||
+        [
+            "ZR_IDENTITY",
+            "ZR_CANCELLED",
+            "ZR_DUPLICATE_ROOT",
+            "ZR_HYDRATION_MISMATCH",
+            "ZR_NESTED_ISLAND",
+        ].includes(code)
+        ? integrity(error)
+        : error;
 }
 function append(parent, node) {
     if (node.nodeType === Node.TEXT_NODE && parent.lastChild?.nodeType === Node.TEXT_NODE) {
@@ -112,7 +146,7 @@ function append(parent, node) {
         parent.appendChild(node);
 }
 function marker(context, parent, kind, content) {
-    const id = context.next++;
+    const id = `${context.prefix ?? ""}${context.next++}`;
     const open = context.document.createComment(`zr:1:${id}:${kind}`);
     parent.appendChild(open);
     content();
@@ -122,7 +156,8 @@ function marker(context, parent, kind, content) {
         context.opaque.add(open);
     if (kind === "t")
         context.textSlots.add(open);
-    if (context.collectRootRanges && (kind === "t" || kind === "l" || kind.startsWith("s:")))
+    if (context.collectRootRanges &&
+        (kind === "e" || kind === "t" || kind === "l" || kind.startsWith("s:")))
         context.dynamicRanges.push([open, close]);
     return [open, close];
 }
@@ -158,7 +193,7 @@ function range(start, end) {
         if (node === end)
             return nodes;
     }
-    throw new Error("ZR_REGION_RANGE");
+    throw integrity(new Error("ZR_REGION_RANGE"));
 }
 function removeRange(start, end) {
     for (const node of range(start, end))
@@ -201,11 +236,12 @@ function scalar(value, path) {
     fail("ZR_CHILD", "setup", "scalar", typeof value, path);
 }
 function validateRawHtml(value, tag, path) {
-    if (typeof value !== "string" ||
-        rawHtmlReserved(value, tag) ||
+    if (typeof value !== "string")
+        fail("ZR_RAW_HTML", "setup", "valid rawHtml", typeof value, path);
+    if (rawHtmlReserved(value, tag) ||
         (tag === "script" && /<\/script/i.test(value)) ||
         (tag === "style" && /<\/style/i.test(value)))
-        fail("ZR_RAW_HTML", "setup", "valid rawHtml", typeof value, path);
+        fail("ZR_RAW_HTML", "setup", "valid rawHtml", typeof value, path, true);
 }
 function children(value, parent, context, namespace, tag, path) {
     if (value == null || typeof value === "boolean")
@@ -235,6 +271,8 @@ function element(desc, parent, context, namespace, parentTag, path) {
     const childNamespace = tag === "foreignObject" ? HTML : ownNamespace;
     const element = context.document.createElementNS(ownNamespace, tag);
     const props = desc.props;
+    if ("data-zfb-island" in props || "data-zfb-island-skip-ssr" in props)
+        fail("ZR_NESTED_ISLAND", "preflight", "no nested root", tag, path);
     if (tag === "iframe") {
         if (Object.hasOwn(props, "rawHtml"))
             fail("ZR_RAW_HTML", "preflight", "iframe without rawHtml", "rawHtml", path);
@@ -291,14 +329,15 @@ function element(desc, parent, context, namespace, parentTag, path) {
                 fail("ZR_LISTENER", "setup", "native listener", name, path);
             context.operations.push((map, cleanups) => {
                 const node = map.get(element);
+                const eventError = (error) => report(context.options, diagnostic(context.options, "ZR_EVENT_ERROR", "update", `${rootPath(context.container)}${path}`, "handler success", String(error)));
                 const handler = (event) => {
                     try {
                         const result = original(event);
                         if (result && typeof result === "object" && "then" in result)
-                            Promise.resolve(result).catch((error) => report(context.options, diagnostic(context.options, "ZR_EVENT_ERROR", "update", `${rootPath(context.container)}${path}`, "handler success", String(error))));
+                            Promise.resolve(result).catch(eventError);
                     }
                     catch (error) {
-                        report(context.options, diagnostic(context.options, "ZR_EVENT_ERROR", "update", `${rootPath(context.container)}${path}`, "handler success", String(error)));
+                        eventError(error);
                     }
                 };
                 node.addEventListener(parsed.name, handler, parsed.capture);
@@ -343,8 +382,7 @@ function element(desc, parent, context, namespace, parentTag, path) {
             (!custom &&
                 !commonAttrs.has(name) &&
                 !(ownNamespace === SVG ? svgAttrs.has(name) : htmlAttrs.has(name)) &&
-                !/^data-[\w.-]+$/.test(name) &&
-                !/^aria-[\w.-]+$/.test(name) &&
+                !/^(data|aria)-[\w.-]+$/.test(name) &&
                 !/^on[a-z]+$/.test(name)))
             fail("ZR_ATTRIBUTE", "setup", "supported attribute", name, path);
         const initial = read(original);
@@ -404,7 +442,7 @@ function element(desc, parent, context, namespace, parentTag, path) {
                     const template = context.document.createElement("template");
                     template.innerHTML = value;
                     if (start.parentNode !== node || end.parentNode !== node)
-                        throw new Error("ZR_REGION_RANGE");
+                        throw integrity(new Error("ZR_REGION_RANGE"));
                     for (const child of range(start, end).slice(1, -1))
                         node.removeChild(child);
                     node.insertBefore(template.content, end);
@@ -488,6 +526,31 @@ function render(value, parent, context, namespace, parentTag, path) {
     }
     if (!isDescription(value))
         fail("ZR_CHILD", "setup", "description", typeof value, path);
+    if (value.type === islandRootType)
+        fail("ZR_NESTED_ISLAND", "preflight", "no nested root", "island", path);
+    const boundary = boundaryRenderer(value.type);
+    if (boundary) {
+        if (restricted.has(parentTag))
+            fail("ZR_UNSUPPORTED_POSITION", "preflight", "flow region", parentTag, path);
+        boundary(value, parent, context, namespace, parentTag, path, {
+            owned,
+            installOwned,
+            selfMap,
+            marker,
+            range,
+            fail,
+            openMarker,
+            matchingClose,
+            recoverable,
+            prepareForms,
+            read,
+            subscribe,
+            untracked,
+            enqueue,
+            formHost,
+        });
+        return;
+    }
     if (value.type === Fragment) {
         marker(context, parent, "f", () => children(value.props.children, parent, context, namespace, parentTag, path));
         return;
@@ -520,17 +583,21 @@ function render(value, parent, context, namespace, parentTag, path) {
             if (current)
                 installOwned(current, map, context, "hydrate");
             const subscription = subscribe(() => {
-                const next = props.when.value;
-                if (next === shown)
-                    return;
-                const factory = next ? props.children : props.fallback;
                 let replacement = null;
+                let rendering = true;
                 try {
+                    const next = props.when.value;
+                    if (typeof next !== "boolean")
+                        throw new TypeError(`ZR_CHILD: Show.when at ${path}`);
+                    if (next === shown)
+                        return;
+                    const factory = next ? props.children : props.fallback;
                     if (factory)
                         replacement = owned(context, "Show", namespace, parentTag, path, factory, false, undefined, owner);
+                    rendering = false;
                     const replacementMap = replacement ? selfMap(replacement.fragment) : null;
                     if (replacement && replacement.forms.length)
-                        prepareForms(replacement.forms, replacementMap, "mount", context.container);
+                        prepareForms(replacement.forms, replacementMap, "mount", context.container, current ? [current.scope] : [], start.parentNode);
                     if (current) {
                         current.scope.dispose();
                         let node = start.nextSibling;
@@ -550,6 +617,10 @@ function render(value, parent, context, namespace, parentTag, path) {
                 }
                 catch (error) {
                     replacement?.scope.dispose();
+                    if (rendering) {
+                        if (owner.recoverRender(error))
+                            return;
+                    }
                     throw error;
                 }
             }, {
@@ -603,14 +674,24 @@ function render(value, parent, context, namespace, parentTag, path) {
                 installOwned(entry.owned, map, context, "hydrate");
             const end = map.get(ends[1]);
             const subscription = subscribe(() => {
-                const next = props.each.value;
-                if (!Array.isArray(next))
-                    throw new TypeError(`ZR_CHILD: For.each at ${path}`);
+                let next;
                 let nextKeys;
+                try {
+                    next = props.each.value;
+                    if (!Array.isArray(next))
+                        throw new TypeError(`ZR_CHILD: For.each at ${path}`);
+                }
+                catch (error) {
+                    if (owner.recoverRender(error))
+                        return;
+                    throw error;
+                }
                 try {
                     nextKeys = keyed(next, props.by, path);
                 }
                 catch (error) {
+                    if (owner.recoverRender(error))
+                        return;
                     const detail = String(error);
                     const code = detail.includes("ZR_DUPLICATE_KEY")
                         ? "ZR_DUPLICATE_KEY"
@@ -622,6 +703,7 @@ function render(value, parent, context, namespace, parentTag, path) {
                 }
                 const old = new Map(current.map((entry) => [entry.key, entry]));
                 const created = [];
+                let rendering = true;
                 try {
                     const ordered = nextKeys.map((key, index) => {
                         const retained = old.get(key);
@@ -642,9 +724,12 @@ function render(value, parent, context, namespace, parentTag, path) {
                         created.push(entry);
                         return entry;
                     });
+                    rendering = false;
                     for (const entry of created)
                         if (entry.owned.forms.length)
-                            prepareForms(entry.owned.forms, selfMap(entry.owned.fragment), "mount", context.container);
+                            prepareForms(entry.owned.forms, selfMap(entry.owned.fragment), "mount", context.container, current
+                                .filter((item) => !nextKeys.includes(item.key))
+                                .map((item) => item.owned.scope), end.parentNode);
                     for (const entry of current)
                         if (!nextKeys.includes(entry.key)) {
                             entry.owned.scope.dispose();
@@ -682,6 +767,10 @@ function render(value, parent, context, namespace, parentTag, path) {
                 catch (error) {
                     for (const entry of created)
                         entry.owned.scope.dispose();
+                    if (rendering) {
+                        if (owner.recoverRender(error))
+                            return;
+                    }
                     throw error;
                 }
             }, {
@@ -765,22 +854,31 @@ function significant(nodes, pre) {
         ? nodes
         : nodes.filter((node) => node.nodeType !== Node.TEXT_NODE || normalize(node.textContent ?? "", false) !== "");
 }
+const openingMarker = /^zr:1:((?:0|[1-9]\d*)(?:\.(?:0|[1-9]\d*))*):(c|f|t|h|l|s:[01]|i:[ns](?:[0-9a-f]{2})*|e)$/;
+function openMarker(node) {
+    return node.nodeType === Node.COMMENT_NODE ? openingMarker.exec(node.textContent ?? "") : null;
+}
 function matchingClose(nodes, start) {
-    const open = nodes[start].textContent ?? "";
-    const id = /^zr:1:(\d+):/.exec(open)?.[1];
-    if (id === undefined)
+    const first = openMarker(nodes[start]);
+    if (!first)
         return -1;
-    let depth = 0;
+    const stack = [first[1]];
     for (let i = start + 1; i < nodes.length; i++) {
-        const value = nodes[i].textContent;
-        if (value?.startsWith("zr:1:"))
-            depth++;
-        else if (value?.startsWith("/zr:1:")) {
-            if (depth)
-                depth--;
-            else
-                return value === `/zr:1:${id}` ? i : -1;
+        const node = nodes[i];
+        if (node.nodeType !== Node.COMMENT_NODE)
+            continue;
+        const value = node.textContent ?? "";
+        const open = openMarker(node);
+        if (open)
+            stack.push(open[1]);
+        else if (value.startsWith("/zr:1:")) {
+            if (value !== `/zr:1:${stack.pop()}`)
+                return -1;
+            if (!stack.length)
+                return i;
         }
+        else if (value.includes("zr:1:"))
+            return -1;
     }
     return -1;
 }
@@ -793,6 +891,12 @@ function compareChildren(expected, actual, map, context, path, pre = false) {
         const wanted = wants[i];
         const found = has[j];
         const childPath = `${path}/${wanted.nodeName.toLowerCase()}[${i}]`;
+        const boundary = context.errorRanges.get(wanted);
+        if (boundary) {
+            compare(wanted, found, map, context, childPath, pre);
+            [i, j] = boundary(wants, has, i, j, map, childPath);
+            continue;
+        }
         if (context.opaque.has(wanted)) {
             compare(wanted, found, map, context, childPath, pre);
             const wantedEnd = matchingClose(wants, i);
@@ -861,7 +965,7 @@ function execute(node, container, options, mode) {
             (node.type.displayName ?? node.type.name) !==
                 options.identity.component)
             fail("ZR_IDENTITY", "preflight", options.identity.component, "different child component", rootPath(container));
-        scope = createScope({
+        scope = new RuntimeScope({
             component: options.identity.component,
             reporter: (value) => report(options, value),
             protocol,
@@ -877,52 +981,36 @@ function execute(node, container, options, mode) {
             next: 0,
             operations: [],
             forms: [],
-            formOwners: new Map(),
-            opaque: new Set(),
-            textSlots: new Set(),
-            displayOnlyTextareas: new Set(),
+            formOwners: new WeakMap(),
+            opaque: new WeakSet(),
+            textSlots: new WeakSet(),
+            displayOnlyTextareas: new WeakSet(),
+            errorRanges: new WeakMap(),
+            replacements: [],
             dynamicRanges: [],
             collectRootRanges: true,
         };
         const fragment = container.ownerDocument.createDocumentFragment();
         render(node, fragment, context, HTML, "", rootPath(container));
         context.collectRootRanges = false;
-        const built = [...fragment.childNodes];
-        const map = new Map();
+        const map = mode === "hydrate" ? new Map() : selfMap(fragment);
         if (mode === "hydrate")
             compareChildren(fragment, container, map, context, rootPath(container));
-        else {
-            for (const expected of built) {
-                const visit = (item) => {
-                    map.set(item, item);
-                    for (const child of item.childNodes)
-                        visit(child);
-                };
-                visit(expected);
-            }
-        }
         const formBindings = prepareForms(context.forms, map, mode, container);
         if (options.signal?.aborted || !container.isConnected)
             fail("ZR_CANCELLED", "commit", "connected root", "aborted or disconnected", rootPath(container));
-        reconcileForms(formBindings, mode);
+        reconcileForms(formBindings, mode, context.container);
         if (mode === "mount")
             container.replaceChildren(fragment);
+        else
+            for (const replace of context.replacements)
+                replace();
+        context.replacements.length = 0;
         committed = true;
         for (const operation of context.operations)
             operation(map, cleanups);
-        const formOwnerByNode = new Map();
-        for (const [plan, owner] of context.formOwners)
-            formOwnerByNode.set(map.get(plan.element), owner);
-        const rootForms = formBindings.filter((binding) => !formOwnerByNode.has(binding.node));
-        activateForms(rootForms, scope, cleanups, options, container);
-        const ownedForms = new Map();
-        for (const binding of formBindings) {
-            const owner = formOwnerByNode.get(binding.node);
-            if (owner)
-                ownedForms.set(owner, [...(ownedForms.get(owner) ?? []), binding]);
-        }
-        for (const [owner, bindings] of ownedForms)
-            activateForms(bindings, owner.scope, owner.cleanups, options, container);
+        activateOwnedForms(formBindings, context.forms, map, context.formOwners, context, scope, cleanups);
+        context.forms.length = 0;
         const owned = rootOwned(container, context, map);
         context.dynamicRanges.length = 0;
         const handle = createRoot(container, options, scope, cleanups, owned);