@simpreact/simpreact 0.0.2 → 0.0.4

package/core/memo.js

@@ -0,0 +1,11 @@
+import { shallowEqual } from '../shared/index.js';
+export function memo(Component, compare = shallowEqual) {
+    const Memoized = (props => Component(props));
+    Memoized._isMemo = true;
+    Memoized._render = Component;
+    Memoized._compare = compare;
+    return Memoized;
+}
+export function isMemo(type) {
+    return type._isMemo;
+}

package/core/mounting.d.ts

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

package/core/mounting.js

@@ -1,29 +1,24 @@
-import { emptyMap, emptyObject } from '../shared/index.js';
+import { 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) {
+import { batchingRerenderLocker } from './rerender.js';
+export function mount(element, parentReference, nextReference, context, hostNamespace) {
     if (element.flag === 'TEXT') {
         mountTextElement(element, parentReference, nextReference);
     }
     else if (element.flag === 'HOST') {
-        mountHostElement(element, parentReference, nextReference, contextMap, hostNamespace);
+        mountHostElement(element, parentReference, nextReference, context, hostNamespace);
     }
     else if (element.flag === 'FC') {
-        mountFunctionalElement(element, parentReference, nextReference, contextMap, hostNamespace);
+        mountFunctionalElement(element, parentReference, nextReference, context, hostNamespace);
     }
     else if (element.flag === 'FRAGMENT') {
-        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);
+        mountFragment(element, parentReference, nextReference, context, hostNamespace);
     }
     else {
-        mountConsumer(element, parentReference, nextReference, contextMap, hostNamespace);
+        mountPortal(element, parentReference, nextReference, context);
     }
 }
 export function mountTextElement(element, parentReference, nextReference) {
@@ -32,7 +27,7 @@ export function mountTextElement(element, parentReference, nextReference) {
         hostAdapter.insertOrAppend(parentReference, reference, nextReference);
     }
 }
-export function mountHostElement(element, parentReference, nextReference, contextMap, hostNamespace) {
+export function mountHostElement(element, parentReference, nextReference, context, hostNamespace) {
     const hostNamespaces = hostAdapter.getHostNamespaces(element, hostNamespace);
     hostNamespace = hostNamespaces?.self;
     const hostReference = (element.reference = hostAdapter.createReference(element.type, hostNamespace));
@@ -40,11 +35,11 @@ export function mountHostElement(element, parentReference, nextReference, contex
     // HOST element always has Maybe<Many<SimpElement>> children due to normalization process.
     const children = element.children;
     if (Array.isArray(children)) {
-        mountArrayChildren(children, hostReference, null, contextMap, element, hostNamespaces?.children);
+        mountArrayChildren(children, hostReference, null, context, element, hostNamespaces?.children);
     }
     else if (children) {
         children.parent = element;
-        mount(children, hostReference, null, contextMap, hostNamespaces?.children);
+        mount(children, hostReference, null, context, hostNamespaces?.children);
     }
     if (element.props) {
         hostAdapter.mountProps(hostReference, element, hostNamespace);
@@ -61,9 +56,9 @@ export function mountHostElement(element, parentReference, nextReference, contex
     }
     applyRef(element);
 }
-export function mountFunctionalElement(element, parentReference, nextReference, contextMap, hostNamespace) {
-    if (contextMap) {
-        element.contextMap = contextMap;
+export function mountFunctionalElement(element, parentReference, nextReference, context, hostNamespace) {
+    if (context) {
+        element.context = context;
     }
     if (element.unmounted) {
         element.unmounted = false;
@@ -74,61 +69,61 @@ export function mountFunctionalElement(element, parentReference, nextReference,
     }
     // FC element always has Maybe<SimpElement> children due to normalization process.
     let children;
+    let triedToRerenderUnsubscribe;
     try {
-        lifecycleEventBus.publish({ type: 'beforeRender', element, phase: 'mounting' });
-        children = normalizeRoot(element.type(element.props || emptyObject), false);
-        lifecycleEventBus.publish({ type: 'afterRender', phase: 'mounting' });
+        let triedToRerender = false;
+        let rerenderCounter = 0;
+        triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
+            if (event.type === 'triedToRerender' && event.element === element) {
+                triedToRerender = true;
+            }
+        });
+        do {
+            triedToRerender = false;
+            if (++rerenderCounter >= 25) {
+                throw new Error('Too many re-renders.');
+            }
+            lifecycleEventBus.publish({ type: 'beforeRender', element, phase: 'mounting' });
+            batchingRerenderLocker.lock();
+            children = element.type(element.props || emptyObject);
+            batchingRerenderLocker.flush();
+            lifecycleEventBus.publish({ type: 'afterRender', element, phase: 'mounting' });
+        } while (triedToRerender);
+        children = normalizeRoot(children, false);
     }
     catch (error) {
         lifecycleEventBus.publish({ type: 'errored', element, error, phase: 'mounting' });
         return;
     }
+    finally {
+        triedToRerenderUnsubscribe();
+    }
     if (children) {
         children.parent = element;
-        mount((element.children = children), parentReference, nextReference, contextMap, hostNamespace);
+        mount((element.children = children), parentReference, nextReference, element.context, hostNamespace);
     }
     lifecycleEventBus.publish({ type: 'mounted', element });
 }
-export function mountFragment(element, parentReference, nextReference, contextMap, hostNamespace) {
+export function mountFragment(element, parentReference, nextReference, context, hostNamespace) {
     // FRAGMENT element always has Maybe<Many<SimpElement>> children due to normalization process.
     if (Array.isArray(element.children)) {
-        mountArrayChildren(element.children, parentReference, nextReference, contextMap, element, hostNamespace);
+        mountArrayChildren(element.children, parentReference, nextReference, context, element, hostNamespace);
     }
     else if (element.children) {
         element.children.parent = element;
-        mount(element.children, parentReference, nextReference, contextMap, hostNamespace);
+        mount(element.children, parentReference, nextReference, context, hostNamespace);
     }
 }
-export function mountArrayChildren(children, reference, nextReference, contextMap, parentElement, hostNamespace) {
+export function mountArrayChildren(children, reference, nextReference, context, parentElement, hostNamespace) {
     for (const child of children) {
         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;
+        mount(child, reference, nextReference, context, hostNamespace);
     }
-    children.parent = element;
-    mount((element.children = children), parentReference, nextReference, contextMap, hostNamespace);
 }
-export function mountPortal(element, parentReference, nextReference, contextMap) {
+export function mountPortal(element, parentReference, nextReference, context) {
     if (element.children) {
         element.children.parent = element;
-        mount(element.children, element.ref, null, contextMap, hostAdapter.getHostNamespaces(element.children, undefined)?.self);
+        mount(element.children, element.ref, null, context, hostAdapter.getHostNamespaces(element.children, undefined)?.self);
     }
     const placeHolderElement = createTextElement('');
     mountTextElement(placeHolderElement, parentReference, nextReference);

package/core/patching.d.ts

@@ -1,10 +1,9 @@
 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 patch(prevElement: SimpElement, nextElement: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
+export declare function patchPortal(prevElement: SimpElement, nextElement: SimpElement, context: unknown): void;
+export declare function updateFunctionalComponent(element: SimpElement, parentReference: HostReference, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
+export declare function patchKeyedChildren(prevChildren: SimpElement[], nextChildren: SimpElement[], parentReference: HostReference, nextReference: Nullable<HostReference>, context: unknown, hostNamespace: Maybe<string>): void;
 export declare function findParentReferenceFromElement(element: SimpElement): Nullable<HostReference>;
 export declare function findHostReferenceFromElement(element: SimpElement): Nullable<HostReference>;

package/core/patching.js

@@ -1,49 +1,45 @@
-import { emptyMap, emptyObject } from '../shared/index.js';
+import { 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 { mount, mountArrayChildren, mountFunctionalElement } from './mounting.js';
 import { applyRef } from './ref.js';
 import { lifecycleEventBus } from './lifecycleEventBus.js';
-export function patch(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
+import { batchingRerenderLocker } from './rerender.js';
+import { isMemo } from './memo.js';
+export function patch(prevElement, nextElement, parentReference, nextReference, context, hostNamespace) {
     if (prevElement.type !== nextElement.type || prevElement.key !== nextElement.key) {
-        replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace);
+        replaceWithNewElement(prevElement, nextElement, parentReference, context, hostNamespace);
     }
     else if (nextElement.flag === 'HOST') {
-        patchHostElement(prevElement, nextElement, contextMap, hostNamespace);
+        patchHostElement(prevElement, nextElement, context, hostNamespace);
     }
     else if (nextElement.flag === 'FC') {
-        patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace);
+        patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, context, hostNamespace);
     }
     else if (nextElement.flag === 'TEXT') {
         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);
+        patchFragment(prevElement, nextElement, parentReference, context, hostNamespace);
     }
     else {
-        patchConsumer(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace);
+        patchPortal(prevElement, nextElement, context);
     }
 }
-function replaceWithNewElement(prevElement, nextElement, parentReference, contextMap, hostNamespace) {
+function replaceWithNewElement(prevElement, nextElement, parentReference, context, hostNamespace) {
     unmount(prevElement);
     nextElement.parent = prevElement.parent;
     if (nextElement.flag === 'HOST' && prevElement.flag === 'HOST') {
-        mount(nextElement, null, null, contextMap, hostNamespace);
+        mount(nextElement, null, null, context, hostNamespace);
         hostAdapter.replaceChild(parentReference, nextElement.reference, prevElement.reference);
     }
     else {
-        mount(nextElement, parentReference, findHostReferenceFromElement(prevElement), contextMap, hostNamespace);
+        mount(nextElement, parentReference, findHostReferenceFromElement(prevElement), context, hostNamespace);
         clearElementHostReference(prevElement, parentReference);
     }
 }
-function patchHostElement(prevElement, nextElement, contextMap, hostNamespace) {
+function patchHostElement(prevElement, nextElement, context, hostNamespace) {
     if (prevElement.ref) {
         nextElement.ref = prevElement.ref;
     }
@@ -51,36 +47,70 @@ function patchHostElement(prevElement, nextElement, contextMap, 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);
+    patchChildren(prevElement.children || prevElement.props?.children, nextElement.children || nextElement.props?.children, nextElement.reference, null, nextElement, context, hostNamespaces?.children);
     hostAdapter.patchProps(nextElement.reference, prevElement, nextElement, hostNamespace);
     if (prevElement.className !== nextElement.className) {
         hostAdapter.setClassname(nextElement.reference, nextElement.className, hostNamespace);
     }
     applyRef(nextElement);
 }
-function patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, contextMap, hostNamespace) {
-    (nextElement.store = prevElement.store ||= {}).latestElement = nextElement;
+function patchFunctionalComponent(prevElement, nextElement, parentReference, nextReference, context, hostNamespace) {
+    nextElement.store = prevElement.store || {};
+    nextElement.store.latestElement = nextElement;
     if (hostNamespace) {
         nextElement.store.hostNamespace = hostNamespace;
     }
-    if (contextMap) {
-        nextElement.contextMap = contextMap;
+    let forceRender = false;
+    if (prevElement.store?.forceRender) {
+        forceRender = true;
+        prevElement.store.forceRender = false;
     }
+    if (prevElement.unmounted) {
+        mountFunctionalElement(nextElement, parentReference, nextReference, context, hostNamespace);
+        return;
+    }
+    if (!forceRender && isMemo(nextElement.type) && nextElement.type._compare(prevElement.props, nextElement.props)) {
+        return;
+    }
+    nextElement.context = prevElement.context || context;
+    // FC element always has Maybe<SimpElement> children due to normalization process.
     let nextChildren;
+    let triedToRerenderUnsubscribe;
     try {
-        lifecycleEventBus.publish({ type: 'beforeRender', element: nextElement, phase: 'updating' });
-        nextChildren = normalizeRoot(nextElement.type(nextElement.props || emptyObject), false);
-        lifecycleEventBus.publish({ type: 'afterRender', phase: 'updating' });
+        let triedToRerender = false;
+        let rerenderCounter = 0;
+        triedToRerenderUnsubscribe = lifecycleEventBus.subscribe(event => {
+            if (event.type === 'triedToRerender' && event.element === nextElement) {
+                triedToRerender = true;
+            }
+        });
+        do {
+            triedToRerender = false;
+            if (++rerenderCounter >= 25) {
+                throw new Error('Too many re-renders.');
+            }
+            lifecycleEventBus.publish({ type: 'beforeRender', element: nextElement, phase: 'updating' });
+            batchingRerenderLocker.lock();
+            nextChildren = nextElement.type(nextElement.props || emptyObject);
+            batchingRerenderLocker.flush();
+            lifecycleEventBus.publish({ type: 'afterRender', element: nextElement, phase: 'updating' });
+        } while (triedToRerender);
+        nextChildren = normalizeRoot(nextChildren, false);
     }
     catch (error) {
         lifecycleEventBus.publish({ type: 'errored', element: nextElement, error, phase: 'updating' });
+        remove(prevElement, parentReference);
         return;
     }
+    finally {
+        triedToRerenderUnsubscribe();
+    }
+    // Keep prevElement's children reference when prev and next elements are identical to avoid reassignment.
     const prevChildren = prevElement.children;
     if (nextChildren) {
         nextElement.children = nextChildren;
     }
-    patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace);
+    patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, nextElement.context, hostNamespace);
     lifecycleEventBus.publish({ type: 'updated', element: nextElement });
 }
 function patchTextElement(prevElement, nextElement) {
@@ -89,57 +119,41 @@ function patchTextElement(prevElement, nextElement) {
         hostAdapter.setTextContent(nextElement.reference, nextElement.children);
     }
 }
-function patchFragment(prevElement, nextElement, parentReference, contextMap, hostNamespace) {
+function patchFragment(prevElement, nextElement, parentReference, context, 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);
+    patchChildren(prevElement.children, nextElement.children, parentReference, nextReference, nextElement, context, 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) {
+export function patchPortal(prevElement, nextElement, context) {
     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);
+    patchChildren(prevElement.children, nextChildren, prevContainer, null, nextElement, context, 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);
+export function updateFunctionalComponent(element, parentReference, nextReference, context, hostNamespace) {
+    patchFunctionalComponent(element, element, parentReference, nextReference, context, hostNamespace);
 }
-function patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, contextMap, hostNamespace) {
+function patchChildren(prevChildren, nextChildren, parentReference, nextReference, nextElement, context, hostNamespace) {
     if (Array.isArray(prevChildren)) {
         if (Array.isArray(nextChildren)) {
             for (const child of nextChildren) {
                 child.parent = nextElement;
             }
-            patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+            patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, context, hostNamespace);
         }
         else if (typeof nextChildren === 'string') {
             unmount(prevChildren);
             hostAdapter.setTextContent(parentReference, nextChildren);
         }
         else if (nextChildren) {
-            patchKeyedChildren(prevChildren, [nextChildren], parentReference, nextReference, contextMap, hostNamespace);
+            patchKeyedChildren(prevChildren, [nextChildren], parentReference, nextReference, context, hostNamespace);
         }
         else {
             unmount(prevChildren);
@@ -149,7 +163,7 @@ function patchChildren(prevChildren, nextChildren, parentReference, nextReferenc
     else if (typeof prevChildren === 'string') {
         if (Array.isArray(nextChildren)) {
             hostAdapter.clearNode(parentReference);
-            mountArrayChildren(nextChildren, parentReference, nextReference, contextMap, nextElement, hostNamespace);
+            mountArrayChildren(nextChildren, parentReference, nextReference, context, nextElement, hostNamespace);
         }
         else if (typeof nextChildren === 'string') {
             if (prevChildren !== nextChildren) {
@@ -159,7 +173,7 @@ function patchChildren(prevChildren, nextChildren, parentReference, nextReferenc
         else if (nextChildren) {
             hostAdapter.clearNode(parentReference);
             nextChildren.parent = nextElement;
-            mount(nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+            mount(nextChildren, parentReference, nextReference, context, hostNamespace);
         }
         else {
             hostAdapter.clearNode(parentReference);
@@ -167,7 +181,7 @@ function patchChildren(prevChildren, nextChildren, parentReference, nextReferenc
     }
     else if (prevChildren) {
         if (Array.isArray(nextChildren)) {
-            patchKeyedChildren([prevChildren], nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+            patchKeyedChildren([prevChildren], nextChildren, parentReference, nextReference, context, hostNamespace);
         }
         else if (typeof nextChildren === 'string') {
             unmount(prevChildren);
@@ -175,27 +189,26 @@ function patchChildren(prevChildren, nextChildren, parentReference, nextReferenc
         }
         else if (nextChildren) {
             nextChildren.parent = nextElement;
-            patch(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+            patch(prevChildren, nextChildren, parentReference, nextReference, context, hostNamespace);
         }
         else {
-            unmount(prevChildren);
-            hostAdapter.clearNode(parentReference);
+            remove(prevChildren, parentReference);
         }
     }
     else {
         if (Array.isArray(nextChildren)) {
-            mountArrayChildren(nextChildren, parentReference, nextReference, contextMap, nextElement, hostNamespace);
+            mountArrayChildren(nextChildren, parentReference, nextReference, context, nextElement, hostNamespace);
         }
         else if (typeof nextChildren === 'string') {
             hostAdapter.setTextContent(parentReference, nextChildren);
         }
         else if (nextChildren) {
             nextChildren.parent = nextElement;
-            mount(nextChildren, parentReference, nextReference, contextMap, hostNamespace);
+            mount(nextChildren, parentReference, nextReference, context, hostNamespace);
         }
     }
 }
-export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, contextMap, hostNamespace) {
+export function patchKeyedChildren(prevChildren, nextChildren, parentReference, nextReference, context, hostNamespace) {
     let prevStart = 0;
     let nextStart = 0;
     let prevEnd = prevChildren.length - 1;
@@ -204,21 +217,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, contextMap, hostNamespace);
+        patch(prevChildren[prevStart], nextChildren[nextStart], parentReference, null, context, 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, hostNamespace);
+        patch(prevChildren[prevEnd], nextChildren[nextEnd], parentReference, null, context, hostNamespace);
         prevEnd--;
         nextEnd--;
     }
     // Step 3: Mount new nodes if prev list is exhausted
     if (prevStart > prevEnd) {
-        const before = nextChildren[nextEnd + 1]?.reference || nextReference;
+        const before = findHostReferenceFromElement(nextChildren[nextEnd + 1]) || nextReference;
         for (let i = nextStart; i <= nextEnd; i++) {
-            mount(nextChildren[i], parentReference, before, contextMap, hostNamespace);
+            mount(nextChildren[i], parentReference, before, context, hostNamespace);
         }
         // Step 4: Remove prev nodes if next list is exhausted
     }
@@ -246,12 +259,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, hostNamespace);
+                patch(prevElement, nextChild, parentReference, null, context, hostNamespace);
                 toMove[i - nextStart] = prevIndex;
                 usedIndices.add(prevIndex);
             }
             else {
-                mount(nextChild, parentReference, nextChildren[i + 1]?.reference || nextReference, contextMap, hostNamespace);
+                mount(nextChild, parentReference, findHostReferenceFromElement(nextChildren[i + 1]) || nextReference, context, hostNamespace);
                 toMove[i - nextStart] = -1;
             }
         }
@@ -264,7 +277,7 @@ export function patchKeyedChildren(prevChildren, nextChildren, parentReference,
         // Insert in correct order
         for (let i = nextEnd; i >= nextStart; i--) {
             const currentChild = nextChildren[i];
-            const reference = nextChildren[i + 1]?.reference || nextReference;
+            const reference = findHostReferenceFromElement(nextChildren[i + 1]) || nextReference;
             if (toMove[i - nextStart] !== -1) {
                 hostAdapter.insertBefore(parentReference, currentChild.reference, reference);
             }

package/core/ref.d.ts

@@ -5,13 +5,13 @@ interface RefSimpElement extends SimpElement {
         cleanup?: () => void;
     };
 }
-export interface RefObject<T> {
+export type RefObject<T> = {
     current: T;
-}
+};
 export type RefCallback<T> = {
-    bivarianceHack(instance: T | null): (() => void) | void;
+    bivarianceHack(instance: T): (() => void | undefined) | void;
 }['bivarianceHack'];
-export type Ref<T> = RefCallback<T> | RefObject<T> | null;
+export type Ref<T> = RefCallback<T> | RefObject<T | null> | null;
 export declare function unmountRef(element: RefSimpElement): void;
 export declare function applyRef(element: RefSimpElement): void;
 export {};

package/core/rerender.d.ts

@@ -1,13 +1,14 @@
-import type { SimpElement } from './createElement.js';
+import type { SimpElement, SimpElementStore } from './createElement.js';
 export declare function rerender(element: SimpElement): void;
 interface IRendererLocker {
     _isLocked: boolean;
-    _elements: Set<SimpElement>;
-    isLocked: boolean;
+    _elementStores: Set<SimpElementStore>;
+    _last: SimpElementStore | undefined;
+    _track(element: SimpElementStore): void;
+    _untrack(element: SimpElementStore): void;
     lock(): void;
-    track(element: SimpElement): void;
     flush(): void;
 }
-export declare const syncRerenderLocker: IRendererLocker;
-export declare const asyncRerenderLocker: IRendererLocker;
+export declare const batchingRerenderLocker: IRendererLocker;
+export declare const renderingRerenderLocker: IRendererLocker;
 export {};