@jxsuite/compiler 0.35.0 → 1.1.0

package/src/site/site-build.ts

@@ -23,13 +23,16 @@ import { basename, 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";
-import type { FormatRegistry } from "@jxsuite/schema/format-registry";
+import { buildProjectExtensionRegistry } from "./format-host.ts";
+import { loadProjectSections } from "./project-sections.ts";
+import type { FormatEntry, FormatRegistry } from "@jxsuite/schema/format-registry";
+import type { ExtensionRegistry } from "@jxsuite/schema/extension-registry";
 import { resolveLayout } from "./layout-resolver.ts";
 import { mergeHead, renderHead } from "./head-merger.ts";
 import { injectContext } from "./context-injection.ts";
 import { compile, compileServer, compileSiteServer } from "../compiler.ts";
 import { compileElement } from "../targets/compile-element.ts";
+import type { SiteConnectorSpec, SiteMountSpec } from "../targets/compile-server.ts";
 import {
   DEFAULT_LIT_HTML_SRC,
   DEFAULT_REACTIVITY_SRC,
@@ -45,7 +48,6 @@ import {
   resolveRefValue,
   resolveStaticValue,
 } from "../shared.ts";
-import { loadContentConfig, loadContentTypes, resolveContentTypeRefs } from "./content-loader.ts";
 import { resolvePrototypes } from "./prototype-resolver.ts";
 import { transformImageNodes } from "./image-transform.ts";
 import { getImageCacheDir, loadCache, saveCache } from "./image-cache.ts";
@@ -62,7 +64,6 @@ import type {
   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";
 
@@ -90,13 +91,24 @@ export async function buildSite(
   log("Loading project.json...");
   const { config: projectConfig } = loadProjectConfig(projectRoot);
 
+  // The legacy imports-based content model is gone (specs/extensions.md v2) — fail loudly with
+  // The migration path instead of silently ignoring the section.
+  if ("contentTypes" in projectConfig) {
+    throw new Error(
+      `project.json declares "contentTypes", which is no longer supported. ` +
+        `Run \`bun scripts/migrate-project-extensions.ts <project>\` to migrate to ` +
+        `"extensions" + "content", then \`jx schema\`.`,
+    );
+  }
+
   const outDir = resolve(projectRoot, projectConfig.build.outDir);
   const pagesDir = resolve(projectRoot, "pages");
   const publicDir = resolve(projectRoot, "public");
   const trailingSlash = projectConfig.build.trailingSlash ?? "always";
 
-  // ── 1b. Build the format registry from project imports ─────────────────
-  const formatRegistry = await buildProjectFormatRegistry(projectRoot, projectConfig);
+  // ── 1b. Build the extension registry from project.json#/extensions ─────
+  const registry = await buildProjectExtensionRegistry(projectRoot, projectConfig);
+  const formatRegistry = registry.formats;
   if (formatRegistry.entries.length > 0) {
     log(
       `  Registered ${formatRegistry.entries.length} format(s): ${formatRegistry.entries
@@ -105,6 +117,28 @@ export async function buildSite(
     );
   }
 
+  // ── 1c. Active extension server mounts (specs/extensions.md §11) ────────
+  // A mount is active when its class owns no project section, or the project declares a
+  // Non-empty value for its section key. Sites with active mounts always get a worker; a
+  // Static site cannot serve dynamic sections, so that combination is a build error.
+  const activeMounts = registry.serverMounts().filter((entry) => {
+    if (!entry.project) {
+      return true;
+    }
+    const value = projectConfig[entry.project.key] as Record<string, unknown> | undefined;
+    return value !== undefined && typeof value === "object" && Object.keys(value).length > 0;
+  });
+  if (activeMounts.length > 0 && !projectConfig.build.adapter) {
+    const sections = activeMounts
+      .map((entry) => (entry.project ? `"${entry.project.key}"` : `"${entry.server!.basePath}"`))
+      .join(", ");
+    throw new Error(
+      `project.json declares dynamic section(s) ${sections} served by extension mounts, but ` +
+        `build.adapter is "static". Dynamic tables need a server-capable adapter — set ` +
+        `build.adapter to "cloudflare-workers", "cloudflare-pages", "node", or "bun".`,
+    );
+  }
+
   // ── 2. Clean output directory ───────────────────────────────────────────
   if (clean && existsSync(outDir)) {
     rmSync(outDir, { force: true, recursive: true });
@@ -120,20 +154,22 @@ export async function buildSite(
   const staticRoutes = await discoverPages(pagesDir, formatRegistry);
   log(`  Found ${staticRoutes.length} page(s)`);
 
-  // ── 3b. Load content types ─────────────────────────────────────────────
-  log("Loading content types...");
-  const contentTypes = await loadContentTypes(projectRoot, projectConfig, formatRegistry);
-  if (contentTypes.size > 0) {
-    log(`  Loaded ${contentTypes.size} content type(s): ${[...contentTypes.keys()].join(", ")}`);
-    // Resolve cross-content-type $ref references
-    const contentConfig = loadContentConfig(projectRoot, projectConfig);
-    if (contentConfig) {
-      resolveContentTypeRefs(contentTypes, contentConfig.config);
-    }
+  // ── 3b. Load extension-contributed project sections ────────────────────
+  log("Loading project sections...");
+  const sections = await loadProjectSections(projectRoot, projectConfig, registry);
+  const sectionKeys = Object.keys(sections);
+  if (sectionKeys.length > 0) {
+    log(`  Loaded ${sectionKeys.length} section(s): ${sectionKeys.join(", ")}`);
   }
 
   // ── 4. Expand dynamic routes ────────────────────────────────────────────
-  const routes = await expandDynamicRoutes(staticRoutes, projectRoot, contentTypes, formatRegistry);
+  const routes = await expandDynamicRoutes(
+    staticRoutes,
+    projectRoot,
+    sections,
+    registry,
+    projectConfig,
+  );
   log(`  ${routes.length} route(s) after expansion`);
 
   let fileCount = 0;
@@ -235,11 +271,12 @@ export async function buildSite(
         route as unknown as SiteRoute,
         projectConfig,
         projectRoot,
-        contentTypes,
+        sections,
         imageCache,
         componentDefs,
         imageMetaCache,
         formatRegistry,
+        registry,
       );
 
       // Determine which component tags are fully static (for script omission)
@@ -330,7 +367,9 @@ export async function buildSite(
 
   // ── 6b. Save image cache and copy variants to dist ──────────────────────
   if (imageCache && projectConfig.images.optimize) {
-    saveCache(projectRoot, imageCache);
+    // Prune only on fully successful builds — a route that failed to compile never
+    // Touched its images, and pruning would evict their still-valid entries.
+    saveCache(projectRoot, imageCache, { prune: errors.length === 0 });
     const cacheOptimizedDir = resolve(getImageCacheDir(projectRoot), "_optimized");
     if (existsSync(cacheOptimizedDir)) {
       const distOptimizedDir = resolve(outDir, "images/_optimized");
@@ -355,11 +394,22 @@ export async function buildSite(
       }
     }
 
+    // Extension server mounts: static imports of the mount modules and used connector classes,
+    // Inlined JSON options (the project's section manifest — identifiers only, never secrets).
+    const { mounts, connectors } = buildMountSpecs(activeMounts, registry, projectConfig);
+    if (mounts.length > 0) {
+      log(
+        `  Mounting ${mounts.length} extension route(s): ${mounts.map((m) => m.basePath).join(", ")}`,
+      );
+    }
+
     // 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 });
+    // A static-only Pages site needs no worker at all; sites with mounts always get one.
+    const skipWorker = adapter === "cloudflare-pages" && deduped.size === 0 && mounts.length === 0;
+    const workerSource = skipWorker
+      ? null
+      : compileSiteServer([...deduped.values()], { adapter, connectors, mounts });
 
     if (workerSource) {
       const workerName = adapter === "cloudflare-pages" ? "_worker.js" : "worker.js";
@@ -393,7 +443,8 @@ export async function buildSite(
   // ── 7. Generate redirects ───────────────────────────────────────────────
   if (projectConfig.redirects && Object.keys(projectConfig.redirects).length > 0) {
     log("Generating redirects...");
-    const redirectFiles = generateRedirects(projectConfig.redirects, outDir);
+    const compiledUrls = new Set(routes.map((r) => r.urlPattern));
+    const redirectFiles = generateRedirects(projectConfig.redirects, outDir, compiledUrls);
     fileCount += redirectFiles;
   }
 
@@ -445,7 +496,7 @@ export async function buildSite(
  * @param {SiteRoute} route
  * @param {ProjectConfig} projectConfig
  * @param {string} projectRoot
- * @param {Map<string, ContentLoaderEntry[]>} [contentTypes]
+ * @param {Record<string, unknown>} [sections] - Extension-loaded project sections
  * @param {import("./image-cache.js").CacheManifest | null} [imageCache]
  * @param {Map<string, JxElement>} [componentDefs]
  * @param {ImageMetaCache | null} [imageMetaCache] - Set when images.service is "cloudflare"
@@ -460,11 +511,12 @@ async function compilePage(
   route: SiteRoute,
   projectConfig: ProjectConfig,
   projectRoot: string,
-  contentTypes = new Map<string, ContentLoaderEntry[]>(),
+  sections: Record<string, unknown> = {},
   imageCache: CacheManifest | null = null,
   componentDefs = new Map<string, JxElement>(),
   imageMetaCache: ImageMetaCache | null = null,
   formatRegistry?: FormatRegistry,
+  registry?: ExtensionRegistry,
 ) {
   // Load the raw page document (.json natively, other formats via the registry)
   const pageDoc = await readPageDocument(route.sourcePath as string, formatRegistry);
@@ -482,12 +534,13 @@ async function compilePage(
   delete layoutDoc._pageTitle;
 
   // Inject $site and $page context
-  injectContext(layoutDoc, projectConfig, route, contentTypes, projectRoot);
+  injectContext(layoutDoc, projectConfig, route, projectRoot);
 
-  // Resolve generic $prototype entries via .class.json imports
+  // Resolve generic $prototype entries via .class.json imports (and lower registry classes)
   await resolvePrototypes(layoutDoc, route, projectRoot, {
     config: projectConfig,
-    contentTypes,
+    sections,
+    ...(registry === undefined ? {} : { registry }),
   });
 
   // Build scope from resolved state so template strings in title/$head can be evaluated
@@ -617,6 +670,92 @@ async function compilePage(
   };
 }
 
+/**
+ * Build the mount + connector specs for the generated worker (specs/extensions.md §11–§12).
+ *
+ * Mount options inline the extension-contributed sections from project.json — identifiers only,
+ * never secrets (§13). Connector classes are included when any section entry names their
+ * `connector.provider`; the import specifier comes from the descriptor's `connector.module` (bare
+ * specifier — Workers cannot import filesystem paths).
+ *
+ * @param {FormatEntry[]} activeMounts - Server-mount classes with active sections
+ * @param {ExtensionRegistry} registry
+ * @param {ProjectConfig} projectConfig
+ * @returns {{ mounts: SiteMountSpec[]; connectors: SiteConnectorSpec[] }}
+ */
+function buildMountSpecs(
+  activeMounts: FormatEntry[],
+  registry: ExtensionRegistry,
+  projectConfig: ProjectConfig,
+): { mounts: SiteMountSpec[]; connectors: SiteConnectorSpec[] } {
+  if (activeMounts.length === 0) {
+    return { connectors: [], mounts: [] };
+  }
+
+  const sections: Record<string, unknown> = {};
+  for (const contribution of registry.projectContributions()) {
+    const { key } = contribution.project!;
+    if (key in projectConfig) {
+      sections[key] = projectConfig[key];
+    }
+  }
+
+  const mounts: SiteMountSpec[] = activeMounts.map((entry) => {
+    const server = entry.server!;
+    const { module } = server;
+    if (typeof module !== "string" || module === "") {
+      throw new Error(
+        `Extension class "${entry.name}": server.module (a bare import specifier) is required ` +
+          `to generate a deployable worker`,
+      );
+    }
+    return {
+      basePath: server.basePath,
+      className: (entry.classDef.title as string | undefined) ?? entry.name,
+      module,
+      options: { basePath: server.basePath, sections },
+      order: server.order ?? 100,
+    };
+  });
+
+  // Used providers: any section entry object carrying a string `provider` field (the connector
+  // Vocabulary, §12) marks that provider's class for import.
+  const usedProviders = new Set<string>();
+  for (const value of Object.values(sections)) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+      continue;
+    }
+    for (const sectionEntry of Object.values(value as Record<string, unknown>)) {
+      const provider = (sectionEntry as { provider?: unknown } | null)?.provider;
+      if (typeof provider === "string") {
+        usedProviders.add(provider);
+      }
+    }
+  }
+
+  const connectors: SiteConnectorSpec[] = [];
+  for (const entry of registry.connectors()) {
+    const provider = String(entry.connector!.provider);
+    if (!usedProviders.has(provider)) {
+      continue;
+    }
+    const { module } = entry.connector!;
+    if (typeof module !== "string" || module === "") {
+      throw new Error(
+        `Connector class "${entry.name}": connector.module (a bare import specifier) is ` +
+          `required to generate a deployable worker`,
+      );
+    }
+    connectors.push({
+      className: (entry.classDef.title as string | undefined) ?? entry.name,
+      module,
+      provider,
+    });
+  }
+
+  return { connectors, mounts };
+}
+
 /**
  * Resolve template strings in $head entries against the compiled scope.
  *
@@ -1179,14 +1318,18 @@ function routeToOutputPath(urlPattern: string, outDir: string, trailingSlash: st
  *
  * @param {Record<string, string | { destination: string; status?: number }>} redirects
  * @param {string} outDir
+ * @param {Set<string>} [compiledUrls] - URL patterns of compiled routes, for conflict warnings
  * @returns {number} Number of files written
  */
 function generateRedirects(
   redirects: Record<string, string | { destination: string; status?: number }>,
   outDir: string,
+  compiledUrls = new Set<string>(),
 ) {
   let count = 0;
   const redirectLines: string[] = [];
+  const normalizeUrl = (u: string) => (u.length > 1 && u.endsWith("/") ? u.slice(0, -1) : u);
+  const compiled = new Set([...compiledUrls].map((u) => normalizeUrl(u)));
 
   for (const [source, target] of Object.entries(redirects)) {
     const dest = typeof target === "object" ? target.destination : target;
@@ -1198,6 +1341,13 @@ function generateRedirects(
       continue;
     }
 
+    if (compiled.has(normalizeUrl(source))) {
+      console.warn(
+        `Redirect "${source}" overwrites a compiled page at the same route — ` +
+          `remove the redirect or the page.`,
+      );
+    }
+
     // Static redirect — emit an HTML file with meta refresh
     const htmlPath = routeToOutputPath(source, outDir, "always");
     const html = `<!DOCTYPE html>

package/src/site/site-loader.ts

@@ -39,7 +39,6 @@ const DEFAULTS = {
     provider: null,
     trailingSlash: "always",
   },
-  contentTypes: {},
   defaults: {
     charset: "utf8",
     lang: "en",
@@ -83,7 +82,9 @@ export function loadProjectConfig(projectRoot: string) {
     throw new Error(`Invalid project.json: ${errorMessage(error)}`, { cause: error });
   }
 
-  // Deep merge with defaults
+  // Deep merge with defaults. The `...raw` spread carries every author-declared key through
+  // Untouched — including `extensions` and extension-contributed sections (`content`, ...), which
+  // Are opaque to the loader (specs/extensions.md §3.1).
   const config: ResolvedProjectConfig = {
     ...DEFAULTS,
     ...raw,
@@ -111,9 +112,6 @@ export function loadProjectConfig(projectRoot: string) {
   if (raw.imports) {
     config.imports = raw.imports;
   }
-  if (raw.contentTypes) {
-    config.contentTypes = raw.contentTypes;
-  }
 
   // Validate adapter
   const VALID_ADAPTERS = ["cloudflare-workers", "cloudflare-pages", "node", "bun"];

package/src/targets/compile-client.ts

@@ -17,8 +17,10 @@ import {
   DEFAULT_REACTIVITY_SRC,
   buildAttrs,
   compileExpression,
+  compileStatements,
   compileStyles,
   createCompileContext,
+  emitFormulaFn,
   escapeHtml,
   isMutating,
   isRefObject,
@@ -27,10 +29,12 @@ import {
   resolveStaticValue,
 } from "../shared.ts";
 import {
+  hasStructuredBody,
   isExpandedSignal,
   isExpressionDef,
   isFunctionDef,
   isMappedArray,
+  isNamedFormulaDef,
   isPrototypeDef,
   paramNames,
 } from "@jxsuite/schema/guards";
@@ -124,7 +128,11 @@ export function compileClient(
         eventParam: "e",
         statePrefix: "state",
       });
-      if (isMutating(node.operator)) {
+      if (isNamedFormulaDef(def)) {
+        // Named formula → a scope callable mapping positional args onto declared parameters.
+        // Call sites stay positional, matching the interpreter.
+        initBlocks.push(`state[${JSON.stringify(key)}] = ${emitFormulaFn(def, compiled)};`);
+      } else if (isMutating(node.operator)) {
         onEntries.push([key, { args: ["state", "e"], body: compiled }]);
       } else {
         computedEntries.push([key, `() => ${compiled}`]);
@@ -135,7 +143,18 @@ export function compileClient(
     // $prototype: "Function"
     if (isFunctionDef(def)) {
       const args = def.parameters ? paramNames(def.parameters) : def.arguments;
-      if (def.$src) {
+      if (hasStructuredBody(def)) {
+        // Structured body (spec §20) → an event handler compiled from statements.
+        // With parameters, a positional callable like a named formula.
+        const compiled = compileStatements(def.body, { eventParam: "e", statePrefix: "state" });
+        if (def.parameters && def.parameters.length > 0) {
+          initBlocks.push(
+            `state[${JSON.stringify(key)}] = ${emitFormulaFn(def, `(() => {\n${compiled}\n})()`)};`,
+          );
+        } else {
+          onEntries.push([key, { args: ["state", "e"], body: compiled }]);
+        }
+      } else if (def.$src) {
         if (!srcImportMap.has(def.$src)) {
           srcImportMap.set(def.$src, new Set());
         }
@@ -143,12 +162,12 @@ export function compileClient(
 
         // $src functions always produce computed entries (they return values)
         computedEntries.push([key, `() => { return ${key}(state); }`]);
-      } else if (def.body && def.body.includes("return")) {
+      } else if (typeof def.body === "string" && def.body.includes("return")) {
         // Body contains return → computed
         computedEntries.push([key, `() => { ${def.body} }`]);
       } else {
         // No return → event handler
-        onEntries.push([key, { args: args ?? ["state"], body: def.body }]);
+        onEntries.push([key, { args: args ?? ["state"], body: def.body as string | undefined }]);
       }
       continue;
     }
@@ -335,13 +354,22 @@ function buildClientNode(
       const key = refToBindingKey(val.$ref);
       bindAttrs.push(`@${eventName}="${key}"`);
       needsBind = true;
+    } else if (hasStructuredBody(val)) {
+      const key = `_h${counter.h}`;
+      counter.h += 1;
+      bindAttrs.push(`@${eventName}="${key}"`);
+      handlers.set(key, {
+        args: ["state", "e"],
+        body: compileStatements(val.body, { eventParam: "e", statePrefix: "state" }),
+      });
+      needsBind = true;
     } else if (isFunctionDef(val)) {
       const key = `_h${counter.h}`;
       counter.h += 1;
       bindAttrs.push(`@${eventName}="${key}"`);
       handlers.set(key, {
         args: val.parameters ? paramNames(val.parameters) : (val.arguments ?? ["state", "event"]),
-        body: val.body,
+        body: val.body as string | undefined,
       });
       needsBind = true;
     } else if (isExpressionDef(val)) {
@@ -594,6 +622,9 @@ function emitLitMapTemplate(def: JxMutableNode | undefined) {
     if (isRefObject(val)) {
       const key = refToBindingKey((val as JxMutableNode).$ref as string);
       attrs += ` @${eventName}=\${(e) => { state.$map = { item, index }; on.${key}(e); }}`;
+    } else if (hasStructuredBody(val)) {
+      const compiled = compileStatements(val.body, { eventParam: "e", statePrefix: "state" });
+      attrs += ` @${eventName}=\${(e) => { state.$map = { item, index }; ${compiled} }}`;
     } else if (val && typeof val === "object" && (val as JxMutableNode).$prototype === "Function") {
       const body = mapRefsToLit((val as JxMutableNode).body as string);
       attrs += ` @${eventName}=\${(e) => { ${body} }}`;

package/src/targets/compile-element.ts

@@ -9,15 +9,19 @@ import { RESERVED_KEYS, camelToKebab } from "@jxsuite/runtime";
 import {
   collectStyles,
   compileExpression,
+  compileStatements,
+  emitFormulaFn,
   escapeHtml,
   isMutating,
   isSchemaOnly,
   tagNameToClassName,
 } from "../shared.ts";
 import {
+  hasStructuredBody,
   isExpressionDef,
   isFunctionDef,
   isMappedArray,
+  isNamedFormulaDef,
   isRef,
   paramNames,
 } from "@jxsuite/schema/guards";
@@ -284,11 +288,14 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
   const computedEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
   const functionEntries: [string, JxExpressionDef | JxFunctionDef][] = [];
 
+  const formulaEntries: [string, JxExpressionDef][] = [];
   for (const [key, def] of Object.entries(defs)) {
     const d = def as JxMutableNode;
     if (isExpressionDef(d)) {
       const node = d.$expression as ExpressionNode;
-      if (isMutating(node.operator)) {
+      if (isNamedFormulaDef(d)) {
+        formulaEntries.push([key, d]);
+      } else if (isMutating(node.operator)) {
         functionEntries.push([key, d]);
       } else {
         computedEntries.push([key, d]);
@@ -324,6 +331,16 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
         statePrefix: "s",
       });
       lines.push(`    this.state.${key} = (s, e) => { ${compiled}; };`);
+    } else if (hasStructuredBody(def)) {
+      // Structured body (spec §20) — statements compiled against this.state; dispatch target is
+      // The component instance itself (WHATWG dispatchEvent on the custom element).
+      const compiled = compileStatements(def.body, {
+        dispatchTarget: "this",
+        eventParam: "e",
+        indent: "      ",
+        statePrefix: "this.state",
+      });
+      lines.push(`    this.state.${key} = (s, e) => {`, compiled, "    };");
     } else {
       const args = def.parameters ? paramNames(def.parameters) : (def.arguments ?? ["state"]);
       const paramList = args.join(", ");
@@ -333,13 +350,23 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
       } else {
         lines.push(
           `    this.state.${key} = (${paramList}) => {`,
-          `      ${def.body ?? ""}`,
+          `      ${typeof def.body === "string" ? def.body : ""}`,
           "    };",
         );
       }
     }
   }
 
+  // Emit named formulas — scope callables mapping positional args onto declared parameters
+  for (const [key, def] of formulaEntries) {
+    lines.push("");
+    const compiled = compileExpression(def.$expression as ExpressionNode, {
+      eventParam: "e",
+      statePrefix: "this.state",
+    });
+    lines.push(`    this.state.${key} = ${emitFormulaFn(def, compiled)};`);
+  }
+
   // Emit computed signals — $src or inline body
   for (const [key, def] of computedEntries) {
     lines.push("");
@@ -353,7 +380,10 @@ export function emitElementModule(doc: JxDocument, className: string, elementImp
       lines.push(`    this.state.${key} = computed(() => ${key}(this.state));`);
     } else {
       lines.push(`    this.state.${key} = computed(() => {`);
-      const body = (def.body ?? "").replaceAll("state.", "this.state.");
+      const body = (typeof def.body === "string" ? def.body : "").replaceAll(
+        "state.",
+        "this.state.",
+      );
       lines.push(`      ${body}`, "    });");
     }
   }
@@ -765,7 +795,14 @@ function toLitTextContent(value: unknown) {
  * @returns {string}
  */
 function inlineHandlerBody(def: JxFunctionDef) {
-  const body = def.body ?? "";
+  if (hasStructuredBody(def)) {
+    return compileStatements(def.body, {
+      dispatchTarget: "e.currentTarget",
+      eventParam: "e",
+      statePrefix: "s",
+    });
+  }
+  const body = typeof def.body === "string" ? def.body : "";
   return body.replaceAll(/(?<!this\.)state\./g, "s.").replaceAll(/(?<!this\.)state(?!\.)/g, "s");
 }