@jxsuite/compiler 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.6.1",
+  "version": "0.7.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.6.2",
+    "@jxsuite/runtime": "^0.6.2",
     "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);
@@ -451,8 +433,10 @@ export function buildAttrs(def, scope) {
     if (!def.attributes?.decoding) out += ` decoding="async"`;
   }
 
-  if (def.$props && typeof def.$props === "object") {
-    out += ` data-jx-props="${escapeHtml(JSON.stringify(def.$props))}"`;
+  if (def.$static) {
+    out += ` data-jx-static`;
+  } else if (def.$prerendered) {
+    out += ` data-jx-prerendered`;
   }
 
   return out;
@@ -506,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
@@ -555,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++}`;
     }
   }
 
@@ -582,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)) {
@@ -649,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);
     });
   }
 }
@@ -785,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");
@@ -911,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/content-loader.js

@@ -126,12 +126,12 @@ async function getMarkdownModule() {
 async function loadMarkdownEntry(filePath, directiveOptions) {
   const { MarkdownFile } = await getMarkdownModule();
   const file = new MarkdownFile({ src: filePath, directiveOptions });
-  const result = await file.resolve();
+  const result = file.resolve();
   return {
     id: result.slug,
     data: result.frontmatter,
     body: readFileSync(filePath, "utf-8"),
-    rendered: result.$body,
+    $children: result.$children,
     _meta: {
       excerpt: result.$excerpt,
       toc: result.$toc,

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/layout-resolver.js

@@ -54,7 +54,8 @@ export function resolveLayout(pageDoc, projectConfig, projectRoot) {
   }
 
   // Distribute page children into layout slots
-  const pageChildren = pageDoc.children ?? [];
+  const rawChildren = pageDoc.children ?? [];
+  const pageChildren = typeof rawChildren === "string" ? [rawChildren] : rawChildren;
   const merged = deepClone(layoutDoc);
 
   distributeSlots(merged, pageChildren);

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