solid-js 1.8.15 → 1.8.17

package/dist/dev.cjs

@@ -460,7 +460,7 @@ function on(deps, fn, options) {
     } else input = deps();
     if (defer) {
       defer = false;
-      return undefined;
+      return prevValue;
     }
     const result = untrack(() => fn(input, prevInput, prevValue));
     prevInput = input;

package/dist/dev.js

@@ -519,7 +519,7 @@ function on(deps, fn, options) {
     } else input = deps();
     if (defer) {
       defer = false;
-      return undefined;
+      return prevValue;
     }
     const result = untrack(() => fn(input, prevInput, prevValue));
     prevInput = input;

package/dist/server.cjs

@@ -307,8 +307,12 @@ function resolveSSRNode(node) {
   if (t === "string") return node;
   if (node == null || t === "boolean") return "";
   if (Array.isArray(node)) {
+    let prev = {};
     let mapped = "";
-    for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
+    for (let i = 0, len = node.length; i < len; i++) {
+      if (typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
+      mapped += resolveSSRNode(prev = node[i]);
+    }
     return mapped;
   }
   if (t === "object") return node.t;

package/dist/server.js

@@ -316,8 +316,12 @@ function resolveSSRNode(node) {
   if (t === "string") return node;
   if (node == null || t === "boolean") return "";
   if (Array.isArray(node)) {
+    let prev = {};
     let mapped = "";
-    for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
+    for (let i = 0, len = node.length; i < len; i++) {
+      if (typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
+      mapped += resolveSSRNode((prev = node[i]));
+    }
     return mapped;
   }
   if (t === "object") return node.t;

package/dist/solid.cjs

@@ -442,7 +442,7 @@ function on(deps, fn, options) {
     } else input = deps();
     if (defer) {
       defer = false;
-      return undefined;
+      return prevValue;
     }
     const result = untrack(() => fn(input, prevInput, prevValue));
     prevInput = input;

package/dist/solid.js

@@ -496,7 +496,7 @@ function on(deps, fn, options) {
     } else input = deps();
     if (defer) {
       defer = false;
-      return undefined;
+      return prevValue;
     }
     const result = untrack(() => fn(input, prevInput, prevValue));
     prevInput = input;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.8.15",
+  "version": "1.8.17",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -219,7 +219,7 @@
   ],
   "dependencies": {
     "csstype": "^3.1.0",
-    "seroval": "^1.0.3",
+    "seroval": "^1.0.4",
     "seroval-plugins": "^1.0.3"
   },
   "scripts": {

package/store/types/store.d.ts

@@ -241,7 +241,7 @@ export interface SetStoreFunction<T> {
   ): void;
 }
 /**
- * creates a reactive store that can be read through a proxy object and written with a setter function
+ * Creates a reactive store that can be read through a proxy object and written with a setter function
  *
  * @description https://www.solidjs.com/docs/latest/api#createstore
  */

package/types/reactive/array.d.ts

@@ -23,7 +23,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 */
 /**
- * reactively transforms an array with a callback function - underlying helper for the `<For>` control flow
+ * Reactively transforms an array with a callback function - underlying helper for the `<For>` control flow
  *
  * similar to `Array.prototype.map`, but gets the index as accessor, transforms only values that changed and returns an accessor and reactively tracks changes to the list.
  *
@@ -37,7 +37,7 @@ export declare function mapArray<T, U>(
   }
 ): () => U[];
 /**
- * reactively maps arrays by index instead of value - underlying helper for the `<Index>` control flow
+ * Reactively maps arrays by index instead of value - underlying helper for the `<Index>` control flow
  *
  * similar to `Array.prototype.map`, but gets the value as an accessor, transforms only changed items of the original arrays anew and returns an accessor.
  *

package/types/reactive/observable.d.ts

@@ -18,7 +18,7 @@ export type ObservableObserver<T> =
       complete?: (v: boolean) => void;
     };
 /**
- * creates a simple observable from a signal's accessor to be used with the `from` operator of observable libraries like e.g. rxjs
+ * Creates a simple observable from a signal's accessor to be used with the `from` operator of observable libraries like e.g. rxjs
  * ```typescript
  * import { from } from "rxjs";
  * const [s, set] = createSignal(0);

package/types/reactive/signal.d.ts

@@ -471,7 +471,7 @@ export interface OnOptions {
   defer?: boolean;
 }
 /**
- * on - make dependencies of a computation explicit
+ * Makes dependencies of a computation explicit
  * ```typescript
  * export function on<S, U>(
  *   deps: Accessor<S> | AccessorArray<S>,
@@ -513,14 +513,14 @@ export declare function on<S, Next extends Prev, Prev = Next>(
       }
 ): EffectFunction<undefined | NoInfer<Next>>;
 /**
- * onMount - run an effect only after initial render on mount
+ * Runs an effect only after initial render on mount
  * @param fn an effect that should run only once on mount
  *
  * @description https://www.solidjs.com/docs/latest/api#onmount
  */
 export declare function onMount(fn: () => void): void;
 /**
- * onCleanup - run an effect once before the reactive scope is disposed
+ * Runs an effect once before the reactive scope is disposed
  * @param fn an effect that should run only once on cleanup
  *
  * @returns the same {@link fn} function that was passed in
@@ -529,7 +529,7 @@ export declare function onMount(fn: () => void): void;
  */
 export declare function onCleanup<T extends () => any>(fn: T): T;
 /**
- * catchError - run an effect whenever an error is thrown within the context of the child scopes
+ * Runs an effect whenever an error is thrown within the context of the child scopes
  * @param fn boundary for the error
  * @param handler an error handler that receives the error
  *
@@ -545,6 +545,7 @@ export declare function enableScheduling(scheduler?: typeof requestCallback): vo
 /**
  * ```typescript
  * export function startTransition(fn: () => void) => Promise<void>
+ * ```
  *
  * @description https://www.solidjs.com/docs/latest/api#usetransition
  */
@@ -602,7 +603,7 @@ export declare function createContext<T>(
 ): Context<T | undefined>;
 export declare function createContext<T>(defaultValue: T, options?: EffectOptions): Context<T>;
 /**
- * use a context to receive a scoped state from a parent's Context.Provider
+ * Uses a context to receive a scoped state from a parent's Context.Provider
  *
  * @param context Context object made by `createContext`
  * @returns the current or `defaultValue`, if present

package/types/render/Suspense.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from "../jsx.js";
 /**
- * **[experimental]** controls the order in which suspended content is rendered
+ * **[experimental]** Controls the order in which suspended content is rendered
  *
  * @description https://www.solidjs.com/docs/latest/api#suspenselist-experimental
  */
@@ -10,7 +10,7 @@ export declare function SuspenseList(props: {
   tail?: "collapsed" | "hidden";
 }): JSX.Element;
 /**
- * tracks all resources inside a component and renders a fallback until they are all resolved
+ * Tracks all resources inside a component and renders a fallback until they are all resolved
  * ```typescript
  * const AsyncComponent = lazy(() => import('./component'));
  *

package/types/render/flow.d.ts

@@ -1,7 +1,7 @@
 import { Accessor } from "../reactive/signal.js";
 import type { JSX } from "../jsx.js";
 /**
- * creates a list elements from a list
+ * Creates a list elements from a list
  *
  * it receives a map function as its child that receives a list element and an accessor with the index and returns a JSX-Element; if the list is empty, an optional fallback is returned:
  * ```typescript
@@ -60,7 +60,7 @@ export declare function Show<
   children: JSX.Element | RequiredParameter<TRenderFunction>;
 }): JSX.Element;
 /**
- * switches between content based on mutually exclusive conditions
+ * Switches between content based on mutually exclusive conditions
  * ```typescript
  * <Switch fallback={<FourOhFour />}>
  *   <Match when={state.route === 'home'}>
@@ -83,7 +83,7 @@ export type MatchProps<T> = {
   children: JSX.Element | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => JSX.Element);
 };
 /**
- * selects a content based on condition when inside a `<Switch>` control flow
+ * Selects a content based on condition when inside a `<Switch>` control flow
  * ```typescript
  * <Match when={condition()}>
  *   <Content/>
@@ -109,7 +109,7 @@ export declare function Match<
 }): JSX.Element;
 export declare function resetErrorBoundaries(): void;
 /**
- * catches uncaught errors inside components and renders a fallback content
+ * Catches uncaught errors inside components and renders a fallback content
  *
  * Also supports a callback form that passes the error and a reset function:
  * ```typescript

package/web/dist/dev.cjs

@@ -40,7 +40,7 @@ function getPropAlias(prop, tagName) {
 }
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
-"altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
+"altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
@@ -151,18 +151,19 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
-  !solidJs.sharedConfig.context && (node[name] = value);
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
+  node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (solidJs.sharedConfig.context) return;
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
-  if (solidJs.sharedConfig.context) return;
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
 function className(node, value) {
-  if (solidJs.sharedConfig.context) return;
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute("class");else node.className = value;
 }
 function addEventListener(node, name, handler, delegate) {
@@ -221,7 +222,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
   if (!skipChildren) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  solidJs.createRenderEffect(() => props.ref && props.ref(node));
+  solidJs.createRenderEffect(() => typeof props.ref === "function" ? use(props.ref, node) : props.ref = node);
   solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
@@ -366,7 +367,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (forceProp) {
       prop = prop.slice(5);
       isProp = true;
-    } else if (solidJs.sharedConfig.context) return value;
+    } else if (!!solidJs.sharedConfig.context && node.isConnected) return value;
     if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
@@ -401,7 +402,8 @@ function eventHandler(e) {
   }
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
-  if (solidJs.sharedConfig.context) {
+  const hydrating = !!solidJs.sharedConfig.context && parent.isConnected;
+  if (hydrating) {
     !current && (current = [...parent.childNodes]);
     let cleaned = [];
     for (let i = 0; i < current.length; i++) {
@@ -416,7 +418,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     multi = marker !== undefined;
   parent = multi && current[0] && current[0].parentNode || parent;
   if (t === "string" || t === "number") {
-    if (solidJs.sharedConfig.context) return current;
+    if (hydrating) return current;
     if (t === "number") value = value.toString();
     if (multi) {
       let node = current[0];
@@ -430,7 +432,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       } else current = parent.textContent = value;
     }
   } else if (value == null || t === "boolean") {
-    if (solidJs.sharedConfig.context) return current;
+    if (hydrating) return current;
     current = cleanChildren(parent, current, marker);
   } else if (t === "function") {
     solidJs.createRenderEffect(() => {
@@ -446,7 +448,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       solidJs.createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
-    if (solidJs.sharedConfig.context) {
+    if (hydrating) {
       if (!array.length) return current;
       if (marker === undefined) return [...parent.childNodes];
       let node = array[0];
@@ -467,7 +469,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value.nodeType) {
-    if (solidJs.sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
+    if (hydrating && value.parentNode) return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
       cleanChildren(parent, current, null, value);

package/web/dist/dev.js

@@ -153,6 +153,7 @@ const SVGElements = /*#__PURE__*/ new Set([
   "feDiffuseLighting",
   "feDisplacementMap",
   "feDistantLight",
+  "feDropShadow",
   "feFlood",
   "feFuncA",
   "feFuncB",
@@ -604,20 +605,21 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
-  !sharedConfig.context && (node[name] = value);
+  if (!!sharedConfig.context && node.isConnected) return;
+  node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (sharedConfig.context) return;
+  if (!!sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute(name);
   else node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
-  if (sharedConfig.context) return;
+  if (!!sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttributeNS(namespace, name);
   else node.setAttributeNS(namespace, name, value);
 }
 function className(node, value) {
-  if (sharedConfig.context) return;
+  if (!!sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute("class");
   else node.className = value;
 }
@@ -679,7 +681,9 @@ function spread(node, props = {}, isSVG, skipChildren) {
       () => (prevProps.children = insertExpression(node, props.children, prevProps.children))
     );
   }
-  createRenderEffect(() => props.ref && props.ref(node));
+  createRenderEffect(() =>
+    typeof props.ref === "function" ? use(props.ref, node) : (props.ref = node)
+  );
   createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
@@ -830,7 +834,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (forceProp) {
       prop = prop.slice(5);
       isProp = true;
-    } else if (sharedConfig.context) return value;
+    } else if (!!sharedConfig.context && node.isConnected) return value;
     if (prop === "class" || prop === "className") className(node, value);
     else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
     else node[propAlias || prop] = value;
@@ -868,7 +872,8 @@ function eventHandler(e) {
   }
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
-  if (sharedConfig.context) {
+  const hydrating = !!sharedConfig.context && parent.isConnected;
+  if (hydrating) {
     !current && (current = [...parent.childNodes]);
     let cleaned = [];
     for (let i = 0; i < current.length; i++) {
@@ -884,7 +889,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     multi = marker !== undefined;
   parent = (multi && current[0] && current[0].parentNode) || parent;
   if (t === "string" || t === "number") {
-    if (sharedConfig.context) return current;
+    if (hydrating) return current;
     if (t === "number") value = value.toString();
     if (multi) {
       let node = current[0];
@@ -898,7 +903,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       } else current = parent.textContent = value;
     }
   } else if (value == null || t === "boolean") {
-    if (sharedConfig.context) return current;
+    if (hydrating) return current;
     current = cleanChildren(parent, current, marker);
   } else if (t === "function") {
     createRenderEffect(() => {
@@ -914,7 +919,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       createRenderEffect(() => (current = insertExpression(parent, array, current, marker, true)));
       return () => current;
     }
-    if (sharedConfig.context) {
+    if (hydrating) {
       if (!array.length) return current;
       if (marker === undefined) return [...parent.childNodes];
       let node = array[0];
@@ -935,7 +940,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value.nodeType) {
-    if (sharedConfig.context && value.parentNode) return (current = multi ? [value] : value);
+    if (hydrating && value.parentNode) return (current = multi ? [value] : value);
     if (Array.isArray(current)) {
       if (multi) return (current = cleanChildren(parent, current, marker, value));
       cleanChildren(parent, current, null, value);

package/web/dist/web.cjs

@@ -40,7 +40,7 @@ function getPropAlias(prop, tagName) {
 }
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
-"altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
+"altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
@@ -147,18 +147,19 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
-  !solidJs.sharedConfig.context && (node[name] = value);
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
+  node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (solidJs.sharedConfig.context) return;
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute(name);else node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
-  if (solidJs.sharedConfig.context) return;
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
 function className(node, value) {
-  if (solidJs.sharedConfig.context) return;
+  if (!!solidJs.sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute("class");else node.className = value;
 }
 function addEventListener(node, name, handler, delegate) {
@@ -217,7 +218,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
   if (!skipChildren) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  solidJs.createRenderEffect(() => props.ref && props.ref(node));
+  solidJs.createRenderEffect(() => typeof props.ref === "function" ? use(props.ref, node) : props.ref = node);
   solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
@@ -361,7 +362,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (forceProp) {
       prop = prop.slice(5);
       isProp = true;
-    } else if (solidJs.sharedConfig.context) return value;
+    } else if (!!solidJs.sharedConfig.context && node.isConnected) return value;
     if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
@@ -396,7 +397,8 @@ function eventHandler(e) {
   }
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
-  if (solidJs.sharedConfig.context) {
+  const hydrating = !!solidJs.sharedConfig.context && parent.isConnected;
+  if (hydrating) {
     !current && (current = [...parent.childNodes]);
     let cleaned = [];
     for (let i = 0; i < current.length; i++) {
@@ -411,7 +413,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     multi = marker !== undefined;
   parent = multi && current[0] && current[0].parentNode || parent;
   if (t === "string" || t === "number") {
-    if (solidJs.sharedConfig.context) return current;
+    if (hydrating) return current;
     if (t === "number") value = value.toString();
     if (multi) {
       let node = current[0];
@@ -425,7 +427,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       } else current = parent.textContent = value;
     }
   } else if (value == null || t === "boolean") {
-    if (solidJs.sharedConfig.context) return current;
+    if (hydrating) return current;
     current = cleanChildren(parent, current, marker);
   } else if (t === "function") {
     solidJs.createRenderEffect(() => {
@@ -441,7 +443,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       solidJs.createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
-    if (solidJs.sharedConfig.context) {
+    if (hydrating) {
       if (!array.length) return current;
       if (marker === undefined) return [...parent.childNodes];
       let node = array[0];
@@ -462,7 +464,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value.nodeType) {
-    if (solidJs.sharedConfig.context && value.parentNode) return current = multi ? [value] : value;
+    if (hydrating && value.parentNode) return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi) return current = cleanChildren(parent, current, marker, value);
       cleanChildren(parent, current, null, value);

package/web/dist/web.js

@@ -152,6 +152,7 @@ const SVGElements = /*#__PURE__*/ new Set([
   "feDiffuseLighting",
   "feDisplacementMap",
   "feDistantLight",
+  "feDropShadow",
   "feFlood",
   "feFuncA",
   "feFuncB",
@@ -594,20 +595,21 @@ function clearDelegatedEvents(document = window.document) {
   }
 }
 function setProperty(node, name, value) {
-  !sharedConfig.context && (node[name] = value);
+  if (!!sharedConfig.context && node.isConnected) return;
+  node[name] = value;
 }
 function setAttribute(node, name, value) {
-  if (sharedConfig.context) return;
+  if (!!sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute(name);
   else node.setAttribute(name, value);
 }
 function setAttributeNS(node, namespace, name, value) {
-  if (sharedConfig.context) return;
+  if (!!sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttributeNS(namespace, name);
   else node.setAttributeNS(namespace, name, value);
 }
 function className(node, value) {
-  if (sharedConfig.context) return;
+  if (!!sharedConfig.context && node.isConnected) return;
   if (value == null) node.removeAttribute("class");
   else node.className = value;
 }
@@ -669,7 +671,9 @@ function spread(node, props = {}, isSVG, skipChildren) {
       () => (prevProps.children = insertExpression(node, props.children, prevProps.children))
     );
   }
-  createRenderEffect(() => props.ref && props.ref(node));
+  createRenderEffect(() =>
+    typeof props.ref === "function" ? use(props.ref, node) : (props.ref = node)
+  );
   createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
@@ -818,7 +822,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     if (forceProp) {
       prop = prop.slice(5);
       isProp = true;
-    } else if (sharedConfig.context) return value;
+    } else if (!!sharedConfig.context && node.isConnected) return value;
     if (prop === "class" || prop === "className") className(node, value);
     else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;
     else node[propAlias || prop] = value;
@@ -856,7 +860,8 @@ function eventHandler(e) {
   }
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
-  if (sharedConfig.context) {
+  const hydrating = !!sharedConfig.context && parent.isConnected;
+  if (hydrating) {
     !current && (current = [...parent.childNodes]);
     let cleaned = [];
     for (let i = 0; i < current.length; i++) {
@@ -872,7 +877,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     multi = marker !== undefined;
   parent = (multi && current[0] && current[0].parentNode) || parent;
   if (t === "string" || t === "number") {
-    if (sharedConfig.context) return current;
+    if (hydrating) return current;
     if (t === "number") value = value.toString();
     if (multi) {
       let node = current[0];
@@ -886,7 +891,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       } else current = parent.textContent = value;
     }
   } else if (value == null || t === "boolean") {
-    if (sharedConfig.context) return current;
+    if (hydrating) return current;
     current = cleanChildren(parent, current, marker);
   } else if (t === "function") {
     createRenderEffect(() => {
@@ -902,7 +907,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       createRenderEffect(() => (current = insertExpression(parent, array, current, marker, true)));
       return () => current;
     }
-    if (sharedConfig.context) {
+    if (hydrating) {
       if (!array.length) return current;
       if (marker === undefined) return [...parent.childNodes];
       let node = array[0];
@@ -923,7 +928,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value.nodeType) {
-    if (sharedConfig.context && value.parentNode) return (current = multi ? [value] : value);
+    if (hydrating && value.parentNode) return (current = multi ? [value] : value);
     if (Array.isArray(current)) {
       if (multi) return (current = cleanChildren(parent, current, marker, value));
       cleanChildren(parent, current, null, value);

package/web/types/index.d.ts

@@ -17,7 +17,7 @@ export declare const isServer: boolean;
 export declare const isDev: boolean;
 export declare const hydrate: typeof hydrateCore;
 /**
- * renders components somewhere else in the DOM
+ * Renders components somewhere else in the DOM
  *
  * Useful for inserting modals and tooltips outside of an cropping layout. If no mount point is given, the portal is inserted in document.body; it is wrapped in a `<div>` unless the target is document.head or `isSVG` is true. setting `useShadow` to true places the element in a shadow root to isolate styles.
  *
@@ -45,7 +45,7 @@ export type DynamicProps<T extends ValidComponent, P = ComponentProps<T>> = {
   component: T | undefined;
 };
 /**
- * renders an arbitrary custom or native component and passes the other props
+ * Renders an arbitrary custom or native component and passes the other props
  * ```typescript
  * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
  * ```