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

package/core/patching.js

@@ -1,208 +1,171 @@
+import { emptyMap, emptyObject } from '../shared';
 import { normalizeRoot } from './createElement';
-import { EMPTY_MAP, EMPTY_OBJECT, isPrimitive } from '../shared';
-import { clearElementHostReference, remove, removeAllChildren, unmount, unmountAllChildren } from './unmounting';
+import { hostAdapter } from './hostAdapter';
+import { clearElementHostReference, remove, unmount } from './unmounting';
 import { mount, mountArrayChildren } from './mounting';
-import { GLOBAL } from './global';
-export function patch(prevElement, nextElement, parentReference, nextReference, contextMap) {
+import { applyRef } from './ref';
+import { lifecycleEventBus } from './lifecycleEventBus';
+export function patch(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
     if (prevElement.type !== nextElement.type || prevElement.key !== nextElement.key) {
-        replaceWithNewElement(prevElement, nextElement, parentReference, contextMap);
+        replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace);
     }
     else if (nextElement.flag === 'HOST') {
-        patchElement(prevElement, nextElement, contextMap);
+        patchHostElement(prevElement, nextElement, contextMap, hostNamespace);
     }
     else if (nextElement.flag === 'FC') {
-        if (prevElement.store != null) {
-            nextElement.store = prevElement.store;
-        }
-        patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, contextMap);
+        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, nextReference, contextMap);
+        patchFragment(prevElement, nextElement, parentReference, contextMap, hostNamespace);
     }
     else if (nextElement.flag === 'PROVIDER') {
-        patchProvider(prevElement, nextElement, parentReference, nextReference, contextMap);
+        patchProvider(prevElement, nextElement, parentReference, contextMap, hostNamespace);
+    }
+    else if (nextElement.flag === 'PORTAL') {
+        patchPortal(prevElement, nextElement, contextMap);
     }
     else {
-        patchConsumer(prevElement, nextElement, parentReference, nextReference, contextMap);
+        patchConsumer(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace);
     }
 }
-function replaceWithNewElement(prevElement, nextElement, parentReference, contextMap) {
+function replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace) {
     unmount(prevElement);
+    nextElement.parent = prevElement.parent;
     if (nextElement.flag === 'HOST' && prevElement.flag === 'HOST') {
-        mount(nextElement, null, null, contextMap);
-        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), contextMap);
+        mount(nextElement, parentReference, findHostReferenceFromElement(prevElement), contextMap, hostNamespace);
         clearElementHostReference(prevElement, parentReference);
     }
 }
-export function findHostReferenceFromElement(element) {
-    let flag;
-    let temp = element;
-    while (temp != null) {
-        flag = temp.flag;
-        if (flag === 'HOST' || flag === 'TEXT') {
-            return temp.reference;
-        }
-        temp = (Array.isArray(temp.children) ? temp.children[0] : temp.children);
+function patchHostElement(prevElement, nextElement, contextMap, hostNamespace) {
+    if (prevElement.ref) {
+        nextElement.ref = prevElement.ref;
     }
-    return null;
+    const hostNamespaces = hostAdapter.getHostNamespaces(nextElement, hostNamespace);
+    hostNamespace = hostNamespaces?.self;
+    nextElement.reference = prevElement.reference;
+    hostAdapter.attachElementToReference(nextElement, nextElement.reference);
+    patchChildren(prevElement.children, nextElement.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);
+    }
+    applyRef(nextElement);
 }
-function patchElement(prevElement, nextElement, contextMap) {
-    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;
     }
-    if (prevElement.className !== nextElement.className) {
-        GLOBAL.hostAdapter.setClassname(hostReference, nextElement.className);
+    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;
     }
-    patchChildren(prevElement.children, nextElement.children, hostReference, null, prevElement, contextMap);
+    const prevChildren = prevElement.children;
+    if (nextChildren) {
+        nextElement.children = nextChildren;
+    }
+    patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+    lifecycleEventBus.publish({ type: 'updated', element: nextElement });
 }
-function patchChildren(prevChildren, nextChildren, parentReference, nextReference, parentElement, contextMap) {
+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;
+    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);
+    }
+}
+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)) {
-            const prevChildrenLength = prevChildren.length;
-            const nextChildrenLength = nextChildren.length;
-            if (prevChildrenLength === 0) {
-                if (nextChildrenLength > 0) {
-                    mountArrayChildren(nextChildren, parentReference, nextReference, contextMap);
-                }
-            }
-            else if (nextChildrenLength === 0) {
-                removeAllChildren(parentReference, parentElement, prevChildren);
-            }
-            else {
-                patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap);
+            for (const child of nextChildren) {
+                child.parent = nextElement;
             }
+            patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
-        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, contextMap);
+            unmount(prevChildren);
+            hostAdapter.clearNode(parentReference);
         }
     }
-    else if (isPrimitive(prevChildren)) {
+    else if (prevChildren) {
         if (Array.isArray(nextChildren)) {
-            GLOBAL.hostAdapter.clearNode(parentReference);
-            mountArrayChildren(nextChildren, parentReference, nextReference, contextMap);
+            patchKeyedChildren([prevChildren], nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
-        else if (isPrimitive(nextChildren)) {
-            patchSingleTextChild(prevChildren, nextChildren, parentReference);
+        else if (nextChildren) {
+            nextChildren.parent = nextElement;
+            patch(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
         else {
-            GLOBAL.hostAdapter.clearNode(parentReference);
-            mount(nextChildren, parentReference, nextReference, contextMap);
+            unmount(prevChildren);
+            hostAdapter.clearNode(parentReference);
         }
     }
     else {
         if (Array.isArray(nextChildren)) {
-            replaceOneElementWithMultipleElements(prevChildren, nextChildren, parentReference, contextMap);
-        }
-        else if (isPrimitive(nextChildren)) {
-            unmount(prevChildren);
-            GLOBAL.hostAdapter.setTextContent(parentReference, nextChildren);
+            mountArrayChildren(nextChildren, parentReference, nextReference, contextMap, nextElement, hostNamespace);
         }
-        else {
-            patch(prevChildren, nextChildren, parentReference, nextReference, contextMap);
+        else if (nextChildren) {
+            nextChildren.parent = nextElement;
+            mount(nextChildren, parentReference, nextReference, contextMap, hostNamespace);
         }
     }
 }
-function replaceOneElementWithMultipleElements(prevChildren, nextChildren, parentReference, contextMap) {
-    unmount(prevChildren);
-    mountArrayChildren(nextChildren, parentReference, findHostReferenceFromElement(prevChildren), contextMap);
-    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, contextMap) {
-    nextElement.contextMap = contextMap;
-    GLOBAL.eventBus.publish({ type: 'beforeRender', element: nextElement });
-    const nextChildren = normalizeRoot(nextElement.type(nextElement.props || EMPTY_OBJECT));
-    GLOBAL.eventBus.publish({ type: 'afterRender' });
-    if (nextChildren != null) {
-        nextElement.children = nextChildren;
-    }
-    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, prevElement, contextMap);
-    GLOBAL.eventBus.publish({ type: 'mounted', element: nextElement });
-}
-function patchText(prevElement, nextElement) {
-    const nextText = nextElement.children;
-    const reference = (nextElement.reference = prevElement.reference);
-    if (nextText !== prevElement.children) {
-        GLOBAL.hostAdapter.setTextContent(reference, nextText);
-    }
-}
-function patchFragment(prevElement, nextElement, parentReference, nextReference, contextMap) {
-    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, prevElement, contextMap);
-}
-function patchProvider(prevElement, nextElement, parentReference, nextReference, contextMap) {
-    contextMap = new Map(contextMap);
-    contextMap.set(nextElement.type.context, nextElement.props.value);
-    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, prevElement, contextMap);
-}
-function patchConsumer(prevElement, nextElement, parentReference, nextReference, contextMap) {
-    const children = normalizeRoot(nextElement.type(nextElement.props || EMPTY_OBJECT, contextMap || EMPTY_MAP));
-    if (children != null) {
-        nextElement.children = children;
-    }
-    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, prevElement, contextMap);
-}
-export function updateFunctionalComponent(element, parentReference, nextReference, contextMap) {
-    patch(element, element, parentReference, nextReference, contextMap);
-}
-export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap) {
+export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace) {
     let prevStart = 0;
     let nextStart = 0;
     let prevEnd = prevChildren.length - 1;
@@ -211,13 +174,13 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
     while (prevStart <= prevEnd &&
         nextStart <= nextEnd &&
         prevChildren[prevStart].key === nextChildren[nextStart].key) {
-        patch(prevChildren[prevStart], nextChildren[nextStart], parentReference, null, contextMap);
+        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, contextMap);
+        patch(prevChildren[prevEnd], nextChildren[nextEnd], parentReference, null, contextMap, hostNamespace);
         prevEnd--;
         nextEnd--;
     }
@@ -225,7 +188,7 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
     if (prevStart > prevEnd) {
         const before = nextChildren[nextEnd + 1]?.reference || nextReference;
         for (let i = nextStart; i <= nextEnd; i++) {
-            mount(nextChildren[i], parentReference, before, contextMap);
+            mount(nextChildren[i], parentReference, before, contextMap, hostNamespace);
         }
         // Step 4: Remove prev nodes if next list is exhausted
     }
@@ -240,8 +203,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);
@@ -252,12 +216,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, contextMap);
+                patch(prevElement, nextChild, parentReference, null, contextMap, hostNamespace);
                 toMove[i - nextStart] = prevIndex;
                 usedIndices.add(prevIndex);
             }
             else {
-                mount(nextChild, parentReference, nextChildren[i + 1]?.reference || nextReference, contextMap);
+                mount(nextChild, parentReference, nextChildren[i + 1]?.reference || nextReference, contextMap, hostNamespace);
                 toMove[i - nextStart] = -1;
             }
         }
@@ -272,8 +236,32 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
             const currentChild = nextChildren[i];
             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';
+export declare function createPortal(children: SimpNode, container: any): SimpElement;

package/core/portal.js

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

package/core/ref.d.ts

@@ -0,0 +1,17 @@
+import type { SimpElement } from './createElement';
+interface RefSimpElement extends SimpElement {
+    ref?: {
+        value: NonNullable<Ref<unknown>>;
+        cleanup?: () => void;
+    };
+}
+export interface RefObject<T> {
+    current: T;
+}
+export type RefCallback<T> = {
+    bivarianceHack(instance: T | null): (() => void) | void;
+}['bivarianceHack'];
+export type Ref<T> = RefCallback<T> | RefObject<T> | null;
+export declare function unmountRef(element: RefSimpElement): void;
+export declare function applyRef(element: RefSimpElement): void;
+export {};

package/core/ref.js

@@ -0,0 +1,27 @@
+export function unmountRef(element) {
+    if (element.ref == null) {
+        return;
+    }
+    if (typeof element.ref.cleanup === 'function') {
+        element.ref.cleanup();
+    }
+    if (typeof element.ref.value !== 'function') {
+        element.ref.value.current = null;
+    }
+}
+export function applyRef(element) {
+    if (element.ref == null) {
+        return;
+    }
+    if (typeof element.ref.cleanup === 'function') {
+        element.ref.cleanup();
+    }
+    if (typeof element.ref.value === 'function') {
+        let cleanup;
+        if ((cleanup = element.ref.value(element.reference))) {
+            element.ref.cleanup = cleanup;
+        }
+        return;
+    }
+    element.ref.value.current = element.reference;
+}

package/core/rerender.d.ts

@@ -1,2 +1,13 @@
 import type { SimpElement } from './createElement';
 export declare function rerender(element: SimpElement): void;
+interface IRendererLocker {
+    _isLocked: boolean;
+    _elements: Set<SimpElement>;
+    isLocked: boolean;
+    lock(): void;
+    track(element: SimpElement): void;
+    flush(): void;
+}
+export declare const syncRerenderLocker: IRendererLocker;
+export declare const asyncRerenderLocker: IRendererLocker;
+export {};

package/core/rerender.js

@@ -1,5 +1,63 @@
-import { findHostReferenceFromElement, updateFunctionalComponent } from './patching';
-import { GLOBAL } from './global';
+import { findParentReferenceFromElement, updateFunctionalComponent } from './patching';
 export function rerender(element) {
-    updateFunctionalComponent(element, GLOBAL.hostAdapter.findParentReference(findHostReferenceFromElement(element)), null, element.contextMap || null);
+    if (element.flag !== 'FC') {
+        throw new TypeError('Re-rendering is only supported for FC elements.');
+    }
+    if (element.unmounted) {
+        console.warn('The component unmounted.');
+    }
+    if (syncRerenderLocker.isLocked) {
+        syncRerenderLocker.track(element);
+        return;
+    }
+    else if (asyncRerenderLocker.isLocked) {
+        asyncRerenderLocker.track(element);
+    }
+    else {
+        asyncRerenderLocker.lock();
+        updateFunctionalComponent(element, findParentReferenceFromElement(element), null, element.contextMap || null, element.store.hostNamespace);
+        asyncRerenderLocker.flush();
+    }
 }
+export const syncRerenderLocker = {
+    _isLocked: false,
+    _elements: new Set(),
+    get isLocked() {
+        return this._isLocked;
+    },
+    lock() {
+        this._isLocked = true;
+    },
+    track(element) {
+        this._elements.add(element);
+    },
+    flush() {
+        this._isLocked = false;
+        for (const element of this._elements) {
+            this._elements.delete(element);
+            rerender(element.store.latestElement);
+        }
+    },
+};
+export const asyncRerenderLocker = {
+    _isLocked: false,
+    _elements: new Set(),
+    get isLocked() {
+        return this._isLocked;
+    },
+    lock() {
+        this._isLocked = true;
+    },
+    track(element) {
+        this._elements.add(element);
+    },
+    flush() {
+        this._isLocked = false;
+        queueMicrotask(() => {
+            for (const element of this._elements) {
+                this._elements.delete(element);
+                rerender(element.store.latestElement);
+            }
+        });
+    },
+};

package/core/unmounting.d.ts

@@ -1,8 +1,6 @@
+import type { Many, Maybe } from '../shared';
 import type { SimpElement } from './createElement';
-import type { Maybe } from '../shared';
 import type { HostReference } from './hostAdapter';
-export declare function unmount(element: SimpElement): void;
-export declare function unmountAllChildren(children: SimpElement[]): void;
+export declare function unmount(element: Many<SimpElement>): void;
 export declare function clearElementHostReference(element: Maybe<SimpElement>, parentHostReference: HostReference): void;
-export declare function removeAllChildren(hostReference: HostReference, element: SimpElement, children: SimpElement[]): void;
 export declare function remove(element: SimpElement, parentReference: HostReference): void;

package/core/unmounting.js

@@ -1,32 +1,43 @@
-import { GLOBAL } from './global';
+import { hostAdapter } from './hostAdapter';
+import { unmountRef } from './ref';
+import { lifecycleEventBus } from './lifecycleEventBus';
 export function unmount(element) {
+    if (Array.isArray(element)) {
+        for (const child of element) {
+            unmount(child);
+        }
+        return;
+    }
     if (element.flag === 'FC') {
-        // FC element always has only one root element due to normalization.
-        unmount(element.children);
-        GLOBAL.eventBus.publish({ type: 'unmounted', element });
+        // FC element always has Maybe<SimpElement> due to normalization.
+        if (element.children) {
+            unmount(element.children);
+        }
+        element.unmounted = true;
+        lifecycleEventBus.publish({ type: 'unmounted', element });
         return;
     }
     if (element.flag === 'TEXT') {
         return;
     }
+    if (element.flag === 'PORTAL') {
+        remove(element.children, element.ref);
+        return;
+    }
     // Only FRAGMENT, PROVIDER, CONSUMER, and HOST elements remain,
     // with Maybe<Many<SimpElement>> children due to normalization.
-    if (Array.isArray(element.children)) {
-        unmountAllChildren(element.children);
-    }
-    else if (element.children != null) {
+    if (element.children) {
         unmount(element.children);
     }
-}
-export function unmountAllChildren(children) {
-    for (const child of children) {
-        unmount(child);
+    if (element.flag === 'HOST') {
+        unmountRef(element);
+        hostAdapter.unmountProps(element.reference, element);
     }
 }
 export function clearElementHostReference(element, parentHostReference) {
     while (element != null) {
-        if (element.flag === 'HOST' || element.flag === 'TEXT') {
-            GLOBAL.hostAdapter.removeChild(parentHostReference, element.reference);
+        if (element.flag === 'HOST' || element.flag === 'TEXT' || element.flag === 'PORTAL') {
+            hostAdapter.removeChild(parentHostReference, element.reference);
             return;
         }
         const children = element.children;
@@ -41,24 +52,12 @@ export function clearElementHostReference(element, parentHostReference) {
                 }
                 return;
             }
-            else if (children != null) {
+            else if (children) {
                 element = children;
             }
         }
     }
 }
-export function removeAllChildren(hostReference, element, children) {
-    unmountAllChildren(children);
-    if (element.flag === 'FRAGMENT' ||
-        element.flag === 'FC' ||
-        element.flag === 'PROVIDER' ||
-        element.flag === 'CONSUMER') {
-        clearElementHostReference(element, hostReference);
-    }
-    else {
-        GLOBAL.hostAdapter.clearNode(hostReference);
-    }
-}
 export function remove(element, parentReference) {
     unmount(element);
     clearElementHostReference(element, parentReference);

package/dom/attach-element-to-dom.d.ts

@@ -0,0 +1,4 @@
+import type { Nullable } from '../shared';
+import type { SimpElement } from '../core/internal.js';
+export declare function attachElementToDom(element: SimpElement, dom: Node): void;
+export declare function getElementFromDom(target: Nullable<EventTarget>): Nullable<SimpElement>;

package/dom/attach-element-to-dom.js

@@ -0,0 +1,9 @@
+const elementPropertyName = '__SIMP_ELEMENT__';
+export function attachElementToDom(element, dom) {
+    if (dom.nodeType !== Node.TEXT_NODE) {
+        Object.defineProperty(dom, elementPropertyName, { value: element, writable: true });
+    }
+}
+export function getElementFromDom(target) {
+    return target?.[elementPropertyName] ?? null;
+}