@simpreact/simpreact 0.0.6 → 0.0.7

package/core/unmounting.js

@@ -1,109 +1,69 @@
-import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_FC, SIMP_ELEMENT_FLAG_FRAGMENT, SIMP_ELEMENT_FLAG_HOST, SIMP_ELEMENT_FLAG_PORTAL, SIMP_ELEMENT_FLAG_TEXT, } from './createElement.js';
+import { noop } from '../shared/index.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
 import { processStack, UNMOUNT_ENTER, UNMOUNT_EXIT } from './processStack.js';
 import { unmountRef } from './ref.js';
-import { isHostLike } from './utils.js';
+import { _pushUnmountChildrenFrame } from './unmountingChildren.js';
+import { _clearElementHostReference, bitScanForwardIndex } from './utils.js';
+const unmountHandlers = [
+    _unmountHostElement,
+    _unmountFunctionalElement,
+    noop,
+    _unmountPortalElement,
+    _unmountFragmentElement,
+];
 export function unmount(element, renderRuntime) {
     if (renderRuntime.renderStack.length !== 0) {
         throw new Error('Cannot unmount while rendering.');
     }
-    _pushUnmountEnterFrame(element, renderRuntime);
+    _pushUnmountEnterFrame(element, { renderRuntime });
     processStack(renderRuntime);
 }
 export function _unmount(frame) {
-    const current = frame.node;
-    if (frame.kind === UNMOUNT_EXIT) {
-        if ((current.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
-            current.unmounted = true;
-            lifecycleEventBus.publish({ type: 'unmounted', element: current, renderRuntime: frame.meta.renderRuntime });
-            current.store = null;
-            return;
-        }
-        if ((current.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
-            unmountRef(current);
-            frame.meta.renderRuntime.hostAdapter.unmountProps(current.reference, current, frame.meta.renderRuntime);
-            frame.meta.renderRuntime.hostAdapter.detachElementFromReference(current.reference, frame.meta.renderRuntime);
-        }
-        return;
-    }
-    if ((current.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
-        if (current.unmounted) {
-            return;
-        }
-        _pushUnmountExitFrame(current, frame.meta.renderRuntime);
-        if (current.children) {
-            _pushUnmountEnterFrame(current.children, frame.meta.renderRuntime);
-        }
-        return;
-    }
-    if ((current.flag & SIMP_ELEMENT_FLAG_TEXT) !== 0) {
-        return;
-    }
-    if ((current.flag & SIMP_ELEMENT_FLAG_PORTAL) !== 0) {
-        _remove(current.children, current.ref, frame.meta.renderRuntime);
-        return;
-    }
-    if ((current.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
-        _pushUnmountExitFrame(current, frame.meta.renderRuntime);
-    }
-    if (current.childFlag === SIMP_ELEMENT_CHILD_FLAG_ELEMENT) {
-        _pushUnmountEnterFrame(current.children, frame.meta.renderRuntime);
-        return;
-    }
-    if (current.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST) {
-        _pushUnmountArrayChildrenFrame(current, frame.meta.renderRuntime);
-    }
+    unmountHandlers[bitScanForwardIndex(frame.node.flag)](frame);
 }
-export function _pushUnmountEnterFrame(element, renderRuntime) {
-    renderRuntime.renderStack.push({
+export function _pushUnmountEnterFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
         node: element,
         kind: UNMOUNT_ENTER,
-        meta: {
-            renderRuntime,
-        },
+        meta,
     });
 }
-export function _pushUnmountExitFrame(element, renderRuntime) {
-    renderRuntime.renderStack.push({
+export function _pushUnmountExitFrame(element, meta) {
+    meta.renderRuntime.renderStack.push({
         node: element,
         kind: UNMOUNT_EXIT,
-        meta: {
-            renderRuntime,
-        },
+        meta,
     });
 }
-export function _pushUnmountArrayChildrenFrame(element, renderRuntime) {
-    const children = element.children;
-    for (let i = children.length - 1; i >= 0; i -= 1) {
-        _pushUnmountEnterFrame(children[i], renderRuntime);
+function _unmountFunctionalElement(frame) {
+    const current = frame.node;
+    if (current.unmounted) {
+        return;
     }
+    if (frame.kind === UNMOUNT_EXIT) {
+        current.unmounted = true;
+        lifecycleEventBus.publish({ type: 'unmounted', element: current, renderRuntime: frame.meta.renderRuntime });
+        current.store = null;
+        return;
+    }
+    _pushUnmountExitFrame(current, frame.meta);
+    _pushUnmountChildrenFrame(current, frame.meta);
 }
-export function _clearElementHostReference(element, parentHostReference, renderRuntime) {
-    while (element != null) {
-        if (isHostLike(element.flag)) {
-            renderRuntime.hostAdapter.removeChild(parentHostReference, element.reference);
-            return;
-        }
-        const children = element.children;
-        const childFlag = element.childFlag;
-        if ((element.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
-            element = children;
-            continue;
-        }
-        if ((element.flag & SIMP_ELEMENT_FLAG_FRAGMENT) !== 0) {
-            switch (childFlag) {
-                case SIMP_ELEMENT_CHILD_FLAG_LIST:
-                    for (let i = 0, len = children.length; i < len; ++i) {
-                        _clearElementHostReference(children[i], parentHostReference, renderRuntime);
-                    }
-                    return;
-                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT:
-                    element = children;
-            }
-        }
+function _unmountHostElement(frame) {
+    const current = frame.node;
+    if (frame.kind === UNMOUNT_EXIT) {
+        unmountRef(current);
+        frame.meta.renderRuntime.hostAdapter.unmountProps(current.reference, current, frame.meta.renderRuntime);
+        frame.meta.renderRuntime.hostAdapter.detachElementFromReference(current.reference, frame.meta.renderRuntime);
+        return;
     }
+    _pushUnmountExitFrame(current, frame.meta);
+    _pushUnmountChildrenFrame(current, frame.meta);
+}
+function _unmountPortalElement(frame) {
+    _clearElementHostReference(frame.node.children, frame.node.ref, frame.meta.renderRuntime);
+    _pushUnmountChildrenFrame(frame.node, frame.meta);
 }
-export function _remove(element, parentReference, renderRuntime) {
-    _clearElementHostReference(element, parentReference, renderRuntime);
-    _pushUnmountEnterFrame(element, renderRuntime);
+function _unmountFragmentElement(frame) {
+    _pushUnmountChildrenFrame(frame.node, frame.meta);
 }

package/core/unmountingChildren.d.ts

@@ -0,0 +1,4 @@
+import { type SimpElement } from './createElement.js';
+import { type UnmountChildrenFrame, type UnmountFrameMeta } from './processStack.js';
+export declare function _pushUnmountChildrenFrame(parent: SimpElement, meta: UnmountFrameMeta): void;
+export declare function _unmountChildren(frame: UnmountChildrenFrame): void;

package/core/unmountingChildren.js

@@ -0,0 +1,23 @@
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST } from './createElement.js';
+import { UNMOUNT_CHILDREN_ENTER } from './processStack.js';
+import { _pushUnmountEnterFrame } from './unmounting.js';
+export function _pushUnmountChildrenFrame(parent, meta) {
+    meta.renderRuntime.renderStack.push({
+        node: parent,
+        kind: UNMOUNT_CHILDREN_ENTER,
+        meta,
+    });
+}
+export function _unmountChildren(frame) {
+    switch (frame.node.childFlag) {
+        case SIMP_ELEMENT_CHILD_FLAG_LIST:
+            const children = frame.node.children;
+            for (let i = children.length - 1; i >= 0; i -= 1) {
+                _pushUnmountEnterFrame(children[i], frame.meta);
+            }
+            break;
+        case SIMP_ELEMENT_CHILD_FLAG_ELEMENT:
+            _pushUnmountEnterFrame(frame.node.children, frame.meta);
+            break;
+    }
+}

package/core/utils.d.ts

@@ -1,10 +1,11 @@
-import type { Nullable } from '../shared/index.js';
+import type { Maybe, Nullable } from '../shared/index.js';
 import { type SimpElement } from './createElement.js';
 import type { SimpRenderRuntime } from './runtime.js';
 export declare function bitScanForwardIndex(flag: number): number;
 export declare function isHostLike(flag: number): boolean;
 export declare function findParentReferenceFromElement(element: SimpElement): unknown | null;
 export declare function placeElementBeforeAnchor(element: SimpElement, anchor: unknown, parentReference: unknown, renderRuntime: SimpRenderRuntime): void;
-export declare function resolveAnchorReference(rightSibling: Nullable<SimpElement>): unknown | null;
+export declare function resolveAnchorReference(subtreeRightBoundary: Nullable<SimpElement>): unknown | null;
 export declare function findHostReferenceFromElement(element: Nullable<SimpElement>): unknown | null;
 export declare function getLongestIncreasingSubsequenceIndexes(sequence: Int32Array): Int32Array;
+export declare function _clearElementHostReference(element: Maybe<SimpElement>, parentHostReference: unknown, renderRuntime: SimpRenderRuntime): void;

package/core/utils.js

@@ -1,4 +1,4 @@
-import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_HOST, SIMP_ELEMENT_FLAG_PORTAL, SIMP_ELEMENT_FLAG_TEXT, } from './createElement.js';
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_FLAG_FC, SIMP_ELEMENT_FLAG_FRAGMENT, SIMP_ELEMENT_FLAG_HOST, SIMP_ELEMENT_FLAG_PORTAL, SIMP_ELEMENT_FLAG_TEXT, } from './createElement.js';
 export function bitScanForwardIndex(flag) {
     const lsb = (flag & -flag) >>> 0;
     return 31 - Math.clz32(lsb);
@@ -43,8 +43,8 @@ export function placeElementBeforeAnchor(element, anchor, parentReference, rende
         }
     }
 }
-export function resolveAnchorReference(rightSibling) {
-    let current = rightSibling;
+export function resolveAnchorReference(subtreeRightBoundary) {
+    let current = subtreeRightBoundary;
     while (current != null) {
         const reference = findHostReferenceFromElement(current);
         if (reference != null) {
@@ -141,3 +141,28 @@ export function getLongestIncreasingSubsequenceIndexes(sequence) {
     }
     return indexes;
 }
+export function _clearElementHostReference(element, parentHostReference, renderRuntime) {
+    while (element != null) {
+        if (isHostLike(element.flag)) {
+            renderRuntime.hostAdapter.removeChild(parentHostReference, element.reference);
+            return;
+        }
+        const children = element.children;
+        const childFlag = element.childFlag;
+        if ((element.flag & SIMP_ELEMENT_FLAG_FC) !== 0) {
+            element = children;
+            continue;
+        }
+        if ((element.flag & SIMP_ELEMENT_FLAG_FRAGMENT) !== 0) {
+            switch (childFlag) {
+                case SIMP_ELEMENT_CHILD_FLAG_LIST:
+                    for (let i = 0, len = children.length; i < len; ++i) {
+                        _clearElementHostReference(children[i], parentHostReference, renderRuntime);
+                    }
+                    return;
+                case SIMP_ELEMENT_CHILD_FLAG_ELEMENT:
+                    element = children;
+            }
+        }
+    }
+}

package/dom/props/dangerInnerHTML.d.ts

@@ -1,7 +1,7 @@
-import type { SimpElement, SimpRenderRuntime } from '../../core/internal.js';
+import type { SimpElement } from '../../core/internal.js';
 import type { Maybe } from '../../shared/index.js';
-export declare function patchDangerInnerHTML(prevValue: Maybe<{
+type DangerInnerHTMLValue = {
     __html: string;
-}>, nextValue: Maybe<{
-    __html: string;
-}>, prevElement: Maybe<SimpElement>, nextElement: SimpElement, dom: Element, renderRuntime: SimpRenderRuntime): void;
+};
+export declare function patchDangerInnerHTML(prevValue: Maybe<DangerInnerHTMLValue>, nextValue: Maybe<DangerInnerHTMLValue>, nextElement: SimpElement, dom: Element): void;
+export {};

package/dom/props/dangerInnerHTML.js

@@ -1,21 +1,15 @@
-import { unmount } from '../../core/internal.js';
-export function patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom, renderRuntime) {
-    const prevHTML = prevValue?.__html || '';
-    const nextHTML = nextValue?.__html || '';
+export function patchDangerInnerHTML(prevValue, nextValue, nextElement, dom) {
+    const prevHTML = prevValue?.__html;
+    const nextHTML = nextValue?.__html;
     if (nextElement.children) {
-        console.warn('Avoid setting both children and props.dangerouslySetInnerHTML at the same time — this can cause unpredictable behavior.');
+        console.warn('Avoid setting both children and props.dangerouslySetInnerHTML at the same time — this causes unpredictable behavior.');
     }
-    if (prevHTML !== nextHTML) {
-        if (nextHTML != null && !isSameInnerHTML(dom, nextHTML)) {
-            if (prevElement != null) {
-                if (prevElement.children) {
-                    // TODO: the HOST element can hold several children.
-                    unmount(prevElement.children, renderRuntime);
-                    prevElement.children = undefined;
-                }
-            }
-            dom.innerHTML = nextHTML;
-        }
+    if (prevHTML === nextHTML) {
+        return;
+    }
+    const nextInnerHTML = nextHTML ?? '';
+    if (!isSameInnerHTML(dom, nextInnerHTML)) {
+        dom.innerHTML = nextInnerHTML;
     }
 }
 function isSameInnerHTML(dom, innerHTML) {

package/dom/props/props.js

@@ -7,7 +7,7 @@ import { patchStyle } from './style.js';
 export function mountProps(dom, element, namespace, renderRuntime) {
     if (!isFormElement(element)) {
         for (const propName in element.props) {
-            patchDefaultElementPropAndAttrs(propName, dom, null, element, null, element.props[propName], namespace, renderRuntime);
+            patchDefaultElementPropAndAttrs(propName, dom, element, null, element.props[propName], namespace, renderRuntime);
         }
         return;
     }
@@ -41,12 +41,12 @@ export function patchProps(dom, prevElement, nextElement, namespace, renderRunti
             const prevValue = prevProps[propName];
             const nextValue = nextProps[propName];
             if (prevValue !== nextValue) {
-                patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevValue, nextValue, namespace, renderRuntime);
+                patchDefaultElementPropAndAttrs(propName, dom, nextElement, prevValue, nextValue, namespace, renderRuntime);
             }
         }
         for (const propName in prevProps) {
             if (nextProps[propName] == null && prevProps[propName] != null) {
-                patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevProps[propName], null, namespace, renderRuntime);
+                patchDefaultElementPropAndAttrs(propName, dom, nextElement, prevProps[propName], null, namespace, renderRuntime);
             }
         }
         return;
@@ -122,7 +122,7 @@ function patchFormElementsPropAndAttrs(propName, dom, element, isControlled, pre
             }
     }
 }
-function patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement, prevValue, nextValue, namespace, renderRuntime) {
+function patchDefaultElementPropAndAttrs(propName, dom, nextElement, prevValue, nextValue, namespace, renderRuntime) {
     switch (propName) {
         case 'children':
         case 'className':
@@ -153,7 +153,7 @@ function patchDefaultElementPropAndAttrs(propName, dom, prevElement, nextElement
             patchStyle(prevValue, nextValue, dom);
             break;
         case 'dangerouslySetInnerHTML':
-            patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom, renderRuntime);
+            patchDangerInnerHTML(prevValue, nextValue, nextElement, dom);
             break;
         default:
             if (isPropNameEventName(propName)) {

package/hooks/index.js

@@ -9,6 +9,7 @@ function getHooksSpecificStore(store) {
     }
     return hooksSpecificStore;
 }
+window.__SIMP_HOOKS_SPECIFIC_STORE_BY_ELEMENT_STORE__ = hooksSpecificStoreByElementStore;
 lifecycleEventBus.subscribe(event => {
     if ((event.element.flag & SIMP_ELEMENT_FLAG_FC) === 0) {
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simpreact/simpreact",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "homepage": "https://github.com/dPaskhin/simpreact#readme",
   "main": "./core/index.js",