@jxsuite/compiler 0.28.0 → 0.28.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.3.5",
-    "@jxsuite/parser": "^0.28.0",
-    "@jxsuite/runtime": "^0.28.0",
-    "@jxsuite/schema": "^0.28.0",
+    "@jxsuite/parser": "^0.28.2",
+    "@jxsuite/runtime": "^0.28.2",
+    "@jxsuite/schema": "^0.28.2",
     "sharp": "^0.34.5"
   },
   "devDependencies": {

package/src/compiler.ts

@@ -22,11 +22,7 @@ import {
   DEFAULT_REACTIVITY_SRC,
   DEFAULT_LIT_HTML_SRC,
 } from "./shared.ts";
-import {
-  compileServer,
-  compileSiteServer,
-  compilePagesFunctions,
-} from "./targets/compile-server.ts";
+import { compileServer, compileSiteServer } from "./targets/compile-server.ts";
 
 import {
   compileElement,
@@ -42,7 +38,6 @@ export {
   isDynamic,
   compileServer,
   compileSiteServer,
-  compilePagesFunctions,
   compileElement,
   compileElementPage,
   compileClient,

package/src/site/image-optimizer.ts

@@ -31,11 +31,10 @@ export interface ImageConfig {
   sizes: string;
   lazyLoad: boolean;
   service?: "build" | "cloudflare";
-  binding?: string;
   /**
    * Hostnames whose remote (https) images are routed through the optimization pipeline. Cloudflare
-   * service only — the generated /_jx/image endpoint fetches and transforms allowlisted remote
-   * sources; everything else is rejected to prevent open-proxy use.
+   * service only — allowlisted remote sources get /cdn-cgi/image transform srcsets (the zone must
+   * permit resizing from the remote origin); everything else is left untouched.
    */
   remoteDomains?: string[];
 }

package/src/site/image-transform.ts

@@ -7,7 +7,6 @@
  */
 
 import { existsSync } from "node:fs";
-import { createHash } from "node:crypto";
 import { resolve, extname, basename } from "node:path";
 import {
   processImage,
@@ -49,20 +48,35 @@ async function resolveCfMeta(absoluteSrc: string, metaCache: ImageMetaCache) {
 }
 
 /**
- * Build a srcset of `/_jx/image` endpoint URLs for the configured widths that fit within the
- * original image width. The `v` param carries the content hash for cache busting.
+ * Build a srcset of Cloudflare `/cdn-cgi/image/` transform-via-URL entries for the configured
+ * widths that fit within the original image width. `format=auto` lets Cloudflare negotiate
+ * AVIF/WebP per browser; `fit=scale-down` guards against upscaling. Requires Image Transformations
+ * to be enabled on the serving zone (does not work on *.pages.dev).
  *
- * @param {string} src - Original site-relative src (e.g. "/images/hero.png")
- * @param {number[]} widths
+ * @param {string} src - Site-relative src (e.g. "/images/hero.png") or allowlisted https URL
+ * @param {ImageConfig} config
  * @param {number} originalWidth
- * @param {string} hash - 8-char content hash
+ * @param {string | null} hash - 8-char content hash for cache busting (null for remote sources,
+ *   whose bytes aren't available at build time)
  * @returns {string}
  */
-function buildCloudflareSrcset(src: string, widths: number[], originalWidth: number, hash: string) {
-  return widths
+function buildCloudflareSrcset(
+  src: string,
+  config: ImageConfig,
+  originalWidth: number,
+  hash: string | null,
+) {
+  const quality = config.quality?.webp ?? 80;
+  const separator = src.startsWith("/") ? "" : "/";
+  const suffix = hash ? `?v=${hash}` : "";
+  return config.widths
     .filter((w) => w <= originalWidth)
     .sort((a, b) => a - b)
-    .map((w) => `/_jx/image?src=${encodeURIComponent(src)}&w=${w}&v=${hash} ${w}w`)
+    .map(
+      (w) =>
+        `/cdn-cgi/image/width=${w},quality=${quality},fit=scale-down,format=auto` +
+        `${separator}${src}${suffix} ${w}w`,
+    )
     .join(", ");
 }
 
@@ -113,8 +127,9 @@ function shouldSkip(src: string) {
 /**
  * Check if a remote src is eligible for cloudflare-service optimization: an https URL whose
  * hostname is in the project's `images.remoteDomains` allowlist. Content data (e.g. CSV columns)
- * routinely references externally hosted images — allowlisted hosts flow through the /_jx/image
- * endpoint like local assets; everything else passes through untouched.
+ * routinely references externally hosted images — allowlisted hosts flow through the /cdn-cgi/image
+ * transform URL like local assets; everything else passes through untouched. The zone must permit
+ * resizing from the remote origin (Images → Transformations → Sources).
  *
  * @param {string} src
  * @param {ImageConfig} config
@@ -134,11 +149,6 @@ function isAllowedRemote(src: string, config: ImageConfig) {
   }
 }
 
-/** 8-char cache-busting hash for a remote URL (original bytes aren't available at build time). */
-function urlHash(src: string) {
-  return createHash("sha256").update(src).digest("hex").slice(0, 8);
-}
-
 /**
  * Resolve a src path to an absolute filesystem path.
  *
@@ -258,11 +268,11 @@ async function transformImgNode(
 
   if (remote) {
     // Original dimensions are unknown without fetching — emit every configured width and let
-    // the endpoint's scale-down fit avoid upscaling past the source size.
-    srcset = buildCloudflareSrcset(src, config.widths, Infinity, urlHash(src));
+    // fit=scale-down avoid upscaling past the source size.
+    srcset = buildCloudflareSrcset(src, config, Infinity, null);
   } else if (config.service === "cloudflare") {
     const meta = await resolveCfMeta(absoluteSrc as string, metaCache);
-    srcset = buildCloudflareSrcset(src, config.widths, meta.width, meta.hash);
+    srcset = buildCloudflareSrcset(src, config, meta.width, meta.hash);
     original = meta;
   } else {
     let manifest = imageRefs.get(absoluteSrc as string);
@@ -344,10 +354,10 @@ async function transformInnerHtmlImages(
     let original: { width: number; height: number } | undefined;
 
     if (remote) {
-      srcset = buildCloudflareSrcset(src, config.widths, Infinity, urlHash(src));
+      srcset = buildCloudflareSrcset(src, config, Infinity, null);
     } else if (config.service === "cloudflare") {
       const meta = await resolveCfMeta(absoluteSrc as string, metaCache);
-      srcset = buildCloudflareSrcset(src, config.widths, meta.width, meta.hash);
+      srcset = buildCloudflareSrcset(src, config, meta.width, meta.hash);
       original = meta;
     } else {
       let manifest = imageRefs.get(absoluteSrc as string);

package/src/site/site-build.ts

@@ -25,7 +25,7 @@ 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 {
   buildInitialScope,
@@ -45,7 +45,6 @@ import { loadContentTypes, loadContentConfig, resolveContentTypeRefs } from "./c
 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 type { ImageConfig } from "./image-optimizer.ts";
 import type { ImageMetaCache } from "./image-transform.ts";
 import type {
@@ -205,11 +204,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.`,
     );
   }
 
@@ -321,24 +318,29 @@ export async function buildSite(
       if (!deduped.has(entry.exportName)) deduped.set(entry.exportName, entry);
     }
 
-    if (adapter === "cloudflare-pages") {
-      const functions = compilePagesFunctions([...deduped.values()]);
+    // 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 (cfImages) {
-        functions.set(
-          "functions/_jx/image.js",
-          compilePagesImageFunction(projectConfig.images as ImageConfig),
+    if (workerSource) {
+      const workerName = adapter === "cloudflare-pages" ? "_worker.js" : "worker.js";
+      writeFileSync(resolve(outDir, workerName), workerSource, "utf8");
+      fileCount++;
+      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({ version: 1, include: ["/_jx/*"], exclude: [] }, null, 2) + "\n",
+          "utf8",
         );
-      }
-
-      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 +350,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);
-          }
-        }
-      }
     }
   }
 

package/src/site/site-loader.ts

@@ -35,7 +35,6 @@ const DEFAULTS = {
     sizes: "(max-width: 768px) 100vw, 50vw",
     lazyLoad: true,
     service: "build",
-    binding: "IMAGES",
   },
   build: {
     outDir: "./dist",
@@ -98,7 +97,8 @@ export function loadProjectConfig(projectRoot: string) {
     );
   }
 
-  // Validate image service
+  // Validate image service. The "cloudflare" service emits /cdn-cgi/image transform URLs,
+  // which work on any zone served through Cloudflare regardless of the build adapter.
   const VALID_IMAGE_SERVICES = ["build", "cloudflare"];
   if (!VALID_IMAGE_SERVICES.includes(config.images.service)) {
     throw new Error(
@@ -106,14 +106,6 @@ export function loadProjectConfig(projectRoot: string) {
         `Valid services: ${VALID_IMAGE_SERVICES.join(", ")}`,
     );
   }
-  const CF_ADAPTERS = ["cloudflare-workers", "cloudflare-pages"];
-  if (config.images.service === "cloudflare" && !CF_ADAPTERS.includes(config.build.adapter)) {
-    console.warn(
-      `images.service "cloudflare" requires a Cloudflare adapter ` +
-        `(${CF_ADAPTERS.join(", ")}) — falling back to "build"`,
-    );
-    config.images.service = "build";
-  }
 
   return {
     config,

package/src/targets/compile-server.ts

@@ -7,9 +7,7 @@
 
 import $RefParser 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"`
@@ -63,9 +61,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,10 +70,9 @@ export function compileSiteServer(
   opts: {
     baseUrl?: string;
     adapter?: string | null;
-    images?: ImageConfig | null;
   } = {},
 ) {
-  const { baseUrl = "/_jx/server", adapter = null, images = null } = opts;
+  const { baseUrl = "/_jx/server", adapter = null } = opts;
   if (entries.length === 0 && !adapter) return null;
 
   const imports = entries
@@ -85,21 +81,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 +111,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-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))
-}
-`;
-}