solid-js 1.2.3 → 1.2.4

package/dist/dev.cjs

@@ -1207,6 +1207,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }

package/dist/dev.js

@@ -1203,6 +1203,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }

package/dist/solid.cjs

@@ -1131,6 +1131,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }

package/dist/solid.js

@@ -1127,6 +1127,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }

package/html/dist/html.cjs

@@ -358,7 +358,8 @@ function createHTML(r, {
             childOptions = Object.assign({}, options, {
         first: true,
         decl: [],
-        exprs: []
+        exprs: [],
+        parent: false
       });
       parseNode(children, childOptions);
       props.push(`children: () => { ${childOptions.exprs.join(";\n")}}`);
@@ -399,8 +400,8 @@ function createHTML(r, {
             decl: [],
             exprs: []
           });
-          parseNode(child, childOptions);
           options.templateNodes.push([child]);
+          parseNode(child, childOptions);
           parts.push(`function() { ${childOptions.decl.join(",\n") + ";\n" + childOptions.exprs.join(";\n") + `;\nreturn _$el${id};\n`}}()`);
           options.counter = childOptions.counter;
           options.templateId = childOptions.templateId;

package/html/dist/html.js

@@ -356,7 +356,8 @@ function createHTML(r, {
             childOptions = Object.assign({}, options, {
         first: true,
         decl: [],
-        exprs: []
+        exprs: [],
+        parent: false
       });
       parseNode(children, childOptions);
       props.push(`children: () => { ${childOptions.exprs.join(";\n")}}`);
@@ -397,8 +398,8 @@ function createHTML(r, {
             decl: [],
             exprs: []
           });
-          parseNode(child, childOptions);
           options.templateNodes.push([child]);
+          parseNode(child, childOptions);
           parts.push(`function() { ${childOptions.decl.join(",\n") + ";\n" + childOptions.exprs.join(";\n") + `;\nreturn _$el${id};\n`}}()`);
           options.counter = childOptions.counter;
           options.templateId = childOptions.templateId;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://github.com/solidjs/solid#readme",
@@ -132,5 +132,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "151eee8891045ff05229d6e38a71742c597102ba"
+  "gitHead": "2866e83def4f3a02c305277fa8f589e355ab8952"
 }

package/store/dist/dev.cjs

@@ -31,7 +31,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;

package/store/dist/dev.js

@@ -1,4 +1,4 @@
-import { DEV, $PROXY, getListener, batch, createSignal } from 'solid-js';
+import { $PROXY, DEV, getListener, batch, createSignal } from 'solid-js';
 
 const $RAW = Symbol("store-raw"),
       $NODE = Symbol("store-node"),
@@ -27,7 +27,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;

package/store/dist/store.cjs

@@ -28,7 +28,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[solidJs.$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;

package/store/dist/store.js

@@ -24,7 +24,7 @@ function wrap$1(value, name) {
   return p;
 }
 function isWrappable(obj) {
-  return obj != null && typeof obj === "object" && (!obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
+  return obj != null && typeof obj === "object" && (obj[$PROXY] || !obj.__proto__ || obj.__proto__ === Object.prototype || Array.isArray(obj));
 }
 function unwrap(item, set = new Set()) {
   let result, unwrapped, v, prop;

package/store/types/store.d.ts

@@ -33,7 +33,7 @@ export declare type Store<T> = {
 } & {
     [$RAW]?: T;
 } & AddSymbolToPrimitive<T> & AddSymbolIterator<T> & AddSymbolToStringTag<T> & AddCallable<T>;
-export declare function isWrappable(obj: any): boolean;
+export declare function isWrappable(obj: any): any;
 export declare function unwrap<T extends StoreNode>(item: any, set?: Set<unknown>): T;
 export declare function getDataNodes(target: StoreNode): any;
 export declare function proxyDescriptor(target: StoreNode, property: string | number | symbol): PropertyDescriptor | undefined;

package/types/jsx.d.ts

@@ -92,6 +92,7 @@ export namespace JSX {
     onFocusIn?: EventHandlerUnion<T, FocusEvent>;
     onBlur?: EventHandlerUnion<T, FocusEvent>;
     onChange?: EventHandlerUnion<T, Event>;
+    onInvalid?: EventHandlerUnion<T, Event>;
     onInput?: EventHandlerUnion<T, InputEvent>;
     onBeforeInput?: EventHandlerUnion<T, InputEvent>;
     onReset?: EventHandlerUnion<T, Event>;
@@ -180,6 +181,7 @@ export namespace JSX {
     onfocusin?: EventHandlerUnion<T, FocusEvent>;
     onblur?: EventHandlerUnion<T, FocusEvent>;
     onchange?: EventHandlerUnion<T, Event>;
+    oninvalid?: EventHandlerUnion<T, Event>;
     oninput?: EventHandlerUnion<T, InputEvent>;
     onbeforeinput?: EventHandlerUnion<T, InputEvent>;
     onreset?: EventHandlerUnion<T, Event>;

package/web/dist/dev.cjs

@@ -203,35 +203,19 @@ function insert(parent, accessor, marker, initial) {
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}) {
-  let isCE, isProp, isChildProp;
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      assignProp(node, prop, null, prevProps[prop], isSVG);
+    }
+  }
   for (const prop in props) {
     if (prop === "children") {
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
     const value = props[prop];
-    if (value === prevProps[prop]) continue;
-    if (prop === "style") {
-      style(node, value, prevProps[prop]);
-    } else if (prop === "classList") {
-      classList(node, value, prevProps[prop]);
-    } else if (prop === "ref") {
-      value(node);
-    } else if (prop.slice(0, 3) === "on:") {
-      node.addEventListener(prop.slice(3), value);
-    } else if (prop.slice(0, 10) === "oncapture:") {
-      node.addEventListener(prop.slice(10), value, true);
-    } else if (prop.slice(0, 2) === "on") {
-      const name = prop.slice(2).toLowerCase();
-      const delegate = DelegatedEvents.has(name);
-      addEventListener(node, name, value, delegate);
-      delegate && delegateEvents([name]);
-    } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-      if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
-    } else {
-      const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-      if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
-    }
+    assignProp(node, prop, value, prevProps[prop], isSVG);
     prevProps[prop] = value;
   }
 }
@@ -314,6 +298,29 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
+function assignProp(node, prop, value, prev, isSVG) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style") return style(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return;
+  if (prop === "ref") {
+    value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    node.addEventListener(prop.slice(3), value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    node.addEventListener(prop.slice(10), value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    addEventListener(node, name, value, delegate);
+    delegate && delegateEvents([name]);
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;

package/web/dist/dev.js

@@ -200,35 +200,19 @@ function insert(parent, accessor, marker, initial) {
   createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}) {
-  let isCE, isProp, isChildProp;
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      assignProp(node, prop, null, prevProps[prop], isSVG);
+    }
+  }
   for (const prop in props) {
     if (prop === "children") {
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
     const value = props[prop];
-    if (value === prevProps[prop]) continue;
-    if (prop === "style") {
-      style(node, value, prevProps[prop]);
-    } else if (prop === "classList") {
-      classList(node, value, prevProps[prop]);
-    } else if (prop === "ref") {
-      value(node);
-    } else if (prop.slice(0, 3) === "on:") {
-      node.addEventListener(prop.slice(3), value);
-    } else if (prop.slice(0, 10) === "oncapture:") {
-      node.addEventListener(prop.slice(10), value, true);
-    } else if (prop.slice(0, 2) === "on") {
-      const name = prop.slice(2).toLowerCase();
-      const delegate = DelegatedEvents.has(name);
-      addEventListener(node, name, value, delegate);
-      delegate && delegateEvents([name]);
-    } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-      if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
-    } else {
-      const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-      if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
-    }
+    assignProp(node, prop, value, prevProps[prop], isSVG);
     prevProps[prop] = value;
   }
 }
@@ -311,6 +295,29 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
+function assignProp(node, prop, value, prev, isSVG) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style") return style(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return;
+  if (prop === "ref") {
+    value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    node.addEventListener(prop.slice(3), value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    node.addEventListener(prop.slice(10), value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    addEventListener(node, name, value, delegate);
+    delegate && delegateEvents([name]);
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;

package/web/dist/server.cjs

@@ -449,6 +449,8 @@ function ssrSpread(props, isSVG, skipChildren) {
       result += `class="${ssrClassList(value)}"`;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
+    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+      continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
     }
@@ -525,7 +527,7 @@ function generateHydrationScript() {
     resources,
     eventNames = ["click", "input"]
   } = solidJs.sharedConfig.context;
-  let s = `<script${nonce ? ` nonce="${nonce}"` : ""}>(()=>{_$HYDRATION={events:[],completed:new WeakSet};const t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")&&e||t(e.host&&e.host instanceof Node?e.host:e.parentNode)),e=e=>{let o=e.composedPath&&e.composedPath()[0]||e.target,s=t(o);s&&!_$HYDRATION.completed.has(s)&&_$HYDRATION.events.push([s,e])};["${eventNames.join('","')}"].forEach(t=>document.addEventListener(t,e))})();`;
+  let s = `<script${nonce ? ` nonce="${nonce}"` : ""}>(()=>{_$HYDRATION={events:[],completed:new WeakSet};const t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),e=e=>{let o=e.composedPath&&e.composedPath()[0]||e.target,s=t(o);s&&!_$HYDRATION.completed.has(s)&&_$HYDRATION.events.push([s,e])};["${eventNames.join('","')}"].forEach(t=>document.addEventListener(t,e))})();`;
   if (streaming) {
     s += `(()=>{const e=_$HYDRATION,o={};e.startResource=e=>{let r;o[e]=[new Promise(e=>r=e),r]},e.resolveResource=(e,r)=>{const n=o[e];if(!n)return o[e]=[r];n[1](r)},e.loadResource=e=>{const r=o[e];if(r)return r[0]}})();`;
   }

package/web/dist/server.js

@@ -446,6 +446,8 @@ function ssrSpread(props, isSVG, skipChildren) {
       result += `class="${ssrClassList(value)}"`;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
+    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+      continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
     }
@@ -522,7 +524,7 @@ function generateHydrationScript() {
     resources,
     eventNames = ["click", "input"]
   } = sharedConfig.context;
-  let s = `<script${nonce ? ` nonce="${nonce}"` : ""}>(()=>{_$HYDRATION={events:[],completed:new WeakSet};const t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")&&e||t(e.host&&e.host instanceof Node?e.host:e.parentNode)),e=e=>{let o=e.composedPath&&e.composedPath()[0]||e.target,s=t(o);s&&!_$HYDRATION.completed.has(s)&&_$HYDRATION.events.push([s,e])};["${eventNames.join('","')}"].forEach(t=>document.addEventListener(t,e))})();`;
+  let s = `<script${nonce ? ` nonce="${nonce}"` : ""}>(()=>{_$HYDRATION={events:[],completed:new WeakSet};const t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),e=e=>{let o=e.composedPath&&e.composedPath()[0]||e.target,s=t(o);s&&!_$HYDRATION.completed.has(s)&&_$HYDRATION.events.push([s,e])};["${eventNames.join('","')}"].forEach(t=>document.addEventListener(t,e))})();`;
   if (streaming) {
     s += `(()=>{const e=_$HYDRATION,o={};e.startResource=e=>{let r;o[e]=[new Promise(e=>r=e),r]},e.resolveResource=(e,r)=>{const n=o[e];if(!n)return o[e]=[r];n[1](r)},e.loadResource=e=>{const r=o[e];if(r)return r[0]}})();`;
   }

package/web/dist/web.cjs

@@ -202,35 +202,19 @@ function insert(parent, accessor, marker, initial) {
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}) {
-  let isCE, isProp, isChildProp;
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      assignProp(node, prop, null, prevProps[prop], isSVG);
+    }
+  }
   for (const prop in props) {
     if (prop === "children") {
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
     const value = props[prop];
-    if (value === prevProps[prop]) continue;
-    if (prop === "style") {
-      style(node, value, prevProps[prop]);
-    } else if (prop === "classList") {
-      classList(node, value, prevProps[prop]);
-    } else if (prop === "ref") {
-      value(node);
-    } else if (prop.slice(0, 3) === "on:") {
-      node.addEventListener(prop.slice(3), value);
-    } else if (prop.slice(0, 10) === "oncapture:") {
-      node.addEventListener(prop.slice(10), value, true);
-    } else if (prop.slice(0, 2) === "on") {
-      const name = prop.slice(2).toLowerCase();
-      const delegate = DelegatedEvents.has(name);
-      addEventListener(node, name, value, delegate);
-      delegate && delegateEvents([name]);
-    } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-      if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
-    } else {
-      const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-      if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
-    }
+    assignProp(node, prop, value, prevProps[prop], isSVG);
     prevProps[prop] = value;
   }
 }
@@ -313,6 +297,29 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
+function assignProp(node, prop, value, prev, isSVG) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style") return style(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return;
+  if (prop === "ref") {
+    value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    node.addEventListener(prop.slice(3), value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    node.addEventListener(prop.slice(10), value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    addEventListener(node, name, value, delegate);
+    delegate && delegateEvents([name]);
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;

package/web/dist/web.js

@@ -199,35 +199,19 @@ function insert(parent, accessor, marker, initial) {
   createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
 function assign(node, props, isSVG, skipChildren, prevProps = {}) {
-  let isCE, isProp, isChildProp;
+  for (const prop in prevProps) {
+    if (!(prop in props)) {
+      if (prop === "children") continue;
+      assignProp(node, prop, null, prevProps[prop], isSVG);
+    }
+  }
   for (const prop in props) {
     if (prop === "children") {
       if (!skipChildren) insertExpression(node, props.children);
       continue;
     }
     const value = props[prop];
-    if (value === prevProps[prop]) continue;
-    if (prop === "style") {
-      style(node, value, prevProps[prop]);
-    } else if (prop === "classList") {
-      classList(node, value, prevProps[prop]);
-    } else if (prop === "ref") {
-      value(node);
-    } else if (prop.slice(0, 3) === "on:") {
-      node.addEventListener(prop.slice(3), value);
-    } else if (prop.slice(0, 10) === "oncapture:") {
-      node.addEventListener(prop.slice(10), value, true);
-    } else if (prop.slice(0, 2) === "on") {
-      const name = prop.slice(2).toLowerCase();
-      const delegate = DelegatedEvents.has(name);
-      addEventListener(node, name, value, delegate);
-      delegate && delegateEvents([name]);
-    } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-      if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
-    } else {
-      const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
-      if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
-    }
+    assignProp(node, prop, value, prevProps[prop], isSVG);
     prevProps[prop] = value;
   }
 }
@@ -310,6 +294,29 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
+function assignProp(node, prop, value, prev, isSVG) {
+  let isCE, isProp, isChildProp;
+  if (prop === "style") return style(node, value, prev);
+  if (prop === "classList") return classList(node, value, prev);
+  if (value === prev) return;
+  if (prop === "ref") {
+    value(node);
+  } else if (prop.slice(0, 3) === "on:") {
+    node.addEventListener(prop.slice(3), value);
+  } else if (prop.slice(0, 10) === "oncapture:") {
+    node.addEventListener(prop.slice(10), value, true);
+  } else if (prop.slice(0, 2) === "on") {
+    const name = prop.slice(2).toLowerCase();
+    const delegate = DelegatedEvents.has(name);
+    addEventListener(node, name, value, delegate);
+    delegate && delegateEvents([name]);
+  } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
+    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+  } else {
+    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
+  }
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;