@simpreact/simpreact 0.0.8 → 0.0.9

package/core/patching.js

@@ -1,107 +1,63 @@
-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 { noop } from '../shared/index.js';
+import { normalizeRoot, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_HOST, } from './createElement.js';
+import { pushHostOperationReplaceElement } from './hostOperations.js';
+import { getLifecycleEventBus } from './lifecycleEventBus.js';
 import { isMemo } from './memo.js';
-import { _pushMountEnterFrame } from './mounting.js';
-import { _pushPatchChildrenFrame } from './patchingChildren.js';
-import { PATCH_ENTER, PATCH_EXIT, processStack } from './processStack.js';
+import { pushMountEnterFrame } from './mounting.js';
+import { patchChildren } from './patchingChildren.js';
+import { acquirePatchFrame, 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];
+import { pushUnmountEnterFrame } from './unmounting.js';
+import { bitScanForwardIndex, clearElementHostReference, detachElementFromParent } from './utils.js';
+const patchEnterHandlers = [patchHostEnter, patchFCEnter, patchTextElement, patchPortalEnter, patchFragment];
+const patchExitHandlers = [patchHostExit, patchFCExit, noop, patchPortalExit, noop];
 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,
-    });
+    pushPatchEnterFrame(nextElement, renderRuntime, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace);
     processStack(renderRuntime);
 }
-export function _pushPatchEnterFrame(element, meta) {
-    meta.renderRuntime.renderStack.push({
-        node: element,
-        kind: PATCH_ENTER,
-        meta,
-    });
+export function pushPatchEnterFrame(element, renderRuntime, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace) {
+    renderRuntime.renderStack.push(acquirePatchFrame(renderRuntime, element, PATCH_ENTER, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace));
 }
-export function _pushPatchExitFrame(element, meta) {
-    meta.renderRuntime.renderStack.push({
-        node: element,
-        kind: PATCH_EXIT,
-        meta,
-    });
+function pushPatchExitFrame(element, renderRuntime, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace) {
+    renderRuntime.renderStack.push(acquirePatchFrame(renderRuntime, element, PATCH_EXIT, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace));
 }
-export function _patch(frame) {
-    const nextElement = frame.node;
-    const { prevElement } = frame.meta;
+export function patchEnter(frame) {
+    const { prevElement } = frame;
     // Early return if the elements are different type or have different keys.
-    if (prevElement.type !== nextElement.type || prevElement.key !== nextElement.key) {
-        _replaceWithNewElement(frame);
+    if (prevElement.type !== frame.node.type || prevElement.key !== frame.node.key) {
+        replaceWithNewElement(frame);
         return;
     }
-    patchHandlers[bitScanForwardIndex(frame.node.flag)](frame);
+    patchEnterHandlers[bitScanForwardIndex(frame.node.flag)](frame);
+}
+export function patchExit(frame) {
+    patchExitHandlers[bitScanForwardIndex(frame.node.flag)](frame);
 }
-function _replaceWithNewElement(frame) {
+function replaceWithNewElement(frame) {
     const nextElement = frame.node;
-    const { prevElement, parentReference, context, hostNamespace, renderRuntime } = frame.meta;
-    _pushUnmountEnterFrame(prevElement, frame.meta);
+    const { prevElement, parentReference, context, hostNamespace, renderRuntime } = frame;
+    pushUnmountEnterFrame(prevElement, renderRuntime);
     nextElement.parent = prevElement.parent;
     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,
-        });
+        pushHostOperationReplaceElement(nextElement, renderRuntime, parentReference, prevElement);
+        pushMountEnterFrame(nextElement, renderRuntime, null, null, context, hostNamespace, null);
     }
     else {
-        _clearElementHostReference(prevElement, parentReference, renderRuntime);
-        _pushMountEnterFrame(nextElement, {
-            subtreeRightBoundary: frame.meta.subtreeRightBoundary,
-            renderRuntime,
-            hostNamespace,
-            context,
-            parentReference,
-            placeHolderElement: null,
-        });
+        clearElementHostReference(prevElement, parentReference, renderRuntime);
+        pushMountEnterFrame(nextElement, renderRuntime, parentReference, frame.subtreeRightBoundary, context, hostNamespace, null);
     }
 }
-function _patchHostElement(frame) {
+function patchHostEnter(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 { prevElement, context, hostNamespace, renderRuntime, subtreeRightBoundary, parentReference } = frame;
     nextElement.ref = prevElement.ref;
     nextElement.reference = prevElement.reference;
     renderRuntime.hostAdapter.attachElementToReference(nextElement, nextElement.reference, renderRuntime);
-    _pushPatchExitFrame(nextElement, {
-        prevElement,
-        renderRuntime,
-        hostNamespace,
-        subtreeRightBoundary,
-        context,
-        parentReference,
-    });
-    _pushPatchChildrenFrame(nextElement, {
+    pushPatchExitFrame(nextElement, renderRuntime, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace);
+    patchChildren(nextElement, {
         prevParentElement: prevElement,
         nextChildren: nextElement.children,
         prevChildren: prevElement.children,
@@ -114,162 +70,140 @@ function _patchHostElement(frame) {
         renderRuntime,
     });
 }
-function _patchFunctionalComponent(frame) {
+function patchHostExit(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;
+    const { prevElement, renderRuntime, hostNamespace } = frame;
+    renderRuntime.hostAdapter.patchProps(nextElement.reference, prevElement, nextElement, renderRuntime, hostNamespace);
+    if (prevElement.className !== nextElement.className) {
+        renderRuntime.hostAdapter.setClassname(nextElement.reference, nextElement.className, hostNamespace);
     }
+    applyRef(nextElement);
+}
+function patchFCEnter(frame) {
+    const { prevElement, context, renderRuntime, hostNamespace, subtreeRightBoundary, parentReference } = frame;
+    const jsxElement = frame.node;
     if (prevElement.unmounted) {
-        _pushMountEnterFrame(nextElement, {
-            subtreeRightBoundary,
-            renderRuntime,
-            hostNamespace,
-            context,
-            parentReference,
-            placeHolderElement: null,
-        });
+        pushMountEnterFrame(jsxElement, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespace, null);
         return;
     }
-    nextElement.store = prevElement.store;
-    nextElement.store.latestElement = nextElement;
     if (hostNamespace) {
-        nextElement.store.hostNamespace = hostNamespace;
+        prevElement.hostNamespace = hostNamespace;
+    }
+    // Replace the short-lived JSX element in the parent's children with the long-lived prevElement.
+    if (jsxElement !== prevElement) {
+        swapChildInParent(jsxElement, prevElement);
     }
-    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;
+    // Memo check: compare old props against new props.
+    // Self-rerenders (jsxElement === prevElement) always proceed — state may have changed.
+    const prevProps = prevElement.props;
+    if (jsxElement !== prevElement &&
+        isMemo(prevElement.type) &&
+        prevElement.type._compare(prevProps, jsxElement.props)) {
         return;
     }
-    nextElement.context = prevElement.context || context;
-    const prevElementSnapshot = prevElement === nextElement ? { ...prevElement } : prevElement;
+    prevElement.props = jsxElement.props;
+    prevElement.context = prevElement.context || context;
+    const prevChildFlag = prevElement.childFlag;
+    const prevChildren = prevElement.children;
+    const prevSnapshot = { childFlag: prevChildFlag, children: prevChildren };
     let nextChildren;
-    let triedToRerenderUnsubscribe;
     try {
-        renderRuntime.renderPhase = UPDATING_PHASE;
-        renderRuntime.currentRenderingFCElement = nextElement;
-        let triedToRerender = false;
         let rerenderCounter = 0;
-        triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
-            if (event.type === 'triedToRerender' && event.element === nextElement) {
-                triedToRerender = true;
-            }
-        });
+        renderRuntime.activeRenderElement = prevElement;
+        renderRuntime.pendingRerenderFlag = false;
         do {
-            triedToRerender = false;
+            renderRuntime.pendingRerenderFlag = false;
             if (++rerenderCounter >= 25) {
                 throw new Error('Too many re-renders.');
             }
-            lifecycleEventBus.publish({
+            getLifecycleEventBus(renderRuntime).publish({
                 type: 'beforeRender',
-                element: nextElement,
+                element: prevElement,
                 renderRuntime,
             });
-            nextChildren = renderRuntime.renderer(nextElement.type, nextElement, renderRuntime);
-            lifecycleEventBus.publish({
+            nextChildren = renderRuntime.renderer(prevElement.type, prevElement, renderRuntime);
+            getLifecycleEventBus(renderRuntime).publish({
                 type: 'afterRender',
-                element: nextElement,
+                element: prevElement,
                 renderRuntime,
             });
-        } while (triedToRerender);
-        normalizeRoot(nextElement, nextChildren, false);
-        nextChildren = nextElement.children;
+        } while (renderRuntime.pendingRerenderFlag);
+        normalizeRoot(prevElement, nextChildren, false);
+        nextChildren = prevElement.children;
     }
     catch (error) {
-        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);
+        detachElementFromParent(prevElement);
+        clearElementHostReference(prevElement, parentReference, renderRuntime);
+        pushUnmountEnterFrame(prevElement, renderRuntime);
         const event = {
             type: 'errored',
-            element: nextElement,
+            element: prevElement,
             error,
             handled: false,
             renderRuntime,
         };
-        lifecycleEventBus.publish(event);
+        getLifecycleEventBus(renderRuntime).publish(event);
         if (!event.handled) {
             throw new Error('Error occurred during rendering a component', { cause: event.error });
         }
         return;
     }
     finally {
-        triedToRerenderUnsubscribe();
-        renderRuntime.renderPhase = null;
-        renderRuntime.currentRenderingFCElement = null;
+        renderRuntime.activeRenderElement = null;
     }
-    _pushPatchExitFrame(nextElement, {
-        prevElement,
-        renderRuntime,
-        hostNamespace,
+    pushPatchExitFrame(prevElement, renderRuntime, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace);
+    patchChildren(prevElement, {
         subtreeRightBoundary,
-        context,
-        parentReference,
-    });
-    _pushPatchChildrenFrame(nextElement, {
-        subtreeRightBoundary,
-        prevParentChildFlag: prevElementSnapshot.childFlag,
-        nextParentChildFlag: nextElement.childFlag,
-        prevChildren: prevElementSnapshot.children,
+        prevParentChildFlag: prevChildFlag,
+        nextParentChildFlag: prevElement.childFlag,
+        prevChildren: prevChildren,
         nextChildren: nextChildren,
         renderRuntime,
         hostNamespace,
         parentReference,
-        context,
-        prevParentElement: prevElementSnapshot,
+        context: prevElement.context || context,
+        prevParentElement: prevSnapshot,
     });
 }
-function _patchTextElement(frame) {
+function patchFCExit(frame) {
+    getLifecycleEventBus(frame.renderRuntime).publish({
+        type: 'updated',
+        element: frame.node,
+        renderRuntime: frame.renderRuntime,
+    });
+}
+function swapChildInParent(jsxElement, liveElement) {
+    const parent = jsxElement.parent;
+    if (!parent)
+        return;
+    liveElement.parent = parent;
+    liveElement.index = jsxElement.index;
+    if (parent.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST) {
+        parent.children[jsxElement.index] = liveElement;
+    }
+    else {
+        parent.children = liveElement;
+    }
+}
+function patchTextElement(frame) {
     const nextElement = frame.node;
-    const { prevElement, renderRuntime } = frame.meta;
+    const { prevElement, renderRuntime } = frame;
     nextElement.reference = prevElement.reference;
     if (nextElement.children !== prevElement.children) {
         renderRuntime.hostAdapter.setTextContent(nextElement.reference, nextElement.children);
     }
 }
-function _patchPortal(frame) {
+function patchPortalEnter(frame) {
     const nextElement = frame.node;
-    const { prevElement, renderRuntime, context, subtreeRightBoundary, hostNamespace, parentReference } = frame.meta;
+    const { prevElement, renderRuntime, context, subtreeRightBoundary, hostNamespace, parentReference } = frame;
     const prevContainer = prevElement.ref;
     const nextContainer = nextElement.ref;
     const nextChildren = nextElement.children;
-    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) {
-        _pushPatchExitFrame(nextElement, {
-            prevElement,
-            renderRuntime,
-            hostNamespace,
-            subtreeRightBoundary,
-            context,
-            parentReference,
-        });
+        pushPatchExitFrame(nextElement, renderRuntime, prevElement, parentReference, subtreeRightBoundary, context, hostNamespace);
     }
-    _pushPatchChildrenFrame(nextElement, {
+    patchChildren(nextElement, {
         prevParentElement: prevElement,
         context,
         parentReference: nextContainer,
@@ -282,10 +216,17 @@ function _patchPortal(frame) {
         subtreeRightBoundary,
     });
 }
-function _patchFragment(frame) {
+function patchPortalExit(frame) {
+    const nextElement = frame.node;
+    const { prevElement, renderRuntime } = frame;
+    const nextChildren = nextElement.children;
+    renderRuntime.hostAdapter.removeChild(prevElement.ref, nextChildren.reference);
+    renderRuntime.hostAdapter.insertOrAppend(nextElement.ref, nextChildren.reference, null);
+}
+function patchFragment(frame) {
     const nextElement = frame.node;
-    const { prevElement, renderRuntime, context, parentReference, hostNamespace, subtreeRightBoundary } = frame.meta;
-    _pushPatchChildrenFrame(nextElement, {
+    const { prevElement, renderRuntime, context, parentReference, hostNamespace, subtreeRightBoundary } = frame;
+    patchChildren(nextElement, {
         subtreeRightBoundary,
         context,
         parentReference,