@simpreact/simpreact 0.0.7 → 0.0.9

package/core/internal.d.ts

@@ -1,16 +1,136 @@
-export * from './createElement.js';
-export * from './fragment.js';
-export * from './hostAdapter.js';
-export * from './lifecycleEventBus.js';
-export * from './memo.js';
-export * from './mounting.js';
-export * from './mountingChildren.js';
-export * from './patching.js';
-export * from './patchingChildren.js';
-export * from './portal.js';
-export * from './processStack.js';
-export * from './ref.js';
-export * from './rerender.js';
-export * from './runtime.js';
-export * from './unmounting.js';
-export * from './unmountingChildren.js';
+import type { Many, Maybe, Nullable } from '../shared/index.js';
+
+export type FC = (props: any) => SimpNode;
+export type Key = string | number | bigint;
+export type SimpNode = SimpElement | string | number | bigint | boolean | Array<SimpNode> | null | undefined;
+
+export interface SimpElement {
+  flag: number;
+  childFlag: number;
+  parent: Nullable<SimpElement>;
+  key: Nullable<Key>;
+  type: Nullable<string | FC>;
+  props: any;
+  children: SimpNode;
+  className: Nullable<string>;
+  reference: unknown;
+  hostNamespace: Nullable<string>;
+  context: any;
+  ref: any;
+  unmounted: Nullable<boolean>;
+  index: number;
+}
+
+export type RefObject<T> = { current: T };
+
+export interface HostAdapter<HostRef = unknown, HostTextRef = unknown, NS = string> {
+  createReference(type: string, namespace?: Maybe<NS>): HostRef;
+  createTextReference(text: string): HostTextRef;
+  mountProps(reference: HostRef, element: SimpElement, renderRuntime: SimpRenderRuntime, namespace?: Maybe<NS>): void;
+  patchProps(
+    reference: HostRef,
+    prevElement: SimpElement,
+    nextElement: SimpElement,
+    renderRuntime: SimpRenderRuntime,
+    namespace?: Maybe<NS>
+  ): void;
+  unmountProps(reference: HostRef, element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+  setClassname(reference: HostRef, className: Maybe<string>, namespace?: Maybe<NS>): void;
+  setTextContent(reference: HostRef, text: string, referenceHasOnlyTextElement?: boolean): void;
+  removeChild(parent: HostRef, child: HostRef | HostTextRef): void;
+  replaceChild(parent: HostRef, replacer: HostRef | HostTextRef, toBeReplaced: HostRef | HostTextRef): void;
+  insertOrAppend(parent: HostRef, child: HostRef | HostTextRef, before: Nullable<HostRef | HostTextRef>): void;
+  clearNode(reference: HostRef | HostTextRef): void;
+  attachElementToReference(
+    element: SimpElement,
+    reference: HostRef | HostTextRef,
+    renderRuntime: SimpRenderRuntime
+  ): void;
+  detachElementFromReference(reference: HostRef | HostTextRef, renderRuntime: SimpRenderRuntime): void;
+  getElementFromReference(reference: HostRef | HostTextRef, renderRuntime: SimpRenderRuntime): Nullable<SimpElement>;
+  getHostNamespaces(
+    element: SimpElement,
+    currentNamespace: Maybe<NS>
+  ): Nullable<{ self: Nullable<NS>; children: Nullable<NS> }>;
+}
+
+export interface SimpRuntimeFCRenderer {
+  (component: FC, element: SimpElement, renderRuntime: SimpRenderRuntime): SimpNode;
+}
+
+export interface SimpRenderFrame {
+  kind: number;
+  node: SimpElement;
+  renderRuntime: SimpRenderRuntime;
+  parentReference: unknown;
+  subtreeRightBoundary: Nullable<SimpElement>;
+  context: unknown;
+  hostNamespace: Maybe<string>;
+  prevElement: SimpElement;
+  children: Nullable<Many<SimpElement>>;
+  placeHolderElement: Nullable<SimpElement>;
+}
+
+export interface SimpRenderRuntime {
+  hostAdapter: HostAdapter;
+  renderer: SimpRuntimeFCRenderer;
+  renderStack: Array<any>;
+  framePool: SimpRenderFrame[];
+  activeRenderElement: SimpElement | null;
+  pendingRerenderFlag: boolean;
+}
+
+export declare function createRenderRuntime(
+  hostAdapter: HostAdapter,
+  renderer: SimpRuntimeFCRenderer
+): SimpRenderRuntime;
+
+export type LifecycleEvent =
+  | { type: 'beforeRender'; element: SimpElement; renderRuntime: SimpRenderRuntime }
+  | { type: 'afterRender'; element: SimpElement; renderRuntime: SimpRenderRuntime }
+  | { type: 'mounted'; element: SimpElement; renderRuntime: SimpRenderRuntime }
+  | { type: 'updated'; element: SimpElement; renderRuntime: SimpRenderRuntime }
+  | { type: 'unmounted'; element: SimpElement; renderRuntime: SimpRenderRuntime }
+  | { type: 'errored'; element: SimpElement; error: any; handled: boolean; renderRuntime: SimpRenderRuntime };
+
+export interface LifecycleEventBus {
+  publish(event: LifecycleEvent): void;
+  subscribe(subscriber: (event: LifecycleEvent) => boolean | void): () => void;
+}
+
+export declare function isFC(element: { flag: number }): boolean;
+export declare function isFragment(element: { flag: number }): boolean;
+export declare function isHost(element: { flag: number }): boolean;
+export declare function isPortal(element: { flag: number }): boolean;
+export declare function isText(element: { flag: number }): boolean;
+export declare function hasListChildren(element: { childFlag: number }): boolean;
+export declare function hasElementChild(element: { childFlag: number }): boolean;
+
+export declare function createElement(type: string | FC, props?: any, ...children: SimpNode[]): SimpElement;
+export declare function Fragment(props: { children?: SimpNode }): SimpElement;
+
+export declare function registerLifecyclePlugin(plugin: (bus: LifecycleEventBus) => void): void;
+
+export declare function mount(
+  element: SimpElement,
+  parentReference: unknown,
+  subtreeRightBoundary: 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 unmount(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+
+export declare function rerender(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function withSyncRerender(renderRuntime: SimpRenderRuntime, callback: () => void): void;

package/core/internal.js

@@ -1,16 +1,8 @@
-export * from './createElement.js';
-export * from './fragment.js';
-export * from './hostAdapter.js';
-export * from './lifecycleEventBus.js';
-export * from './memo.js';
-export * from './mounting.js';
-export * from './mountingChildren.js';
-export * from './patching.js';
-export * from './patchingChildren.js';
-export * from './portal.js';
-export * from './processStack.js';
-export * from './ref.js';
-export * from './rerender.js';
-export * from './runtime.js';
-export * from './unmounting.js';
-export * from './unmountingChildren.js';
+export { createElement, hasElementChild, hasListChildren, isFC, isFragment, isHost, isPortal, isText, } from './createElement.js';
+export { Fragment } from './fragment.js';
+export { registerLifecyclePlugin } from './lifecycleEventBus.js';
+export { mount } from './mounting.js';
+export { patch } from './patching.js';
+export { rerender, withSyncRerender } from './rerender.js';
+export { createRenderRuntime } from './runtime.js';
+export { unmount } from './unmounting.js';

package/core/lifecycleEventBus.js

@@ -1,16 +1,35 @@
-const subscribers = [];
-export const lifecycleEventBus = {
-    publish(event) {
-        for (const subscriber of subscribers) {
-            subscriber(event);
-        }
-    },
-    subscribe(subscriber) {
-        if (subscribers.indexOf(subscriber) === -1) {
-            subscribers.push(subscriber);
-        }
-        return () => {
-            subscribers.splice(subscribers.indexOf(subscriber), 1);
-        };
-    },
-};
+function createBus() {
+    const subscribers = [];
+    return {
+        publish(event) {
+            for (const subscriber of subscribers) {
+                subscriber(event);
+            }
+        },
+        subscribe(subscriber) {
+            if (subscribers.indexOf(subscriber) === -1) {
+                subscribers.push(subscriber);
+            }
+            return () => {
+                const index = subscribers.indexOf(subscriber);
+                if (index !== -1)
+                    subscribers.splice(index, 1);
+            };
+        },
+    };
+}
+const busByRuntime = new WeakMap();
+const plugins = [];
+export function getLifecycleEventBus(runtime) {
+    let bus = busByRuntime.get(runtime);
+    if (!bus) {
+        bus = createBus();
+        for (const plugin of plugins)
+            plugin(bus);
+        busByRuntime.set(runtime, bus);
+    }
+    return bus;
+}
+export function registerLifecyclePlugin(plugin) {
+    plugins.push(plugin);
+}

package/core/memo.js

@@ -1,9 +1,12 @@
 import { shallowEqual } from '../shared/index.js';
+const MEMO_BRAND = Symbol('memo');
 export function memo(Component, compare = shallowEqual) {
     const Memoized = (props => Component(props));
     Memoized._compare = compare;
+    Memoized[MEMO_BRAND] = true;
+    Object.defineProperty(Memoized, 'name', { value: Component.name });
     return Memoized;
 }
 export function isMemo(type) {
-    return !!type._compare;
+    return type?.[MEMO_BRAND] === true;
 }

package/core/mounting.js

@@ -1,134 +1,92 @@
+import { noop } from '../shared/index.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 { pushHostOperationPlaceElement } from './hostOperations.js';
+import { getLifecycleEventBus } from './lifecycleEventBus.js';
+import { pushMountChildrenFrame } from './mountingChildren.js';
+import { acquireMountFrame, 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];
+const mountEnterHandlers = [mountHostEnter, mountFCEnter, mountTextElement, mountPortalEnter, mountFragment];
+const mountExitHandlers = [mountHostExit, mountFCExit, noop, mountPortalExit, noop];
 export function mount(element, parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime) {
     if (renderRuntime.renderStack.length !== 0) {
         throw new Error('Cannot mount while rendering.');
     }
-    _pushMountEnterFrame(element, {
-        parentReference,
-        subtreeRightBoundary,
-        context,
-        hostNamespace,
-        renderRuntime,
-        placeHolderElement: null,
-    });
+    pushMountEnterFrame(element, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespace, null);
     processStack(renderRuntime);
 }
-export function _mount(frame) {
-    mountHandlers[bitScanForwardIndex(frame.node.flag)](frame);
+export function mountEnter(frame) {
+    mountEnterHandlers[bitScanForwardIndex(frame.node.flag)](frame);
 }
-export function _pushMountEnterFrame(element, meta) {
-    meta.renderRuntime.renderStack.push({
-        node: element,
-        kind: MOUNT_ENTER,
-        meta,
-    });
+export function mountExit(frame) {
+    mountExitHandlers[bitScanForwardIndex(frame.node.flag)](frame);
 }
-function _pushMountExitFrame(element, meta) {
-    meta.renderRuntime.renderStack.push({
-        node: element,
-        kind: MOUNT_EXIT,
-        meta,
-    });
+export function pushMountEnterFrame(element, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespace, placeHolderElement) {
+    renderRuntime.renderStack.push(acquireMountFrame(renderRuntime, element, MOUNT_ENTER, parentReference, subtreeRightBoundary, context, hostNamespace, placeHolderElement));
+}
+function pushMountExitFrame(element, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespace, placeHolderElement) {
+    renderRuntime.renderStack.push(acquireMountFrame(renderRuntime, element, MOUNT_EXIT, parentReference, subtreeRightBoundary, context, hostNamespace, placeHolderElement));
 }
-function _mountHostElement(frame) {
+function mountHostEnter(frame) {
     const element = frame.node;
-    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);
-        }
-        if (element.props) {
-            renderRuntime.hostAdapter.mountProps(element.reference, element, renderRuntime, hostNamespace);
-        }
-        if (element.className) {
-            renderRuntime.hostAdapter.setClassname(element.reference, element.className, hostNamespace);
-        }
-        if (parentReference) {
-            _pushHostOperationPlaceElement(element, {
-                renderRuntime,
-                subtreeRightBoundary,
-                parentReference,
-            });
-        }
-        applyRef(element);
-        return;
-    }
+    const { parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime } = frame;
     const hostNamespaces = renderRuntime.hostAdapter.getHostNamespaces(element, hostNamespace);
     const hostReference = (element.reference = renderRuntime.hostAdapter.createReference(element.type, hostNamespaces?.self));
     renderRuntime.hostAdapter.attachElementToReference(element, hostReference, renderRuntime);
-    _pushMountExitFrame(element, {
-        renderRuntime,
-        hostNamespace: hostNamespaces?.self,
-        subtreeRightBoundary,
-        context,
-        parentReference,
-        placeHolderElement: null,
-    });
-    _pushMountChildrenFrame(element, {
-        renderRuntime,
-        hostNamespace: hostNamespaces?.children,
-        subtreeRightBoundary,
-        context,
-        parentReference: hostReference,
-        children: element.children,
-    });
+    pushMountExitFrame(element, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespaces?.self, null);
+    pushMountChildrenFrame(element, renderRuntime, element.children, hostReference, subtreeRightBoundary, context, hostNamespaces?.children);
 }
-function _mountFunctionalElement(frame) {
+function mountHostExit(frame) {
     const element = frame.node;
-    const { parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime } = frame.meta;
-    if (frame.kind === MOUNT_EXIT) {
-        lifecycleEventBus.publish({ type: 'mounted', element, renderRuntime });
-        return;
+    const { parentReference, subtreeRightBoundary, hostNamespace, renderRuntime } = frame;
+    if (element.childFlag === SIMP_ELEMENT_CHILD_FLAG_TEXT) {
+        renderRuntime.hostAdapter.setTextContent(element.reference, element.props.children);
     }
+    if (element.props) {
+        renderRuntime.hostAdapter.mountProps(element.reference, element, renderRuntime, hostNamespace);
+    }
+    if (element.className) {
+        renderRuntime.hostAdapter.setClassname(element.reference, element.className, hostNamespace);
+    }
+    if (parentReference) {
+        pushHostOperationPlaceElement(element, renderRuntime, parentReference, subtreeRightBoundary);
+    }
+    applyRef(element);
+}
+function mountFCEnter(frame) {
+    const element = frame.node;
+    const { parentReference, subtreeRightBoundary, context, hostNamespace, renderRuntime } = frame;
     if (context) {
         element.context = context;
     }
     if (element.unmounted) {
         element.unmounted = false;
     }
-    element.store = { latestElement: null, hostNamespace: null, forceRerender: false };
-    element.store.latestElement = element;
     if (hostNamespace) {
-        element.store.hostNamespace = hostNamespace;
+        element.hostNamespace = hostNamespace;
     }
-    // FC element always has Maybe<SimpElement> children due to a normalization process.
     let children;
-    let triedToRerenderUnsubscribe;
     try {
-        renderRuntime.renderPhase = MOUNTING_PHASE;
-        renderRuntime.currentRenderingFCElement = element;
-        let triedToRerender = false;
         let rerenderCounter = 0;
-        triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
-            if (event.type === 'triedToRerender' && event.element === element) {
-                triedToRerender = true;
-            }
-        });
+        renderRuntime.activeRenderElement = element;
+        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,
                 renderRuntime,
             });
             children = renderRuntime.renderer(element.type, element, renderRuntime);
-            lifecycleEventBus.publish({
+            getLifecycleEventBus(renderRuntime).publish({
                 type: 'afterRender',
                 element,
                 renderRuntime,
             });
-        } while (triedToRerender);
+        } while (renderRuntime.pendingRerenderFlag);
         normalizeRoot(element, children, false);
         children = element.children;
     }
@@ -140,80 +98,42 @@ function _mountFunctionalElement(frame) {
             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;
     }
-    _pushMountExitFrame(element, {
-        renderRuntime,
-        hostNamespace,
-        subtreeRightBoundary,
-        context,
-        parentReference,
-        placeHolderElement: null,
-    });
-    _pushMountChildrenFrame(element, {
-        renderRuntime,
-        hostNamespace,
-        children: children,
-        context: element.context,
-        parentReference,
-        subtreeRightBoundary,
+    pushMountExitFrame(element, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespace, null);
+    pushMountChildrenFrame(element, renderRuntime, children, parentReference, subtreeRightBoundary, element.context, hostNamespace);
+}
+function mountFCExit(frame) {
+    getLifecycleEventBus(frame.renderRuntime).publish({
+        type: 'mounted',
+        element: frame.node,
+        renderRuntime: frame.renderRuntime,
     });
 }
-function _mountTextElement(frame) {
-    frame.node.reference = frame.meta.renderRuntime.hostAdapter.createTextReference(frame.node.children);
-    _pushHostOperationPlaceElement(frame.node, frame.meta);
+function mountTextElement(frame) {
+    frame.node.reference = frame.renderRuntime.hostAdapter.createTextReference(frame.node.children);
+    pushHostOperationPlaceElement(frame.node, frame.renderRuntime, frame.parentReference, frame.subtreeRightBoundary);
 }
-function _mountPortal(frame) {
+function mountPortalEnter(frame) {
     const element = frame.node;
-    const { parentReference, subtreeRightBoundary, context, renderRuntime } = frame.meta;
-    if (frame.kind === MOUNT_EXIT) {
-        element.reference = frame.meta.placeHolderElement.reference;
-        return;
-    }
+    const { parentReference, subtreeRightBoundary, context, renderRuntime } = frame;
     const placeHolderElement = createTextElement('');
-    _pushMountExitFrame(element, {
-        renderRuntime,
-        subtreeRightBoundary,
-        context: null,
-        parentReference: null,
-        hostNamespace: null,
-        placeHolderElement,
-    });
-    _pushMountChildrenFrame(element, {
-        renderRuntime,
-        hostNamespace: renderRuntime.hostAdapter.getHostNamespaces(element.children, undefined)?.self,
-        subtreeRightBoundary,
-        context,
-        parentReference: element.ref,
-        children: element.children,
-    });
-    _pushMountEnterFrame(placeHolderElement, {
-        renderRuntime,
-        subtreeRightBoundary,
-        context: null,
-        parentReference,
-        hostNamespace: null,
-        placeHolderElement: null,
-    });
+    pushMountExitFrame(element, renderRuntime, null, subtreeRightBoundary, null, null, placeHolderElement);
+    pushMountChildrenFrame(element, renderRuntime, element.children, element.ref, subtreeRightBoundary, context, renderRuntime.hostAdapter.getHostNamespaces(element.children, undefined)?.self);
+    pushMountEnterFrame(placeHolderElement, renderRuntime, parentReference, subtreeRightBoundary, null, null, null);
+}
+function mountPortalExit(frame) {
+    frame.node.reference = frame.placeHolderElement.reference;
 }
-function _mountFragment(frame) {
+function mountFragment(frame) {
     const element = frame.node;
-    const { parentReference, hostNamespace, context, renderRuntime, subtreeRightBoundary } = frame.meta;
-    _pushMountChildrenFrame(element, {
-        renderRuntime,
-        hostNamespace,
-        children: element.children,
-        parentReference,
-        context,
-        subtreeRightBoundary: subtreeRightBoundary,
-    });
+    const { parentReference, hostNamespace, context, renderRuntime, subtreeRightBoundary } = frame;
+    pushMountChildrenFrame(element, renderRuntime, element.children, parentReference, subtreeRightBoundary, context, hostNamespace);
 }

package/core/mountingChildren.js

@@ -1,46 +1,28 @@
 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 { pushMountEnterFrame } from './mounting.js';
+import { acquireMountChildrenFrame } 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 pushMountChildrenFrame(parent, renderRuntime, children, parentReference, subtreeRightBoundary, context, hostNamespace) {
+    renderRuntime.renderStack.push(acquireMountChildrenFrame(renderRuntime, parent, children, parentReference, subtreeRightBoundary, context, hostNamespace));
 }
-export function _mountChildren(frame) {
+export function mountChildren(frame) {
     const parentElement = frame.node;
-    const { parentReference, hostNamespace, renderRuntime, context } = frame.meta;
-    const subtreeRightBoundary = isHostLike(parentElement.flag) ? null : frame.meta.subtreeRightBoundary;
+    const { parentReference, hostNamespace, renderRuntime, context } = frame;
+    const subtreeRightBoundary = isHostLike(parentElement.flag) ? null : frame.subtreeRightBoundary;
     switch (parentElement.childFlag) {
         case SIMP_ELEMENT_CHILD_FLAG_ELEMENT: {
-            const children = frame.meta.children;
+            const children = frame.children;
             children.parent = parentElement;
-            _pushMountEnterFrame(children, {
-                renderRuntime,
-                hostNamespace,
-                subtreeRightBoundary,
-                context,
-                parentReference,
-                placeHolderElement: null,
-            });
+            pushMountEnterFrame(children, renderRuntime, parentReference, subtreeRightBoundary, context, hostNamespace, null);
             break;
         }
         case SIMP_ELEMENT_CHILD_FLAG_LIST: {
-            const children = frame.meta.children;
+            const children = frame.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,
-                });
+                pushMountEnterFrame(child, renderRuntime, parentReference, rightSibling, context, hostNamespace, null);
             }
         }
     }