@solidjs/web 2.0.0-beta.14 → 2.0.0-beta.16

package/dist/server.js

@@ -1,5 +1,5 @@
-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';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 
@@ -59,9 +59,9 @@ const syncOptions = {
   sync: true
 };
 const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
 const memo = fn => createMemo(() => fn(), syncOptions);
 
@@ -93,9 +93,15 @@ function getLocalHeaderScript(id) {
   return getCrossReferenceHeader(id) + ";";
 }
 
+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];
   if (!entry) return null;
   const css = [];
@@ -106,8 +112,8 @@ function resolveAssets(moduleUrl, manifest) {
     visited.add(key);
     const e = manifest[key];
     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]);
   };
   walk(moduleUrl);
@@ -496,38 +502,41 @@ function renderToStream(code, options = {}) {
   }, {
     id: renderId
   });
-  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;
     html = injectAssets(context.assets, html);
     headStyles = new Set();
@@ -559,7 +568,15 @@ function renderToStream(code, options = {}) {
           complete();
         };
       } else onCompleteAll = complete;
-      queue(flushEnd);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            if (!resolveRootHoles()) return flush();
+            queue(flushEnd);
+          });
+        });
+      }
+      flush();
     },
     pipe(w) {
       function flush() {
@@ -940,29 +957,6 @@ function tryJoinPlainSSRArray(nodes) {
   }
   return out;
 }
-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() {
   const hydrate = sharedConfig.context;
   return hydrate && sharedConfig.getNextContextId();
@@ -1111,6 +1105,10 @@ function tryResolveString(node) {
     if (node.h && node.h.length > 0) return {
       merge: node
     };
+    if (node.t === undefined) {
+      console.warn(`Unrecognized value. Skipped inserting`, node);
+      return "";
+    }
     return Array.isArray(node.t) ? node.t[0] : node.t;
   }
   if (t === "function") {
@@ -1149,7 +1147,9 @@ function resolveSSRNode(node, result = {
         result.h.push(...node.h);
         result.p.push(...node.p);
       }
-    } 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") {
     try {
       resolveSSRNode(node(), result);
@@ -1186,15 +1186,38 @@ function dynamic(source) {
   const o = getOwner();
   if (o?.id != null) getNextChildId(o);
   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
     });
   };
 }
@@ -1206,4 +1229,4 @@ function Portal(props) {
   throw new Error("Portal is not supported on the server");
 }
 
-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 };

package/dist/web.cjs

@@ -32,6 +32,7 @@ const DOMWithState = {
 };
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
+const $$HOST = /*#__PURE__*/Symbol("host");
 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", "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",
@@ -59,9 +60,9 @@ const syncOptions = {
   sync: true
 };
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
@@ -329,20 +330,41 @@ function addEvent(node, name, handler, delegate) {
 }
 function style(node, value, prev) {
   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);
 }
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
@@ -381,22 +403,36 @@ function ref(fn, element) {
   const resolved = solidJs.untrack(fn);
   solidJs.runWithOwner(null, () => applyRef(resolved, element));
 }
+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) {
   const multi = marker !== undefined;
+  const host = options && options.host;
   if (multi && !initial) initial = [];
   if (isHydrating(parent)) {
     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);
   }
   if (typeof accessor !== "function") {
     accessor = normalize(accessor, initial, multi, true);
-    if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
+    if (typeof accessor !== "function") {
+      insertExpression(parent, accessor, initial, marker);
+      host && tagHost(accessor, host);
+      return;
+    }
   }
   if (multi && initial.length === 0) {
     const placeholder = document.createTextNode("");
@@ -404,12 +440,37 @@ function insert(parent, accessor, marker, initial, options) {
     initial = [placeholder];
   }
   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);
       current = inner;
+      host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
       ...options,
       schedule: true
@@ -419,7 +480,12 @@ function insert(parent, accessor, marker, initial, options) {
     if (value === INNER_OWNED) return;
     insertExpression(parent, value, current, marker);
     current = value;
-  }, options);
+    host && tagHost(current, host);
+  },
+  accessor.$s ? options ? {
+    ...options,
+    scope: true
+  } : SCOPE_OPTIONS : options);
 }
 function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
   const nodeName = node.nodeName;
@@ -448,6 +514,9 @@ function loadModuleAssets(mapping) {
     if (!hy.loading[moduleUrl]) {
       hy.loading[moduleUrl] = import(entryUrl).then(mod => {
         hy.modules[moduleUrl] = mod;
+      }, err => {
+        delete hy.loading[moduleUrl];
+        throw err;
       });
     }
     pending.push(hy.loading[moduleUrl]);
@@ -495,8 +564,11 @@ function hydrate$1(code, element, options = {}) {
         } finally {
           solidJs.sharedConfig.hydrating = false;
         }
-      }, () => {
+      }, 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);
       });
       return () => disposer && disposer();
     }
@@ -566,17 +638,32 @@ function runHydrationEvents() {
         const [el, e] = events[0];
         if (!completed.has(el)) return;
         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);
       }
       if (solidJs.sharedConfig.done) {
         solidJs.sharedConfig.events = _$HY.events = null;
@@ -647,11 +734,16 @@ function eventHandler(e, container, state) {
   if (solidJs.sharedConfig.registry && solidJs.sharedConfig.events) {
     if (solidJs.sharedConfig.events.find(([el, ev]) => ev === e)) return;
   }
-  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}`;
   const oriTarget = e.target;
   const boundary = owner || container || e.currentTarget;
@@ -681,7 +773,10 @@ function eventHandler(e, container, state) {
       return node || boundary || document;
     }
   });
-  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();
     if (path.length) {
       retarget(path[0]);
@@ -756,6 +851,17 @@ function normalize(value, current, multi, doNotUnwrap) {
   }
   return value;
 }
+function tagHost(value, host) {
+  if (Array.isArray(value)) {
+    for (let i = 0, len = value.length; i < len; i++) tagHost(value[i], host);
+  } else if (value && value.nodeType && value[$$HOST] !== host) {
+    value[$$HOST] = host;
+    Object.defineProperty(value, "_$host", {
+      get: host,
+      configurable: true
+    });
+  }
+}
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) {
     const n = array[i];
@@ -838,21 +944,33 @@ function Portal(props) {
   const treeMarker = document.createTextNode(""),
     startMarker = document.createTextNode(""),
     endMarker = document.createTextNode(""),
-    mount = () => createElementProxy(props.mount || document.body, treeMarker),
+    mount = () => props.mount || document.body,
     content = solidJs.createMemo(() => [startMarker, props.children]);
-  solidJs.createRenderEffect(() => [mount(), content()], ([m, c]) => {
+  solidJs.createRenderEffect(
+  () => [mount(), content(), solidJs.getOwner()], ([, c, owner]) => {
+    const m = solidJs.untrack(mount);
     m.appendChild(endMarker);
-    insert(m, c, endMarker);
+    const dispose = solidJs.runWithOwner(owner, () => solidJs.createRoot(d => {
+      insert(m, c, endMarker, undefined, {
+        host: () => treeMarker.parentNode
+      });
+      return d;
+    }));
     return () => {
+      dispose();
       let c = startMarker;
-      while (c && c !== endMarker) {
+      while (c) {
         const n = c.nextSibling;
         m.removeChild(c);
+        if (c === endMarker) break;
         c = n;
       }
     };
+  }, {
+    schedule: true
   });
-  solidJs.createEffect(mount, m => {
+  solidJs.createEffect(mount, () => {
+    const m = solidJs.untrack(mount);
     const ownerRoot = getDelegatedRoot(treeMarker);
     if (!ownerRoot || ownerRoot.contains(m)) return;
     registerDelegatedContainer(m, ownerRoot);
@@ -887,23 +1005,6 @@ function createElement(tagName, is = undefined) {
     is
   });
 }
-function createElementProxy(el, marker) {
-  return new Proxy(el, {
-    get(target, prop) {
-      if (prop === "appendChild" || prop === "insertBefore") {
-        return (...args) => {
-          Object.defineProperty(args[0], "_$host", {
-            get: () => marker.parentNode,
-            configurable: true
-          });
-          target[prop](...args);
-        };
-      }
-      const value = Reflect.get(target, prop);
-      return typeof value === "function" ? value.bind(target) : value;
-    }
-  });
-}
 
 Object.defineProperty(exports, "Errored", {
   enumerable: true,
@@ -1005,6 +1106,7 @@ exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;
 exports.runHydrationEvents = runHydrationEvents;
+exports.scope = scope;
 exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
 exports.setProperty = setProperty;