@lightspeed-js/core 0.4.3 → 0.4.5

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}-->`;
 }
 
@@ -999,7 +999,7 @@ class BindingEvaluator {
     }
     if (binding.kind === "prop") {
       const target = binding.target;
-      if (Object.is(target.props[binding.name], value))
+      if (sameValue(target.props[binding.name], value))
         return;
       target.props[binding.name] = value;
       this.onPropChanged(target);
@@ -1112,6 +1112,26 @@ function setHidden(el, hidden) {
   else
     el.removeAttribute(HIDDEN_ATTR);
 }
+function sameValue(a, b, depth = 0) {
+  if (Object.is(a, b))
+    return true;
+  if (depth > 20 || !isPlain(a) || !isPlain(b))
+    return false;
+  if (Array.isArray(a) !== Array.isArray(b))
+    return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length)
+    return false;
+  return keys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && sameValue(a[key], b[key], depth + 1));
+}
+function isPlain(value) {
+  if (value === null || typeof value !== "object")
+    return false;
+  if (Array.isArray(value))
+    return true;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
 // src/runtime/dom/ForBlock.ts
 function toIterable(value) {
   if (value == null)

package/dist/index.js

@@ -571,7 +571,7 @@ class BindingEvaluator {
     }
     if (binding.kind === "prop") {
       const target = binding.target;
-      if (Object.is(target.props[binding.name], value))
+      if (sameValue(target.props[binding.name], value))
         return;
       target.props[binding.name] = value;
       this.onPropChanged(target);
@@ -684,6 +684,26 @@ function setHidden(el, hidden) {
   else
     el.removeAttribute(HIDDEN_ATTR);
 }
+function sameValue(a, b, depth = 0) {
+  if (Object.is(a, b))
+    return true;
+  if (depth > 20 || !isPlain(a) || !isPlain(b))
+    return false;
+  if (Array.isArray(a) !== Array.isArray(b))
+    return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length)
+    return false;
+  return keys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && sameValue(a[key], b[key], depth + 1));
+}
+function isPlain(value) {
+  if (value === null || typeof value !== "object")
+    return false;
+  if (Array.isArray(value))
+    return true;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
 // src/runtime/events/EventBinder.ts
 class EventBinder {
   bind(el, eventType, handlerName, owner, cleanupTarget = owner) {
@@ -1275,6 +1295,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

@@ -590,7 +590,7 @@ class BindingEvaluator {
     }
     if (binding.kind === "prop") {
       const target = binding.target;
-      if (Object.is(target.props[binding.name], value))
+      if (sameValue(target.props[binding.name], value))
         return;
       target.props[binding.name] = value;
       this.onPropChanged(target);
@@ -703,6 +703,26 @@ function setHidden(el, hidden) {
   else
     el.removeAttribute(HIDDEN_ATTR);
 }
+function sameValue(a, b, depth = 0) {
+  if (Object.is(a, b))
+    return true;
+  if (depth > 20 || !isPlain(a) || !isPlain(b))
+    return false;
+  if (Array.isArray(a) !== Array.isArray(b))
+    return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length)
+    return false;
+  return keys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && sameValue(a[key], b[key], depth + 1));
+}
+function isPlain(value) {
+  if (value === null || typeof value !== "object")
+    return false;
+  if (Array.isArray(value))
+    return true;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
 // src/runtime/events/EventBinder.ts
 class EventBinder {
   bind(el, eventType, handlerName, owner, cleanupTarget = owner) {
@@ -1260,7 +1280,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 +1318,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) : [];
 }
@@ -3156,7 +3181,14 @@ function serializeNodes(nodes) {
 
 // src/ssg/render.ts
 var MAX_BUILD_ROUNDS = 6;
-async function renderPage(options) {
+var queue = Promise.resolve();
+function renderPage(options) {
+  const next = queue.then(() => renderPageNow(options));
+  queue = next.catch(() => {
+  });
+  return next;
+}
+async function renderPageNow(options) {
   const jsdom = await loadJsdom();
   if (!jsdom) {
     return {
@@ -3355,7 +3387,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 +3398,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 +3459,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

@@ -329,7 +329,7 @@ class BindingEvaluator {
     }
     if (binding.kind === "prop") {
       const target = binding.target;
-      if (Object.is(target.props[binding.name], value))
+      if (sameValue(target.props[binding.name], value))
         return;
       target.props[binding.name] = value;
       this.onPropChanged(target);
@@ -442,6 +442,26 @@ function setHidden(el, hidden) {
   else
     el.removeAttribute(HIDDEN_ATTR);
 }
+function sameValue(a, b, depth = 0) {
+  if (Object.is(a, b))
+    return true;
+  if (depth > 20 || !isPlain(a) || !isPlain(b))
+    return false;
+  if (Array.isArray(a) !== Array.isArray(b))
+    return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length)
+    return false;
+  return keys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && sameValue(a[key], b[key], depth + 1));
+}
+function isPlain(value) {
+  if (value === null || typeof value !== "object")
+    return false;
+  if (Array.isArray(value))
+    return true;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+}
 // src/runtime/dom/ForBlock.ts
 class Row {
   locals;
@@ -691,7 +711,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 +749,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) : [];
 }
@@ -4547,7 +4572,14 @@ function serializeNodes(nodes) {
 
 // src/ssg/render.ts
 var MAX_BUILD_ROUNDS = 6;
-async function renderPage(options) {
+var queue = Promise.resolve();
+function renderPage(options) {
+  const next = queue.then(() => renderPageNow(options));
+  queue = next.catch(() => {
+  });
+  return next;
+}
+async function renderPageNow(options) {
   const jsdom = await loadJsdom();
   if (!jsdom) {
     return {
@@ -4746,7 +4778,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 +4789,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 +4850,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.5",
   "description": "Lightspeed: a compile-first framework for islands of reactivity in static HTML.",
   "keywords": [
     "lightspeed",