@zubra/runtime 5.10.2 → 5.11.0

package/dist/production/element.js

@@ -635,19 +635,26 @@ const loadRemark = () => (remarking ??= import('./remark.js').then(
   (module) => (remarker = module),
   () => (remarker = { remark: () => false }),
 ));
-/** Whether `root`'s server markup lost the comments `template` has (its top-level elements are there). */
-function lostComments(root, template) {
+/**
+ * Whether `root`'s server markup lost the comments `template` has (its top-level elements are
+ * there). A template that is only regions has none of its own: `roots`, from the compiler, names
+ * the elements its regions' blocks start with, and markup with none of them is the page's own
+ * content (text a framework gave it, say), which needs no check, so the element renders now.
+ */
+function lostComments(root, template, roots) {
   if (!root || !hasContent(root) || !hasComment(template) || hasComment(root)) return false;
   // The page's own children for a slot aren't server markup: the template's top-level elements
   // must be there, in order.
   const children = [...root.children];
   let at = 0;
+  let elements = 0;
   for (const node of positions(template.firstChild, null)) {
     if (node.nodeType !== 1) continue;
     while (at < children.length && children[at].localName !== node.localName) at++;
     if (at++ >= children.length) return false;
+    elements++;
   }
-  return true;
+  return elements || !roots ? true : children.some((child) => roots.includes(child.localName));
 }
 
 /** A range's shape: its top-level positions as tag names and region markers. */
@@ -1602,7 +1609,7 @@ export function $define(tag, definition) {
 
 function defineElement(tag, definition) {
   const { props = {}, shadow = false, form = false, events = [], styled = false, inPage = false } = definition;
-  let { template = '', slots = [], styles = null, setup } = definition;
+  let { roots, template = '', slots = [], styles = null, setup } = definition;
   // On a server (no DOM), a stand-in with the same `zubra` description, so a module that imports a
   // component loads there: adapters render the host tag, and `@zubra/runtime/server` renders it.
   if (typeof HTMLElement === 'undefined') return serverElement(tag, { props, shadow, form, slots, events, styled });
@@ -1699,7 +1706,7 @@ function defineElement(tag, definition) {
         if (root.adoptedStyleSheets && !(inPage && root === document)) adopt(root, ownSheets());
       }
       if (this.#scope) this.#scope.resume();
-      else if (!remarker && lostComments(shadow ? this.shadowRoot : this, componentTemplate.content)) {
+      else if (!remarker && lostComments(shadow ? this.shadowRoot : this, componentTemplate.content, roots)) {
         // Server markup without its comments: start once the code that puts them back is here.
         this.#starting ??= loadRemark().then(() => {
           this.#starting = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/runtime",
-  "version": "5.10.2",
+  "version": "5.11.0",
   "description": "Browser runtime for Zubra compiled components, built on the TC39 Signals API",
   "license": "ISC",
   "repository": {

package/src/element.js

@@ -654,19 +654,26 @@ const loadRemark = () => (remarking ??= import('./remark.js').then(
   (module) => (remarker = module),
   () => (remarker = { remark: () => false }),
 ));
-/** Whether `root`'s server markup lost the comments `template` has (its top-level elements are there). */
-function lostComments(root, template) {
+/**
+ * Whether `root`'s server markup lost the comments `template` has (its top-level elements are
+ * there). A template that is only regions has none of its own: `roots`, from the compiler, names
+ * the elements its regions' blocks start with, and markup with none of them is the page's own
+ * content (text a framework gave it, say), which needs no check, so the element renders now.
+ */
+function lostComments(root, template, roots) {
   if (!root || !hasContent(root) || !hasComment(template) || hasComment(root)) return false;
   // The page's own children for a slot aren't server markup: the template's top-level elements
   // must be there, in order.
   const children = [...root.children];
   let at = 0;
+  let elements = 0;
   for (const node of positions(template.firstChild, null)) {
     if (node.nodeType !== 1) continue;
     while (at < children.length && children[at].localName !== node.localName) at++;
     if (at++ >= children.length) return false;
+    elements++;
   }
-  return true;
+  return elements || !roots ? true : children.some((child) => roots.includes(child.localName));
 }
 
 /** A range's shape: its top-level positions as tag names and region markers. */
@@ -1635,7 +1642,7 @@ const HOT = Symbol('zubra.hot');
 
 function defineElement(tag, definition) {
   const { props = {}, shadow = false, form = false, events = [], styled = false, inPage = false } = definition;
-  let { template = '', slots = [], styles = null, setup } = definition;
+  let { roots, template = '', slots = [], styles = null, setup } = definition;
   // On a server (no DOM), a stand-in with the same `zubra` description, so a module that imports a
   // component loads there: adapters render the host tag, and `@zubra/runtime/server` renders it.
   if (typeof HTMLElement === 'undefined') return serverElement(tag, { props, shadow, form, slots, events, styled });
@@ -1680,7 +1687,7 @@ function defineElement(tag, definition) {
     /** Swap in a new version of the component (see above); false if its interface changed. */
     static [HOT](next) {
       if (shape(next) !== shape(definition)) return false;
-      ({ template = '', slots = [], setup } = next);
+      ({ roots, template = '', slots = [], setup } = next);
       componentTemplate.content = blueprint({ template });
       templateSignature = signature(childRange(componentTemplate.content));
       const nextStyles = next.styles ?? null;
@@ -1760,7 +1767,7 @@ function defineElement(tag, definition) {
         if (root.adoptedStyleSheets && !(inPage && root === document)) adopt(root, ownSheets());
       }
       if (this.#scope) this.#scope.resume();
-      else if (!remarker && lostComments(shadow ? this.shadowRoot : this, componentTemplate.content)) {
+      else if (!remarker && lostComments(shadow ? this.shadowRoot : this, componentTemplate.content, roots)) {
         // Server markup without its comments: start once the code that puts them back is here.
         this.#starting ??= loadRemark().then(() => {
           this.#starting = null;

package/types/index.d.ts

@@ -184,6 +184,8 @@ export interface Definition {
   form?: boolean;
   slots?: string[];
   events?: string[];
+  /** For a template that is only regions: the elements their blocks start with (server markup's top level). */
+  roots?: string[];
   /** The component has a `<style>`. */
   styled?: boolean;
   /** Its stylesheet, when the module carries it (otherwise the bundler adds it to the page). */