@simpreact/simpreact 0.0.0-alpha.dd6f145 → 0.0.2

package/core/mounting.js

@@ -1,66 +1,136 @@
-import { EMPTY_OBJECT } from '../shared';
-import { GLOBAL } from './global';
-import { normalizeRoot } from './createElement';
-export function mount(element, parentReference, nextReference) {
+import { emptyMap, emptyObject } from '../shared/index.js';
+import { hostAdapter } from './hostAdapter.js';
+import { createTextElement, normalizeRoot } from './createElement.js';
+import { applyRef } from './ref.js';
+import { lifecycleEventBus } from './lifecycleEventBus.js';
+export function mount(element, parentReference, nextReference, contextMap, hostNamespace) {
     if (element.flag === 'TEXT') {
         mountTextElement(element, parentReference, nextReference);
     }
     else if (element.flag === 'HOST') {
-        mountHostElement(element, parentReference, nextReference);
+        mountHostElement(element, parentReference, nextReference, contextMap, hostNamespace);
     }
     else if (element.flag === 'FC') {
-        mountFunctionalElement(element, parentReference, nextReference);
+        mountFunctionalElement(element, parentReference, nextReference, contextMap, hostNamespace);
     }
     else if (element.flag === 'FRAGMENT') {
-        mountFragment(element, parentReference, nextReference);
+        mountFragment(element, parentReference, nextReference, contextMap, hostNamespace);
+    }
+    else if (element.flag === 'PROVIDER') {
+        mountProvider(element, parentReference, nextReference, contextMap, hostNamespace);
+    }
+    else if (element.flag === 'PORTAL') {
+        mountPortal(element, parentReference, nextReference, contextMap);
+    }
+    else {
+        mountConsumer(element, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
 export function mountTextElement(element, parentReference, nextReference) {
-    const reference = (element.reference || (element.reference = GLOBAL.hostAdapter.createTextReference(element.children)));
-    if (parentReference != null) {
-        GLOBAL.hostAdapter.insertOrAppend(parentReference, reference, nextReference);
+    const reference = (element.reference = hostAdapter.createTextReference(element.children));
+    if (parentReference) {
+        hostAdapter.insertOrAppend(parentReference, reference, nextReference);
     }
 }
-export function mountHostElement(element, parentReference, nextReference) {
-    const props = element.props;
-    const className = element.className;
-    const hostReference = (element.reference = GLOBAL.hostAdapter.createReference(element.type));
+export function mountHostElement(element, parentReference, nextReference, contextMap, 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.
     const children = element.children;
-    if (className != null && className !== '') {
-        GLOBAL.hostAdapter.setClassname(hostReference, className);
-    }
     if (Array.isArray(children)) {
-        mountArrayChildren(children, hostReference, null);
+        mountArrayChildren(children, hostReference, null, contextMap, element, hostNamespaces?.children);
+    }
+    else if (children) {
+        children.parent = element;
+        mount(children, hostReference, null, contextMap, hostNamespaces?.children);
+    }
+    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);
+        }
     }
-    else if (children != null) {
-        mount(children, hostReference, null);
+    if (element.className) {
+        hostAdapter.setClassname(hostReference, element.className, hostNamespace);
     }
-    if (parentReference != null) {
-        GLOBAL.hostAdapter.insertOrAppend(parentReference, hostReference, nextReference);
+    if (parentReference) {
+        hostAdapter.insertOrAppend(parentReference, hostReference, nextReference);
     }
-    GLOBAL.hostAdapter.mountProps(hostReference, props);
+    applyRef(element);
 }
-export function mountFunctionalElement(element, parentReference, nextReference) {
-    const type = element.type;
-    GLOBAL.eventBus.publish({ type: 'beforeRender', element });
-    element.children = normalizeRoot(type(element.props || EMPTY_OBJECT));
-    GLOBAL.eventBus.publish({ type: 'afterRender' });
-    mount(element.children, parentReference, nextReference);
-    GLOBAL.eventBus.publish({ type: 'mounted', element });
+export function mountFunctionalElement(element, parentReference, nextReference, contextMap, hostNamespace) {
+    if (contextMap) {
+        element.contextMap = contextMap;
+    }
+    if (element.unmounted) {
+        element.unmounted = false;
+    }
+    element.store = { latestElement: element };
+    if (hostNamespace) {
+        element.store.hostNamespace = hostNamespace;
+    }
+    // FC element always has Maybe<SimpElement> children due to normalization process.
+    let children;
+    try {
+        lifecycleEventBus.publish({ type: 'beforeRender', element, phase: 'mounting' });
+        children = normalizeRoot(element.type(element.props || emptyObject), false);
+        lifecycleEventBus.publish({ type: 'afterRender', phase: 'mounting' });
+    }
+    catch (error) {
+        lifecycleEventBus.publish({ type: 'errored', element, error, phase: 'mounting' });
+        return;
+    }
+    if (children) {
+        children.parent = element;
+        mount((element.children = children), parentReference, nextReference, contextMap, hostNamespace);
+    }
+    lifecycleEventBus.publish({ type: 'mounted', element });
 }
-export function mountFragment(element, parentReference, nextReference) {
+export function mountFragment(element, parentReference, nextReference, contextMap, hostNamespace) {
     // FRAGMENT element always has Maybe<Many<SimpElement>> children due to normalization process.
-    const children = element.children;
-    if (Array.isArray(children)) {
-        mountArrayChildren(children, parentReference, nextReference);
+    if (Array.isArray(element.children)) {
+        mountArrayChildren(element.children, parentReference, nextReference, contextMap, element, hostNamespace);
     }
-    else if (children != null) {
-        mount(children, parentReference, nextReference);
+    else if (element.children) {
+        element.children.parent = element;
+        mount(element.children, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
-export function mountArrayChildren(children, reference, nextReference) {
+export function mountArrayChildren(children, reference, nextReference, contextMap, parentElement, hostNamespace) {
     for (const child of children) {
-        mount(child, reference, nextReference);
+        child.parent = parentElement;
+        mount(child, reference, nextReference, contextMap, hostNamespace);
+    }
+}
+export function mountProvider(element, parentReference, nextReference, contextMap, hostNamespace) {
+    contextMap = new Map(contextMap);
+    contextMap.set(element.type.context, element.props.value);
+    // PROVIDER element always has Maybe<Many<SimpElement>> children due to normalization process.
+    if (Array.isArray(element.children)) {
+        mountArrayChildren(element.children, parentReference, nextReference, contextMap, element, hostNamespace);
+    }
+    else if (element.children) {
+        element.children.parent = element;
+        mount(element.children, parentReference, nextReference, contextMap, hostNamespace);
+    }
+}
+export function mountConsumer(element, parentReference, nextReference, contextMap, hostNamespace) {
+    const children = normalizeRoot(element.type(element.props || emptyObject, contextMap || emptyMap), false);
+    if (!children) {
+        return;
+    }
+    children.parent = element;
+    mount((element.children = children), parentReference, nextReference, contextMap, hostNamespace);
+}
+export function mountPortal(element, parentReference, nextReference, contextMap) {
+    if (element.children) {
+        element.children.parent = element;
+        mount(element.children, element.ref, null, contextMap, hostAdapter.getHostNamespaces(element.children, undefined)?.self);
     }
+    const placeHolderElement = createTextElement('');
+    mountTextElement(placeHolderElement, parentReference, nextReference);
+    element.reference = placeHolderElement.reference;
 }

package/core/patching.d.ts

@@ -1,7 +1,10 @@
-import type { SimpElement } from './createElement';
-import type { Nullable } from '../shared';
-import type { HostReference } from './hostAdapter';
-export declare function patch<HostRef = HostReference>(prevElement: SimpElement, nextElement: SimpElement, parentReference: HostRef, nextReference: Nullable<HostRef>): void;
-export declare function findHostReferenceFromElement(element: SimpElement, startEdge: boolean): Nullable<HostReference>;
-export declare function updateFunctionalComponent(element: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>): void;
-export declare function patchKeyedChildren<HostRef = HostReference>(prevChildren: SimpElement[], nextChildren: SimpElement[], parentReference: HostRef, nextReference: Nullable<HostRef>): void;
+import type { Maybe, Nullable } from '../shared/index.js';
+import type { SimpElement } from './createElement.js';
+import type { HostReference } from './hostAdapter.js';
+import type { SimpContextMap } from './context.js';
+export declare function patch(prevElement: SimpElement, nextElement: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function patchPortal(prevElement: SimpElement, nextElement: SimpElement, contextMap: Nullable<SimpContextMap>): void;
+export declare function updateFunctionalComponent(element: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function patchKeyedChildren(prevChildren: SimpElement[], nextChildren: SimpElement[], parentReference: HostReference, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function findParentReferenceFromElement(element: SimpElement): Nullable<HostReference>;
+export declare function findHostReferenceFromElement(element: SimpElement): Nullable<HostReference>;

package/core/patching.js

@@ -1,200 +1,201 @@
-import { normalizeRoot } from './createElement';
-import { EMPTY_OBJECT, isArray, isPrimitive } from '../shared';
-import { clearElementHostReference, remove, removeAllChildren, unmount, unmountAllChildren } from './unmounting';
-import { mount, mountArrayChildren } from './mounting';
-import { GLOBAL } from './global';
-export function patch(prevElement, nextElement, parentReference, nextReference) {
+import { emptyMap, 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 } from './mounting.js';
+import { applyRef } from './ref.js';
+import { lifecycleEventBus } from './lifecycleEventBus.js';
+export function patch(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
     if (prevElement.type !== nextElement.type || prevElement.key !== nextElement.key) {
-        replaceWithNewElement(prevElement, nextElement, parentReference);
+        replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace);
     }
     else if (nextElement.flag === 'HOST') {
-        patchElement(prevElement, nextElement);
+        patchHostElement(prevElement, nextElement, contextMap, hostNamespace);
     }
     else if (nextElement.flag === 'FC') {
-        if (prevElement.store != null) {
-            nextElement.store = prevElement.store;
-        }
-        patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference);
+        patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace);
     }
     else if (nextElement.flag === 'TEXT') {
-        patchText(prevElement, nextElement);
+        patchTextElement(prevElement, nextElement);
+    }
+    else if (nextElement.flag === 'FRAGMENT') {
+        patchFragment(prevElement, nextElement, parentReference, contextMap, hostNamespace);
+    }
+    else if (nextElement.flag === 'PROVIDER') {
+        patchProvider(prevElement, nextElement, parentReference, contextMap, hostNamespace);
+    }
+    else if (nextElement.flag === 'PORTAL') {
+        patchPortal(prevElement, nextElement, contextMap);
     }
     else {
-        patchFragment(prevElement, nextElement, parentReference);
+        patchConsumer(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
-function replaceWithNewElement(prevElement, nextElement, parentReference) {
+function replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace) {
     unmount(prevElement);
+    nextElement.parent = prevElement.parent;
     if (nextElement.flag === 'HOST' && prevElement.flag === 'HOST') {
-        mount(nextElement, null, null);
-        GLOBAL.hostAdapter.replaceChild(parentReference, nextElement.reference, prevElement.reference);
+        mount(nextElement, null, null, contextMap, hostNamespace);
+        hostAdapter.replaceChild(parentReference, nextElement.reference, prevElement.reference);
     }
     else {
-        mount(nextElement, parentReference, findHostReferenceFromElement(prevElement, true));
+        mount(nextElement, parentReference, findHostReferenceFromElement(prevElement), contextMap, hostNamespace);
         clearElementHostReference(prevElement, parentReference);
     }
 }
-export function findHostReferenceFromElement(element, startEdge) {
-    let flag;
-    let temp = element;
-    while (temp != null) {
-        flag = temp.flag;
-        if (flag === 'HOST' || flag === 'TEXT') {
-            return temp.reference;
-        }
-        temp = findChildElement(temp, startEdge);
+function patchHostElement(prevElement, nextElement, contextMap, hostNamespace) {
+    if (prevElement.ref) {
+        nextElement.ref = prevElement.ref;
     }
-    return null;
-}
-function findChildElement(element, startEdge) {
-    const children = element.children;
-    if (isArray(children)) {
-        return children[startEdge ? 0 : children.length - 1];
+    const hostNamespaces = hostAdapter.getHostNamespaces(nextElement, hostNamespace);
+    hostNamespace = hostNamespaces?.self;
+    nextElement.reference = prevElement.reference;
+    hostAdapter.attachElementToReference(nextElement, nextElement.reference);
+    patchChildren(prevElement.children || prevElement.props?.children, nextElement.children || nextElement.props?.children, nextElement.reference, null, nextElement, contextMap, hostNamespaces?.children);
+    hostAdapter.patchProps(nextElement.reference, prevElement, nextElement, hostNamespace);
+    if (prevElement.className !== nextElement.className) {
+        hostAdapter.setClassname(nextElement.reference, nextElement.className, hostNamespace);
     }
-    return children;
+    applyRef(nextElement);
 }
-function patchElement(prevElement, nextElement) {
-    const hostReference = (nextElement.reference = prevElement.reference);
-    const prevProps = prevElement.props;
-    const nextProps = nextElement.props;
-    for (const propName in nextProps) {
-        const prevValue = prevProps[propName];
-        const nextValue = nextProps[propName];
-        if (prevValue !== nextValue) {
-            GLOBAL.hostAdapter.patchProp(hostReference, propName, prevValue, nextValue);
-        }
+function patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
+    (nextElement.store = prevElement.store ||= {}).latestElement = nextElement;
+    if (hostNamespace) {
+        nextElement.store.hostNamespace = hostNamespace;
     }
-    for (const propName in prevProps) {
-        if (nextProps[propName] == null && prevProps[propName] != null) {
-            GLOBAL.hostAdapter.patchProp(hostReference, propName, prevProps[propName], null);
-        }
+    if (contextMap) {
+        nextElement.contextMap = contextMap;
+    }
+    let nextChildren;
+    try {
+        lifecycleEventBus.publish({ type: 'beforeRender', element: nextElement, phase: 'updating' });
+        nextChildren = normalizeRoot(nextElement.type(nextElement.props || emptyObject), false);
+        lifecycleEventBus.publish({ type: 'afterRender', phase: 'updating' });
+    }
+    catch (error) {
+        lifecycleEventBus.publish({ type: 'errored', element: nextElement, error, phase: 'updating' });
+        return;
     }
     const prevChildren = prevElement.children;
+    if (nextChildren) {
+        nextElement.children = nextChildren;
+    }
+    patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+    lifecycleEventBus.publish({ type: 'updated', element: nextElement });
+}
+function patchTextElement(prevElement, nextElement) {
+    nextElement.reference = prevElement.reference;
+    if (nextElement.children !== prevElement.children) {
+        hostAdapter.setTextContent(nextElement.reference, nextElement.children);
+    }
+}
+function patchFragment(prevElement, nextElement, parentReference, contextMap, 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]));
+    }
+    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+}
+function patchProvider(prevElement, nextElement, parentReference, contextMap, 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]));
+    }
+    contextMap = new Map(contextMap);
+    contextMap.set(nextElement.type.context, nextElement.props.value);
+    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+}
+function patchConsumer(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
+    const children = normalizeRoot(nextElement.type(nextElement.props || emptyObject, contextMap || emptyMap), false);
+    if (children) {
+        nextElement.children = children;
+    }
+    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+}
+export function patchPortal(prevElement, nextElement, contextMap) {
+    const prevContainer = prevElement.ref;
+    const nextContainer = nextElement.ref;
     const nextChildren = nextElement.children;
-    const nextClassName = nextElement.className;
-    if (prevElement.className !== nextClassName) {
-        GLOBAL.hostAdapter.setClassname(hostReference, nextClassName);
+    patchChildren(prevElement.children, nextChildren, prevContainer, null, nextElement, contextMap, hostAdapter.getHostNamespaces(nextChildren, undefined)?.self);
+    nextElement.reference = prevElement.reference;
+    if (prevContainer !== nextContainer && nextChildren != null) {
+        hostAdapter.removeChild(prevContainer, nextChildren.reference);
+        hostAdapter.appendChild(nextContainer, nextChildren.reference);
     }
-    patchChildren(prevChildren, nextChildren, hostReference, null, prevElement);
 }
-function patchChildren(prevChildren, nextChildren, parentReference, nextReference, parentElement) {
-    if (isArray(prevChildren)) {
-        if (isArray(nextChildren)) {
-            const prevChildrenLength = prevChildren.length;
-            const nextChildrenLength = nextChildren.length;
-            if (prevChildrenLength === 0) {
-                if (nextChildrenLength > 0) {
-                    mountArrayChildren(nextChildren, parentReference, nextReference);
-                }
-            }
-            else if (nextChildrenLength === 0) {
-                removeAllChildren(parentReference, parentElement, prevChildren);
-            }
-            else {
-                patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference);
+export function updateFunctionalComponent(element, parentReference, nextReference, contextMap, hostNamespace) {
+    patchFunctionalComponent(element, element, parentReference, nextReference, contextMap, hostNamespace);
+}
+function patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace) {
+    if (Array.isArray(prevChildren)) {
+        if (Array.isArray(nextChildren)) {
+            for (const child of nextChildren) {
+                child.parent = nextElement;
             }
+            patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+        }
+        else if (typeof nextChildren === 'string') {
+            unmount(prevChildren);
+            hostAdapter.setTextContent(parentReference, nextChildren);
         }
-        else if (isPrimitive(nextChildren)) {
-            unmountAllChildren(prevChildren);
-            GLOBAL.hostAdapter.setTextContent(parentReference, (nextChildren || ''));
+        else if (nextChildren) {
+            patchKeyedChildren(prevChildren, [nextChildren], parentReference, nextReference, contextMap, hostNamespace);
         }
         else {
-            removeAllChildren(parentReference, parentElement, prevChildren);
-            mount(nextChildren, parentReference, nextReference);
+            unmount(prevChildren);
+            hostAdapter.clearNode(parentReference);
         }
     }
-    else if (isPrimitive(prevChildren)) {
-        if (isArray(nextChildren)) {
-            GLOBAL.hostAdapter.setTextContent(parentReference, '');
-            mountArrayChildren(nextChildren, parentReference, nextReference);
+    else if (typeof prevChildren === 'string') {
+        if (Array.isArray(nextChildren)) {
+            hostAdapter.clearNode(parentReference);
+            mountArrayChildren(nextChildren, parentReference, nextReference, contextMap, nextElement, hostNamespace);
+        }
+        else if (typeof nextChildren === 'string') {
+            if (prevChildren !== nextChildren) {
+                hostAdapter.setTextContent(nextElement.reference, nextChildren, true);
+            }
         }
-        else if (isPrimitive(nextChildren)) {
-            patchSingleTextChild(prevChildren, nextChildren, parentReference);
+        else if (nextChildren) {
+            hostAdapter.clearNode(parentReference);
+            nextChildren.parent = nextElement;
+            mount(nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
         else {
-            GLOBAL.hostAdapter.setTextContent(parentReference, '');
-            mount(nextChildren, parentReference, nextReference);
+            hostAdapter.clearNode(parentReference);
         }
     }
-    else {
-        if (isArray(nextChildren)) {
-            replaceOneElementWithMultipleElements(prevChildren, nextChildren, parentReference);
+    else if (prevChildren) {
+        if (Array.isArray(nextChildren)) {
+            patchKeyedChildren([prevChildren], nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
-        else if (isPrimitive(nextChildren)) {
+        else if (typeof nextChildren === 'string') {
             unmount(prevChildren);
-            GLOBAL.hostAdapter.setTextContent(parentReference, nextChildren);
+            hostAdapter.setTextContent(parentReference, nextChildren);
+        }
+        else if (nextChildren) {
+            nextChildren.parent = nextElement;
+            patch(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
         else {
-            patch(prevChildren, nextChildren, parentReference, nextReference);
+            unmount(prevChildren);
+            hostAdapter.clearNode(parentReference);
         }
     }
-}
-function replaceOneElementWithMultipleElements(prevChildren, nextChildren, parentReference) {
-    unmount(prevChildren);
-    mountArrayChildren(nextChildren, parentReference, findHostReferenceFromElement(prevChildren, true));
-    clearElementHostReference(prevChildren, parentReference);
-}
-function patchSingleTextChild(prevChildren, nextChildren, parentReference) {
-    if (prevChildren !== nextChildren) {
-        GLOBAL.hostAdapter.setTextContent(parentReference, nextChildren);
-    }
-}
-// export function patchNonKeyedChildren(
-//   prevChildren: SimpElement[],
-//   nextChildren: SimpElement[],
-//   parentReference: HostReference,
-//   prevChildrenLength: number,
-//   nextChildrenLength: number,
-//   nextReference: Nullable<HostReference>
-// ): void {
-//   const commonLength = prevChildrenLength > nextChildrenLength ? nextChildrenLength : prevChildrenLength;
-//   let i = 0;
-//   let prevChild;
-//   let nextChild;
-//
-//   for (; i < commonLength; ++i) {
-//     nextChild = nextChildren[i];
-//     prevChild = prevChildren[i];
-//
-//     patch(prevChild as SimpElement, nextChild as SimpElement, parentReference, nextReference);
-//     prevChildren[i] = nextChild!;
-//   }
-//   if (prevChildrenLength < nextChildrenLength) {
-//     for (i = commonLength; i < nextChildrenLength; ++i) {
-//       nextChild = nextChildren[i];
-//       mount(nextChild as SimpElement, parentReference, nextReference);
-//     }
-//   } else if (prevChildrenLength > nextChildrenLength) {
-//     for (i = commonLength; i < prevChildrenLength; ++i) {
-//       remove(prevChildren[i] as SimpElement, parentReference);
-//     }
-//   }
-// }
-function patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference) {
-    const prevChildren = prevElement.children;
-    const type = nextElement.type;
-    GLOBAL.eventBus.publish({ type: 'beforeRender', element: nextElement });
-    const nextChildren = normalizeRoot(type(nextElement.props || EMPTY_OBJECT));
-    GLOBAL.eventBus.publish({ type: 'afterRender' });
-    patch(prevChildren, nextChildren, parentReference, nextReference);
-    GLOBAL.eventBus.publish({ type: 'mounted', element: nextElement });
-    nextElement.children = nextChildren;
-}
-function patchText(prevElement, nextElement) {
-    const nextText = nextElement.children;
-    const reference = (nextElement.reference = prevElement.reference);
-    if (nextText !== prevElement.children) {
-        GLOBAL.hostAdapter.setTextContent(reference, nextText);
+    else {
+        if (Array.isArray(nextChildren)) {
+            mountArrayChildren(nextChildren, parentReference, nextReference, contextMap, nextElement, hostNamespace);
+        }
+        else if (typeof nextChildren === 'string') {
+            hostAdapter.setTextContent(parentReference, nextChildren);
+        }
+        else if (nextChildren) {
+            nextChildren.parent = nextElement;
+            mount(nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+        }
     }
 }
-function patchFragment(prevElement, nextElement, parentReference) {
-    patchChildren(prevElement.children, nextElement.children, parentReference, null, prevElement);
-}
-export function updateFunctionalComponent(element, parentReference, nextReference) {
-    patch(element, element, parentReference, nextReference);
-}
-export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference) {
-    var _a, _b, _c;
+export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace) {
     let prevStart = 0;
     let nextStart = 0;
     let prevEnd = prevChildren.length - 1;
@@ -203,21 +204,21 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
     while (prevStart <= prevEnd &&
         nextStart <= nextEnd &&
         prevChildren[prevStart].key === nextChildren[nextStart].key) {
-        patch(prevChildren[prevStart], nextChildren[nextStart], parentReference, null);
+        patch(prevChildren[prevStart], nextChildren[nextStart], parentReference, null, contextMap, 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);
+        patch(prevChildren[prevEnd], nextChildren[nextEnd], parentReference, null, contextMap, hostNamespace);
         prevEnd--;
         nextEnd--;
     }
     // Step 3: Mount new nodes if prev list is exhausted
     if (prevStart > prevEnd) {
-        const before = ((_a = nextChildren[nextEnd + 1]) === null || _a === void 0 ? void 0 : _a.reference) || nextReference;
+        const before = nextChildren[nextEnd + 1]?.reference || nextReference;
         for (let i = nextStart; i <= nextEnd; i++) {
-            mount(nextChildren[i], parentReference, before);
+            mount(nextChildren[i], parentReference, before, contextMap, hostNamespace);
         }
         // Step 4: Remove prev nodes if next list is exhausted
     }
@@ -232,8 +233,9 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
         const keyToPrevIndexMap = new Map();
         for (let i = prevStart; i <= prevEnd; i++) {
             const key = prevChildren[i].key;
-            if (key != null)
+            if (key != null) {
                 keyToPrevIndexMap.set(key, i);
+            }
         }
         // Track reused indices and move plan
         const toMove = new Array(nextEnd - nextStart + 1);
@@ -244,12 +246,12 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
             const prevIndex = keyToPrevIndexMap.get(nextChild.key);
             if (prevIndex != null) {
                 const prevElement = prevChildren[prevIndex];
-                patch(prevElement, nextChild, parentReference, null);
+                patch(prevElement, nextChild, parentReference, null, contextMap, hostNamespace);
                 toMove[i - nextStart] = prevIndex;
                 usedIndices.add(prevIndex);
             }
             else {
-                mount(nextChild, parentReference, ((_b = nextChildren[i + 1]) === null || _b === void 0 ? void 0 : _b.reference) || nextReference);
+                mount(nextChild, parentReference, nextChildren[i + 1]?.reference || nextReference, contextMap, hostNamespace);
                 toMove[i - nextStart] = -1;
             }
         }
@@ -262,10 +264,34 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
         // Insert in correct order
         for (let i = nextEnd; i >= nextStart; i--) {
             const currentChild = nextChildren[i];
-            const reference = ((_c = nextChildren[i + 1]) === null || _c === void 0 ? void 0 : _c.reference) || nextReference;
+            const reference = nextChildren[i + 1]?.reference || nextReference;
             if (toMove[i - nextStart] !== -1) {
-                GLOBAL.hostAdapter.insertBefore(parentReference, currentChild.reference, reference);
+                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;
+    }
+    return null;
+}
+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;
+}

package/core/portal.d.ts

@@ -0,0 +1,2 @@
+import type { SimpElement, SimpNode } from './createElement.js';
+export declare function createPortal(children: SimpNode, container: any): SimpElement;

package/core/portal.js

@@ -0,0 +1,9 @@
+import { normalizeRoot } from './createElement.js';
+export function createPortal(children, container) {
+    const element = { flag: 'PORTAL', parent: null };
+    if ((children = normalizeRoot(children, false))) {
+        element.children = children;
+    }
+    element.ref = container;
+    return element;
+}