@solidjs/web 2.0.0-beta.30 → 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, onSettled, $DEVCOMP, 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,
@@ -171,8 +182,9 @@ function reconcileArrays(parentNode, a, b, marker) {
 
 const HEAD_ELIGIBLE_TAGS = new Set(["title", "meta", "link", "style", "script", "base"]);
 const HEAD_ATTR_NAME = /^[a-zA-Z_][a-zA-Z0-9_:.-]*$/;
-const RESOURCE_LINK_RELS = new Set(["preload", "modulepreload", "prefetch", "preconnect", "dns-prefetch", "icon", "stylesheet"]);
+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;
 }
@@ -214,12 +226,14 @@ function replaceableIdentity(tag, props, key, unique) {
   if (tag === "meta" && props.charset != null) return "charset";
   if (key != null) return tag + ":key:" + key;
   if (tag === "meta") {
-    if (props.name != null) return "meta:name:" + props.name;
-    if (props.property != null) return "meta:property:" + props.property;
-    if (props["http-equiv"] != null) return "meta:http-equiv:" + props["http-equiv"];
+    for (const ns of ["name", "property", "http-equiv"]) if (props[ns] != null) return "meta:" + ns + ":" + props[ns] + (props.media != null ? ":media=" + props.media : "");
     return unique;
   }
-  if (tag === "link") return "link:" + (props.rel || "") + ":" + (props.href || "");
+  if (tag === "link") {
+    const rel = props.rel || "";
+    if (rel === "icon" || rel === "apple-touch-icon") return "link:" + rel + (props.sizes != null ? ":sizes=" + props.sizes : "") + (props.type != null ? ":type=" + props.type : "");
+    return "link:" + rel + ":" + (props.href || "");
+  }
   return unique;
 }
 function resolveHead(groups) {
@@ -252,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();
@@ -655,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") {
@@ -673,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);
@@ -725,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;
@@ -837,22 +961,26 @@ function flushHeadRegistry() {
     headOwned.set(identity, els);
   }
 }
-function renderHeadElement(t, identity, existing) {
-  for (let i = 0; i < existing.length; i++) {
-    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
-  }
-  const el = document.createElement(t.tag);
-  for (const name in t.props) {
+function createHeadElement(tag, props) {
+  const el = document.createElement(tag);
+  for (const name in props) {
     if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
     if (!HEAD_ATTR_NAME.test(name)) {
       console.warn(`useHead: ignoring invalid attribute name "${name}"`);
       continue;
     }
-    const v = t.props[name];
+    const v = props[name];
     if (v == null || v === false) continue;
     el.setAttribute(name, v === true ? "" : String(v));
   }
-  if (t.props.children != null) el.textContent = String(t.props.children);
+  if (props.children != null) el.textContent = String(props.children);
+  return el;
+}
+function renderHeadElement(t, identity, existing) {
+  for (let i = 0; i < existing.length; i++) {
+    if (headElementMatches(existing[i], t)) return existing.splice(i, 1)[0];
+  }
+  const el = createHeadElement(t.tag, t.props);
   el.setAttribute("data-dh", identity);
   document.head.appendChild(el);
   return el;
@@ -870,48 +998,39 @@ 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;
   if (url != null) {
     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) {
-    el = document.createElement(tag);
-    for (const name in props) {
-      if (name === "children" || name === "ref" || name.slice(0, 2) === "on") continue;
-      if (!HEAD_ATTR_NAME.test(name)) continue;
-      const v = props[name];
-      if (v == null || v === false) continue;
-      el.setAttribute(name, v === true ? "" : String(v));
-    }
-    if (props.children != null) el.textContent = String(props.children);
-    document.head.appendChild(el);
+  if (!el) document.head.appendChild(createHeadElement(tag, props));
+}
+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);
   }
-  return noopFn;
+  if (attrs) descriptor.attrs = attrs;
+  effect(() => {
+    const entry = warmAsset(descriptor);
+    if (gateable && entry.loadState === "pending" && typeof waitAsset === "function") waitAsset(entry.loadPromise);
+  }, () => acquireAsset(descriptor));
 }
-function noopFn() {}
 function useHead(tags) {
-  const list = Array.isArray(tags) ? tags : [tags];
   initHeadRegistry();
   const reg = {
     seq: -1,
@@ -919,6 +1038,8 @@ function useHead(tags) {
   };
   const uid = ++headUid;
   effect(() => {
+    let list = typeof tags === "function" ? tags() : tags;
+    if (!Array.isArray(list)) list = [list];
     const replaceable = [];
     const resources = [];
     for (let i = 0; i < list.length; i++) {
@@ -932,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({
@@ -950,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;
@@ -961,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();
     };
   });
@@ -1449,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() {
@@ -1465,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 {
@@ -1495,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,
@@ -1621,19 +1794,31 @@ function portalImpl(props) {
   });
   return treeMarker;
 }
-const COMPONENT_HANDOFF = Symbol.for("dom-expressions.component-handoff");
-function resolveHandoff(next, prev) {
-  const handoff = typeof next === "function" && next !== null && next[COMPONENT_HANDOFF];
-  return handoff && handoff.take(prev) ? prev : next;
+const COMPONENT_BINDING = Symbol.for("dom-expressions.component-binding");
+function bindingOf(value) {
+  return value !== null && (typeof value === "function" || typeof value === "object") && value[COMPONENT_BINDING] || undefined;
 }
 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);
+      return prev;
+    }
+    return next;
+  };
   const cached = createMemo(prev => {
     const next = source();
-    if (!next || typeof next.then !== "function") return resolveHandoff(next, prev);
+    if (!next || typeof next.then !== "function") return resolveBinding(next, prev);
     const token = ++latest;
     return {
-      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveHandoff(resolved, prev) : resolved), onRejected)
+      then: (onFulfilled, onRejected) => next.then(resolved => onFulfilled(token === latest ? resolveBinding(resolved, prev) : resolved), onRejected)
     };
   }, {
     lazy: true
@@ -1643,10 +1828,19 @@ function dynamic(source) {
       const component = cached();
       switch (typeof component) {
         case "function":
-          Object.assign(component, {
-            [$DEVCOMP]: true
-          });
-          return untrack(() => component(props));
+          {
+            Object.assign(component, {
+              [$DEVCOMP]: true
+            });
+            const binding = bindingOf(component);
+            if (binding) {
+              const [address, setAddress] = createSignal(deliveredAddress ?? binding.address);
+              sites.add(setAddress);
+              onCleanup(() => sites.delete(setAddress));
+              return untrack(() => binding.component(props, address));
+            }
+            return untrack(() => component(props));
+          }
         case "string":
           const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
           spread(el, props);
@@ -1683,13 +1877,11 @@ _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)));
-    onSettled(() => {
-      setMounted(true);
-    });
+    sharedConfig.onHydrationEnd(() => setMounted(true));
     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, 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 };