@jxsuite/compiler 0.6.2 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.3.5",
-    "@jxsuite/parser": "^0.5.5",
-    "@jxsuite/runtime": "^0.5.5",
+    "@jxsuite/parser": "^0.7.0",
+    "@jxsuite/runtime": "^0.7.0",
     "remark-gfm": "^4.0.1",
     "remark-stringify": "^11.0.0",
     "sharp": "^0.34.5",

package/src/shared.js

@@ -393,25 +393,7 @@ export function buildAttrs(def, scope) {
   if (lang) out += ` lang="${escapeHtml(lang)}"`;
   if (dir) out += ` dir="${escapeHtml(dir)}"`;
 
-  if (def.style) {
-    // Collect properties that have @media overrides — these must NOT be inline
-    // because inline styles (specificity 1,0,0,0) always beat stylesheet @media rules.
-    const mediaOverriddenProps = new Set();
-    for (const [k, v] of Object.entries(def.style)) {
-      if (k.startsWith("@") && v && typeof v === "object") {
-        for (const prop of Object.keys(/** @type {Record<string, any>} */ (v))) {
-          if (
-            !prop.startsWith(":") &&
-            !prop.startsWith(".") &&
-            !prop.startsWith("&") &&
-            !prop.startsWith("[")
-          ) {
-            mediaOverriddenProps.add(prop);
-          }
-        }
-      }
-    }
-
+  if (def.style && scope) {
     const inline = Object.entries(def.style)
       .filter(
         ([k, v]) =>
@@ -420,9 +402,10 @@ export function buildAttrs(def, scope) {
           !k.startsWith("&") &&
           !k.startsWith("[") &&
           !k.startsWith("@") &&
-          !mediaOverriddenProps.has(k) &&
           v !== null &&
-          typeof v !== "object",
+          typeof v !== "object" &&
+          typeof v === "string" &&
+          isTemplateString(v),
       )
       .map(([k, v]) => {
         const value = resolveStaticValue(v, scope);
@@ -432,7 +415,6 @@ export function buildAttrs(def, scope) {
       .join("; ");
     if (inline) out += ` style="${inline}"`;
   }
-
   if (def.attributes) {
     for (const [k, v] of Object.entries(def.attributes)) {
       const value = resolveStaticValue(v, scope);
@@ -508,7 +490,16 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
   if (projectStyle && typeof projectStyle === "object") {
     for (const [key, val] of Object.entries(projectStyle)) {
       if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[")) {
-        // Standalone selector (e.g. `.dark`)
+        // Standalone selector (e.g. `.dark`, `:focus-visible`)
+        rules.push(`${key} { ${toCSSText(/** @type {any} */ (val))} }`);
+      } else if (
+        val !== null &&
+        typeof val === "object" &&
+        !Array.isArray(val) &&
+        !key.startsWith("@") &&
+        !key.startsWith("--")
+      ) {
+        // Element selector with object value (e.g. `html`, `*`)
         rules.push(`${key} { ${toCSSText(/** @type {any} */ (val))} }`);
       } else if (key.startsWith("@")) {
         // @media block
@@ -557,23 +548,19 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
  * @param {string} [_parentSel]
  * @param {{ n: number }} [counter]
  */
-export function collectStyles(def, rules, mediaQueries, _parentSel = "", counter = { n: 0 }) {
+export function collectStyles(
+  def,
+  rules,
+  mediaQueries,
+  _parentSel = "",
+  counter = { n: 0 },
+  prefix = "jx",
+) {
   if (!def || typeof def !== "object") return;
 
   if (def.style) {
-    // Check if this element needs CSS rules (media queries, pseudo-classes, etc.)
-    const needsCSS = Object.keys(def.style).some(
-      (k) =>
-        k.startsWith("@") ||
-        k.startsWith(":") ||
-        k.startsWith(".") ||
-        k.startsWith("&") ||
-        k.startsWith("["),
-    );
-
-    // Auto-scope elements that need CSS rules but lack a unique selector
-    if (needsCSS && !def.id && !def.className) {
-      def.className = `jx-${counter.n++}`;
+    if (!def.id && !def.className) {
+      def.className = `${prefix}-${counter.n++}`;
     }
   }
 
@@ -584,36 +571,22 @@ export function collectStyles(def, rules, mediaQueries, _parentSel = "", counter
       : (def.tagName ?? "*");
 
   if (def.style) {
-    // Collect properties that have @media overrides — these are excluded from
-    // inline styles in buildAttrs(), so we emit them as base CSS rules here.
-    const mediaOverriddenProps = new Set();
-    for (const [k, v] of Object.entries(def.style)) {
-      if (k.startsWith("@") && v && typeof v === "object") {
-        for (const p of Object.keys(/** @type {Record<string, any>} */ (v))) {
-          if (
-            !p.startsWith(":") &&
-            !p.startsWith(".") &&
-            !p.startsWith("&") &&
-            !p.startsWith("[")
-          ) {
-            mediaOverriddenProps.add(p);
-          }
-        }
-      }
+    const baseDecls = [];
+    for (const [prop, value] of Object.entries(def.style)) {
+      if (
+        prop.startsWith(":") ||
+        prop.startsWith(".") ||
+        prop.startsWith("&") ||
+        prop.startsWith("[") ||
+        prop.startsWith("@")
+      )
+        continue;
+      if (value === null || typeof value === "object") continue;
+      if (typeof value === "string" && isTemplateString(value)) continue;
+      baseDecls.push(`  ${camelToKebab(prop)}: ${value};`);
     }
-
-    // Emit base CSS rules for media-overridden properties
-    if (mediaOverriddenProps.size > 0) {
-      const baseDecls = [];
-      for (const p of mediaOverriddenProps) {
-        const v = def.style[p];
-        if (v !== null && v !== undefined && typeof v !== "object") {
-          baseDecls.push(`${camelToKebab(p)}: ${v}`);
-        }
-      }
-      if (baseDecls.length > 0) {
-        rules.push(`${selector} { ${baseDecls.join("; ")} }`);
-      }
+    if (baseDecls.length > 0) {
+      rules.push(`${selector} {\n${baseDecls.join("\n")}\n}`);
     }
 
     for (const [prop, val] of Object.entries(def.style)) {
@@ -651,7 +624,7 @@ export function collectStyles(def, rules, mediaQueries, _parentSel = "", counter
 
   if (Array.isArray(def.children)) {
     def.children.forEach((/** @type {any} */ c) => {
-      collectStyles(c, rules, mediaQueries, selector, counter);
+      collectStyles(c, rules, mediaQueries, selector, counter, prefix);
     });
   }
 }
@@ -787,7 +760,13 @@ const SELF_CLOSING = new Set(["input", "br", "hr", "img", "meta", "link", "area"
  * @returns {string}
  */
 export function renderStaticNode(node, scope, slotContent = null) {
-  if (typeof node === "string") return escapeHtml(node);
+  if (typeof node === "string") {
+    if (isTemplateString(node) && scope) {
+      const val = evaluateStaticTemplate(node, scope);
+      return val != null ? escapeHtml(String(val)) : escapeHtml(node);
+    }
+    return escapeHtml(node);
+  }
   if (typeof node === "number" || typeof node === "boolean") return escapeHtml(String(node));
   if (Array.isArray(node))
     return node.map((/** @type {any} */ c) => renderStaticNode(c, scope, slotContent)).join("\n");
@@ -913,30 +892,63 @@ function _isStaticNode(node) {
 }
 
 /**
- * Generate a CSS rule block for a component's root-level styles. Uses the tag name as the selector.
- * Skips pseudo-selectors, media queries, nested rules, and template strings (runtime-only).
+ * Generate CSS rules for a component: host-level styles using tag selector, plus inner element
+ * styles using .jx-N selectors via collectStyles.
  *
  * @param {string} tagName - The custom element tag name (used as CSS selector)
  * @param {any} styleDef - The component's style object
+ * @param {any} [doc] - The full component document (for walking children)
+ * @param {Record<string, any>} [mediaQueries] - Project media query definitions
  * @returns {string} CSS text, or empty string if no styles
  */
-export function buildComponentCSS(tagName, styleDef) {
-  if (!styleDef || typeof styleDef !== "object") return "";
+export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries = {}) {
   /** @type {string[]} */
-  const decls = [];
-  for (const [prop, value] of Object.entries(styleDef)) {
-    if (
-      prop.startsWith(":") ||
-      prop.startsWith(".") ||
-      prop.startsWith("&") ||
-      prop.startsWith("[") ||
-      prop.startsWith("@")
-    )
-      continue;
-    if (value === null || typeof value === "object") continue;
-    if (typeof value === "string" && isTemplateString(value)) continue;
-    decls.push(`  ${camelToKebab(prop)}: ${value};`);
+  const rules = [];
+
+  if (styleDef && typeof styleDef === "object") {
+    /** @type {string[]} */
+    const decls = [];
+    for (const [prop, value] of Object.entries(styleDef)) {
+      if (
+        prop.startsWith(":") ||
+        prop.startsWith(".") ||
+        prop.startsWith("&") ||
+        prop.startsWith("[") ||
+        prop.startsWith("@")
+      )
+        continue;
+      if (value === null || typeof value === "object") continue;
+      if (typeof value === "string" && isTemplateString(value)) continue;
+      decls.push(`  ${camelToKebab(prop)}: ${value};`);
+    }
+    if (decls.length > 0) {
+      rules.push(`${tagName} {\n${decls.join("\n")}\n}`);
+    }
+
+    for (const [prop, val] of Object.entries(styleDef)) {
+      if (prop.startsWith("@")) {
+        const query = prop.startsWith("@--")
+          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
+          : prop.slice(1);
+        rules.push(`@media ${query} { ${tagName} { ${toCSSText(/** @type {any} */ (val))} } }`);
+      } else if (
+        prop.startsWith(":") ||
+        prop.startsWith(".") ||
+        prop.startsWith("&") ||
+        prop.startsWith("[")
+      ) {
+        const resolved = prop.startsWith("&") ? prop.replace("&", tagName) : `${tagName}${prop}`;
+        rules.push(`${resolved} { ${toCSSText(/** @type {any} */ (val))} }`);
+      }
+    }
   }
-  if (decls.length === 0) return "";
-  return `${tagName} {\n${decls.join("\n")}\n}\n`;
+
+  if (doc && Array.isArray(doc.children)) {
+    const counter = { n: 0 };
+    for (const child of doc.children) {
+      collectStyles(child, rules, mediaQueries, "", counter, tagName);
+    }
+  }
+
+  return rules.length > 0 ? rules.join("\n") + "\n" : "";
 }

package/src/site/image-cache.js

@@ -74,18 +74,11 @@ export function saveCache(projectRoot, cache) {
  *
  * @param {CacheManifest} cache
  * @param {string} key
- * @param {string} outDir - Absolute path to build output dir
  * @returns {ImageManifest | null}
  */
-export function getCached(cache, key, outDir) {
+export function getCached(cache, key) {
   const entry = cache.entries[key];
   if (!entry) return null;
-
-  const allExist = entry.manifest.variants.every((v) =>
-    existsSync(resolve(outDir, v.outputPath.slice(1))),
-  );
-  if (!allExist) return null;
-
   return entry.manifest;
 }
 

package/src/site/image-transform.js

@@ -7,7 +7,7 @@
  */
 
 import { existsSync } from "node:fs";
-import { resolve, extname } from "node:path";
+import { resolve, extname, basename } from "node:path";
 import { processImage, buildSrcset, contentHash, configHash } from "./image-optimizer.js";
 import { getCached, setCached } from "./image-cache.js";
 
@@ -22,6 +22,29 @@ import { getCached, setCached } from "./image-cache.js";
 const SKIP_EXTENSIONS = new Set([".svg", ".gif"]);
 const EXTERNAL_PREFIXES = ["http://", "https://", "data:", "//"];
 
+/**
+ * @param {string} absoluteSrc
+ * @param {string} src
+ * @param {ImageConfig} config
+ * @param {string} outDir
+ * @param {CacheManifest} cache
+ * @returns {Promise<ImageManifest>}
+ */
+async function resolveManifest(absoluteSrc, src, config, outDir, cache) {
+  const key = `${contentHash(absoluteSrc)}:${configHash(config)}`;
+  const cached = getCached(cache, key);
+
+  if (cached) {
+    const allExist = cached.variants.every((v) => existsSync(v.absolutePath));
+    if (allExist) return cached;
+  }
+
+  if (!cached) console.log(`    Optimizing ${basename(absoluteSrc)}...`);
+  const manifest = await processImage(absoluteSrc, outDir, config);
+  setCached(cache, key, src, manifest);
+  return manifest;
+}
+
 /**
  * Check if a src value should be skipped for optimization.
  *
@@ -91,6 +114,17 @@ async function walkAndTransform(node, config, projectRoot, outDir, cache, imageR
     await transformImgNode(node, config, projectRoot, outDir, cache, imageRefs);
   }
 
+  if (typeof node.innerHTML === "string" && node.innerHTML.includes("<img")) {
+    node.innerHTML = await transformInnerHtmlImages(
+      node.innerHTML,
+      config,
+      projectRoot,
+      outDir,
+      cache,
+      imageRefs,
+    );
+  }
+
   if (Array.isArray(node.children)) {
     for (const child of node.children) {
       await walkAndTransform(child, config, projectRoot, outDir, cache, imageRefs);
@@ -119,11 +153,7 @@ async function transformImgNode(node, config, projectRoot, outDir, cache, imageR
   let manifest = imageRefs.get(absoluteSrc);
 
   if (!manifest) {
-    const key = `${contentHash(absoluteSrc)}:${configHash(config)}`;
-    const cached = getCached(cache, key, outDir);
-    manifest = cached ?? (await processImage(absoluteSrc, outDir, config));
-
-    setCached(cache, key, src, manifest);
+    manifest = await resolveManifest(absoluteSrc, src, config, outDir, cache);
     imageRefs.set(absoluteSrc, manifest);
   }
 
@@ -147,3 +177,71 @@ async function transformImgNode(node, config, projectRoot, outDir, cache, imageR
     node.attributes.decoding = "async";
   }
 }
+
+const IMG_TAG_RE = /<img\b([^>]*)>/gi;
+const SRC_ATTR_RE = /\bsrc="([^"]*)"/;
+const SRCSET_ATTR_RE = /\bsrcset="/;
+const DATA_NO_OPT_RE = /\bdata-no-optimize\b/;
+
+/**
+ * Transform `<img>` tags embedded in pre-rendered innerHTML strings.
+ *
+ * @param {string} html
+ * @param {ImageConfig} config
+ * @param {string} projectRoot
+ * @param {string} outDir
+ * @param {CacheManifest} cache
+ * @param {Map<string, ImageManifest>} imageRefs
+ * @returns {Promise<string>}
+ */
+async function transformInnerHtmlImages(html, config, projectRoot, outDir, cache, imageRefs) {
+  /** @type {{ match: string; replacement: string }[]} */
+  const replacements = [];
+
+  for (const m of html.matchAll(IMG_TAG_RE)) {
+    const tag = m[0];
+    const attrs = m[1];
+
+    if (SRCSET_ATTR_RE.test(attrs)) continue;
+    if (DATA_NO_OPT_RE.test(attrs)) continue;
+
+    const srcMatch = attrs.match(SRC_ATTR_RE);
+    if (!srcMatch) continue;
+
+    const src = srcMatch[1];
+    if (shouldSkip(src)) continue;
+
+    const absoluteSrc = resolveImagePath(src, projectRoot);
+    if (!existsSync(absoluteSrc)) continue;
+
+    let manifest = imageRefs.get(absoluteSrc);
+    if (!manifest) {
+      manifest = await resolveManifest(absoluteSrc, src, config, outDir, cache);
+      imageRefs.set(absoluteSrc, manifest);
+    }
+
+    const preferredFormat = config.formats.includes("avif") ? "avif" : config.formats[0];
+    const srcset = buildSrcset(manifest.variants, preferredFormat);
+    if (!srcset) continue;
+
+    let extra = ` srcset="${srcset}" sizes="${config.sizes}"`;
+    if (!/\bwidth=/.test(attrs) && manifest.original.width) {
+      extra += ` width="${manifest.original.width}"`;
+    }
+    if (!/\bheight=/.test(attrs) && manifest.original.height) {
+      extra += ` height="${manifest.original.height}"`;
+    }
+    if (config.lazyLoad && !/\bloading="eager"/.test(attrs)) {
+      if (!/\bloading=/.test(attrs)) extra += ` loading="lazy"`;
+      if (!/\bdecoding=/.test(attrs)) extra += ` decoding="async"`;
+    }
+
+    replacements.push({ match: tag, replacement: `<img${attrs}${extra}>` });
+  }
+
+  let result = html;
+  for (const { match, replacement } of replacements) {
+    result = result.replace(match, replacement);
+  }
+  return result;
+}

package/src/site/prototype-resolver.js

@@ -32,6 +32,16 @@ const SKIP_PROTOTYPES = new Set([
   "ContentEntry",
 ]);
 
+/**
+ * Built-in $prototype → .class.json mappings. These resolve automatically without requiring an
+ * explicit `imports` entry in project.json. Project-level imports take precedence on collision.
+ */
+/** @type {Record<string, string>} */
+const BUILTIN_CLASS_MAPPINGS = {
+  MarkdownFile: "@jxsuite/parser/MarkdownFile.class.json",
+  MarkdownCollection: "@jxsuite/parser/MarkdownCollection.class.json",
+};
+
 /**
  * Keys reserved by the Jx prototype system — stripped before passing config to the external class
  * constructor. Mirrors runtime's EXTERNAL_RESERVED.
@@ -73,8 +83,8 @@ export async function resolvePrototypes(doc, route, projectRoot) {
 
     // Look up in imports if no $src already set
     if (!def.$src) {
-      const mapped = imports[def.$prototype];
-      if (!mapped) continue; // not in imports — leave for runtime
+      const mapped = imports[def.$prototype] ?? BUILTIN_CLASS_MAPPINGS[def.$prototype];
+      if (!mapped) continue;
       def.$src = mapped;
     }
 

package/src/site/site-build.js

@@ -11,8 +11,10 @@
 import {
   readFileSync,
   writeFileSync,
+  copyFileSync,
   mkdirSync,
   existsSync,
+  renameSync,
   rmSync,
   cpSync,
   readdirSync,
@@ -34,6 +36,7 @@ import {
   buildComponentCSS,
   collectServerEntries,
   renderStaticNode,
+  resolveStaticValue,
   DEFAULT_REACTIVITY_SRC,
   DEFAULT_LIT_HTML_SRC,
 } from "../shared.js";
@@ -69,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 });
 
@@ -137,7 +152,7 @@ export async function buildSite(projectRoot, options = {}) {
           : JSON.parse(readFileSync(componentPath, "utf8"));
         if (doc.tagName) {
           componentDefs.set(doc.tagName, doc);
-          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");
@@ -266,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);
+        }
+      }
     }
   }
 
@@ -611,6 +636,28 @@ function expandComponents(node, componentDefs) {
 
     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;

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}`);
     }
   }