@aurumjs/html 0.10.12

package/prebuilt/esnext/rendering/dom_runtime.js

@@ -0,0 +1,970 @@
+import { AURUM_DEVTOOLS_DEBUG_BUILD_ENABLED, ArrayDataSource, DataSource } from '@aurumjs/streams';
+import { aurumElementModelIdentitiy, createAPI as createCoreAPI, createRenderSession, isAurumDevtoolsDebugBuild, linkAurumDomNodeChildren, registerAurumRenderBinding, traceAurumComponentRender } from '@aurumjs/rendering';
+import { listenToRenderBatchState, queueRenderUpdate } from './render_batch.js';
+const aurumElementDomBounds = new WeakMap();
+export class AurumElement {
+    constructor(dataSource, api) {
+        this.disposed = false;
+        this.children = [];
+        this.api = api;
+        if (isAurumDevtoolsDebugBuild()) {
+            this.renderScope = createRenderSession(api.renderSession);
+            this.api.cancellationToken.addCancellable(this.renderScope.sessionToken);
+        }
+        else {
+            this.renderScope = api.renderSession;
+        }
+        this.api.cancellationToken.addCancellable(() => this.dispose());
+        if (dataSource) {
+            this.api.onAttach(() => {
+                if (!this.api.cancellationToken.isCancelled) {
+                    if (this.hostNode === undefined) {
+                        throw new Error('illegal state: Attach fired but not actually attached');
+                    }
+                    this.render(dataSource);
+                }
+            });
+        }
+    }
+    dispose() {
+        var _a;
+        if (this.disposed) {
+            return;
+        }
+        if ((_a = this.hostNode) === null || _a === void 0 ? void 0 : _a.isConnected) {
+            this.clearContent();
+            this.contentStartMarker.remove();
+            this.contentEndMarker.remove();
+        }
+        this.disposed = true;
+    }
+    attachToDom(node, index) {
+        var _a;
+        this.attachToDomBefore(node, (_a = node.childNodes[index]) !== null && _a !== void 0 ? _a : null);
+    }
+    attachToDomBefore(node, referenceNode) {
+        if (this.hostNode) {
+            throw new Error('Aurum Element is already attached');
+        }
+        const id = AurumElement.id++;
+        this.hostNode = node;
+        this.contentStartMarker = document.createComment('START Aurum Node ' + id);
+        //@ts-ignore
+        this.contentStartMarker.owner = this;
+        this.contentEndMarker = document.createComment('END Aurum Node ' + id);
+        aurumElementDomBounds.set(this, [this.contentStartMarker, this.contentEndMarker]);
+        node.insertBefore(this.contentStartMarker, referenceNode);
+        node.insertBefore(this.contentEndMarker, referenceNode);
+    }
+    getStartIndex() {
+        return this.getWorkIndex() - 1;
+    }
+    getWorkIndex() {
+        if (this.lastStartIndex !== undefined && this.hostNode.childNodes[this.lastStartIndex] === this.contentStartMarker) {
+            return this.lastStartIndex + 1;
+        }
+        for (let i = 0; i < this.hostNode.childNodes.length; i++) {
+            if (this.hostNode.childNodes[i] === this.contentStartMarker) {
+                this.lastStartIndex = i;
+                return i + 1;
+            }
+        }
+        return -1;
+    }
+    getLastIndex() {
+        if (this.lastEndIndex !== undefined && this.hostNode.childNodes[this.lastEndIndex] === this.contentEndMarker) {
+            return this.lastEndIndex;
+        }
+        for (let i = 0; i < this.hostNode.childNodes.length; i++) {
+            if (this.hostNode.childNodes[i] === this.contentEndMarker) {
+                this.lastEndIndex = i;
+                return i;
+            }
+        }
+        return -1;
+    }
+    clearContent() {
+        if (this.hostNode === undefined) {
+            throw new Error('illegal state: Aurum element was not attched to anything');
+        }
+        let workIndex = this.getWorkIndex();
+        while (this.hostNode.childNodes[workIndex] !== this.contentEndMarker) {
+            if (!(this.hostNode.childNodes[workIndex] instanceof Comment)) {
+                this.hostNode.removeChild(this.hostNode.childNodes[workIndex]);
+            }
+            else {
+                //@ts-ignore
+                if (this.hostNode.childNodes[workIndex].owner.disposed) {
+                    break;
+                }
+                //@ts-ignore
+                this.hostNode.childNodes[workIndex].owner.dispose();
+            }
+        }
+    }
+    updateDom() {
+        var _a;
+        const workIndex = this.getWorkIndex();
+        if (this.hostNode.childNodes[workIndex] === this.contentEndMarker &&
+            this.children.length > 0 &&
+            this.children.every((child) => child instanceof HTMLElement || child instanceof Text || child instanceof SVGElement)) {
+            const fragment = document.createDocumentFragment();
+            for (const child of this.children)
+                fragment.appendChild(child);
+            const endIndex = this.getLastIndex();
+            this.hostNode.insertBefore(fragment, this.contentEndMarker);
+            this.lastEndIndex = endIndex + this.children.length;
+            this.linkHostChildren();
+            return;
+        }
+        let i;
+        let offset = 0;
+        for (i = 0; i < this.children.length; i++) {
+            const child = this.children[i];
+            if (child === undefined || child === null) {
+                offset--;
+                continue;
+            }
+            if (child === this.hostNode.childNodes[i + workIndex + offset]) {
+                continue;
+            }
+            if (child instanceof AurumElement) {
+                if (!child.hostNode) {
+                    child.attachToDom(this.hostNode, i + workIndex + offset);
+                }
+                if (child.getStartIndex() === i + workIndex + offset) {
+                    offset += child.getLastIndex() - i - offset - workIndex;
+                }
+                else {
+                    let start = child.getStartIndex();
+                    let end = child.getLastIndex();
+                    for (let ptr = start, swapIteration = 0; ptr <= end; ptr++, swapIteration++) {
+                        const itemA = this.hostNode.childNodes[i + workIndex + offset + swapIteration];
+                        const itemB = this.hostNode.childNodes[ptr];
+                        const parentA = itemA.parentNode;
+                        const siblingA = itemA.nextSibling === itemB ? itemB : itemA.nextSibling;
+                        itemB.parentNode.insertBefore(itemA, itemB);
+                        parentA.insertBefore(itemB, siblingA);
+                    }
+                    offset += child.getLastIndex() - i - offset - workIndex;
+                }
+                continue;
+            }
+            if (this.hostNode.childNodes[i + workIndex + offset] !== this.contentEndMarker &&
+                this.hostNode.childNodes[i + workIndex + offset] !== this.children[i] &&
+                this.hostNode.childNodes[i + workIndex + offset] !== ((_a = this.children[i + 1]) === null || _a === void 0 ? void 0 : _a.contentStartMarker)) {
+                if (child instanceof HTMLElement || child instanceof Text || child instanceof SVGElement) {
+                    this.hostNode.removeChild(this.hostNode.childNodes[i + workIndex + offset]);
+                    if (this.hostNode.childNodes[i + workIndex + offset]) {
+                        this.lastEndIndex++;
+                        this.hostNode.insertBefore(child, this.hostNode.childNodes[i + workIndex + offset]);
+                    }
+                    else {
+                        this.lastEndIndex++;
+                        this.hostNode.appendChild(child);
+                    }
+                }
+                else {
+                    throw invalidRenderableError(child);
+                }
+            }
+            else {
+                if (child instanceof HTMLElement || child instanceof Text || child instanceof SVGElement) {
+                    if (this.hostNode.childNodes[i + workIndex + offset]) {
+                        this.lastEndIndex++;
+                        this.hostNode.insertBefore(child, this.hostNode.childNodes[i + workIndex + offset]);
+                    }
+                    else {
+                        this.lastEndIndex++;
+                        this.hostNode.appendChild(child);
+                    }
+                }
+                else {
+                    throw invalidRenderableError(child);
+                }
+            }
+        }
+        while (this.hostNode.childNodes[i + workIndex + offset] !== this.contentEndMarker) {
+            this.lastEndIndex--;
+            this.hostNode.removeChild(this.hostNode.childNodes[i + workIndex + offset]);
+        }
+        this.linkHostChildren();
+    }
+    linkHostChildren() {
+        if (!AURUM_DEVTOOLS_DEBUG_BUILD_ENABLED)
+            return;
+        linkAurumDomNodeChildren(this.hostNode, this.children.filter((child) => child instanceof HTMLElement || child instanceof SVGElement), this.renderScope.sessionToken);
+    }
+}
+AurumElement.id = 1;
+function invalidRenderableError(child) {
+    var _a, _b;
+    return new Error(`Aurum was given an unsupported type to render "${(_b = (_a = child === null || child === void 0 ? void 0 : child.constructor) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : typeof child}". This can happen if you pass a component function directly to Aurum instead of "rendering" it using JSX syntax or Aurum.factory
+Example:
+// Wrong
+<div>
+{LoginComponent}
+</div>
+
+vs
+
+// Correct
+<div>
+<LoginComponent/>
+</div>
+
+or
+
+// Correct
+<div>
+{Aurum.factory(LoginComponent, {})}
+</div>`);
+}
+export function renderInternal(element, session, prerendering = false) {
+    if (element == undefined || typeof element === 'boolean') {
+        return undefined;
+    }
+    if (Array.isArray(element)) {
+        const result = [];
+        for (const item of element) {
+            const rendered = renderInternal(item, session, prerendering);
+            // Flatten the rendered content into a single array to avoid having to iterate over nested arrays later
+            if (rendered !== undefined && rendered !== null) {
+                if (Array.isArray(rendered)) {
+                    result.push(...rendered);
+                }
+                else {
+                    result.push(rendered);
+                }
+            }
+        }
+        return result;
+    }
+    if (!prerendering) {
+        const type = typeof element;
+        if (type === 'string') {
+            return document.createTextNode(element);
+        }
+        else if (type === 'number' || type === 'bigint') {
+            return document.createTextNode(element.toString());
+        }
+        if (element instanceof Promise) {
+            const ds = new DataSource();
+            element.then((val) => {
+                ds.update(val);
+            });
+            return new SingularAurumElement(ds, createDOMAPI(session));
+        }
+        else if (element instanceof DataSource) {
+            return new SingularAurumElement(element, createDOMAPI(session));
+        }
+        else if (element instanceof ArrayDataSource) {
+            return new ArrayAurumElement(element, createDOMAPI(session));
+        }
+    }
+    if (element[aurumElementModelIdentitiy]) {
+        const model = element;
+        if (model.isIntrinsic) {
+            // Optimization: skip creating API for no-props basic HTML nodes because they are by far the most frequent.
+            const api = model.props ? createDOMAPI(session) : { renderSession: session };
+            return renderInternal(model.factory(model.props, model.children, api), session, prerendering);
+        }
+        return traceAurumComponentRender(model, session, () => {
+            var _a;
+            const api = createDOMAPI(session);
+            return renderInternal(model.factory((_a = model.props) !== null && _a !== void 0 ? _a : {}, model.children, api), session, prerendering);
+        });
+    }
+    // Unsupported types are returned as is in hope that a transclusion component will transform it into something compatible
+    return element;
+}
+/** @internal Creates a component API whose prerender output belongs to the DOM host. */
+export function createDOMAPI(session) {
+    return createCoreAPI(session, (target, subSession) => renderInternal(target, subSession, true));
+}
+/**
+ * Marks the members of one longest strictly increasing subsequence.
+ * Entries flagged true can keep their DOM position during a reorder.
+ */
+function markLongestIncreasingSubsequence(sequence) {
+    const stable = new Array(sequence.length).fill(false);
+    if (sequence.length === 0)
+        return stable;
+    const predecessors = new Array(sequence.length);
+    // Indices into sequence of the smallest known tail for each subsequence length.
+    const tails = [];
+    for (let index = 0; index < sequence.length; index++) {
+        const value = sequence[index];
+        let low = 0;
+        let high = tails.length;
+        while (low < high) {
+            const mid = (low + high) >> 1;
+            if (sequence[tails[mid]] < value)
+                low = mid + 1;
+            else
+                high = mid;
+        }
+        predecessors[index] = low > 0 ? tails[low - 1] : -1;
+        tails[low] = index;
+    }
+    let cursor = tails[tails.length - 1];
+    while (cursor !== -1) {
+        stable[cursor] = true;
+        cursor = predecessors[cursor];
+    }
+    return stable;
+}
+export class ArrayAurumElement extends AurumElement {
+    constructor(dataSource, api) {
+        super(dataSource, api);
+        this.entries = [];
+        this.batchedContentCommit = (change) => {
+            if (!this.disposed)
+                this.handleBatchedContent(change);
+        };
+        this.dataSource = dataSource;
+        registerAurumRenderBinding(dataSource, this, 'DOM collection', api.cancellationToken, api.renderSession);
+    }
+    dispose() {
+        var _a;
+        if (this.disposed) {
+            return;
+        }
+        this.api.cancellationToken.cancel();
+        if (this.disposed)
+            return;
+        for (const entry of this.entries) {
+            (_a = entry.session) === null || _a === void 0 ? void 0 : _a.sessionToken.cancel();
+        }
+        super.dispose();
+    }
+    attachToDomBefore(node, referenceNode) {
+        super.attachToDomBefore(node, referenceNode);
+        //@ts-ignore
+        this.contentStartMarker.dataSource = this.dataSource;
+        //@ts-ignore
+        this.contentEndMarker.dataSource = this.dataSource;
+    }
+    render(dataSource) {
+        dataSource.listenAndRepeat((n) => {
+            if (!this.disposed) {
+                this.handleNewContent(n);
+            }
+        }, this.api.cancellationToken);
+    }
+    queueBatchedContent(change) {
+        queueRenderUpdate(this, this.batchedContentCommit, change);
+    }
+    static setRenderBatching(active) {
+        ArrayAurumElement.prototype.handleNewContent = active ? ArrayAurumElement.prototype.queueBatchedContent : ArrayAurumElement.immediateContentCommit;
+    }
+    handleBatchedContent(change) {
+        const batchedChange = {
+            ...change,
+            operation: 'merge',
+            operationDetailed: 'merge',
+            index: 0,
+            items: change.newState
+        };
+        // Identity metadata is non-enumerable and therefore is not preserved by
+        // the spread above. Carry the final identities into snapshot reconciliation.
+        Object.defineProperty(batchedChange, 'newStateIdentities', {
+            value: change.newStateIdentities,
+            enumerable: false
+        });
+        ArrayAurumElement.immediateContentCommit.call(this, batchedChange);
+    }
+    synchronizeChildren() {
+        this.children = this.entries.map((entry) => entry.rendered);
+    }
+    removeEntriesFromDom(index, count) {
+        const removed = this.entries.splice(index, count);
+        this.children.splice(index, count);
+        this.detachEntriesFromDom(removed);
+    }
+    detachEntriesFromDom(removed) {
+        var _a;
+        for (const entry of removed) {
+            if (!(entry.rendered instanceof AurumElement)) {
+                entry.rendered.remove();
+            }
+            (_a = entry.session) === null || _a === void 0 ? void 0 : _a.sessionToken.cancel();
+        }
+        this.lastEndIndex = undefined;
+    }
+    insertEntryGapBefore(entries, anchorIndex) {
+        if (entries.length === 0)
+            return;
+        const anchor = anchorIndex >= this.entries.length ? this.contentEndMarker : this.entries[anchorIndex].rendered;
+        if (entries.every((entry) => !(entry.rendered instanceof AurumElement))) {
+            const fragment = document.createDocumentFragment();
+            for (const entry of entries)
+                fragment.appendChild(entry.rendered);
+            const referenceNode = anchor instanceof AurumElement ? this.hostNode.childNodes[this.getEntryDomIndex(anchorIndex)] : anchor;
+            this.hostNode.insertBefore(fragment, referenceNode);
+            this.lastEndIndex = undefined;
+            return;
+        }
+        const targetIndex = this.getEntryDomIndex(anchorIndex);
+        for (let itemIndex = entries.length - 1; itemIndex >= 0; itemIndex--) {
+            this.attachRendered(entries[itemIndex].rendered, targetIndex);
+        }
+    }
+    getEntryDomIndex(index) {
+        if (index === 0)
+            return this.getWorkIndex();
+        if (index >= this.entries.length)
+            return this.getLastIndex();
+        const rendered = this.entries[index].rendered;
+        for (let domIndex = this.getWorkIndex(); domIndex < this.getLastIndex(); domIndex++) {
+            const node = this.hostNode.childNodes[domIndex];
+            if (node === rendered || node.owner === rendered)
+                return domIndex;
+        }
+        return this.getLastIndex();
+    }
+    insertEntries(index, values, identities, attachCalls) {
+        const anchor = index >= this.entries.length ? this.contentEndMarker : this.entries[index].rendered;
+        const referenceNode = anchor instanceof AurumElement ? undefined : anchor;
+        const newEntries = values.map((value, itemIndex) => this.renderEntry(value, identities === null || identities === void 0 ? void 0 : identities[itemIndex], attachCalls));
+        // Ranges still require a numeric DOM position. Resolve it before changing
+        // the entry array, but avoid the scan for the overwhelmingly common case
+        // where both the inserted entries and their anchor are ordinary nodes.
+        const targetIndex = newEntries.some((entry) => entry.rendered instanceof AurumElement) ? this.getEntryDomIndex(index) : undefined;
+        this.entries.splice(index, 0, ...newEntries);
+        this.children.splice(index, 0, ...newEntries.map((entry) => entry.rendered));
+        if (newEntries.length > 0 && newEntries.every((entry) => !(entry.rendered instanceof AurumElement))) {
+            const fragment = document.createDocumentFragment();
+            for (const entry of newEntries)
+                fragment.appendChild(entry.rendered);
+            this.hostNode.insertBefore(fragment, referenceNode !== null && referenceNode !== void 0 ? referenceNode : this.contentEndMarker);
+            this.lastEndIndex = undefined;
+            return;
+        }
+        // Insert before one stable anchor from right to left. This works for both
+        // single DOM nodes and comment-bounded AurumElement ranges.
+        for (let itemIndex = newEntries.length - 1; itemIndex >= 0; itemIndex--) {
+            this.attachRendered(newEntries[itemIndex].rendered, targetIndex);
+        }
+    }
+    tryApplySubsequenceRemoval(desiredIdentities) {
+        if (desiredIdentities.length >= this.entries.length)
+            return false;
+        const removals = [];
+        const retainedEntries = [];
+        let desiredIndex = 0;
+        let removalStart = -1;
+        for (let entryIndex = 0; entryIndex < this.entries.length; entryIndex++) {
+            if (desiredIndex < desiredIdentities.length && this.entries[entryIndex].identity === desiredIdentities[desiredIndex]) {
+                if (removalStart !== -1) {
+                    removals.push({ index: removalStart, count: entryIndex - removalStart });
+                    removalStart = -1;
+                }
+                retainedEntries.push(this.entries[entryIndex]);
+                desiredIndex++;
+            }
+            else if (removalStart === -1) {
+                removalStart = entryIndex;
+            }
+        }
+        if (desiredIndex !== desiredIdentities.length)
+            return false;
+        if (removalStart !== -1)
+            removals.push({ index: removalStart, count: this.entries.length - removalStart });
+        // The DOM groups are independent, so remove them without repeatedly
+        // splicing the backing arrays (which becomes quadratic for a filter).
+        for (const removal of removals) {
+            this.detachEntriesFromDom(this.entries.slice(removal.index, removal.index + removal.count));
+        }
+        this.entries = retainedEntries;
+        this.synchronizeChildren();
+        return true;
+    }
+    tryApplySubsequenceGrowth(desiredIdentities, desiredValues, attachCalls) {
+        if (desiredIdentities.length <= this.entries.length)
+            return false;
+        const gaps = [];
+        let entryIndex = 0;
+        let gapStart = -1;
+        for (let desiredIndex = 0; desiredIndex < desiredIdentities.length; desiredIndex++) {
+            if (entryIndex < this.entries.length && desiredIdentities[desiredIndex] === this.entries[entryIndex].identity) {
+                if (gapStart !== -1) {
+                    gaps.push({ valueIndex: gapStart, end: desiredIndex, entryIndex });
+                    gapStart = -1;
+                }
+                entryIndex++;
+            }
+            else if (gapStart === -1) {
+                gapStart = desiredIndex;
+            }
+        }
+        if (entryIndex !== this.entries.length)
+            return false;
+        if (gapStart !== -1)
+            gaps.push({ valueIndex: gapStart, end: desiredIdentities.length, entryIndex });
+        const renderedGaps = gaps.map((gap) => ({
+            ...gap,
+            entries: desiredValues
+                .slice(gap.valueIndex, gap.end)
+                .map((value, index) => this.renderEntry(value, desiredIdentities[gap.valueIndex + index], attachCalls))
+        }));
+        // Insert from right to left against the unchanged retained-entry array.
+        // This keeps every anchor stable and avoids thousands of array splices.
+        for (let index = renderedGaps.length - 1; index >= 0; index--) {
+            const gap = renderedGaps[index];
+            this.insertEntryGapBefore(gap.entries, gap.entryIndex);
+        }
+        const desiredEntries = [];
+        let retainedStart = 0;
+        for (const gap of renderedGaps) {
+            desiredEntries.push(...this.entries.slice(retainedStart, gap.entryIndex), ...gap.entries);
+            retainedStart = gap.entryIndex;
+        }
+        desiredEntries.push(...this.entries.slice(retainedStart));
+        this.entries = desiredEntries;
+        this.synchronizeChildren();
+        // Each gap is committed as one fragment when its entries have a single
+        // DOM root; retained nodes are never detached or moved.
+        return true;
+    }
+    tryApplySingleRotation(desiredIdentities) {
+        const length = this.entries.length;
+        if (length < 2 || desiredIdentities.length !== length)
+            return false;
+        const first = this.entries[0];
+        const firstRendered = first.rendered;
+        if (desiredIdentities[length - 1] === first.identity) {
+            let isLeftRotation = true;
+            for (let index = 0; index < length - 1; index++) {
+                if (desiredIdentities[index] !== this.entries[index + 1].identity) {
+                    isLeftRotation = false;
+                    break;
+                }
+            }
+            if (isLeftRotation) {
+                this.moveRenderedBefore(firstRendered, this.contentEndMarker);
+                this.entries.push(this.entries.shift());
+                this.children.push(this.children.shift());
+                return true;
+            }
+        }
+        const last = this.entries[length - 1];
+        const lastRendered = last.rendered;
+        if (desiredIdentities[0] === last.identity) {
+            let isRightRotation = true;
+            for (let index = 1; index < length; index++) {
+                if (desiredIdentities[index] !== this.entries[index - 1].identity) {
+                    isRightRotation = false;
+                    break;
+                }
+            }
+            if (isRightRotation) {
+                this.moveRenderedBefore(lastRendered, this.firstDomNode(firstRendered));
+                this.entries.unshift(this.entries.pop());
+                this.children.unshift(this.children.pop());
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Keyed reconciliation for arbitrary merges: retained entries forming a longest
+     * increasing subsequence of the previous order stay put, everything else is
+     * moved or inserted right-to-left against a stable anchor. DOM operations are
+     * proportional to the entries that actually changed position.
+     */
+    applyMergeReconciliation(desiredIdentities, desiredValues, attachCalls) {
+        const entriesByIdentity = new Map(this.entries.map((entry) => [entry.identity, entry]));
+        const retainedEntries = new Set();
+        const desiredEntries = new Array(desiredValues.length);
+        const isNewEntry = new Array(desiredValues.length);
+        for (let index = 0; index < desiredValues.length; index++) {
+            const retained = entriesByIdentity.get(desiredIdentities[index]);
+            if (retained !== undefined) {
+                desiredEntries[index] = retained;
+                isNewEntry[index] = false;
+                retainedEntries.add(retained);
+            }
+            else {
+                desiredEntries[index] = this.renderEntry(desiredValues[index], desiredIdentities[index], attachCalls);
+                isNewEntry[index] = true;
+            }
+        }
+        const removedEntries = [];
+        const previousIndexByEntry = new Map();
+        for (let index = 0; index < this.entries.length; index++) {
+            const entry = this.entries[index];
+            if (retainedEntries.has(entry)) {
+                previousIndexByEntry.set(entry, index);
+            }
+            else {
+                removedEntries.push(entry);
+            }
+        }
+        if (removedEntries.length > 0) {
+            this.detachEntriesFromDom(removedEntries);
+        }
+        if (retainedEntries.size === 0 && desiredEntries.every((entry) => !(entry.rendered instanceof AurumElement))) {
+            const fragment = document.createDocumentFragment();
+            for (const entry of desiredEntries)
+                fragment.appendChild(entry.rendered);
+            this.hostNode.insertBefore(fragment, this.contentEndMarker);
+        }
+        else {
+            const retainedDesiredIndices = [];
+            const previousOrder = [];
+            for (let index = 0; index < desiredEntries.length; index++) {
+                if (!isNewEntry[index]) {
+                    retainedDesiredIndices.push(index);
+                    previousOrder.push(previousIndexByEntry.get(desiredEntries[index]));
+                }
+            }
+            const stableFlags = markLongestIncreasingSubsequence(previousOrder);
+            const stableByDesiredIndex = new Array(desiredEntries.length).fill(false);
+            for (let sequenceIndex = 0; sequenceIndex < retainedDesiredIndices.length; sequenceIndex++) {
+                if (stableFlags[sequenceIndex])
+                    stableByDesiredIndex[retainedDesiredIndices[sequenceIndex]] = true;
+            }
+            let anchor = this.contentEndMarker;
+            for (let index = desiredEntries.length - 1; index >= 0; index--) {
+                const rendered = desiredEntries[index].rendered;
+                if (stableByDesiredIndex[index]) {
+                    anchor = this.firstDomNode(rendered);
+                    continue;
+                }
+                if (isNewEntry[index]) {
+                    if (rendered instanceof AurumElement) {
+                        rendered.attachToDomBefore(this.hostNode, anchor);
+                    }
+                    else {
+                        this.hostNode.insertBefore(rendered, anchor);
+                    }
+                }
+                else {
+                    this.moveRenderedBefore(rendered, anchor);
+                }
+                anchor = this.firstDomNode(rendered);
+            }
+        }
+        this.entries = desiredEntries;
+        this.synchronizeChildren();
+        this.lastEndIndex = undefined;
+        this.linkHostChildren();
+    }
+    handleNewContent(change) {
+        var _a, _b, _c;
+        if (this.hostNode === undefined) {
+            throw new Error('illegal state: Aurum element was not attched to anything');
+        }
+        let optimized = false;
+        const attachCalls = [];
+        switch (change.operationDetailed) {
+            case 'merge': {
+                const desiredIdentities = (_a = change.newStateIdentities) !== null && _a !== void 0 ? _a : [];
+                if (this.tryApplySingleRotation(desiredIdentities)) {
+                    optimized = true;
+                    break;
+                }
+                const sharedPrefixLength = Math.min(this.entries.length, desiredIdentities.length);
+                let retainedPrefixLength = 0;
+                while (retainedPrefixLength < sharedPrefixLength && this.entries[retainedPrefixLength].identity === desiredIdentities[retainedPrefixLength]) {
+                    retainedPrefixLength++;
+                }
+                if (retainedPrefixLength === this.entries.length) {
+                    if (change.newState.length > this.entries.length) {
+                        this.insertEntries(this.entries.length, change.newState.slice(this.entries.length), desiredIdentities.slice(this.entries.length), attachCalls);
+                    }
+                    optimized = true;
+                    break;
+                }
+                if (retainedPrefixLength === change.newState.length) {
+                    this.removeEntriesFromDom(change.newState.length, this.entries.length - change.newState.length);
+                    optimized = true;
+                    break;
+                }
+                if (this.tryApplySubsequenceRemoval(desiredIdentities)) {
+                    optimized = true;
+                    break;
+                }
+                if (this.tryApplySubsequenceGrowth(desiredIdentities, change.newState, attachCalls)) {
+                    optimized = true;
+                    break;
+                }
+                this.applyMergeReconciliation(desiredIdentities, change.newState, attachCalls);
+                optimized = true;
+                break;
+            }
+            case 'remove':
+            case 'removeLeft':
+            case 'removeRight':
+                this.removeEntriesFromDom(change.index, change.items.length);
+                optimized = true;
+                break;
+            case 'append': {
+                this.insertEntries(this.entries.length, change.items, change.itemIdentities, attachCalls);
+                optimized = true;
+                break;
+            }
+            case 'replace': {
+                const oldEntry = this.entries[change.index];
+                const newEntry = this.renderEntry(change.items[0], (_b = change.itemIdentities) === null || _b === void 0 ? void 0 : _b[0], attachCalls);
+                if (!(oldEntry.rendered instanceof AurumElement) && !(newEntry.rendered instanceof AurumElement)) {
+                    oldEntry.rendered.replaceWith(newEntry.rendered);
+                    (_c = oldEntry.session) === null || _c === void 0 ? void 0 : _c.sessionToken.cancel();
+                    this.entries[change.index] = newEntry;
+                    this.children[change.index] = newEntry.rendered;
+                }
+                else {
+                    const targetIndex = this.getEntryDomIndex(change.index);
+                    this.removeEntriesFromDom(change.index, 1);
+                    this.entries.splice(change.index, 0, newEntry);
+                    this.children.splice(change.index, 0, newEntry.rendered);
+                    this.attachRendered(newEntry.rendered, targetIndex);
+                }
+                optimized = true;
+                break;
+            }
+            case 'swap': {
+                const entryA = this.entries[change.index];
+                const entryB = this.entries[change.index2];
+                this.swapRendered(entryA.rendered, entryB.rendered, change.index, change.index2);
+                this.entries[change.index] = entryB;
+                this.entries[change.index2] = entryA;
+                this.children[change.index] = entryB.rendered;
+                this.children[change.index2] = entryA.rendered;
+                optimized = true;
+                break;
+            }
+            case 'prepend':
+                this.insertEntries(0, change.items, change.itemIdentities, attachCalls);
+                optimized = true;
+                break;
+            case 'insert':
+                this.insertEntries(change.index, change.items, change.itemIdentities, attachCalls);
+                optimized = true;
+                break;
+            case 'clear':
+                this.removeEntriesFromDom(0, this.entries.length);
+                optimized = true;
+                break;
+            default:
+                throw new Error(`DOM updates from ${change.operationDetailed} are not supported`);
+        }
+        if (!optimized) {
+            this.synchronizeChildren();
+            this.updateDom();
+        }
+        for (const call of attachCalls) {
+            call();
+        }
+    }
+    renderEntry(sourceValue, identity, attachCalls) {
+        const sourceType = typeof sourceValue;
+        if (sourceType === 'string' || sourceType === 'number' || sourceType === 'bigint') {
+            return {
+                identity,
+                sourceValue,
+                rendered: document.createTextNode(String(sourceValue))
+            };
+        }
+        if (sourceValue instanceof HTMLElement || sourceValue instanceof Text || sourceValue instanceof SVGElement) {
+            return { identity, sourceValue, rendered: sourceValue };
+        }
+        const session = createRenderSession(this.renderScope);
+        let rendered = renderInternal(sourceValue, session);
+        if (Array.isArray(rendered)) {
+            if (rendered.length === 1) {
+                rendered = rendered[0];
+            }
+            else {
+                rendered = new StaticAurumElement(rendered, createDOMAPI(session));
+            }
+        }
+        else if (rendered === undefined || rendered === null) {
+            rendered = new StaticAurumElement([], createDOMAPI(session));
+        }
+        if (rendered instanceof AurumElement) {
+            session.sessionToken.addCancellable(() => rendered.dispose());
+        }
+        attachCalls.push(...session.attachCalls);
+        return { identity, sourceValue, rendered: rendered, session };
+    }
+    attachRendered(rendered, targetIndex) {
+        if (rendered instanceof AurumElement) {
+            rendered.attachToDom(this.hostNode, targetIndex);
+            this.lastEndIndex = this.getLastIndex();
+            return this.lastEndIndex;
+        }
+        if (rendered instanceof HTMLElement || rendered instanceof Text || rendered instanceof SVGElement) {
+            this.hostNode.insertBefore(rendered, this.hostNode.childNodes[targetIndex]);
+            this.lastEndIndex++;
+            return targetIndex + 1;
+        }
+        throw invalidRenderableError(rendered);
+    }
+    swapDomNodes(nodeA, nodeB) {
+        if (nodeA.nextSibling === nodeB) {
+            nodeB.parentNode.insertBefore(nodeB, nodeA);
+            return;
+        }
+        if (nodeB.nextSibling === nodeA) {
+            nodeA.parentNode.insertBefore(nodeA, nodeB);
+            return;
+        }
+        const parentA = nodeA.parentNode;
+        const siblingA = nodeA.nextSibling;
+        nodeB.parentNode.insertBefore(nodeA, nodeB);
+        parentA.insertBefore(nodeB, siblingA);
+    }
+    firstDomNode(rendered) {
+        return rendered instanceof AurumElement ? aurumElementDomBounds.get(rendered)[0] : rendered;
+    }
+    lastDomNode(rendered) {
+        return rendered instanceof AurumElement ? aurumElementDomBounds.get(rendered)[1] : rendered;
+    }
+    moveRenderedBefore(rendered, referenceNode) {
+        if (!(rendered instanceof AurumElement)) {
+            if (rendered.nextSibling !== referenceNode) {
+                this.hostNode.insertBefore(rendered, referenceNode);
+            }
+            return;
+        }
+        const [first, last] = aurumElementDomBounds.get(rendered);
+        if (last.nextSibling === referenceNode)
+            return;
+        const afterLast = last.nextSibling;
+        let node = first;
+        while (node !== afterLast) {
+            const next = node.nextSibling;
+            this.hostNode.insertBefore(node, referenceNode);
+            node = next;
+        }
+    }
+    swapRendered(first, second, firstIndex, secondIndex) {
+        if (!(first instanceof AurumElement) && !(second instanceof AurumElement)) {
+            this.swapDomNodes(first, second);
+            return;
+        }
+        const low = firstIndex < secondIndex ? first : second;
+        const high = firstIndex < secondIndex ? second : first;
+        const adjacent = this.lastDomNode(low).nextSibling === this.firstDomNode(high);
+        const afterHigh = this.lastDomNode(high).nextSibling;
+        this.moveRenderedBefore(high, this.firstDomNode(low));
+        if (!adjacent)
+            this.moveRenderedBefore(low, afterHigh);
+    }
+}
+ArrayAurumElement.immediateContentCommit = ArrayAurumElement.prototype.handleNewContent;
+export class SingularAurumElement extends AurumElement {
+    constructor(dataSource, api) {
+        super(dataSource, api);
+        this.batchedContentCommit = (newValue) => {
+            if (!this.disposed)
+                SingularAurumElement.immediateContentCommit.call(this, newValue);
+        };
+        this.api.cancellationToken.addCancellable(() => { var _a; return (_a = this.renderSession) === null || _a === void 0 ? void 0 : _a.sessionToken.cancel(); });
+        this.dataSource = dataSource;
+        registerAurumRenderBinding(dataSource, this, 'DOM reactive content', api.cancellationToken, api.renderSession);
+    }
+    dispose() {
+        if (this.disposed) {
+            return;
+        }
+        this.api.cancellationToken.cancel();
+        if (this.disposed)
+            return;
+        super.dispose();
+    }
+    attachToDomBefore(node, referenceNode) {
+        super.attachToDomBefore(node, referenceNode);
+        //@ts-ignore
+        this.contentStartMarker.dataSource = this.dataSource;
+        //@ts-ignore
+        this.contentEndMarker.dataSource = this.dataSource;
+    }
+    render(dataSource) {
+        dataSource.listenAndRepeat((n) => {
+            if (!this.disposed) {
+                this.handleNewContent(n);
+            }
+        }, this.api.cancellationToken);
+    }
+    queueBatchedContent(newValue) {
+        queueRenderUpdate(this, this.batchedContentCommit, newValue);
+    }
+    static setRenderBatching(active) {
+        SingularAurumElement.prototype.handleNewContent = active
+            ? SingularAurumElement.prototype.queueBatchedContent
+            : SingularAurumElement.immediateContentCommit;
+    }
+    handleNewContent(newValue) {
+        if (this.lastValue === newValue) {
+            return;
+        }
+        let optimized = false;
+        if (this.children.length === 1 && this.children[0] instanceof Text) {
+            const type = typeof newValue;
+            if (type === 'string' || type === 'bigint' || type === 'number') {
+                this.children[0].nodeValue = String(newValue);
+                optimized = true;
+            }
+        }
+        if (!optimized) {
+            this.fullRebuild(newValue);
+            this.updateDom();
+            for (const cb of this.renderSession.attachCalls) {
+                cb();
+            }
+        }
+        this.lastValue = newValue;
+    }
+    fullRebuild(newValue) {
+        this.clearContent();
+        this.endSession();
+        this.renderSession = createRenderSession(this.renderScope);
+        let rendered = renderInternal(newValue, this.renderSession);
+        if (rendered === undefined) {
+            this.children = [];
+            return;
+        }
+        if (!Array.isArray(rendered)) {
+            rendered = [rendered];
+        }
+        for (const item of rendered) {
+            if (item instanceof AurumElement) {
+                this.renderSession.sessionToken.addCancellable(() => {
+                    item.dispose();
+                });
+            }
+        }
+        if (Array.isArray(rendered)) {
+            this.children = rendered;
+        }
+    }
+    endSession() {
+        if (this.renderSession) {
+            this.renderSession.sessionToken.cancel();
+            this.renderSession = undefined;
+        }
+    }
+}
+SingularAurumElement.immediateContentCommit = SingularAurumElement.prototype.handleNewContent;
+/**
+ * A lightweight range used only when an array entry has zero or multiple roots.
+ */
+class StaticAurumElement extends AurumElement {
+    constructor(children, api) {
+        super(undefined, api);
+        this.children = children;
+    }
+    attachToDomBefore(node, referenceNode) {
+        super.attachToDomBefore(node, referenceNode);
+        this.updateDom();
+    }
+    render() { }
+}
+listenToRenderBatchState((active) => {
+    ArrayAurumElement.setRenderBatching(active);
+    SingularAurumElement.setRenderBatching(active);
+});
+//# sourceMappingURL=dom_runtime.js.map