@takazudo/zfb 2.22.0 → 3.0.0

package/dist/zudo-react/hydrate.js

@@ -0,0 +1,909 @@
+import { activateForms, prepareForms, reconcileForms, FormError } from "./forms.js";
+import { Fragment, isDescription } from "./description.js";
+import { createScope, 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 { Show, For, showProps, forProps, keyed, keyPayload, view } from "./structure.js";
+const HTML = "http://www.w3.org/1999/xhtml";
+const SVG = "http://www.w3.org/2000/svg";
+const voidTags = new Set("area base br col embed hr img input link meta param source track wbr".split(" "));
+const sensitive = new Set("template noscript xmp iframe noembed noframes plaintext".split(" "));
+const tableChildren = {
+    table: new Set("caption colgroup thead tbody tfoot".split(" ")),
+    thead: new Set(["tr"]),
+    tbody: new Set(["tr"]),
+    tfoot: new Set(["tr"]),
+    tr: new Set(["td", "th"]),
+    colgroup: new Set(["col"]),
+};
+const restricted = new Set("title select optgroup option table thead tbody tfoot tr colgroup".split(" "));
+const booleanAttrs = new Set("hidden inert readonly autofocus required disabled checked selected multiple open controls muted loop autoplay novalidate formnovalidate allowfullscreen".split(" "));
+const dialect = new Set("className htmlFor charSet dateTime tabIndex readOnly strokeWidth dangerouslySetInnerHTML".split(" "));
+const formProps = new Set("modelValue modelChecked defaultValue defaultChecked".split(" "));
+const shapeAttrs = {
+    input: ["type", "form"],
+    select: ["multiple", "form"],
+    option: ["value"],
+    textarea: ["form"],
+};
+const protocol = "zudo-react/1";
+const words = (value) => new Set(value.split(" "));
+const htmlTags = words("html head body title base link meta style script div span p a br hr main header footer nav section article aside h1 h2 h3 h4 h5 h6 ul ol li dl dt dd blockquote pre code strong em b i small mark time figure figcaption img picture source video audio track canvas form label input button textarea select option optgroup fieldset legend output progress meter datalist table caption thead tbody tfoot tr th td col colgroup details summary dialog template slot iframe noscript address abbr bdi bdo cite data del dfn ins kbd map area object param q rp rt ruby s samp sub sup u var wbr embed xmp noembed noframes plaintext");
+const svgTags = words("svg g path circle ellipse rect line polyline polygon text tspan defs symbol use clipPath mask linearGradient radialGradient stop title desc foreignObject");
+const commonAttrs = words("id class title lang dir slot role style hidden inert contenteditable draggable spellcheck tabindex accesskey translate onclick onload onerror");
+const htmlAttrs = words("href target rel download src alt width height type name value placeholder for charset datetime readonly autofocus required disabled checked selected multiple open controls muted loop autoplay novalidate formnovalidate maxlength minlength min max step pattern autocomplete accept accept-charset http-equiv content media method action enctype rows cols colspan rowspan scope cite poster loading decoding sizes srcset crossorigin referrerpolicy sandbox allow allowfullscreen");
+const svgAttrs = words("width height viewBox preserveAspectRatio gradientUnits gradientTransform markerWidth markerHeight refX refY xlink:href xml:lang stroke-width fill-rule clip-rule stroke-linecap stroke-linejoin stop-color stop-opacity fill stroke d x y x1 x2 y1 y2 cx cy r rx ry points transform opacity offset");
+function owned(context, name, namespace, parentTag, path, factory, initial, kind, parentScope) {
+    const scope = (parentScope ?? context.scope).child(name);
+    const fragment = context.document.createDocumentFragment();
+    const operationsStart = context.operations.length;
+    const formsStart = context.forms.length;
+    const previous = context.scope;
+    context.scope = scope;
+    const cleanups = [];
+    try {
+        withScope(scope, () => {
+            scope.onCleanup(() => {
+                for (const cleanup of [...cleanups].reverse())
+                    cleanup();
+            });
+            const output = factory();
+            if (kind)
+                marker(context, fragment, kind, () => render(output, fragment, context, namespace, parentTag, path));
+            else
+                render(output, fragment, context, namespace, parentTag, path);
+        });
+        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);
+        return instance;
+    }
+    catch (error) {
+        context.operations.length = operationsStart;
+        context.forms.length = formsStart;
+        scope.dispose();
+        throw error;
+    }
+    finally {
+        context.scope = previous;
+    }
+}
+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);
+    }
+    for (const operation of instance.operations)
+        operation(map, instance.cleanups);
+}
+function selfMap(fragment) {
+    const map = new Map();
+    const visit = (node) => {
+        map.set(node, node);
+        for (const child of node.childNodes)
+            visit(child);
+    };
+    for (const node of fragment.childNodes)
+        visit(node);
+    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;
+    }
+}
+function fail(code, phase, expected, actual, path) {
+    throw new Failure(code, phase, expected, actual, path);
+}
+function append(parent, node) {
+    if (node.nodeType === Node.TEXT_NODE && parent.lastChild?.nodeType === Node.TEXT_NODE) {
+        parent.lastChild.textContent = (parent.lastChild.textContent ?? "") + (node.textContent ?? "");
+    }
+    else
+        parent.appendChild(node);
+}
+function marker(context, parent, kind, content) {
+    const id = context.next++;
+    const open = context.document.createComment(`zr:1:${id}:${kind}`);
+    parent.appendChild(open);
+    content();
+    const close = context.document.createComment(`/zr:1:${id}`);
+    parent.appendChild(close);
+    if (kind === "h")
+        context.opaque.add(open);
+    if (kind === "t")
+        context.textSlots.add(open);
+    return [open, close];
+}
+function range(start, end) {
+    const nodes = [];
+    for (let node = start; node; node = node.nextSibling) {
+        nodes.push(node);
+        if (node === end)
+            return nodes;
+    }
+    throw new Error("ZR_REGION_RANGE");
+}
+function removeRange(start, end) {
+    for (const node of range(start, end))
+        node.parentNode?.removeChild(node);
+}
+function moveRange(start, end, before) {
+    if (end.nextSibling === before)
+        return;
+    const parent = before.parentNode;
+    const nodes = range(start, end);
+    if (nodes.includes(before))
+        return;
+    const focused = parent.ownerDocument?.activeElement;
+    const focusedInside = focused &&
+        nodes.some((node) => node === focused || (node instanceof Element && node.contains(focused)));
+    const selection = focusedInside && focused instanceof HTMLInputElement
+        ? [focused.selectionStart, focused.selectionEnd]
+        : null;
+    for (const node of nodes)
+        parent.insertBefore(node, before);
+    if (focusedInside && focused instanceof HTMLElement) {
+        focused.focus();
+        if (selection &&
+            focused instanceof HTMLInputElement &&
+            selection[0] != null &&
+            selection[1] != null)
+            focused.setSelectionRange(selection[0], selection[1]);
+    }
+}
+function containsRange(start, end, target) {
+    if (!start.parentNode || start.parentNode !== end.parentNode)
+        return false;
+    return range(start, end).some((node) => node === target || (node instanceof Element && node.contains(target)));
+}
+function scalar(value, path) {
+    if (value == null || typeof value === "boolean")
+        return "";
+    if (typeof value === "string" || (typeof value === "number" && Number.isFinite(value)))
+        return String(value);
+    fail("ZR_CHILD", "setup", "scalar", typeof value, path);
+}
+function validateRawHtml(value, tag, path) {
+    if (typeof value !== "string" ||
+        /<!--\/?zr:1:|data-zfb-island(?:-skip-ssr)?\s*=/.test(value) ||
+        (tag === "script" && /<\/script/i.test(value)) ||
+        (tag === "style" && /<\/style/i.test(value)))
+        fail("ZR_RAW_HTML", "setup", "valid rawHtml", typeof value, path);
+}
+function children(value, parent, context, namespace, tag, path) {
+    if (value == null || typeof value === "boolean")
+        return;
+    if (Array.isArray(value)) {
+        value.forEach((entry, index) => render(entry, parent, context, namespace, tag, `${path}[${index}]`));
+    }
+    else
+        render(value, parent, context, namespace, tag, path);
+}
+function validatePosition(tag, parent, context, path) {
+    if (sensitive.has(tag))
+        fail("ZR_UNSUPPORTED_POSITION", "preflight", "hydratable element", tag, path);
+    if (tableChildren[parent] && !tableChildren[parent].has(tag))
+        fail("ZR_UNSUPPORTED_POSITION", "preflight", `valid ${parent} child`, tag, path);
+    if ((parent === "select" && tag !== "option" && tag !== "optgroup") ||
+        (parent === "optgroup" && tag !== "option"))
+        fail("ZR_UNSUPPORTED_POSITION", "preflight", `valid ${parent} child`, tag, path);
+}
+function element(desc, parent, context, namespace, parentTag, path) {
+    const tag = desc.type;
+    validatePosition(tag, parentTag, context, path);
+    const ownNamespace = tag === "svg" || namespace === SVG ? SVG : HTML;
+    const custom = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)+$/.test(tag);
+    if (ownNamespace === SVG ? !svgTags.has(tag) : !custom && !htmlTags.has(tag))
+        fail("ZR_TAG", "setup", "supported element", tag, path);
+    const childNamespace = tag === "foreignObject" ? HTML : ownNamespace;
+    const element = context.document.createElementNS(ownNamespace, tag);
+    const props = desc.props;
+    if (tag === "select" && read(props.multiple) === true)
+        fail("ZR_MODEL_UNSUPPORTED", "preflight", "single select", "multiple", path);
+    if (voidTags.has(tag) && ("children" in props || "rawHtml" in props))
+        fail("ZR_VOID_CHILDREN", "setup", "empty element", tag, path);
+    if ("rawHtml" in props && "children" in props)
+        fail("ZR_RAW_HTML", "setup", "rawHtml without children", tag, path);
+    if (tag === "textarea" &&
+        "children" in props &&
+        ("modelValue" in props || "defaultValue" in props))
+        fail("ZR_MODEL_CONFLICT", "preflight", "textarea model/default without children", "children", path);
+    context.forms.push({ element, props, path });
+    for (const [name, original] of Object.entries(props)) {
+        if (name === "children" || name === "key" || name === "rawHtml")
+            continue;
+        if (formProps.has(name)) {
+            if (name === "defaultValue" && tag === "input")
+                setAttribute(element, "value", original);
+            if (name === "defaultChecked" && tag === "input")
+                setAttribute(element, "checked", original);
+            if (name === "modelValue" && tag === "input" && read(props.type) !== "radio")
+                setAttribute(element, "value", read(original));
+            if (name === "modelChecked" && tag === "input")
+                setAttribute(element, "checked", read(original));
+            continue;
+        }
+        if (dialect.has(name) || /^on[A-Z]/.test(name))
+            fail("ZR_PROP_DIALECT", "setup", "HTML-spelled prop", name, path);
+        if (name === "ref") {
+            if (!original || typeof original !== "object" || !("current" in original))
+                fail("ZR_REF", "setup", "object ref", typeof original, path);
+            const ref = original;
+            context.operations.push((map, cleanups) => {
+                const node = map.get(element);
+                ref.current = node;
+                cleanups.push(() => {
+                    if (ref.current === node)
+                        ref.current = null;
+                });
+            });
+            continue;
+        }
+        if (name.startsWith("on:")) {
+            const parsed = listener(name);
+            if (!parsed || typeof original !== "function")
+                fail("ZR_LISTENER", "setup", "native listener", name, path);
+            context.operations.push((map, cleanups) => {
+                const node = map.get(element);
+                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))));
+                    }
+                    catch (error) {
+                        report(context.options, diagnostic(context.options, "ZR_EVENT_ERROR", "update", `${rootPath(context.container)}${path}`, "handler success", String(error)));
+                    }
+                };
+                node.addEventListener(parsed.name, handler, parsed.capture);
+                cleanups.push(() => node.removeEventListener(parsed.name, handler, parsed.capture));
+            });
+            continue;
+        }
+        if (name === "value" || name === "checked") {
+            if (isReactive(original))
+                fail("ZR_MODEL_UNSUPPORTED", "preflight", "modelValue/modelChecked", name, path);
+        }
+        if (!/^[A-Za-z_:][A-Za-z0-9_:.-]*$/.test(name) ||
+            (!custom &&
+                !commonAttrs.has(name) &&
+                !(ownNamespace === SVG ? svgAttrs.has(name) : htmlAttrs.has(name)) &&
+                !/^data-[\w.-]+$/.test(name) &&
+                !/^aria-[\w.-]+$/.test(name) &&
+                !/^on[a-z]+$/.test(name)))
+            fail("ZR_ATTRIBUTE", "setup", "supported attribute", name, path);
+        const initial = read(original);
+        if (custom && initial != null && typeof initial !== "string")
+            fail("ZR_ATTRIBUTE", "setup", "custom element string attribute", name, path);
+        if (/^on[a-z]/.test(name) && typeof initial === "function")
+            fail("ZR_PROP_DIALECT", "setup", "on:event", name, path);
+        if (initial != null) {
+            if (ownNamespace === SVG &&
+                (name === "width" || name === "height") &&
+                typeof initial !== "string" &&
+                !(typeof initial === "number" && Number.isFinite(initial)))
+                fail("ZR_ATTRIBUTE", "setup", "SVG dimension string or number", typeof initial, path);
+            if (name === "style")
+                styleText(initial);
+            else if (booleanAttrs.has(name) && typeof initial !== "boolean")
+                fail("ZR_ATTRIBUTE", "setup", "boolean", typeof initial, path);
+            else if (typeof initial !== "string" &&
+                typeof initial !== "number" &&
+                typeof initial !== "boolean")
+                fail("ZR_ATTRIBUTE", "setup", "scalar", typeof initial, path);
+            setAttribute(element, name, initial);
+        }
+        if (isReactive(original)) {
+            const bindingScope = context.scope;
+            context.operations.push((map, cleanups) => {
+                const node = map.get(element);
+                const subscription = bind(original, bindingScope, context.options, context.container, path, (value) => {
+                    if (ownNamespace === SVG &&
+                        (name === "width" || name === "height") &&
+                        value != null &&
+                        typeof value !== "string" &&
+                        !(typeof value === "number" && Number.isFinite(value)))
+                        throw new TypeError(`ZR_ATTRIBUTE: SVG dimension ${name} requires a string or number`);
+                    setAttribute(node, name, value);
+                }, initial);
+                cleanups.push(() => subscription.dispose());
+            });
+        }
+    }
+    if ("rawHtml" in props) {
+        const raw = props.rawHtml;
+        if (ownNamespace === SVG || ["textarea", "title", "select", "option"].includes(tag))
+            fail("ZR_RAW_HTML", "setup", "ordinary HTML container", tag, path);
+        if ((tag === "script" || tag === "style") && isReactive(raw))
+            fail("ZR_RAW_HTML", "setup", "static rawHtml", tag, path);
+        const initial = read(raw);
+        validateRawHtml(initial, tag, path);
+        let region;
+        if (tag === "script" || tag === "style")
+            element.innerHTML = initial;
+        else
+            region = marker(context, element, "h", () => {
+                element.insertAdjacentHTML("beforeend", initial);
+            });
+        const bindingScope = context.scope;
+        if (isReactive(raw) && region) {
+            const [open, close] = region;
+            context.operations.push((map, cleanups) => {
+                const node = map.get(element);
+                const start = map.get(open);
+                const end = map.get(close);
+                let previous = initial;
+                const subscription = bind(raw, bindingScope, context.options, context.container, path, (value) => {
+                    validateRawHtml(value, tag, path);
+                    if (value === previous)
+                        return;
+                    const template = context.document.createElement("template");
+                    template.innerHTML = value;
+                    if (start.parentNode !== node || end.parentNode !== node)
+                        throw new Error("ZR_REGION_RANGE");
+                    for (const child of range(start, end).slice(1, -1))
+                        node.removeChild(child);
+                    node.insertBefore(template.content, end);
+                    previous = value;
+                }, initial);
+                cleanups.push(() => subscription.dispose());
+            });
+        }
+    }
+    else if (tag === "textarea" &&
+        (props.modelValue !== undefined || props.defaultValue !== undefined)) {
+        const value = String(read(props.modelValue ?? props.defaultValue));
+        element.textContent = value;
+    }
+    else if (restricted.has(tag)) {
+        if (tag === "title" || tag === "option") {
+            const value = props.children;
+            if (isReactive(value) || isDescription(value))
+                fail("ZR_UNSUPPORTED_POSITION", "preflight", "static text", tag, path);
+            append(element, context.document.createTextNode(scalar(value, path)));
+        }
+        else
+            children(props.children, element, context, childNamespace, tag, `${path}/${tag}`);
+    }
+    else
+        children(props.children, element, context, childNamespace, tag, `${path}/${tag}`);
+    if (tag === "select" && (props.modelValue !== undefined || props.defaultValue !== undefined)) {
+        const value = String(read(props.modelValue ?? props.defaultValue));
+        const select = element;
+        if (![...select.options].some((option) => option.value === value))
+            fail("ZR_MODEL_VALUE", "preflight", "matching select option", value, path);
+        for (const option of select.options)
+            option.selected = option.value === value;
+    }
+    if (tag === "input" && read(props.type) === "radio" && props.modelValue !== undefined)
+        setAttribute(element, "checked", read(props.modelValue) === read(props.value));
+    parent.appendChild(element);
+}
+function render(value, parent, context, namespace, parentTag, path) {
+    if (value == null || typeof value === "boolean")
+        return;
+    if (Array.isArray(value)) {
+        marker(context, parent, "f", () => children(value, parent, context, namespace, parentTag, path));
+        return;
+    }
+    if (isReactive(value)) {
+        const initialValue = read(value);
+        const initial = scalar(initialValue, path);
+        marker(context, parent, "t", () => {
+            if (initial)
+                parent.appendChild(context.document.createTextNode(initial));
+        });
+        const opener = parent.childNodes[parent.childNodes.length - (initial ? 3 : 2)];
+        const bindingScope = context.scope;
+        context.operations.push((map, cleanups) => {
+            const start = map.get(opener);
+            const end = start.nextSibling?.nodeType === Node.TEXT_NODE
+                ? start.nextSibling.nextSibling
+                : start.nextSibling;
+            let textNode = start.nextSibling?.nodeType === Node.TEXT_NODE ? start.nextSibling : null;
+            if (!textNode) {
+                textNode = context.document.createTextNode("");
+                start.parentNode.insertBefore(textNode, end ?? null);
+            }
+            const slot = textNode;
+            const subscription = bind(value, bindingScope, context.options, context.container, path, (next) => {
+                const text = scalar(next, path);
+                if (slot.data !== text)
+                    slot.data = text;
+            }, initialValue);
+            cleanups.push(() => subscription.dispose());
+        });
+        return;
+    }
+    if (typeof value === "string" || typeof value === "number") {
+        append(parent, context.document.createTextNode(scalar(value, path)));
+        return;
+    }
+    if (!isDescription(value))
+        fail("ZR_CHILD", "setup", "description", typeof value, path);
+    if (value.type === Fragment) {
+        marker(context, parent, "f", () => children(value.props.children, parent, context, namespace, parentTag, path));
+        return;
+    }
+    if (value.type === Show) {
+        if (restricted.has(parentTag))
+            fail("ZR_UNSUPPORTED_POSITION", "preflight", "flow region", parentTag, path);
+        const props = showProps(value);
+        if (!isReactive(props.when) ||
+            typeof props.children !== "function" ||
+            (props.fallback !== undefined && typeof props.fallback !== "function"))
+            fail("ZR_CHILD", "setup", "Show signal and factories", "invalid props", path);
+        const selected = read(props.when);
+        if (typeof selected !== "boolean")
+            fail("ZR_CHILD", "setup", "boolean Show.when", typeof selected, path);
+        let initial = null;
+        const ends = marker(context, parent, `s:${selected ? 1 : 0}`, () => {
+            const factory = selected ? props.children : props.fallback;
+            if (factory) {
+                initial = owned(context, "Show", namespace, parentTag, path, factory, true);
+                parent.appendChild(initial.fragment);
+            }
+        });
+        const owner = context.scope;
+        context.operations.push((map, cleanups) => {
+            const start = map.get(ends[0]);
+            const end = map.get(ends[1]);
+            let current = initial;
+            let shown = selected;
+            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;
+                try {
+                    if (factory)
+                        replacement = owned(context, "Show", namespace, parentTag, path, factory, false, undefined, owner);
+                    const replacementMap = replacement ? selfMap(replacement.fragment) : null;
+                    if (replacement && replacement.forms.length)
+                        prepareForms(replacement.forms, replacementMap, "mount", context.container);
+                    if (current) {
+                        current.scope.dispose();
+                        let node = start.nextSibling;
+                        while (node && node !== end) {
+                            const following = node.nextSibling;
+                            node.parentNode?.removeChild(node);
+                            node = following;
+                        }
+                    }
+                    if (replacement) {
+                        end.parentNode.insertBefore(replacement.fragment, end);
+                        installOwned(replacement, replacementMap, context, "mount");
+                        replacement.scope.activate();
+                    }
+                    current = replacement;
+                    shown = next;
+                }
+                catch (error) {
+                    replacement?.scope.dispose();
+                    throw error;
+                }
+            }, {
+                active: () => owner.active,
+                report: (code, actual) => report(context.options, diagnostic(context.options, code, "update", path, "Show update", actual)),
+            });
+            subscription.run();
+            cleanups.push(() => subscription.dispose());
+        });
+        return;
+    }
+    if (value.type === For) {
+        if (restricted.has(parentTag))
+            fail("ZR_UNSUPPORTED_POSITION", "preflight", "flow region", parentTag, path);
+        const props = forProps(value);
+        if (!isReactive(props.each) ||
+            typeof props.by !== "function" ||
+            typeof props.children !== "function")
+            fail("ZR_CHILD", "setup", "For signal, key and factory", "invalid props", path);
+        const items = read(props.each);
+        if (!Array.isArray(items))
+            fail("ZR_CHILD", "setup", "array For.each", typeof items, path);
+        const keys = keyed(items, props.by, path);
+        const entries = [];
+        const ends = marker(context, parent, "l", () => {
+            items.forEach((item, index) => {
+                const key = keys[index];
+                const itemView = view(item);
+                const indexView = view(index);
+                const instance = owned(context, "For", namespace, parentTag, path, () => props.children(itemView.value, indexView.value), true, `i:${keyPayload(key)}`);
+                const nodes = [...instance.fragment.childNodes];
+                entries.push({
+                    key,
+                    owned: instance,
+                    start: nodes[0],
+                    end: nodes[nodes.length - 1],
+                    item: itemView,
+                    index: indexView,
+                });
+                parent.appendChild(instance.fragment);
+            });
+        });
+        const owner = context.scope;
+        context.operations.push((map, cleanups) => {
+            let current = entries.map((entry) => ({
+                ...entry,
+                start: map.get(entry.start),
+                end: map.get(entry.end),
+            }));
+            for (const entry of current)
+                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 nextKeys;
+                try {
+                    nextKeys = keyed(next, props.by, path);
+                }
+                catch (error) {
+                    const detail = String(error);
+                    const code = detail.includes("ZR_DUPLICATE_KEY")
+                        ? "ZR_DUPLICATE_KEY"
+                        : detail.includes("ZR_KEY_TYPE")
+                            ? "ZR_KEY_TYPE"
+                            : "ZR_SUBSCRIBER_ERROR";
+                    report(context.options, diagnostic(context.options, code, "update", path, "unique string or finite number keys", detail));
+                    return;
+                }
+                const old = new Map(current.map((entry) => [entry.key, entry]));
+                const created = [];
+                try {
+                    const ordered = nextKeys.map((key, index) => {
+                        const retained = old.get(key);
+                        if (retained)
+                            return retained;
+                        const itemView = view(next[index]);
+                        const indexView = view(index);
+                        const instance = owned(context, "For", namespace, parentTag, path, () => props.children(itemView.value, indexView.value), false, `i:${keyPayload(key)}`, owner);
+                        const nodes = [...instance.fragment.childNodes];
+                        const entry = {
+                            key,
+                            owned: instance,
+                            start: nodes[0],
+                            end: nodes[nodes.length - 1],
+                            item: itemView,
+                            index: indexView,
+                        };
+                        created.push(entry);
+                        return entry;
+                    });
+                    for (const entry of created)
+                        if (entry.owned.forms.length)
+                            prepareForms(entry.owned.forms, selfMap(entry.owned.fragment), "mount", context.container);
+                    for (const entry of current)
+                        if (!nextKeys.includes(entry.key)) {
+                            entry.owned.scope.dispose();
+                            removeRange(entry.start, entry.end);
+                        }
+                    const focused = end.ownerDocument?.activeElement;
+                    const anchored = focused && current.find((entry) => containsRange(entry.start, entry.end, focused));
+                    const anchorIndex = anchored ? ordered.indexOf(anchored) : -1;
+                    const place = (index, before) => {
+                        const entry = ordered[index];
+                        if (created.includes(entry)) {
+                            const itemMap = selfMap(entry.owned.fragment);
+                            before.parentNode.insertBefore(entry.owned.fragment, before);
+                            installOwned(entry.owned, itemMap, context, "mount");
+                            entry.owned.scope.activate();
+                        }
+                        else
+                            moveRange(entry.start, entry.end, before);
+                        return entry.start;
+                    };
+                    let before = end;
+                    for (let index = ordered.length - 1; index > anchorIndex; index--)
+                        before = place(index, before);
+                    if (anchorIndex >= 0) {
+                        before = anchored.start;
+                        for (let index = anchorIndex - 1; index >= 0; index--)
+                            before = place(index, before);
+                    }
+                    batch(() => ordered.forEach((entry, index) => {
+                        entry.item.write(next[index]);
+                        entry.index.write(index);
+                    }));
+                    current = ordered;
+                }
+                catch (error) {
+                    for (const entry of created)
+                        entry.owned.scope.dispose();
+                    throw error;
+                }
+            }, {
+                active: () => owner.active,
+                report: (code, actual) => report(context.options, diagnostic(context.options, code, "update", path, "For update", actual)),
+            });
+            subscription.run();
+            cleanups.push(() => subscription.dispose());
+        });
+        return;
+    }
+    if (typeof value.type === "string") {
+        element(value, parent, context, namespace, parentTag, path);
+        return;
+    }
+    if (typeof value.type !== "function")
+        fail("ZR_CHILD", "setup", "component", typeof value.type, path);
+    if (restricted.has(parentTag))
+        fail("ZR_UNSUPPORTED_POSITION", "preflight", "intrinsic child", "component", path);
+    const component = value.type;
+    const childScope = context.scope.child(component.name || "Anonymous");
+    const previous = context.scope;
+    context.scope = childScope;
+    try {
+        marker(context, parent, "c", () => {
+            const output = withScope(childScope, () => component(value.props));
+            if (output && typeof output === "object" && "then" in output)
+                fail("ZR_ASYNC_COMPONENT", "setup", "synchronous component", "promise", path);
+            render(output, parent, context, namespace, parentTag, path);
+        });
+    }
+    finally {
+        context.scope = previous;
+    }
+}
+function normalize(text, pre) {
+    const line = text.replace(/\r\n?/g, "\n");
+    return pre ? line : line.replace(/[\t\n\f\r ]+/g, " ").replace(/^ | $/g, "");
+}
+function compare(expected, actual, map, context, path, pre = false) {
+    if (expected.nodeType !== actual.nodeType)
+        fail("ZR_HYDRATION_MISMATCH", "preflight", expected.nodeName, actual.nodeName, path);
+    map.set(expected, actual);
+    if (expected.nodeType === Node.TEXT_NODE) {
+        if (normalize(expected.textContent ?? "", pre) !== normalize(actual.textContent ?? "", pre))
+            fail("ZR_HYDRATION_MISMATCH", "preflight", "matching text", "different text", path);
+        return;
+    }
+    if (expected.nodeType === Node.COMMENT_NODE) {
+        if (expected.textContent !== actual.textContent)
+            fail("ZR_HYDRATION_MISMATCH", "preflight", expected.textContent ?? "", actual.textContent ?? "", path);
+        return;
+    }
+    if (expected.nodeType === Node.ELEMENT_NODE) {
+        const wanted = expected;
+        const found = actual;
+        if (wanted.localName !== found.localName || wanted.namespaceURI !== found.namespaceURI)
+            fail("ZR_HYDRATION_MISMATCH", "preflight", `${wanted.namespaceURI}:${wanted.localName}`, `${found.namespaceURI}:${found.localName}`, path);
+        const shape = [...(shapeAttrs[wanted.localName] ?? [])];
+        if (wanted.localName === "input" && (wanted.getAttribute("type") ?? "text") === "radio")
+            shape.push("name", "value");
+        for (const name of shape) {
+            const expectedValue = name === "type" && wanted.localName === "input"
+                ? (wanted.getAttribute(name) ?? "text")
+                : wanted.getAttribute(name);
+            const actualValue = name === "type" && wanted.localName === "input"
+                ? (found.getAttribute(name) ?? "text")
+                : found.getAttribute(name);
+            if (expectedValue !== actualValue)
+                fail("ZR_HYDRATION_MISMATCH", "preflight", `${name}=${expectedValue}`, `${name}=${actualValue}`, path);
+        }
+        if (wanted.localName === "script" || wanted.localName === "style")
+            return;
+        compareChildren(wanted, found, map, context, path, pre || wanted.localName === "pre");
+    }
+}
+function significant(nodes, pre) {
+    return pre
+        ? nodes
+        : nodes.filter((node) => node.nodeType !== Node.TEXT_NODE || normalize(node.textContent ?? "", false) !== "");
+}
+function matchingClose(nodes, start) {
+    const open = nodes[start].textContent ?? "";
+    const id = /^zr:1:(\d+):/.exec(open)?.[1];
+    if (id === undefined)
+        return -1;
+    let depth = 0;
+    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;
+        }
+    }
+    return -1;
+}
+function compareChildren(expected, actual, map, context, path, pre = false) {
+    const wants = significant([...expected.childNodes], pre);
+    const has = significant([...actual.childNodes], pre);
+    let i = 0;
+    let j = 0;
+    while (i < wants.length && j < has.length) {
+        const wanted = wants[i];
+        const found = has[j];
+        const childPath = `${path}/${wanted.nodeName.toLowerCase()}[${i}]`;
+        if (context.opaque.has(wanted)) {
+            compare(wanted, found, map, context, childPath, pre);
+            const wantedEnd = matchingClose(wants, i);
+            const foundEnd = matchingClose(has, j);
+            if (wantedEnd < 0 || foundEnd < 0)
+                fail("ZR_HYDRATION_MISMATCH", "preflight", "balanced rawHtml marker", "missing marker", childPath);
+            map.set(wants[wantedEnd], has[foundEnd]);
+            i = wantedEnd + 1;
+            j = foundEnd + 1;
+            continue;
+        }
+        if (context.textSlots.has(wanted)) {
+            compare(wanted, found, map, context, childPath, pre);
+            const wantedEnd = matchingClose(wants, i);
+            const foundEnd = matchingClose(has, j);
+            if (wantedEnd !== i + 1 && wantedEnd !== i + 2)
+                fail("ZR_HYDRATION_MISMATCH", "preflight", "single text slot", "invalid slot", childPath);
+            if (foundEnd !== j + 1 && foundEnd !== j + 2)
+                fail("ZR_HYDRATION_MISMATCH", "preflight", "single text slot", "invalid slot", childPath);
+            if (wantedEnd === i + 2) {
+                if (foundEnd !== j + 2)
+                    fail("ZR_HYDRATION_MISMATCH", "preflight", "text slot", "empty slot", childPath);
+                compare(wants[i + 1], has[j + 1], map, context, childPath, pre);
+            }
+            else if (foundEnd === j + 2 && normalize(has[j + 1].textContent ?? "", pre) !== "")
+                fail("ZR_HYDRATION_MISMATCH", "preflight", "empty slot", "nonempty slot", childPath);
+            map.set(wants[wantedEnd], has[foundEnd]);
+            i = wantedEnd + 1;
+            j = foundEnd + 1;
+            continue;
+        }
+        compare(wanted, found, map, context, childPath, pre);
+        i++;
+        j++;
+    }
+    if (i !== wants.length || j !== has.length)
+        fail("ZR_HYDRATION_MISMATCH", "preflight", `${wants.length} children`, `${has.length} children`, path);
+}
+function validate(container, options, mode) {
+    const path = rootPath(container);
+    if (storedRoot(container) && !storedRoot(container).disposed)
+        fail("ZR_DUPLICATE_ROOT", "preflight", "unowned root", "live root", path);
+    if (options.signal?.aborted || !container.isConnected)
+        fail("ZR_CANCELLED", "preflight", "connected root", "aborted or disconnected", path);
+    const component = container.getAttribute(mode === "hydrate" ? "data-zfb-island" : "data-zfb-island-skip-ssr") ??
+        container.getAttribute("data-zfb-island");
+    const transport = container.getAttribute("data-zfb-transport");
+    const serverProtocol = container.getAttribute("data-zfb-protocol");
+    const build = container.getAttribute("data-zfb-build");
+    if (component !== options.identity.component ||
+        transport !== "json/1" ||
+        serverProtocol !== protocol ||
+        build !== options.identity.build)
+        fail("ZR_IDENTITY", "preflight", `${options.identity.component}/${protocol}/${options.identity.build}/json/1`, `${component}/${serverProtocol}/${build}/${transport}`, path);
+    if (container.querySelector("[data-zfb-island], [data-zfb-island-skip-ssr]"))
+        fail("ZR_UNSUPPORTED_POSITION", "preflight", "no nested root", "nested root", path);
+}
+function execute(node, container, options, mode) {
+    let scope;
+    const cleanups = [];
+    let committed = false;
+    try {
+        validate(container, options, mode);
+        if (!isDescription(node) ||
+            typeof node.type !== "function" ||
+            (node.type.displayName ?? node.type.name) !==
+                options.identity.component)
+            fail("ZR_IDENTITY", "preflight", options.identity.component, "different child component", rootPath(container));
+        scope = createScope({
+            component: options.identity.component,
+            ...(options.report ? { reporter: options.report } : {}),
+            protocol,
+            build: options.identity.build,
+            path: rootPath(container),
+        });
+        const context = {
+            document: container.ownerDocument,
+            options,
+            container,
+            root: scope,
+            scope,
+            next: 0,
+            operations: [],
+            forms: [],
+            formOwners: new Map(),
+            opaque: new Set(),
+            textSlots: new Set(),
+        };
+        const fragment = container.ownerDocument.createDocumentFragment();
+        render(node, fragment, context, HTML, "", rootPath(container));
+        const built = [...fragment.childNodes];
+        const map = new Map();
+        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);
+        if (mode === "mount")
+            container.replaceChildren(fragment);
+        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);
+        const owned = mode === "hydrate" ? [...container.childNodes] : built;
+        const handle = createRoot(container, options, scope, cleanups, owned);
+        try {
+            scope.activate();
+        }
+        catch (error) {
+            handle.dispose();
+            report(options, diagnostic(options, "ZR_ACTIVATION_ERROR", "activation", rootPath(container), "activation", String(error)));
+            return null;
+        }
+        return handle;
+    }
+    catch (error) {
+        for (const cleanup of [...cleanups].reverse())
+            try {
+                cleanup();
+            }
+            catch {
+                /* preserve original error */
+            }
+        scope?.dispose();
+        const failure = error instanceof Failure
+            ? error
+            : error instanceof FormError
+                ? new Failure(error.code, "preflight", "valid form model", error.detail, error.path)
+                : new Failure(error instanceof TypeError && /ZR_(DUPLICATE_KEY|KEY_TYPE):/.test(error.message)
+                    ? error.message.match(/ZR_(DUPLICATE_KEY|KEY_TYPE):/)[0].slice(0, -1)
+                    : "ZR_HYDRATION_MISMATCH", committed ? "commit" : "setup", "successful root", String(error), rootPath(container));
+        report(options, diagnostic(options, failure.code, failure.phase, failure.path, failure.expected, failure.actual));
+        return null;
+    }
+}
+export function hydrate(node, container, options) {
+    return execute(node, container, options, "hydrate");
+}
+export function mount(node, container, options) {
+    return execute(node, container, options, "mount");
+}
+//# sourceMappingURL=hydrate.js.map