@simpreact/simpreact 0.0.5 → 0.0.7

package/core/patching.js

@@ -1,81 +1,157 @@
-import { emptyObject } from '../shared/index.js';
-import { normalizeRoot } from './createElement.js';
-import { hostAdapter } from './hostAdapter.js';
-import { clearElementHostReference, remove, unmount } from './unmounting.js';
-import { mount, mountArrayChildren, mountFunctionalElement } from './mounting.js';
-import { applyRef } from './ref.js';
+import { normalizeRoot, SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_EMPTY, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_HOST, } from './createElement.js';
+import { _pushHostOperationReplaceElement } from './hostOperations.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
 import { isMemo } from './memo.js';
-export function patch(prevElement, nextElement, parentReference, nextReference, context, hostNamespace) {
+import { _pushMountEnterFrame } from './mounting.js';
+import { _pushPatchChildrenFrame } from './patchingChildren.js';
+import { PATCH_ENTER, PATCH_EXIT, processStack } from './processStack.js';
+import { applyRef } from './ref.js';
+import { UPDATING_PHASE } from './runtime.js';
+import { _pushUnmountEnterFrame } from './unmounting.js';
+import { _clearElementHostReference, bitScanForwardIndex } from './utils.js';
+const patchHandlers = [_patchHostElement, _patchFunctionalComponent, _patchTextElement, _patchPortal, _patchFragment];
+export function patch(prevElement, nextElement, parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime) {
+    if (renderRuntime.renderStack.length !== 0) {
+        throw new Error('Cannot patch while rendering.');
+    }
+    _pushPatchEnterFrame(nextElement, {
+        prevElement,
+        parentReference,
+        renderRuntime,
+        subtreeRightBoundary,
+        context,
+        hostNamespace,
+    });
+    processStack(renderRuntime);
+}
+export function _pushPatchEnterFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: element,
+        kind: PATCH_ENTER,
+        meta,
+    });
+}
+export function _pushPatchExitFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: element,
+        kind: PATCH_EXIT,
+        meta,
+    });
+}
+export function _patch(frame) {
+    const nextElement = frame.node;
+    const { prevElement } = frame.meta;
+    // Early return if the elements are different type or have different keys.
     if (prevElement.type !== nextElement.type || prevElement.key !== nextElement.key) {
-        replaceWithNewElement(prevElement, nextElement, parentReference, context, hostNamespace);
-    }
-    else if (nextElement.flag === 'HOST') {
-        patchHostElement(prevElement, nextElement, context, hostNamespace);
-    }
-    else if (nextElement.flag === 'FC') {
-        patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, context, hostNamespace);
-    }
-    else if (nextElement.flag === 'TEXT') {
-        patchTextElement(prevElement, nextElement);
-    }
-    else if (nextElement.flag === 'FRAGMENT') {
-        patchFragment(prevElement, nextElement, parentReference, context, hostNamespace);
-    }
-    else {
-        patchPortal(prevElement, nextElement, context);
+        _replaceWithNewElement(frame);
+        return;
     }
+    patchHandlers[bitScanForwardIndex(frame.node.flag)](frame);
 }
-function replaceWithNewElement(prevElement, nextElement, parentReference, context, hostNamespace) {
-    unmount(prevElement);
+function _replaceWithNewElement(frame) {
+    const nextElement = frame.node;
+    const { prevElement, parentReference, context, hostNamespace, renderRuntime } = frame.meta;
+    _pushUnmountEnterFrame(prevElement, frame.meta);
     nextElement.parent = prevElement.parent;
-    if (nextElement.flag === 'HOST' && prevElement.flag === 'HOST') {
-        mount(nextElement, null, null, context, hostNamespace);
-        hostAdapter.replaceChild(parentReference, nextElement.reference, prevElement.reference);
+    if ((nextElement.flag & SIMP_ELEMENT_FLAG_HOST) !== 0 && (prevElement.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
+        _pushHostOperationReplaceElement(nextElement, renderRuntime, {
+            prevElement,
+            parentReference,
+        });
+        _pushMountEnterFrame(nextElement, {
+            context,
+            hostNamespace,
+            renderRuntime,
+            parentReference: null,
+            subtreeRightBoundary: null,
+            placeHolderElement: null,
+        });
     }
     else {
-        mount(nextElement, parentReference, findHostReferenceFromElement(prevElement), context, hostNamespace);
-        clearElementHostReference(prevElement, parentReference);
+        _clearElementHostReference(prevElement, parentReference, renderRuntime);
+        _pushMountEnterFrame(nextElement, {
+            subtreeRightBoundary: frame.meta.subtreeRightBoundary,
+            renderRuntime,
+            hostNamespace,
+            context,
+            parentReference,
+            placeHolderElement: null,
+        });
     }
 }
-function patchHostElement(prevElement, nextElement, context, hostNamespace) {
-    if (prevElement.ref) {
-        nextElement.ref = prevElement.ref;
+function _patchHostElement(frame) {
+    const nextElement = frame.node;
+    const { prevElement, context, hostNamespace, renderRuntime, subtreeRightBoundary, parentReference } = frame.meta;
+    if (frame.kind === PATCH_EXIT) {
+        renderRuntime.hostAdapter.patchProps(nextElement.reference, prevElement, nextElement, renderRuntime, hostNamespace);
+        if (prevElement.className !== nextElement.className) {
+            renderRuntime.hostAdapter.setClassname(nextElement.reference, nextElement.className, hostNamespace);
+        }
+        applyRef(nextElement);
+        return;
     }
-    const hostNamespaces = hostAdapter.getHostNamespaces(nextElement, hostNamespace);
-    hostNamespace = hostNamespaces?.self;
+    nextElement.ref = prevElement.ref;
     nextElement.reference = prevElement.reference;
-    hostAdapter.attachElementToReference(nextElement, nextElement.reference);
-    patchChildren(prevElement.children || prevElement.props?.children, nextElement.children || nextElement.props?.children, nextElement.reference, null, nextElement, context, hostNamespaces?.children);
-    hostAdapter.patchProps(nextElement.reference, prevElement, nextElement, hostNamespace);
-    if (prevElement.className !== nextElement.className) {
-        hostAdapter.setClassname(nextElement.reference, nextElement.className, hostNamespace);
-    }
-    applyRef(nextElement);
+    renderRuntime.hostAdapter.attachElementToReference(nextElement, nextElement.reference, renderRuntime);
+    _pushPatchExitFrame(nextElement, {
+        prevElement,
+        renderRuntime,
+        hostNamespace,
+        subtreeRightBoundary,
+        context,
+        parentReference,
+    });
+    _pushPatchChildrenFrame(nextElement, {
+        prevParentElement: prevElement,
+        nextChildren: nextElement.children,
+        prevChildren: prevElement.children,
+        nextParentChildFlag: nextElement.childFlag,
+        prevParentChildFlag: prevElement.childFlag,
+        subtreeRightBoundary,
+        hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(nextElement, hostNamespace)?.children,
+        context,
+        parentReference: nextElement.reference,
+        renderRuntime,
+    });
 }
-function patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, context, hostNamespace) {
-    nextElement.store = prevElement.store || {};
-    nextElement.store.latestElement = nextElement;
-    if (hostNamespace) {
-        nextElement.store.hostNamespace = hostNamespace;
-    }
-    let forceRender = false;
-    if (prevElement.store?.forceRender) {
-        forceRender = true;
-        prevElement.store.forceRender = false;
+function _patchFunctionalComponent(frame) {
+    const nextElement = frame.node;
+    const { prevElement, context, renderRuntime, hostNamespace, subtreeRightBoundary, parentReference } = frame.meta;
+    if (frame.kind === PATCH_EXIT) {
+        lifecycleEventBus.publish({ type: 'updated', element: nextElement, renderRuntime });
+        return;
     }
     if (prevElement.unmounted) {
-        mountFunctionalElement(nextElement, parentReference, nextReference, context, hostNamespace);
+        _pushMountEnterFrame(nextElement, {
+            subtreeRightBoundary,
+            renderRuntime,
+            hostNamespace,
+            context,
+            parentReference,
+            placeHolderElement: null,
+        });
         return;
     }
-    if (!forceRender && isMemo(nextElement.type) && nextElement.type._compare(prevElement.props, nextElement.props)) {
+    nextElement.store = prevElement.store;
+    nextElement.store.latestElement = nextElement;
+    if (hostNamespace) {
+        nextElement.store.hostNamespace = hostNamespace;
+    }
+    if (isMemo(nextElement.type) &&
+        !nextElement.store.forceRerender &&
+        nextElement.type._compare(prevElement.props, nextElement.props)) {
+        nextElement.childFlag = prevElement.childFlag;
+        nextElement.children = prevElement.children;
+        nextElement.context = prevElement.context;
         return;
     }
     nextElement.context = prevElement.context || context;
-    // FC element always has Maybe<SimpElement> children due to normalization process.
+    const prevElementSnapshot = prevElement === nextElement ? { ...prevElement } : prevElement;
     let nextChildren;
     let triedToRerenderUnsubscribe;
     try {
+        renderRuntime.renderPhase = UPDATING_PHASE;
+        renderRuntime.currentRenderingFCElement = nextElement;
         let triedToRerender = false;
         let rerenderCounter = 0;
         triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
@@ -88,220 +164,137 @@ function patchFunctionalComponent(prevElement, nextElement, parentReference, nex
             if (++rerenderCounter >= 25) {
                 throw new Error('Too many re-renders.');
             }
-            lifecycleEventBus.publish({ type: 'beforeRender', element: nextElement, phase: 'updating' });
-            nextChildren = nextElement.type(nextElement.props || emptyObject);
-            lifecycleEventBus.publish({ type: 'afterRender', element: nextElement, phase: 'updating' });
+            lifecycleEventBus.publish({
+                type: 'beforeRender',
+                element: nextElement,
+                renderRuntime,
+            });
+            nextChildren = renderRuntime.renderer(nextElement.type, nextElement, renderRuntime);
+            lifecycleEventBus.publish({
+                type: 'afterRender',
+                element: nextElement,
+                renderRuntime,
+            });
         } while (triedToRerender);
-        nextChildren = normalizeRoot(nextChildren, false);
+        normalizeRoot(nextElement, nextChildren, false);
+        nextChildren = nextElement.children;
     }
     catch (error) {
-        lifecycleEventBus.publish({ type: 'errored', element: nextElement, error, phase: 'updating' });
-        remove(prevElement, parentReference);
+        const parentChildren = prevElement.parent?.children;
+        if (prevElement.parent?.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST) {
+            const parentChildrenList = parentChildren;
+            parentChildrenList.splice(prevElement.index, 1);
+            if (parentChildrenList.length === 1) {
+                prevElement.parent.children = parentChildrenList[0];
+                prevElement.parent.childFlag = SIMP_ELEMENT_CHILD_FLAG_ELEMENT;
+            }
+            else {
+                for (let i = prevElement.index; i < parentChildrenList.length; i++) {
+                    parentChildrenList[i].index = i;
+                }
+            }
+        }
+        else if (prevElement.parent) {
+            prevElement.parent.childFlag = SIMP_ELEMENT_CHILD_FLAG_EMPTY;
+            prevElement.parent.children = null;
+        }
+        _clearElementHostReference(prevElement, parentReference, renderRuntime);
+        _pushUnmountEnterFrame(prevElement, frame.meta);
+        const event = {
+            type: 'errored',
+            element: nextElement,
+            error,
+            handled: false,
+            renderRuntime,
+        };
+        lifecycleEventBus.publish(event);
+        if (!event.handled) {
+            throw new Error('Error occurred during rendering a component', { cause: event.error });
+        }
         return;
     }
     finally {
         triedToRerenderUnsubscribe();
-    }
-    // Keep prevElement's children reference when prev and next elements are identical to avoid reassignment.
-    const prevChildren = prevElement.children;
-    if (nextChildren) {
-        nextElement.children = nextChildren;
-    }
-    patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, nextElement.context, hostNamespace);
-    lifecycleEventBus.publish({ type: 'updated', element: nextElement });
+        renderRuntime.renderPhase = null;
+        renderRuntime.currentRenderingFCElement = null;
+    }
+    _pushPatchExitFrame(nextElement, {
+        prevElement,
+        renderRuntime,
+        hostNamespace,
+        subtreeRightBoundary,
+        context,
+        parentReference,
+    });
+    _pushPatchChildrenFrame(nextElement, {
+        subtreeRightBoundary,
+        prevParentChildFlag: prevElementSnapshot.childFlag,
+        nextParentChildFlag: nextElement.childFlag,
+        prevChildren: prevElementSnapshot.children,
+        nextChildren: nextChildren,
+        renderRuntime,
+        hostNamespace,
+        parentReference,
+        context,
+        prevParentElement: prevElementSnapshot,
+    });
 }
-function patchTextElement(prevElement, nextElement) {
+function _patchTextElement(frame) {
+    const nextElement = frame.node;
+    const { prevElement, renderRuntime } = frame.meta;
     nextElement.reference = prevElement.reference;
     if (nextElement.children !== prevElement.children) {
-        hostAdapter.setTextContent(nextElement.reference, nextElement.children);
-    }
-}
-function patchFragment(prevElement, nextElement, parentReference, context, hostNamespace) {
-    let nextReference = null;
-    if (Array.isArray(prevElement.children) && !Array.isArray(nextElement.children) && nextElement.children) {
-        nextReference = hostAdapter.findNextSiblingReference(findHostReferenceFromElement(prevElement.children[prevElement.children.length - 1]));
+        renderRuntime.hostAdapter.setTextContent(nextElement.reference, nextElement.children);
     }
-    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, nextElement, context, hostNamespace);
 }
-export function patchPortal(prevElement, nextElement, context) {
+function _patchPortal(frame) {
+    const nextElement = frame.node;
+    const { prevElement, renderRuntime, context, subtreeRightBoundary, hostNamespace, parentReference } = frame.meta;
     const prevContainer = prevElement.ref;
     const nextContainer = nextElement.ref;
     const nextChildren = nextElement.children;
-    patchChildren(prevElement.children, nextChildren, prevContainer, null, nextElement, context, hostAdapter.getHostNamespaces(nextChildren, undefined)?.self);
+    if (frame.kind === PATCH_EXIT) {
+        renderRuntime.hostAdapter.removeChild(prevContainer, nextChildren.reference);
+        renderRuntime.hostAdapter.insertOrAppend(nextContainer, nextChildren.reference, null);
+        return;
+    }
     nextElement.reference = prevElement.reference;
     if (prevContainer !== nextContainer && nextChildren != null) {
-        hostAdapter.removeChild(prevContainer, nextChildren.reference);
-        hostAdapter.appendChild(nextContainer, nextChildren.reference);
-    }
-}
-export function updateFunctionalComponent(element, parentReference, nextReference, context, hostNamespace) {
-    patchFunctionalComponent(element, element, parentReference, nextReference, context, hostNamespace);
-}
-function patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, context, hostNamespace) {
-    if (Array.isArray(prevChildren)) {
-        if (Array.isArray(nextChildren)) {
-            for (const child of nextChildren) {
-                child.parent = nextElement;
-            }
-            patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, context, hostNamespace);
-        }
-        else if (typeof nextChildren === 'string') {
-            unmount(prevChildren);
-            hostAdapter.setTextContent(parentReference, nextChildren);
-        }
-        else if (nextChildren) {
-            patchKeyedChildren(prevChildren, [nextChildren], parentReference, nextReference, context, hostNamespace);
-        }
-        else {
-            unmount(prevChildren);
-            hostAdapter.clearNode(parentReference);
-        }
-    }
-    else if (typeof prevChildren === 'string') {
-        if (Array.isArray(nextChildren)) {
-            hostAdapter.clearNode(parentReference);
-            mountArrayChildren(nextChildren, parentReference, nextReference, context, nextElement, hostNamespace);
-        }
-        else if (typeof nextChildren === 'string') {
-            if (prevChildren !== nextChildren) {
-                hostAdapter.setTextContent(nextElement.reference, nextChildren, true);
-            }
-        }
-        else if (nextChildren) {
-            hostAdapter.clearNode(parentReference);
-            nextChildren.parent = nextElement;
-            mount(nextChildren, parentReference, nextReference, context, hostNamespace);
-        }
-        else {
-            hostAdapter.clearNode(parentReference);
-        }
-    }
-    else if (prevChildren) {
-        if (Array.isArray(nextChildren)) {
-            patchKeyedChildren([prevChildren], nextChildren, parentReference, nextReference, context, hostNamespace);
-        }
-        else if (typeof nextChildren === 'string') {
-            unmount(prevChildren);
-            hostAdapter.setTextContent(parentReference, nextChildren);
-        }
-        else if (nextChildren) {
-            nextChildren.parent = nextElement;
-            patch(prevChildren, nextChildren, parentReference, nextReference, context, hostNamespace);
-        }
-        else {
-            remove(prevChildren, parentReference);
-        }
-    }
-    else {
-        if (Array.isArray(nextChildren)) {
-            mountArrayChildren(nextChildren, parentReference, nextReference, context, nextElement, hostNamespace);
-        }
-        else if (typeof nextChildren === 'string') {
-            hostAdapter.setTextContent(parentReference, nextChildren);
-        }
-        else if (nextChildren) {
-            nextChildren.parent = nextElement;
-            mount(nextChildren, parentReference, nextReference, context, hostNamespace);
-        }
-    }
-}
-export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, context, hostNamespace) {
-    let prevStart = 0;
-    let nextStart = 0;
-    let prevEnd = prevChildren.length - 1;
-    let nextEnd = nextChildren.length - 1;
-    // Step 1: Sync from start
-    while (prevStart <= prevEnd &&
-        nextStart <= nextEnd &&
-        prevChildren[prevStart].key === nextChildren[nextStart].key) {
-        patch(prevChildren[prevStart], nextChildren[nextStart], parentReference, null, context, hostNamespace);
-        prevStart++;
-        nextStart++;
-    }
-    // Step 2: Sync from end
-    while (prevStart <= prevEnd && nextStart <= nextEnd && prevChildren[prevEnd].key === nextChildren[nextEnd].key) {
-        patch(prevChildren[prevEnd], nextChildren[nextEnd], parentReference, null, context, hostNamespace);
-        prevEnd--;
-        nextEnd--;
-    }
-    // Step 3: Mount new nodes if prev list is exhausted
-    if (prevStart > prevEnd) {
-        const before = findHostReferenceFromElement(nextChildren[nextEnd + 1]) || nextReference;
-        for (let i = nextStart; i <= nextEnd; i++) {
-            mount(nextChildren[i], parentReference, before, context, hostNamespace);
-        }
-        // Step 4: Remove prev nodes if next list is exhausted
-    }
-    else if (nextStart > nextEnd) {
-        for (let i = prevStart; i <= prevEnd; i++) {
-            remove(prevChildren[i], parentReference);
-        }
-    }
-    // Step 5: Full diff with keyed lookup and movement
-    else {
-        // Create map of keys to indices for prev children
-        const keyToPrevIndexMap = new Map();
-        for (let i = prevStart; i <= prevEnd; i++) {
-            const key = prevChildren[i].key;
-            if (key != null) {
-                keyToPrevIndexMap.set(key, i);
-            }
-        }
-        // Track reused indices and move plan
-        const toMove = new Array(nextEnd - nextStart + 1);
-        const usedIndices = new Set();
-        // Match and patch/mount
-        for (let i = nextStart; i <= nextEnd; i++) {
-            const nextChild = nextChildren[i];
-            const prevIndex = keyToPrevIndexMap.get(nextChild.key);
-            if (prevIndex != null) {
-                const prevElement = prevChildren[prevIndex];
-                patch(prevElement, nextChild, parentReference, null, context, hostNamespace);
-                toMove[i - nextStart] = prevIndex;
-                usedIndices.add(prevIndex);
-            }
-            else {
-                mount(nextChild, parentReference, findHostReferenceFromElement(nextChildren[i + 1]) || nextReference, context, hostNamespace);
-                toMove[i - nextStart] = -1;
-            }
-        }
-        // Remove nodes not matched
-        for (let i = prevStart; i <= prevEnd; i++) {
-            if (!usedIndices.has(i)) {
-                remove(prevChildren[i], parentReference);
-            }
-        }
-        // Insert in correct order
-        for (let i = nextEnd; i >= nextStart; i--) {
-            const currentChild = nextChildren[i];
-            const reference = findHostReferenceFromElement(nextChildren[i + 1]) || nextReference;
-            if (toMove[i - nextStart] !== -1) {
-                hostAdapter.insertBefore(parentReference, currentChild.reference, reference);
-            }
-        }
-    }
-}
-export function findParentReferenceFromElement(element) {
-    let flag;
-    let temp = element;
-    while (temp != null) {
-        flag = temp.flag;
-        if (flag === 'HOST') {
-            return temp.reference;
-        }
-        temp = temp.parent;
+        _pushPatchExitFrame(nextElement, {
+            prevElement,
+            renderRuntime,
+            hostNamespace,
+            subtreeRightBoundary,
+            context,
+            parentReference,
+        });
     }
-    return null;
+    _pushPatchChildrenFrame(nextElement, {
+        prevParentElement: prevElement,
+        context,
+        parentReference: nextContainer,
+        hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(nextChildren, undefined)?.self,
+        renderRuntime,
+        prevChildren: prevElement.children,
+        nextChildren,
+        nextParentChildFlag: nextElement.childFlag,
+        prevParentChildFlag: prevElement.childFlag,
+        subtreeRightBoundary,
+    });
 }
-export function findHostReferenceFromElement(element) {
-    let flag;
-    let temp = element;
-    while (temp != null) {
-        flag = temp.flag;
-        if (flag === 'HOST' || flag === 'TEXT' || flag === 'PORTAL') {
-            return temp.reference;
-        }
-        temp = (Array.isArray(temp.children) ? temp.children[0] : temp.children);
-    }
-    return null;
+function _patchFragment(frame) {
+    const nextElement = frame.node;
+    const { prevElement, renderRuntime, context, parentReference, hostNamespace, subtreeRightBoundary } = frame.meta;
+    _pushPatchChildrenFrame(nextElement, {
+        subtreeRightBoundary,
+        context,
+        parentReference,
+        prevParentChildFlag: prevElement.childFlag,
+        nextParentChildFlag: nextElement.childFlag,
+        nextChildren: nextElement.children,
+        prevChildren: prevElement.children,
+        renderRuntime,
+        hostNamespace,
+        prevParentElement: prevElement,
+    });
 }

package/core/patchingChildren.d.ts

@@ -0,0 +1,6 @@
+import { type SimpElement } from './createElement.js';
+import { type PatchChildrenFrame, type PatchChildrenFrameMeta } from './processStack.js';
+export declare function _pushPatchChildrenFrame(parent: SimpElement, meta: PatchChildrenFrameMeta): void;
+export declare function _pushPatchKeyedChildrenFrame(element: SimpElement, meta: PatchChildrenFrameMeta): void;
+export declare function _patchChildren(frame: PatchChildrenFrame): void;
+export declare function _patchKeyedChildren(frame: PatchChildrenFrame): void;