@solidjs/web 2.0.0-beta.31 → 2.0.0-beta.32

package/README.md

@@ -13,12 +13,7 @@ Solid 2.0's web platform runtime — DOM rendering, hydration, server-side rende
 import { render, hydrate, Portal, Dynamic, dynamic } from "@solidjs/web";
 
 // Server (SSR)
-import {
-  renderToString,
-  renderToStringAsync,
-  renderToStream,
-  isServer
-} from "@solidjs/web";
+import { renderToString, renderToStream, isServer } from "@solidjs/web";
 ```
 
 The control-flow components from `solid-js` (`For`, `Show`, `Switch`/`Match`, `Loading`, `Errored`, `Repeat`, `Reveal`) are also re-exported from `@solidjs/web` for convenience.

package/dist/dev.cjs

@@ -63,6 +63,17 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
   transparent: !options.scope
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
+const assetGates = new WeakMap();
+const waitAsset = promise => {
+  let gate = assetGates.get(promise);
+  if (!gate) {
+    solidJs.runWithOwner(null, () => {
+      gate = solidJs.createMemo(() => promise);
+    });
+    assetGates.set(promise, gate);
+  }
+  gate();
+};
 
 function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
@@ -174,6 +185,7 @@ const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script",
 const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
 const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "stylesheet"]);
 const RESOURCE_QUALIFIERS = ["as", "crossorigin", "type", "media", "imagesrcset", "imagesizes"];
+const STYLESHEET_FETCH_META = new Set(["crossorigin", "integrity", "referrerpolicy", "fetchpriority"]);
 function evalHeadValue(v) {
   return typeof v === "function" ? v() : v;
 }
@@ -255,6 +267,43 @@ function resolveHead(groups) {
   return winners;
 }
 
+function parseCookieHeader(header) {
+  const cookies = {};
+  if (!header) return cookies;
+  for (const part of header.split(";")) {
+    const eq = part.indexOf("=");
+    if (eq < 0) continue;
+    const name = decodeSafe(part.slice(0, eq).trim());
+    let value = part.slice(eq + 1).trim();
+    if (value.length > 1 && value[0] === '"' && value[value.length - 1] === '"') {
+      value = value.slice(1, -1);
+    }
+    cookies[name] = decodeSafe(value);
+  }
+  return cookies;
+}
+function decodeSafe(text) {
+  try {
+    return decodeURIComponent(text);
+  } catch {
+    return text;
+  }
+}
+function serializeCookie(name, value, options = {}) {
+  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+  cookie += `; Path=${options.path === undefined ? "/" : options.path}`;
+  if (options.domain) cookie += `; Domain=${options.domain}`;
+  if (options.maxAge !== undefined) cookie += `; Max-Age=${Math.trunc(options.maxAge)}`;
+  if (options.expires) cookie += `; Expires=${options.expires.toUTCString()}`;
+  if (options.httpOnly) cookie += "; HttpOnly";
+  if (options.secure) cookie += "; Secure";
+  if (options.sameSite) {
+    const sameSite = options.sameSite.toLowerCase();
+    cookie += `; SameSite=${sameSite === "none" ? "None" : sameSite === "strict" ? "Strict" : "Lax"}`;
+  }
+  return cookie;
+}
+
 const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
@@ -658,6 +707,9 @@ function findAssetElement(selector, attr, value) {
   }
   return null;
 }
+function setAssetAttrs(el, attrs) {
+  for (const name in attrs) el.setAttribute(name, attrs[name]);
+}
 function mountAssetElement(descriptor) {
   let el;
   if (descriptor.type === "inline-style") {
@@ -676,12 +728,77 @@ function mountAssetElement(descriptor) {
       el.href = descriptor.href;
     }
   }
-  if (descriptor.attrs) {
-    for (const name in descriptor.attrs) el.setAttribute(name, descriptor.attrs[name]);
-  }
+  if (descriptor.attrs) setAssetAttrs(el, descriptor.attrs);
   if (!el.isConnected) document.head.appendChild(el);
   return el;
 }
+const assetLoadSettled = /*#__PURE__*/Promise.resolve();
+function trackAssetLoad(entry, adopted) {
+  if (entry.loadPromise) return;
+  const el = entry.element;
+  let settled = el.sheet != null;
+  if (!settled && adopted && typeof performance !== "undefined" && performance.getEntriesByName) {
+    settled = performance.getEntriesByName(el.href).length > 0;
+  }
+  if (settled) {
+    entry.loadState = "loaded";
+    entry.loadPromise = assetLoadSettled;
+    return;
+  }
+  entry.loadState = "pending";
+  entry.loadPromise = new Promise(resolve => {
+    const settle = state => {
+      entry.loadState = state;
+      resolve();
+    };
+    el.addEventListener("load", () => settle("loaded"), {
+      once: true
+    });
+    el.addEventListener("error", () => settle("errored"), {
+      once: true
+    });
+  });
+}
+function warmAsset(descriptor) {
+  if (descriptor.policy === "exclusive" || descriptor.type === "inline-style") return;
+  const key = assetEntryKey(descriptor);
+  let entry = assetRegistry.get(key);
+  if (!entry) {
+    entry = {
+      count: 0,
+      element: null,
+      timer: null
+    };
+    assetRegistry.set(key, entry);
+  }
+  let adopted = true;
+  if (!entry.element || !entry.element.isConnected) {
+    const rel = descriptor.type === "module" ? "modulepreload" : "stylesheet";
+    let el = findAssetElement(`link[rel="${rel}"]`, "href", descriptor.href);
+    if (!el && descriptor.type === "style") {
+      el = findAssetElement('link[rel="preload"][as="style"]', "href", descriptor.href);
+    }
+    if (!el) {
+      adopted = false;
+      el = document.createElement("link");
+      if (descriptor.type === "style") {
+        el.setAttribute("rel", "preload");
+        el.setAttribute("as", "style");
+      } else {
+        el.setAttribute("rel", "modulepreload");
+      }
+      el.setAttribute("href", descriptor.href);
+      if (!document.body) el.setAttribute("blocking", "render");
+    }
+    if (descriptor.attrs) setAssetAttrs(el, descriptor.attrs);
+    if (!el.isConnected) document.head.appendChild(el);
+    entry.element = el;
+    entry.loadState = undefined;
+    entry.loadPromise = undefined;
+  }
+  if (descriptor.type === "style") trackAssetLoad(entry, adopted);
+  return entry;
+}
 function acquireAsset(descriptor) {
   const key = assetEntryKey(descriptor);
   let entry = assetRegistry.get(key);
@@ -728,7 +845,12 @@ function acquireAsset(descriptor) {
     entry.timer = null;
   }
   entry.count++;
-  if (!entry.element || !entry.element.isConnected) entry.element = mountAssetElement(descriptor);
+  if (!entry.element || !entry.element.isConnected) {
+    entry.element = mountAssetElement(descriptor);
+  } else if (descriptor.type === "style" && entry.element.getAttribute("rel") === "preload") {
+    entry.element.removeAttribute("as");
+    entry.element.setAttribute("rel", "stylesheet");
+  }
   let released = false;
   return () => {
     if (released) return;
@@ -877,25 +999,9 @@ function headElementMatches(el, t) {
   const children = t.props.children;
   return (children == null ? "" : String(children)) === el.textContent;
 }
-function acquireHeadResource(tag, props) {
-  if (tag === "link" && (props.rel === "stylesheet" || props.rel === "modulepreload")) {
-    const descriptor = {
-      type: props.rel === "stylesheet" ? "style" : "module",
-      href: props.href
-    };
-    let attrs = null;
-    for (const name in props) {
-      if (name === "rel" || name === "href") continue;
-      if (!HEAD_ATTR_NAME.test(name)) continue;
-      const v = props[name];
-      if (v == null || v === false) continue;
-      (attrs || (attrs = {}))[name] = v === true ? "" : String(v);
-    }
-    if (attrs) descriptor.attrs = attrs;
-    return acquireAsset(descriptor);
-  }
+function mountHeadResource(tag, props) {
   const identity = resourceIdentity(tag, props);
-  if (headMountedResources.has(identity)) return noopFn;
+  if (headMountedResources.has(identity)) return;
   headMountedResources.add(identity);
   const url = props.href || props.src;
   let el = null;
@@ -903,9 +1009,28 @@ function acquireHeadResource(tag, props) {
     if (tag === "link") el = findAssetElement(`link[rel="${props.rel}"]`, "href", url);else if (tag === "script") el = findAssetElement("script[src]", "src", url);else el = findAssetElement("style[href]", "href", url);
   }
   if (!el) document.head.appendChild(createHeadElement(tag, props));
-  return noopFn;
 }
-function noopFn() {}
+function gateHeadResource(props) {
+  const descriptor = {
+    type: props.rel === "stylesheet" ? "style" : "module",
+    href: props.href
+  };
+  let gateable = props.rel === "stylesheet" && props.href != null;
+  let attrs = null;
+  for (const name in props) {
+    if (name === "rel" || name === "href") continue;
+    if (!STYLESHEET_FETCH_META.has(name)) gateable = false;
+    if (!HEAD_ATTR_NAME.test(name)) continue;
+    const v = props[name];
+    if (v == null || v === false) continue;
+    (attrs || (attrs = {}))[name] = v === true ? "" : String(v);
+  }
+  if (attrs) descriptor.attrs = attrs;
+  effect(() => {
+    const entry = warmAsset(descriptor);
+    if (gateable && entry.loadState === "pending" && typeof waitAsset === "function") waitAsset(entry.loadPromise);
+  }, () => acquireAsset(descriptor));
+}
 function useHead(tags) {
   initHeadRegistry();
   const reg = {
@@ -929,10 +1054,16 @@ function useHead(tags) {
         rel: cls.rel
       } : undefined);
       if (cls.resource) {
-        resources.push({
-          tag: desc.tag,
-          props
-        });
+        if (desc.tag === "link" && (props.rel === "stylesheet" || props.rel === "modulepreload")) {
+          gateHeadResource(props);
+        } else if (desc.tag === "link") {
+          mountHeadResource(desc.tag, props);
+        } else {
+          resources.push({
+            tag: desc.tag,
+            props
+          });
+        }
       } else {
         const key = evalHeadValue(desc.key);
         replaceable.push({
@@ -947,9 +1078,8 @@ function useHead(tags) {
       resources
     };
   }, evaluated => {
-    const releases = [];
     for (let i = 0; i < evaluated.resources.length; i++) {
-      releases.push(acquireHeadResource(evaluated.resources[i].tag, evaluated.resources[i].props));
+      mountHeadResource(evaluated.resources[i].tag, evaluated.resources[i].props);
     }
     reg.tags = evaluated.replaceable;
     if (reg.seq < 0) reg.seq = ++headSeq;
@@ -958,7 +1088,6 @@ function useHead(tags) {
     return () => {
       const idx = headRegistrations.indexOf(reg);
       if (idx > -1) headRegistrations.splice(idx, 1);
-      for (let i = 0; i < releases.length; i++) releases[i]();
       scheduleHeadApply();
     };
   });
@@ -1446,7 +1575,13 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("_hk");
-    if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
+    if (root) {
+      if (!key.startsWith(root)) continue;
+    } else {
+      const frame = node.closest("[data-fid]");
+      if (frame && frame !== element && element.contains(frame)) continue;
+    }
+    if (!solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -1462,20 +1597,37 @@ function throwInBrowser(func) {
 function renderToString(fn, options) {
   throwInBrowser(renderToString);
 }
-function renderToStringAsync(fn, options) {
-  throwInBrowser(renderToStringAsync);
-}
 function renderToStream(fn, options) {
   throwInBrowser(renderToStream);
 }
+function createResponseStub() {
+  throwInBrowser(createResponseStub);
+}
+function createRequestEvent(request, init) {
+  throwInBrowser(createRequestEvent);
+}
+function getExpectedRedirectStatus(response) {
+  throwInBrowser(getExpectedRedirectStatus);
+}
+function createSSRResponse() {
+  throwInBrowser(createSSRResponse);
+}
+function commitEventResponse(response, event) {
+  throwInBrowser(commitEventResponse);
+}
+function composeMiddleware(middlewares) {
+  throwInBrowser(composeMiddleware);
+}
 function ssr(template, ...nodes) {}
 function ssrElement(name, props, children, needsId) {}
-function ssrClassList(value) {}
+function ssrClassName(value) {}
 function ssrStyle(value) {}
+function ssrStyleProperty(name, value) {}
 function ssrAttribute(key, value) {}
+function ssrGroup(fn, n) {}
 function ssrHydrationKey() {}
-function resolveSSRNode(node) {}
-function escape(html) {}
+function resolveSSRNode(node, result, top) {}
+function escape(s, attr) {}
 
 const ENVELOPE = Symbol.for("solid.ResponseEnvelope");
 class ResponseEnvelope {
@@ -1492,13 +1644,38 @@ const HREF = Symbol.for("solid.Href");
 function isHref(value) {
   return !!(value && (typeof value === "object" || typeof value === "function") && value[HREF]);
 }
+const SAFE_ERROR = Symbol.for("solid.SafeError");
+function markSafeError(error) {
+  if (error && (typeof error === "object" || typeof error === "function")) {
+    Object.defineProperty(error, SAFE_ERROR, {
+      value: true,
+      enumerable: false,
+      configurable: true
+    });
+  }
+  return error;
+}
+function isSafeError(value) {
+  return !!(value && (typeof value === "object" || typeof value === "function") && value[SAFE_ERROR]);
+}
 const REVALIDATE_HEADER = "X-Revalidate";
 function initWithRevalidate(init) {
   const {
     revalidate,
     ...responseInit
   } = init;
-  const headers = new Headers(responseInit.headers);
+  let headers;
+  if (responseInit.headers && responseInit.headers.getSetCookie) {
+    headers = new Headers();
+    responseInit.headers.forEach((value, key) => {
+      if (key !== "set-cookie") headers.append(key, value);
+    });
+    for (const cookie of responseInit.headers.getSetCookie()) {
+      headers.append("Set-Cookie", cookie);
+    }
+  } else {
+    headers = new Headers(responseInit.headers);
+  }
   revalidate !== undefined && headers.set(REVALIDATE_HEADER, revalidate.toString());
   return {
     responseInit,
@@ -1625,9 +1802,11 @@ function bindingOf(value) {
 function dynamic(source) {
   let latest = 0;
   const sites = new Set();
+  let deliveredAddress;
   const resolveBinding = (next, prev) => {
     const binding = bindingOf(next);
     if (!binding) return next;
+    deliveredAddress = binding.address;
     const prevBinding = bindingOf(prev);
     if (prevBinding && prevBinding.component === binding.component) {
       for (const deliver of sites) deliver(binding.address);
@@ -1656,7 +1835,7 @@ function dynamic(source) {
             });
             const binding = bindingOf(component);
             if (binding) {
-              const [address, setAddress] = solidJs.createSignal(binding.address);
+              const [address, setAddress] = solidJs.createSignal(deliveredAddress ?? binding.address);
               sites.add(setAddress);
               solidJs.onCleanup(() => sites.delete(setAddress));
               return solidJs.untrack(() => binding.component(props, address));
@@ -1758,7 +1937,6 @@ Object.defineProperty(exports, "untrack", {
   enumerable: true,
   get: function () { return solidJs.untrack; }
 });
-exports.Assets = voidFn;
 exports.ChildProperties = ChildProperties;
 exports.DOMElements = DOMElements;
 exports.DOMWithState = DOMWithState;
@@ -1773,6 +1951,7 @@ exports.REVALIDATE_HEADER = REVALIDATE_HEADER;
 exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.ResponseEnvelope = ResponseEnvelope;
+exports.SAFE_ERROR = SAFE_ERROR;
 exports.SVGElements = SVGElements;
 exports.VoidElements = VoidElements;
 exports.acquireAsset = acquireAsset;
@@ -1783,14 +1962,19 @@ exports.claimElement = claimElement;
 exports.claimElementTree = claimElementTree;
 exports.className = className;
 exports.clientOnly = clientOnly;
+exports.commitEventResponse = commitEventResponse;
+exports.composeMiddleware = composeMiddleware;
+exports.createRequestEvent = createRequestEvent;
+exports.createResponseStub = createResponseStub;
+exports.createSSRResponse = createSSRResponse;
 exports.delegateEvents = delegateEvents;
 exports.dynamic = dynamic;
 exports.dynamicProperty = dynamicProperty;
 exports.effect = effect;
 exports.escape = escape;
 exports.generateHydrationScript = voidFn;
-exports.getAssets = voidFn;
 exports.getDelegatedRoot = getDelegatedRoot;
+exports.getExpectedRedirectStatus = getExpectedRedirectStatus;
 exports.getFirstChild = getFirstChild;
 exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = getNextElement;
@@ -1806,9 +1990,12 @@ exports.installHydrationRuntime = installHydrationRuntime;
 exports.isDev = isDev;
 exports.isHref = isHref;
 exports.isResponseEnvelope = isResponseEnvelope;
+exports.isSafeError = isSafeError;
 exports.isServer = isServer;
+exports.markSafeError = markSafeError;
 exports.memo = memo;
 exports.mergeProps = mergeProps;
+exports.parseCookieHeader = parseCookieHeader;
 exports.redirect = redirect;
 exports.ref = ref;
 exports.registerDelegatedContainer = registerDelegatedContainer;
@@ -1818,11 +2005,11 @@ exports.reload = reload;
 exports.render = render;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
-exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;
 exports.respond = respond;
 exports.runHydrationEvents = runHydrationEvents;
 exports.scope = scope;
+exports.serializeCookie = serializeCookie;
 exports.setAttribute = setAttribute;
 exports.setAttributeNS = setAttributeNS;
 exports.setProperty = setProperty;
@@ -1830,13 +2017,15 @@ exports.setStyleProperty = setStyleProperty;
 exports.spread = spread;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
-exports.ssrClassList = ssrClassList;
+exports.ssrClassName = ssrClassName;
 exports.ssrElement = ssrElement;
+exports.ssrGroup = ssrGroup;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
+exports.ssrStyleProperty = ssrStyleProperty;
 exports.style = style;
 exports.template = template;
 exports.unregisterDelegatedContainer = unregisterDelegatedContainer;
 exports.unregisterDelegatedRoot = unregisterDelegatedRoot;
-exports.useAssets = voidFn;
 exports.useHead = useHead;
+exports.warmAsset = warmAsset;