@solidjs/web 2.0.0-beta.6 → 2.0.0-beta.7

package/dist/server.cjs

@@ -5,39 +5,6 @@ var seroval = require('seroval');
 var web = require('seroval-plugins/web');
 var signals = require('@solidjs/signals');
 
-const DOMWithState = {
-  INPUT: {
-    value: 1,
-    defaultValue: 1,
-    checked: 1,
-    defaultChecked: 1
-  },
-  SELECT: {
-    value: 1
-  },
-  OPTION: {
-    value: 1,
-    selected: 1,
-    defaultSelected: 1
-  },
-  TEXTAREA: {
-    value: 1,
-    defaultValue: 1
-  },
-  VIDEO: {
-    muted: 1,
-    defaultMuted: 1
-  },
-  AUDIO: {
-    muted: 1,
-    defaultMuted: 1
-  }
-};
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 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([
@@ -56,10 +23,10 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => solidJs.createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : signals.createMemo(() => fn(), {
   transparent: true
 }) : solidJs.createMemo(() => fn());
 
@@ -144,11 +111,11 @@ function createAssetTracking() {
       currentBoundaryId = v;
     },
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
       map[moduleUrl] = entryUrl;
     },
@@ -231,6 +198,7 @@ function renderToString(code, options = {}) {
   }, {
     id: renderId
   });
+  serializeFragmentAssets("", tracking.boundaryModules, solidJs.sharedConfig.context);
   solidJs.sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(solidJs.sharedConfig.context.assets, html);
@@ -249,10 +217,12 @@ function renderToStream(code, options = {}) {
   } = options;
   let dispose;
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
@@ -487,13 +457,32 @@ function renderToStream(code, options = {}) {
   function doShell() {
     if (shellCompleted) return;
     if (rootHoles) {
+      const pending = [];
       for (const {
         id,
         fn
       } of rootHoles) {
         const marker = `<!--rh${id}-->`;
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        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;
     }
@@ -504,6 +493,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeFragmentAssets("", tracking.boundaryModules, context);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";
@@ -530,48 +520,56 @@ function renderToStream(code, options = {}) {
       queue(flushEnd);
     },
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
   };
 }

package/dist/server.js

@@ -4,39 +4,6 @@ import { Serializer, Feature, getCrossReferenceHeader } from 'seroval';
 import { AbortSignalPlugin, CustomEventPlugin, DOMExceptionPlugin, EventPlugin, FormDataPlugin, HeadersPlugin, ReadableStreamPlugin, RequestPlugin, ResponsePlugin, URLSearchParamsPlugin, URLPlugin } from 'seroval-plugins/web';
 import { createMemo } from '@solidjs/signals';
 
-const DOMWithState = {
-  INPUT: {
-    value: 1,
-    defaultValue: 1,
-    checked: 1,
-    defaultChecked: 1
-  },
-  SELECT: {
-    value: 1
-  },
-  OPTION: {
-    value: 1,
-    selected: 1,
-    defaultSelected: 1
-  },
-  TEXTAREA: {
-    value: 1,
-    defaultValue: 1
-  },
-  VIDEO: {
-    muted: 1,
-    defaultMuted: 1
-  },
-  AUDIO: {
-    muted: 1,
-    defaultMuted: 1
-  }
-};
-for (const tagName in DOMWithState) {
-  for (const propName in DOMWithState[tagName]) {
-    DOMWithState[tagName]["prop:" + propName] = 1;
-  }
-}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 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([
@@ -55,10 +22,10 @@ const DOMElements = /*#__PURE__*/new Set(["html", "base", "head", "link", "meta"
 "webview",
 "isindex", "listing", "multicol", "nextid", "noindex", "search"]);
 
-const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+const effect = (fn, effectFn) => createRenderEffect(fn, effectFn, {
   transparent: true
 });
-const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), undefined, {
+const memo = (fn, transparent) => transparent ? fn.$r ? fn : createMemo(() => fn(), {
   transparent: true
 }) : createMemo$1(() => fn());
 
@@ -143,11 +110,11 @@ function createAssetTracking() {
       currentBoundaryId = v;
     },
     registerModule(moduleUrl, entryUrl) {
-      if (!currentBoundaryId) return;
-      let map = boundaryModules.get(currentBoundaryId);
+      const id = currentBoundaryId || "";
+      let map = boundaryModules.get(id);
       if (!map) {
         map = {};
-        boundaryModules.set(currentBoundaryId, map);
+        boundaryModules.set(id, map);
       }
       map[moduleUrl] = entryUrl;
     },
@@ -230,6 +197,7 @@ function renderToString(code, options = {}) {
   }, {
     id: renderId
   });
+  serializeFragmentAssets("", tracking.boundaryModules, sharedConfig.context);
   sharedConfig.context.noHydrate = true;
   serializer.close();
   html = injectAssets(sharedConfig.context.assets, html);
@@ -248,10 +216,12 @@ function renderToStream(code, options = {}) {
   } = options;
   let dispose;
   const blockingPromises = new Set();
+  let headerEmitted = false;
   const pushTask = task => {
     if (noScripts) return;
-    if (!tasks && !firstFlushed) {
-      tasks = getLocalHeaderScript(renderId);
+    if (!headerEmitted) {
+      headerEmitted = true;
+      tasks += getLocalHeaderScript(renderId);
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
@@ -486,13 +456,32 @@ function renderToStream(code, options = {}) {
   function doShell() {
     if (shellCompleted) return;
     if (rootHoles) {
+      const pending = [];
       for (const {
         id,
         fn
       } of rootHoles) {
         const marker = `<!--rh${id}-->`;
         const res = resolveSSRNode(fn);
-        html = html.replace(marker, !res.h.length ? res.t[0] : "");
+        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;
     }
@@ -503,6 +492,7 @@ function renderToStream(code, options = {}) {
       if (url.endsWith(".css")) headStyles.add(url);
     }
     html = injectPreloadLinks(tracking.emittedAssets, html);
+    serializeFragmentAssets("", tracking.boundaryModules, context);
     if (tasks.length) html = injectScripts(html, tasks, nonce);
     buffer.write(html);
     tasks = "";
@@ -529,48 +519,56 @@ function renderToStream(code, options = {}) {
       queue(flushEnd);
     },
     pipe(w) {
-      allSettled(blockingPromises).then(() => {
-        setTimeout(() => {
-          doShell();
-          buffer = writable = w;
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            buffer = writable = w;
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-      });
+      }
+      flush();
     },
     pipeTo(w) {
-      return allSettled(blockingPromises).then(() => {
-        let resolve;
-        const p = new Promise(r => resolve = r);
-        setTimeout(() => {
-          doShell();
-          const encoder = new TextEncoder();
-          const writer = w.getWriter();
-          writable = {
-            end() {
-              writer.releaseLock();
-              w.close().catch(() => {});
-              resolve();
-            }
-          };
-          buffer = {
-            write(payload) {
-              writer.write(encoder.encode(payload)).catch(() => {});
-            }
-          };
-          buffer.write(tmp);
-          firstFlushed = true;
-          if (completed) {
-            dispose();
-            writable.end();
-          } else flushEnd();
+      let resolve;
+      const p = new Promise(r => resolve = r);
+      function flush() {
+        allSettled(blockingPromises).then(() => {
+          setTimeout(() => {
+            doShell();
+            if (!shellCompleted) return flush();
+            const encoder = new TextEncoder();
+            const writer = w.getWriter();
+            writable = {
+              end() {
+                writer.releaseLock();
+                w.close().catch(() => {});
+                resolve();
+              }
+            };
+            buffer = {
+              write(payload) {
+                writer.write(encoder.encode(payload)).catch(() => {});
+              }
+            };
+            buffer.write(tmp);
+            firstFlushed = true;
+            if (completed) {
+              dispose();
+              writable.end();
+            } else flushEnd();
+          });
         });
-        return p;
-      });
+      }
+      flush();
+      return p;
     }
   };
 }