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

package/dist/dev.js

@@ -1,4 +1,4 @@
-import { createRenderEffect, createMemo, sharedConfig, untrack, runWithOwner, flatten, createRoot, merge, createComponent, omit, createOwner, createSignal, $DEVCOMP, onCleanup, enableHydration, enforceLoadingBoundary, flush, getOwner, createEffect } from 'solid-js';
+import { createRenderEffect, createMemo, runWithOwner, sharedConfig, untrack, flatten, createRoot, merge, createComponent, omit, createOwner, createSignal, $DEVCOMP, onCleanup, enableHydration, enforceLoadingBoundary, flush, getOwner, createEffect } from 'solid-js';
 export { Errored, For, Hydration, Loading, Match, NoHydration, Repeat, Reveal, Show, Switch, createComponent, getOwner, untrack } from 'solid-js';
 
 const DOMWithState = {
@@ -62,6 +62,17 @@ const effect = (fn, effectFn, options) => createRenderEffect(fn, effectFn, optio
   transparent: !options.scope
 } : transparentOptions);
 const memo = fn => createMemo(() => fn(), syncOptions);
+const assetGates = new WeakMap();
+const waitAsset = promise => {
+  let gate = assetGates.get(promise);
+  if (!gate) {
+    runWithOwner(null, () => {
+      gate = createMemo(() => promise);
+    });
+    assetGates.set(promise, gate);
+  }
+  gate();
+};
 
 function reconcileArrays(parentNode, a, b, marker) {
   let bLength = b.length,
@@ -173,6 +184,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;
 }
@@ -254,6 +266,64 @@ 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 FLASH_COOKIE = "flash";
+const FLASH_MATCHER = new RegExp(`(?:^|;\\s*)${FLASH_COOKIE}=([^;]+)`);
+function hasFlashCookie(cookieHeader) {
+  return !!cookieHeader && FLASH_MATCHER.test(cookieHeader);
+}
+function clearFlashCookie() {
+  return `${FLASH_COOKIE}=; Max-Age=0; Path=/`;
+}
+
+const SERVER_FUNCTION_METADATA = Symbol.for("solid.ServerFunctionMetadata");
+function getServerFunctionMetadata(fn) {
+  if (typeof fn !== "function") return undefined;
+  return fn[SERVER_FUNCTION_METADATA] || undefined;
+}
+function isServerFunction(fn) {
+  return typeof fn === "function" && !!fn[SERVER_FUNCTION_METADATA];
+}
+const SERVER_FUNCTION_RPC = Symbol.for("solid.ServerFunctionRPC");
+function getServerFunctionRPC() {
+  return globalThis[SERVER_FUNCTION_RPC];
+}
+
 const $$EVENT_OWNER = "_$DX_EVENT_OWNER";
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
@@ -608,8 +678,7 @@ function insert(parent, accessor, marker, initial, options) {
     const value = normalize(accessor(), current, multi, true);
     if (typeof value !== "function") return value;
     effect(() => (hydrationRt !== null && (current = hydrationRt.reclaimRegion(current, parent, marker)), normalize(value, current, multi)), inner => {
-      insertExpression(parent, inner, current, marker);
-      current = inner;
+      current = insertExpression(parent, inner, current, marker);
       host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
       ...options,
@@ -618,8 +687,7 @@ function insert(parent, accessor, marker, initial, options) {
     return INNER_OWNED;
   }, value => {
     if (value === INNER_OWNED) return;
-    insertExpression(parent, value, current, marker);
-    current = value;
+    current = insertExpression(parent, value, current, marker);
     host && tagHost(current, host);
   },
   accessor.$s ? options ? {
@@ -657,6 +725,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") {
@@ -675,12 +746,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);
@@ -727,7 +863,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;
@@ -876,25 +1017,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;
@@ -902,9 +1027,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 = {
@@ -928,10 +1072,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({
@@ -946,9 +1096,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;
@@ -957,7 +1106,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();
     };
   });
@@ -1323,8 +1471,11 @@ function eventHandler(e, container, state) {
   retarget(oriTarget);
 }
 function insertExpression(parent, value, current, marker) {
-  if (hydrationRt !== null && isHydrating(parent)) return;
-  if (value === current) return;
+  if (hydrationRt !== null && isHydrating(parent)) {
+    if (value && value !== current) for (const n of Array.isArray(value) ? value : [value]) if (n && n.nodeType && !isHydrating(n)) return current;
+    return value;
+  }
+  if (value === current) return value;
   const t = typeof value,
     multi = marker !== undefined;
   if (t === "string" || t === "number") {
@@ -1363,6 +1514,7 @@ function insertExpression(parent, value, current, marker) {
       appendNodes(parent, value);
     }
   } else console.warn(`Unrecognized value. Skipped inserting`, value);
+  return value;
 }
 function normalize(value, current, multi, doNotUnwrap) {
   value = flatten(value, {
@@ -1445,7 +1597,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)) && !sharedConfig.registry.has(key)) 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 (!sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -1461,29 +1619,50 @@ 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 {
-  constructor(response, value) {
-    this.response = response;
-    this.value = value;
+// PURE-annotated factory (same convention as solid's MockPromise): the brand
+const ResponseEnvelope = /* @__PURE__ */(() => {
+  class ResponseEnvelope {
+    constructor(response, value) {
+      this.response = response;
+      this.value = value;
+    }
   }
-}
-ResponseEnvelope.prototype[ENVELOPE] = true;
+  ResponseEnvelope.prototype[ENVELOPE] = true;
+  return ResponseEnvelope;
+})();
 function isResponseEnvelope(value) {
   return !!(value && typeof value === "object" && value[ENVELOPE]);
 }
@@ -1491,13 +1670,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,
@@ -1576,7 +1780,8 @@ function portalImpl(props) {
     endMarker = document.createTextNode(""),
     mount = () => props.mount || document.body,
     content = createMemo(() => [startMarker, props.children], {
-      ssrSource: "client"
+      ssrSource: "client",
+      loadingValue: undefined
     });
   createRenderEffect(
   () => [mount(), content(), getOwner()], ([, c, owner]) => {
@@ -1613,7 +1818,8 @@ function portalImpl(props) {
     ssrSource: "client"
   });
   if (sharedConfig.hydrating) return createMemo(() => treeMarker, {
-    ssrSource: "client"
+    ssrSource: "client",
+    loadingValue: undefined
   });
   return treeMarker;
 }
@@ -1624,9 +1830,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);
@@ -1655,7 +1863,7 @@ function dynamic(source) {
             });
             const binding = bindingOf(component);
             if (binding) {
-              const [address, setAddress] = createSignal(binding.address);
+              const [address, setAddress] = createSignal(deliveredAddress ?? binding.address);
               sites.add(setAddress);
               onCleanup(() => sites.delete(setAddress));
               return untrack(() => binding.component(props, address));
@@ -1698,11 +1906,13 @@ _moduleUrl) {
     if ((Comp = untrack(comp)) && !sharedConfig.hydrating) return Comp(rest);
     const [mounted, setMounted] = createSignal(!sharedConfig.hydrating);
     const gate = createMemo(() => (Comp = comp(), m = mounted(), untrack(() => Comp && m ? Comp(rest) : props.fallback)));
-    sharedConfig.onHydrationEnd(() => setMounted(true));
+    const onHydrationEnd = sharedConfig.onHydrationEnd;
+    const release = () => setMounted(true);
+    onHydrationEnd ? onHydrationEnd(release) : queueMicrotask(release);
     return gate;
   };
 }
 function httpStatus(_code, _text) {}
 function httpHeader(_name, _value, _options) {}
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clientOnly, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isServer, memo, mergeProps, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, respond, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets, useHead };
+export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, markSafeError, memo, mergeProps, parseCookieHeader, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, warmAsset };