@solidjs/web 2.0.0-beta.22 → 2.0.0-beta.24

package/dist/dev.cjs

@@ -33,6 +33,7 @@ const DOMWithState = {
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
 const $$HOST = /*#__PURE__*/Symbol("host");
+const $$FRAME = /*#__PURE__*/Symbol.for("dom-expressions.frame");
 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",
@@ -283,13 +284,29 @@ function setProperty(node, name, value) {
   node[name] = value;
 }
 let claimHandlers = null;
+const CLAIM_SEAM = Symbol.for("dom-expressions.element-claims");
 function registerElementClaim(handler) {
-  (claimHandlers || (claimHandlers = [])).push(handler);
+  (claimHandlers || (claimHandlers = globalThis[CLAIM_SEAM] = [])).push(handler);
   return () => {
     const index = claimHandlers.indexOf(handler);
     index > -1 && claimHandlers.splice(index, 1);
   };
 }
+const CLAIMED_ELEMENTS = "a[href], form[action]";
+function claimElementTree(root) {
+  const handlers = globalThis[CLAIM_SEAM];
+  if (handlers === undefined || handlers.length === 0) return root;
+  const isElement = root.nodeType === 1;
+  if (!isElement && root.nodeType !== 11) return root;
+  if (isElement && root.matches(CLAIMED_ELEMENTS)) {
+    for (let i = 0; i < handlers.length; i++) handlers[i](root);
+  }
+  const found = root.querySelectorAll(CLAIMED_ELEMENTS);
+  for (let i = 0; i < found.length; i++) {
+    for (let j = 0; j < handlers.length; j++) handlers[j](found[i]);
+  }
+  return root;
+}
 function claimElement(node) {
   if (claimHandlers !== null) {
     for (let i = 0; i < claimHandlers.length; i++) claimHandlers[i](node);
@@ -1008,6 +1025,11 @@ function insertExpression(parent, value, current, marker) {
       parent.appendChild(value);
     }
     if (marker) value[$$SLOT] = marker;
+  } else if (value[$$FRAME]) {
+    if (current) {
+      cleanChildren(parent, Array.isArray(current) ? current : [current], multi ? marker : null);
+    }
+    value[$$FRAME](parent, multi ? marker : null);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -1028,6 +1050,7 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
+  if (value != null && value[$$FRAME]) return value;
   if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
@@ -1378,6 +1401,7 @@ exports.addEvent = addEvent;
 exports.applyRef = applyRef;
 exports.assign = assign;
 exports.claimElement = claimElement;
+exports.claimElementTree = claimElementTree;
 exports.className = className;
 exports.delegateEvents = delegateEvents;
 exports.dynamic = dynamic;

package/dist/dev.js

@@ -32,6 +32,7 @@ const DOMWithState = {
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const $$SLOT = /*#__PURE__*/Symbol("slot");
 const $$HOST = /*#__PURE__*/Symbol("host");
+const $$FRAME = /*#__PURE__*/Symbol.for("dom-expressions.frame");
 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",
@@ -282,13 +283,29 @@ function setProperty(node, name, value) {
   node[name] = value;
 }
 let claimHandlers = null;
+const CLAIM_SEAM = Symbol.for("dom-expressions.element-claims");
 function registerElementClaim(handler) {
-  (claimHandlers || (claimHandlers = [])).push(handler);
+  (claimHandlers || (claimHandlers = globalThis[CLAIM_SEAM] = [])).push(handler);
   return () => {
     const index = claimHandlers.indexOf(handler);
     index > -1 && claimHandlers.splice(index, 1);
   };
 }
+const CLAIMED_ELEMENTS = "a[href], form[action]";
+function claimElementTree(root) {
+  const handlers = globalThis[CLAIM_SEAM];
+  if (handlers === undefined || handlers.length === 0) return root;
+  const isElement = root.nodeType === 1;
+  if (!isElement && root.nodeType !== 11) return root;
+  if (isElement && root.matches(CLAIMED_ELEMENTS)) {
+    for (let i = 0; i < handlers.length; i++) handlers[i](root);
+  }
+  const found = root.querySelectorAll(CLAIMED_ELEMENTS);
+  for (let i = 0; i < found.length; i++) {
+    for (let j = 0; j < handlers.length; j++) handlers[j](found[i]);
+  }
+  return root;
+}
 function claimElement(node) {
   if (claimHandlers !== null) {
     for (let i = 0; i < claimHandlers.length; i++) claimHandlers[i](node);
@@ -1007,6 +1024,11 @@ function insertExpression(parent, value, current, marker) {
       parent.appendChild(value);
     }
     if (marker) value[$$SLOT] = marker;
+  } else if (value[$$FRAME]) {
+    if (current) {
+      cleanChildren(parent, Array.isArray(current) ? current : [current], multi ? marker : null);
+    }
+    value[$$FRAME](parent, multi ? marker : null);
   } else if (Array.isArray(value)) {
     const currentArray = current && Array.isArray(current);
     if (value.length === 0) {
@@ -1027,6 +1049,7 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
+  if (value != null && value[$$FRAME]) return value;
   if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
@@ -1304,4 +1327,4 @@ function createElement(tagName, is = undefined) {
   });
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isServer, memo, mergeProps, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, respond, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, HREF, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RawTextElements, RequestContext, ResponseEnvelope, SVGElements, VoidElements, acquireAsset, addEvent, applyRef, assign, claimElement, claimElementTree, className, delegateEvents, dynamic, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getDelegatedRoot, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, installHydrationRuntime, isDev, isHref, isResponseEnvelope, isServer, memo, mergeProps, redirect, ref, registerDelegatedContainer, registerDelegatedRoot, registerElementClaim, reload, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, respond, runHydrationEvents, scope, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, unregisterDelegatedContainer, unregisterDelegatedRoot, voidFn as useAssets };

package/dist/server.cjs

@@ -313,7 +313,8 @@ function renderToStream(code, options = {}) {
     }
     tasks += task + ";";
     if (!timer && firstFlushed) {
-      timer = setTimeout(writeTasks);
+      timer = true;
+      queue(() => queue(writeTasks));
     }
   };
   const onDone = () => {
@@ -328,10 +329,53 @@ function renderToStream(code, options = {}) {
     completed = true;
     if (firstFlushed) dispose();
   };
-  const serializer = createHydrationSerializer({
+  const sink = {
+    data(payload) {
+      pushTask(payload);
+    },
+    fragment(key, value, meta) {
+      const deferActivation = !!meta.revealGroup;
+      const styles = meta.styles;
+      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.links) {
+          buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
+        }
+        buffer.write(`<template id="${key}">${value}</template>`);
+      } else {
+        buffer.write(`<template id="${key}">${value}</template>`);
+        if (!deferActivation) {
+          emitTask(`$df("${key}")`);
+        }
+      }
+    },
+    reveal(keys, meta) {
+      emitTask(`${meta.fallback ? "$dflj" : "$dfj"}(${JSON.stringify(keys)})`);
+    },
+    asset(type, value) {
+      if (type === "module") {
+        buffer.write(`<link rel="modulepreload" href="${value}">`);
+      } else if (type === "inline-style") {
+        buffer.write(renderInlineStyle(value, nonce));
+      }
+    },
+    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);
+    },
+    ...options.sink
+  };
+  const serializer = (options.serializer || createHydrationSerializer)({
     scopeId: options.renderId,
     plugins: options.plugins,
-    onData: pushTask,
+    onData: payload => sink.data(payload),
     onDone,
     onError: options.onError
   });
@@ -353,7 +397,6 @@ function renderToStream(code, options = {}) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks}</script>`);
       tasks = "";
     }
-    timer && clearTimeout(timer);
     timer = null;
   };
   let context;
@@ -405,7 +448,7 @@ function renderToStream(code, options = {}) {
         const entry = tracking.registerInlineStyle(value);
         if (firstFlushed && !tracking.currentBoundaryId && !entry.emitted) {
           entry.emitted = true;
-          buffer.write(renderInlineStyle(entry, nonce));
+          sink.asset("inline-style", entry);
         }
         return;
       }
@@ -419,9 +462,7 @@ function renderToStream(code, options = {}) {
       }
       if (!tracking.emittedAssets.has(value)) {
         tracking.emittedAssets.add(value);
-        if (firstFlushed && type === "module") {
-          buffer.write(`<link rel="modulepreload" href="${value}">`);
-        }
+        if (firstFlushed) sink.asset(type, value);
       }
     },
     block(p) {
@@ -503,23 +544,11 @@ function renderToStream(code, options = {}) {
             } else {
               serializeFragmentAssets(key, tracking.boundaryModules, context);
               const styles = collectStreamStyles(key, tracking, headStyles);
-              const deferActivation = !!revealGroup;
-              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.links) {
-                  buffer.write(`<link rel="stylesheet" href="${url}" onload="$dfc('${key}')" onerror="$dfc('${key}')">`);
-                }
-                buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-              } else {
-                buffer.write(`<template id="${key}">${value !== undefined ? value : " "}</template>`);
-                if (!deferActivation) {
-                  emitTask(`$df("${key}")`);
-                }
-              }
+              sink.fragment(key, value !== undefined ? value : " ", {
+                styles,
+                revealGroup,
+                error
+              });
               item.resolve(error);
             }
           }
@@ -530,12 +559,16 @@ function renderToStream(code, options = {}) {
     revealFragments(groupOrKeys) {
       const keys = resolveRevealKeys(groupOrKeys, true, true);
       if (!keys) return;
-      emitTask(`$dfj(${JSON.stringify(keys)})`);
+      sink.reveal(keys, {
+        fallback: false
+      });
     },
     revealFallbacks(groupOrKeys) {
       const keys = resolveRevealKeys(groupOrKeys, false, false);
       if (!keys) return;
-      emitTask(`$dflj(${JSON.stringify(keys)})`);
+      sink.reveal(keys, {
+        fallback: true
+      });
     }
   };
   applyAssetTracking(context, tracking, manifest);
@@ -595,16 +628,18 @@ function renderToStream(code, options = {}) {
     if (shellCompleted) return;
     if (!resolveRootHoles()) return;
     solidJs.sharedConfig.context = context;
-    html = injectAssets(context.assets, html);
+    const assetsHtml = resolveAssetsHtml(context.assets);
     headStyles = new Set();
     for (const url of tracking.emittedAssets) {
       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);
+    sink.shell(html, {
+      assets: assetsHtml,
+      preloads: tracking.emittedAssets,
+      inlineStyles: tracking.inlineStyles,
+      tasks
+    });
     tasks = "";
     onCompleteShell && onCompleteShell({
       write(v) {
@@ -613,6 +648,26 @@ function renderToStream(code, options = {}) {
     });
     shellCompleted = true;
   }
+  const MIN_DRAIN_TURNS = 8;
+  let lastBlockingSize = -1;
+  let lastRegistrySize = -1;
+  let drainTurn = 0;
+  const scheduleFlush = fn => {
+    const attempt = () => {
+      if (registry.size !== lastRegistrySize || drainTurn++ < MIN_DRAIN_TURNS) {
+        if (registry.size !== lastRegistrySize) drainTurn = 0;
+        lastRegistrySize = registry.size;
+        queue(attempt);
+        return;
+      }
+      fn();
+    };
+    const progressed = blockingPromises.size !== lastBlockingSize;
+    lastBlockingSize = blockingPromises.size;
+    lastRegistrySize = -1;
+    drainTurn = 0;
+    progressed ? queue(attempt) : setTimeout(attempt);
+  };
   return {
     then(fn) {
       function complete() {
@@ -628,7 +683,7 @@ function renderToStream(code, options = {}) {
       } else onCompleteAll = complete;
       function flush() {
         allSettled(blockingPromises).then(() => {
-          setTimeout(() => {
+          scheduleFlush(() => {
             if (!resolveRootHoles()) return flush();
             queue(flushEnd);
           });
@@ -639,7 +694,7 @@ function renderToStream(code, options = {}) {
     pipe(w) {
       function flush() {
         allSettled(blockingPromises).then(() => {
-          setTimeout(() => {
+          scheduleFlush(() => {
             doShell();
             if (!shellCompleted) return flush();
             buffer = writable = w;
@@ -659,7 +714,7 @@ function renderToStream(code, options = {}) {
       const p = new Promise(r => resolve = r);
       function flush() {
         allSettled(blockingPromises).then(() => {
-          setTimeout(() => {
+          scheduleFlush(() => {
             doShell();
             if (!shellCompleted) return flush();
             const encoder = new TextEncoder();
@@ -962,14 +1017,12 @@ function escape(s, attr) {
     }
     return s;
   }
-  const delimCode = attr ? 34 : 60;
-  const len = s.length;
-  for (let i = 0; i < len; i++) {
-    const c = s.charCodeAt(i);
-    if (c === 38 || c === delimCode) return escapeSlow(s, attr, i);
-  }
-  return s;
+  const i = s.search(attr ? ESCAPE_ATTR : ESCAPE_CONTENT);
+  if (i < 0) return s;
+  return escapeSlow(s, attr, i);
 }
+const ESCAPE_CONTENT = /[&<]/;
+const ESCAPE_ATTR = /[&"]/;
 function escapeSlow(s, attr, start) {
   const delim = attr ? '"' : "<";
   const delimCode = attr ? 34 : 60;
@@ -1054,13 +1107,20 @@ function allSettled(promises) {
     return;
   });
 }
-function injectAssets(assets, html) {
-  if (!assets || !assets.length) return html;
+function resolveAssetsHtml(assets) {
+  if (!assets || !assets.length) return "";
   let out = "";
   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) + out + html.slice(index);
+  return html.slice(0, index) + content + html.slice(index);
+}
+function injectAssets(assets, html) {
+  return injectBeforeHead(html, resolveAssetsHtml(assets));
 }
 function injectPreloadLinks(emittedAssets, html, nonce) {
   if (!emittedAssets.size) return html;
@@ -1279,6 +1339,9 @@ function noopCleanup() {}
 function claimElement(node) {
   return node;
 }
+function claimElementTree(root) {
+  return root;
+}
 function notSup() {
   throw new Error("Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.");
 }
@@ -1483,6 +1546,7 @@ exports.addEvent = notSup;
 exports.applyRef = applyRef;
 exports.assign = notSup;
 exports.claimElement = claimElement;
+exports.claimElementTree = claimElementTree;
 exports.className = notSup;
 exports.delegateEvents = notSup;
 exports.dynamic = dynamic;