@jxsuite/compiler 0.28.0 → 0.28.3

package/src/site/site-build.ts

@@ -9,15 +9,16 @@
  */
 
 import {
-  writeFileSync,
   copyFileSync,
-  mkdirSync,
-  existsSync,
-  rmSync,
   cpSync,
+  existsSync,
+  mkdirSync,
   readdirSync,
+  rmSync,
+  writeFileSync,
 } from "node:fs";
-import { resolve, dirname, join } from "node:path";
+import { dirname, join, resolve } from "node:path";
+import { isMappedArray, isRef } from "@jxsuite/schema/guards";
 import { loadProjectConfig } from "./site-loader.ts";
 import { discoverPages, expandDynamicRoutes, readPageDocument } from "./pages-discovery.ts";
 import { buildProjectFormatRegistry } from "./format-host.ts";
@@ -25,39 +26,42 @@ import type { FormatRegistry } from "@jxsuite/schema/format-registry";
 import { resolveLayout } from "./layout-resolver.ts";
 import { mergeHead, renderHead } from "./head-merger.ts";
 import { injectContext } from "./context-injection.ts";
-import { compile, compileServer, compileSiteServer, compilePagesFunctions } from "../compiler.ts";
+import { compile, compileServer, compileSiteServer } from "../compiler.ts";
 import { compileElement } from "../targets/compile-element.ts";
 import {
+  DEFAULT_LIT_HTML_SRC,
+  DEFAULT_REACTIVITY_SRC,
+  buildComponentCSS,
   buildInitialScope,
-  isTemplateString,
+  collectServerEntries,
+  collectStyles,
   evaluateStaticTemplate,
-  preRenderComponentHtml,
   isComponentFullyStatic,
-  buildComponentCSS,
-  collectServerEntries,
+  isTemplateString,
+  preRenderComponentHtml,
   renderStaticNode,
-  resolveStaticValue,
   resolveRefValue,
-  DEFAULT_REACTIVITY_SRC,
-  DEFAULT_LIT_HTML_SRC,
+  resolveStaticValue,
 } from "../shared.ts";
-import { loadContentTypes, loadContentConfig, resolveContentTypeRefs } from "./content-loader.ts";
+import { loadContentConfig, loadContentTypes, resolveContentTypeRefs } from "./content-loader.ts";
 import { resolvePrototypes } from "./prototype-resolver.ts";
 import { transformImageNodes } from "./image-transform.ts";
-import { loadCache, saveCache, getImageCacheDir } from "./image-cache.ts";
-import { compilePagesImageFunction } from "../targets/compile-image-endpoint.ts";
+import { getImageCacheDir, loadCache, saveCache } from "./image-cache.ts";
 import type { ImageConfig } from "./image-optimizer.ts";
 import type { ImageMetaCache } from "./image-transform.ts";
 import type {
+  JsonValue,
+  JxAttributeValue,
   JxElement,
-  JxMutableNode,
-  JxStyle,
   JxHeadEntry,
+  JxMutableNode,
   JxStateDefinition,
+  JxStyle,
   ProjectConfig,
 } from "@jxsuite/schema/types";
 import type { ContentLoaderEntry } from "@jxsuite/parser/types";
 import type { SiteRoute } from "../types.ts";
+import type { CacheManifest } from "./image-cache.js";
 
 /**
  * Build an entire Jx site from a project directory.
@@ -100,7 +104,7 @@ export async function buildSite(
 
   // ── 2. Clean output directory ───────────────────────────────────────────
   if (clean && existsSync(outDir)) {
-    rmSync(outDir, { recursive: true, force: true });
+    rmSync(outDir, { force: true, recursive: true });
   }
   mkdirSync(outDir, { recursive: true });
 
@@ -134,8 +138,8 @@ export async function buildSite(
   // ── 5. Compile site components ──────────────────────────────────────────
   const componentsDir = resolve(projectRoot, "components");
   const compiledComponentTags: string[] = [];
-  const componentCSS: Map<string, string> = new Map(); // tagName → CSS text
-  const componentDefs: Map<string, JxElement> = new Map(); // tagName → parsed component definition
+  const componentCSS = new Map<string, string>(); // TagName → CSS text
+  const componentDefs = new Map<string, JxElement>(); // TagName → parsed component definition
   if (existsSync(componentsDir)) {
     log("Compiling components...");
     const componentExtensions = [".json", ...formatRegistry.documentExtensions("component")];
@@ -149,14 +153,16 @@ export async function buildSite(
       try {
         const componentPath = resolve(componentsDir, file);
         const result = await compileElement(componentPath, {
-          $media: projectConfig.$media,
+          ...(projectConfig.$media ? { $media: projectConfig.$media } : {}),
           formats: formatRegistry,
         });
         for (const f of result.files) {
           const outName = f.path.includes("/") ? (f.path.split("/").pop() as string) : f.path;
           writeFileSync(resolve(componentOutDir, outName), f.content, "utf8");
-          if (f.tagName) compiledComponentTags.push(f.tagName);
-          fileCount++;
+          if (f.tagName) {
+            compiledComponentTags.push(f.tagName);
+          }
+          fileCount += 1;
         }
 
         // Pre-render component HTML scaffold and CSS sidecar
@@ -167,11 +173,11 @@ export async function buildSite(
           if (css) {
             componentCSS.set(doc.tagName, css);
             writeFileSync(resolve(componentOutDir, `${doc.tagName}.css`), css, "utf8");
-            fileCount++;
+            fileCount += 1;
           }
         }
-      } catch (e) {
-        const err = e as Error;
+      } catch (error) {
+        const err = error as Error;
         errors.push(`Error compiling component ${file}: ${err.message}`);
         console.error(`Error compiling component ${file}: ${err.message}`);
       }
@@ -188,7 +194,7 @@ export async function buildSite(
     for (const [, doc] of componentDefs) {
       const entries = collectServerEntries(doc);
       for (const entry of entries) {
-        const resolvedSrc = "./components/" + entry.src.replace(/^\.\//, "");
+        const resolvedSrc = `./components/${entry.src.replace(/^\.\//, "")}`;
         siteServerEntries.push({
           exportName: entry.exportName,
           src: resolvedSrc,
@@ -205,11 +211,9 @@ export async function buildSite(
   const imageMetaCache = cfImages ? new Map() : null;
   if (cfImages) {
     console.log(
-      `images.service is "cloudflare" — ensure your wrangler config declares the Images binding ` +
-        `("images": { "binding": "${projectConfig.images.binding ?? "IMAGES"}" })` +
-        (projectConfig.build.adapter === "cloudflare-workers"
-          ? ` and an assets binding ("assets": { "binding": "ASSETS" }).`
-          : `.`),
+      `images.service is "cloudflare" — srcsets use /cdn-cgi/image transform URLs. ` +
+        `Ensure Image Transformations are enabled for your zone (Cloudflare dashboard → ` +
+        `Images → Transformations); these URLs do not work on *.pages.dev / *.workers.dev previews.`,
     );
   }
 
@@ -228,9 +232,11 @@ export async function buildSite(
       );
 
       // Determine which component tags are fully static (for script omission)
-      const staticTags: Set<string> = new Set();
+      const staticTags = new Set<string>();
       for (const [tag, def] of componentDefs) {
-        if (isComponentFullyStatic(def)) staticTags.add(tag);
+        if (isComponentFullyStatic(def)) {
+          staticTags.add(tag);
+        }
       }
 
       // Inject component CSS and JS scripts
@@ -247,29 +253,33 @@ export async function buildSite(
       const outPath = routeToOutputPath(route.urlPattern, outDir, trailingSlash);
       mkdirSync(dirname(outPath), { recursive: true });
       writeFileSync(outPath, result.html, "utf8");
-      fileCount++;
+      fileCount += 1;
 
       // Write serialized export sidecars alongside HTML (formats with exportTarget: true)
       for (const fmt of formatRegistry.withCapability("serialize")) {
-        if (!fmt.exportTarget) continue;
+        if (!fmt.exportTarget) {
+          continue;
+        }
         try {
           const content = (await fmt.call("serialize", result.doc, {
-            mode: "export",
+            buildScope: (state: Record<string, JxStateDefinition>) =>
+              buildInitialScope(state, null),
             componentDefs,
             evaluateTemplate: (value: string, scope: Record<string, unknown>) => {
-              if (!isTemplateString(value)) return undefined;
+              if (!isTemplateString(value)) {
+                return;
+              }
               return evaluateStaticTemplate(value, scope) ?? value;
             },
-            buildScope: (state: Record<string, JxStateDefinition>) =>
-              buildInitialScope(state, null),
+            mode: "export",
           })) as string;
           if (content) {
             const sidecarPath = outPath.replace(/\.html$/, fmt.extensions[0]);
             writeFileSync(sidecarPath, content, "utf8");
-            fileCount++;
+            fileCount += 1;
           }
-        } catch (e) {
-          const err = e as Error;
+        } catch (error) {
+          const err = error as Error;
           errors.push(`Error exporting ${fmt.name} for ${route.urlPattern}: ${err.message}`);
         }
       }
@@ -279,17 +289,17 @@ export async function buildSite(
         const filePath = resolve(dirname(outPath), file.path);
         mkdirSync(dirname(filePath), { recursive: true });
         writeFileSync(filePath, file.content, "utf8");
-        fileCount++;
+        fileCount += 1;
       }
 
       // Write server handler if present
       if (result.serverHandler) {
         const serverPath = resolve(dirname(outPath), "_server.js");
         writeFileSync(serverPath, result.serverHandler, "utf8");
-        fileCount++;
+        fileCount += 1;
       }
-    } catch (e) {
-      const err = e as Error;
+    } catch (error) {
+      const err = error as Error;
       const msg = `Error compiling ${route.urlPattern}: ${err.message}`;
       errors.push(msg);
       console.error(msg);
@@ -313,32 +323,39 @@ export async function buildSite(
 
   // ── 6c. Generate site-wide server worker ────────────────────────────────
   if (projectConfig.build.adapter) {
-    const adapter = projectConfig.build.adapter;
+    const { adapter } = projectConfig.build;
     log("Generating site-wide server worker...");
 
     const deduped = new Map();
     for (const entry of siteServerEntries) {
-      if (!deduped.has(entry.exportName)) deduped.set(entry.exportName, entry);
+      if (!deduped.has(entry.exportName)) {
+        deduped.set(entry.exportName, entry);
+      }
     }
 
-    if (adapter === "cloudflare-pages") {
-      const functions = compilePagesFunctions([...deduped.values()]);
-
-      if (cfImages) {
-        functions.set(
-          "functions/_jx/image.js",
-          compilePagesImageFunction(projectConfig.images as ImageConfig),
+    // Cloudflare Pages uses advanced mode (_worker.js inside the build output) — the
+    // Functions/ directory convention only works from the project root, not from dist/.
+    // A static-only Pages site needs no worker at all.
+    const skipWorker = adapter === "cloudflare-pages" && deduped.size === 0;
+    const workerSource = skipWorker ? null : compileSiteServer([...deduped.values()], { adapter });
+
+    if (workerSource) {
+      const workerName = adapter === "cloudflare-pages" ? "_worker.js" : "worker.js";
+      writeFileSync(resolve(outDir, workerName), workerSource, "utf8");
+      fileCount += 1;
+      log(`  Generated dist/${workerName} (${deduped.size} server function(s))`);
+
+      if (adapter === "cloudflare-pages") {
+        // Only invoke the worker for server routes; everything else stays static.
+        writeFileSync(
+          resolve(outDir, "_routes.json"),
+          `${JSON.stringify({ exclude: [], include: ["/_jx/*"], version: 1 }, null, 2)}\n`,
+          "utf8",
         );
+        fileCount += 1;
       }
 
-      for (const [filePath, source] of functions) {
-        const fullPath = resolve(outDir, filePath);
-        mkdirSync(resolve(fullPath, ".."), { recursive: true });
-        writeFileSync(fullPath, source, "utf8");
-        fileCount++;
-      }
-
-      // Copy server source files so function imports resolve
+      // Copy server source files into dist/components/ so worker imports resolve
       const distComponentsDir = resolve(outDir, "components");
       mkdirSync(distComponentsDir, { recursive: true });
       for (const { src } of deduped.values()) {
@@ -348,35 +365,6 @@ export async function buildSite(
           copyFileSync(srcFile, destFile);
         }
       }
-
-      if (functions.size > 0) {
-        log(`  Generated ${functions.size} Pages function(s) in dist/functions/`);
-      }
-    } else {
-      const workerSource = compileSiteServer([...deduped.values()], {
-        adapter,
-        images:
-          cfImages && adapter === "cloudflare-workers"
-            ? (projectConfig.images as ImageConfig)
-            : null,
-      });
-
-      if (workerSource) {
-        const workerPath = resolve(outDir, "worker.js");
-        writeFileSync(workerPath, workerSource, "utf8");
-        fileCount++;
-        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);
-          }
-        }
-      }
     }
   }
 
@@ -410,7 +398,7 @@ export async function buildSite(
     log(`  ${errors.length} error(s)`);
   }
 
-  return { routes: routes.length, files: fileCount, errors };
+  return { errors, files: fileCount, routes: routes.length };
 }
 
 /**
@@ -436,9 +424,9 @@ async function compilePage(
   route: SiteRoute,
   projectConfig: ProjectConfig,
   projectRoot: string,
-  contentTypes: Map<string, ContentLoaderEntry[]> = new Map(),
-  imageCache: import("./image-cache.js").CacheManifest | null = null,
-  componentDefs: Map<string, JxElement> = new Map(),
+  contentTypes = new Map<string, ContentLoaderEntry[]>(),
+  imageCache: CacheManifest | null = null,
+  componentDefs = new Map<string, JxElement>(),
   imageMetaCache: ImageMetaCache | null = null,
   formatRegistry?: FormatRegistry,
 ) {
@@ -449,9 +437,9 @@ async function compilePage(
   const layoutDoc = resolveLayout(pageDoc, projectConfig, projectRoot);
 
   // Extract head arrays before they get lost in the merge
-  const pageHead = pageDoc.$head ?? layoutDoc._pageHead ?? ([] as JxHeadEntry[]);
-  const layoutHead = layoutDoc.$head ?? [];
-  const pageTitle = pageDoc.title ?? layoutDoc._pageTitle ?? (null as string | null);
+  const pageHead = (pageDoc.$head ?? layoutDoc._pageHead ?? []) as JxHeadEntry[];
+  const layoutHead = (layoutDoc.$head ?? []) as JxHeadEntry[];
+  const pageTitle = (pageDoc.title ?? layoutDoc._pageTitle ?? null) as string | null;
 
   // Clean up internal properties
   delete layoutDoc._pageHead;
@@ -480,19 +468,28 @@ async function compilePage(
   const resolvedLayoutHead = resolveHeadTemplates(layoutHead, scope);
 
   // Resolve template strings in the document tree (innerHTML, textContent, style, attributes)
-  // so that timing: "compiler" data is baked into the static HTML
+  // 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);
+  // Expand registered custom elements (apply $props, pre-render, mark static/prerendered).
+  // Slot children are serialized to HTML strings during expansion — before compileStyles can walk
+  // Them — so their static styles are collected here and injected as a page style block below.
+  const slotCss: SlotCssCollector = {
+    counter: { n: 0 },
+    media: { ...projectConfig.$media, ...layoutDoc.$media },
+    rules: [],
+  };
+  expandComponents(layoutDoc, componentDefs, slotCss);
 
   // 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.
+  // And keeping them would cause isDynamic() to misclassify the page as dynamic.
   // Also strip resolved content arrays (from ContentCollection) that have been
-  // baked into unrolled map templates.
+  // Baked into unrolled map templates.
   if (layoutDoc.state) {
     for (const [key, def] of Object.entries(layoutDoc.state)) {
-      if (key === "$site" || key === "$page") continue;
+      if (key === "$site" || key === "$page") {
+        continue;
+      }
       if (
         def &&
         typeof def === "object" &&
@@ -512,7 +509,7 @@ async function compilePage(
   // Merge $head from site + layout + page
   const mergedHead = mergeHead(resolvedSiteHead, resolvedLayoutHead, resolvedPageHead, {
     title,
-    charset: projectConfig.defaults?.charset ?? "utf-8",
+    charset: projectConfig.defaults?.charset ?? "utf8",
     ...(projectConfig.name != null && { siteName: projectConfig.name }),
     ...(projectConfig.url != null && { siteUrl: projectConfig.url }),
     pageUrl: route.urlPattern,
@@ -536,11 +533,19 @@ async function compilePage(
 
   // Compile the document using the existing compiler
   const result = await compile(layoutDoc, {
-    title,
     lang: projectConfig.defaults?.lang ?? "en",
     projectStyle: projectConfig.style ?? null,
+    title,
   });
 
+  // Inject CSS rules collected from component slot content
+  if (slotCss.rules.length > 0) {
+    result.html = result.html.replace(
+      "</head>",
+      `<style>\n${slotCss.rules.join("\n")}\n</style>\n</head>`,
+    );
+  }
+
   // Post-process: inject merged <head> content into the compiled HTML
   result.html = injectHead(result.html, mergedHead, projectConfig.defaults?.lang ?? "en");
 
@@ -549,7 +554,7 @@ async function compilePage(
     (e: JxElement | string) => typeof e === "string" && !e.startsWith("./") && !e.startsWith("../"),
   );
   if (npmElements.length > 0) {
-    result.html = injectNpmElementScripts(result.html, /** @type {string[]} */ npmElements);
+    result.html = injectNpmElementScripts(result.html, npmElements as string[]);
   }
 
   // Compile server handler if applicable (skip when provider bundles site-wide)
@@ -566,10 +571,10 @@ async function compilePage(
   }
 
   return {
-    html: result.html,
+    doc: layoutDoc,
     files: result.files,
+    html: result.html,
     serverHandler,
-    doc: layoutDoc,
   };
 }
 
@@ -582,7 +587,9 @@ async function compilePage(
  */
 function resolveHeadTemplates(headEntries: JxHeadEntry[], scope: Record<string, unknown>) {
   return headEntries.map((entry: JxHeadEntry) => {
-    if (!entry || typeof entry !== "object") return entry;
+    if (!entry || typeof entry !== "object") {
+      return entry;
+    }
     const resolved = { ...entry };
     if (resolved.attributes) {
       resolved.attributes = { ...resolved.attributes };
@@ -611,7 +618,9 @@ function resolveHeadTemplates(headEntries: JxHeadEntry[], scope: Record<string,
  */
 function resolveHeadBareSpecifiers(headEntries: JxHeadEntry[]) {
   return headEntries.map((entry: JxHeadEntry) => {
-    if (!entry || typeof entry !== "object" || !entry.attributes) return entry;
+    if (!entry || typeof entry !== "object" || !entry.attributes) {
+      return entry;
+    }
     const resolved = { ...entry, attributes: { ...entry.attributes } };
     for (const key of ["href", "src"]) {
       const val = resolved.attributes[key];
@@ -642,41 +651,46 @@ function isBareSpecifier(s: string) {
 /**
  * Deep-clone a map template, resolving template strings and $ref values against the given scope.
  *
- * @param {JxMutableNode} template
+ * @param {JxElement} template
  * @param {Record<string, unknown>} scope
- * @returns {JxMutableNode}
+ * @returns {JxElement}
  */
-function expandMapTemplate(template: JxMutableNode, scope: Record<string, unknown>) {
-  if (!template || typeof template !== "object") return template;
-  const node = {} as JxMutableNode;
+function expandMapTemplate(template: JxElement, scope: Record<string, unknown>): JxElement {
+  if (!template || typeof template !== "object") {
+    return template;
+  }
+  const node = {} as JxElement;
   for (const [k, v] of Object.entries(template)) {
     if (k === "children" && Array.isArray(v)) {
       node.children = v.map((child) => {
-        if (typeof child === "string") return child;
+        if (typeof child === "string") {
+          return child;
+        }
         return expandMapTemplate(/** @type {JxMutableNode} */ child, scope);
       });
     } else if (k === "style" && v && typeof v === "object") {
-      const style = { ...v } as Record<string, unknown>;
+      const style: JxStyle = { ...(v as JxStyle) };
       for (const [sk, sv] of Object.entries(style)) {
-        if (typeof sv === "string" && isTemplateString(sv)) {
-          style[sk] = evaluateMapTemplate(sv, scope) ?? sv;
+        if (isTemplateString(sv)) {
+          // Template evaluation yields a substituted scalar for style values.
+          style[sk] = (evaluateMapTemplate(sv, scope) as string | number | undefined) ?? sv;
         }
       }
       node.style = style;
     } else if (k === "attributes" && v && typeof v === "object") {
-      const attrs = { ...v } as Record<string, unknown>;
+      const attrs = { ...(v as Record<string, JxAttributeValue>) };
       for (const [ak, av] of Object.entries(attrs)) {
-        if (typeof av === "string" && isTemplateString(av)) {
-          attrs[ak] = evaluateMapTemplate(av, scope) ?? av;
+        if (isTemplateString(av)) {
+          attrs[ak] = (evaluateMapTemplate(av, scope) as JxAttributeValue | undefined) ?? av;
         }
       }
       node.attributes = attrs;
     } else if (k === "$props" && v && typeof v === "object") {
-      const props = { ...v } as Record<string, unknown>;
+      const props = { ...(v as Record<string, JsonValue>) };
       for (const [pk, pv] of Object.entries(props)) {
-        if (typeof pv === "string" && isTemplateString(pv)) {
-          const resolved = evaluateMapTemplate(pv, scope);
-          // null = evaluation error → keep template string; undefined = missing data → use null
+        if (isTemplateString(pv)) {
+          const resolved = evaluateMapTemplate(pv, scope) as JsonValue | undefined;
+          // Null = evaluation error → keep template string; undefined = missing data → use null
           props[pk] = resolved !== null ? (resolved ?? null) : pv;
         }
       }
@@ -722,14 +736,16 @@ function evaluateMapTemplate(str: string, scope: Record<string, unknown>) {
  * @param {Record<string, unknown>} scope
  */
 function resolveDocTemplates(node: JxElement | string, scope: Record<string, unknown>) {
-  if (!node || typeof node !== "object") return;
+  if (!node || typeof node !== "object") {
+    return;
+  }
 
   if (typeof node.innerHTML === "string" && isTemplateString(node.innerHTML)) {
     const resolved = evaluateStaticTemplate(node.innerHTML, scope);
     if (resolved != null) {
       // Encode any remaining `${` as HTML entities so the compile phase won't
-      // re-interpret them as template expressions. After resolution, any `${` in the
-      // result is literal content (e.g., code examples), not an intentional template.
+      // Re-interpret them as template expressions. After resolution, any `${` in the
+      // Result is literal content (e.g., code examples), not an intentional template.
       node.innerHTML = String(resolved).replaceAll("${", "&#36;{");
     }
   }
@@ -758,32 +774,26 @@ function resolveDocTemplates(node: JxElement | string, scope: Record<string, unk
       }
     }
   }
-  const rawChildren = node.children as unknown;
-  if (
-    rawChildren &&
-    typeof rawChildren === "object" &&
-    !Array.isArray(rawChildren) &&
-    (rawChildren as JxMutableNode).$prototype === "Array"
-  ) {
-    const arrayDef = rawChildren as JxMutableNode;
-    const itemsSrc = arrayDef.items;
+  const rawChildren = node.children;
+  if (isMappedArray(rawChildren)) {
+    const itemsSrc = rawChildren.items;
     let items = null;
-    if (itemsSrc && typeof itemsSrc === "object" && (itemsSrc as JxMutableNode).$ref) {
-      const ref = (itemsSrc as JxMutableNode).$ref as string;
-      items = resolveRefValue(ref, scope);
+    if (isRef(itemsSrc)) {
+      items = resolveRefValue(itemsSrc.$ref, scope);
     } else if (Array.isArray(itemsSrc)) {
       items = itemsSrc;
     }
-    if (Array.isArray(items) && arrayDef.map) {
+    const mapTemplate = rawChildren.map;
+    if (Array.isArray(items) && mapTemplate) {
       node.children = items.map((item, index) => {
         const childScope = Object.create(scope);
-        childScope.$map = { item, index };
+        childScope.$map = { index, item };
         childScope["$map/item"] = item;
         childScope["$map/index"] = index;
-        const expanded = expandMapTemplate(arrayDef.map, childScope);
-        resolveDocTemplates(expanded as JxElement, childScope);
+        const expanded = expandMapTemplate(mapTemplate, childScope);
+        resolveDocTemplates(expanded, childScope);
         return expanded;
-      }) as (string | JxElement)[];
+      });
       return;
     }
   }
@@ -813,29 +823,46 @@ function resolveDocTemplates(node: JxElement | string, scope: Record<string, unk
         }
       }
       resolveDocTemplates(child, scope);
-      i++;
+      i += 1;
     }
   }
 }
 
+/** Collector for CSS rules extracted from component slot content during expansion. */
+interface SlotCssCollector {
+  rules: string[];
+  counter: { n: number };
+  media: Record<string, string>;
+}
+
 /**
  * Walk the document tree and expand registered custom elements in-place. Applies $props via
- * preRenderComponentHtml, marks static/prerendered.
+ * preRenderComponentHtml, marks static/prerendered. Slot children get their static styles collected
+ * into `slotCss` (assigning jxs-N classes) before being serialized to HTML.
  *
  * @param {JxElement | string} node
  * @param {Map<string, JxElement>} componentDefs
+ * @param {SlotCssCollector} [slotCss]
  */
-function expandComponents(node: JxElement | string, componentDefs: Map<string, JxElement>) {
-  if (!node || typeof node !== "object") return;
+function expandComponents(
+  node: JxElement | string,
+  componentDefs: Map<string, JxElement>,
+  slotCss?: SlotCssCollector,
+) {
+  if (!node || typeof node !== "object") {
+    return;
+  }
   if (Array.isArray(node)) {
-    node.forEach((n) => expandComponents(n, componentDefs));
+    for (const n of node) {
+      expandComponents(n, componentDefs, slotCss);
+    }
     return;
   }
 
   // Recurse into children first (bottom-up expansion)
   if (Array.isArray(node.children)) {
     for (const child of node.children) {
-      expandComponents(child, componentDefs);
+      expandComponents(child, componentDefs, slotCss);
     }
   }
 
@@ -843,7 +870,14 @@ function expandComponents(node: JxElement | string, componentDefs: Map<string, J
   if (def) {
     const slotContent =
       Array.isArray(node.children) && node.children.length > 0
-        ? node.children.map((c: JxElement | string) => renderStaticNode(c, {}, null)).join("\n")
+        ? node.children
+            .map((c: JxElement | string) => {
+              if (slotCss && c && typeof c === "object") {
+                collectStyles(c, slotCss.rules, slotCss.media, "", slotCss.counter, "jxs");
+              }
+              return renderStaticNode(c, {}, null);
+            })
+            .join("\n")
         : null;
 
     const innerHTML = preRenderComponentHtml(def, node.$props || null, slotContent);
@@ -854,17 +888,19 @@ function expandComponents(node: JxElement | string, componentDefs: Map<string, J
 
     // Resolve template-string host styles with props (per-instance values like background-image)
     if (def.style && node.$props) {
-      let stateDefs: Record<string, JxStateDefinition> = { ...def.state };
+      const stateDefs: Record<string, JxStateDefinition> = { ...def.state };
       for (const [key, value] of Object.entries(node.$props)) {
-        if (key in stateDefs) stateDefs[key] = value as JxStateDefinition;
-        else stateDefs[key] = value as JxStateDefinition;
+        stateDefs[key] =
+          key in stateDefs ? (value as JxStateDefinition) : (value as JxStateDefinition);
       }
       const scope = buildInitialScope(stateDefs, null);
       const resolvedStyle: Record<string, unknown> = {};
       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 (resolved != null) {
+            resolvedStyle[prop] = resolved;
+          }
         }
       }
       if (Object.keys(resolvedStyle).length > 0) {
@@ -874,8 +910,11 @@ function expandComponents(node: JxElement | string, componentDefs: Map<string, J
 
     delete node.$props;
 
-    if (isStatic) node.$static = true;
-    else node.$prerendered = true;
+    if (isStatic) {
+      node.$static = true;
+    } else {
+      node.$prerendered = true;
+    }
   }
 }
 
@@ -892,27 +931,32 @@ function expandComponents(node: JxElement | string, componentDefs: Map<string, J
 function injectComponentScripts(
   html: string,
   allComponentTags: string[],
-  cssMap: Map<string, string> = new Map(),
-  staticTags: Set<string> = new Set(),
+  cssMap = new Map<string, string>(),
+  staticTags = new Set<string>(),
 ) {
   // Find which components are actually referenced in this page
   const usedTags = allComponentTags.filter(
-    (tag: string) => html.includes(`<${tag}`), // matches <tag> and <tag ...>
+    (tag: string) => html.includes(`<${tag}`), // Matches <tag> and <tag ...>
   );
-  if (usedTags.length === 0) return html;
+  if (usedTags.length === 0) {
+    return html;
+  }
 
   // Inject CSS links in <head> for ALL components that have CSS sidecars
   const cssLinks = usedTags
     .filter((tag: string) => cssMap.has(tag))
     .map((tag: string) => `<link rel="stylesheet" href="/components/${tag}.css">`)
     .join("\n  ");
+  let result = html;
   if (cssLinks) {
-    html = html.replace("</head>", `  ${cssLinks}\n</head>`);
+    result = result.replace("</head>", `  ${cssLinks}\n</head>`);
   }
 
   // Only inject JS for components that have non-static instances
   const jsTags = usedTags.filter((tag: string) => !staticTags.has(tag));
-  if (jsTags.length === 0) return html;
+  if (jsTags.length === 0) {
+    return result;
+  }
 
   // Build import map (needed for @vue/reactivity and lit-html)
   const importMap = `<script type="importmap">
@@ -929,10 +973,10 @@ function injectComponentScripts(
     .join("\n  ");
 
   // Check if an import map already exists (from islands etc.)
-  const hasImportMap = html.includes('<script type="importmap">');
+  const hasImportMap = result.includes('<script type="importmap">');
   const injection = (hasImportMap ? "" : `${importMap}\n  `) + moduleScripts;
 
-  return html.replace("</body>", `  ${injection}\n</body>`);
+  return result.replace("</body>", `  ${injection}\n</body>`);
 }
 
 /**
@@ -969,23 +1013,28 @@ function injectHead(html: string, headEntries: JxHeadEntry[], lang: string) {
   let preservedBlocks = "";
   if (existingMatch) {
     const styles = existingMatch[1].match(/<style>[\s\S]*?<\/style>/gi);
-    if (styles) preservedBlocks += "\n  " + styles.join("\n  ");
+    if (styles) {
+      preservedBlocks += `\n  ${styles.join("\n  ")}`;
+    }
     const scripts = existingMatch[1].match(/<script[\s\S]*?<\/script>/gi);
-    if (scripts) preservedBlocks += "\n  " + scripts.join("\n  ");
+    if (scripts) {
+      preservedBlocks += `\n  ${scripts.join("\n  ")}`;
+    }
   }
-  if (headPattern.test(html)) {
-    html = html.replace(headPattern, `<head>\n  ${headHtml}${preservedBlocks}\n</head>`);
+  let result = html;
+  if (headPattern.test(result)) {
+    result = result.replace(headPattern, `<head>\n  ${headHtml}${preservedBlocks}\n</head>`);
   }
 
   // Set the lang attribute on <html>
-  html = html.replace(/<html\s[^>]*>/i, (match: string) => {
+  result = result.replace(/<html\s[^>]*>/i, (match: string) => {
     if (/lang=/.test(match)) {
       return match.replace(/lang="[^"]*"/, `lang="${lang}"`);
     }
     return match.replace("<html", `<html lang="${lang}"`);
   });
 
-  return html;
+  return result;
 }
 
 /**
@@ -1011,7 +1060,7 @@ function routeToOutputPath(urlPattern: string, outDir: string, trailingSlash: st
     return join(outDir, segments, "index.html");
   }
 
-  // trailingSlash: "never" or default
+  // TrailingSlash: "never" or default
   return join(outDir, `${segments}.html`);
 }
 
@@ -1055,14 +1104,14 @@ function generateRedirects(
 </html>`;
     mkdirSync(dirname(htmlPath), { recursive: true });
     writeFileSync(htmlPath, html, "utf8");
-    count++;
+    count += 1;
     redirectLines.push(`${source} ${dest} ${status}`);
   }
 
   // Write _redirects file (Netlify/Cloudflare format)
   if (redirectLines.length > 0) {
-    writeFileSync(join(outDir, "_redirects"), redirectLines.join("\n") + "\n", "utf8");
-    count++;
+    writeFileSync(join(outDir, "_redirects"), `${redirectLines.join("\n")}\n`, "utf8");
+    count += 1;
   }
 
   return count;
@@ -1073,7 +1122,7 @@ function generateRedirects(
  * @returns {string}
  */
 function escapeHtml(str: string) {
-  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  return String(str).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
 
 /**
@@ -1081,5 +1130,5 @@ function escapeHtml(str: string) {
  * @returns {string}
  */
 function escapeAttr(str: string) {
-  return String(str).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+  return String(str).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
 }