solid-js 1.2.2 → 1.2.6

package/dist/dev.cjs

@@ -195,10 +195,12 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE, options ));
+  const c = createComputation(fn, value, true, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE, options ));
+  const c = createComputation(fn, value, false, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -215,7 +217,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -1207,6 +1212,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1409,9 +1417,12 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
@@ -1420,13 +1431,17 @@ function Suspense(props) {
         const inFallback = store.inFallback(),
               visibleContent = showContent ? showContent() : true,
               visibleFallback = showFallback ? showFallback() : true;
+        dispose && dispose();
         if (!inFallback && visibleContent) {
           store.resolved = true;
           resumeEffects(store.effects);
           return rendered;
         }
         if (!visibleFallback) return;
-        return props.fallback;
+        return createRoot(disposer => {
+          dispose = disposer;
+          return props.fallback;
+        }, owner);
       });
     }
   });

package/dist/dev.js

@@ -191,10 +191,12 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE, options ));
+  const c = createComputation(fn, value, true, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE, options ));
+  const c = createComputation(fn, value, false, STALE, options );
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -211,7 +213,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -1203,6 +1208,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1405,9 +1413,12 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
@@ -1416,13 +1427,17 @@ function Suspense(props) {
         const inFallback = store.inFallback(),
               visibleContent = showContent ? showContent() : true,
               visibleFallback = showFallback ? showFallback() : true;
+        dispose && dispose();
         if (!inFallback && visibleContent) {
           store.resolved = true;
           resumeEffects(store.effects);
           return rendered;
         }
         if (!visibleFallback) return;
-        return props.fallback;
+        return createRoot(disposer => {
+          dispose = disposer;
+          return props.fallback;
+        }, owner);
       });
     }
   });

package/dist/solid.cjs

@@ -192,10 +192,12 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE));
+  const c = createComputation(fn, value, true, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE));
+  const c = createComputation(fn, value, false, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -212,7 +214,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -1131,6 +1136,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1333,9 +1341,12 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
@@ -1344,13 +1355,17 @@ function Suspense(props) {
         const inFallback = store.inFallback(),
               visibleContent = showContent ? showContent() : true,
               visibleFallback = showFallback ? showFallback() : true;
+        dispose && dispose();
         if (!inFallback && visibleContent) {
           store.resolved = true;
           resumeEffects(store.effects);
           return rendered;
         }
         if (!visibleFallback) return;
-        return props.fallback;
+        return createRoot(disposer => {
+          dispose = disposer;
+          return props.fallback;
+        }, owner);
       });
     }
   });

package/dist/solid.js

@@ -188,10 +188,12 @@ function createSignal(value, options) {
   }];
 }
 function createComputed(fn, value, options) {
-  updateComputation(createComputation(fn, value, true, STALE));
+  const c = createComputation(fn, value, true, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createRenderEffect(fn, value, options) {
-  updateComputation(createComputation(fn, value, false, STALE));
+  const c = createComputation(fn, value, false, STALE);
+  if (Scheduler && Transition && Transition.running) Updates.push(c);else updateComputation(c);
 }
 function createEffect(fn, value, options) {
   runEffects = runUserEffects;
@@ -208,7 +210,10 @@ function createMemo(fn, value, options) {
   c.observers = null;
   c.observerSlots = null;
   c.comparator = options.equals || undefined;
-  updateComputation(c);
+  if (Scheduler && Transition && Transition.running) {
+    c.tState = STALE;
+    Updates.push(c);
+  } else updateComputation(c);
   return readSignal.bind(c);
 }
 function createResource(source, fetcher, options) {
@@ -1127,6 +1132,9 @@ function splitProps(props, ...keys) {
       Object.defineProperty(clone, key, descriptors[key] ? descriptors[key] : {
         get() {
           return props[key];
+        },
+        set() {
+          return true;
         }
       });
     }
@@ -1329,9 +1337,12 @@ function Suspense(props) {
     inFallback,
     effects: [],
     resolved: false
-  };
+  },
+        owner = getOwner();
   const listContext = useContext(SuspenseListContext);
   if (listContext) [showContent, showFallback] = listContext.register(store.inFallback);
+  let dispose;
+  onCleanup(() => dispose && dispose());
   return createComponent(SuspenseContext.Provider, {
     value: store,
     get children() {
@@ -1340,13 +1351,17 @@ function Suspense(props) {
         const inFallback = store.inFallback(),
               visibleContent = showContent ? showContent() : true,
               visibleFallback = showFallback ? showFallback() : true;
+        dispose && dispose();
         if (!inFallback && visibleContent) {
           store.resolved = true;
           resumeEffects(store.effects);
           return rendered;
         }
         if (!visibleFallback) return;
-        return props.fallback;
+        return createRoot(disposer => {
+          dispose = disposer;
+          return props.fallback;
+        }, owner);
       });
     }
   });

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.2",
+  "version": "1.2.6",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://github.com/solidjs/solid#readme",
@@ -36,10 +36,6 @@
   ],
   "exports": {
     ".": {
-      "development": {
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
-      },
       "browser": {
         "import": "./dist/solid.js",
         "require": "./dist/solid.cjs"
@@ -48,15 +44,15 @@
         "import": "./dist/server.js",
         "require": "./dist/server.cjs"
       },
+      "development": {
+        "import": "./dist/dev.js",
+        "require": "./dist/dev.cjs"
+      },
       "import": "./dist/solid.js",
       "require": "./dist/solid.cjs"
     },
     "./dist/*": "./dist/*",
     "./store": {
-      "development": {
-        "import": "./store/dist/dev.js",
-        "require": "./store/dist/dev.cjs"
-      },
       "browser": {
         "import": "./store/dist/store.js",
         "require": "./store/dist/store.cjs"
@@ -65,15 +61,15 @@
         "import": "./store/dist/server.js",
         "require": "./store/dist/server.cjs"
       },
+      "development": {
+        "import": "./store/dist/dev.js",
+        "require": "./store/dist/dev.cjs"
+      },
       "import": "./store/dist/store.js",
       "require": "./store/dist/store.cjs"
     },
     "./store/dist/*": "./store/dist/*",
     "./web": {
-      "development": {
-        "import": "./web/dist/dev.js",
-        "require": "./web/dist/dev.cjs"
-      },
       "browser": {
         "import": "./web/dist/web.js",
         "require": "./web/dist/web.cjs"
@@ -82,6 +78,10 @@
         "import": "./web/dist/server.js",
         "require": "./web/dist/server.cjs"
       },
+      "development": {
+        "import": "./web/dist/dev.js",
+        "require": "./web/dist/dev.cjs"
+      },
       "import": "./web/dist/web.js",
       "require": "./web/dist/web.cjs"
     },
@@ -132,5 +132,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "116e636553b34a7bf9fc5d87402d0077d7f16e59"
+  "gitHead": "bbdf3c645de60be9ef569199c4357f2836024149"
 }

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;
@@ -65,7 +65,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[solidJs.$PROXY][property];

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;
@@ -61,7 +61,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === $PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[$PROXY][property];

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;
@@ -62,7 +62,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === solidJs.$PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[solidJs.$PROXY][property];

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;
@@ -58,7 +58,7 @@ function getDataNodes(target) {
 }
 function proxyDescriptor(target, property) {
   const desc = Reflect.getOwnPropertyDescriptor(target, property);
-  if (!desc || desc.get || property === $PROXY || property === $NODE || property === $NAME) return desc;
+  if (!desc || desc.get || !desc.configurable || property === $PROXY || property === $NODE || property === $NAME) return desc;
   delete desc.value;
   delete desc.writable;
   desc.get = () => target[$PROXY][property];

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,36 +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);
-    }
-    prevProps[prop] = value;
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
 function hydrate(code, element) {
@@ -314,6 +297,30 @@ 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 prev;
+  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);
+  }
+  return value;
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;

package/web/dist/dev.js

@@ -200,36 +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);
-    }
-    prevProps[prop] = value;
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
 function hydrate(code, element) {
@@ -311,6 +294,30 @@ 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 prev;
+  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);
+  }
+  return 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,36 +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);
-    }
-    prevProps[prop] = value;
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
 function hydrate(code, element) {
@@ -313,6 +296,30 @@ 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 prev;
+  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);
+  }
+  return value;
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;

package/web/dist/web.js

@@ -199,36 +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);
-    }
-    prevProps[prop] = value;
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
   }
 }
 function hydrate(code, element) {
@@ -310,6 +293,30 @@ 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 prev;
+  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);
+  }
+  return value;
+}
 function eventHandler(e) {
   const key = `$$${e.type}`;
   let node = e.composedPath && e.composedPath()[0] || e.target;