@jxsuite/compiler 0.28.0 → 0.28.3

package/src/targets/compile-server.ts

@@ -5,11 +5,9 @@
  * file.
  */
 
-import $RefParser from "@apidevtools/json-schema-ref-parser";
+import { dereference } from "@apidevtools/json-schema-ref-parser";
 import { collectServerEntries } from "../shared.ts";
-import { buildImageHandlerSource, buildImageWorkerRoute } from "./compile-image-endpoint.ts";
 import type { JxElement } from "@jxsuite/schema/types";
-import type { ImageConfig } from "../site/image-optimizer.ts";
 
 /**
  * Compile a Jx document to a Hono server handler file. The handler exposes each `timing: "server"`
@@ -32,9 +30,11 @@ export async function compileServer(
   } = {},
 ) {
   const { baseUrl = "/_jx/server" } = opts;
-  const doc = (await $RefParser.dereference(sourcePath)) as JxElement;
+  const doc = (await dereference(sourcePath)) as JxElement;
   const entries = collectServerEntries(doc);
-  if (entries.length === 0) return null;
+  if (entries.length === 0) {
+    return null;
+  }
 
   const imports = entries
     .map(({ exportName, src }) => `import { ${exportName} } from '${src}'`)
@@ -63,9 +63,8 @@ export default app
  * @param {{ exportName: string; src: string }[]} entries - Resolved server entries
  * @param {object} [opts]
  * @param {string} [opts.baseUrl] - Base path for server endpoints. Default is `'/_jx/server'`
- * @param {string | null} [opts.adapter] - Deployment adapter: `"cloudflare"`, `"node"`, `"bun"`
- * @param {ImageConfig | null} [opts.images] - When set, embed the Cloudflare Images binding
- *   endpoint at `/_jx/image` (images.service: "cloudflare")
+ * @param {string | null} [opts.adapter] - Deployment adapter: `"cloudflare-workers"`,
+ *   `"cloudflare-pages"`, `"node"`, `"bun"`
  * @returns {string | null} Complete worker/server source string, or null
  */
 export function compileSiteServer(
@@ -73,11 +72,12 @@ export function compileSiteServer(
   opts: {
     baseUrl?: string;
     adapter?: string | null;
-    images?: ImageConfig | null;
   } = {},
 ) {
-  const { baseUrl = "/_jx/server", adapter = null, images = null } = opts;
-  if (entries.length === 0 && !adapter) return null;
+  const { baseUrl = "/_jx/server", adapter = null } = opts;
+  if (entries.length === 0 && !adapter) {
+    return null;
+  }
 
   const imports = entries
     .map(({ exportName, src }) => `import { ${exportName} } from '${src}'`)
@@ -85,21 +85,19 @@ export function compileSiteServer(
 
   const routes = entries.map(({ exportName }) => buildRoute(exportName, baseUrl)).join("\n");
 
-  const imageHandler = images ? `\n${buildImageHandlerSource(images)}\n` : "";
-  // The image route must register before the cloudflare-workers ASSETS catch-all below.
-  const imageRoute = images ? buildImageWorkerRoute() : "";
-
+  // Workers static assets and Pages advanced mode (_worker.js) both route every request
+  // Through the worker — unmatched paths must fall through to the ASSETS binding.
   const adapterBlock =
-    adapter === "cloudflare-workers"
+    adapter === "cloudflare-workers" || adapter === "cloudflare-pages"
       ? "\napp.all('*', (c) => c.env.ASSETS.fetch(c.req.raw))\n"
       : "\n";
 
   return `// Generated by @jxsuite/compiler — do not edit manually
 import { Hono } from 'hono'
 ${imports}
-${imageHandler}
+
 const app = new Hono()
-${routes}${imageRoute}
+${routes}
 ${adapterBlock}
 export default app
 `;
@@ -117,47 +115,3 @@ app.post('${baseUrl}/${exportName}', async (c) => {
   }
 })`;
 }
-
-/**
- * Generate Cloudflare Pages Functions from pre-collected server entries. Returns a Map of relative
- * file paths (under `functions/`) to source strings.
- *
- * @param {{ exportName: string; src: string }[]} entries - Resolved server entries
- * @param {object} [opts]
- * @param {string} [opts.baseUrl] - Base path prefix. Default is `'/_jx/server'`
- * @returns {Map<string, string>} Map of output path → source (e.g.
- *   `"functions/_jx/server/sendEmail.js"` → source)
- */
-export function compilePagesFunctions(
-  entries: { exportName: string; src: string }[],
-  opts: {
-    baseUrl?: string;
-  } = {},
-) {
-  const { baseUrl = "/_jx/server" } = opts;
-  const files = new Map();
-
-  for (const { exportName, src } of entries) {
-    const relativeSrc = src.startsWith("./") ? src : `./${src}`;
-    const funcPath = `functions${baseUrl}/${exportName}.js`;
-    const depth = funcPath.split("/").length - 1;
-    const importPath = "../".repeat(depth) + relativeSrc.replace(/^\.\//, "");
-
-    const source = `// Generated by @jxsuite/compiler — do not edit manually
-import { ${exportName} } from '${importPath}'
-
-export async function onRequestPost(context) {
-  const args = await context.request.json().catch(() => ({}))
-  try {
-    const result = await ${exportName}(args, context.env)
-    return Response.json(result)
-  } catch (e) {
-    return Response.json({ ok: false, error: e?.message ?? 'Server error' }, { status: 500 })
-  }
-}
-`;
-    files.set(funcPath, source);
-  }
-
-  return files;
-}

package/src/targets/compile-static.ts

@@ -6,29 +6,34 @@
  */
 
 import {
-  isNodeDynamic,
-  createCompileContext,
-  resolveStaticValue,
   buildAttrs,
   compileStyles,
+  createCompileContext,
   escapeHtml,
+  isNodeDynamic,
+  resolveStaticValue,
 } from "../shared.ts";
 import { emitElementModule } from "./compile-element.ts";
-import type { JxStyle, JxMutableNode } from "@jxsuite/schema/types";
+import type { JxDocument, JxMutableNode, JxStyle } from "@jxsuite/schema/types";
 
 /**
  * Compile a static document to HTML, with dynamic subtrees as islands.
  *
- * @param {JxMutableNode | Record<string, any>} raw - Raw JSON document (with $ref pointers
- *   preserved)
+ * @param {JxDocument} raw - Raw JSON document (with $ref pointers preserved)
  * @param {Record<string, unknown>} opts
  * @returns {{ html: string; files: { path: string; content: string; tagName: string }[] }}
  */
 export function compileStaticPage(
-  raw: JxMutableNode | Record<string, any>,
-  opts: Record<string, unknown>,
+  raw: JxDocument,
+  opts: {
+    title?: string;
+    reactivitySrc?: string;
+    litHtmlSrc?: string;
+    projectStyle?: JxStyle | null;
+    [key: string]: unknown;
+  },
 ) {
-  const { title, reactivitySrc, litHtmlSrc } = opts as JxMutableNode;
+  const { title = "Jx App", reactivitySrc, litHtmlSrc } = opts;
 
   const rootContext = createCompileContext(raw, null, raw.state ?? {}, raw.$media ?? {});
   const styleBlock = compileStyles(
@@ -45,10 +50,10 @@ export function compileStaticPage(
   let moduleScripts = "";
   if (islands.length > 0) {
     for (const island of islands) {
-      const moduleContent = emitElementModule(island.def, island.className, []);
+      const moduleContent = emitElementModule(island.def as JxDocument, island.className, []);
       files.push({
-        path: `_islands/${island.tagName}.js`,
         content: moduleContent,
+        path: `_islands/${island.tagName}.js`,
         tagName: island.tagName,
       });
     }
@@ -82,7 +87,7 @@ export function compileStaticPage(
 </body>
 </html>`;
 
-  return { html, files };
+  return { files, html };
 }
 
 // ─── Node compilation ─────────────────────────────────────────────────────────
@@ -95,7 +100,7 @@ export function compileStaticPage(
  * @param {boolean} dynamic
  * @param {JxMutableNode} raw
  * @param {any} context
- * @param {{ def: any; tagName: string; className: string }[]} islands
+ * @param {{ def: JxMutableNode; tagName: string; className: string }[]} islands
  * @returns {string}
  */
 function compileNode(
@@ -116,7 +121,9 @@ function compileNode(
   if (typeof def === "number" || typeof def === "boolean") {
     return escapeHtml(String(def));
   }
-  if (!def || typeof def !== "object") return "";
+  if (!def || typeof def !== "object") {
+    return "";
+  }
 
   const nextContext = createCompileContext(
     raw,
@@ -130,7 +137,7 @@ function compileNode(
     const tagName = `jx-island-${n}`;
     const className = `JxIsland${n}`;
     const elementDef = { ...(raw ?? def), tagName };
-    islands.push({ def: elementDef, tagName, className });
+    islands.push({ className, def: elementDef, tagName });
     return `<${tagName}></${tagName}>`;
   }
 
@@ -148,7 +155,7 @@ function compileNode(
  * @param {JxMutableNode} def
  * @param {JxMutableNode} raw
  * @param {any} context
- * @param {{ def: any; tagName: string; className: string }[]} islands
+ * @param {{ def: JxMutableNode; tagName: string; className: string }[]} islands
  * @returns {string}
  */
 function buildInnerWithIslands(
@@ -167,13 +174,14 @@ function buildInnerWithIslands(
     const value = resolveStaticValue(source.textContent, context.scope);
     return value == null ? "" : escapeHtml(String(value));
   }
-  if (source.innerHTML)
+  if (source.innerHTML) {
     return (resolveStaticValue(source.innerHTML, context.scope) as string) ?? source.innerHTML;
+  }
   if (Array.isArray(source.children)) {
-    const rawChildren = raw?.children;
+    const rawChildren = Array.isArray(raw?.children) ? raw.children : undefined;
     return source.children
       .map((c, i: number) => {
-        const child = c as unknown as JxMutableNode;
+        const child = c as JxMutableNode;
         const childDynamic = isNodeDynamic(child);
         const childRaw = (rawChildren?.[i] ?? c) as JxMutableNode;
         return compileNode(child, childDynamic, childRaw, context, islands);

package/src/targets/compile-image-endpoint.ts

@@ -1,138 +0,0 @@
-/**
- * Compile-image-endpoint.js — Cloudflare Images binding endpoint codegen
- *
- * Generates the `/_jx/image` runtime image-transformation handler used when `images.service:
- * "cloudflare"` is set in project.json. The handler fetches the original static asset via the
- * ASSETS binding and pipes it through the Cloudflare Images binding, negotiating the output format
- * from the request's Accept header.
- */
-
-import type { ImageConfig } from "../site/image-optimizer.ts";
-
-const MIME: Record<string, string> = {
-  avif: "image/avif",
-  webp: "image/webp",
-  jpeg: "image/jpeg",
-  png: "image/png",
-};
-
-/**
- * Generate the shared `jxHandleImage(request, env, waitUntil)` handler source. Widths, format
- * preference order (avif first, mirroring the build-time pipeline), per-format quality, and the
- * Images binding name are baked in at codegen time.
- *
- * @param {ImageConfig} images - The project's images config
- * @returns {string} JavaScript source defining `jxHandleImage`
- */
-export function buildImageHandlerSource(images: ImageConfig) {
-  const binding = images.binding ?? "IMAGES";
-  const formats = [...(images.formats ?? [])]
-    .filter((f) => f in MIME)
-    .sort((a, b) => Number(b === "avif") - Number(a === "avif"));
-  const tuples = formats.map((f) => [
-    MIME[f],
-    images.quality?.[f as keyof ImageConfig["quality"]] ?? 80,
-  ]);
-
-  return `const JX_IMG_WIDTHS = new Set(${JSON.stringify(images.widths ?? [])})
-const JX_IMG_FORMATS = ${JSON.stringify(tuples)} // [mime, quality] in preference order
-const JX_IMG_BINDING = ${JSON.stringify(binding)}
-const JX_IMG_REMOTE_DOMAINS = new Set(${JSON.stringify(images.remoteDomains ?? [])})
-
-async function jxHandleImage(request, env, waitUntil) {
-  const url = new URL(request.url)
-  const src = url.searchParams.get('src') ?? ''
-  const w = Number(url.searchParams.get('w') ?? '')
-
-  // Same-origin asset paths, or https sources from allowlisted remote domains —
-  // never act as an open proxy.
-  let remoteSrc = null
-  if (src.startsWith('https://')) {
-    try {
-      const remote = new URL(src)
-      if (JX_IMG_REMOTE_DOMAINS.has(remote.hostname)) remoteSrc = remote
-    } catch {}
-    if (!remoteSrc) return new Response('Invalid src', { status: 400 })
-  } else if (!src.startsWith('/') || src.startsWith('//') || src.includes('..') ||
-      src.includes(':') || src.includes('\\\\') || src.includes('?') || src.includes('#')) {
-    return new Response('Invalid src', { status: 400 })
-  }
-  if (!JX_IMG_WIDTHS.has(w)) return new Response('Invalid width', { status: 400 })
-
-  const accept = request.headers.get('accept') ?? ''
-  let target = null
-  for (const [mime, quality] of JX_IMG_FORMATS) {
-    if (accept.includes(mime)) { target = { mime, quality }; break }
-  }
-
-  const v = url.searchParams.get('v') ?? ''
-  const cacheKey = new Request(url.origin + '/_jx/image?src=' + encodeURIComponent(src) +
-    '&w=' + w + '&f=' + (target ? target.mime : 'orig') + '&v=' + encodeURIComponent(v))
-  const cache = caches.default
-  const hit = await cache.match(cacheKey)
-  if (hit) {
-    const out = new Response(hit.body, hit)
-    out.headers.set('Vary', 'Accept')
-    return out
-  }
-
-  const fetchSource = () =>
-    remoteSrc
-      ? fetch(remoteSrc.href, { redirect: 'follow' })
-      : env.ASSETS.fetch(new Request(new URL(src, url.origin)))
-
-  const asset = await fetchSource()
-  if (!asset.ok || !asset.body) return new Response('Not found', { status: 404 })
-
-  let response
-  if (target && env[JX_IMG_BINDING]) {
-    try {
-      const result = await env[JX_IMG_BINDING]
-        .input(asset.body)
-        .transform({ width: w, fit: 'scale-down' })
-        .output({ format: target.mime, quality: target.quality })
-      response = result.response()
-    } catch (e) {
-      // Transform failed — serve the original source untouched.
-      const retry = await fetchSource()
-      response = new Response(retry.body, retry)
-    }
-  } else {
-    response = new Response(asset.body, asset)
-  }
-
-  response = new Response(response.body, response)
-  response.headers.set('Cache-Control', 'public, max-age=31536000, immutable')
-  if (waitUntil) waitUntil(cache.put(cacheKey, response.clone()))
-  response.headers.set('Vary', 'Accept')
-  return response
-}`;
-}
-
-/**
- * Generate the Hono route registering `jxHandleImage` at `/_jx/image`. Must be injected before the
- * cloudflare-workers `app.all('*')` ASSETS catch-all.
- *
- * @returns {string}
- */
-export function buildImageWorkerRoute() {
-  return `
-app.get('/_jx/image', (c) => jxHandleImage(c.req.raw, c.env, (p) => c.executionCtx?.waitUntil?.(p)))`;
-}
-
-/**
- * Generate a complete Cloudflare Pages Function (`functions/_jx/image.js`) wrapping `jxHandleImage`
- * in an `onRequestGet` handler.
- *
- * @param {ImageConfig} images - The project's images config
- * @returns {string}
- */
-export function compilePagesImageFunction(images: ImageConfig) {
-  return `// Generated by @jxsuite/compiler — do not edit manually
-${buildImageHandlerSource(images)}
-
-export async function onRequestGet(context) {
-  return jxHandleImage(context.request, context.env, (p) => context.waitUntil(p))
-}
-`;
-}