@solidjs/web 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/dev.js

@@ -48,6 +48,7 @@ const Namespaces = {
 const VoidElements = /*#__PURE__*/new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
 const RawTextElements = /*#__PURE__*/new Set(["style", "script", "noscript", "template", "textarea", "title"]);
 const DOMElements = /*#__PURE__*/new Set(/*#__PURE__*/"a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bdi,bdo,bgsound,big,blink,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,content,data,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,image,img,input,ins,isindex,kbd,keygen,label,legend,li,link,listing,main,map,mark,marquee,math,menu,menuitem,meta,meter,multicol,nav,nextid,nobr,noembed,noframes,noindex,noscript,object,ol,optgroup,option,output,p,param,picture,plaintext,portal,pre,progress,q,rb,rp,rt,rtc,ruby,s,samp,script,search,section,select,shadow,slot,small,source,spacer,span,strike,strong,style,sub,summary,sup,svg,table,tbody,td,template,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr,webview,xmp".split(","));
+const COMPOSED_BODY_FRAMING = /*#__PURE__*/new Set(["content-length", "content-encoding", "transfer-encoding"]);
 
 const transparentOptions = {
   transparent: true,
@@ -214,7 +215,8 @@ function resourceIdentity(tag, props) {
   let id = "res:" + tag + ":" + (props.rel || "") + ":" + (props.href || props.src || "");
   for (let i = 0; i < RESOURCE_QUALIFIERS.length; i++) {
     const q = RESOURCE_QUALIFIERS[i];
-    if (props[q] != null) id += ":" + q + "=" + props[q];
+    const value = props[q];
+    if (value != null) id += ":" + q + "=" + (value === true ? "" : value);
   }
   return id;
 }
@@ -287,6 +289,7 @@ function decodeSafe(text) {
   }
 }
 function serializeCookie(name, value, options = {}) {
+  assertServableCookie(name, options);
   let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
   cookie += `; Path=${options.path === undefined ? "/" : options.path}`;
   if (options.domain) cookie += `; Domain=${options.domain}`;
@@ -294,12 +297,32 @@ function serializeCookie(name, value, options = {}) {
   if (options.expires) cookie += `; Expires=${options.expires.toUTCString()}`;
   if (options.httpOnly) cookie += "; HttpOnly";
   if (options.secure) cookie += "; Secure";
+  if (options.partitioned) cookie += "; Partitioned";
   if (options.sameSite) {
     const sameSite = options.sameSite.toLowerCase();
     cookie += `; SameSite=${sameSite === "none" ? "None" : sameSite === "strict" ? "Strict" : "Lax"}`;
   }
   return cookie;
 }
+function assertServableCookie(name, options) {
+  const reject = reason => {
+    throw new Error(`serializeCookie: every browser silently rejects this cookie — ${reason}. ` + `It would never come back on a request, with no error anywhere.`);
+  };
+  const lower = name.toLowerCase();
+  if (lower.startsWith("__host-")) {
+    if (!options.secure) reject(`the __Host- prefix on \`${name}\` requires \`secure: true\``);
+    if (options.path !== undefined && options.path !== "/") reject(`the __Host- prefix on \`${name}\` requires \`Path=/\` (got \`${options.path}\`) — ` + `host-locking is the prefix's whole contract, so it cannot be path-scoped`);
+    if (options.domain) reject(`the __Host- prefix on \`${name}\` forbids \`Domain\` (got \`${options.domain}\`)`);
+  } else if (lower.startsWith("__secure-") && !options.secure) {
+    reject(`the __Secure- prefix on \`${name}\` requires \`secure: true\``);
+  }
+  if (options.sameSite && options.sameSite.toLowerCase() === "none" && !options.secure) {
+    reject("`SameSite=None` requires `secure: true`");
+  }
+  if (options.partitioned && !options.secure) {
+    reject("`Partitioned` requires `secure: true`");
+  }
+}
 const FLASH_COOKIE = "flash";
 const FLASH_MATCHER = new RegExp(`(?:^|;\\s*)${FLASH_COOKIE}=([^;]+)`);
 function hasFlashCookie(cookieHeader) {
@@ -338,6 +361,8 @@ function installListDriver(driver) {
   listDriver = driver;
 }
 const $$EVENT_OWNER = "_$SOLID_EVENT_OWNER";
+const $$EVENT_TUPLE = Symbol();
+const hasOwn = Object.prototype.hasOwnProperty;
 const INNER_OWNED = {};
 const delegatedEvents = new Set();
 const delegatedContainers = new Map();
@@ -463,7 +488,8 @@ function findOwner(target, state) {
 }
 function setProperty(node, name, value) {
   if (isHydrating(node)) return;
-  node[name] = value;
+  const nodeName = node.nodeName;
+  if (name === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else if ((name === "value" || name === "defaultValue") && (nodeName === "INPUT" || nodeName === "TEXTAREA")) node[name] = value ?? "";else node[name] = value;
 }
 let claimHandlers = null;
 const CLAIM_SEAM = Symbol.for("solid.element-claims");
@@ -497,7 +523,17 @@ function claimElement(node) {
 }
 function setAttribute(node, name, value) {
   if (isHydrating(node)) return;
-  if (value == null || value === false) node.removeAttribute(name);else node.setAttribute(name, value === true ? "" : value);
+  const selectMultiple = name === "multiple" && node.localName === "select";
+  if (value == null || value === false) node.removeAttribute(name);else {
+    node.setAttribute(name, value === true ? "" : value);
+    if (selectMultiple && !node._$multiple) {
+      const options = node.options;
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].defaultSelected) options[i].selected = true;
+      }
+    }
+  }
+  if (selectMultiple) node._$multiple = true;
   if (claimHandlers !== null && (name === "href" || name === "action")) claimElement(node);
 }
 function setAttributeNS(node, namespace, name, value) {
@@ -505,22 +541,32 @@ function setAttributeNS(node, namespace, name, value) {
   if (value == null || value === false) node.removeAttributeNS(namespace, name.indexOf(":") > -1 ? name.split(":").pop() : name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
 function className(node, value, prev) {
-  if (isHydrating(node)) return;
+  if (typeof value === "number") value = "" + value;
+  if (typeof prev === "number") prev = "" + prev;
+  if (isHydrating(node)) {
+    node._$classes = value && typeof value === "object" ? classListToObject(value) : undefined;
+    return;
+  }
   if (value == null || value === false) {
-    prev && node.removeAttribute("class");
+    if (prev || node._$classes) {
+      node.removeAttribute("class");
+      node._$classes = undefined;
+    }
     return;
   }
   if (typeof value === "string") {
+    node._$classes = undefined;
     value !== prev && node.setAttribute("class", value);
     return;
   }
+  let applied;
   if (typeof prev === "string") {
-    prev = {};
+    applied = {};
     node.removeAttribute("class");
-  } else prev = classListToObject(prev || {});
+  } else applied = node._$classes || classListToObject(prev || {});
   value = classListToObject(value);
-  const classKeys = Object.keys(value || {});
-  const prevKeys = Object.keys(prev);
+  const classKeys = Object.keys(value);
+  const prevKeys = Object.keys(applied);
   let i, len;
   for (i = 0, len = prevKeys.length; i < len; i++) {
     const key = prevKeys[i];
@@ -530,22 +576,34 @@ function className(node, value, prev) {
   for (i = 0, len = classKeys.length; i < len; i++) {
     const key = classKeys[i],
       classValue = !!value[key];
-    if (!key || key === "undefined" || prev[key] === classValue || !classValue) continue;
+    if (!key || key === "undefined" || applied[key] === classValue || !classValue) continue;
     node.classList.add(key);
   }
+  node._$classes = value;
 }
 function addEvent(node, name, handler, delegate) {
   if (delegate) {
+    const key = `$$${name}`;
+    let data;
     if (Array.isArray(handler)) {
-      node[`$$${name}`] = handler[0];
-      node[`$$${name}Data`] = handler[1];
-    } else node[`$$${name}`] = handler;
-  } else if (Array.isArray(handler)) {
+      data = handler[1];
+      node[key] = handler[0];
+    } else node[key] = handler;
+    node[`${key}Data`] = data;
+    return;
+  }
+  if (Array.isArray(handler)) {
     const handlerFn = handler[0];
-    node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e));
-  } else node.addEventListener(name, handler, typeof handler !== "function" && handler);
+    const listener = e => handlerFn.call(node, handler[1], e);
+    listener[$$EVENT_TUPLE] = handler;
+    node.addEventListener(name, listener);
+    return listener;
+  }
+  node.addEventListener(name, handler, typeof handler !== "function" && handler);
+  return handler;
 }
 function style(node, value, prev) {
+  if (isHydrating(node)) return;
   if (!value) {
     if (prev || node._$styles) {
       setAttribute(node, "style");
@@ -570,12 +628,13 @@ function style(node, value, prev) {
   }
   let v, s;
   for (s in applied) {
-    if (value[s] == null) {
+    if (!hasOwn.call(value, s) || value[s] == null) {
       nodeStyle.removeProperty(s);
       delete applied[s];
     }
   }
   for (s in value) {
+    if (!hasOwn.call(value, s)) continue;
     v = value[s];
     if (v != null && v !== applied[s]) {
       nodeStyle.setProperty(s, v);
@@ -584,20 +643,28 @@ function style(node, value, prev) {
   }
 }
 function setStyleProperty(node, name, value) {
+  if (isHydrating(node)) return;
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
 function spread(node, props = {}, skipChildren) {
   const prevProps = {};
-  if (!skipChildren) insert(node, () => props.children);
+  const get = typeof props === "function" ? props : () => props;
+  if (!skipChildren) insert(node, () => {
+    const source = get();
+    return hasOwn.call(source, "children") ? source.children : undefined;
+  });
   effect(() => {
-    const r = props.ref;
+    const source = get();
+    const r = hasOwn.call(source, "ref") && source.ref;
     (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
   }, () => {});
   effect(() => {
+    const source = get();
     const newProps = {};
-    for (const prop in props) {
+    for (const prop in source) {
+      if (!hasOwn.call(source, prop)) continue;
       if (prop === "children" || prop === "ref") continue;
-      newProps[prop] = props[prop];
+      newProps[prop] = source[prop];
     }
     return newProps;
   }, props => assign(node, props, true, prevProps, true));
@@ -627,6 +694,19 @@ function scope(fn) {
 const SCOPE_OPTIONS = {
   scope: true
 };
+let insertionParent = null;
+function getInsertionParent() {
+  return insertionParent;
+}
+function withInsertionParent(parent, fn) {
+  const prev = insertionParent;
+  insertionParent = parent;
+  try {
+    return fn();
+  } finally {
+    insertionParent = prev;
+  }
+}
 let hydrationRt = null;
 function installHydrationRuntime() {
   hydrationRt = {
@@ -694,7 +774,7 @@ function insert(parent, accessor, marker, initial, options) {
     if (listDriver(parent, accessor, marker, () => runWithOwner(owner, () => insert(parent, () => listAccessor(), marker, marker !== undefined ? [] : undefined, options)))) return;
   }
   if (typeof accessor !== "function") {
-    accessor = normalize(accessor, initial, multi, true);
+    accessor = withInsertionParent(parent, () => normalize(accessor, initial, multi, true));
     if (typeof accessor !== "function") {
       insertExpression(parent, accessor, initial, marker);
       host && tagHost(accessor, host);
@@ -709,9 +789,9 @@ function insert(parent, accessor, marker, initial, options) {
   let current = initial;
   effect(prev => {
     if (hydrationRt !== null) current = hydrationRt.reclaimRegion(current, parent, marker);
-    const value = normalize(accessor(), current, multi, true);
+    const value = withInsertionParent(parent, () => 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 => {
+    effect(() => (hydrationRt !== null && (current = hydrationRt.reclaimRegion(current, parent, marker)), withInsertionParent(parent, () => normalize(value, current, multi))), inner => {
       current = insertExpression(parent, inner, current, marker);
       host && tagHost(current, host);
     }, prev !== undefined && !(options && options.schedule) ? {
@@ -1429,7 +1509,8 @@ function classListToObject(classList) {
 function flattenClassList(list, result) {
   for (let i = 0, len = list.length; i < len; i++) {
     const item = list[i];
-    if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
+    if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);
+    else if (typeof item !== "boolean" && (item || item === 0)) result[item] = true;
   }
 }
 function assignProp(node, prop, value, prev, skipRef, nodeName) {
@@ -1445,12 +1526,13 @@ function assignProp(node, prop, value, prev, skipRef, nodeName) {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
-      const h = Array.isArray(prev) ? prev[0] : prev;
-      node.removeEventListener(name, h);
+      if (Array.isArray(value) && typeof prev === "function" && prev[$$EVENT_TUPLE] === value) return prev;
+      node.removeEventListener(name, prev, typeof prev !== "function" && prev);
     }
     if (delegate || value) {
-      addEvent(node, name, value, delegate);
+      const attached = addEvent(node, name, value, delegate);
       delegate && delegateEvents([name]);
+      if (!delegate) return attached;
     }
   } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
     if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
@@ -1490,7 +1572,7 @@ function eventHandler(e, container, state) {
     }
     if (handler && !node.disabled) {
       const data = node[`${key}Data`];
-      data !== undefined ? handler.call(node, data, e) : handler.call(node, e);
+      data !== undefined ? handler.call(node, data, e) : typeof handler === "function" ? handler.call(node, e) : handler.handleEvent(e);
       if (e.cancelBubble) return;
     }
     node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host);
@@ -1610,7 +1692,7 @@ function normalize(value, current, multi, doNotUnwrap) {
       const item = value[i],
         prev = current && current[i],
         t = typeof item;
-      if ((t === "string" || t === "number") && prev && prev.nodeType === 3) value[i] = prev;
+      if ((t === "string" || t === "number") && prev && prev.nodeType === 3 && isHydrating(prev)) value[i] = prev;
     }
   }
   return value;
@@ -2091,6 +2173,7 @@ function isSafeError(value) {
   return !!(value && (typeof value === "object" || typeof value === "function") && value[SAFE_ERROR]);
 }
 const REVALIDATE_HEADER = "X-Revalidate";
+const RESPONSE_HEADER_VALUE_LIMIT = 4096;
 function initWithRevalidate(init = {}) {
   const resolved = typeof init === "number" ? {
     status: init
@@ -2111,7 +2194,13 @@ function initWithRevalidate(init = {}) {
   } else {
     headers = new Headers(responseInit.headers);
   }
-  revalidate !== undefined && headers.set(REVALIDATE_HEADER, revalidate.toString());
+  if (revalidate !== undefined) {
+    const keys = revalidate.toString();
+    if (keys.length > RESPONSE_HEADER_VALUE_LIMIT) {
+      throw new TypeError(`revalidate names ${keys.length} characters of cache keys; past ` + `${RESPONSE_HEADER_VALUE_LIMIT} the ${REVALIDATE_HEADER} header would overflow ` + `receivers (an 8 KiB proxy buffer holds the whole header block) and the response ` + `dies at the socket after the mutation committed. Split the invalidation across ` + `calls or use coarser keys — a dropped key would be a silently stale cache, so ` + `the runtime refuses rather than trims.`);
+    }
+    headers.set(REVALIDATE_HEADER, keys);
+  }
   return {
     responseInit,
     headers
@@ -2129,7 +2218,12 @@ function redirect(url, init = 302) {
     responseInit.status = 302;
   }
   const target = typeof url === "string" ? url : url[HREF];
-  headers.set("Location", typeof target === "string" ? target : String(url));
+  const location = typeof target === "string" ? target : String(url);
+  const encoded = location.replace(/[^\x00-\x7f]/gu, encodeURIComponent);
+  if (encoded.length > RESPONSE_HEADER_VALUE_LIMIT) {
+    throw new TypeError(`redirect() target is ${encoded.length} characters; past ` + `${RESPONSE_HEADER_VALUE_LIMIT} the Location header (and the scripted transport's ` + `redirect header) would overflow receivers and the response dies at the socket. ` + `A target this size is usually unbounded input echoed into the url — carry the ` + `state server-side instead. Refused rather than trimmed: a cut target is a ` + `different address.`);
+  }
+  headers.set("Location", encoded);
   return new Response(null, {
     ...responseInit,
     headers
@@ -2145,11 +2239,19 @@ function reload(init = {}) {
     headers
   });
 }
+const NULL_BODY_STATUSES = new Set([204, 205, 304]);
 function respond(value, init = {}) {
   const {
     responseInit,
     headers
   } = initWithRevalidate(init);
+  for (const header of COMPOSED_BODY_FRAMING) headers.delete(header);
+  if (NULL_BODY_STATUSES.has(responseInit.status)) {
+    return new ResponseEnvelope(new Response(null, {
+      ...responseInit,
+      headers
+    }), value);
+  }
   headers.set("Content-Type", "application/json");
   return new ResponseEnvelope(new Response(JSON.stringify(value), {
     ...responseInit,
@@ -2259,9 +2361,24 @@ function dynamic(source) {
             return untrack(() => component(props));
           }
         case "string":
-          const el = sharedConfig.hydrating ? getNextElement() : createElement(component, untrack(() => props.is));
-          spread(el, props);
-          return el;
+          {
+            if (sharedConfig.hydrating) {
+              const el = getNextElement();
+              spread(el, props);
+              return el;
+            }
+            const owner = getOwner();
+            let el;
+            return () => {
+              if (!el) {
+                runWithOwner(owner, () => {
+                  el = createElement(component, untrack(() => props.is));
+                  spread(el, props);
+                });
+              }
+              return el;
+            };
+          }
       }
     });
   };
@@ -2270,8 +2387,15 @@ function Dynamic(props) {
   const Comp = dynamic(() => props.component);
   return createComponent(Comp, omit(props, "component"));
 }
+const AmbiguousSVGElements = /*#__PURE__*/new Set(["a", "script", "style", "title"]);
 function createElement(tagName, is = undefined) {
-  return SVGElements.has(tagName) ? document.createElementNS(Namespaces.svg, tagName) : MathMLElements.has(tagName) ? document.createElementNS(Namespaces.mathml, tagName) : document.createElement(tagName, {
+  if (SVGElements.has(tagName)) return document.createElementNS(Namespaces.svg, tagName);
+  if (MathMLElements.has(tagName)) return document.createElementNS(Namespaces.mathml, tagName);
+  if (AmbiguousSVGElements.has(tagName)) {
+    const parent = getInsertionParent();
+    if (parent && parent.namespaceURI === Namespaces.svg && parent.localName !== "foreignObject") return document.createElementNS(Namespaces.svg, tagName);
+  }
+  return document.createElement(tagName, {
     is
   });
 }
@@ -2303,4 +2427,4 @@ _moduleUrl) {
 function httpStatus(_code, _text) {}
 function httpHeader(_name, _value, _options) {}
 
-export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, 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, driveList, dynamic, dynamicProperty, effect, escape, generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, installListDriver, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, listDriver, markSafeError, memo, parseCookieHeader, patchDriver, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, rowProof, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, waitAsset, warmAsset };
+export { ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, HydrationScript, MathMLElements, NULL_BODY_STATUSES, Namespaces, Portal, RESPONSE_HEADER_VALUE_LIMIT, REVALIDATE_HEADER, RawTextElements, RequestContext, ResponseEnvelope, SAFE_ERROR, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, clearFlashCookie, clientOnly, commitEventResponse, composeMiddleware, createRequestEvent, createResponseStub, createSSRResponse, delegateEvents, driveList, dynamic, dynamicProperty, effect, escape, generateHydrationScript, getDelegatedRoot, getExpectedRedirectStatus, getFirstChild, getHydrationKey, getInsertionParent, getNextElement, getNextMarker, getNextMatch, getNextSibling, getRequestEvent, getServerFunctionMetadata, getServerFunctionRPC, hasFlashCookie, httpHeader, httpStatus, hydrate, insert, installHydrationRuntime, installListDriver, isDev, isHref, isResponseEnvelope, isSafeError, isServer, isServerFunction, listDriver, markSafeError, memo, parseCookieHeader, patchDriver, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, resolveSSRNode, respond, rowProof, runHydrationEvents, scope, serializeCookie, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassName, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle, ssrStyleProperty, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, useHead, waitAsset, warmAsset };