@simpreact/simpreact 0.0.5 → 0.0.6

package/dom/events.d.ts

@@ -1,5 +1,6 @@
+import { type SimpRenderRuntime } from '../core/internal.js';
 import type { Nullable } from '../shared/index.js';
-type DelegatedEventType = 'click' | 'dblclick' | 'mousedown' | 'mouseup' | 'mousemove' | 'pointerdown' | 'pointerup' | 'pointermove' | 'touchstart' | 'touchmove' | 'touchend' | 'keydown' | 'keyup' | 'focusin' | 'focusout';
+export type DelegatedEventType = 'click' | 'dblclick' | 'mousedown' | 'mouseup' | 'mousemove' | 'pointerdown' | 'pointerup' | 'pointermove' | 'touchstart' | 'touchmove' | 'touchend' | 'keydown' | 'keyup' | 'focusin' | 'focusout';
 export declare class SyntheticEvent {
     nativeEvent: Event;
     currentTarget: Nullable<EventTarget>;
@@ -19,9 +20,8 @@ export declare class SyntheticEvent {
     preventDefault(): void;
     isDefaultPrevented(): boolean;
 }
-export declare function dispatchDelegatedEvent(event: Event): void;
-export declare function patchEvent(name: string, prevValue: any, nextValue: any, dom: Element): void;
-export declare function patchDelegatedEvent(eventType: DelegatedEventType, handler: any, eventHandlerCounts: Record<DelegatedEventType, number>): void;
+export declare function dispatchDelegatedEvent(event: Event, renderRuntime: SimpRenderRuntime): void;
+export declare function patchEvent(name: string, prevValue: any, nextValue: any, dom: Element, renderRuntime: SimpRenderRuntime): void;
+export declare function patchDelegatedEvent(eventType: DelegatedEventType, prevHandler: any, nextHandler: any, eventHandlerCounts: Record<DelegatedEventType, number>, renderRuntime: SimpRenderRuntime): void;
 export declare function patchNormalEvent(eventType: string, prevValue: any, nextValue: any, dom: Element, capture: boolean): void;
 export declare function isPropNameEventName(name: string): boolean;
-export {};

package/dom/events.js

@@ -1,5 +1,4 @@
-import { batchingRerenderLocker } from '../core/internal.js';
-import { getElementFromDom } from './attach-element-to-dom.js';
+import { SIMP_ELEMENT_FLAG_HOST } from '../core/internal.js';
 const eventNameByTypes = {
     click: 'onClick',
     dblclick: 'onDblClick',
@@ -18,7 +17,7 @@ const eventNameByTypes = {
     focusout: 'onFocusOut',
 };
 const delegatedEventTypes = new Set(Object.keys(eventNameByTypes));
-const eventHandlerCounts = {
+const createEventHandlerCounts = () => ({
     click: 0,
     dblclick: 0,
     mousedown: 0,
@@ -34,7 +33,25 @@ const eventHandlerCounts = {
     keyup: 0,
     focusin: 0,
     focusout: 0,
-};
+});
+const eventHandlerCountsByRuntime = new WeakMap();
+const delegatedEventDispatchersByRuntime = new WeakMap();
+function getEventHandlerCounts(renderRuntime) {
+    let eventHandlerCounts = eventHandlerCountsByRuntime.get(renderRuntime);
+    if (!eventHandlerCounts) {
+        eventHandlerCounts = createEventHandlerCounts();
+        eventHandlerCountsByRuntime.set(renderRuntime, eventHandlerCounts);
+    }
+    return eventHandlerCounts;
+}
+function getDelegatedEventDispatcher(renderRuntime) {
+    let dispatcher = delegatedEventDispatchersByRuntime.get(renderRuntime);
+    if (!dispatcher) {
+        dispatcher = event => dispatchDelegatedEvent(event, renderRuntime);
+        delegatedEventDispatchersByRuntime.set(renderRuntime, dispatcher);
+    }
+    return dispatcher;
+}
 export class SyntheticEvent {
     nativeEvent;
     currentTarget = null;
@@ -74,14 +91,13 @@ export class SyntheticEvent {
         return this._isDefaultPrevented;
     }
 }
-export function dispatchDelegatedEvent(event) {
-    batchingRerenderLocker.lock();
+export function dispatchDelegatedEvent(event, renderRuntime) {
     const syntheticEvent = new SyntheticEvent(event);
     const captureHandlers = [];
     const bubbleHandlers = [];
-    let element = getElementFromDom(event.target);
+    let element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
     while (element) {
-        if (element.flag === 'HOST') {
+        if ((element.flag & SIMP_ELEMENT_FLAG_HOST) !== 0) {
             const captureHandler = element.props?.[eventNameByTypes[event.type] + 'Capture'];
             const bubbleHandler = element.props?.[eventNameByTypes[event.type]];
             if (captureHandler) {
@@ -107,28 +123,29 @@ export function dispatchDelegatedEvent(event) {
             return;
         }
     }
-    batchingRerenderLocker.flush();
 }
 const captureRegex = /Capture/;
-export function patchEvent(name, prevValue, nextValue, dom) {
+export function patchEvent(name, prevValue, nextValue, dom, renderRuntime) {
     const isCapture = captureRegex.test(name);
     name = name.replace(captureRegex, '').substring(2).toLowerCase();
     if (delegatedEventTypes.has(name)) {
-        patchDelegatedEvent(name, nextValue, eventHandlerCounts);
+        patchDelegatedEvent(name, prevValue, nextValue, getEventHandlerCounts(renderRuntime), renderRuntime);
     }
     else {
         patchNormalEvent(name, prevValue, nextValue, dom, isCapture);
     }
 }
-export function patchDelegatedEvent(eventType, handler, eventHandlerCounts) {
-    if (typeof handler === 'function') {
+export function patchDelegatedEvent(eventType, prevHandler, nextHandler, eventHandlerCounts, renderRuntime) {
+    const dispatcher = getDelegatedEventDispatcher(renderRuntime);
+    if (typeof prevHandler !== 'function' && typeof nextHandler === 'function') {
         if (++eventHandlerCounts[eventType] === 1) {
-            document.addEventListener(eventType, dispatchDelegatedEvent);
+            document.addEventListener(eventType, dispatcher);
         }
+        return;
     }
-    else {
+    if (typeof prevHandler === 'function' && typeof nextHandler !== 'function') {
         if (eventHandlerCounts[eventType] !== 0 && --eventHandlerCounts[eventType] === 0) {
-            document.removeEventListener(eventType, dispatchDelegatedEvent);
+            document.removeEventListener(eventType, dispatcher);
         }
     }
 }

package/dom/index.d.ts

@@ -1,4 +1,5 @@
-import type { RefAttributes, SimpElement, SimpNode } from '../core/index.js';
+import type { RefAttributes, SimpElement, SimpNode, SimpRenderRuntime } from '../core/index.js';
+import type { HostAdapter } from '../core/internal.js';
 import type { Nullable } from '../shared/index.js';
 
 import type { PropertiesHyphen } from 'csstype';
@@ -16,9 +17,15 @@ export interface SimpRoot {
   unmount(): void;
 }
 
-declare function createRoot(container: Element | DocumentFragment): SimpRoot;
+declare function createCreateRoot(
+  renderRuntime: SimpRenderRuntime
+): (container: Element | DocumentFragment) => SimpRoot;
 
-declare function render(element: SimpElement, parentReference: Nullable<HTMLElement>): void;
+declare function createRenderer(
+  renderRuntime: SimpRenderRuntime
+): (element: SimpElement, parentReference: Nullable<HTMLElement>) => void;
+
+declare const domAdapter: HostAdapter;
 
 export interface SimpReactHTMLElement<T extends HTMLElement>
   extends DetailedSimpReactHTMLElement<AllHTMLAttributes<T>, T> {}
@@ -227,8 +234,12 @@ export interface SyntheticEvent<C = Element, E = Event> {
   stopPropagation(): void;
 }
 
-export type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }['bivarianceHack'];
-export type NativeEventHandler<E extends Event = Event> = { bivarianceHack(event: E): void }['bivarianceHack'];
+export type EventHandler<E extends SyntheticEvent<any>> = {
+  bivarianceHack(event: E): void;
+}['bivarianceHack'];
+export type NativeEventHandler<E extends Event = Event> = {
+  bivarianceHack(event: E): void;
+}['bivarianceHack'];
 
 export type ClipboardEventHandler = NativeEventHandler<ClipboardEvent>;
 export type CompositionEventHandler = NativeEventHandler<CompositionEvent>;

package/dom/index.js

@@ -1,3 +1,4 @@
-import { createRoot, render } from './render.js';
-export { createRoot, render } from './render.js';
-export default { createRoot, render };
+import { domAdapter } from './domAdapter.js';
+import { createCreateRoot, createRenderer } from './render.js';
+export { createCreateRoot, createRenderer, domAdapter };
+export default { createCreateRoot, createRenderer, domAdapter };

package/dom/props/controlled/index.d.ts

@@ -1,7 +1,7 @@
-import type { SimpElement } from '../../../core/internal.js';
+import type { SimpElement, SimpRenderRuntime } from '../../../core/internal.js';
 import type { Dict } from '../../../shared/index.js';
 export declare function isEventNameIgnored(element: SimpElement, eventName: string): boolean;
 export declare function isFormElementControlled(props: Dict): boolean;
-export declare function addControlledFormElementEventHandlers(element: SimpElement): void;
-export declare function removeControlledFormElementEventHandlers(element: SimpElement): void;
+export declare function addControlledFormElementEventHandlers(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function removeControlledFormElementEventHandlers(element: SimpElement, renderRuntime: SimpRenderRuntime): void;
 export declare function syncControlledFormElementPropsWithAttrs(element: SimpElement, props: Dict, mounting?: boolean): void;

package/dom/props/controlled/index.js

@@ -16,26 +16,26 @@ export function isEventNameIgnored(element, eventName) {
 export function isFormElementControlled(props) {
     return props.value != null || props.checked != null;
 }
-export function addControlledFormElementEventHandlers(element) {
+export function addControlledFormElementEventHandlers(element, renderRuntime) {
     if (element.type === 'input') {
-        addControlledInputEventHandlers(element.reference);
+        addControlledInputEventHandlers(element.reference, renderRuntime);
     }
     else if (element.type === 'select') {
-        addControlledSelectEventHandlers(element.reference);
+        addControlledSelectEventHandlers(element.reference, renderRuntime);
     }
     else if (element.type === 'textarea') {
-        addControlledTextareaEventHandlers(element.reference);
+        addControlledTextareaEventHandlers(element.reference, renderRuntime);
     }
 }
-export function removeControlledFormElementEventHandlers(element) {
+export function removeControlledFormElementEventHandlers(element, renderRuntime) {
     if (element.type === 'input') {
-        removeControlledInputEventHandlers(element.reference);
+        removeControlledInputEventHandlers(element.reference, renderRuntime);
     }
     else if (element.type === 'select') {
-        removeControlledSelectEventHandlers(element.reference);
+        removeControlledSelectEventHandlers(element.reference, renderRuntime);
     }
     else if (element.type === 'textarea') {
-        removeControlledTextareaEventHandlers(element.reference);
+        removeControlledTextareaEventHandlers(element.reference, renderRuntime);
     }
 }
 export function syncControlledFormElementPropsWithAttrs(element, props, mounting = false) {

package/dom/props/controlled/input.d.ts

@@ -1,7 +1,7 @@
-import type { SimpElement } from '../../../core/internal.js';
+import type { SimpElement, SimpRenderRuntime } from '../../../core/internal.js';
 import type { Dict } from '../../../shared/index.js';
 export declare function isCheckedType(type: string): boolean;
 export declare function isEventNameIgnored(props: Dict, eventName: string): boolean;
-export declare function addControlledInputEventHandlers(dom: HTMLInputElement): void;
-export declare function removeControlledInputEventHandlers(dom: HTMLInputElement): void;
+export declare function addControlledInputEventHandlers(dom: HTMLInputElement, renderRuntime: SimpRenderRuntime): void;
+export declare function removeControlledInputEventHandlers(dom: HTMLInputElement, renderRuntime: SimpRenderRuntime): void;
 export declare function syncControlledInputProps(element: SimpElement, props: Dict): void;

package/dom/props/controlled/input.js

@@ -1,55 +1,78 @@
-import { batchingRerenderLocker } from '../../../core/internal.js';
-import { getElementFromDom } from '../../attach-element-to-dom.js';
+import { withSyncRerender } from '../../../core/internal.js';
 export function isCheckedType(type) {
     return type === 'checkbox' || type === 'radio';
 }
 export function isEventNameIgnored(props, eventName) {
     return isCheckedType(props.type) ? eventName === 'onChange' : eventName === 'onInput';
 }
-function onControlledInputInput(event) {
-    let element = getElementFromDom(event.target);
-    if (!element || !element.props) {
-        return;
-    }
-    if (element.props['onInput']) {
-        batchingRerenderLocker.lock();
-        element.props['onInput'](event);
-        batchingRerenderLocker.flush();
-        element = getElementFromDom(event.target);
-    }
-    if (element) {
-        syncControlledInputProps(element, element.props);
-    }
+function createControlledInputInputHandler(renderRuntime) {
+    return event => {
+        let element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        if (!element || !element.props) {
+            return;
+        }
+        const onInput = element.props['onInput'];
+        if (onInput) {
+            withSyncRerender(renderRuntime, () => {
+                onInput(event);
+            });
+            element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        }
+        if (element) {
+            syncControlledInputProps(element, element.props);
+        }
+    };
 }
-function onControlledInputChange(event) {
-    let element = getElementFromDom(event.target);
-    if (!element || !element.props) {
-        return;
+const controlledInputInputHandlersByRuntime = new WeakMap();
+function getControlledInputInputHandler(renderRuntime) {
+    let handler = controlledInputInputHandlersByRuntime.get(renderRuntime);
+    if (!handler) {
+        handler = createControlledInputInputHandler(renderRuntime);
+        controlledInputInputHandlersByRuntime.set(renderRuntime, handler);
     }
-    if (element.props['onChange']) {
-        batchingRerenderLocker.lock();
-        element.props['onChange'](event);
-        batchingRerenderLocker.flush();
-        element = getElementFromDom(event.target);
-    }
-    if (element) {
-        syncControlledInputProps(element, element.props);
+    return handler;
+}
+function createControlledInputChangeHandler(renderRuntime) {
+    return event => {
+        let element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        if (!element || !element.props) {
+            return;
+        }
+        const onChange = element.props['onChange'];
+        if (onChange) {
+            withSyncRerender(renderRuntime, () => {
+                onChange(event);
+            });
+            element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        }
+        if (element) {
+            syncControlledInputProps(element, element.props);
+        }
+    };
+}
+const controlledInputChangeHandlersByRuntime = new WeakMap();
+function getControlledInputChangeHandler(renderRuntime) {
+    let handler = controlledInputChangeHandlersByRuntime.get(renderRuntime);
+    if (!handler) {
+        handler = createControlledInputChangeHandler(renderRuntime);
+        controlledInputChangeHandlersByRuntime.set(renderRuntime, handler);
     }
+    return handler;
 }
-export function addControlledInputEventHandlers(dom) {
+export function addControlledInputEventHandlers(dom, renderRuntime) {
     if (isCheckedType(dom.type)) {
-        dom.addEventListener('change', onControlledInputChange);
+        dom.addEventListener('change', getControlledInputChangeHandler(renderRuntime));
     }
     else {
-        dom.addEventListener('input', onControlledInputInput);
+        dom.addEventListener('input', getControlledInputInputHandler(renderRuntime));
     }
 }
-export function removeControlledInputEventHandlers(dom) {
+export function removeControlledInputEventHandlers(dom, renderRuntime) {
     if (isCheckedType(dom.type)) {
-        dom.removeEventListener('change', onControlledInputChange);
+        dom.removeEventListener('change', getControlledInputChangeHandler(renderRuntime));
     }
     else {
-        dom.removeEventListener('input', onControlledInputInput);
+        dom.removeEventListener('input', getControlledInputInputHandler(renderRuntime));
     }
 }
 export function syncControlledInputProps(element, props) {

package/dom/props/controlled/select.d.ts

@@ -1,6 +1,6 @@
-import type { SimpElement } from '../../../core/internal.js';
+import type { SimpElement, SimpRenderRuntime } from '../../../core/internal.js';
 import type { Dict } from '../../../shared/index.js';
 export declare function isEventNameIgnored(eventName: string): boolean;
-export declare function addControlledSelectEventHandlers(dom: HTMLSelectElement): void;
-export declare function removeControlledSelectEventHandlers(dom: HTMLSelectElement): void;
+export declare function addControlledSelectEventHandlers(dom: HTMLSelectElement, renderRuntime: SimpRenderRuntime): void;
+export declare function removeControlledSelectEventHandlers(dom: HTMLSelectElement, renderRuntime: SimpRenderRuntime): void;
 export declare function syncControlledSelectProps(element: SimpElement, props: Dict, mounting?: boolean): void;

package/dom/props/controlled/select.js

@@ -1,29 +1,40 @@
-import { batchingRerenderLocker } from '../../../core/internal.js';
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_LIST, withSyncRerender } from '../../../core/internal.js';
 import { emptyObject } from '../../../shared/index.js';
-import { getElementFromDom } from '../../attach-element-to-dom.js';
 export function isEventNameIgnored(eventName) {
     return eventName === 'onChange';
 }
-function onControlledInputChange(event) {
-    let element = getElementFromDom(event.target);
-    if (!element || !element.props) {
-        return;
-    }
-    if (element.props['onChange']) {
-        batchingRerenderLocker.lock();
-        element.props['onChange'](event);
-        batchingRerenderLocker.flush();
-        element = getElementFromDom(event.target);
-    }
-    if (element) {
-        syncControlledSelectProps(element, element.props);
+function createControlledInputChangeHandler(renderRuntime) {
+    return (event) => {
+        let element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        if (!element || !element.props) {
+            return;
+        }
+        const onChange = element.props['onChange'];
+        if (onChange) {
+            withSyncRerender(renderRuntime, () => {
+                onChange(event);
+            });
+            element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        }
+        if (element) {
+            syncControlledSelectProps(element, element.props);
+        }
+    };
+}
+const controlledSelectChangeHandlersByRuntime = new WeakMap();
+function getControlledSelectChangeHandler(renderRuntime) {
+    let handler = controlledSelectChangeHandlersByRuntime.get(renderRuntime);
+    if (!handler) {
+        handler = createControlledInputChangeHandler(renderRuntime);
+        controlledSelectChangeHandlersByRuntime.set(renderRuntime, handler);
     }
+    return handler;
 }
-export function addControlledSelectEventHandlers(dom) {
-    dom.addEventListener('change', onControlledInputChange);
+export function addControlledSelectEventHandlers(dom, renderRuntime) {
+    dom.addEventListener('change', getControlledSelectChangeHandler(renderRuntime));
 }
-export function removeControlledSelectEventHandlers(dom) {
-    dom.removeEventListener('change', onControlledInputChange);
+export function removeControlledSelectEventHandlers(dom, renderRuntime) {
+    dom.removeEventListener('change', getControlledSelectChangeHandler(renderRuntime));
 }
 export function syncControlledSelectProps(element, props, mounting = false) {
     const multiple = Boolean(props.multiple);
@@ -50,13 +61,15 @@ function updateOptions(element, value) {
         return;
     }
     const children = element.children;
-    if (Array.isArray(children)) {
-        for (let i = 0, len = children.length; i < len; ++i) {
-            updateOptions(children[i], value);
-        }
-    }
-    else if (children) {
-        updateOptions(children, value);
+    const childFlag = element.childFlag;
+    switch (childFlag) {
+        case SIMP_ELEMENT_CHILD_FLAG_LIST:
+            for (let i = 0, len = children.length; i < len; ++i) {
+                updateOptions(children[i], value);
+            }
+            break;
+        case SIMP_ELEMENT_CHILD_FLAG_ELEMENT:
+            updateOptions(children, value);
     }
 }
 function updateOption(element, value) {

package/dom/props/controlled/textarea.d.ts

@@ -1,6 +1,6 @@
-import type { SimpElement } from '../../../core/internal.js';
+import type { SimpElement, SimpRenderRuntime } from '../../../core/internal.js';
 import type { Dict } from '../../../shared/index.js';
 export declare function isEventNameIgnored(eventName: string): boolean;
-export declare function addControlledTextareaEventHandlers(dom: HTMLTextAreaElement): void;
-export declare function removeControlledTextareaEventHandlers(dom: HTMLTextAreaElement): void;
+export declare function addControlledTextareaEventHandlers(dom: HTMLTextAreaElement, renderRuntime: SimpRenderRuntime): void;
+export declare function removeControlledTextareaEventHandlers(dom: HTMLTextAreaElement, renderRuntime: SimpRenderRuntime): void;
 export declare function syncControlledTextareaProps(element: SimpElement, props: Dict, mounting?: boolean): void;

package/dom/props/controlled/textarea.js

@@ -1,45 +1,68 @@
-import { batchingRerenderLocker } from '../../../core/internal.js';
-import { getElementFromDom } from '../../attach-element-to-dom.js';
+import { withSyncRerender } from '../../../core/internal.js';
 export function isEventNameIgnored(eventName) {
     return eventName === 'onChange' || eventName === 'onInput';
 }
-function onControlledTextareaChange(event) {
-    let element = getElementFromDom(event.target);
-    if (!element || !element.props) {
-        return;
-    }
-    if (element.props['onChange']) {
-        batchingRerenderLocker.lock();
-        element.props['onChange'](event);
-        batchingRerenderLocker.flush();
-        element = getElementFromDom(event.target);
-    }
-    if (element) {
-        syncControlledTextareaProps(element, element.props);
-    }
+function createControlledTextareaChangeHandler(renderRuntime) {
+    return (event) => {
+        let element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        if (!element || !element.props) {
+            return;
+        }
+        const onChange = element.props['onChange'];
+        if (onChange) {
+            withSyncRerender(renderRuntime, () => {
+                onChange(event);
+            });
+            element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        }
+        if (element) {
+            syncControlledTextareaProps(element, element.props);
+        }
+    };
 }
-function onControlledTextareaInput(event) {
-    let element = getElementFromDom(event.target);
-    if (!element || !element.props) {
-        return;
+const controlledTextareaChangeHandlersByRuntime = new WeakMap();
+function getControlledTextareaChangeHandler(renderRuntime) {
+    let handler = controlledTextareaChangeHandlersByRuntime.get(renderRuntime);
+    if (!handler) {
+        handler = createControlledTextareaChangeHandler(renderRuntime);
+        controlledTextareaChangeHandlersByRuntime.set(renderRuntime, handler);
     }
-    if (element.props['onInput']) {
-        batchingRerenderLocker.lock();
-        element.props['onInput'](event);
-        batchingRerenderLocker.flush();
-        element = getElementFromDom(event.target);
-    }
-    if (element) {
-        syncControlledTextareaProps(element, element.props);
+    return handler;
+}
+function createControlledTextareaInputHandler(renderRuntime) {
+    return event => {
+        let element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        if (!element || !element.props) {
+            return;
+        }
+        const onInput = element.props['onInput'];
+        if (onInput) {
+            withSyncRerender(renderRuntime, () => {
+                onInput(event);
+            });
+            element = renderRuntime.hostAdapter.getElementFromReference(event.target, renderRuntime);
+        }
+        if (element) {
+            syncControlledTextareaProps(element, element.props);
+        }
+    };
+}
+const controlledTextareaInputHandlersByRuntime = new WeakMap();
+function getControlledTextareaInputHandler(renderRuntime) {
+    let handler = controlledTextareaInputHandlersByRuntime.get(renderRuntime);
+    if (!handler) {
+        handler = createControlledTextareaInputHandler(renderRuntime);
+        controlledTextareaInputHandlersByRuntime.set(renderRuntime, handler);
     }
+    return handler;
 }
-export function addControlledTextareaEventHandlers(dom) {
-    dom.addEventListener('input', onControlledTextareaInput);
-    dom.addEventListener('change', onControlledTextareaChange);
+export function addControlledTextareaEventHandlers(dom, renderRuntime) {
+    dom.addEventListener('input', getControlledTextareaInputHandler(renderRuntime));
+    dom.addEventListener('change', getControlledTextareaChangeHandler(renderRuntime));
 }
-export function removeControlledTextareaEventHandlers(dom) {
-    dom.removeEventListener('input', onControlledTextareaInput);
-    dom.removeEventListener('change', onControlledTextareaChange);
+export function removeControlledTextareaEventHandlers(dom, renderRuntime) {
+    dom.removeEventListener('input', getControlledTextareaInputHandler(renderRuntime));
+    dom.removeEventListener('change', getControlledTextareaChangeHandler(renderRuntime));
 }
 export function syncControlledTextareaProps(element, props, mounting = false) {
     const dom = element.reference;

package/dom/props/dangerInnerHTML.d.ts

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

package/dom/props/dangerInnerHTML.js

@@ -1,5 +1,5 @@
 import { unmount } from '../../core/internal.js';
-export function patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom) {
+export function patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElement, dom, renderRuntime) {
     const prevHTML = prevValue?.__html || '';
     const nextHTML = nextValue?.__html || '';
     if (nextElement.children) {
@@ -9,7 +9,8 @@ export function patchDangerInnerHTML(prevValue, nextValue, prevElement, nextElem
         if (nextHTML != null && !isSameInnerHTML(dom, nextHTML)) {
             if (prevElement != null) {
                 if (prevElement.children) {
-                    unmount(prevElement.children);
+                    // TODO: the HOST element can hold several children.
+                    unmount(prevElement.children, renderRuntime);
                     prevElement.children = undefined;
                 }
             }

package/dom/props/props.d.ts

@@ -1,5 +1,5 @@
-import type { SimpElement } from '../../core/internal.js';
+import type { SimpElement, SimpRenderRuntime } from '../../core/internal.js';
 import type { Namespace } from '../namespace.js';
-export declare function mountProps(dom: HTMLElement | SVGElement, element: SimpElement, namespace: Namespace): void;
-export declare function unmountProps(dom: HTMLElement | SVGElement, element: SimpElement): void;
-export declare function patchProps(dom: HTMLElement | SVGElement, prevElement: SimpElement, nextElement: SimpElement, namespace: Namespace): void;
+export declare function mountProps(dom: HTMLElement | SVGElement, element: SimpElement, namespace: Namespace, renderRuntime: SimpRenderRuntime): void;
+export declare function unmountProps(dom: HTMLElement | SVGElement, element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+export declare function patchProps(dom: HTMLElement | SVGElement, prevElement: SimpElement, nextElement: SimpElement, namespace: Namespace, renderRuntime: SimpRenderRuntime): void;