@solidjs/web 2.0.0-beta.25 → 2.0.0-beta.27

package/frames/dist/server.cjs

@@ -9,6 +9,7 @@ const runWithHydrationScope = (id, fn) => solidJs.runWithOwner(solidJs.createOwn
 }), fn);
 
 const DEFAULT_DISABLED_FEATURES = seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
+const serializeOnlyDisabledFeatures = () => process.env.NODE_ENV === "development" ? 0 : seroval.Feature.ErrorPrototypeStack;
 const HYDRATION_GLOBAL = "_$HY.r";
 const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
 web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
@@ -20,7 +21,7 @@ function createSerializer(options) {
   return new seroval.Serializer({
     ...options,
     plugins: resolveSerializerPlugins(options.plugins),
-    disabledFeatures: options.disabledFeatures === undefined ? DEFAULT_DISABLED_FEATURES : options.disabledFeatures
+    disabledFeatures: (options.disabledFeatures === undefined ? DEFAULT_DISABLED_FEATURES : options.disabledFeatures) | serializeOnlyDisabledFeatures()
   });
 }
 function createHydrationSerializer({
@@ -88,7 +89,7 @@ function createJSONSerializer({
       const stream = seroval.toCrossJSONStream(value, {
         refs,
         plugins: resolved.plugins,
-        disabledFeatures: resolved.disabledFeatures,
+        disabledFeatures: resolved.disabledFeatures | serializeOnlyDisabledFeatures(),
         onParse(node, initial) {
           onData({
             key,
@@ -245,7 +246,7 @@ function applyAssetTracking(context, tracking, manifest) {
     context.resolveAssetsSync = resolve;
   }
 }
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&(8!==o.nodeType||o.nodeValue!=="pl-"+e);)t=o.nextSibling,o.remove(),o=t;_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
+const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e)))return 0;if(!(o=document.getElementById("pl-"+e)))return(_$HY.dq=_$HY.dq||{})[e]=1,0;for(;o&&(8!==o.nodeType||o.nodeValue!=="pl-"+e);)t=o.nextSibling,o.remove(),o=t;t=o.parentNode,_$HY.done?o.remove():o.replaceWith(n.content),n.remove(),_$HY.fe(e,t),$dfd();return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return(_$HY.dlq=_$HY.dlq||{})[e]=1,0;if(o._$fl)return 1;for(n=o.nextSibling;n;){if(8===n.nodeType&&n.nodeValue==="pl-"+e){o.parentNode&&o.parentNode.insertBefore(o.content.cloneNode(!0),n),o._$fl=1,$dfd();return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[i])}function $dfd(e,i){if(e=_$HY.dq){_$HY.dq=0;for(i in e)$df(i)}if(e=_$HY.dlq){_$HY.dlq=0;for(i in e)$dfl(i)}}function $dfs(e,c,d){(_$HY.sc=_$HY.sc||{})[e]=c,d&&((_$HY.sd=_$HY.sd||{})[e]=1)}function $dfg(e,g,i,k){if(!(g=_$HY.sg&&_$HY.sg[e]))return;for(i=0;i<g.length;i++)if(_$HY.sc&&_$HY.sc[g[i]]>0)return;for(i=0;i<g.length;i++)k=g[i],delete _$HY.sg[k],$df(k)}function $dfc(e){if(--_$HY.sc[e]<=0){delete _$HY.sc[e],_$HY.sg&&_$HY.sg[e]?$dfg(e):!(_$HY.sd&&_$HY.sd[e])&&$df(e);_$HY.sd&&delete _$HY.sd[e]}}function $dfj(e,i,n){for(i=0;i<e.length;i++)if(_$HY.sc&&_$HY.sc[e[i]]>0){for(n=0;n<e.length;n++)(_$HY.sg=_$HY.sg||{})[e[n]]=e;return}for(i=0;i<e.length;i++)$df(e[i])}`;
 function renderToStream(code, options = {}) {
   let {
     nonce,
@@ -317,11 +318,7 @@ function renderToStream(code, options = {}) {
       }
     },
     shell(shellHtml, meta) {
-      shellHtml = injectBeforeHead(shellHtml, meta.assets);
-      shellHtml = injectPreloadLinks(meta.preloads, shellHtml);
-      shellHtml = injectInlineStyles(meta.inlineStyles, shellHtml, nonce);
-      if (meta.tasks.length) shellHtml = injectScripts(shellHtml, meta.tasks, nonce);
-      buffer.write(shellHtml);
+      buffer.write(assembleDocument(shellHtml, meta.assets, meta.preloads, meta.inlineStyles, meta.tasks.length ? meta.tasks : "", nonce));
     },
     ...options.sink
   };
@@ -952,25 +949,36 @@ function resolveAssetsHtml(assets) {
   for (let i = 0, len = assets.length; i < len; i++) out += assets[i]();
   return out;
 }
-function injectBeforeHead(html, content) {
-  if (!content) return html;
-  const index = html.indexOf("</head>");
-  if (index === -1) return html;
-  return html.slice(0, index) + content + html.slice(index);
-}
-function injectPreloadLinks(emittedAssets, html, nonce) {
-  if (!emittedAssets.size) return html;
-  let links = "";
-  for (const url of emittedAssets) {
-    if (url.endsWith(".css")) {
-      links += `<link rel="stylesheet" href="${url}">`;
-    } else {
-      links += `<link rel="modulepreload" href="${url}">`;
+function assembleDocument(html, assetsHtml, emittedAssets, inlineStyles, scripts, nonce) {
+  const scriptTag = scripts ? `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>` : "";
+  if (!assetsHtml && !(emittedAssets && emittedAssets.size) && !(inlineStyles && inlineStyles.size)) {
+    if (!scriptTag) return html;
+    const xs = html.indexOf("<!--xs-->");
+    return xs === -1 ? html + scriptTag : html.slice(0, xs) + scriptTag + html.slice(xs);
+  }
+  const headIdx = html.indexOf("</head>");
+  if (headIdx === -1) {
+    if (!scriptTag) return html;
+    const xs = html.indexOf("<!--xs-->");
+    return xs === -1 ? html + scriptTag : html.slice(0, xs) + scriptTag + html.slice(xs);
+  }
+  let head = assetsHtml || "";
+  if (emittedAssets && emittedAssets.size) {
+    for (const url of emittedAssets) {
+      head += url.endsWith(".css") ? `<link rel="stylesheet" href="${url}">` : `<link rel="modulepreload" href="${url}">`;
+    }
+  }
+  if (inlineStyles && inlineStyles.size) {
+    for (const entry of inlineStyles.values()) {
+      if (entry.emitted) continue;
+      entry.emitted = true;
+      head += renderInlineStyle(entry, nonce);
     }
   }
-  const index = html.indexOf("</head>");
-  if (index === -1) return html;
-  return html.slice(0, index) + links + html.slice(index);
+  if (!scriptTag) return html.slice(0, headIdx) + head + html.slice(headIdx);
+  const xsIdx = html.indexOf("<!--xs-->");
+  if (xsIdx === -1) return html.slice(0, headIdx) + head + html.slice(headIdx) + scriptTag;
+  return xsIdx < headIdx ? html.slice(0, xsIdx) + scriptTag + html.slice(xsIdx, headIdx) + head + html.slice(headIdx) : html.slice(0, headIdx) + head + html.slice(headIdx, xsIdx) + scriptTag + html.slice(xsIdx);
 }
 function serializeFragmentAssets(key, boundaryModules, context) {
   const map = boundaryModules.get(key);
@@ -1022,26 +1030,6 @@ function renderInlineStyle(entry, nonce) {
   }
   return `<style${nonce ? ` nonce="${nonce}"` : ""} data-asset="${escape(entry.id, true)}"${attrs}>${escapeStyleContent(entry.content)}</style>`;
 }
-function injectInlineStyles(inlineStyles, html, nonce) {
-  if (!inlineStyles.size) return html;
-  const index = html.indexOf("</head>");
-  if (index === -1) return html;
-  let out = "";
-  for (const entry of inlineStyles.values()) {
-    if (entry.emitted) continue;
-    entry.emitted = true;
-    out += renderInlineStyle(entry, nonce);
-  }
-  return out ? html.slice(0, index) + out + html.slice(index) : html;
-}
-function injectScripts(html, scripts, nonce) {
-  const tag = `<script${nonce ? ` nonce="${nonce}"` : ""}>${scripts}</script>`;
-  const index = html.indexOf("<!--xs-->");
-  if (index > -1) {
-    return html.slice(0, index) + tag + html.slice(index);
-  }
-  return html + tag;
-}
 function waitForFragments(registry, key) {
   for (const k of [...registry.keys()].reverse()) {
     if (key.startsWith(k)) return k;
@@ -1183,7 +1171,12 @@ function createFrameSink(emit, frame) {
     version
   } = frame;
   const styledKeys = new Set();
+  const regionKeys = new Map();
+  const frameOf = key => regionKeys.get(key) || id;
   return {
+    tagRegion(key, childId) {
+      if (!regionKeys.has(key)) regionKeys.set(key, childId);
+    },
     shell(html, meta = {}) {
       if (meta.preloads && meta.preloads.size) {
         const styles = [];
@@ -1231,13 +1224,14 @@ function createFrameSink(emit, frame) {
       }
     },
     fragment(key, value, meta = {}) {
+      const fid = frameOf(key);
       const links = meta.styles && meta.styles.links || [];
       const inline = meta.styles && meta.styles.inline || [];
       if (links.length || inline.length) {
         if (links.length) styledKeys.add(key);
         const chunk = {
           type: "assets",
-          id,
+          id: fid,
           version,
           key
         };
@@ -1253,7 +1247,7 @@ function createFrameSink(emit, frame) {
       }
       emit({
         type: "fragment",
-        id,
+        id: fid,
         version,
         key,
         html: value
@@ -1261,7 +1255,7 @@ function createFrameSink(emit, frame) {
       if (meta.error) {
         emit({
           type: "error",
-          id,
+          id: fid,
           version,
           key,
           error: {
@@ -1272,7 +1266,7 @@ function createFrameSink(emit, frame) {
       if (!meta.revealGroup) {
         emit({
           type: "reveal",
-          id,
+          id: fid,
           version,
           keys: [key],
           waitForStyles: !!links.length
@@ -1280,17 +1274,26 @@ function createFrameSink(emit, frame) {
       }
     },
     reveal(keys, meta = {}) {
-      let waitForStyles = false;
-      for (const key of keys) if (styledKeys.has(key)) waitForStyles = true;
-      const chunk = {
-        type: "reveal",
-        id,
-        version,
-        keys,
-        waitForStyles
-      };
-      if (meta.fallback) chunk.fallback = true;
-      emit(chunk);
+      const byFrame = new Map();
+      for (const key of keys) {
+        const fid = frameOf(key);
+        let group = byFrame.get(fid);
+        if (!group) byFrame.set(fid, group = []);
+        group.push(key);
+      }
+      for (const [fid, groupKeys] of byFrame) {
+        let waitForStyles = false;
+        for (const key of groupKeys) if (styledKeys.has(key)) waitForStyles = true;
+        const chunk = {
+          type: "reveal",
+          id: fid,
+          version,
+          keys: groupKeys,
+          waitForStyles
+        };
+        if (meta.fallback) chunk.fallback = true;
+        emit(chunk);
+      }
     },
     asset(type, url) {
       if (type !== "module") return;
@@ -1404,6 +1407,22 @@ function slotRange(occurrence) {
     t: `<!--slot:${occurrence}:start--><!--slot:${occurrence}:end-->`
   };
 }
+const OCCURRENCE_UNSAFE = /[^A-Za-z0-9_.-]/g;
+function encodeOccurrenceKey(key) {
+  return String(key).replace(OCCURRENCE_UNSAFE, c => {
+    const code = c.codePointAt(0);
+    return "%" + (code < 16 ? "0" : "") + code.toString(16);
+  });
+}
+function occurrenceId(prop, raw, counts) {
+  const k = raw.$key;
+  if (typeof k === "string" || typeof k === "number") {
+    return `${prop}#${encodeOccurrenceKey(k)}`;
+  }
+  const n = counts[prop] || 0;
+  counts[prop] = n + 1;
+  return `${prop}#${n}`;
+}
 function createDocumentSlotProps(clientProps, frameId) {
   const counts = Object.create(null);
   const getters = new Map();
@@ -1440,36 +1459,37 @@ function createDocumentSlotProps(clientProps, frameId) {
             });
           }
           const raw = callArgs[0];
-          let occurrence;
-          const k = raw.$key;
-          if (typeof k === "string" || typeof k === "number") {
-            occurrence = `${prop}#${k}`;
-          } else {
-            const n = counts[prop] || 0;
-            counts[prop] = n + 1;
-            occurrence = `${prop}#${n}`;
-          }
+          const occurrence = occurrenceId(prop, raw, counts);
           const slot = clientProps[prop];
           if (typeof slot !== "function") return range(occurrence, undefined);
           const resolved = {};
-          const regions = [];
+          const vals = {};
           for (const key of Object.keys(raw)) {
-            const value = raw[key];
-            if (key !== "$key" && isServerContent(value)) {
+            if (key === "$key") continue;
+            let value = raw[key];
+            for (let d = 0; typeof value === "function" && d < 16; d++) value = value();
+            vals[key] = value;
+          }
+          const regions = [];
+          for (const key of Object.keys(vals)) {
+            const value = vals[key];
+            if (isServerContent(value)) {
               const childId = `${frameId}.${occurrence}.${key}`;
               const region = {
                 key,
                 childId,
                 value,
-                used: false
+                used: false,
+                locked: false
               };
               regions.push(region);
               resolved[key] = () => {
+                if (region.locked) return [];
                 region.used = true;
                 return [{
-                  t: `<!--frame:${childId}:start-->`
+                  t: frameElementOpen(childId)
                 }, value, {
-                  t: `<!--frame:${childId}:end-->`
+                  t: FRAME_ELEMENT_CLOSE
                 }];
               };
             } else {
@@ -1479,12 +1499,10 @@ function createDocumentSlotProps(clientProps, frameId) {
           const out = scoped(occurrence, () => range(occurrence, slot(resolved)));
           const unused = regions.filter(r => !r.used);
           if (solidJs.sharedConfig.context) {
-            const rendered = renderedHtmlOf(out);
             const args = {};
             let any = false;
-            for (const key of Object.keys(raw)) {
-              const value = raw[key];
-              if (key === "$key") continue;
+            for (const key of Object.keys(vals)) {
+              const value = vals[key];
               const region = regions.find(r => r.key === key);
               if (region) {
                 if (!region.used) {
@@ -1496,16 +1514,12 @@ function createDocumentSlotProps(clientProps, frameId) {
                 continue;
               }
               if (isServerContent(value)) continue;
-              const t = typeof value;
-              if ((t === "string" || t === "number") && rendered !== null) {
-                const needle = t === "string" ? solidJs.sharedConfig.context.escape(String(value)) : String(value);
-                if (needle !== "" && rendered.includes(needle)) continue;
-              }
               args[key] = value;
               any = true;
             }
             if (any) solidJs.sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
             for (const region of unused) {
+              region.locked = true;
               solidJs.sharedConfig.context.serialize(`sc:region:${region.childId}`, resolveRegionHtml(solidJs.sharedConfig.context, region.value));
             }
           }
@@ -1517,28 +1531,26 @@ function createDocumentSlotProps(clientProps, frameId) {
     }
   });
 }
+const FRAME_TAG = "dx-frame";
+const FRAME_ID_ATTR = "data-fid";
+function frameElementOpen(id) {
+  const escaped = solidJs.sharedConfig.context ? solidJs.sharedConfig.context.escape(String(id), true) : String(id);
+  return `<${FRAME_TAG} ${FRAME_ID_ATTR}="${escaped}" style="display:contents">`;
+}
+const FRAME_ELEMENT_CLOSE = `</${FRAME_TAG}>`;
 function frameTransformDirectResult(value, {
   id
 }) {
   if (typeof value !== "function") return value;
   const component = value;
   const wrapped = props => [{
-    t: `<!--frame:${id}:start-->`
+    t: frameElementOpen(id)
   }, serverOwned(() => component(createDocumentSlotProps(props, id))), {
-    t: `<!--frame:${id}:end-->`
+    t: FRAME_ELEMENT_CLOSE
   }];
   wrapped[SERVER_COMPONENT] = id;
   return wrapped;
 }
-function renderedHtmlOf(out) {
-  try {
-    const res = solidJs.sharedConfig.context.resolve(out);
-    if (res && res.t && (!res.h || !res.h.length)) {
-      return res.t[0].replace(/<!--[^>]*-->/g, "").replace(/ _hk=("[^"]*"|[^\s>]+)/g, "");
-    }
-  } catch (e) {}
-  return null;
-}
 function resolveRegionHtml(ctx, node) {
   const res = ctx.resolve(node);
   if (!res || !res.t) return String(res ?? "");
@@ -1613,37 +1625,41 @@ function createSlotProps(sink, frame) {
             return slotRange(prop);
           }
           const raw = callArgs[0];
-          let occurrence;
-          const k = raw.$key;
-          if (typeof k === "string" || typeof k === "number") {
-            occurrence = `${prop}#${k}`;
-          } else {
-            const n = counts[prop] || 0;
-            counts[prop] = n + 1;
-            occurrence = `${prop}#${n}`;
-          }
+          const occurrence = occurrenceId(prop, raw, counts);
           const args = {};
           for (const key of Object.keys(raw)) {
-            const value = raw[key];
-            const t = typeof value;
-            if (value == null || t === "string" || t === "number" || t === "boolean") {
-              args[key] = value;
-            } else if (isServerContent(value)) {
-              const resolved = solidJs.sharedConfig.context.resolve(value);
-              if (resolved.h.length) {
-                throw new Error("Async server content in slot args is not supported yet (arg '" + key + "' of " + occurrence + "). Move the async read above the slot or into a fragment.");
+            if (key === "$key") continue;
+            const childId = `${frame.id}.${occurrence}.${key}`;
+            const ctx = solidJs.sharedConfig.context;
+            const origRegister = ctx.registerFragment;
+            ctx.registerFragment = (fragKey, fragOptions) => {
+              sink.tagRegion(fragKey, childId);
+              return origRegister.call(ctx, fragKey, fragOptions);
+            };
+            try {
+              let value = raw[key];
+              for (let d = 0; typeof value === "function" && d < 16; d++) value = value();
+              const t = typeof value;
+              if (value == null || t === "string" || t === "number" || t === "boolean") {
+                args[key] = value;
+              } else if (isServerContent(value)) {
+                const resolved = ctx.resolve(value);
+                if (resolved.h.length) {
+                  throw new Error("Async server content in a slot arg needs a boundary (arg '" + key + "' of " + occurrence + "). Wrap the async read in a <Suspense>, or move it above the slot.");
+                }
+                sink.region(childId, resolved.t[0]);
+                args[key] = {
+                  $frame: childId
+                };
+              } else {
+                const ref = `arg:${occurrence}:${key}`;
+                ctx.serialize(ref, value);
+                args[key] = {
+                  $ref: ref
+                };
               }
-              const childId = `${frame.id}.${occurrence}.${key}`;
-              sink.region(childId, resolved.t[0]);
-              args[key] = {
-                $frame: childId
-              };
-            } else {
-              const ref = `arg:${occurrence}:${key}`;
-              solidJs.sharedConfig.context.serialize(ref, value);
-              args[key] = {
-                $ref: ref
-              };
+            } finally {
+              ctx.registerFragment = origRegister;
             }
           }
           sink.slot(occurrence, args);