@solidjs/web 2.0.0-beta.16 → 2.0.0-beta.18

package/dist/server.cjs

@@ -66,25 +66,32 @@ const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectF
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
-const ES2017FLAG = seroval.Feature.AggregateError |
-seroval.Feature.BigIntTypedArray;
-const GLOBAL_IDENTIFIER = "_$HY.r";
-function createSerializer({
+const DEFAULT_DISABLED_FEATURES = seroval.Feature.AggregateError | seroval.Feature.BigIntTypedArray;
+const HYDRATION_GLOBAL = "_$HY.r";
+const DEFAULT_WEB_PLUGINS = Object.freeze([web.AbortSignalPlugin,
+web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
+web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin]);
+function resolveSerializerPlugins(customPlugins) {
+  return customPlugins ? [...customPlugins, ...DEFAULT_WEB_PLUGINS] : [...DEFAULT_WEB_PLUGINS];
+}
+function createSerializer(options) {
+  return new seroval.Serializer({
+    ...options,
+    plugins: resolveSerializerPlugins(options.plugins),
+    disabledFeatures: options.disabledFeatures === undefined ? DEFAULT_DISABLED_FEATURES : options.disabledFeatures
+  });
+}
+function createHydrationSerializer({
   onData,
   onDone,
   scopeId,
   onError,
-  plugins: customPlugins
+  plugins
 }) {
-  const defaultPlugins = [web.AbortSignalPlugin,
-  web.CustomEventPlugin, web.DOMExceptionPlugin, web.EventPlugin,
-  web.FormDataPlugin, web.HeadersPlugin, web.ReadableStreamPlugin, web.RequestPlugin, web.ResponsePlugin, web.URLSearchParamsPlugin, web.URLPlugin];
-  const allPlugins = customPlugins ? [...customPlugins, ...defaultPlugins] : defaultPlugins;
-  return new seroval.Serializer({
+  return createSerializer({
     scopeId,
-    plugins: allPlugins,
-    globalIdentifier: GLOBAL_IDENTIFIER,
-    disabledFeatures: ES2017FLAG,
+    plugins,
+    globalIdentifier: HYDRATION_GLOBAL,
     onData,
     onDone,
     onError
@@ -93,6 +100,7 @@ function createSerializer({
 function getLocalHeaderScript(id) {
   return seroval.getCrossReferenceHeader(id) + ";";
 }
+seroval.Feature.RegExp;
 
 function joinAssetPath(base, file) {
   if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(file)) return file;
@@ -124,7 +132,7 @@ function resolveAssets(moduleUrl, manifest) {
   };
 }
 function registerEntryAssets(manifest) {
-  if (!manifest) return;
+  if (!manifest || typeof manifest === "function" || typeof manifest.resolve === "function") return;
   const ctx = solidJs.sharedConfig.context;
   if (!ctx?.registerAsset) return;
   for (const key in manifest) {
@@ -141,25 +149,48 @@ function createAssetTracking() {
   const boundaryModules = new Map();
   const boundaryStyles = new Map();
   const emittedAssets = new Set();
+  const inlineStyles = new Map();
   let currentBoundaryId = null;
   return {
     boundaryModules,
     boundaryStyles,
     emittedAssets,
+    inlineStyles,
+    registerInlineStyle(desc) {
+      let entry = inlineStyles.get(desc.id);
+      if (!entry) {
+        entry = {
+          id: desc.id,
+          content: desc.content || "",
+          attrs: desc.attrs,
+          emitted: false
+        };
+        inlineStyles.set(desc.id, entry);
+      }
+      if (currentBoundaryId) {
+        let styles = boundaryStyles.get(currentBoundaryId);
+        if (!styles) {
+          styles = new Set();
+          boundaryStyles.set(currentBoundaryId, styles);
+        }
+        styles.add(entry);
+      }
+      return entry;
+    },
     get currentBoundaryId() {
       return currentBoundaryId;
     },
     set currentBoundaryId(v) {
       currentBoundaryId = v;
     },
-    registerModule(moduleUrl, entryUrl) {
+    registerModule(key, entryUrl) {
       const id = currentBoundaryId || "";
       let map = boundaryModules.get(id);
       if (!map) {
         map = {};
         boundaryModules.set(id, map);
       }
-      map[moduleUrl] = entryUrl;
+      map[key] = entryUrl;
     },
     getBoundaryModules(id) {
       return boundaryModules.get(id) || null;
@@ -182,10 +213,21 @@ function applyAssetTracking(context, tracking, manifest) {
   });
   context.registerModule = tracking.registerModule;
   context.getBoundaryModules = tracking.getBoundaryModules;
-  if (manifest) context.resolveAssets = moduleUrl => resolveAssets(moduleUrl, manifest);
+  if (typeof manifest === "function") {
+    context.resolveAssets = manifest;
+  } else if (manifest && typeof manifest.resolve === "function") {
+    context.resolveAssets = key => manifest.resolve(key);
+    if (typeof manifest.resolveSync === "function") {
+      context.resolveAssetsSync = key => manifest.resolveSync(key);
+    }
+  } else if (manifest) {
+    const resolve = moduleUrl => resolveAssets(moduleUrl, manifest);
+    context.resolveAssets = resolve;
+    context.resolveAssetsSync = resolve;
+  }
 }
 const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
-const REPLACE_SCRIPT = `function $df(e,n,o,t){if(!(n=document.getElementById(e))||!(o=document.getElementById("pl-"+e)))return 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);return 1}function $dfl(e,o,n){if(!(o=document.getElementById("pl-"+e)))return 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;return 1}n=n.nextSibling}return 0}function $dflj(e,i){for(i=0;i<e.length;i++)$dfl(e[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;_$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])}`;
 function renderToString(code, options = {}) {
   const {
     renderId = "",
@@ -194,7 +236,7 @@ function renderToString(code, options = {}) {
     manifest
   } = options;
   let scripts = "";
-  const serializer = createSerializer({
+  const serializer = createHydrationSerializer({
     scopeId: renderId,
     plugins: options.plugins,
     onData(script) {
@@ -220,16 +262,20 @@ function renderToString(code, options = {}) {
       }
       serializer.write(id, p);
     },
-    registerAsset(type, url) {
+    registerAsset(type, value) {
+      if (type === "inline-style") {
+        tracking.registerInlineStyle(value);
+        return;
+      }
       if (tracking.currentBoundaryId && type === "style") {
         let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
         if (!styles) {
           styles = new Set();
           tracking.boundaryStyles.set(tracking.currentBoundaryId, styles);
         }
-        styles.add(url);
+        styles.add(value);
       }
-      tracking.emittedAssets.add(url);
+      tracking.emittedAssets.add(value);
     }
   };
   applyAssetTracking(solidJs.sharedConfig.context, tracking, manifest);
@@ -245,6 +291,7 @@ function renderToString(code, options = {}) {
   serializer.close();
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
   html = injectPreloadLinks(tracking.emittedAssets, html);
+  html = injectInlineStyles(tracking.inlineStyles, html, nonce);
   if (scripts.length) html = injectScripts(html, scripts, options.nonce);
   return html;
 }
@@ -283,7 +330,7 @@ function renderToStream(code, options = {}) {
     completed = true;
     if (firstFlushed) dispose();
   };
-  const serializer = createSerializer({
+  const serializer = createHydrationSerializer({
     scopeId: options.renderId,
     plugins: options.plugins,
     onData: pushTask,
@@ -355,19 +402,27 @@ function renderToStream(code, options = {}) {
     async: true,
     assets: [],
     nonce,
-    registerAsset(type, url) {
+    registerAsset(type, value) {
+      if (type === "inline-style") {
+        const entry = tracking.registerInlineStyle(value);
+        if (firstFlushed && !tracking.currentBoundaryId && !entry.emitted) {
+          entry.emitted = true;
+          buffer.write(renderInlineStyle(entry, nonce));
+        }
+        return;
+      }
       if (tracking.currentBoundaryId && type === "style") {
         let styles = tracking.boundaryStyles.get(tracking.currentBoundaryId);
         if (!styles) {
           styles = new Set();
           tracking.boundaryStyles.set(tracking.currentBoundaryId, styles);
         }
-        styles.add(url);
+        styles.add(value);
       }
-      if (!tracking.emittedAssets.has(url)) {
-        tracking.emittedAssets.add(url);
+      if (!tracking.emittedAssets.has(value)) {
+        tracking.emittedAssets.add(value);
         if (firstFlushed && type === "module") {
-          buffer.write(`<link rel="modulepreload" href="${url}">`);
+          buffer.write(`<link rel="modulepreload" href="${value}">`);
         }
       }
     },
@@ -451,10 +506,13 @@ function renderToStream(code, options = {}) {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
               const deferActivation = !!revealGroup;
-              if (styles.length) {
-                emitTask(`$dfs("${key}",${styles.length},${deferActivation ? 1 : 0})`);
+              for (let i = 0; i < styles.inline.length; i++) {
+                buffer.write(renderInlineStyle(styles.inline[i], nonce));
+              }
+              if (styles.links.length) {
+                emitTask(`$dfs("${key}",${styles.links.length},${deferActivation ? 1 : 0})`);
                 writeTasks();
-                for (const url of styles) {
+                for (const url of styles.links) {
                   buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
                 }
                 buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
@@ -545,6 +603,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    html = injectInlineStyles(tracking.inlineStyles, html, nonce);
     serializeRootAssets();
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
@@ -850,10 +909,11 @@ function ssrStyleProperty(name, value) {
   return value != null ? name + value : "";
 }
 function ssrElement(tag, props, children, needsId) {
+  const hk = needsId ? ssrHydrationKey() : "";
   if (props == null) props = {};else if (typeof props === "function") props = props();
   const skipChildren = VOID_ELEMENTS.test(tag);
   const keys = Object.keys(props);
-  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
+  let result = `<${tag}${hk} `;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (ChildProperties.has(prop)) {
@@ -898,7 +958,10 @@ function escape(s, attr) {
       for (let i = 0; i < s.length; i++) s[i] = escape(s[i]);
       return s;
     }
-    if (attr && t === "boolean") return s;
+    if (attr) {
+      if (s == null || t === "boolean" || t === "number") return s;
+      return escape(String(s), attr);
+    }
     return s;
   }
   const delimCode = attr ? 34 : 60;
@@ -1034,14 +1097,48 @@ function propagateBoundaryStyles(childKey, parentKey, tracking) {
 }
 function collectStreamStyles(key, tracking, headStyles) {
   const styles = tracking.getBoundaryStyles(key);
-  if (!styles) return [];
-  const result = [];
-  for (const url of styles) {
-    if (!headStyles || !headStyles.has(url)) {
-      result.push(url);
+  const links = [];
+  const inline = [];
+  if (!styles) return {
+    links,
+    inline
+  };
+  for (const entry of styles) {
+    if (typeof entry === "string") {
+      if (!headStyles || !headStyles.has(entry)) links.push(entry);
+    } else if (!entry.emitted) {
+      entry.emitted = true;
+      inline.push(entry);
     }
   }
-  return result;
+  return {
+    links,
+    inline
+  };
+}
+function escapeStyleContent(content) {
+  return content.replace(/<\/(style)/gi, "<\\/$1");
+}
+function renderInlineStyle(entry, nonce) {
+  let attrs = "";
+  if (entry.attrs) {
+    for (const name in entry.attrs) {
+      attrs += ` ${name}="${escape(String(entry.attrs[name]), true)}"`;
+    }
+  }
+  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>`;
@@ -1227,7 +1324,9 @@ function Dynamic(props) {
   return solidJs.createComponent(Comp, solidJs.omit(props, "component"));
 }
 function Portal(props) {
-  throw new Error("Portal is not supported on the server");
+  const o = solidJs.getOwner();
+  if (o?.id != null) solidJs.getNextChildId(o);
+  return undefined;
 }
 
 Object.defineProperty(exports, "Errored", {
@@ -1304,6 +1403,7 @@ exports.RawTextElements = RawTextElements;
 exports.RequestContext = RequestContext;
 exports.SVGElements = SVGElements;
 exports.VoidElements = VoidElements;
+exports.acquireAsset = notSup;
 exports.addEvent = notSup;
 exports.applyRef = applyRef;
 exports.assign = notSup;