@simpreact/simpreact 0.0.0-alpha.1f6ee65 → 0.0.1

package/core/createElement.d.ts

@@ -1,26 +1,33 @@
-import type { Many, Maybe, Primitive } from '../shared';
+import type { Many, Maybe, Nullable, SimpText } from '../shared';
 import type { HostReference } from './hostAdapter';
 import type { SimpContextMap } from './context';
-export type SimpNode = SimpElement | string | number | bigint | Array<SimpNode> | boolean | null | undefined;
-export type Props = any;
+export type SimpNode = SimpElement | SimpText | Array<SimpNode> | boolean | null | undefined;
 export type Key = string | number | bigint;
-export interface FunctionComponent<P = Props> {
-    (props: P): SimpNode;
+export interface FunctionComponent {
+    (props: any): SimpNode;
 }
-export type FC<P = Props> = FunctionComponent<P>;
-export type SimpElementFlag = 'FC' | 'HOST' | 'TEXT' | 'FRAGMENT' | 'PROVIDER' | 'CONSUMER';
-export interface SimpElement<T = Props> {
+export type FC = FunctionComponent;
+export type SimpElementFlag = 'FC' | 'HOST' | 'TEXT' | 'FRAGMENT' | 'PROVIDER' | 'CONSUMER' | 'PORTAL';
+export interface SimpElementStore {
+    latestElement?: Maybe<SimpElement>;
+    hostNamespace?: Maybe<string>;
+    [key: string]: unknown;
+}
+export interface SimpElement {
     flag: SimpElementFlag;
+    parent: Nullable<SimpElement>;
     key?: Maybe<Key>;
-    type?: Maybe<string | FunctionComponent<T>>;
-    props?: Maybe<T>;
+    type?: Maybe<string | FunctionComponent>;
+    props?: any;
     children?: Maybe<SimpNode>;
     className?: Maybe<string>;
     reference?: Maybe<HostReference>;
-    store?: unknown;
+    store?: SimpElementStore;
     contextMap?: Maybe<SimpContextMap>;
+    ref?: any;
+    unmounted?: boolean;
 }
-export declare function createElement<P = Props>(type: string | FunctionComponent<Readonly<P>>, props?: Maybe<P>, ...children: SimpNode[]): SimpElement<P>;
-export declare function createTextElement(text: Primitive): SimpElement;
-export declare function normalizeChildren(children: SimpNode): Maybe<Many<SimpElement>>;
-export declare function normalizeRoot(node: SimpNode): SimpElement | undefined;
+export declare function createElement(type: string | FunctionComponent, props?: any, ...children: SimpNode[]): SimpElement;
+export declare function createTextElement(text: SimpText): SimpElement;
+export declare function normalizeChildren(children: SimpNode, skipIgnoredCheck: boolean): Maybe<Many<SimpElement>>;
+export declare function normalizeRoot(node: SimpNode, skipIgnoredCheck: boolean): Maybe<SimpElement>;

package/core/createElement.js

@@ -1,4 +1,4 @@
-import { isPrimitive } from '../shared';
+import { isSimpText } from '../shared';
 import { Fragment } from './fragment';
 import { isConsumer, isProvider } from './context';
 export function createElement(type, props, ...children) {
@@ -17,6 +17,7 @@ export function createElement(type, props, ...children) {
         }
     }
     if (typeof type === 'string') {
+        let ref;
         if (props != null) {
             for (const propName in props) {
                 if (propName === 'className') {
@@ -30,6 +31,11 @@ export function createElement(type, props, ...children) {
                         definedChildren = props[propName];
                     }
                 }
+                else if (propName === 'ref') {
+                    ref = {
+                        value: props[propName],
+                    };
+                }
                 else {
                     (newProps ||= {})[propName] = props[propName];
                 }
@@ -38,6 +44,7 @@ export function createElement(type, props, ...children) {
         const element = {
             flag: 'HOST',
             type,
+            parent: null,
         };
         if (className) {
             element.className = className;
@@ -45,27 +52,35 @@ export function createElement(type, props, ...children) {
         if (key) {
             element.key = key;
         }
-        if ((definedChildren = normalizeChildren(definedChildren))) {
+        if ((definedChildren = normalizeChildren(definedChildren, false))) {
             element.children = definedChildren;
         }
         if (newProps) {
             element.props = newProps;
         }
+        if (ref) {
+            element.ref = ref;
+        }
         return element;
     }
     else if (type === Fragment) {
         const element = {
             flag: 'FRAGMENT',
+            parent: null,
         };
-        element.children = normalizeChildren(definedChildren || (props != null ? props.children : null));
+        if ((definedChildren = normalizeChildren(definedChildren || (props != null ? props.children : null), false))) {
+            element.children = definedChildren;
+        }
         if (props != null && props.key) {
             element.key = props?.key;
         }
         return element;
     }
     else if (isProvider(type)) {
-        const element = { flag: 'PROVIDER', type, props: { value: props.value } };
-        element.children = normalizeChildren(definedChildren || props.children);
+        const element = { flag: 'PROVIDER', type, props: { value: props.value }, parent: null };
+        if ((definedChildren = normalizeChildren(definedChildren || props.children, false))) {
+            element.children = definedChildren;
+        }
         if (props != null && props.key) {
             element.key = props?.key;
         }
@@ -76,6 +91,7 @@ export function createElement(type, props, ...children) {
             flag: 'CONSUMER',
             type,
             props: { children: definedChildren || (props != null ? props.children : null) },
+            parent: null,
         };
         if (props != null && props.key) {
             element.key = props?.key;
@@ -104,6 +120,7 @@ export function createElement(type, props, ...children) {
         const element = {
             flag: 'FC',
             type,
+            parent: null,
         };
         if (key) {
             element.key = key;
@@ -117,50 +134,77 @@ export function createElement(type, props, ...children) {
 export function createTextElement(text) {
     return {
         flag: 'TEXT',
-        children: text == null || text === true || text === false ? '' : text,
+        children: text,
+        parent: null,
     };
 }
-export function normalizeChildren(children) {
-    if (children == null || typeof children === 'boolean') {
+export function normalizeChildren(children, skipIgnoredCheck) {
+    if (!skipIgnoredCheck && isIgnoredNode(children)) {
         return;
     }
     const result = [];
-    normalizeNode(children, result);
+    normalizeNode(children, result, undefined, true);
     if (result.length === 0) {
         return;
     }
     return result.length === 1 ? result[0] : result;
 }
-function normalizeNode(child, result) {
-    if (child == null || typeof child === 'boolean') {
+function normalizeNode(child, result, currentKey = '', skipIgnoredCheck) {
+    if (!skipIgnoredCheck && isIgnoredNode(child)) {
         return;
     }
-    if (isPrimitive(child)) {
-        result.push(createTextElement(child));
+    if (isSimpText(child)) {
+        child = createTextElement(child);
+        child.key =
+            currentKey ||
+                // Hack to treat a single child as a one-item list for more consistent reconciliation.
+                '.0';
+        result.push(child);
         return;
     }
     if (Array.isArray(child)) {
-        for (const nestedChild of child) {
-            normalizeNode(nestedChild, result);
+        for (let i = 0; i < child.length; i++) {
+            normalizeNode(child[i], result, currentKey + '.' + i, false);
         }
         return;
     }
-    if (typeof child === 'object') {
-        if (typeof child.flag !== 'string') {
-            throw new TypeError(`Objects are not valid as a child: ${JSON.stringify(child)}.`);
-        }
-        result.push(child);
+    if (child.key) {
+        currentKey = currentKey.slice(0, -2) + child.key;
     }
+    child.key =
+        currentKey ||
+            // Hack to treat a single child as a one-item list for more consistent reconciliation.
+            '.0';
+    result.push(child);
 }
-export function normalizeRoot(node) {
-    if (node == null || typeof node === 'boolean') {
+export function normalizeRoot(node, skipIgnoredCheck) {
+    if (!skipIgnoredCheck && isIgnoredNode(node)) {
         return;
     }
-    if (isPrimitive(node)) {
+    if (isSimpText(node)) {
         return createTextElement(node);
     }
+    if (!Array.isArray(node)) {
+        return node;
+    }
+    node = normalizeChildren(node, true);
     if (Array.isArray(node)) {
         return createElement(Fragment, { children: node });
     }
     return node;
 }
+function isIgnoredNode(node) {
+    if (node == null || typeof node === 'boolean' || node === '') {
+        return true;
+    }
+    if (Array.isArray(node)) {
+        return node.length === 0;
+    }
+    if (isSimpText(node)) {
+        return false;
+    }
+    if (node.flag === 'FRAGMENT' || node.flag === 'PROVIDER' || node.flag === 'PORTAL') {
+        return node.children == null;
+    }
+    return false;
+}

package/core/hostAdapter.d.ts

@@ -1,11 +1,13 @@
-import type { Dict, Maybe, Nullable } from '../shared';
-export type HostReference = never;
-export interface HostAdapter<HostRef = any, HostTextRef = any> {
-    createReference(type: string): HostRef;
+import type { Maybe, Nullable } from '../shared';
+import type { SimpElement } from './createElement';
+export type HostReference = any;
+export interface HostAdapter<HostRef = any, HostTextRef = any, NS = string> {
+    createReference(type: string, namespace?: Maybe<NS>): HostRef;
     createTextReference(text: string): HostTextRef;
-    mountProps(reference: HostRef, props: Dict): void;
-    patchProp(reference: HostRef, propName: string, prevValue: unknown, nextValue: unknown): void;
-    setClassname(reference: HostRef, className: Maybe<string>): void;
+    mountProps(reference: HostRef, element: SimpElement, namespace?: Maybe<NS>): void;
+    patchProps(reference: HostRef, prevElement: SimpElement, nextElement: SimpElement, namespace?: Maybe<NS>): void;
+    unmountProps(reference: HostRef, element: SimpElement): void;
+    setClassname(reference: HostRef, className: Maybe<string>, namespace?: Maybe<NS>): void;
     setTextContent(reference: HostRef, text: string): void;
     appendChild(parent: HostRef, child: HostRef | HostTextRef): void;
     removeChild(parent: HostRef, child: HostRef | HostTextRef): void;
@@ -13,5 +15,13 @@ export interface HostAdapter<HostRef = any, HostTextRef = any> {
     insertBefore(parent: HostRef, child: HostRef | HostTextRef, before: Nullable<HostRef | HostTextRef>): void;
     insertOrAppend(parent: HostRef, child: HostRef | HostTextRef, before: Nullable<HostRef | HostTextRef>): void;
     findParentReference(reference: HostRef | HostTextRef): Nullable<HostRef>;
+    findNextSiblingReference(reference: HostRef | HostTextRef): Nullable<HostRef>;
     clearNode(reference: HostRef | HostTextRef): void;
+    attachElementToReference(element: SimpElement, reference: HostRef | HostTextRef): void;
+    getHostNamespaces(element: SimpElement, currentNamespace: Maybe<NS>): Nullable<{
+        self: Nullable<NS>;
+        children: Nullable<NS>;
+    }>;
 }
+export declare let hostAdapter: HostAdapter;
+export declare function provideHostAdapter(adapter: HostAdapter): void;

package/core/hostAdapter.js

@@ -1 +1,4 @@
-export {};
+export let hostAdapter;
+export function provideHostAdapter(adapter) {
+    hostAdapter = adapter;
+}

package/core/index.d.ts

@@ -1,3 +1,68 @@
-export { type FC, type SimpElement, createElement, type SimpNode, type FunctionComponent } from './createElement';
-export { Fragment } from './fragment';
-export { type SimpContext, createContext } from './context';
+import type { SimpText } from '../shared';
+
+export type ComponentType<P = {}> = FunctionComponent<P>;
+
+export type RefObject<T> = { current: T };
+export type RefCallback<T> = {
+  bivarianceHack(instance: T | null): (() => void | undefined) | void;
+}['bivarianceHack'];
+export type Ref<T> = RefCallback<T> | RefObject<T> | null;
+
+export type Key = string | number | bigint;
+
+export interface Attributes {
+  key?: Key | null | undefined;
+}
+
+export interface RefAttributes<T> extends Attributes {
+  ref?: Ref<T> | undefined;
+}
+
+export interface SimpElement<P = unknown, T extends string | FunctionComponent<P> = string> {
+  type?: T;
+  props?: P;
+  key?: string | null;
+}
+
+export type SimpNode = SimpElement | SimpText | Array<SimpNode> | boolean | null | undefined;
+
+export interface ProviderProps<T> {
+  value: T;
+  children?: SimpNode | undefined;
+}
+
+export interface ConsumerProps<T> {
+  children: (value: T) => SimpNode;
+}
+
+export type SimpContext<T> = {
+  Provider: Provider<T>;
+  Consumer: Consumer<T>;
+};
+
+export type ContextType<C extends SimpContext<any>> = C extends SimpContext<infer T> ? T : never;
+
+export type Provider<T> = FunctionComponent<ProviderProps<T>>;
+export type Consumer<T> = FunctionComponent<ConsumerProps<T>>;
+
+declare function createElement<P extends {}, T>(
+  type: string,
+  props?: (RefAttributes<T> & P) | null,
+  ...children: SimpNode[]
+): SimpElement<P>;
+declare function createElement<P extends {}>(
+  type: FunctionComponent<P>,
+  props?: (Attributes & P) | null,
+  ...children: SimpNode[]
+): SimpElement<P>;
+
+declare function createPortal<HostRef = {}>(children: SimpNode, container: HostRef): SimpElement;
+
+declare function createContext<T>(defaultValue: T): SimpContext<T>;
+
+declare function Fragment(props: PropsWithChildren): SimpElement;
+
+export type FunctionComponent<P = {}> = (props: P) => SimpNode;
+export type FC<P = {}> = FunctionComponent<P>;
+
+export type PropsWithChildren<P = {}> = P & { children?: SimpNode | undefined };

package/core/index.js

@@ -1,3 +1,6 @@
-export { createElement } from './createElement';
-export { Fragment } from './fragment';
-export { createContext } from './context';
+import { createElement } from './createElement';
+import { Fragment } from './fragment';
+import { createContext } from './context';
+import { createPortal } from './portal';
+export { createElement, Fragment, createContext, createPortal };
+export default { createElement, Fragment, createContext, createPortal };

package/core/internal.d.ts

@@ -1,8 +1,11 @@
-export * from './index';
 export * from './context';
 export * from './createElement';
-export * from './rerender';
-export * from './global';
+export * from './fragment';
 export * from './hostAdapter';
+export * from './lifecycleEventBus';
 export * from './mounting';
 export * from './patching';
+export * from './portal';
+export * from './ref';
+export * from './rerender';
+export * from './unmounting';

package/core/internal.js

@@ -1,8 +1,11 @@
-export * from './index';
 export * from './context';
 export * from './createElement';
-export * from './rerender';
-export * from './global';
+export * from './fragment';
 export * from './hostAdapter';
+export * from './lifecycleEventBus';
 export * from './mounting';
 export * from './patching';
+export * from './portal';
+export * from './ref';
+export * from './rerender';
+export * from './unmounting';

package/core/lifecycleEventBus.d.ts

@@ -0,0 +1,26 @@
+import { EventBus } from '../shared';
+import type { SimpElement } from './createElement';
+export type LifecycleEvent = {
+    type: 'beforeRender';
+    element: SimpElement;
+    phase: 'mounting' | 'updating';
+} | {
+    type: 'afterRender';
+    phase: 'mounting' | 'updating';
+} | {
+    type: 'mounted';
+    element: SimpElement;
+} | {
+    type: 'updated';
+    element: SimpElement;
+} | {
+    type: 'unmounted';
+    element: SimpElement;
+} | {
+    type: 'errored';
+    element: SimpElement;
+    error: any;
+    phase: 'mounting' | 'updating';
+};
+export type LifecycleEventBus = EventBus<LifecycleEvent>;
+export declare const lifecycleEventBus: EventBus<LifecycleEvent>;

package/core/lifecycleEventBus.js

@@ -0,0 +1,2 @@
+import { EventBus } from '../shared';
+export const lifecycleEventBus = new EventBus();

package/core/mounting.d.ts

@@ -1,12 +1,13 @@
-import type { Nullable } from '../shared';
+import type { Maybe, Nullable } from '../shared';
 import type { HostReference } from './hostAdapter';
 import type { SimpElement } from './createElement';
 import type { SimpContextMap } from './context';
-export declare function mount(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
+export declare function mount(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, 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>, contextMap: Nullable<SimpContextMap>): void;
-export declare function mountFunctionalElement(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
-export declare function mountFragment(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
-export declare function mountArrayChildren(children: SimpElement[], reference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
-export declare function mountProvider(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
-export declare function mountConsumer(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
+export declare function mountHostElement(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function mountFunctionalElement(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function mountFragment(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function mountArrayChildren(children: SimpElement[], reference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, parentElement: SimpElement, hostNamespace: Maybe<string>): void;
+export declare function mountProvider(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function mountConsumer(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>, hostNamespace: Maybe<string>): void;
+export declare function mountPortal(element: SimpElement, parentReference: Nullable<HostReference>, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;

package/core/mounting.js

@@ -1,95 +1,132 @@
-import { EMPTY_MAP, EMPTY_OBJECT } from '../shared';
-import { GLOBAL } from './global';
-import { normalizeRoot } from './createElement';
-export function mount(element, parentReference, nextReference, contextMap) {
+import { emptyMap, emptyObject } from '../shared';
+import { hostAdapter } from './hostAdapter';
+import { createTextElement, normalizeRoot } from './createElement';
+import { applyRef } from './ref';
+import { lifecycleEventBus } from './lifecycleEventBus';
+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, contextMap);
+        mountHostElement(element, parentReference, nextReference, contextMap, hostNamespace);
     }
     else if (element.flag === 'FC') {
-        mountFunctionalElement(element, parentReference, nextReference, contextMap);
+        mountFunctionalElement(element, parentReference, nextReference, contextMap, hostNamespace);
     }
     else if (element.flag === 'FRAGMENT') {
-        mountFragment(element, parentReference, nextReference, contextMap);
+        mountFragment(element, parentReference, nextReference, contextMap, hostNamespace);
     }
     else if (element.flag === 'PROVIDER') {
-        mountProvider(element, parentReference, nextReference, contextMap);
+        mountProvider(element, parentReference, nextReference, contextMap, hostNamespace);
+    }
+    else if (element.flag === 'PORTAL') {
+        mountPortal(element, parentReference, nextReference, contextMap);
     }
     else {
-        mountConsumer(element, parentReference, nextReference, contextMap);
+        mountConsumer(element, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
 export function mountTextElement(element, parentReference, nextReference) {
-    const 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, contextMap) {
-    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);
+    if (parentReference) {
+        hostAdapter.insertOrAppend(parentReference, hostReference, nextReference);
+    }
     // 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, contextMap);
+        mountArrayChildren(children, hostReference, null, contextMap, element, hostNamespaces?.children);
     }
-    else if (children != null) {
-        mount(children, hostReference, null, contextMap);
+    else if (children) {
+        children.parent = element;
+        mount(children, hostReference, null, contextMap, hostNamespaces?.children);
     }
-    if (parentReference != null) {
-        GLOBAL.hostAdapter.insertOrAppend(parentReference, hostReference, nextReference);
+    if (element.props) {
+        hostAdapter.mountProps(hostReference, element, hostNamespace);
     }
-    if (props != null) {
-        GLOBAL.hostAdapter.mountProps(hostReference, props);
+    if (element.className) {
+        hostAdapter.setClassname(hostReference, element.className, hostNamespace);
     }
+    applyRef(element);
 }
-export function mountFunctionalElement(element, parentReference, nextReference, contextMap) {
-    const type = element.type;
+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;
-    element.contextMap = contextMap;
-    GLOBAL.eventBus.publish({ type: 'beforeRender', element });
-    children = normalizeRoot(type(element.props || EMPTY_OBJECT));
-    GLOBAL.eventBus.publish({ type: 'afterRender' });
-    if (children != null) {
-        mount((element.children = children), parentReference, nextReference, contextMap);
-    }
-    GLOBAL.eventBus.publish({ type: 'mounted', element });
+    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, contextMap) {
+export function mountFragment(element, parentReference, nextReference, contextMap, hostNamespace) {
     // FRAGMENT element always has Maybe<Many<SimpElement>> children due to normalization process.
     if (Array.isArray(element.children)) {
-        mountArrayChildren(element.children, parentReference, nextReference, contextMap);
+        mountArrayChildren(element.children, parentReference, nextReference, contextMap, element, hostNamespace);
     }
-    else if (element.children != null) {
-        mount(element.children, parentReference, nextReference, contextMap);
+    else if (element.children) {
+        element.children.parent = element;
+        mount(element.children, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
-export function mountArrayChildren(children, reference, nextReference, contextMap) {
+export function mountArrayChildren(children, reference, nextReference, contextMap, parentElement, hostNamespace) {
     for (const child of children) {
-        mount(child, reference, nextReference, contextMap);
+        child.parent = parentElement;
+        mount(child, reference, nextReference, contextMap, hostNamespace);
     }
 }
-export function mountProvider(element, parentReference, nextReference, contextMap) {
+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);
+        mountArrayChildren(element.children, parentReference, nextReference, contextMap, element, hostNamespace);
     }
-    else if (element.children != null) {
-        mount(element.children, parentReference, nextReference, contextMap);
+    else if (element.children) {
+        element.children.parent = element;
+        mount(element.children, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
-export function mountConsumer(element, parentReference, nextReference, contextMap) {
-    const children = normalizeRoot(element.type(element.props || EMPTY_OBJECT, contextMap || EMPTY_MAP));
-    if (children == null) {
+export function mountConsumer(element, parentReference, nextReference, contextMap, hostNamespace) {
+    const children = normalizeRoot(element.type(element.props || emptyObject, contextMap || emptyMap), false);
+    if (!children) {
         return;
     }
-    mount((element.children = children), parentReference, nextReference, contextMap);
+    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,8 +1,10 @@
+import type { Maybe, Nullable } from '../shared';
 import type { SimpElement } from './createElement';
-import type { Nullable } from '../shared';
 import type { HostReference } from './hostAdapter';
 import type { SimpContextMap } from './context';
-export declare function patch(prevElement: SimpElement, nextElement: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
+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>;
-export declare function updateFunctionalComponent(element: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;
-export declare function patchKeyedChildren(prevChildren: SimpElement[], nextChildren: SimpElement[], parentReference: HostReference, nextReference: Nullable<HostReference>, contextMap: Nullable<SimpContextMap>): void;