@jxsuite/compiler 0.28.5 → 0.29.0

package/src/targets/compile-class.ts

@@ -128,16 +128,16 @@ export function compileClassJson(classDef: JxClassDef, _opts: Record<string, unk
     if (m.role === "accessor") {
       // Getter
       if (m.getter) {
-        lines.push(`  ${staticPrefix}get ${prefix}${name}() {`);
-        lines.push(`    ${m.getter.body}`);
-        lines.push("  }");
+        lines.push(`  ${staticPrefix}get ${prefix}${name}() {`, `    ${m.getter.body}`, "  }");
       }
       // Setter
       if (m.setter) {
         const setterParams = resolveParams(m.setter.parameters ?? []);
-        lines.push(`  ${staticPrefix}set ${prefix}${name}(${setterParams}) {`);
-        lines.push(`    ${m.setter.body}`);
-        lines.push("  }");
+        lines.push(
+          `  ${staticPrefix}set ${prefix}${name}(${setterParams}) {`,
+          `    ${m.setter.body}`,
+          "  }",
+        );
       }
     } else {
       lines.push(`  ${staticPrefix}${asyncPrefix}${prefix}${name}(${params}) {`);
@@ -148,11 +148,7 @@ export function compileClassJson(classDef: JxClassDef, _opts: Record<string, unk
     }
   }
 
-  lines.push("}");
-  lines.push("");
-  lines.push(`export { ${className} };`);
-  lines.push(`export default ${className};`);
-  lines.push("");
+  lines.push("}", "", `export { ${className} };`, `export default ${className};`, "");
 
   return lines.join("\n");
 }

package/src/targets/compile-client.ts

@@ -39,6 +39,7 @@ import type {
   JsonObject,
   JsonValue,
   JxDocument,
+  JxMappedArray,
   JxMutableNode,
   JxPrototypeDef,
   JxStyle,
@@ -481,6 +482,22 @@ function buildClientNode(
       return `<${tag}${staticAttrs}${dataBindAttr2}${bindAttrStr2}>`;
     }
     return `<${tag}${staticAttrs}${dataBindAttr2}${bindAttrStr2}></${tag}>`;
+  } else if (Array.isArray(source.children) && source.children.some((c) => isMappedArray(c))) {
+    // ─── Children mix static nodes with array pseudo-elements ───
+    // Render the whole children region via one lit binding on this element (wrapper-less, one
+    // Lit part per element so multiple arrays among siblings don't collide), with each array
+    // Member expanded inline as a `.map()` hole.
+    counter.needsLit = true;
+    const listKey = `_children${counter.l}`;
+    counter.l += 1;
+    const childrenTpl = source.children
+      .map((c) => emitChildLit(c as JxMutableNode))
+      .join("\n      ");
+    bindings.set(listKey, `() => html\`\n      ${childrenTpl}\n    \``);
+    bindAttrs.push(`:render="${listKey}"`);
+    needsBind = true;
+    const bindAttrStr2 = ` ${bindAttrs.join(" ")}`;
+    return `<${tag}${staticAttrs} data-bind${bindAttrStr2}></${tag}>`;
   } else if (Array.isArray(source.children)) {
     const rawChildren = Array.isArray(raw?.children) ? raw.children : undefined;
     inner = source.children
@@ -611,10 +628,11 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
     }
   } else if (def.innerHTML) {
     inner = mapRefsToLit(String(def.innerHTML));
+  } else if (isMappedArray(def.children)) {
+    // Legacy whole-children repeater nested inside a map template.
+    inner = `\n      ${emitArrayHole(def.children)}\n    `;
   } else if (Array.isArray(def.children)) {
-    inner = `\n      ${def.children
-      .map((c) => emitLitMapTemplate(c as JxMutableNode))
-      .join("\n      ")}\n    `;
+    inner = `\n      ${def.children.map((c) => emitChildLit(c)).join("\n      ")}\n    `;
   }
 
   const voidTags = new Set(["input", "br", "hr", "img", "meta", "link"]);
@@ -624,6 +642,42 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
   return `<${tag}${attrs}>${inner}</${tag}>`;
 }
 
+/**
+ * Emit one child of a lit template: a string text node, an array pseudo-element (expanded inline
+ * via a `.map()` hole), or a nested element.
+ *
+ * @param {JxMutableNode | string} c
+ * @returns {string}
+ */
+function emitChildLit(c: JxMutableNode | string): string {
+  if (typeof c === "string") {
+    return isTemplateString(c) ? mapRefsToLit(c) : escapeHtml(c);
+  }
+  if (typeof c === "number" || typeof c === "boolean") {
+    return escapeHtml(String(c));
+  }
+  if (isMappedArray(c)) {
+    return emitArrayHole(c);
+  }
+  return emitLitMapTemplate(c);
+}
+
+/**
+ * Emit a lit-html `${(items ?? []).map(...)}` hole for a mapped array, expanding its template
+ * inline among sibling nodes (wrapper-less).
+ *
+ * @param {JxMappedArray} arrayDef
+ * @returns {string}
+ */
+function emitArrayHole(arrayDef: JxMappedArray): string {
+  const { items } = arrayDef;
+  const itemsExpr = isRefObject(items)
+    ? `state.${refToBindingKey((items as { $ref: string }).$ref)}`
+    : JSON.stringify(items ?? []);
+  const tpl = emitLitMapTemplate(arrayDef.map);
+  return `\${(${itemsExpr} ?? []).map((item, index) => html\`${tpl}\`)}`;
+}
+
 /**
  * Replace $map references: $map.item → item, $map.index → index
  *
@@ -696,15 +750,12 @@ function emitClientModule(
     lines.push(`import { ${[...names].join(", ")} } from '${src}';`);
   }
 
-  lines.push("");
-
   // State — reactive state
-  lines.push("const state = reactive({");
+  lines.push("", "const state = reactive({");
   for (const [key, val] of stateEntries) {
     lines.push(`  ${key}: ${JSON.stringify(val)},`);
   }
-  lines.push("});");
-  lines.push("");
+  lines.push("});", "");
 
   // Prototype init blocks (Request fetch, LocalStorage read, etc.)
   if (initBlocks.length > 0) {
@@ -750,38 +801,43 @@ function emitClientModule(
   } else {
     lines.push("const on = {};");
   }
-  lines.push("");
-
   // Hydration function
-  lines.push("function hydrate(root) {");
-  lines.push("  root.querySelectorAll('[data-bind]').forEach(el => {");
-  lines.push("    [...el.attributes].forEach(a => {");
-  lines.push("      if (a.name.startsWith(':')) {");
-  lines.push("        const parts = a.name.slice(1).split('.');");
-  lines.push("        const key = a.value;");
+  lines.push(
+    "",
+    "function hydrate(root) {",
+    "  root.querySelectorAll('[data-bind]').forEach(el => {",
+    "    [...el.attributes].forEach(a => {",
+    "      if (a.name.startsWith(':')) {",
+    "        const parts = a.name.slice(1).split('.');",
+    "        const key = a.value;",
+  );
   if (needsLit) {
-    lines.push("        if (parts[0] === 'render') {");
-    lines.push("          effect(() => { render(bind[key](), el); });");
-    lines.push("        } else if (parts[0] === 'style' && parts.length > 1) {");
+    lines.push(
+      "        if (parts[0] === 'render') {",
+      "          effect(() => { render(bind[key](), el); });",
+      "        } else if (parts[0] === 'style' && parts.length > 1) {",
+    );
   } else {
     lines.push("        if (parts[0] === 'style' && parts.length > 1) {");
   }
-  lines.push("          effect(() => { el.style[parts[1]] = bind[key](); });");
-  lines.push("        } else if (parts[0] === 'attr' && parts.length > 1) {");
-  lines.push("          effect(() => { el.setAttribute(parts[1], bind[key]()); });");
-  lines.push("        } else {");
-  lines.push("          const prop = parts[0].replace(/-([a-z])/g, (_, c) => c.toUpperCase());");
-  lines.push("          effect(() => { el[prop] = bind[key](); });");
-  lines.push("        }");
-  lines.push("      } else if (a.name.startsWith('@')) {");
-  lines.push("        el.addEventListener(a.name.slice(1), on[a.value]);");
-  lines.push("      }");
-  lines.push("    });");
-  lines.push("  });");
-  lines.push("}");
-  lines.push("");
-  lines.push("hydrate(document);");
-  lines.push("");
+  lines.push(
+    "          effect(() => { el.style[parts[1]] = bind[key](); });",
+    "        } else if (parts[0] === 'attr' && parts.length > 1) {",
+    "          effect(() => { el.setAttribute(parts[1], bind[key]()); });",
+    "        } else {",
+    "          const prop = parts[0].replace(/-([a-z])/g, (_, c) => c.toUpperCase());",
+    "          effect(() => { el[prop] = bind[key](); });",
+    "        }",
+    "      } else if (a.name.startsWith('@')) {",
+    "        el.addEventListener(a.name.slice(1), on[a.value]);",
+    "      }",
+    "    });",
+    "  });",
+    "}",
+    "",
+    "hydrate(document);",
+    "",
+  );
 
   return lines.join("\n");
 }
@@ -808,8 +864,10 @@ function emitRequestInit(key: string, def: JxPrototypeDef) {
   ];
 
   if (isTemplateUrl) {
-    lines.push(`  const url = \`${url}\`;`);
-    lines.push('  if (!url || url === "undefined" || url.includes("undefined")) return;');
+    lines.push(
+      `  const url = \`${url}\`;`,
+      '  if (!url || url === "undefined" || url.includes("undefined")) return;',
+    );
   } else {
     lines.push(`  const url = ${JSON.stringify(url)};`);
   }
@@ -830,11 +888,13 @@ function emitRequestInit(key: string, def: JxPrototypeDef) {
   }
 
   const optsStr = fetchOpts.length > 0 ? `, { ${fetchOpts.join(", ")} }` : "";
-  lines.push(`  fetch(url${optsStr})`);
-  lines.push("    .then(r => r.ok ? r.json() : Promise.reject(r.statusText))");
-  lines.push(`    .then(d => { state.${key} = d; })`);
-  lines.push(`    .catch(e => { state.${key} = { error: String(e) }; });`);
-  lines.push("});");
+  lines.push(
+    `  fetch(url${optsStr})`,
+    "    .then(r => r.ok ? r.json() : Promise.reject(r.statusText))",
+    `    .then(d => { state.${key} = d; })`,
+    `    .catch(e => { state.${key} = { error: String(e) }; });`,
+    "});",
+  );
 
   return lines.join("\n");
 }

package/src/targets/compile-element.ts

@@ -268,16 +268,17 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
     lines.push(`import { ${names.join(", ")} } from '${srcPath}';`);
   }
 
-  lines.push(`import { reactive, computed, effect } from '@vue/reactivity';`);
-  lines.push(`import { render, html } from 'lit-html';`);
-  lines.push("");
-  lines.push(`class ${className} extends HTMLElement {`);
-  lines.push("  #dispose = null;");
-  lines.push("");
-
-  // Constructor: build reactive state
-  lines.push("  constructor() {");
-  lines.push("    super();");
+  lines.push(
+    `import { reactive, computed, effect } from '@vue/reactivity';`,
+    `import { render, html } from 'lit-html';`,
+    "",
+    `class ${className} extends HTMLElement {`,
+    "  #dispose = null;",
+    "",
+    // Constructor: build reactive state
+    "  constructor() {",
+    "    super();",
+  );
 
   const stateEntries: [string, string][] = [];
   const computedEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
@@ -330,9 +331,11 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
         // $src function — wrap imported function so it receives state
         lines.push(`    this.state.${key} = (${paramList}) => ${key}(${paramList});`);
       } else {
-        lines.push(`    this.state.${key} = (${paramList}) => {`);
-        lines.push(`      ${def.body ?? ""}`);
-        lines.push("    };");
+        lines.push(
+          `    this.state.${key} = (${paramList}) => {`,
+          `      ${def.body ?? ""}`,
+          "    };",
+        );
       }
     }
   }
@@ -351,13 +354,11 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
     } else {
       lines.push(`    this.state.${key} = computed(() => {`);
       const body = (def.body ?? "").replaceAll("state.", "this.state.");
-      lines.push(`      ${body}`);
-      lines.push("    });");
+      lines.push(`      ${body}`, "    });");
     }
   }
 
-  lines.push("  }"); // End constructor
-  lines.push("");
+  lines.push("  }", ""); // End constructor
 
   // Collect CSS rules from children tree (assigns .jx-N classes to defs)
   const cssRules: string[] = [];
@@ -368,35 +369,36 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
     }
   }
 
-  // Template method
-  lines.push("  template() {");
-  lines.push("    const s = this.state;");
-  lines.push("    return html`");
-  lines.push(emitLitChildren(doc.children, doc.style, "      "));
-  lines.push("    `;");
-  lines.push("  }");
-  lines.push("");
-
-  // ConnectedCallback
-  lines.push("  connectedCallback() {");
-  // Read $props from data-jx-props attribute (set by compiler for pre-rendered instances)
-  lines.push("    const _pa = this.getAttribute('data-jx-props');");
-  lines.push("    if (_pa) {");
-  lines.push("      try {");
-  lines.push("        const _p = JSON.parse(_pa);");
-  lines.push("        for (const [k, v] of Object.entries(_p)) {");
-  lines.push("          if (k in this.state) this.state[k] = v;");
-  lines.push("        }");
-  lines.push("      } catch {}");
-  lines.push("      this.removeAttribute('data-jx-props');");
-  lines.push("    }");
-  // Merge JS properties set before connection (by parent runtime).
-  // Only check own properties to avoid inherited DOM properties like `title`.
-  lines.push("    for (const key of Object.keys(this.state)) {");
-  lines.push("      if (this.hasOwnProperty(key) && this[key] !== undefined) {");
-  lines.push("        this.state[key] = this[key];");
-  lines.push("      }");
-  lines.push("    }");
+  lines.push(
+    // Template method
+    "  template() {",
+    "    const s = this.state;",
+    "    return html`",
+    emitLitChildren(doc.children, doc.style, "      "),
+    "    `;",
+    "  }",
+    "",
+    // ConnectedCallback
+    "  connectedCallback() {",
+    // Read $props from data-jx-props attribute (set by compiler for pre-rendered instances)
+    "    const _pa = this.getAttribute('data-jx-props');",
+    "    if (_pa) {",
+    "      try {",
+    "        const _p = JSON.parse(_pa);",
+    "        for (const [k, v] of Object.entries(_p)) {",
+    "          if (k in this.state) this.state[k] = v;",
+    "        }",
+    "      } catch {}",
+    "      this.removeAttribute('data-jx-props');",
+    "    }",
+    // Merge JS properties set before connection (by parent runtime).
+    // Only check own properties to avoid inherited DOM properties like `title`.
+    "    for (const key of Object.keys(this.state)) {",
+    "      if (this.hasOwnProperty(key) && this[key] !== undefined) {",
+    "        this.state[key] = this[key];",
+    "      }",
+    "    }",
+  );
   if (doc.style && typeof doc.style === "object") {
     const dynamicStyles: [string, string][] = [];
     for (const [prop, value] of Object.entries(doc.style)) {
@@ -436,31 +438,35 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
       "    const _slotted = Array.from(this.childNodes).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim()));",
     );
   }
-  lines.push("    if (this.hasAttribute('data-jx-prerendered')) {");
-  lines.push("      this.removeAttribute('data-jx-prerendered');");
-  lines.push("    }");
-  lines.push("    this.innerHTML = '';");
-  lines.push("    this.#dispose = effect(() => render(this.template(), this));");
+  lines.push(
+    "    if (this.hasAttribute('data-jx-prerendered')) {",
+    "      this.removeAttribute('data-jx-prerendered');",
+    "    }",
+    "    this.innerHTML = '';",
+    "    this.#dispose = effect(() => render(this.template(), this));",
+  );
   if (hasSlot) {
     // Replace <slot> placeholder with saved slotted content
-    lines.push("    const _slot = this.querySelector('slot');");
-    lines.push("    if (_slot && _slotted.length > 0) {");
-    lines.push("      for (const n of _slotted) _slot.before(n);");
-    lines.push("      _slot.remove();");
-    lines.push("    }");
+    lines.push(
+      "    const _slot = this.querySelector('slot');",
+      "    if (_slot && _slotted.length > 0) {",
+      "      for (const n of _slotted) _slot.before(n);",
+      "      _slot.remove();",
+      "    }",
+    );
   }
-  lines.push("  }");
-  lines.push("");
-
-  // DisconnectedCallback
-  lines.push("  disconnectedCallback() {");
-  lines.push("    if (this.#dispose) { this.#dispose(); this.#dispose = null; }");
-  lines.push("  }");
-
-  lines.push("}");
-  lines.push("");
-  lines.push(`customElements.define('${doc.tagName}', ${className});`);
-  lines.push("");
+  lines.push(
+    "  }",
+    "",
+    // DisconnectedCallback
+    "  disconnectedCallback() {",
+    "    if (this.#dispose) { this.#dispose(); this.#dispose = null; }",
+    "  }",
+    "}",
+    "",
+    `customElements.define('${doc.tagName}', ${className});`,
+    "",
+  );
 
   return lines.join("\n");
 }
@@ -475,13 +481,14 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
  */
 function emitLitChildren(
   children: JxMutableNode["children"],
-  parentStyle: JxStyle | null | undefined,
+  _parentStyle: JxStyle | null | undefined,
   indent: string,
 ) {
   if (!children) {
     return "";
   }
 
+  // Legacy whole-children repeater: the array IS the children slot.
   if (isMappedArray(children)) {
     return emitMappedArray(children, indent);
   }
@@ -490,7 +497,12 @@ function emitLitChildren(
     return "";
   }
 
-  return children.map((child: JxMutableNode | string) => emitLitNode(child, indent)).join("\n");
+  // Mixed children: elements/text plus array pseudo-elements expanded inline among siblings.
+  return children
+    .map((child: JxMutableNode | string) =>
+      isMappedArray(child) ? emitMappedArray(child, indent) : emitLitNode(child, indent),
+    )
+    .join("\n");
 }
 
 /**