what-core 0.5.6 → 0.6.0

package/dist/dom.js

@@ -1,13 +1,6 @@
-import { effect, batch, untrack, signal } from './reactive.js';
-import { reportError, _injectGetCurrentComponent } from './components.js';
+import { effect, batch, untrack, signal, __DEV__, __devtools } from './reactive.js';
+import { reportError, _injectGetCurrentComponent, shallowEqual } from './components.js';
 import { _setComponentRef } from './helpers.js';
-if (typeof customElements !== 'undefined' && !customElements.get('what-c')) {
-customElements.define('what-c', class extends HTMLElement {
-connectedCallback() {
-this.style.display = 'contents';
-}
-});
-}
 const SVG_ELEMENTS = new Set([
 'svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'ellipse',
 'g', 'defs', 'use', 'symbol', 'clipPath', 'mask', 'pattern', 'image',
@@ -31,9 +24,21 @@ return !!value && typeof value === 'object' && (value._vnode === true || 'tag' i
 function disposeComponent(ctx) {
 if (ctx.disposed) return;
 ctx.disposed = true;
+if (ctx.cleanups) {
+for (const cleanup of ctx.cleanups) {
+try { cleanup(); } catch (e) { console.error('[what] cleanup error:', e); }
+}
+}
+if (ctx.effects) {
+for (const dispose of ctx.effects) {
+try { dispose(); } catch (e) {  }
+}
+}
+if (ctx.hooks) {
 for (const hook of ctx.hooks) {
-if (hook && typeof hook === 'object' && 'cleanup' in hook && hook.cleanup) {
-try { hook.cleanup(); } catch (e) { console.error('[what] cleanup error:', e); }
+if (hook && typeof hook.cleanup === 'function') {
+try { hook.cleanup(); } catch (e) { console.error('[what] hook cleanup error:', e); }
+}
 }
 }
 if (ctx._cleanupCallbacks) {
@@ -41,9 +46,7 @@ for (const fn of ctx._cleanupCallbacks) {
 try { fn(); } catch (e) { console.error('[what] onCleanup error:', e); }
 }
 }
-for (const dispose of ctx.effects) {
-try { dispose(); } catch (e) {  }
-}
+if (__DEV__ && __devtools?.onComponentUnmount) __devtools.onComponentUnmount(ctx);
 mountedComponents.delete(ctx);
 }
 export function disposeTree(node) {
@@ -54,6 +57,11 @@ disposeComponent(node._componentCtx);
 if (node._dispose) {
 try { node._dispose(); } catch (e) {  }
 }
+if (node._propEffects) {
+for (const key in node._propEffects) {
+try { node._propEffects[key](); } catch (e) {  }
+}
+}
 if (node.childNodes) {
 for (const child of node.childNodes) {
 disposeTree(child);
@@ -84,25 +92,29 @@ if (isDomNode(vnode)) {
 return vnode;
 }
 if (typeof vnode === 'function') {
-const wrapper = document.createElement('what-c');
-let mounted = false;
+const container = document.createDocumentFragment ? document.createElement('span') : document.createElement('span');
+container.style.display = 'contents';
+let currentNodes = [];
 const dispose = effect(() => {
 const val = vnode();
 const vnodes = (val == null || val === false || val === true)
 ? []
 : Array.isArray(val) ? val : [val];
-if (!mounted) {
-mounted = true;
+for (const old of currentNodes) {
+disposeTree(old);
+if (old.parentNode === container) container.removeChild(old);
+}
+currentNodes = [];
 for (const v of vnodes) {
-const node = createDOM(v, wrapper, parent?._isSvg);
-if (node) wrapper.appendChild(node);
+const node = createDOM(v, container, parent?._isSvg);
+if (node) {
+container.appendChild(node);
+currentNodes.push(node);
 }
-} else {
-reconcileChildren(wrapper, vnodes);
 }
 });
-wrapper._dispose = dispose;
-return wrapper;
+container._dispose = dispose;
+return container;
 }
 if (Array.isArray(vnode)) {
 const frag = document.createDocumentFragment();
@@ -112,29 +124,13 @@ if (node) frag.appendChild(node);
 }
 return frag;
 }
-if (!isVNode(vnode)) {
-return document.createTextNode(String(vnode));
-}
-if (typeof vnode.tag === 'function') {
+if (isVNode(vnode) && typeof vnode.tag === 'function') {
 return createComponent(vnode, parent, isSvg);
 }
-const svgContext = isSvg || vnode.tag === 'svg' || SVG_ELEMENTS.has(vnode.tag);
-const el = svgContext
-? document.createElementNS(SVG_NS, vnode.tag)
-: document.createElement(vnode.tag);
-applyProps(el, vnode.props, {}, svgContext);
-const hasRawHtml = vnode.props && (
-Object.prototype.hasOwnProperty.call(vnode.props, 'dangerouslySetInnerHTML') ||
-Object.prototype.hasOwnProperty.call(vnode.props, 'innerHTML')
-);
-if (!hasRawHtml) {
-for (const child of vnode.children) {
-const node = createDOM(child, el, svgContext && vnode.tag !== 'foreignObject');
-if (node) el.appendChild(node);
-}
+if (isVNode(vnode)) {
+return createElementFromVNode(vnode, parent, isSvg);
 }
-el._vnode = vnode;
-return el;
+return document.createTextNode(String(vnode));
 }
 const componentStack = [];
 export function getCurrentComponent() {
@@ -146,7 +142,16 @@ export function getComponentStack() {
 return componentStack;
 }
 function createComponent(vnode, parent, isSvg) {
-const { tag: Component, props, children } = vnode;
+let { tag: Component, props, children } = vnode;
+if (typeof Component === 'function' &&
+(Component.prototype?.isReactComponent || Component.prototype?.render)) {
+const ClassComp = Component;
+Component = function ClassComponentBridge(props) {
+const instance = new ClassComp(props);
+return instance.render();
+};
+Component.displayName = ClassComp.displayName || ClassComp.name || 'ClassComponent';
+}
 if (Component === '__errorBoundary' || vnode.tag === '__errorBoundary') {
 return createErrorBoundary(vnode, parent);
 }
@@ -154,7 +159,7 @@ if (Component === '__suspense' || vnode.tag === '__suspense') {
 return createSuspenseBoundary(vnode, parent);
 }
 if (Component === '__portal' || vnode.tag === '__portal') {
-return createPortal(vnode, parent);
+return createPortalDOM(vnode, parent);
 }
 const ctx = {
 hooks: [],
@@ -163,7 +168,7 @@ effects: [],
 cleanups: [],
 mounted: false,
 disposed: false,
-Component, 
+Component,
 _parentCtx: componentStack[componentStack.length - 1] || null,
 _errorBoundary: (() => {
 let p = componentStack[componentStack.length - 1];
@@ -174,21 +179,16 @@ p = p._parentCtx;
 return null;
 })()
 };
-let wrapper;
-if (isSvg) {
-wrapper = document.createElementNS(SVG_NS, 'g');
-} else {
-wrapper = document.createElement('what-c');
-}
-wrapper._componentCtx = ctx;
-wrapper._isSvg = !!isSvg;
-ctx._wrapper = wrapper;
+const container = document.createElement('span');
+container.style.display = 'contents';
+container._componentCtx = ctx;
+container._isSvg = !!isSvg;
+ctx._wrapper = container;
 mountedComponents.add(ctx);
-const propsSignal = signal({ ...props, children });
+if (__DEV__ && __devtools?.onComponentMount) __devtools.onComponentMount(ctx);
+const propsChildren = children.length === 0 ? undefined : children.length === 1 ? children[0] : children;
+const propsSignal = signal({ ...props, children: propsChildren });
 ctx._propsSignal = propsSignal;
-const dispose = effect(() => {
-if (ctx.disposed) return;
-ctx.hookIndex = 0;
 componentStack.push(ctx);
 let result;
 try {
@@ -199,11 +199,9 @@ if (!reportError(error, ctx)) {
 console.error('[what] Uncaught error in component:', Component.name || 'Anonymous', error);
 throw error;
 }
-return;
+return container;
 }
 componentStack.pop();
-const vnodes = Array.isArray(result) ? result : [result];
-if (!ctx.mounted) {
 ctx.mounted = true;
 if (ctx._mountCallbacks) {
 queueMicrotask(() => {
@@ -213,22 +211,18 @@ try { fn(); } catch (e) { console.error('[what] onMount error:', e); }
 }
 });
 }
+const vnodes = Array.isArray(result) ? result : [result];
 for (const v of vnodes) {
-const node = createDOM(v, wrapper, isSvg);
-if (node) wrapper.appendChild(node);
-}
-} else {
-reconcileChildren(wrapper, vnodes);
+const node = createDOM(v, container, isSvg);
+if (node) container.appendChild(node);
 }
-});
-ctx.effects.push(dispose);
-wrapper._vnode = vnode; 
-return wrapper;
+container._vnode = vnode;
+return container;
 }
 function createErrorBoundary(vnode, parent) {
 const { errorState, handleError, fallback, reset } = vnode.props;
 const children = vnode.children;
-const wrapper = document.createElement('what-c');
+const wrapper = document.createElement('span');
 wrapper.style.display = 'contents';
 const boundaryCtx = {
 hooks: [], hookIndex: 0, effects: [], cleanups: [],
@@ -240,22 +234,22 @@ wrapper._componentCtx = boundaryCtx;
 const dispose = effect(() => {
 const error = errorState();
 componentStack.push(boundaryCtx);
+while (wrapper.firstChild) {
+disposeTree(wrapper.firstChild);
+wrapper.removeChild(wrapper.firstChild);
+}
 let vnodes;
 if (error) {
 vnodes = typeof fallback === 'function' ? [fallback({ error, reset })] : [fallback];
 } else {
 vnodes = children;
 }
-componentStack.pop();
 vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
-if (wrapper.childNodes.length === 0) {
 for (const v of vnodes) {
 const node = createDOM(v, wrapper);
 if (node) wrapper.appendChild(node);
 }
-} else {
-reconcileChildren(wrapper, vnodes);
-}
+componentStack.pop();
 });
 boundaryCtx.effects.push(dispose);
 return wrapper;
@@ -263,7 +257,7 @@ return wrapper;
 function createSuspenseBoundary(vnode, parent) {
 const { boundary, fallback, loading } = vnode.props;
 const children = vnode.children;
-const wrapper = document.createElement('what-c');
+const wrapper = document.createElement('span');
 wrapper.style.display = 'contents';
 const boundaryCtx = {
 hooks: [], hookIndex: 0, effects: [], cleanups: [],
@@ -275,19 +269,21 @@ const dispose = effect(() => {
 const isLoading = loading();
 const vnodes = isLoading ? [fallback] : children;
 const normalized = Array.isArray(vnodes) ? vnodes : [vnodes];
-if (wrapper.childNodes.length === 0) {
+componentStack.push(boundaryCtx);
+while (wrapper.firstChild) {
+disposeTree(wrapper.firstChild);
+wrapper.removeChild(wrapper.firstChild);
+}
 for (const v of normalized) {
 const node = createDOM(v, wrapper);
 if (node) wrapper.appendChild(node);
 }
-} else {
-reconcileChildren(wrapper, normalized);
-}
+componentStack.pop();
 });
 boundaryCtx.effects.push(dispose);
 return wrapper;
 }
-function createPortal(vnode, parent) {
+function createPortalDOM(vnode, parent) {
 const { container } = vnode.props;
 const children = vnode.children;
 if (!container) {
@@ -317,365 +313,69 @@ if (node.parentNode) node.parentNode.removeChild(node);
 }];
 return placeholder;
 }
-function reconcile(parent, oldNodes, newVNodes, beforeMarker) {
-if (!parent) return;
-const hasKeys = newVNodes.some(v => v && typeof v === 'object' && v.key != null);
-if (hasKeys) {
-reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker);
-} else {
-reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker);
-}
-}
-function reconcileUnkeyed(parent, oldNodes, newVNodes, beforeMarker) {
-const maxLen = Math.max(oldNodes.length, newVNodes.length);
-const newNodes = [];
-for (let i = 0; i < maxLen; i++) {
-const oldNode = oldNodes[i];
-const newVNode = newVNodes[i];
-if (i >= newVNodes.length) {
-if (oldNode && oldNode.parentNode) {
-disposeTree(oldNode);
-oldNode.parentNode.removeChild(oldNode);
-}
-continue;
-}
-if (i >= oldNodes.length) {
-const node = createDOM(newVNode, parent);
-if (node) {
-const ref = getInsertionRef(oldNodes, beforeMarker);
-parent.insertBefore(node, ref);
-newNodes.push(node);
-}
-continue;
-}
-const patched = patchNode(parent, oldNode, newVNode);
-newNodes.push(patched);
-}
-oldNodes.length = 0;
-oldNodes.push(...newNodes);
-}
-function reconcileKeyed(parent, oldNodes, newVNodes, beforeMarker) {
-const oldKeyMap = new Map();
-for (let i = 0; i < oldNodes.length; i++) {
-const node = oldNodes[i];
-const key = node._vnode?.key;
-if (key != null) {
-oldKeyMap.set(key, { node, index: i });
-}
-}
-const newNodes = [];
-const newLen = newVNodes.length;
-const sources = new Array(newLen).fill(-1); 
-const reused = new Set();
-for (let i = 0; i < newLen; i++) {
-const vnode = newVNodes[i];
-const key = vnode?.key;
-if (key != null && oldKeyMap.has(key)) {
-const { node: oldNode, index: oldIndex } = oldKeyMap.get(key);
-sources[i] = oldIndex;
-reused.add(oldIndex);
-}
-}
-for (let i = 0; i < oldNodes.length; i++) {
-if (!reused.has(i) && oldNodes[i]?.parentNode) {
-disposeTree(oldNodes[i]);
-oldNodes[i].parentNode.removeChild(oldNodes[i]);
-}
-}
-const filtered = [];
-const filteredToOriginal = [];
-for (let j = 0; j < sources.length; j++) {
-if (sources[j] !== -1) {
-filteredToOriginal.push(j);
-filtered.push(sources[j]);
-}
-}
-const lis = longestIncreasingSubsequence(filtered);
-const lisSet = new Set(lis.map(i => filteredToOriginal[i]));
-let lastInserted = beforeMarker?.nextSibling || null;
-for (let i = newLen - 1; i >= 0; i--) {
-const vnode = newVNodes[i];
-const key = vnode?.key;
-const oldEntry = key != null ? oldKeyMap.get(key) : null;
-if (oldEntry && sources[i] !== -1) {
-const oldNode = oldEntry.node;
-const patched = patchNode(parent, oldNode, vnode);
-newNodes[i] = patched;
-if (!lisSet.has(i) && patched.parentNode) {
-parent.insertBefore(patched, lastInserted);
-}
-lastInserted = patched;
-} else {
-const node = createDOM(vnode, parent);
-if (node) {
-parent.insertBefore(node, lastInserted);
-lastInserted = node;
-}
-newNodes[i] = node;
-}
-}
-oldNodes.length = 0;
-oldNodes.push(...newNodes.filter(Boolean));
-}
-function longestIncreasingSubsequence(arr) {
-if (arr.length === 0) return [];
-const n = arr.length;
-const dp = new Array(n).fill(1);      
-const parent = new Array(n).fill(-1); 
-const tails = [0];                     
-for (let i = 1; i < n; i++) {
-if (arr[i] > arr[tails[tails.length - 1]]) {
-parent[i] = tails[tails.length - 1];
-tails.push(i);
-} else {
-let lo = 0, hi = tails.length - 1;
-while (lo < hi) {
-const mid = (lo + hi) >> 1;
-if (arr[tails[mid]] < arr[i]) lo = mid + 1;
-else hi = mid;
-}
-if (arr[i] < arr[tails[lo]]) {
-if (lo > 0) parent[i] = tails[lo - 1];
-tails[lo] = i;
-}
-}
-}
-const result = [];
-let k = tails[tails.length - 1];
-while (k !== -1) {
-result.push(k);
-k = parent[k];
-}
-return result.reverse();
-}
-function getInsertionRef(nodes, marker) {
-if (nodes.length > 0) {
-const last = nodes[nodes.length - 1];
-return last.nextSibling;
-}
-return marker ? marker.nextSibling : null;
-}
-function cleanupArrayMarkers(parent, startMarker) {
-const endMarker = startMarker._arrayEnd;
-if (!endMarker) return null;
-let node = startMarker.nextSibling;
-while (node && node !== endMarker) {
-const next = node.nextSibling;
-disposeTree(node);
-parent.removeChild(node);
-node = next;
-}
-if (endMarker.parentNode) parent.removeChild(endMarker);
-return startMarker;
-}
-function patchNode(parent, domNode, vnode) {
-if (vnode == null || vnode === false || vnode === true) {
-if (domNode && domNode.nodeType === 8 && domNode._arrayEnd) {
-cleanupArrayMarkers(parent, domNode);
-const placeholder = document.createComment('');
-parent.replaceChild(placeholder, domNode);
-return placeholder;
-}
-if (domNode && domNode.nodeType === 8 && !domNode._componentCtx) {
-return domNode; 
-}
-const placeholder = document.createComment('');
-if (domNode && domNode.parentNode) {
-disposeTree(domNode);
-parent.replaceChild(placeholder, domNode);
-}
-return placeholder;
-}
-if (typeof vnode === 'function') {
-const wrapper = document.createElement('what-c');
-let mounted = false;
-const dispose = effect(() => {
-const val = vnode();
-const vnodes = (val == null || val === false || val === true)
-? []
-: Array.isArray(val) ? val : [val];
-if (!mounted) {
-mounted = true;
-for (const v of vnodes) {
-const node = createDOM(v, wrapper);
-if (node) wrapper.appendChild(node);
-}
-} else {
-reconcileChildren(wrapper, vnodes);
-}
-});
-wrapper._dispose = dispose;
-if (domNode && domNode.parentNode) {
-disposeTree(domNode);
-parent.replaceChild(wrapper, domNode);
-}
-return wrapper;
-}
-if (isDomNode(vnode)) {
-if (domNode === vnode) return domNode;
-if (domNode && domNode.parentNode) {
-disposeTree(domNode);
-parent.replaceChild(vnode, domNode);
-}
-return vnode;
-}
-if (typeof vnode === 'string' || typeof vnode === 'number') {
-const text = String(vnode);
-if (domNode && domNode.nodeType === 8 && domNode._arrayEnd) {
-cleanupArrayMarkers(parent, domNode);
-const newNode = document.createTextNode(text);
-parent.replaceChild(newNode, domNode);
-return newNode;
-}
-if (domNode.nodeType === 3) {
-if (domNode.textContent !== text) domNode.textContent = text;
-return domNode;
-}
-const newNode = document.createTextNode(text);
-disposeTree(domNode);
-parent.replaceChild(newNode, domNode);
-return newNode;
-}
-if (Array.isArray(vnode)) {
-if (domNode && domNode.nodeType === 8 && domNode._arrayEnd) {
-const endMarker = domNode._arrayEnd;
-const oldChildren = [];
-let node = domNode.nextSibling;
-while (node && node !== endMarker) {
-oldChildren.push(node);
-node = node.nextSibling;
-}
-const maxLen = Math.max(oldChildren.length, vnode.length);
-for (let i = 0; i < maxLen; i++) {
-if (i >= vnode.length) {
-if (oldChildren[i]?.parentNode) {
-disposeTree(oldChildren[i]);
-parent.removeChild(oldChildren[i]);
-}
-} else if (i >= oldChildren.length) {
-const newNode = createDOM(vnode[i], parent);
-if (newNode) parent.insertBefore(newNode, endMarker);
-} else {
-patchNode(parent, oldChildren[i], vnode[i]);
-}
-}
-return domNode;
-}
-const startMarker = document.createComment('[');
-const endMarker = document.createComment(']');
-disposeTree(domNode);
-parent.replaceChild(endMarker, domNode);
-parent.insertBefore(startMarker, endMarker);
-for (const v of vnode) {
-const node = createDOM(v, parent);
-if (node) parent.insertBefore(node, endMarker);
-}
-startMarker._arrayEnd = endMarker;
-return startMarker;
-}
-if (!isVNode(vnode)) {
-const text = String(vnode);
-if (domNode.nodeType === 3) {
-if (domNode.textContent !== text) domNode.textContent = text;
-return domNode;
-}
-const newNode = document.createTextNode(text);
-disposeTree(domNode);
-parent.replaceChild(newNode, domNode);
-return newNode;
-}
-if (typeof vnode.tag === 'function') {
-if (domNode._componentCtx && !domNode._componentCtx.disposed
-&& domNode._componentCtx.Component === vnode.tag) {
-domNode._componentCtx._propsSignal.set({ ...vnode.props, children: vnode.children });
-domNode._vnode = vnode; 
-return domNode;
-}
-disposeTree(domNode);
-const node = createComponent(vnode, parent);
-parent.replaceChild(node, domNode);
-return node;
-}
-if (domNode.nodeType === 1 && domNode.tagName.toLowerCase() === vnode.tag) {
-const oldProps = domNode._vnode?.props || {};
-const nextProps = vnode.props || {};
-const hadRawHtml = Object.prototype.hasOwnProperty.call(oldProps, 'dangerouslySetInnerHTML')
-|| Object.prototype.hasOwnProperty.call(oldProps, 'innerHTML');
-const hasRawHtml = Object.prototype.hasOwnProperty.call(nextProps, 'dangerouslySetInnerHTML')
-|| Object.prototype.hasOwnProperty.call(nextProps, 'innerHTML');
-if (hasRawHtml && !hadRawHtml) {
-for (const child of Array.from(domNode.childNodes)) {
-disposeTree(child);
-}
-}
-applyProps(domNode, nextProps, oldProps);
-if (!hasRawHtml) {
-reconcileChildren(domNode, vnode.children);
-}
-domNode._vnode = vnode;
-return domNode;
-}
-const newNode = createDOM(vnode, parent);
-disposeTree(domNode);
-parent.replaceChild(newNode, domNode);
-return newNode;
-}
-function reconcileChildren(parent, newChildVNodes) {
-const oldChildren = Array.from(parent.childNodes);
-const hasKeys = newChildVNodes.some(v => v && typeof v === 'object' && v.key != null);
-if (hasKeys) {
-reconcileKeyed(parent, oldChildren, newChildVNodes, null);
-} else {
-const maxLen = Math.max(oldChildren.length, newChildVNodes.length);
-for (let i = 0; i < maxLen; i++) {
-if (i >= newChildVNodes.length) {
-if (oldChildren[i]?.parentNode) {
-disposeTree(oldChildren[i]);
-parent.removeChild(oldChildren[i]);
-}
-continue;
-}
-if (i >= oldChildren.length) {
-const node = createDOM(newChildVNodes[i], parent);
-if (node) parent.appendChild(node);
-continue;
-}
-patchNode(parent, oldChildren[i], newChildVNodes[i]);
+function createElementFromVNode(vnode, parent, isSvg) {
+const { tag, props, children } = vnode;
+const svgContext = isSvg || SVG_ELEMENTS.has(tag);
+const el = svgContext
+? document.createElementNS(SVG_NS, tag)
+: document.createElement(tag);
+if (props) {
+applyProps(el, props, {}, svgContext);
 }
+for (const child of children) {
+const node = createDOM(child, el, svgContext && tag !== 'foreignObject');
+if (node) el.appendChild(node);
 }
+el._vnode = vnode;
+return el;
 }
 function applyProps(el, newProps, oldProps, isSvg) {
 newProps = newProps || {};
 oldProps = oldProps || {};
-for (const key in oldProps) {
-if (key === 'key' || key === 'ref' || key === 'children') continue;
-if (!(key in newProps)) {
-removeProp(el, key, oldProps[key]);
-}
-}
 for (const key in newProps) {
-if (key === 'key' || key === 'ref' || key === 'children') continue;
-if (newProps[key] !== oldProps[key]) {
-setProp(el, key, newProps[key], isSvg);
-}
-}
-if (newProps.ref && newProps.ref !== oldProps.ref) {
+if (key === 'key' || key === 'children') continue;
+if (key === 'ref') {
 if (typeof newProps.ref === 'function') newProps.ref(el);
-else newProps.ref.current = el;
+else if (newProps.ref) newProps.ref.current = el;
+continue;
+}
+setProp(el, key, newProps[key], isSvg);
 }
 }
 function setProp(el, key, value, isSvg) {
+if (typeof value === 'function' && !(key.startsWith('on') && key.length > 2) && key !== 'ref') {
+if (!el._propEffects) el._propEffects = {};
+if (el._propEffects[key]) {
+try { el._propEffects[key](); } catch (e) {  }
+}
+el._propEffects[key] = effect(() => {
+const resolved = value();
+setProp(el, key, resolved, isSvg);
+});
+return;
+}
 if (key.startsWith('on') && key.length > 2) {
-const event = key.slice(2).toLowerCase();
-const old = el._events?.[event];
+let eventName = key.slice(2);
+let useCapture = false;
+if (eventName.endsWith('Capture')) {
+eventName = eventName.slice(0, -7);
+useCapture = true;
+}
+const event = eventName.toLowerCase();
+const storageKey = useCapture ? event + '_capture' : event;
+const old = el._events?.[storageKey];
 if (old && old._original === value) return;
-if (old) el.removeEventListener(event, old);
+if (old) el.removeEventListener(event, old, useCapture);
+if (value == null) return;
 if (!el._events) el._events = {};
-const wrappedHandler = (e) => untrack(() => value(e));
+const wrappedHandler = (e) => {
+if (!e.nativeEvent) e.nativeEvent = e;
+return untrack(() => value(e));
+};
 wrappedHandler._original = value;
-el._events[event] = wrappedHandler;
+el._events[storageKey] = wrappedHandler;
 const eventOpts = value._eventOpts;
-el.addEventListener(event, wrappedHandler, eventOpts || undefined);
+el.addEventListener(event, wrappedHandler, eventOpts || useCapture || undefined);
 return;
 }
 if (key === 'className' || key === 'class') {
@@ -736,28 +436,4 @@ el[key] = value;
 } else {
 el.setAttribute(key, value);
 }
-}
-function removeProp(el, key, oldValue) {
-if (key.startsWith('on') && key.length > 2) {
-const event = key.slice(2).toLowerCase();
-if (el._events?.[event]) {
-el.removeEventListener(event, el._events[event]);
-delete el._events[event];
-}
-return;
-}
-if (key === 'className' || key === 'class') {
-el.className = '';
-return;
-}
-if (key === 'style') {
-el.style.cssText = '';
-el._prevStyle = null;
-return;
-}
-if (key === 'dangerouslySetInnerHTML' || key === 'innerHTML') {
-el.innerHTML = '';
-return;
-}
-el.removeAttribute(key);
 }