@simpreact/simpreact 0.0.4 → 0.0.6

package/core/mounting.d.ts

@@ -1,10 +1,8 @@
 import type { Maybe, Nullable } from '../shared/index.js';
-import type { HostReference } from './hostAdapter.js';
-import type { SimpElement } from './createElement.js';
-export declare function mount(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function mountTextElement(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>): void;
-export declare function mountHostElement(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function mountFunctionalElement(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function mountFragment(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function mountArrayChildren(children: SimpElement[], reference: Nullable<HostReference>, nextReference: Nullable<HostReference>, context: unknown, parentElement: SimpElement, hostNamespace: Maybe<string>): void;
-export declare function mountPortal(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, context: unknown): void;
+import { type SimpElement } from './createElement.js';
+import { type MountFrame, type MountFrameMeta } from './processStack.js';
+import { type SimpRenderRuntime } from './runtime.js';
+export declare function mount(element: SimpElement, parentReference: unknown, rightSibling: Nullable<SimpElement>, context: unknown, hostNamespace: Maybe<string>, renderRuntime: SimpRenderRuntime): void;
+export declare function _mount(frame: MountFrame): void;
+export declare function _pushMountEnterFrame(element: SimpElement, meta: MountFrameMeta): void;
+export declare function _pushMountArrayChildrenFrame(element: SimpElement, meta: MountFrameMeta): void;

package/core/mounting.js

@@ -1,76 +1,134 @@
-import { emptyObject } from '../shared/index.js';
-import { hostAdapter } from './hostAdapter.js';
-import { createTextElement, normalizeRoot } from './createElement.js';
-import { applyRef } from './ref.js';
+import { createTextElement, normalizeRoot, SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_CHILD_FLAG_TEXT, } from './createElement.js';
+import { _pushHostOperationPlaceElement } from './hostOperations.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
-import { batchingRerenderLocker } from './rerender.js';
-export function mount(element, parentReference, nextReference, context, hostNamespace) {
-    if (element.flag === 'TEXT') {
-        mountTextElement(element, parentReference, nextReference);
-    }
-    else if (element.flag === 'HOST') {
-        mountHostElement(element, parentReference, nextReference, context, hostNamespace);
-    }
-    else if (element.flag === 'FC') {
-        mountFunctionalElement(element, parentReference, nextReference, context, hostNamespace);
-    }
-    else if (element.flag === 'FRAGMENT') {
-        mountFragment(element, parentReference, nextReference, context, hostNamespace);
-    }
-    else {
-        mountPortal(element, parentReference, nextReference, context);
+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) {
+    if (renderRuntime.renderStack.length !== 0) {
+        throw new Error('Cannot mount while rendering.');
     }
+    _pushMountEnterFrame(element, {
+        parentReference,
+        rightSibling,
+        context,
+        hostNamespace,
+        renderRuntime,
+        placeHolderElement: null,
+    });
+    processStack(renderRuntime);
 }
-export function mountTextElement(element, parentReference, nextReference) {
-    const reference = (element.reference = hostAdapter.createTextReference(element.children));
-    if (parentReference) {
-        hostAdapter.insertOrAppend(parentReference, reference, nextReference);
-    }
+export function _mount(frame) {
+    mountHandlers[bitScanForwardIndex(frame.node.flag)](frame);
+}
+export function _pushMountEnterFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: element,
+        kind: MOUNT_ENTER,
+        meta,
+    });
 }
-export function mountHostElement(element, parentReference, nextReference, context, hostNamespace) {
-    const hostNamespaces = hostAdapter.getHostNamespaces(element, hostNamespace);
-    hostNamespace = hostNamespaces?.self;
-    const hostReference = (element.reference = hostAdapter.createReference(element.type, hostNamespace));
-    hostAdapter.attachElementToReference(element, hostReference);
-    // HOST element always has Maybe<Many<SimpElement>> children due to normalization process.
+function _pushMountExitFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: element,
+        kind: MOUNT_EXIT,
+        meta,
+    });
+}
+export function _pushMountArrayChildrenFrame(element, meta) {
     const children = element.children;
-    if (Array.isArray(children)) {
-        mountArrayChildren(children, hostReference, null, context, element, hostNamespaces?.children);
-    }
-    else if (children) {
-        children.parent = element;
-        mount(children, hostReference, null, context, hostNamespaces?.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 });
     }
-    if (element.props) {
-        hostAdapter.mountProps(hostReference, element, hostNamespace);
-        // HOST elements can have either children elements or string children in the props due to normalization.
-        if (typeof element.props.children === 'string') {
-            hostAdapter.setTextContent(hostReference, element.props.children);
+}
+function _mountHostElement(frame) {
+    const element = frame.node;
+    const { parentReference, rightSibling, 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,
+                rightSibling,
+                parentReference,
+            });
+        }
+        applyRef(element);
+        return;
     }
-    if (element.className) {
-        hostAdapter.setClassname(hostReference, element.className, hostNamespace);
-    }
-    if (parentReference) {
-        hostAdapter.insertOrAppend(parentReference, hostReference, nextReference);
+    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,
+        rightSibling,
+        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,
+            });
+        }
     }
-    applyRef(element);
 }
-export function mountFunctionalElement(element, parentReference, nextReference, context, hostNamespace) {
+function _mountFunctionalElement(frame) {
+    const element = frame.node;
+    const { parentReference, rightSibling, context, hostNamespace, renderRuntime } = frame.meta;
+    if (frame.kind === MOUNT_EXIT) {
+        lifecycleEventBus.publish({ type: 'mounted', element, renderRuntime });
+        return;
+    }
     if (context) {
         element.context = context;
     }
     if (element.unmounted) {
         element.unmounted = false;
     }
-    element.store = { latestElement: element };
+    element.store = { latestElement: null, hostNamespace: null, forceRerender: false };
+    element.store.latestElement = element;
     if (hostNamespace) {
         element.store.hostNamespace = hostNamespace;
     }
-    // FC element always has Maybe<SimpElement> children due to normalization process.
+    // 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 => {
@@ -83,49 +141,130 @@ export function mountFunctionalElement(element, parentReference, nextReference,
             if (++rerenderCounter >= 25) {
                 throw new Error('Too many re-renders.');
             }
-            lifecycleEventBus.publish({ type: 'beforeRender', element, phase: 'mounting' });
-            batchingRerenderLocker.lock();
-            children = element.type(element.props || emptyObject);
-            batchingRerenderLocker.flush();
-            lifecycleEventBus.publish({ type: 'afterRender', element, phase: 'mounting' });
+            lifecycleEventBus.publish({
+                type: 'beforeRender',
+                element,
+                renderRuntime,
+            });
+            children = renderRuntime.renderer(element.type, element, renderRuntime);
+            lifecycleEventBus.publish({
+                type: 'afterRender',
+                element,
+                renderRuntime,
+            });
         } while (triedToRerender);
-        children = normalizeRoot(children, false);
+        normalizeRoot(element, children, false);
     }
     catch (error) {
-        lifecycleEventBus.publish({ type: 'errored', element, error, phase: 'mounting' });
+        const event = {
+            type: 'errored',
+            element,
+            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();
+        renderRuntime.renderPhase = null;
+        renderRuntime.currentRenderingFCElement = null;
     }
-    if (children) {
-        children.parent = element;
-        mount((element.children = children), parentReference, nextReference, element.context, hostNamespace);
+    _pushMountExitFrame(element, {
+        renderRuntime,
+        hostNamespace: null,
+        rightSibling: null,
+        context: null,
+        parentReference: null,
+        placeHolderElement: null,
+    });
+    if (element.children) {
+        const child = element.children;
+        child.parent = element;
+        _pushMountEnterFrame(child, {
+            renderRuntime,
+            hostNamespace,
+            rightSibling,
+            context: element.context,
+            parentReference,
+            placeHolderElement: null,
+        });
     }
-    lifecycleEventBus.publish({ type: 'mounted', element });
 }
-export function mountFragment(element, parentReference, nextReference, context, hostNamespace) {
-    // FRAGMENT element always has Maybe<Many<SimpElement>> children due to normalization process.
-    if (Array.isArray(element.children)) {
-        mountArrayChildren(element.children, parentReference, nextReference, context, element, hostNamespace);
-    }
-    else if (element.children) {
-        element.children.parent = element;
-        mount(element.children, parentReference, nextReference, context, hostNamespace);
-    }
+function _mountTextElement(frame) {
+    const { renderRuntime, parentReference } = frame.meta;
+    frame.node.reference = renderRuntime.hostAdapter.createTextReference(frame.node.children);
+    _pushHostOperationPlaceElement(frame.node, {
+        renderRuntime,
+        rightSibling: frame.meta.rightSibling,
+        parentReference,
+    });
 }
-export function mountArrayChildren(children, reference, nextReference, context, parentElement, hostNamespace) {
-    for (const child of children) {
-        child.parent = parentElement;
-        mount(child, reference, nextReference, context, hostNamespace);
+function _mountPortal(frame) {
+    const element = frame.node;
+    const { parentReference, rightSibling, context, renderRuntime } = frame.meta;
+    if (frame.kind === MOUNT_EXIT) {
+        element.reference = frame.meta.placeHolderElement.reference;
+        return;
     }
-}
-export function mountPortal(element, parentReference, nextReference, context) {
+    const placeHolderElement = createTextElement('');
+    _pushMountExitFrame(element, {
+        renderRuntime,
+        rightSibling: null,
+        context: null,
+        parentReference: null,
+        hostNamespace: null,
+        placeHolderElement,
+    });
     if (element.children) {
-        element.children.parent = element;
-        mount(element.children, element.ref, null, context, hostAdapter.getHostNamespaces(element.children, undefined)?.self);
+        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,
+        });
+    }
+    _pushMountEnterFrame(placeHolderElement, {
+        renderRuntime,
+        rightSibling,
+        context: null,
+        parentReference,
+        hostNamespace: null,
+        placeHolderElement: null,
+    });
+}
+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 placeHolderElement = createTextElement('');
-    mountTextElement(placeHolderElement, parentReference, nextReference);
-    element.reference = placeHolderElement.reference;
 }

package/core/patching.d.ts

@@ -1,9 +1,8 @@
 import type { Maybe, Nullable } from '../shared/index.js';
-import type { SimpElement } from './createElement.js';
-import type { HostReference } from './hostAdapter.js';
-export declare function patch(prevElement: SimpElement, nextElement: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function patchPortal(prevElement: SimpElement, nextElement: SimpElement, context: unknown): void;
-export declare function updateFunctionalComponent(element: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function patchKeyedChildren(prevChildren: SimpElement[], nextChildren: SimpElement[], parentReference: HostReference, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
-export declare function findParentReferenceFromElement(element: SimpElement): Nullable<HostReference>;
-export declare function findHostReferenceFromElement(element: SimpElement): Nullable<HostReference>;
+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 _pushPatchEnterFrame(element: SimpElement, meta: PatchFrameMeta): void;
+export declare function _pushPatchExitFrame(element: SimpElement, meta: PatchFrameMeta): void;
+export declare function _patch(frame: PatchFrame): void;