@solidjs/web 2.0.0-experimental.5 → 2.0.0-experimental.7

package/dist/server.cjs

@@ -4,39 +4,9 @@ var solidJs = require('solid-js');
 var seroval = require('seroval');
 var web = require('seroval-plugins/web');
 
-const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
-const BooleanAttributes = /*#__PURE__*/new Set(booleans);
-const Properties = /*#__PURE__*/new Set(["value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const Properties = /*#__PURE__*/new Set([
+"value", "checked", "selected", "muted"]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
-  class: "className",
-  formnovalidate: {
-    $: "formNoValidate",
-    BUTTON: 1,
-    INPUT: 1
-  },
-  ismap: {
-    $: "isMap",
-    IMG: 1
-  },
-  nomodule: {
-    $: "noModule",
-    SCRIPT: 1
-  },
-  playsinline: {
-    $: "playsInline",
-    VIDEO: 1
-  },
-  readonly: {
-    $: "readOnly",
-    INPUT: 1,
-    TEXTAREA: 1
-  }
-});
-function getPropAlias(prop, tagName) {
-  const a = PropAliases[prop];
-  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
-}
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -47,7 +17,9 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
-const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "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", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6"]);
+const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "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", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input", "h1", "h2", "h3", "h4", "h5", "h6",
+"webview",
+"isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
 const memo = fn => solidJs.createMemo(() => fn());
 
@@ -62,7 +34,7 @@ function createSerializer({
 }) {
   return new seroval.Serializer({
     scopeId,
-    plugins: [
+    plugins: [web.AbortSignalPlugin,
     web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
     web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin],
     globalIdentifier: GLOBAL_IDENTIFIER,
@@ -97,20 +69,18 @@ function renderToString(code, options = {}) {
     onError: options.onError
   });
   solidJs.sharedConfig.context = {
-    id: renderId,
-    resources: {},
     assets: [],
     nonce,
-    resolve(value) {
-      return resolveSSRNode(escape(value));
-    },
+    escape: escape,
+    resolve: resolveSSRNode,
+    ssr: ssr,
     serialize(id, p) {
       !solidJs.sharedConfig.context.noHydrate && serializer.write(id, p);
     }
   };
   let html = solidJs.createRoot(d => {
     setTimeout(d);
-    return resolveSSRNode(escape(code()));
+    return resolveSSRSync(escape(code()));
   }, {
     id: renderId
   });
@@ -187,9 +157,7 @@ function renderToStream(code, options = {}) {
     }
   };
   solidJs.sharedConfig.context = context = {
-    id: renderId,
     async: true,
-    resources: {},
     assets: [],
     nonce,
     block(p) {
@@ -201,7 +169,7 @@ function renderToStream(code, options = {}) {
       const first = html.indexOf(placeholder);
       if (first === -1) return;
       const last = html.indexOf(`<!--!$/${id}-->`, first + placeholder.length);
-      html = html.slice(0, first) + resolveSSRNode(escape(payloadFn())) + html.slice(last + placeholder.length + 1);
+      html = html.slice(0, first) + resolveSSRSync(escape(payloadFn())) + html.slice(last + placeholder.length + 1);
     },
     serialize(id, p, wait) {
       const serverOnly = solidJs.sharedConfig.context.noHydrate;
@@ -214,35 +182,46 @@ function renderToStream(code, options = {}) {
         });
       } else if (!serverOnly) serializer.write(id, p);
     },
-    resolve(value) {
-      return resolveSSRNode(escape(value));
-    },
+    escape: escape,
+    resolve: resolveSSRNode,
+    ssr: ssr,
     registerFragment(key) {
       if (!registry.has(key)) {
         let resolve, reject;
         const p = new Promise((r, rej) => (resolve = r, reject = rej));
-        registry.set(key, err => queue(() => queue(() => {
-          err ? reject(err) : resolve(true);
-          queue(flushEnd);
-        })));
+        registry.set(key, {
+          resolve: err => queue(() => queue(() => {
+            err ? reject(err) : resolve(true);
+            queue(flushEnd);
+          }))
+        });
         serializer.write(key, p);
       }
       return (value, error) => {
         if (registry.has(key)) {
-          const resolve = registry.get(key);
+          const item = registry.get(key);
           registry.delete(key);
-          if (waitForFragments(registry, key)) {
-            resolve();
+          if (item.children) {
+            for (const k in item.children) {
+              value = replacePlaceholder(value, k, item.children[k]);
+            }
+          }
+          const parentKey = waitForFragments(registry, key);
+          if (parentKey) {
+            const parent = registry.get(parentKey);
+            parent.children ||= {};
+            parent.children[key] = value !== undefined ? value : "";
+            item.resolve();
             return;
           }
           if (!completed) {
             if (!firstFlushed) {
               queue(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              resolve(error);
+              item.resolve(error);
             } else {
               buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
               pushTask(`$df("${key}")${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
-              resolve(error);
+              item.resolve(error);
               scriptFlushed = true;
             }
           }
@@ -253,14 +232,13 @@ function renderToStream(code, options = {}) {
   };
   let html = solidJs.createRoot(d => {
     dispose = d;
-    return resolveSSRNode(escape(code()));
+    return resolveSSRSync(escape(code()));
   }, {
     id: renderId
   });
   function doShell() {
     if (shellCompleted) return;
     solidJs.sharedConfig.context = context;
-    context.noHydrate = true;
     html = injectAssets(context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
@@ -343,15 +321,7 @@ function HydrationScript(props) {
   }));
 }
 function ssr(t, ...nodes) {
-  if (nodes.length) {
-    let result = "";
-    for (let i = 0; i < nodes.length; i++) {
-      result += t[i];
-      const node = nodes[i];
-      if (node !== undefined) result += resolveSSRNode(node);
-    }
-    t = result + t[nodes.length];
-  }
+  if (nodes.length) return resolveSSR(t, nodes);
   return {
     t
   };
@@ -381,11 +351,17 @@ function ssrStyle(value) {
     const v = value[s];
     if (v != undefined) {
       if (i) result += ";";
-      result += `${s}:${escape(v, true)}`;
+      const r = escape(v, true);
+      if (r != undefined && r !== "undefined") {
+        result += `${s}:${r}`;
+      }
     }
   }
   return result;
 }
+function ssrStyleProperty(name, value) {
+  return value != null ? name + value : "";
+}
 function ssrElement(tag, props, children, needsId) {
   if (props == null) props = {};else if (typeof props === "function") props = props();
   const skipChildren = VOID_ELEMENTS.test(tag);
@@ -402,17 +378,13 @@ function ssrElement(tag, props, children, needsId) {
       result += `style="${ssrStyle(value)}"`;
     } else if (prop === "class") {
       result += `class="${ssrClassName(value)}"`;
-    } else if (BooleanAttributes.has(prop)) {
-      if (value) result += prop;else continue;
     } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on" || prop.slice(0, 5) === "prop:") {
       continue;
-    } else if (prop.slice(0, 5) === "bool:") {
+    } else if (typeof value === "boolean") {
       if (!value) continue;
-      result += escape(prop.slice(5));
-    } else if (prop.slice(0, 5) === "attr:") {
-      result += `${escape(prop.slice(5))}="${escape(value, true)}"`;
+      result += escape(prop);
     } else {
-      result += `${escape(prop)}="${escape(value, true)}"`;
+      result += value === "" ? escape(prop) : `${escape(prop)}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
   }
@@ -420,12 +392,10 @@ function ssrElement(tag, props, children, needsId) {
     t: result + "/>"
   };
   if (typeof children === "function") children = children();
-  return {
-    t: result + `>${resolveSSRNode(children, true)}</${tag}>`
-  };
+  return ssr([result + ">", `</${tag}>`], resolveSSRNode(children, undefined, true));
 }
-function ssrAttribute(key, value, isBoolean) {
-  return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
+function ssrAttribute(key, value) {
+  return value == null || value === false ? "" : value === true ? ` ${key}` : ` ${key}="${value}"`;
 }
 function ssrHydrationKey() {
   const hk = getHydrationKey();
@@ -434,12 +404,12 @@ function ssrHydrationKey() {
 function escape(s, attr) {
   const t = typeof s;
   if (t !== "string") {
-    if (!attr && t === "function") return escape(s());
     if (!attr && Array.isArray(s)) {
+      s = s.slice();
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
     }
-    if (attr && t === "boolean") return String(s);
+    if (attr && t === "boolean") return s;
     return s;
   }
   const delim = attr ? '"' : "<";
@@ -477,29 +447,6 @@ function escape(s, attr) {
   }
   return left < s.length ? out + s.substring(left) : out;
 }
-function resolveSSRNode(node, top) {
-  const t = typeof node;
-  if (t === "string") return node;
-  if (node == null || t === "boolean") return "";
-  if (Array.isArray(node)) {
-    let prev = {};
-    let mapped = "";
-    for (let i = 0, len = node.length; i < len; i++) {
-      if (!top && typeof prev !== "object" && typeof node[i] !== "object") mapped += `<!--!$-->`;
-      mapped += resolveSSRNode(prev = node[i]);
-    }
-    return mapped;
-  }
-  if (t === "object") return node.t;
-  if (t === "function") {
-    try {
-      return resolveSSRNode(node());
-    } catch (err) {
-      if (!solidJs.ssrHandleError(err)) throw err;
-    }
-  }
-  return String(node);
-}
 function mergeProps(...sources) {
   const target = {};
   for (let i = 0; i < sources.length; i++) {
@@ -528,7 +475,7 @@ function getHydrationKey() {
   return hydrate && !hydrate.noHydrate && solidJs.sharedConfig.getNextContextId();
 }
 function useAssets(fn) {
-  solidJs.sharedConfig.context.assets.push(() => resolveSSRNode(escape(fn())));
+  solidJs.sharedConfig.context.assets.push(() => resolveSSRSync(escape(fn())));
 }
 function getAssets() {
   const assets = solidJs.sharedConfig.context.assets;
@@ -547,8 +494,6 @@ function Hydration(props) {
   const context = solidJs.sharedConfig.context;
   solidJs.sharedConfig.context = {
     ...context,
-    count: 0,
-    id: solidJs.sharedConfig.getNextContextId(),
     noHydrate: false
   };
   const res = props.children;
@@ -593,7 +538,7 @@ function injectScripts(html, scripts, nonce) {
 }
 function waitForFragments(registry, key) {
   for (const k of [...registry.keys()].reverse()) {
-    if (key.startsWith(k)) return true;
+    if (key.startsWith(k)) return k;
   }
   return false;
 }
@@ -619,6 +564,62 @@ function flattenClassList(list, result) {
     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;
   }
 }
+function resolveSSR(template, holes, result = {
+  t: [""],
+  h: [],
+  p: []
+}) {
+  for (let i = 0; i < holes.length; i++) {
+    const hole = holes[i];
+    result.t[result.t.length - 1] += template[i];
+    if (hole == null || hole === true || hole === false) continue;
+    resolveSSRNode(hole, result);
+  }
+  result.t[result.t.length - 1] += template[template.length - 1];
+  return result;
+}
+function resolveSSRNode(node, result = {
+  t: [""],
+  h: [],
+  p: []
+}, top) {
+  const t = typeof node;
+  if (t === "string" || t === "number") {
+    result.t[result.t.length - 1] += node;
+  } else if (node == null || t === "boolean") ; else if (Array.isArray(node)) {
+    let prev = {};
+    for (let i = 0, len = node.length; i < len; i++) {
+      if (!top && typeof prev !== "object" && typeof node[i] !== "object") result.t[result.t.length - 1] += `<!--!$-->`;
+      resolveSSRNode(prev = node[i], result);
+    }
+  } else if (t === "object") {
+    if (node.h) {
+      result.t[result.t.length - 1] += node.t[0];
+      if (node.t.length > 1) {
+        result.t.push(...node.t.slice(1));
+        result.h.push(...node.h);
+        result.p.push(...node.p);
+      }
+    } else result.t[result.t.length - 1] += node.t;
+  } else if (t === "function") {
+    try {
+      resolveSSRNode(node(), result);
+    } catch (err) {
+      const p = solidJs.ssrHandleError(err);
+      if (p) {
+        result.h.push(node);
+        result.p.push(p);
+        result.t.push("");
+      }
+    }
+  }
+  return result;
+}
+function resolveSSRSync(node) {
+  const res = resolveSSRNode(node);
+  if (!res.h.length) return res.t[0];
+  throw new Error("This value cannot be rendered synchronously. Are you missing a Suspsense boundary?");
+}
 const RequestContext = Symbol();
 function getRequestEvent() {
   return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.log("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
@@ -689,6 +690,10 @@ Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
 });
+Object.defineProperty(exports, "ssrRunInScope", {
+  enumerable: true,
+  get: function () { return solidJs.ssrRunInScope; }
+});
 Object.defineProperty(exports, "untrack", {
   enumerable: true,
   get: function () { return solidJs.untrack; }
@@ -718,7 +723,6 @@ exports.getHydrationKey = getHydrationKey;
 exports.getNextElement = notSup;
 exports.getNextMarker = notSup;
 exports.getNextMatch = notSup;
-exports.getPropAlias = getPropAlias;
 exports.getRequestEvent = getRequestEvent;
 exports.hydrate = notSup;
 exports.insert = notSup;
@@ -730,7 +734,6 @@ exports.render = notSup;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;
 exports.renderToStringAsync = renderToStringAsync;
-exports.resolveSSRNode = resolveSSRNode;
 exports.runHydrationEvents = notSup;
 exports.setAttribute = notSup;
 exports.setAttributeNS = notSup;
@@ -742,6 +745,7 @@ exports.ssrClassName = ssrClassName;
 exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrStyle = ssrStyle;
+exports.ssrStyleProperty = ssrStyleProperty;
 exports.style = notSup;
 exports.template = notSup;
 exports.useAssets = useAssets;