@solidjs/web - npm Package Compare versions

Comparing version 2.0.0-beta.15 to 2.0.0-beta.16

dist/dev.cjs

@@ -63,5 +63,5 @@ 'use strict';
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
@@ -339,16 +339,37 @@ const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return nodeStyle.cssText = value;
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  let applied = node._$styles;
+  if (!applied) {
+    applied = node._$styles = prev ? {
+      ...prev
+    } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
@@ -392,2 +413,17 @@ function setStyleProperty(node, name, value) {
 }
+function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+const SCOPE_OPTIONS = {
+  scope: true
+};
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 8 && nodes[i].nodeValue === "!$") nodes[i].remove();else nodes[j++] = nodes[i];
+  }
+  nodes.length = j;
+  return nodes;
+}
 function insert(parent, accessor, marker, initial, options) {
@@ -399,9 +435,3 @@ const multi = marker !== undefined;
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
-      }
-      initial.length = j;
-    }
+    if (Array.isArray(initial)) stripTextSeparators(initial);
   }
@@ -422,6 +452,30 @@ if (typeof accessor !== "function") {
   let current = initial;
+  function reclaimSwappedRegion() {
+    if (!solidJs.sharedConfig.hydrating || !current || !parent.isConnected) return;
+    const first = Array.isArray(current) ? current[0] : current;
+    if (!first || !first.nodeType || first.isConnected) return;
+    let nodes;
+    if (marker) {
+      nodes = [];
+      let node = marker.previousSibling,
+        depth = 0;
+      while (node) {
+        if (node.nodeType === 8) {
+          const v = node.nodeValue;
+          if (v === "/") depth++;else if (v === "$") {
+            if (depth === 0) break;
+            depth--;
+          }
+        }
+        nodes.unshift(node);
+        node = node.previousSibling;
+      }
+    } else nodes = [...parent.childNodes];
+    current = stripTextSeparators(nodes);
+  }
   effect(prev => {
+    reclaimSwappedRegion();
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
-    effect(() => normalize(value, current, multi), inner => {
+    effect(() => (reclaimSwappedRegion(), normalize(value, current, multi)), inner => {
       insertExpression(parent, inner, current, marker);
@@ -440,3 +494,7 @@ current = inner;
     host && tagHost(current, host);
-  }, options);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
@@ -470,2 +528,5 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
         hy.modules[moduleUrl] = mod;
+      }, err => {
+        delete hy.loading[moduleUrl];
+        throw err;
       });
@@ -528,4 +589,7 @@ }
         }
-      }, () => {
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
         solidJs.sharedConfig.hydrating = false;
+        solidJs.sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
       });
@@ -642,13 +706,28 @@ return () => disposer && disposer();
         events.shift();
-        let match;
+        let matchContainer, matchState, matchDistance, matches;
         for (const [container, state] of delegatedContainers) {
           if (!state.handlers.has(e.type)) continue;
           const entry = findOwner(e.target, state);
-          if (entry && (!match || entry.distance < match.distance)) match = {
-            container,
-            state,
-            distance: entry.distance
-          };
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches) matches = [{
+              container: matchContainer,
+              state: matchState,
+              distance: matchDistance
+            }];
+            matches.push({
+              container,
+              state,
+              distance: entry.distance
+            });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
         }
-        if (match) eventHandler(e, match.container, match.state);
+        if (matches) {
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++) eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
@@ -724,7 +803,12 @@ if (solidJs.sharedConfig.done) {
   }
-  if (e[$$EVENT_OWNER]) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
+  }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
   e[$$EVENT_OWNER] = owner || true;
-  let node = e.target;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
@@ -759,3 +843,6 @@ const oriTarget = e.target;
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    if (resumeNode === e.target) node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
@@ -945,5 +1032,6 @@ if (path.length) {
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
@@ -1095,2 +1183,3 @@ }
 exports.runHydrationEvents = runHydrationEvents;
+exports.scope = scope;
 exports.setAttribute = setAttribute;
@@ -1097,0 +1186,0 @@ exports.setAttributeNS = setAttributeNS;

dist/dev.js

@@ -62,5 +62,5 @@ import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, getOwner, createEffect, $DEVCOMP, enableHydration, enforceLoadingBoundary, flush } from 'solid-js';
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
@@ -338,16 +338,37 @@ const memo = fn => createMemo(() => fn(), syncOptions);
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return nodeStyle.cssText = value;
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  let applied = node._$styles;
+  if (!applied) {
+    applied = node._$styles = prev ? {
+      ...prev
+    } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
@@ -391,2 +412,17 @@ function setStyleProperty(node, name, value) {
 }
+function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+const SCOPE_OPTIONS = {
+  scope: true
+};
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 8 && nodes[i].nodeValue === "!$") nodes[i].remove();else nodes[j++] = nodes[i];
+  }
+  nodes.length = j;
+  return nodes;
+}
 function insert(parent, accessor, marker, initial, options) {
@@ -398,9 +434,3 @@ const multi = marker !== undefined;
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
-      }
-      initial.length = j;
-    }
+    if (Array.isArray(initial)) stripTextSeparators(initial);
   }
@@ -421,6 +451,30 @@ if (typeof accessor !== "function") {
   let current = initial;
+  function reclaimSwappedRegion() {
+    if (!sharedConfig.hydrating || !current || !parent.isConnected) return;
+    const first = Array.isArray(current) ? current[0] : current;
+    if (!first || !first.nodeType || first.isConnected) return;
+    let nodes;
+    if (marker) {
+      nodes = [];
+      let node = marker.previousSibling,
+        depth = 0;
+      while (node) {
+        if (node.nodeType === 8) {
+          const v = node.nodeValue;
+          if (v === "/") depth++;else if (v === "$") {
+            if (depth === 0) break;
+            depth--;
+          }
+        }
+        nodes.unshift(node);
+        node = node.previousSibling;
+      }
+    } else nodes = [...parent.childNodes];
+    current = stripTextSeparators(nodes);
+  }
   effect(prev => {
+    reclaimSwappedRegion();
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
-    effect(() => normalize(value, current, multi), inner => {
+    effect(() => (reclaimSwappedRegion(), normalize(value, current, multi)), inner => {
       insertExpression(parent, inner, current, marker);
@@ -439,3 +493,7 @@ current = inner;
     host && tagHost(current, host);
-  }, options);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
@@ -469,2 +527,5 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
         hy.modules[moduleUrl] = mod;
+      }, err => {
+        delete hy.loading[moduleUrl];
+        throw err;
       });
@@ -527,4 +588,7 @@ }
         }
-      }, () => {
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
         sharedConfig.hydrating = false;
+        sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
       });
@@ -641,13 +705,28 @@ return () => disposer && disposer();
         events.shift();
-        let match;
+        let matchContainer, matchState, matchDistance, matches;
         for (const [container, state] of delegatedContainers) {
           if (!state.handlers.has(e.type)) continue;
           const entry = findOwner(e.target, state);
-          if (entry && (!match || entry.distance < match.distance)) match = {
-            container,
-            state,
-            distance: entry.distance
-          };
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches) matches = [{
+              container: matchContainer,
+              state: matchState,
+              distance: matchDistance
+            }];
+            matches.push({
+              container,
+              state,
+              distance: entry.distance
+            });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
         }
-        if (match) eventHandler(e, match.container, match.state);
+        if (matches) {
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++) eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
@@ -723,7 +802,12 @@ if (sharedConfig.done) {
   }
-  if (e[$$EVENT_OWNER]) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
+  }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
   e[$$EVENT_OWNER] = owner || true;
-  let node = e.target;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
@@ -758,3 +842,6 @@ const oriTarget = e.target;
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    if (resumeNode === e.target) node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
@@ -944,5 +1031,6 @@ if (path.length) {
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
@@ -994,2 +1082,2 @@ }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };

dist/server.cjs

@@ -63,5 +63,5 @@ 'use strict';
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
@@ -98,5 +98,11 @@ const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
+function joinAssetPath(base, file) {
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(file)) return file;
+  if (typeof base !== "string" || !base) base = "/";
+  if (base[base.length - 1] !== "/") base += "/";
+  return base + (file[0] === "/" ? file.slice(1) : file);
+}
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
-  const base = manifest._base || "/";
+  const base = manifest._base;
   const entry = manifest[moduleUrl];
@@ -112,4 +118,4 @@ if (!entry) return null;
     if (!e) return;
-    js.push(base + e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
+    js.push(joinAssetPath(base, e.file));
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(joinAssetPath(base, e.css[i]));
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
@@ -503,34 +509,37 @@ };
   });
-  function doShell() {
-    if (shellCompleted) return;
-    if (rootHoles) {
-      const pending = [];
-      for (const {
-        id,
-        fn
-      } of rootHoles) {
-        const marker = `<!--rh${id}-->`;
-        const res = resolveSSRNode(fn);
-        if (!res.h.length) {
-          html = html.replace(marker, res.t[0]);
-        } else {
-          let out = res.t[0];
-          for (let j = 0; j < res.h.length; j++) {
-            const newId = nextHoleId++;
-            pending.push({
-              id: newId,
-              fn: res.h[j]
-            });
-            out += `<!--rh${newId}-->` + res.t[j + 1];
-          }
-          html = html.replace(marker, out);
-          for (const p of res.p) blockingPromises.add(p);
+  function resolveRootHoles() {
+    if (!rootHoles) return true;
+    const pending = [];
+    for (const {
+      id,
+      fn
+    } of rootHoles) {
+      const marker = `<!--rh${id}-->`;
+      const res = resolveSSRNode(fn);
+      if (!res.h.length) {
+        html = html.replace(marker, res.t[0]);
+      } else {
+        let out = res.t[0];
+        for (let j = 0; j < res.h.length; j++) {
+          const newId = nextHoleId++;
+          pending.push({
+            id: newId,
+            fn: res.h[j]
+          });
+          out += `<!--rh${newId}-->` + res.t[j + 1];
         }
+        html = html.replace(marker, out);
+        for (const p of res.p) blockingPromises.add(p);
       }
-      if (pending.length) {
-        rootHoles = pending;
-        return;
-      }
-      rootHoles = null;
     }
+    if (pending.length) {
+      rootHoles = pending;
+      return false;
+    }
+    rootHoles = null;
+    return true;
+  }
+  function doShell() {
+    if (shellCompleted) return;
+    if (!resolveRootHoles()) return;
     solidJs.sharedConfig.context = context;
@@ -567,3 +576,11 @@ html = injectAssets(context.assets, html);
       } else onCompleteAll = complete;
-      queue(flushEnd);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            if (!resolveRootHoles()) return flush();
+            queue(flushEnd);
+          });
+        });
+      }
+      flush();
     },
@@ -949,25 +966,2 @@ pipe(w) {
 }
-function mergeProps(...sources) {
-  const target = {};
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i];
-    if (typeof source === "function") source = source();
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source);
-      for (const key in descriptors) {
-        if (key in target) continue;
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              const v = (sources[i] || {})[key];
-              if (v !== undefined) return v;
-            }
-          }
-        });
-      }
-    }
-  }
-  return target;
-}
 function getHydrationKey() {
@@ -1121,2 +1115,6 @@ const hydrate = solidJs.sharedConfig.context;
     };
+    if (node.t === undefined) {
+      console.warn(`Unrecognized value. Skipped inserting`, node);
+      return "";
+    }
     return Array.isArray(node.t) ? node.t[0] : node.t;
@@ -1160,3 +1158,5 @@ }
       }
-    } else result.t[result.t.length - 1] += node.t;
+    } else if (node.t !== undefined) {
+      result.t[result.t.length - 1] += node.t;
+    } else console.warn(`Unrecognized value. Skipped inserting`, node);
   } else if (t === "function") {
@@ -1198,11 +1198,34 @@ try {
   return props => {
-    const memoOwner = solidJs.createOwner();
-    return solidJs.runWithOwner(memoOwner, () => {
-      const comp = source(),
-        t = typeof comp;
-      if (comp) {
-        if (t === "function") return comp(props);else if (t === "string") {
-          return ssrElement(comp, props, undefined, true);
+    const comp = source();
+    let p;
+    let settled = false;
+    let value;
+    let error;
+    if (comp && typeof comp.then === "function") {
+      p = comp;
+      p.then(v => {
+        value = v;
+        settled = true;
+      }, err => {
+        error = err;
+        settled = true;
+      });
+      const ctx = solidJs.sharedConfig.context;
+      if (ctx?.async) ctx.block(p.then(() => {}, () => {}));
+    }
+    return solidJs.createMemo(() => {
+      let c = comp;
+      if (p) {
+        if (!settled) throw new solidJs.NotReadyError(p);
+        if (error) throw error;
+        c = value;
+      }
+      if (c) {
+        if (typeof c === "function") return c(props);
+        if (typeof c === "string") {
+          return ssrElement(c, props, undefined, true);
         }
       }
+    }, {
+      sync: true
     });
@@ -1267,2 +1290,10 @@ };
 });
+Object.defineProperty(exports, "mergeProps", {
+  enumerable: true,
+  get: function () { return solidJs.merge; }
+});
+Object.defineProperty(exports, "scope", {
+  enumerable: true,
+  get: function () { return solidJs.ssrScope; }
+});
 Object.defineProperty(exports, "untrack", {
@@ -1308,3 +1339,2 @@ enumerable: true,
 exports.memo = memo;
-exports.mergeProps = mergeProps;
 exports.ref = notSup;
@@ -1311,0 +1341,0 @@ exports.registerDelegatedContainer = notSup;

dist/server.js

@@ -1,3 +0,3 @@
-import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, getOwner, runWithOwner, createComponent, omit, getNextChildId, createOwner } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
+import { createRenderEffect, createMemo, sharedConfig, createRoot, ssrHandleError, getOwner, runWithOwner, createComponent, omit, getNextChildId, NotReadyError } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, ssrScope as scope, untrack } from 'solid-js';
 import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
@@ -62,5 +62,5 @@ import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
@@ -97,5 +97,11 @@ const memo = fn => createMemo(() => fn(), syncOptions);
 
+function joinAssetPath(base, file) {
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(file)) return file;
+  if (typeof base !== "string" || !base) base = "/";
+  if (base[base.length - 1] !== "/") base += "/";
+  return base + (file[0] === "/" ? file.slice(1) : file);
+}
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
-  const base = manifest._base || "/";
+  const base = manifest._base;
   const entry = manifest[moduleUrl];
@@ -111,4 +117,4 @@ if (!entry) return null;
     if (!e) return;
-    js.push(base + e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
+    js.push(joinAssetPath(base, e.file));
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(joinAssetPath(base, e.css[i]));
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
@@ -502,34 +508,37 @@ };
   });
-  function doShell() {
-    if (shellCompleted) return;
-    if (rootHoles) {
-      const pending = [];
-      for (const {
-        id,
-        fn
-      } of rootHoles) {
-        const marker = `<!--rh${id}-->`;
-        const res = resolveSSRNode(fn);
-        if (!res.h.length) {
-          html = html.replace(marker, res.t[0]);
-        } else {
-          let out = res.t[0];
-          for (let j = 0; j < res.h.length; j++) {
-            const newId = nextHoleId++;
-            pending.push({
-              id: newId,
-              fn: res.h[j]
-            });
-            out += `<!--rh${newId}-->` + res.t[j + 1];
-          }
-          html = html.replace(marker, out);
-          for (const p of res.p) blockingPromises.add(p);
+  function resolveRootHoles() {
+    if (!rootHoles) return true;
+    const pending = [];
+    for (const {
+      id,
+      fn
+    } of rootHoles) {
+      const marker = `<!--rh${id}-->`;
+      const res = resolveSSRNode(fn);
+      if (!res.h.length) {
+        html = html.replace(marker, res.t[0]);
+      } else {
+        let out = res.t[0];
+        for (let j = 0; j < res.h.length; j++) {
+          const newId = nextHoleId++;
+          pending.push({
+            id: newId,
+            fn: res.h[j]
+          });
+          out += `<!--rh${newId}-->` + res.t[j + 1];
         }
+        html = html.replace(marker, out);
+        for (const p of res.p) blockingPromises.add(p);
       }
-      if (pending.length) {
-        rootHoles = pending;
-        return;
-      }
-      rootHoles = null;
     }
+    if (pending.length) {
+      rootHoles = pending;
+      return false;
+    }
+    rootHoles = null;
+    return true;
+  }
+  function doShell() {
+    if (shellCompleted) return;
+    if (!resolveRootHoles()) return;
     sharedConfig.context = context;
@@ -566,3 +575,11 @@ html = injectAssets(context.assets, html);
       } else onCompleteAll = complete;
-      queue(flushEnd);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            if (!resolveRootHoles()) return flush();
+            queue(flushEnd);
+          });
+        });
+      }
+      flush();
     },
@@ -948,25 +965,2 @@ pipe(w) {
 }
-function mergeProps(...sources) {
-  const target = {};
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i];
-    if (typeof source === "function") source = source();
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source);
-      for (const key in descriptors) {
-        if (key in target) continue;
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              const v = (sources[i] || {})[key];
-              if (v !== undefined) return v;
-            }
-          }
-        });
-      }
-    }
-  }
-  return target;
-}
 function getHydrationKey() {
@@ -1120,2 +1114,6 @@ const hydrate = sharedConfig.context;
     };
+    if (node.t === undefined) {
+      console.warn(`Unrecognized value. Skipped inserting`, node);
+      return "";
+    }
     return Array.isArray(node.t) ? node.t[0] : node.t;
@@ -1159,3 +1157,5 @@ }
       }
-    } else result.t[result.t.length - 1] += node.t;
+    } else if (node.t !== undefined) {
+      result.t[result.t.length - 1] += node.t;
+    } else console.warn(`Unrecognized value. Skipped inserting`, node);
   } else if (t === "function") {
@@ -1197,11 +1197,34 @@ try {
   return props => {
-    const memoOwner = createOwner();
-    return runWithOwner(memoOwner, () => {
-      const comp = source(),
-        t = typeof comp;
-      if (comp) {
-        if (t === "function") return comp(props);else if (t === "string") {
-          return ssrElement(comp, props, undefined, true);
+    const comp = source();
+    let p;
+    let settled = false;
+    let value;
+    let error;
+    if (comp && typeof comp.then === "function") {
+      p = comp;
+      p.then(v => {
+        value = v;
+        settled = true;
+      }, err => {
+        error = err;
+        settled = true;
+      });
+      const ctx = sharedConfig.context;
+      if (ctx?.async) ctx.block(p.then(() => {}, () => {}));
+    }
+    return createMemo(() => {
+      let c = comp;
+      if (p) {
+        if (!settled) throw new NotReadyError(p);
+        if (error) throw error;
+        c = value;
+      }
+      if (c) {
+        if (typeof c === "function") return c(props);
+        if (typeof c === "string") {
+          return ssrElement(c, props, undefined, true);
         }
       }
+    }, {
+      sync: true
     });
@@ -1218,2 +1241,2 @@ };
 
-export { Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEvent, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, notSup as getDelegatedRoot, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, mergeProps, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useAssets };
+export { Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, notSup as addEvent, applyRef, notSup as assign, notSup as className, notSup as delegateEvents, dynamic, notSup as dynamicProperty, effect, escape, generateHydrationScript, getAssets, notSup as getDelegatedRoot, getHydrationKey, notSup as getNextElement, notSup as getNextMarker, notSup as getNextMatch, getRequestEvent, notSup as hydrate, notSup as insert, isDev, isServer, memo, notSup as ref, notSup as registerDelegatedContainer, notSup as registerDelegatedRoot, notSup as render, renderToStream, renderToString, renderToStringAsync, notSup as runHydrationEvents, notSup as setAttribute, notSup as setAttributeNS, notSup as setProperty, notSup as setStyleProperty, notSup as spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, notSup as style, notSup as template, notSup as unregisterDelegatedContainer, notSup as unregisterDelegatedRoot, useAssets };

dist/web.cjs

@@ -63,5 +63,5 @@ 'use strict';
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
@@ -334,16 +334,37 @@ const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return nodeStyle.cssText = value;
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  let applied = node._$styles;
+  if (!applied) {
+    applied = node._$styles = prev ? {
+      ...prev
+    } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
@@ -387,2 +408,17 @@ function setStyleProperty(node, name, value) {
 }
+function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+const SCOPE_OPTIONS = {
+  scope: true
+};
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 8 && nodes[i].nodeValue === "!$") nodes[i].remove();else nodes[j++] = nodes[i];
+  }
+  nodes.length = j;
+  return nodes;
+}
 function insert(parent, accessor, marker, initial, options) {
@@ -394,9 +430,3 @@ const multi = marker !== undefined;
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
-      }
-      initial.length = j;
-    }
+    if (Array.isArray(initial)) stripTextSeparators(initial);
   }
@@ -417,6 +447,30 @@ if (typeof accessor !== "function") {
   let current = initial;
+  function reclaimSwappedRegion() {
+    if (!solidJs.sharedConfig.hydrating || !current || !parent.isConnected) return;
+    const first = Array.isArray(current) ? current[0] : current;
+    if (!first || !first.nodeType || first.isConnected) return;
+    let nodes;
+    if (marker) {
+      nodes = [];
+      let node = marker.previousSibling,
+        depth = 0;
+      while (node) {
+        if (node.nodeType === 8) {
+          const v = node.nodeValue;
+          if (v === "/") depth++;else if (v === "$") {
+            if (depth === 0) break;
+            depth--;
+          }
+        }
+        nodes.unshift(node);
+        node = node.previousSibling;
+      }
+    } else nodes = [...parent.childNodes];
+    current = stripTextSeparators(nodes);
+  }
   effect(prev => {
+    reclaimSwappedRegion();
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
-    effect(() => normalize(value, current, multi), inner => {
+    effect(() => (reclaimSwappedRegion(), normalize(value, current, multi)), inner => {
       insertExpression(parent, inner, current, marker);
@@ -435,3 +489,7 @@ current = inner;
     host && tagHost(current, host);
-  }, options);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
@@ -465,2 +523,5 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
         hy.modules[moduleUrl] = mod;
+      }, err => {
+        delete hy.loading[moduleUrl];
+        throw err;
       });
@@ -513,4 +574,7 @@ }
         }
-      }, () => {
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
         solidJs.sharedConfig.hydrating = false;
+        solidJs.sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
       });
@@ -585,13 +649,28 @@ return () => disposer && disposer();
         events.shift();
-        let match;
+        let matchContainer, matchState, matchDistance, matches;
         for (const [container, state] of delegatedContainers) {
           if (!state.handlers.has(e.type)) continue;
           const entry = findOwner(e.target, state);
-          if (entry && (!match || entry.distance < match.distance)) match = {
-            container,
-            state,
-            distance: entry.distance
-          };
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches) matches = [{
+              container: matchContainer,
+              state: matchState,
+              distance: matchDistance
+            }];
+            matches.push({
+              container,
+              state,
+              distance: entry.distance
+            });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
         }
-        if (match) eventHandler(e, match.container, match.state);
+        if (matches) {
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++) eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
@@ -667,7 +746,12 @@ if (solidJs.sharedConfig.done) {
   }
-  if (e[$$EVENT_OWNER]) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
+  }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
   e[$$EVENT_OWNER] = owner || true;
-  let node = e.target;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
@@ -702,3 +786,6 @@ const oriTarget = e.target;
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    if (resumeNode === e.target) node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
@@ -886,5 +973,6 @@ if (path.length) {
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
@@ -1033,2 +1121,3 @@ }
 exports.runHydrationEvents = runHydrationEvents;
+exports.scope = scope;
 exports.setAttribute = setAttribute;
@@ -1035,0 +1124,0 @@ exports.setAttributeNS = setAttributeNS;

dist/web.js

@@ -62,5 +62,5 @@ import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, getOwner, createEffect, enableHydration, flush } from 'solid-js';
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
@@ -333,16 +333,37 @@ const memo = fn => createMemo(() => fn(), syncOptions);
   if (!value) {
-    if (prev) setAttribute(node, "style");
+    if (prev || node._$styles) {
+      setAttribute(node, "style");
+      node._$styles = undefined;
+    }
     return;
   }
   const nodeStyle = node.style;
-  if (typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (nodeStyle.cssText = prev = undefined);
-  prev || (prev = {});
+  if (typeof value === "string") {
+    node._$styles = undefined;
+    return nodeStyle.cssText = value;
+  }
+  if (typeof prev === "string") {
+    nodeStyle.cssText = "";
+    prev = undefined;
+  }
+  let applied = node._$styles;
+  if (!applied) {
+    applied = node._$styles = prev ? {
+      ...prev
+    } : {};
+  }
   let v, s;
+  for (s in applied) {
+    if (value[s] == null) {
+      nodeStyle.removeProperty(s);
+      delete applied[s];
+    }
+  }
   for (s in value) {
     v = value[s];
-    if (v !== prev[s]) nodeStyle.setProperty(s, v);
-    delete prev[s];
+    if (v != null && v !== applied[s]) {
+      nodeStyle.setProperty(s, v);
+      applied[s] = v;
+    }
   }
-  for (s in prev) value[s] == null && nodeStyle.removeProperty(s);
 }
@@ -386,2 +407,17 @@ function setStyleProperty(node, name, value) {
 }
+function scope(fn) {
+  fn.$s = true;
+  return fn;
+}
+const SCOPE_OPTIONS = {
+  scope: true
+};
+function stripTextSeparators(nodes) {
+  let j = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 8 && nodes[i].nodeValue === "!$") nodes[i].remove();else nodes[j++] = nodes[i];
+  }
+  nodes.length = j;
+  return nodes;
+}
 function insert(parent, accessor, marker, initial, options) {
@@ -393,9 +429,3 @@ const multi = marker !== undefined;
     if (!multi && initial === undefined && parent) initial = [...parent.childNodes];
-    if (Array.isArray(initial)) {
-      let j = 0;
-      for (let i = 0; i < initial.length; i++) {
-        if (initial[i].nodeType === 8 && initial[i].nodeValue === "!$") initial[i].remove();else initial[j++] = initial[i];
-      }
-      initial.length = j;
-    }
+    if (Array.isArray(initial)) stripTextSeparators(initial);
   }
@@ -416,6 +446,30 @@ if (typeof accessor !== "function") {
   let current = initial;
+  function reclaimSwappedRegion() {
+    if (!sharedConfig.hydrating || !current || !parent.isConnected) return;
+    const first = Array.isArray(current) ? current[0] : current;
+    if (!first || !first.nodeType || first.isConnected) return;
+    let nodes;
+    if (marker) {
+      nodes = [];
+      let node = marker.previousSibling,
+        depth = 0;
+      while (node) {
+        if (node.nodeType === 8) {
+          const v = node.nodeValue;
+          if (v === "/") depth++;else if (v === "$") {
+            if (depth === 0) break;
+            depth--;
+          }
+        }
+        nodes.unshift(node);
+        node = node.previousSibling;
+      }
+    } else nodes = [...parent.childNodes];
+    current = stripTextSeparators(nodes);
+  }
   effect(prev => {
+    reclaimSwappedRegion();
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
-    effect(() => normalize(value, current, multi), inner => {
+    effect(() => (reclaimSwappedRegion(), normalize(value, current, multi)), inner => {
       insertExpression(parent, inner, current, marker);
@@ -434,3 +488,7 @@ current = inner;
     host && tagHost(current, host);
-  }, options);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
@@ -464,2 +522,5 @@ function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
         hy.modules[moduleUrl] = mod;
+      }, err => {
+        delete hy.loading[moduleUrl];
+        throw err;
       });
@@ -512,4 +573,7 @@ }
         }
-      }, () => {
+      }, err => {
+        console.error("Hydration module preload failed, falling back to client render:", err);
         sharedConfig.hydrating = false;
+        sharedConfig.registry = undefined;
+        disposer = render$1(code, element, [...element.childNodes], options);
       });
@@ -584,13 +648,28 @@ return () => disposer && disposer();
         events.shift();
-        let match;
+        let matchContainer, matchState, matchDistance, matches;
         for (const [container, state] of delegatedContainers) {
           if (!state.handlers.has(e.type)) continue;
           const entry = findOwner(e.target, state);
-          if (entry && (!match || entry.distance < match.distance)) match = {
-            container,
-            state,
-            distance: entry.distance
-          };
+          if (!entry) continue;
+          if (matchContainer) {
+            if (!matches) matches = [{
+              container: matchContainer,
+              state: matchState,
+              distance: matchDistance
+            }];
+            matches.push({
+              container,
+              state,
+              distance: entry.distance
+            });
+          } else {
+            matchContainer = container;
+            matchState = state;
+            matchDistance = entry.distance;
+          }
         }
-        if (match) eventHandler(e, match.container, match.state);
+        if (matches) {
+          matches.sort((a, b) => a.distance - b.distance);
+          for (let i = 0; i < matches.length; i++) eventHandler(e, matches[i].container, matches[i].state);
+        } else if (matchContainer) eventHandler(e, matchContainer, matchState);
       }
@@ -666,7 +745,12 @@ if (sharedConfig.done) {
   }
-  if (e[$$EVENT_OWNER]) return;
+  const prev = e[$$EVENT_OWNER];
+  let resumeNode;
+  if (prev) {
+    if (prev === true || prev === container || !container.contains(prev)) return;
+    resumeNode = prev;
+  }
   const owner = state && (state.owners.size === 1 && state.owners.has(container) ? container : findOwner(e.target, state)?.owner);
   if (state && !owner) return;
   e[$$EVENT_OWNER] = owner || true;
-  let node = e.target;
+  let node = resumeNode || e.target;
   const key = `$$${e.type}`;
@@ -701,3 +785,6 @@ const oriTarget = e.target;
   });
-  if (e.composedPath) {
+  if (resumeNode) {
+    if (resumeNode === e.target) node = resumeNode._$host || resumeNode.parentNode || resumeNode.host;
+    if (node && node !== boundary) walkUpTree();
+  } else if (e.composedPath) {
     const path = e.composedPath();
@@ -885,5 +972,6 @@ if (path.length) {
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
@@ -932,2 +1020,2 @@ }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, SVGElements, VoidElements, addEvent, applyRef, assign, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, mergeProps, ref, registerDelegatedContainer, registerDelegatedRoot, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };

package.json

 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "author": "Ryan Carniato",
@@ -140,6 +140,6 @@ "license": "MIT",
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.15"
+    "solid-js": "^2.0.0-beta.16"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.15"
+    "solid-js": "2.0.0-beta.16"
   },
@@ -153,5 +153,5 @@ "scripts": {
     "types:clean": "rimraf types/ types-cjs/ storage/types-cjs/",
-    "types:copy-jsx": "ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./src/jsx.d.ts && ncp ../../node_modules/dom-expressions/src/jsx-properties.d.ts ./src/jsx-properties.d.ts && dom-expressions-jsx-types --input ./src/jsx.d.ts --element \"SolidElement | Node | ArrayElement\" --import 'import type { Element as SolidElement } from \"solid-js\";'",
+    "types:copy-jsx": "ncp ../../node_modules/@dom-expressions/runtime/src/jsx.d.ts ./src/jsx.d.ts && ncp ../../node_modules/@dom-expressions/runtime/src/jsx-properties.d.ts ./src/jsx-properties.d.ts && dom-expressions-jsx-types --input ./src/jsx.d.ts --element \"SolidElement | Node | ArrayElement\" --import 'import type { Element as SolidElement } from \"solid-js\";'",
     "types:web": "tsc --project ./tsconfig.build.json",
-    "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./types/server.d.ts && ncp ./src/jsx.d.ts ./types/jsx.d.ts && ncp ./src/jsx-properties.d.ts ./types/jsx-properties.d.ts",
+    "types:copy-web": "ncp ../../node_modules/@dom-expressions/runtime/src/client.d.ts ./types/client.d.ts && ncp ../../node_modules/@dom-expressions/runtime/src/server.d.ts ./types/server.d.ts && ncp ./src/jsx.d.ts ./types/jsx.d.ts && ncp ./src/jsx-properties.d.ts ./types/jsx-properties.d.ts",
     "types:web-storage": "tsc --project ./storage/tsconfig.build.json",
@@ -158,0 +158,0 @@ "types:cjs": "node ../../scripts/sync-dual-types.mjs ./types ./types-cjs ./storage/types ./storage/types-cjs",

storage/types-cjs/src/client.d.cts

@@ -1,1 +0,1 @@
-export * from "dom-expressions/src/client.js";
+export * from "@dom-expressions/runtime/src/client.js";

storage/types/src/client.d.ts

@@ -1,1 +0,1 @@
-export * from "dom-expressions/src/client.js";
+export * from "@dom-expressions/runtime/src/client.js";

types-cjs/client.d.cts

@@ -26,2 +26,3 @@ import { JSX } from "./jsx.cjs";
 export function template(html: string, flag?: 1 | 2): () => Element;
+export function scope<T extends () => any>(fn: T): T;
 export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
@@ -28,0 +29,0 @@ export function memo<T>(fn: () => T, equal: boolean): () => T;

types-cjs/core.d.cts

@@ -1,3 +0,3 @@
-export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError } from "solid-js";
+export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrScope } from "solid-js";
 export declare const effect: (fn: any, effectFn: any, options: any) => void;
 export declare const memo: (fn: any) => import("solid-js").SourceAccessor<any>;

types-cjs/server.d.cts

@@ -78,2 +78,3 @@ import { JSX } from "./jsx.cjs";
 export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
+export function scope<T>(fn: () => T): () => unknown;
 export function ssrHydrationKey(): string;
@@ -80,0 +81,0 @@ export function resolveSSRNode(node: any, result?: any, top?: boolean): any;

types/client.d.ts

@@ -26,2 +26,3 @@ import { JSX } from "./jsx.js";
 export function template(html: string, flag?: 1 | 2): () => Element;
+export function scope<T extends () => any>(fn: T): T;
 export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void): void;
@@ -28,0 +29,0 @@ export function memo<T>(fn: () => T, equal: boolean): () => T;

types/core.d.ts

@@ -1,3 +0,3 @@
-export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError } from "solid-js";
+export { getOwner, runWithOwner, createComponent, createRoot as root, sharedConfig, untrack, merge as mergeProps, flatten, ssrHandleError, ssrScope } from "solid-js";
 export declare const effect: (fn: any, effectFn: any, options: any) => void;
 export declare const memo: (fn: any) => import("solid-js").SourceAccessor<any>;

types/server.d.ts

@@ -78,2 +78,3 @@ import { JSX } from "./jsx.js";
 export function ssrGroup<T extends () => any[]>(fn: T, n: number): T;
+export function scope<T>(fn: () => T): () => unknown;
 export function ssrHydrationKey(): string;
@@ -80,0 +81,0 @@ export function resolveSSRNode(node: any, result?: any, top?: boolean): any;

No alert changes

Improved metrics

Total package byte prevSize

671704

1.82%

Lines of code

12135

3.49%

No dependency changes