@simpreact/simpreact 0.0.6 → 0.0.8

package/core/mounting.js

@@ -1,18 +1,19 @@
-import { createTextElement, normalizeRoot, SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_CHILD_FLAG_TEXT, } from './createElement.js';
+import { createTextElement, normalizeRoot, SIMP_ELEMENT_CHILD_FLAG_TEXT, } from './createElement.js';
 import { _pushHostOperationPlaceElement } from './hostOperations.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
+import { _pushMountChildrenFrame } from './mountingChildren.js';
 import { MOUNT_ENTER, MOUNT_EXIT, processStack } from './processStack.js';
 import { applyRef } from './ref.js';
 import { MOUNTING_PHASE } from './runtime.js';
 import { bitScanForwardIndex } from './utils.js';
 const mountHandlers = [_mountHostElement, _mountFunctionalElement, _mountTextElement, _mountPortal, _mountFragment];
-export function mount(element, parentReference, rightSibling, context, hostNamespace, renderRuntime) {
+export function mount(element, parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime) {
     if (renderRuntime.renderStack.length !== 0) {
         throw new Error('Cannot mount while rendering.');
     }
     _pushMountEnterFrame(element, {
         parentReference,
-        rightSibling,
+        subtreeRightBoundary,
         context,
         hostNamespace,
         renderRuntime,
@@ -37,18 +38,9 @@ function _pushMountExitFrame(element, meta) {
         meta,
     });
 }
-export function _pushMountArrayChildrenFrame(element, meta) {
-    const children = element.children;
-    for (let i = children.length - 1; i >= 0; i--) {
-        const child = children[i];
-        child.parent = element;
-        const rightSibling = children[child.index + 1] ?? meta.rightSibling;
-        _pushMountEnterFrame(child, { ...meta, rightSibling });
-    }
-}
 function _mountHostElement(frame) {
     const element = frame.node;
-    const { parentReference, rightSibling, context, hostNamespace, renderRuntime } = frame.meta;
+    const { parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime } = frame.meta;
     if (frame.kind === MOUNT_EXIT) {
         if (element.childFlag === SIMP_ELEMENT_CHILD_FLAG_TEXT) {
             renderRuntime.hostAdapter.setTextContent(element.reference, element.props.children);
@@ -62,7 +54,7 @@ function _mountHostElement(frame) {
         if (parentReference) {
             _pushHostOperationPlaceElement(element, {
                 renderRuntime,
-                rightSibling,
+                subtreeRightBoundary,
                 parentReference,
             });
         }
@@ -75,39 +67,23 @@ function _mountHostElement(frame) {
     _pushMountExitFrame(element, {
         renderRuntime,
         hostNamespace: hostNamespaces?.self,
-        rightSibling,
+        subtreeRightBoundary,
         context,
         parentReference,
         placeHolderElement: null,
     });
-    switch (element.childFlag) {
-        case SIMP_ELEMENT_CHILD_FLAG_LIST: {
-            _pushMountArrayChildrenFrame(element, {
-                renderRuntime,
-                hostNamespace: hostNamespaces?.children,
-                rightSibling: null,
-                context,
-                parentReference: hostReference,
-                placeHolderElement: null,
-            });
-            break;
-        }
-        case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
-            element.children.parent = element;
-            _pushMountEnterFrame(element.children, {
-                renderRuntime,
-                hostNamespace: hostNamespaces?.children,
-                rightSibling: null,
-                context,
-                parentReference: hostReference,
-                placeHolderElement: null,
-            });
-        }
-    }
+    _pushMountChildrenFrame(element, {
+        renderRuntime,
+        hostNamespace: hostNamespaces?.children,
+        subtreeRightBoundary,
+        context,
+        parentReference: hostReference,
+        children: element.children,
+    });
 }
 function _mountFunctionalElement(frame) {
     const element = frame.node;
-    const { parentReference, rightSibling, context, hostNamespace, renderRuntime } = frame.meta;
+    const { parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime } = frame.meta;
     if (frame.kind === MOUNT_EXIT) {
         lifecycleEventBus.publish({ type: 'mounted', element, renderRuntime });
         return;
@@ -154,6 +130,7 @@ function _mountFunctionalElement(frame) {
             });
         } while (triedToRerender);
         normalizeRoot(element, children, false);
+        children = element.children;
     }
     catch (error) {
         const event = {
@@ -176,37 +153,28 @@ function _mountFunctionalElement(frame) {
     }
     _pushMountExitFrame(element, {
         renderRuntime,
-        hostNamespace: null,
-        rightSibling: null,
-        context: null,
-        parentReference: null,
+        hostNamespace,
+        subtreeRightBoundary,
+        context,
+        parentReference,
         placeHolderElement: null,
     });
-    if (element.children) {
-        const child = element.children;
-        child.parent = element;
-        _pushMountEnterFrame(child, {
-            renderRuntime,
-            hostNamespace,
-            rightSibling,
-            context: element.context,
-            parentReference,
-            placeHolderElement: null,
-        });
-    }
-}
-function _mountTextElement(frame) {
-    const { renderRuntime, parentReference } = frame.meta;
-    frame.node.reference = renderRuntime.hostAdapter.createTextReference(frame.node.children);
-    _pushHostOperationPlaceElement(frame.node, {
+    _pushMountChildrenFrame(element, {
         renderRuntime,
-        rightSibling: frame.meta.rightSibling,
+        hostNamespace,
+        children: children,
+        context: element.context,
         parentReference,
+        subtreeRightBoundary,
     });
 }
+function _mountTextElement(frame) {
+    frame.node.reference = frame.meta.renderRuntime.hostAdapter.createTextReference(frame.node.children);
+    _pushHostOperationPlaceElement(frame.node, frame.meta);
+}
 function _mountPortal(frame) {
     const element = frame.node;
-    const { parentReference, rightSibling, context, renderRuntime } = frame.meta;
+    const { parentReference, subtreeRightBoundary, context, renderRuntime } = frame.meta;
     if (frame.kind === MOUNT_EXIT) {
         element.reference = frame.meta.placeHolderElement.reference;
         return;
@@ -214,27 +182,23 @@ function _mountPortal(frame) {
     const placeHolderElement = createTextElement('');
     _pushMountExitFrame(element, {
         renderRuntime,
-        rightSibling: null,
+        subtreeRightBoundary,
         context: null,
         parentReference: null,
         hostNamespace: null,
         placeHolderElement,
     });
-    if (element.children) {
-        const child = element.children;
-        child.parent = element;
-        _pushMountEnterFrame(child, {
-            renderRuntime,
-            rightSibling: null,
-            context,
-            parentReference: element.ref,
-            hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(child, undefined)?.self,
-            placeHolderElement: null,
-        });
-    }
+    _pushMountChildrenFrame(element, {
+        renderRuntime,
+        hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(element.children, undefined)?.self,
+        subtreeRightBoundary,
+        context,
+        parentReference: element.ref,
+        children: element.children,
+    });
     _pushMountEnterFrame(placeHolderElement, {
         renderRuntime,
-        rightSibling,
+        subtreeRightBoundary,
         context: null,
         parentReference,
         hostNamespace: null,
@@ -243,28 +207,13 @@ function _mountPortal(frame) {
 }
 function _mountFragment(frame) {
     const element = frame.node;
-    const { parentReference, hostNamespace, context, renderRuntime, rightSibling } = frame.meta;
-    switch (element.childFlag) {
-        case SIMP_ELEMENT_CHILD_FLAG_LIST:
-            _pushMountArrayChildrenFrame(element, {
-                renderRuntime,
-                hostNamespace,
-                rightSibling,
-                context,
-                parentReference,
-                placeHolderElement: null,
-            });
-            break;
-        case SIMP_ELEMENT_CHILD_FLAG_ELEMENT:
-            const child = element.children;
-            child.parent = element;
-            _pushMountEnterFrame(child, {
-                renderRuntime,
-                hostNamespace,
-                rightSibling,
-                context,
-                parentReference,
-                placeHolderElement: null,
-            });
-    }
+    const { parentReference, hostNamespace, context, renderRuntime, subtreeRightBoundary } = frame.meta;
+    _pushMountChildrenFrame(element, {
+        renderRuntime,
+        hostNamespace,
+        children: element.children,
+        parentReference,
+        context,
+        subtreeRightBoundary: subtreeRightBoundary,
+    });
 }

package/core/mountingChildren.d.ts

@@ -0,0 +1,4 @@
+import { type SimpElement } from './createElement.js';
+import { type MountChildrenFrame, type MountChildrenFrameMeta } from './processStack.js';
+export declare function _pushMountChildrenFrame(parent: SimpElement, meta: MountChildrenFrameMeta): void;
+export declare function _mountChildren(frame: MountChildrenFrame): void;

package/core/mountingChildren.js

@@ -0,0 +1,47 @@
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST } from './createElement.js';
+import { _pushMountEnterFrame } from './mounting.js';
+import { MOUNT_CHILDREN_ENTER } from './processStack.js';
+import { isHostLike } from './utils.js';
+export function _pushMountChildrenFrame(parent, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: parent,
+        kind: MOUNT_CHILDREN_ENTER,
+        meta,
+    });
+}
+export function _mountChildren(frame) {
+    const parentElement = frame.node;
+    const { parentReference, hostNamespace, renderRuntime, context } = frame.meta;
+    const subtreeRightBoundary = isHostLike(parentElement.flag) ? null : frame.meta.subtreeRightBoundary;
+    switch (parentElement.childFlag) {
+        case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
+            const children = frame.meta.children;
+            children.parent = parentElement;
+            _pushMountEnterFrame(children, {
+                renderRuntime,
+                hostNamespace,
+                subtreeRightBoundary,
+                context,
+                parentReference,
+                placeHolderElement: null,
+            });
+            break;
+        }
+        case SIMP_ELEMENT_CHILD_FLAG_LIST: {
+            const children = frame.meta.children;
+            for (let i = children.length - 1; i >= 0; i--) {
+                const child = children[i];
+                child.parent = parentElement;
+                const rightSibling = children[child.index + 1] || subtreeRightBoundary;
+                _pushMountEnterFrame(child, {
+                    renderRuntime,
+                    parentReference,
+                    context,
+                    hostNamespace,
+                    subtreeRightBoundary: rightSibling,
+                    placeHolderElement: null,
+                });
+            }
+        }
+    }
+}

package/core/patching.d.ts

@@ -2,7 +2,7 @@ import type { Maybe, Nullable } from '../shared/index.js';
 import { type SimpElement } from './createElement.js';
 import { type PatchFrame, type PatchFrameMeta } from './processStack.js';
 import { type SimpRenderRuntime } from './runtime.js';
-export declare function patch(prevElement: SimpElement, nextElement: SimpElement, parentReference: unknown, rightSibling: Nullable<SimpElement>, context: unknown, hostNamespace: Maybe<string>, renderRuntime: SimpRenderRuntime): void;
+export declare function patch(prevElement: SimpElement, nextElement: SimpElement, parentReference: unknown, subtreeRightBoundary: Nullable<SimpElement>, context: unknown, hostNamespace: Maybe<string>, renderRuntime: SimpRenderRuntime): void;
 export declare function _pushPatchEnterFrame(element: SimpElement, meta: PatchFrameMeta): void;
 export declare function _pushPatchExitFrame(element: SimpElement, meta: PatchFrameMeta): void;
 export declare function _patch(frame: PatchFrame): void;

package/core/patching.js

@@ -7,10 +7,10 @@ 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 { _clearElementHostReference, _pushUnmountEnterFrame, _remove } from './unmounting.js';
-import { bitScanForwardIndex } from './utils.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, rightSibling, context, hostNamespace, renderRuntime) {
+export function patch(prevElement, nextElement, parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime) {
     if (renderRuntime.renderStack.length !== 0) {
         throw new Error('Cannot patch while rendering.');
     }
@@ -18,10 +18,9 @@ export function patch(prevElement, nextElement, parentReference, rightSibling, c
         prevElement,
         parentReference,
         renderRuntime,
-        rightSibling,
+        subtreeRightBoundary,
         context,
         hostNamespace,
-        placeHolderElement: null,
     });
     processStack(renderRuntime);
 }
@@ -52,7 +51,7 @@ export function _patch(frame) {
 function _replaceWithNewElement(frame) {
     const nextElement = frame.node;
     const { prevElement, parentReference, context, hostNamespace, renderRuntime } = frame.meta;
-    _pushUnmountEnterFrame(prevElement, renderRuntime);
+    _pushUnmountEnterFrame(prevElement, frame.meta);
     nextElement.parent = prevElement.parent;
     if ((nextElement.flag & SIMP_ELEMENT_FLAG_HOST) !== 0 && (prevElement.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
         _pushHostOperationReplaceElement(nextElement, renderRuntime, {
@@ -64,14 +63,14 @@ function _replaceWithNewElement(frame) {
             hostNamespace,
             renderRuntime,
             parentReference: null,
-            rightSibling: null,
+            subtreeRightBoundary: null,
             placeHolderElement: null,
         });
     }
     else {
         _clearElementHostReference(prevElement, parentReference, renderRuntime);
         _pushMountEnterFrame(nextElement, {
-            rightSibling: frame.meta.rightSibling,
+            subtreeRightBoundary: frame.meta.subtreeRightBoundary,
             renderRuntime,
             hostNamespace,
             context,
@@ -82,7 +81,7 @@ function _replaceWithNewElement(frame) {
 }
 function _patchHostElement(frame) {
     const nextElement = frame.node;
-    const { prevElement, context, hostNamespace, renderRuntime } = frame.meta;
+    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) {
@@ -98,31 +97,33 @@ function _patchHostElement(frame) {
         prevElement,
         renderRuntime,
         hostNamespace,
-        rightSibling: null,
-        context: null,
-        parentReference: null,
-        placeHolderElement: null,
+        subtreeRightBoundary,
+        context,
+        parentReference,
     });
     _pushPatchChildrenFrame(nextElement, {
-        prevElement,
-        renderRuntime,
+        prevParentElement: prevElement,
+        nextChildren: nextElement.children,
+        prevChildren: prevElement.children,
+        nextParentChildFlag: nextElement.childFlag,
+        prevParentChildFlag: prevElement.childFlag,
+        subtreeRightBoundary,
         hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(nextElement, hostNamespace)?.children,
-        rightSibling: null,
         context,
         parentReference: nextElement.reference,
-        placeHolderElement: null,
+        renderRuntime,
     });
 }
 function _patchFunctionalComponent(frame) {
     const nextElement = frame.node;
-    const { prevElement, context, renderRuntime, hostNamespace, rightSibling, parentReference } = frame.meta;
+    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) {
         _pushMountEnterFrame(nextElement, {
-            rightSibling,
+            subtreeRightBoundary,
             renderRuntime,
             hostNamespace,
             context,
@@ -176,6 +177,7 @@ function _patchFunctionalComponent(frame) {
             });
         } while (triedToRerender);
         normalizeRoot(nextElement, nextChildren, false);
+        nextChildren = nextElement.children;
     }
     catch (error) {
         const parentChildren = prevElement.parent?.children;
@@ -196,7 +198,8 @@ function _patchFunctionalComponent(frame) {
             prevElement.parent.childFlag = SIMP_ELEMENT_CHILD_FLAG_EMPTY;
             prevElement.parent.children = null;
         }
-        _remove(prevElement, parentReference, renderRuntime);
+        _clearElementHostReference(prevElement, parentReference, renderRuntime);
+        _pushUnmountEnterFrame(prevElement, frame.meta);
         const event = {
             type: 'errored',
             element: nextElement,
@@ -219,19 +222,21 @@ function _patchFunctionalComponent(frame) {
         prevElement,
         renderRuntime,
         hostNamespace,
-        rightSibling: null,
-        context: null,
-        parentReference: null,
-        placeHolderElement: null,
+        subtreeRightBoundary,
+        context,
+        parentReference,
     });
     _pushPatchChildrenFrame(nextElement, {
-        prevElement: prevElementSnapshot,
+        subtreeRightBoundary,
+        prevParentChildFlag: prevElementSnapshot.childFlag,
+        nextParentChildFlag: nextElement.childFlag,
+        prevChildren: prevElementSnapshot.children,
+        nextChildren: nextChildren,
         renderRuntime,
         hostNamespace,
-        rightSibling,
-        context,
         parentReference,
-        placeHolderElement: null,
+        context,
+        prevParentElement: prevElementSnapshot,
     });
 }
 function _patchTextElement(frame) {
@@ -244,7 +249,7 @@ function _patchTextElement(frame) {
 }
 function _patchPortal(frame) {
     const nextElement = frame.node;
-    const { prevElement, renderRuntime, context } = frame.meta;
+    const { prevElement, renderRuntime, context, subtreeRightBoundary, hostNamespace, parentReference } = frame.meta;
     const prevContainer = prevElement.ref;
     const nextContainer = nextElement.ref;
     const nextChildren = nextElement.children;
@@ -258,33 +263,38 @@ function _patchPortal(frame) {
         _pushPatchExitFrame(nextElement, {
             prevElement,
             renderRuntime,
-            hostNamespace: null,
-            rightSibling: null,
-            context: null,
-            parentReference: null,
-            placeHolderElement: null,
+            hostNamespace,
+            subtreeRightBoundary,
+            context,
+            parentReference,
         });
     }
     _pushPatchChildrenFrame(nextElement, {
-        prevElement,
-        renderRuntime,
-        hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(nextChildren, undefined)?.self,
-        rightSibling: null,
+        prevParentElement: prevElement,
         context,
         parentReference: nextContainer,
-        placeHolderElement: null,
+        hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(nextChildren, undefined)?.self,
+        renderRuntime,
+        prevChildren: prevElement.children,
+        nextChildren,
+        nextParentChildFlag: nextElement.childFlag,
+        prevParentChildFlag: prevElement.childFlag,
+        subtreeRightBoundary,
     });
 }
 function _patchFragment(frame) {
     const nextElement = frame.node;
-    const { prevElement, renderRuntime, context, parentReference, hostNamespace, rightSibling } = frame.meta;
+    const { prevElement, renderRuntime, context, parentReference, hostNamespace, subtreeRightBoundary } = frame.meta;
     _pushPatchChildrenFrame(nextElement, {
-        prevElement,
-        parentReference,
-        rightSibling,
+        subtreeRightBoundary,
         context,
+        parentReference,
+        prevParentChildFlag: prevElement.childFlag,
+        nextParentChildFlag: nextElement.childFlag,
+        nextChildren: nextElement.children,
+        prevChildren: prevElement.children,
         renderRuntime,
         hostNamespace,
-        placeHolderElement: null,
+        prevParentElement: prevElement,
     });
 }

package/core/patchingChildren.d.ts

@@ -1,6 +1,6 @@
 import { type SimpElement } from './createElement.js';
-import { type PatchChildrenFrame, type PatchFrameMeta } from './processStack.js';
-export declare function _pushPatchChildrenFrame(element: SimpElement, meta: PatchFrameMeta): void;
-export declare function _pushPatchKeyedChildrenFrame(element: SimpElement, meta: PatchFrameMeta): void;
+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;