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

package/frames/dist/server.cjs

@@ -1183,7 +1183,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 +1236,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 +1259,7 @@ function createFrameSink(emit, frame) {
       }
       emit({
         type: "fragment",
-        id,
+        id: fid,
         version,
         key,
         html: value
@@ -1261,7 +1267,7 @@ function createFrameSink(emit, frame) {
       if (meta.error) {
         emit({
           type: "error",
-          id,
+          id: fid,
           version,
           key,
           error: {
@@ -1272,7 +1278,7 @@ function createFrameSink(emit, frame) {
       if (!meta.revealGroup) {
         emit({
           type: "reveal",
-          id,
+          id: fid,
           version,
           keys: [key],
           waitForStyles: !!links.length
@@ -1280,17 +1286,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 +1419,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 +1471,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 +1511,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 +1526,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 +1543,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 +1637,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);

package/frames/dist/server.js

@@ -1181,7 +1181,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 = [];
@@ -1229,13 +1234,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
         };
@@ -1251,7 +1257,7 @@ function createFrameSink(emit, frame) {
       }
       emit({
         type: "fragment",
-        id,
+        id: fid,
         version,
         key,
         html: value
@@ -1259,7 +1265,7 @@ function createFrameSink(emit, frame) {
       if (meta.error) {
         emit({
           type: "error",
-          id,
+          id: fid,
           version,
           key,
           error: {
@@ -1270,7 +1276,7 @@ function createFrameSink(emit, frame) {
       if (!meta.revealGroup) {
         emit({
           type: "reveal",
-          id,
+          id: fid,
           version,
           keys: [key],
           waitForStyles: !!links.length
@@ -1278,17 +1284,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;
@@ -1402,6 +1417,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();
@@ -1438,36 +1469,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 {
@@ -1477,12 +1509,10 @@ function createDocumentSlotProps(clientProps, frameId) {
           const out = scoped(occurrence, () => range(occurrence, slot(resolved)));
           const unused = regions.filter(r => !r.used);
           if (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) {
@@ -1494,16 +1524,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" ? sharedConfig.context.escape(String(value)) : String(value);
-                if (needle !== "" && rendered.includes(needle)) continue;
-              }
               args[key] = value;
               any = true;
             }
             if (any) sharedConfig.context.serialize(`sc:slot:${frameId}:${occurrence}`, args);
             for (const region of unused) {
+              region.locked = true;
               sharedConfig.context.serialize(`sc:region:${region.childId}`, resolveRegionHtml(sharedConfig.context, region.value));
             }
           }
@@ -1515,28 +1541,26 @@ function createDocumentSlotProps(clientProps, frameId) {
     }
   });
 }
+const FRAME_TAG = "dx-frame";
+const FRAME_ID_ATTR = "data-fid";
+function frameElementOpen(id) {
+  const escaped = sharedConfig.context ? 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 = 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 ?? "");
@@ -1611,37 +1635,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 = 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 = 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}`;
-              sharedConfig.context.serialize(ref, value);
-              args[key] = {
-                $ref: ref
-              };
+            } finally {
+              ctx.registerFragment = origRegister;
             }
           }
           sink.slot(occurrence, args);