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

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,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();
@@ -657,6 +706,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 +727,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 +844,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 +998,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 +1008,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 +1053,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 +1077,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 +1087,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();
     };
   });
@@ -1445,7 +1574,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,20 +1596,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 {
@@ -1491,13 +1643,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,
@@ -1624,9 +1801,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 +1834,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));
@@ -1705,4 +1884,4 @@ _moduleUrl) {
 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, 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, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isSafeError, isServer, 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 };