solid-js 1.3.13 → 1.3.14

package/dist/dev.cjs

@@ -621,7 +621,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -671,7 +671,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -764,7 +764,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -785,7 +785,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -884,7 +884,7 @@ function runUserEffects(queue) {
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -892,18 +892,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }
@@ -1426,6 +1426,7 @@ function ErrorBoundary(props) {
   return createMemo(() => {
     if ((e = errored()) != null) {
       const f = props.fallback;
+      if ((typeof f !== "function" || f.length == 0)) console.error(e);
       return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored(null))) : f;
     }
     onError(setErrored);

package/dist/dev.js

@@ -617,7 +617,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -667,7 +667,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -760,7 +760,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -781,7 +781,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -880,7 +880,7 @@ function runUserEffects(queue) {
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -888,18 +888,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }
@@ -1422,6 +1422,7 @@ function ErrorBoundary(props) {
   return createMemo(() => {
     if ((e = errored()) != null) {
       const f = props.fallback;
+      if ((typeof f !== "function" || f.length == 0)) console.error(e);
       return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored(null))) : f;
     }
     onError(setErrored);

package/dist/solid.cjs

@@ -565,7 +565,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -615,7 +615,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -707,7 +707,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -728,7 +728,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -826,7 +826,7 @@ function runUserEffects(queue) {
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -834,18 +834,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }

package/dist/solid.js

@@ -561,7 +561,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -611,7 +611,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -703,7 +703,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -724,7 +724,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -822,7 +822,7 @@ function runUserEffects(queue) {
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -830,18 +830,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.3.13",
+  "version": "1.3.14",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -144,5 +144,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "dfacd34d443f9cdf1958445756e7317bd8e3632c"
+  "gitHead": "9a41feafea10717e785c603eadb96c6133cd2988"
 }

package/store/types/store.d.ts

@@ -18,10 +18,10 @@ export declare function createDataNode(): Accessor<void> & {
 export declare function setProperty(state: StoreNode, property: PropertyKey, value: any): void;
 export declare function updatePath(current: StoreNode, path: any[], traversed?: PropertyKey[]): void;
 export declare type DeepReadonly<T> = 0 extends 1 & T ? T : T extends NotWrappable ? T : {
-    readonly [K in keyof T]: T[K];
+    readonly [K in keyof T]: DeepReadonly<T[K]>;
 };
 export declare type DeepMutable<T> = 0 extends 1 & T ? T : T extends NotWrappable ? T : {
-    -readonly [K in keyof T]: T[K];
+    -readonly [K in keyof T]: DeepMutable<T[K]>;
 };
 export declare type StorePathRange = {
     from?: number;

package/types/jsx.d.ts

@@ -21,7 +21,7 @@ export namespace JSX {
     (): Element;
   }
   interface ElementClass {
-    render(props: any): Element;
+    // empty, libs can define requirements downstream
   }
   type LibraryManagedAttributes<Component, Props> = Props;
   interface ElementChildrenAttribute {
@@ -3112,7 +3112,7 @@ export namespace JSX {
       ZoomAndPanSVGAttributes,
       PresentationSVGAttributes {
     version?: string;
-    "base-profile"?: string;
+    baseProfile?: string;
     x?: number | string;
     y?: number | string;
     width?: number | string;

package/universal/dist/dev.cjs

@@ -194,18 +194,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     solidJs.createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/universal/dist/dev.js

@@ -190,18 +190,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/universal/dist/universal.cjs

@@ -194,18 +194,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     solidJs.createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/universal/dist/universal.js

@@ -190,18 +190,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/web/dist/dev.cjs

@@ -166,8 +166,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -205,11 +207,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -218,7 +221,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -293,13 +296,15 @@ 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) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   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);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -343,10 +348,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -461,7 +468,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) solidJs.sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {

package/web/dist/dev.js

@@ -163,8 +163,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -202,11 +204,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -215,7 +218,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -290,13 +293,15 @@ 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) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   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);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -340,10 +345,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -458,7 +465,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {

package/web/dist/web.cjs

@@ -165,8 +165,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -204,11 +206,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -217,7 +220,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -292,13 +295,15 @@ 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) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   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);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -342,10 +347,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -460,7 +467,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) solidJs.sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {

package/web/dist/web.js

@@ -162,8 +162,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -201,11 +203,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -214,7 +217,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -289,13 +292,15 @@ 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) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   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);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -339,10 +344,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -457,7 +464,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {