@lightspeed-js/core 0.4.3 → 0.4.4

package/dist/compile.js

@@ -71,7 +71,7 @@ var START = "lsp ";
 var END = "/lsp";
 var MARKER_END = `<!--${END}-->`;
 function serializeMarker(payload) {
-  const json = JSON.stringify(payload).replace(/-(?=-)/g, "\\u002d");
+  const json = JSON.stringify(payload).replace(/-(?=-)/g, "\\u002d").replace(/</g, "\\u003c");
   return `<!--${START}${json}-->`;
 }
 

package/dist/index.js

@@ -1275,6 +1275,11 @@ function isSlotStash(node) {
 function slotNodesFor(payload, between) {
   if (!payload.ssr)
     return between;
+  if (payload.slot) {
+    const template = document.createElement("template");
+    template.innerHTML = payload.slot;
+    return Array.from(template.content.childNodes);
+  }
   const stash = between.find(isSlotStash);
   return stash ? Array.from(stash.content.childNodes) : [];
 }

package/dist/ssg.js

@@ -1260,7 +1260,7 @@ var START = "lsp ";
 var END = "/lsp";
 var MARKER_END = `<!--${END}-->`;
 function serializeMarker(payload) {
-  const json = JSON.stringify(payload).replace(/-(?=-)/g, "\\u002d");
+  const json = JSON.stringify(payload).replace(/-(?=-)/g, "\\u002d").replace(/</g, "\\u003c");
   return `<!--${START}${json}-->`;
 }
 function isMarkerStart(node) {
@@ -1298,6 +1298,11 @@ function isSlotStash(node) {
 function slotNodesFor(payload, between) {
   if (!payload.ssr)
     return between;
+  if (payload.slot) {
+    const template = document.createElement("template");
+    template.innerHTML = payload.slot;
+    return Array.from(template.content.childNodes);
+  }
   const stash = between.find(isSlotStash);
   return stash ? Array.from(stash.content.childNodes) : [];
 }
@@ -3355,7 +3360,7 @@ function readIslands(document2) {
         hydrate: payload?.hydrate,
         binds: Object.values(payload?.bind ?? {}),
         handlers: Object.keys(payload?.on ?? {}).length,
-        slotted: false,
+        slotted: !!payload?.slot,
         children: []
       };
       (stack[stack.length - 1]?.children ?? roots).push(island);
@@ -3366,9 +3371,6 @@ function readIslands(document2) {
       for (let cursor = island.start.nextSibling;cursor && cursor !== island.end; cursor = cursor.nextSibling) {
         if (cursor.nodeType !== 1)
           continue;
-        if (cursor.hasAttribute("data-lsp-slot")) {
-          island.slotted = true;
-        }
         const id = cursor.getAttribute("data-lsp-instance");
         if (id && !island.instance)
           island.instance = id;
@@ -3430,13 +3432,9 @@ function markRendered(document2, slots) {
       continue;
     }
     payload.ssr = 1;
+    if (slot.html.trim())
+      payload.slot = slot.html;
     slot.start.data = serializeMarker(payload).slice(4, -3);
-    if (slot.html.trim()) {
-      const template = document2.createElement("template");
-      template.setAttribute("data-lsp-slot", "");
-      template.innerHTML = slot.html;
-      slot.start.parentNode?.insertBefore(template, slot.start.nextSibling);
-    }
     rendered++;
   }
   return { rendered, skipped };

package/dist/types/src/marker.d.ts

@@ -60,11 +60,24 @@ export interface MarkerPayload {
     needs?: string[];
     /** Set by the build: the content between the markers is rendered output. */
     ssr?: number;
+    /**
+     * Set by the build: the island's slot content, as HTML, for the client to
+     * rebuild from - the content between the markers is output, not slot
+     * content.
+     *
+     * In the marker rather than in an element beside the output, because an
+     * element there is a sibling the page's CSS can see: a stash before each
+     * island broke `.item + .item` in the build's HTML, and the layout shifted
+     * when hydration took the stash away.
+     */
+    slot?: string;
 }
 export declare const MARKER_END = "<!--/lsp-->";
 /**
  * A comment may not contain `--`, so any run of dashes in the payload is
- * escaped. `-` parses back to `-`, so the round trip is lossless.
+ * escaped; nor `<!--`, which slot content full of nested markers would bring,
+ * so `<` is escaped too. Both parse back to themselves: the round trip is
+ * lossless.
  */
 export declare function serializeMarker(payload: MarkerPayload): string;
 export declare function isMarkerStart(node: Node): boolean;
@@ -75,13 +88,17 @@ export declare function parseMarker(node: Node): MarkerPayload | null;
  * Returns -1 if unterminated.
  */
 export declare function findMarkerEnd(nodes: Node[], start: number): number;
-/** The inert `<template data-lsp-slot>` a server-rendered island keeps its slot content in. */
+/**
+ * The inert `<template data-lsp-slot>` a server-rendered island kept its slot
+ * content in before 0.4.4. The payload's `slot` replaced it; this stays so a
+ * page built by an older version still hydrates.
+ */
 export declare function isSlotStash(node: Node): boolean;
 /**
  * The slot content for a marker.
  *
  * For a server-rendered island the nodes between the comments are *output*,
- * not slot content - the original is stashed in an inert
- * `<template data-lsp-slot>` so the client can rebuild from it.
+ * not slot content - the original travels in the payload's `slot` (or, from
+ * builds before 0.4.4, in a `<template data-lsp-slot>` stash).
  */
 export declare function slotNodesFor(payload: MarkerPayload, between: Node[]): Node[];

package/dist/vite.js

@@ -691,7 +691,7 @@ var START = "lsp ";
 var END = "/lsp";
 var MARKER_END = `<!--${END}-->`;
 function serializeMarker(payload) {
-  const json = JSON.stringify(payload).replace(/-(?=-)/g, "\\u002d");
+  const json = JSON.stringify(payload).replace(/-(?=-)/g, "\\u002d").replace(/</g, "\\u003c");
   return `<!--${START}${json}-->`;
 }
 function isMarkerStart(node) {
@@ -729,6 +729,11 @@ function isSlotStash(node) {
 function slotNodesFor(payload, between) {
   if (!payload.ssr)
     return between;
+  if (payload.slot) {
+    const template = document.createElement("template");
+    template.innerHTML = payload.slot;
+    return Array.from(template.content.childNodes);
+  }
   const stash = between.find(isSlotStash);
   return stash ? Array.from(stash.content.childNodes) : [];
 }
@@ -4746,7 +4751,7 @@ function readIslands(document2) {
         hydrate: payload?.hydrate,
         binds: Object.values(payload?.bind ?? {}),
         handlers: Object.keys(payload?.on ?? {}).length,
-        slotted: false,
+        slotted: !!payload?.slot,
         children: []
       };
       (stack[stack.length - 1]?.children ?? roots).push(island);
@@ -4757,9 +4762,6 @@ function readIslands(document2) {
       for (let cursor = island.start.nextSibling;cursor && cursor !== island.end; cursor = cursor.nextSibling) {
         if (cursor.nodeType !== 1)
           continue;
-        if (cursor.hasAttribute("data-lsp-slot")) {
-          island.slotted = true;
-        }
         const id = cursor.getAttribute("data-lsp-instance");
         if (id && !island.instance)
           island.instance = id;
@@ -4821,13 +4823,9 @@ function markRendered(document2, slots) {
       continue;
     }
     payload.ssr = 1;
+    if (slot.html.trim())
+      payload.slot = slot.html;
     slot.start.data = serializeMarker(payload).slice(4, -3);
-    if (slot.html.trim()) {
-      const template = document2.createElement("template");
-      template.setAttribute("data-lsp-slot", "");
-      template.innerHTML = slot.html;
-      slot.start.parentNode?.insertBefore(template, slot.start.nextSibling);
-    }
     rendered++;
   }
   return { rendered, skipped };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed-js/core",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",