effectweb 0.2.2 → 0.3.0

package/dist/dom.js

@@ -1,9 +1,36 @@
+import attributeData from './dom-attributes.json' with { type: 'json' };
+import { validateIdentities } from './collection.js';
 import { runAll, reportError, reportSafely } from './errors.js';
 import { eventEffects } from './effectEvent.js';
 import { traceBinding } from './diagnostics.js';
-import { shareValue } from './share.js';
+import { shareData } from './sharing.js';
+import { jsxComponent } from './jsx.js';
 import { startMount } from './mount.js';
 const equal = (a, b) => a.length === b.length && a.every((value, index) => Object.is(value, b[index]));
+// A model publication reconciles DOM first and controlled dependent properties second.
+// Nested child scopes join the same synchronous commit; there is no reactive graph.
+let commitDepth = 0;
+const controlCommits = new Set();
+function commitDom(work) {
+    commitDepth++;
+    try {
+        return work();
+    }
+    finally {
+        if (--commitDepth === 0) {
+            for (const apply of controlCommits) {
+                controlCommits.delete(apply);
+                apply();
+            }
+        }
+    }
+}
+function afterDom(apply) {
+    if (commitDepth)
+        controlCommits.add(apply);
+    else
+        apply();
+}
 /** Compiler implementation. No implicit tracking, proxies, or per-binding subscriptions. */
 export class Scope {
     value;
@@ -27,7 +54,7 @@ export class Scope {
                 return value;
             const next = dependencies();
             if (!previous || !equal(previous, next)) {
-                value = previous ? shareValue(value, compute()) : compute();
+                value = previous ? shareData(value, compute()) : compute();
                 traceBinding(source, previous, next, 'derive');
                 previous = next;
             }
@@ -54,18 +81,20 @@ export class Scope {
     set(value) {
         if (this.disposed)
             return;
-        this.value = value;
-        this.revision++;
-        for (const job of this.jobs) {
-            if (this.disposed)
-                break;
-            try {
-                job();
-            }
-            catch (error) {
-                reportSafely(this.report, error);
+        commitDom(() => {
+            this.value = value;
+            this.revision++;
+            for (const job of this.jobs) {
+                if (this.disposed)
+                    break;
+                try {
+                    job();
+                }
+                catch (error) {
+                    reportSafely(this.report, error);
+                }
             }
-        }
+        });
     }
     dispose() {
         if (this.disposed)
@@ -75,6 +104,14 @@ export class Scope {
         runAll(this.cleanups.splice(0).reverse(), this.report);
     }
 }
+/** Compiler marker for mounting a view with an explicit model and message dispatcher. */
+export const ViewBinding = /* @__PURE__ */ Object.assign(function ViewBinding(_props) {
+    throw new Error('ViewBinding reached runtime without the EffectWeb JSX compiler');
+}, { [jsxComponent]: true });
+/** Untyped callers get an actionable failure instead of silently losing child messages. */
+export function unboundSend(_message) {
+    throw new Error('This view needs a dispatcher. Mount it through ViewBinding with model and send.');
+}
 const contentBrand = Symbol('compiled content');
 /** Compiler marker: declare inside view(), or directly in a compiled component prop. */
 export function slot(_render) {
@@ -148,8 +185,14 @@ export function view(_render) {
 export function compiled(build) {
     return Object.assign(() => {
         throw new Error('Mount compiled views with mountView or inside another compiled view');
-    }, { build });
+    }, { build, [jsxComponent]: true });
 }
+/** Owned content in an element target, defaulting to the document body. */
+export const Portal = /* @__PURE__ */ compiled((scope) => {
+    portal(scope, (child, parent, before) => {
+        text(child, parent, before, () => [child.value.children], () => child.value.children);
+    }, () => scope.value.mount);
+});
 function markers(parent, before) {
     const start = document.createComment('');
     const end = document.createComment('');
@@ -210,25 +253,27 @@ function buildFragment(parent) {
     return fragment;
 }
 export function mountView(parent, definition, source, options = {}) {
-    const { start, end } = markers(parent, null);
-    const scope = new Scope(source.model(), source.send, options.onError);
-    let unsubscribe = () => { };
-    try {
-        const fragment = buildFragment(parent);
-        definition.build(scope, fragment, null);
-        parent.insertBefore(fragment, end);
-        unsubscribe = source.subscribe((model) => scope.set(model));
-    }
-    catch (error) {
-        scope.dispose();
-        remove(start, end);
-        throw error;
-    }
-    return () => {
-        if (scope.disposed)
-            return;
-        runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
-    };
+    return commitDom(() => {
+        const { start, end } = markers(parent, null);
+        const scope = new Scope(source.model(), source.send, options.onError);
+        let unsubscribe = () => { };
+        try {
+            const fragment = buildFragment(parent);
+            definition.build(scope, fragment, null);
+            parent.insertBefore(fragment, end);
+            unsubscribe = source.subscribe((model) => scope.set(model));
+        }
+        catch (error) {
+            scope.dispose();
+            remove(start, end);
+            throw error;
+        }
+        return () => {
+            if (scope.disposed)
+                return;
+            runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
+        };
+    });
 }
 export function element(parent, before, tag) {
     const doc = parent.ownerDocument ?? document;
@@ -239,6 +284,7 @@ export function element(parent, before, tag) {
     return node;
 }
 const classTokens = new WeakMap();
+let booleanAttributes;
 const styleProperties = new WeakMap();
 function scalar(value) {
     if (value == null)
@@ -251,7 +297,11 @@ function scalar(value) {
     throw new Error('DOM values must be scalar. Render objects as compiled child views or domain collections.');
 }
 export function attribute(element, name, value) {
-    const key = name === 'className' ? 'class' : name === 'tabIndex' ? 'tabindex' : name;
+    const aliases = attributeData.aliases;
+    const key = aliases[name] ?? name;
+    const booleanValues = attributeData.booleanValues;
+    if (typeof value === 'boolean')
+        value = booleanValues[key]?.[String(value)] ?? value;
     if (name === 'classList') {
         const tokens = (value ?? {});
         const next = new Set();
@@ -287,31 +337,19 @@ export function attribute(element, name, value) {
         if (element.value !== next)
             element.value = next;
     }
-    else if ([
-        'checked',
-        'selected',
-        'disabled',
-        'multiple',
-        'hidden',
-        'autofocus',
-        'controls',
-        'autoplay',
-        'loop',
-        'muted',
-        'playsinline',
-        'readonly',
-        'required',
-        'open',
-        'inert',
-        'download',
-    ].includes(name) &&
-        typeof value === 'boolean') {
-        element.toggleAttribute(name, Boolean(value));
-        if (name in element)
-            Reflect.set(element, name, Boolean(value));
+    else if ((typeof value === 'boolean' || value == null) &&
+        (booleanAttributes ??= new Set(attributeData.boolean)).has(key)) {
+        element.toggleAttribute(key, Boolean(value));
+        const properties = attributeData.properties;
+        const property = properties[key] ?? key;
+        if (typeof Reflect.get(element, property) === 'boolean')
+            Reflect.set(element, property, Boolean(value));
     }
     else if (value == null ||
-        (value === false && !name.startsWith('aria-') && !name.startsWith('data-'))) {
+        (value === false &&
+            !attributeData.booleanish.includes(key) &&
+            !name.startsWith('aria-') &&
+            !name.startsWith('data-'))) {
         element.removeAttribute(key);
     }
     else {
@@ -322,8 +360,142 @@ export function attribute(element, name, value) {
     if (key === 'class')
         for (const token of classTokens.get(element) ?? [])
             element.classList.add(token);
-    if (name === 'style' && (value == null || typeof value !== 'object'))
-        styleProperties.delete(element);
+    if (name === 'style' && (value == null || typeof value !== 'object')) {
+        if (value == null)
+            styleProperties.delete(element);
+        else if ('style' in element)
+            styleProperties.set(element, new Set(Array.from(element.style)));
+    }
+}
+/** Compiler output for attributes whose unchanged value needs no DOM refresh. */
+export function bindAttribute(scope, element, name, dependencies, read, source) {
+    let previous = dependencies();
+    let value = read();
+    attribute(element, name, value);
+    traceBinding(source, undefined, previous, 'binding');
+    if (!previous.length)
+        return;
+    // Keep the value cache in the dependency job itself, without an extra closure
+    // for every row. Controlled input properties keep using ordinary watches.
+    scope.jobs.push(() => {
+        const next = dependencies();
+        if (equal(previous, next))
+            return;
+        const nextValue = read();
+        if (!Object.is(value, nextValue)) {
+            attribute(element, name, nextValue);
+            value = nextValue;
+        }
+        traceBinding(source, previous, next, 'binding');
+        previous = next;
+    });
+}
+const controlRestorations = new WeakMap();
+/** Handled edits can change a control even when dispatch publishes no new model. */
+export function bindControl(scope, element, name, dependencies, read, source) {
+    let composing = false;
+    let deferred = false;
+    let pending;
+    const select = element.tagName === 'SELECT' && name === 'value';
+    const write = () => {
+        if (scope.disposed)
+            return;
+        try {
+            if (composing)
+                deferred = true;
+            else
+                attribute(element, name, read());
+        }
+        catch (error) {
+            reportSafely(scope.report, error);
+        }
+    };
+    const apply = () => {
+        if (select)
+            afterDom(write);
+        else
+            write();
+    };
+    let initialized = false;
+    let published;
+    scope.watch(dependencies, () => {
+        const next = read();
+        // A coarse dependency can change while this field's published value stays equal.
+        // Preserve unfinished blur drafts; handled edits still restore through apply below.
+        if (!initialized || !Object.is(published, next)) {
+            initialized = true;
+            published = next;
+            apply();
+        }
+    }, source);
+    if (select) {
+        // The selected value may stay equal while its options change on this publication.
+        scope.jobs.push(apply);
+        // Options may also belong to a separately updating component or a DOM host.
+        // Observe only option-affecting mutations; setting selectedness does not mutate attributes.
+        const observer = new MutationObserver(apply);
+        observer.observe(element, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['value', 'selected', 'disabled'],
+        });
+        scope.cleanups.push(() => {
+            observer.disconnect();
+            controlCommits.delete(write);
+        });
+    }
+    const restore = () => {
+        if (composing) {
+            deferred = true;
+            return;
+        }
+        if (pending !== undefined || scope.disposed)
+            return;
+        // Native dispatch may run microtasks between listeners. A task waits for all
+        // handlers (including ancestors) before restoring the latest model value.
+        pending = setTimeout(() => {
+            pending = undefined;
+            if (!scope.disposed) {
+                try {
+                    apply();
+                }
+                catch (error) {
+                    reportSafely(scope.report, error);
+                }
+            }
+        }, 0);
+    };
+    const start = () => {
+        composing = true;
+    };
+    const end = () => {
+        composing = false;
+        if (deferred) {
+            deferred = false;
+            restore();
+        }
+    };
+    const handled = (type) => {
+        // Clicking a text control must not commit its unfinished blur draft.
+        if (type !== 'click' || name === 'checked')
+            restore();
+    };
+    let restorations = controlRestorations.get(element);
+    if (!restorations)
+        controlRestorations.set(element, (restorations = new Set()));
+    restorations.add(handled);
+    element.addEventListener('compositionstart', start);
+    element.addEventListener('compositionend', end);
+    scope.cleanups.push(() => {
+        clearTimeout(pending);
+        restorations.delete(handled);
+        if (!restorations.size)
+            controlRestorations.delete(element);
+        element.removeEventListener('compositionstart', start);
+        element.removeEventListener('compositionend', end);
+    });
 }
 export function text(scope, parent, before, dependencies, read, source) {
     const node = document.createTextNode('');
@@ -331,7 +503,11 @@ export function text(scope, parent, before, dependencies, read, source) {
     let start;
     let content;
     scope.watch(dependencies, () => {
-        const value = read();
+        let value = read();
+        if (Array.isArray(value)) {
+            validateContent(value);
+            value = { [contentBrand]: true, definition: arrayContent, value };
+        }
         if (isContent(value)) {
             node.data = '';
             if (content?.definition === value.definition) {
@@ -349,26 +525,93 @@ export function text(scope, parent, before, dependencies, read, source) {
             }
             content = {
                 definition: value.definition,
-                mounted: value.definition.mount(node.parentNode, node, value.value),
+                mounted: value.definition.mount(node.parentNode, node, value.value, scope.report),
             };
             return;
         }
+        if (value != null && typeof value === 'object')
+            throw new Error('Unsupported JSX content. Use compiled views or slots for markup, collections for entities, and an owned DOM host for native nodes.');
+        const next = value == null || typeof value === 'boolean' ? '' : scalar(value);
         if (content) {
             content.mounted.dispose();
             content = undefined;
             clear(start, node);
         }
-        if (value != null && typeof value === 'object')
-            throw new Error('Object rendered as text. Use collection(...).from(items).map(...) for entity lists.');
-        const next = value == null || typeof value === 'boolean' ? '' : scalar(value);
         if (node.data !== next)
             node.data = next;
     }, source);
 }
+function validateContent(value, active = new Set()) {
+    if (Array.isArray(value)) {
+        if (active.has(value))
+            throw new TypeError('JSX content arrays cannot contain cycles.');
+        active.add(value);
+        for (const child of value)
+            validateContent(child, active);
+        active.delete(value);
+    }
+    else if (!isContent(value) &&
+        value != null &&
+        !['string', 'number', 'boolean'].includes(typeof value)) {
+        throw new TypeError('Unsupported JSX content. Use an owned DOM host for native nodes and compiled views for objects.');
+    }
+}
+const arrayContent = {
+    mount: (_parent, before, value, report) => mountArray(report, before, value),
+};
+/** Runtime content arrays are positional; domain lists retain the explicit collection contract. */
+function mountArray(report, before, initial) {
+    const cells = [];
+    const disposeCell = (cell) => {
+        cell.scope.dispose();
+        remove(cell.start, cell.end);
+    };
+    const set = (input) => {
+        const values = input;
+        validateContent(values);
+        while (cells.length > values.length)
+            disposeCell(cells.pop());
+        for (let index = 0; index < values.length; index++) {
+            const cell = cells[index];
+            if (cell) {
+                if (!Object.is(cell.scope.value, values[index]))
+                    cell.scope.set(values[index]);
+                continue;
+            }
+            const scope = new Scope(values[index], unboundSend, report);
+            const fragment = buildFragment(before.parentNode);
+            const range = markers(fragment, null);
+            try {
+                text(scope, fragment, range.end, () => [scope.value], () => scope.value);
+                before.parentNode.insertBefore(fragment, before);
+                cells.push({ scope, ...range });
+            }
+            catch (error) {
+                scope.dispose();
+                throw error;
+            }
+        }
+    };
+    const dispose = () => {
+        for (const cell of cells.splice(0))
+            disposeCell(cell);
+    };
+    try {
+        set(initial);
+    }
+    catch (error) {
+        dispose();
+        throw error;
+    }
+    return { set, dispose };
+}
 export function event(scope, element, name, handler) {
     let effects;
-    const capture = name.endsWith('Capture');
-    const type = name.slice(2, capture ? -7 : undefined).toLowerCase();
+    const capture = name.endsWith('Capture') && name !== 'onGotPointerCapture' && name !== 'onLostPointerCapture';
+    const nativeName = name.slice(2, capture ? -7 : undefined);
+    const type = nativeName === 'Begin' || nativeName === 'End' || nativeName === 'Repeat'
+        ? `${nativeName.toLowerCase()}Event`
+        : nativeName.toLowerCase();
     const listener = (event) => {
         if (!scope.disposed) {
             try {
@@ -381,6 +624,13 @@ export function event(scope, element, name, handler) {
             catch (error) {
                 reportSafely(scope.report, error);
             }
+            finally {
+                // Restore only after an application handler commits or rejects an edit.
+                // The target also covers handlers delegated to an ancestor.
+                if (event.target && ['input', 'change', 'blur', 'focusout', 'click'].includes(type))
+                    for (const restore of controlRestorations.get(event.target) ?? [])
+                        restore(type);
+            }
         }
     };
     element.addEventListener(type, listener, capture);
@@ -389,6 +639,84 @@ export function event(scope, element, name, handler) {
         effects?.dispose();
     });
 }
+/** One handler identity owns its requests, regardless of the JSX attribute spelling. */
+export function bindEvent(scope, element, name, dependencies, read) {
+    let current;
+    let owned;
+    scope.cleanups.push(() => owned?.dispose());
+    scope.watch(dependencies, () => {
+        const next = read();
+        if (next != null && typeof next !== 'function')
+            throw new TypeError(`Event ${name} must be a synchronous handler.`);
+        if (Object.is(current, next))
+            return;
+        owned?.dispose();
+        owned = undefined;
+        current = next;
+        if (typeof next === 'function') {
+            const handler = next;
+            owned = new Scope(next, scope.send, scope.report);
+            event(owned, element, name, handler);
+        }
+    });
+}
+/** Reconcile merged JSX attributes. Each host, event and control owns its cleanup. */
+export function bindAttributes(scope, element, dependencies, read) {
+    const bindings = new Map();
+    let previous = {};
+    const isEvent = (name) => /^on[A-Z]/u.test(name);
+    const isControl = (name) => (name === 'value' && ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName)) ||
+        (name === 'checked' && element.tagName === 'INPUT');
+    scope.cleanups.push(() => {
+        runAll([...bindings.values()].reverse().map((binding) => () => binding.dispose()), scope.report);
+        bindings.clear();
+    });
+    scope.watch(dependencies, () => {
+        const next = read();
+        for (const name of Object.keys(next)) {
+            if (['key', 'ref', 'innerHTML', 'children'].includes(name))
+                throw new Error(`Spread attribute ${name} is unsupported. Use collections, DOM hosts, or JSX children.`);
+            if (isEvent(name) && next[name] != null && typeof next[name] !== 'function')
+                throw new Error(`Spread event ${name} must be a synchronous handler.`);
+        }
+        for (const name of Object.keys(previous)) {
+            if (Object.hasOwn(next, name))
+                continue;
+            bindings.get(name)?.dispose();
+            bindings.delete(name);
+            if (name !== 'use' && !isEvent(name))
+                attribute(element, name, undefined);
+        }
+        for (const [name, value] of Object.entries(next)) {
+            if (name !== 'use' && !isEvent(name) && !isControl(name)) {
+                attribute(element, name, value);
+                continue;
+            }
+            let binding = bindings.get(name);
+            if (binding && Object.is(binding.value, value))
+                continue;
+            if (binding) {
+                binding.set(value);
+                continue;
+            }
+            const owned = new Scope(value, scope.send, scope.report);
+            bindings.set(name, owned);
+            if (name === 'use')
+                attach(owned, element, () => [owned.value], () => owned.value);
+            else if (isControl(name))
+                bindControl(owned, element, name, () => [owned.value], () => owned.value);
+            else
+                bindEvent(owned, element, name, () => [owned.value], () => owned.value);
+        }
+        previous = next;
+    });
+    if (element.tagName === 'SELECT')
+        scope.jobs.push(() => {
+            const binding = bindings.get('value');
+            if (binding)
+                binding.set(binding.value);
+        });
+}
 export function branch(scope, parent, before, choose, yes, no) {
     const { start, end } = markers(parent, before);
     let child;
@@ -430,19 +758,38 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
         const next = read();
         const nextOuter = outer();
         const outerChanged = !equal(previousOuter, nextOuter);
-        if (next === previousList && !outerChanged)
+        if (next === previousList) {
+            if (outerChanged)
+                for (const row of rows.values())
+                    row.scope.set(row.scope.value);
+            previousOuter = nextOuter;
             return;
+        }
         const collection = 'items' in next ? next : undefined;
         const items = collection ? collection.items : next;
-        const identities = items.map((item, index) => {
+        // A list filling its container can clear the DOM in one operation. Root lists
+        // and lists with adjacent content retain their bounded per-row removal path.
+        if (!items.length &&
+            rows.size &&
+            target instanceof Element &&
+            target.firstChild === rows.get(previousIdentities[0])?.start &&
+            target.lastChild === end) {
+            for (const row of rows.values())
+                row.scope.dispose();
+            target.replaceChildren(end);
+            rows.clear();
+            previousList = next;
+            previousOuter = nextOuter;
+            previousIdentities = [];
+            return;
+        }
+        const identities = validateIdentities(items, (item, index) => {
             const key = collection ? collection.identity(item, index) : item;
             if (typeof key !== 'string' && typeof key !== 'number')
                 throw new Error('Object lists need domain identity. Declare collection(identity) once; do not add JSX keys.');
             return key;
         });
         const keep = new Set(identities);
-        if (keep.size !== identities.length)
-            throw new Error('Duplicate collection identity. Identity must be unique within the rendered collection.');
         for (const [key, row] of rows) {
             if (keep.has(key))
                 continue;
@@ -453,7 +800,7 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
         for (let index = 0; index < items.length; index++) {
             const key = identities[index];
             const row = rows.get(key);
-            const item = row ? shareValue(row.scope.value[0], items[index]) : items[index];
+            const item = row ? shareData(row.scope.value[0], items[index]) : items[index];
             if (!row) {
                 const fragment = buildFragment(target);
                 const range = markers(fragment, null);
@@ -552,6 +899,53 @@ export function child(scope, parent, before, definition, dependencies, model, se
             child.set(next);
     });
 }
+/** A late-bound compiled definition owns one replaceable DOM region. */
+export function viewRegion(scope, parent, before) {
+    const { start, end } = markers(parent, before);
+    let active;
+    let definition;
+    scope.jobs.push(() => active?.set(scope.value));
+    scope.cleanups.push(() => {
+        active?.dispose();
+        remove(start, end);
+    });
+    return (next) => commitDom(() => {
+        if (scope.disposed)
+            return;
+        if (definition === next) {
+            active?.set(scope.value);
+            return;
+        }
+        const previous = active;
+        active = undefined;
+        definition = undefined;
+        previous?.dispose();
+        if (scope.disposed)
+            return;
+        clear(start, end);
+        if (!next)
+            return;
+        const child = new Scope(scope.value, scope.send, scope.report);
+        const fragment = buildFragment(end.parentNode);
+        active = child;
+        definition = next;
+        try {
+            next.build(child, fragment, null);
+            if (scope.disposed || active !== child)
+                child.dispose();
+            else
+                end.parentNode.insertBefore(fragment, end);
+        }
+        catch (error) {
+            child.dispose();
+            if (active === child) {
+                active = undefined;
+                definition = undefined;
+            }
+            throw error;
+        }
+    });
+}
 export function attach(scope, element, dependencies, read) {
     let generation = 0;
     let active;
@@ -572,7 +966,11 @@ export function attach(scope, element, dependencies, read) {
         queueMicrotask(() => {
             if (!scope.disposed && token === generation) {
                 try {
-                    active = startMount(element, mount, scope.report);
+                    const acquired = startMount(element, mount, scope.report);
+                    if (scope.disposed || token !== generation)
+                        acquired.dispose();
+                    else
+                        active = acquired;
                 }
                 catch (error) {
                     reportSafely(scope.report, error);
@@ -581,20 +979,74 @@ export function attach(scope, element, dependencies, read) {
         });
     });
 }
-export function portal(scope, build) {
-    const host = document.createElement('div');
-    host.style.display = 'contents';
-    document.body.appendChild(host);
-    const child = new Scope(scope.value, scope.send, scope.report);
+export function portal(scope, build, mount = () => undefined) {
+    let host;
+    let child;
     scope.cleanups.push(() => {
-        child.dispose();
-        host.remove();
+        child?.dispose();
+        host?.remove();
     });
-    build(child, host, null);
-    scope.jobs.push(() => child.set(scope.value));
+    const update = () => {
+        const target = mount() ?? document.body;
+        const svg = svgChildren(target);
+        if (!host || (host.namespaceURI === svgNamespace) !== svg) {
+            child?.dispose();
+            host?.remove();
+            if (scope.disposed)
+                return;
+            host = svg
+                ? target.ownerDocument.createElementNS(svgNamespace, 'g')
+                : target.ownerDocument.createElement('div');
+            host.style.display = 'contents';
+            child = new Scope(scope.value, scope.send, scope.report);
+            target.appendChild(host);
+            build(child, host, null);
+            return;
+        }
+        if (host.parentNode !== target) {
+            const focused = host.ownerDocument.activeElement;
+            const move = Reflect.get(target, 'moveBefore');
+            if (typeof move === 'function' &&
+                target.isConnected &&
+                host.isConnected &&
+                target.ownerDocument === host.ownerDocument)
+                move.call(target, host, null);
+            else
+                target.appendChild(host);
+            if (focused instanceof HTMLElement &&
+                focused.isConnected &&
+                focused.ownerDocument.activeElement !== focused)
+                focused.focus({ preventScroll: true });
+        }
+        child.set(scope.value);
+    };
+    scope.jobs.push(update);
+    update();
+}
+// HTML parsing supplies the initial nodes. Unusual placements, such as mounting
+// an HTML-named view inside SVG, still follow the same namespace rules as element().
+function placeTemplate(parent, node) {
+    if (node.nodeType !== 1) {
+        parent.appendChild(node);
+        return;
+    }
+    const source = node;
+    const namespace = source.localName === 'svg' || svgChildren(parent)
+        ? svgNamespace
+        : 'http://www.w3.org/1999/xhtml';
+    if (source.namespaceURI === namespace) {
+        parent.appendChild(source);
+        return;
+    }
+    const target = element(parent, null, source.localName);
+    for (const attr of source.attributes)
+        target.setAttribute(attr.name, attr.value);
+    while (source.firstChild)
+        placeTemplate(target, source.firstChild);
+    source.remove();
 }
 /** Build static markup once per document/namespace, then clone native nodes at each use. */
-export function template(build) {
+export function template(build, depth = 0) {
     const documents = new WeakMap();
     return (parent, before) => {
         const doc = parent.ownerDocument ?? document;
@@ -609,7 +1061,16 @@ export function template(build) {
             const host = svg
                 ? doc.createElementNS('http://www.w3.org/2000/svg', 'svg')
                 : doc.createElement('div');
-            build(host, null);
+            if (typeof build === 'string') {
+                const source = doc.createElement('template');
+                source.innerHTML = build;
+                let node = source.content.firstChild;
+                for (let index = 0; index < depth; index++)
+                    node = node.firstChild;
+                placeTemplate(host, node);
+            }
+            else
+                build(host, null);
             if (host.firstChild && !host.firstChild.nextSibling) {
                 fragment = host.removeChild(host.firstChild);
             }
@@ -620,7 +1081,9 @@ export function template(build) {
             }
             variants.set(svg, fragment);
         }
-        parent.insertBefore(fragment.cloneNode(true), before);
+        const clone = fragment.cloneNode(true);
+        parent.insertBefore(clone, before);
+        return clone;
     };
 }
 export function literal(parent, before, value) {