@jxsuite/compiler 0.6.1 → 0.7.0

package/src/site/site-build.js

@@ -11,8 +11,10 @@
 import {
   readFileSync,
   writeFileSync,
+  copyFileSync,
   mkdirSync,
   existsSync,
+  renameSync,
   rmSync,
   cpSync,
   readdirSync,
@@ -33,6 +35,8 @@ import {
   isComponentFullyStatic,
   buildComponentCSS,
   collectServerEntries,
+  renderStaticNode,
+  resolveStaticValue,
   DEFAULT_REACTIVITY_SRC,
   DEFAULT_LIT_HTML_SRC,
 } from "../shared.js";
@@ -68,7 +72,19 @@ export async function buildSite(projectRoot, options = {}) {
 
   // ── 2. Clean output directory ───────────────────────────────────────────
   if (clean && existsSync(outDir)) {
+    // Preserve optimized images across builds — sharp re-encoding is expensive
+    const optimizedDir = resolve(outDir, "images/_optimized");
+    const hasOptimized = existsSync(optimizedDir);
+    let tmpOptimized = "";
+    if (hasOptimized) {
+      tmpOptimized = resolve(projectRoot, ".jx-cache/_optimized_tmp");
+      renameSync(optimizedDir, tmpOptimized);
+    }
     rmSync(outDir, { recursive: true, force: true });
+    if (hasOptimized) {
+      mkdirSync(resolve(outDir, "images"), { recursive: true });
+      renameSync(tmpOptimized, optimizedDir);
+    }
   }
   mkdirSync(outDir, { recursive: true });
 
@@ -104,8 +120,6 @@ export async function buildSite(projectRoot, options = {}) {
   /** @type {string[]} */
   const compiledComponentTags = [];
   /** @type {Map<string, string>} */
-  const preRendered = new Map(); // tagName → innerHTML (default state, fallback)
-  /** @type {Map<string, string>} */
   const componentCSS = new Map(); // tagName → CSS text
   /** @type {Map<string, any>} */
   const componentDefs = new Map(); // tagName → parsed component definition
@@ -138,10 +152,7 @@ export async function buildSite(projectRoot, options = {}) {
           : JSON.parse(readFileSync(componentPath, "utf8"));
         if (doc.tagName) {
           componentDefs.set(doc.tagName, doc);
-          const innerHTML = preRenderComponentHtml(doc);
-          if (innerHTML) preRendered.set(doc.tagName, innerHTML);
-
-          const css = buildComponentCSS(doc.tagName, doc.style);
+          const css = buildComponentCSS(doc.tagName, doc.style, doc, projectConfig.$media ?? {});
           if (css) {
             componentCSS.set(doc.tagName, css);
             writeFileSync(resolve(componentOutDir, `${doc.tagName}.css`), css, "utf8");
@@ -186,16 +197,14 @@ export async function buildSite(projectRoot, options = {}) {
         collections,
         imageCache,
         outDir,
+        componentDefs,
       );
 
-      // Inject pre-rendered component HTML scaffolding (instance-aware)
-      // Must happen before script injection so we know which tags are fully static
+      // Determine which component tags are fully static (for script omission)
       /** @type {Set<string>} */
-      let staticTags = new Set();
-      if (componentDefs.size > 0) {
-        const preResult = injectPreRenderedComponents(result.html, preRendered, componentDefs);
-        result.html = preResult.html;
-        staticTags = preResult.staticTags;
+      const staticTags = new Set();
+      for (const [tag, def] of componentDefs) {
+        if (isComponentFullyStatic(def)) staticTags.add(tag);
       }
 
       // Inject component CSS and JS scripts
@@ -272,10 +281,20 @@ export async function buildSite(projectRoot, options = {}) {
     });
 
     if (workerSource) {
-      const workerPath = resolve(projectRoot, "_worker.js");
+      const workerPath = resolve(outDir, "worker.js");
       writeFileSync(workerPath, workerSource, "utf8");
       fileCount++;
-      log(`  Generated _worker.js (${deduped.size} server function(s))`);
+      log(`  Generated dist/worker.js (${deduped.size} server function(s))`);
+
+      // Copy server source files into dist/components/ so worker imports resolve
+      const distComponentsDir = resolve(outDir, "components");
+      for (const { src } of deduped.values()) {
+        const srcFile = resolve(projectRoot, src.replace(/^\.\//, ""));
+        const destFile = resolve(distComponentsDir, src.replace(/^\.\/components\//, ""));
+        if (existsSync(srcFile)) {
+          copyFileSync(srcFile, destFile);
+        }
+      }
     }
   }
 
@@ -332,6 +351,7 @@ async function compilePage(
   collections = new Map(),
   imageCache = null,
   outDir = "",
+  componentDefs = new Map(),
 ) {
   // Load the raw page document
   let pageDoc;
@@ -377,6 +397,9 @@ async function compilePage(
   // so that timing: "compiler" data is baked into the static HTML
   resolveDocTemplates(layoutDoc, scope);
 
+  // Expand registered custom elements (apply $props, pre-render, mark static/prerendered)
+  expandComponents(layoutDoc, componentDefs);
+
   // Strip resolved timing: "compiler" state entries — they're now baked into the tree
   // and keeping them would cause isDynamic() to misclassify the page as dynamic
   if (layoutDoc.state) {
@@ -551,11 +574,95 @@ function resolveDocTemplates(node, scope) {
       }
     }
   }
+  if (typeof node.children === "string" && isTemplateString(node.children)) {
+    const resolved = evaluateStaticTemplate(node.children, scope);
+    if (Array.isArray(resolved)) {
+      node.children = resolved;
+      for (const child of node.children) {
+        resolveDocTemplates(child, scope);
+      }
+    }
+  } else if (Array.isArray(node.children)) {
+    let i = 0;
+    while (i < node.children.length) {
+      const child = node.children[i];
+      if (typeof child === "string" && isTemplateString(child)) {
+        const resolved = evaluateStaticTemplate(child, scope);
+        if (Array.isArray(resolved)) {
+          node.children.splice(i, 1, ...resolved);
+          for (const spliced of resolved) {
+            resolveDocTemplates(spliced, scope);
+          }
+          i += resolved.length;
+          continue;
+        }
+      }
+      resolveDocTemplates(child, scope);
+      i++;
+    }
+  }
+}
+
+/**
+ * Walk the document tree and expand registered custom elements in-place. Applies $props via
+ * preRenderComponentHtml, marks static/prerendered.
+ *
+ * @param {any} node
+ * @param {Map<string, any>} componentDefs
+ */
+function expandComponents(node, componentDefs) {
+  if (!node || typeof node !== "object") return;
+  if (Array.isArray(node)) {
+    node.forEach((n) => expandComponents(n, componentDefs));
+    return;
+  }
+
+  // Recurse into children first (bottom-up expansion)
   if (Array.isArray(node.children)) {
     for (const child of node.children) {
-      resolveDocTemplates(child, scope);
+      expandComponents(child, componentDefs);
     }
   }
+
+  const def = componentDefs.get(node.tagName);
+  if (def) {
+    const slotContent =
+      Array.isArray(node.children) && node.children.length > 0
+        ? node.children.map((/** @type {any} */ c) => renderStaticNode(c, {}, null)).join("\n")
+        : null;
+
+    const innerHTML = preRenderComponentHtml(def, node.$props || null, slotContent);
+    const isStatic = isComponentFullyStatic(def);
+
+    node.innerHTML = innerHTML;
+    delete node.children;
+
+    // Resolve template-string host styles with props (per-instance values like background-image)
+    if (def.style && node.$props) {
+      let stateDefs = { ...def.state };
+      for (const [key, value] of Object.entries(node.$props)) {
+        if (key in stateDefs) stateDefs[key] = value;
+        else stateDefs[key] = value;
+      }
+      const scope = buildInitialScope(stateDefs, null);
+      /** @type {Record<string, any>} */
+      const resolvedStyle = {};
+      for (const [prop, value] of Object.entries(def.style)) {
+        if (typeof value === "string" && isTemplateString(value)) {
+          const resolved = resolveStaticValue(value, scope);
+          if (resolved != null) resolvedStyle[prop] = resolved;
+        }
+      }
+      if (Object.keys(resolvedStyle).length > 0) {
+        node.style = { ...node.style, ...resolvedStyle };
+      }
+    }
+
+    delete node.$props;
+
+    if (isStatic) node.$static = true;
+    else node.$prerendered = true;
+  }
 }
 
 /**
@@ -616,74 +723,6 @@ function injectComponentScripts(
   return html.replace("</body>", `  ${injection}\n</body>`);
 }
 
-/**
- * Inject pre-rendered HTML scaffolding into component tags, using instance-specific props.
- *
- * @param {string} html
- * @param {Map<string, string>} preRendered - TagName → default innerHTML (fallback)
- * @param {Map<string, any>} componentDefs - TagName → parsed component definition
- * @returns {{ html: string; staticTags: Set<string> }}
- */
-function injectPreRenderedComponents(html, preRendered, componentDefs) {
-  /** @type {Set<string>} */
-  const staticTags = new Set();
-  /** @type {Map<string, boolean>} */
-  const tagHasNonStaticInstance = new Map();
-
-  for (const [tag] of componentDefs) {
-    // Match both empty tags and tags with inner content (for slotted components)
-    const pattern = new RegExp(`<${tag}(\\s[^>]*?)?>([\\s\\S]*?)</${tag}>`, "g");
-    html = html.replace(pattern, (match, attrsStr, existingInner) => {
-      const attrs = attrsStr ?? "";
-      const doc = componentDefs.get(tag);
-      if (!doc) {
-        // No definition, use default pre-rendered content
-        const fallback = preRendered.get(tag) ?? "";
-        return `<${tag}${attrs}>${fallback}</${tag}>`;
-      }
-
-      // Extract data-jx-props from the attribute string
-      /** @type {Record<string, any> | null} */
-      let props = null;
-      const propsMatch = attrs.match(/\sdata-jx-props="([^"]*)"/);
-      if (propsMatch) {
-        try {
-          props = JSON.parse(
-            propsMatch[1]
-              .replace(/&quot;/g, '"')
-              .replace(/&amp;/g, "&")
-              .replace(/&lt;/g, "<")
-              .replace(/&gt;/g, ">")
-              .replace(/&#39;/g, "'"),
-          );
-        } catch {}
-      }
-
-      // Pre-render with instance-specific props
-      const slotContent = existingInner.trim() || null;
-      const innerHTML = preRenderComponentHtml(doc, props, slotContent);
-
-      const isStatic = isComponentFullyStatic(doc);
-      if (!isStatic) tagHasNonStaticInstance.set(tag, true);
-
-      if (isStatic) {
-        // Strip data-jx-props from attrs for fully static instances
-        let cleanAttrs = attrs.replace(/\s*data-jx-props="[^"]*"/, "");
-        return `<${tag}${cleanAttrs} data-jx-static>${innerHTML}</${tag}>`;
-      } else {
-        return `<${tag}${attrs} data-jx-prerendered>${innerHTML}</${tag}>`;
-      }
-    });
-
-    // Track whether ALL instances of this tag are static
-    if (componentDefs.has(tag) && !tagHasNonStaticInstance.has(tag)) {
-      staticTags.add(tag);
-    }
-  }
-
-  return { html, staticTags };
-}
-
 /**
  * Inject <script type="module"> tags for npm package $elements (cherry-picked component imports).
  * Bare specifiers are resolved to /node_modules/ paths.

package/src/targets/compile-element.js

@@ -6,7 +6,7 @@
  */
 
 import { camelToKebab, RESERVED_KEYS } from "@jxsuite/runtime";
-import { escapeHtml, tagNameToClassName, isSchemaOnly } from "../shared.js";
+import { escapeHtml, tagNameToClassName, isSchemaOnly, collectStyles } from "../shared.js";
 
 /**
  * Compile a Jx custom element document to a JS module string.
@@ -282,6 +282,16 @@ export function emitElementModule(doc, className, elementImports) {
   lines.push("  }"); // end constructor
   lines.push("");
 
+  // Collect CSS rules from children tree (assigns .jx-N classes to defs)
+  /** @type {string[]} */
+  const cssRules = [];
+  if (Array.isArray(doc.children)) {
+    const counter = { n: 0 };
+    for (const child of doc.children) {
+      collectStyles(child, cssRules, doc.$media ?? {}, "", counter, doc.tagName);
+    }
+  }
+
   // Template method
   lines.push("  template() {");
   lines.push("    const s = this.state;");
@@ -312,8 +322,6 @@ export function emitElementModule(doc, className, elementImports) {
   lines.push("      }");
   lines.push("    }");
   if (doc.style && typeof doc.style === "object") {
-    /** @type {[string, any][]} */
-    const staticStyles = [];
     /** @type {[string, string][]} */
     const dynamicStyles = [];
     for (const [prop, value] of Object.entries(doc.style)) {
@@ -329,13 +337,6 @@ export function emitElementModule(doc, className, elementImports) {
       const cssProp = camelToKebab(prop);
       if (typeof value === "string" && value.includes("${")) {
         dynamicStyles.push([cssProp, value]);
-      } else {
-        staticStyles.push([cssProp, value]);
-      }
-    }
-    if (staticStyles.length > 0) {
-      for (const [cssProp, value] of staticStyles) {
-        lines.push(`    this.style['${cssProp}'] = ${JSON.stringify(value)};`);
       }
     }
     if (dynamicStyles.length > 0) {
@@ -358,12 +359,10 @@ export function emitElementModule(doc, className, elementImports) {
       "    const _slotted = Array.from(this.childNodes).filter(n => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim()));",
     );
   }
-  // Skip clearing innerHTML if content was pre-rendered with correct props
   lines.push("    if (this.hasAttribute('data-jx-prerendered')) {");
   lines.push("      this.removeAttribute('data-jx-prerendered');");
-  lines.push("    } else {");
-  lines.push("      this.innerHTML = '';");
   lines.push("    }");
+  lines.push("    this.innerHTML = '';");
   lines.push("    this.#dispose = effect(() => render(this.template(), this));");
   if (hasSlot) {
     // Replace <slot> placeholder with saved slotted content
@@ -417,6 +416,7 @@ function emitLitChildren(children, parentStyle, indent) {
 function emitLitNode(def, indent) {
   // String children are text nodes
   if (typeof def === "string") {
+    if (def.includes("${")) return `${indent}${toLitTextContent(def)}`;
     return `${indent}${escapeHtml(def)}`;
   }
   if (typeof def === "number" || typeof def === "boolean") {
@@ -646,11 +646,9 @@ function emitStyleString(styleDef) {
 
     if (value === null || typeof value === "object") continue;
 
-    const cssProp = camelToKebab(prop);
     if (typeof value === "string" && value.includes("${")) {
+      const cssProp = camelToKebab(prop);
       parts.push(`${cssProp}: ${toLitExpr(value)}`);
-    } else {
-      parts.push(`${cssProp}: ${value}`);
     }
   }