@solidjs/web 2.0.0-beta.15 → 2.0.0-beta.17

package/dist/server.cjs

@@ -60,9 +60,9 @@ const syncOptions = {
   sync: true
 };
 const effect = (fn, effectFn, options) => solidJs.createRenderEffect(fn, effectFn, options ? {
-  transparent: true,
   sync: true,
-  ...options
+  ...options,
+  transparent: !options.scope
 } : transparentOptions);
 const memo = fn => solidJs.createMemo(() => fn(), syncOptions);
 
@@ -94,9 +94,15 @@ function getLocalHeaderScript(id) {
   return seroval.getCrossReferenceHeader(id) + ";";
 }
 
+function joinAssetPath(base, file) {
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(file)) return file;
+  if (typeof base !== "string" || !base) base = "/";
+  if (base[base.length - 1] !== "/") base += "/";
+  return base + (file[0] === "/" ? file.slice(1) : file);
+}
 function resolveAssets(moduleUrl, manifest) {
   if (!manifest) return null;
-  const base = manifest._base || "/";
+  const base = manifest._base;
   const entry = manifest[moduleUrl];
   if (!entry) return null;
   const css = [];
@@ -107,8 +113,8 @@ function resolveAssets(moduleUrl, manifest) {
     visited.add(key);
     const e = manifest[key];
     if (!e) return;
-    js.push(base + e.file);
-    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(base + e.css[i]);
+    js.push(joinAssetPath(base, e.file));
+    if (e.css) for (let i = 0; i < e.css.length; i++) css.push(joinAssetPath(base, e.css[i]));
     if (e.imports) for (let i = 0; i < e.imports.length; i++) walk(e.imports[i]);
   };
   walk(moduleUrl);
@@ -135,25 +141,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;
@@ -214,16 +243,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);
@@ -239,6 +272,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;
 }
@@ -349,19 +383,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}">`);
         }
       }
     },
@@ -445,10 +487,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>`);
@@ -497,38 +542,41 @@ function renderToStream(code, options = {}) {
   }, {
     id: renderId
   });
-  function doShell() {
-    if (shellCompleted) return;
-    if (rootHoles) {
-      const pending = [];
-      for (const {
-        id,
-        fn
-      } of rootHoles) {
-        const marker = `<!--rh${id}-->`;
-        const res = resolveSSRNode(fn);
-        if (!res.h.length) {
-          html = html.replace(marker, res.t[0]);
-        } else {
-          let out = res.t[0];
-          for (let j = 0; j < res.h.length; j++) {
-            const newId = nextHoleId++;
-            pending.push({
-              id: newId,
-              fn: res.h[j]
-            });
-            out += `<!--rh${newId}-->` + res.t[j + 1];
-          }
-          html = html.replace(marker, out);
-          for (const p of res.p) blockingPromises.add(p);
+  function resolveRootHoles() {
+    if (!rootHoles) return true;
+    const pending = [];
+    for (const {
+      id,
+      fn
+    } of rootHoles) {
+      const marker = `<!--rh${id}-->`;
+      const res = resolveSSRNode(fn);
+      if (!res.h.length) {
+        html = html.replace(marker, res.t[0]);
+      } else {
+        let out = res.t[0];
+        for (let j = 0; j < res.h.length; j++) {
+          const newId = nextHoleId++;
+          pending.push({
+            id: newId,
+            fn: res.h[j]
+          });
+          out += `<!--rh${newId}-->` + res.t[j + 1];
         }
+        html = html.replace(marker, out);
+        for (const p of res.p) blockingPromises.add(p);
       }
-      if (pending.length) {
-        rootHoles = pending;
-        return;
-      }
-      rootHoles = null;
     }
+    if (pending.length) {
+      rootHoles = pending;
+      return false;
+    }
+    rootHoles = null;
+    return true;
+  }
+  function doShell() {
+    if (shellCompleted) return;
+    if (!resolveRootHoles()) return;
     solidJs.sharedConfig.context = context;
     html = injectAssets(context.assets, html);
     headStyles = new Set();
@@ -536,6 +584,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);
@@ -560,7 +609,15 @@ function renderToStream(code, options = {}) {
           complete();
         };
       } else onCompleteAll = complete;
-      queue(flushEnd);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            if (!resolveRootHoles()) return flush();
+            queue(flushEnd);
+          });
+        });
+      }
+      flush();
     },
     pipe(w) {
       function flush() {
@@ -833,10 +890,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)) {
@@ -881,7 +939,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;
@@ -941,29 +1002,6 @@ function tryJoinPlainSSRArray(nodes) {
   }
   return out;
 }
-function mergeProps(...sources) {
-  const target = {};
-  for (let i = 0; i < sources.length; i++) {
-    let source = sources[i];
-    if (typeof source === "function") source = source();
-    if (source) {
-      const descriptors = Object.getOwnPropertyDescriptors(source);
-      for (const key in descriptors) {
-        if (key in target) continue;
-        Object.defineProperty(target, key, {
-          enumerable: true,
-          get() {
-            for (let i = sources.length - 1; i >= 0; i--) {
-              const v = (sources[i] || {})[key];
-              if (v !== undefined) return v;
-            }
-          }
-        });
-      }
-    }
-  }
-  return target;
-}
 function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return hydrate && solidJs.sharedConfig.getNextContextId();
@@ -1040,14 +1078,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>`;
@@ -1112,6 +1184,10 @@ function tryResolveString(node) {
     if (node.h && node.h.length > 0) return {
       merge: node
     };
+    if (node.t === undefined) {
+      console.warn(`Unrecognized value. Skipped inserting`, node);
+      return "";
+    }
     return Array.isArray(node.t) ? node.t[0] : node.t;
   }
   if (t === "function") {
@@ -1150,7 +1226,9 @@ function resolveSSRNode(node, result = {
         result.h.push(...node.h);
         result.p.push(...node.p);
       }
-    } else result.t[result.t.length - 1] += node.t;
+    } else if (node.t !== undefined) {
+      result.t[result.t.length - 1] += node.t;
+    } else console.warn(`Unrecognized value. Skipped inserting`, node);
   } else if (t === "function") {
     try {
       resolveSSRNode(node(), result);
@@ -1187,15 +1265,38 @@ function dynamic(source) {
   const o = solidJs.getOwner();
   if (o?.id != null) solidJs.getNextChildId(o);
   return props => {
-    const memoOwner = solidJs.createOwner();
-    return solidJs.runWithOwner(memoOwner, () => {
-      const comp = source(),
-        t = typeof comp;
-      if (comp) {
-        if (t === "function") return comp(props);else if (t === "string") {
-          return ssrElement(comp, props, undefined, true);
+    const comp = source();
+    let p;
+    let settled = false;
+    let value;
+    let error;
+    if (comp && typeof comp.then === "function") {
+      p = comp;
+      p.then(v => {
+        value = v;
+        settled = true;
+      }, err => {
+        error = err;
+        settled = true;
+      });
+      const ctx = solidJs.sharedConfig.context;
+      if (ctx?.async) ctx.block(p.then(() => {}, () => {}));
+    }
+    return solidJs.createMemo(() => {
+      let c = comp;
+      if (p) {
+        if (!settled) throw new solidJs.NotReadyError(p);
+        if (error) throw error;
+        c = value;
+      }
+      if (c) {
+        if (typeof c === "function") return c(props);
+        if (typeof c === "string") {
+          return ssrElement(c, props, undefined, true);
         }
       }
+    }, {
+      sync: true
     });
   };
 }
@@ -1255,6 +1356,14 @@ Object.defineProperty(exports, "getOwner", {
   enumerable: true,
   get: function () { return solidJs.getOwner; }
 });
+Object.defineProperty(exports, "mergeProps", {
+  enumerable: true,
+  get: function () { return solidJs.merge; }
+});
+Object.defineProperty(exports, "scope", {
+  enumerable: true,
+  get: function () { return solidJs.ssrScope; }
+});
 Object.defineProperty(exports, "untrack", {
   enumerable: true,
   get: function () { return solidJs.untrack; }
@@ -1273,6 +1382,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;
@@ -1295,7 +1405,6 @@ exports.insert = notSup;
 exports.isDev = isDev;
 exports.isServer = isServer;
 exports.memo = memo;
-exports.mergeProps = mergeProps;
 exports.ref = notSup;
 exports.registerDelegatedContainer = notSup;
 exports.registerDelegatedRoot = notSup;