@jxsuite/compiler 8.3.0 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "8.3.0",
+  "version": "8.4.0",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -52,10 +52,10 @@
     "upgrade": "bun update --latest && bun install"
   },
   "dependencies": {
-    "@jxsuite/create": "^1.5.5",
-    "@jxsuite/runtime": "^6.2.0",
-    "@jxsuite/schema": "^5.3.0",
-    "@jxsuite/site": "^2.4.0",
+    "@jxsuite/create": "^1.6.0",
+    "@jxsuite/runtime": "^6.2.1",
+    "@jxsuite/schema": "^5.4.0",
+    "@jxsuite/site": "^2.5.0",
     "@vue/reactivity": "3.5.44",
     "esbuild": "^0.28.2",
     "lit-html": "^3.3.3",
@@ -63,8 +63,8 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^21.0.4",
-    "@jxsuite/connector": "^0.8.5",
-    "@jxsuite/parser": "^4.3.1",
+    "@jxsuite/connector": "^0.8.6",
+    "@jxsuite/parser": "^4.3.2",
     "@jxsuite/test-support": "^0.0.0",
     "@types/mdast": "^4.0.4"
   }

package/src/cli.ts

@@ -29,7 +29,7 @@ Commands:
   preview [root]   Serve an already-built dist/ directory
   schema [root]    Generate project.schema.json + document.schema.json from project.json#/extensions
   validate [root]  Validate the whole project: project.json, documents, classes, and fragments
-  convert <paths…> Move documents between .json and .jxn, repairing every reference to them
+  convert <paths…> Move documents and the project file between .json and .jxn, repairing references
   db push [root]   Sync the data section's tables to their connections (additive-only)
 
 Options:

package/src/site/image-cache.ts

@@ -7,7 +7,7 @@
  */
 
 import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
-import { basename, resolve } from "node:path";
+import { basename, extname, resolve } from "node:path";
 import { execSync } from "node:child_process";
 import { tmpdir } from "node:os";
 import { configHash, contentHash } from "./image-optimizer.ts";
@@ -112,14 +112,19 @@ export function getImageCacheDir(projectRoot: string): string {
 // ─── Cache key ───────────────────────────────────────────────────────────────
 
 /**
- * Build a cache key from source file content and config.
+ * Build a cache key from source file content, config, and the file's name.
+ *
+ * The name is part of the key because it is part of the output: variants are named after the source
+ * file (`variantFilename`). Keyed on content alone, a renamed photo found its old entry and kept
+ * the old variant names, so renaming a file to fix its URLs changed nothing until the cache was
+ * deleted by hand. The old entry is untouched by the build that renames it, so pruning removes it.
  *
  * @param {string} srcPath - Absolute path to source image
  * @param {ImageConfig} config
  * @returns {string}
  */
 export function cacheKey(srcPath: string, config: ImageConfig) {
-  return `${contentHash(srcPath)}:${configHash(config)}`;
+  return `${contentHash(srcPath)}:${configHash(config)}:${basename(srcPath, extname(srcPath))}`;
 }
 
 // ─── Load / save ─────────────────────────────────────────────────────────────

package/src/site/image-optimizer.ts

@@ -263,6 +263,25 @@ export async function processImage(srcPath: string, cacheImgDir: string, config:
  */
 export function buildSrcset(variants: ImageVariant[], format: string) {
   return variants
-    .flatMap((v) => (v.format === format ? [`${v.outputPath} ${v.width}w`] : []))
+    .flatMap((v) => (v.format === format ? [`${variantUrl(v.outputPath)} ${v.width}w`] : []))
     .join(", ");
 }
+
+/**
+ * The URL of an emitted variant: its output path with each segment percent-encoded.
+ *
+ * A variant is named after its source file, and a source file may be named anything. Written raw, a
+ * name with a space breaks a `srcset`, which splits candidates on whitespace, so `Designer, White,
+ * Black.jpg` became a candidate for `…/Designer,` and a descriptor of `White,`. A comma is legal
+ * inside a candidate URL but not at its end, and is encoded too, so no file name can end a
+ * candidate early. The file on disk keeps its name: a server decodes the path back to it.
+ *
+ * @param {string} outputPath - A variant's `outputPath`, as written to disk
+ * @returns {string}
+ */
+export function variantUrl(outputPath: string) {
+  return outputPath
+    .split("/")
+    .map((segment) => encodeURIComponent(segment))
+    .join("/");
+}

package/src/site/image-transform.ts

@@ -15,12 +15,12 @@ import { existsSync } from "node:fs";
 import { basename, extname, resolve } from "node:path";
 import {
   buildSrcset,
-  configHash,
   contentHash,
   getImageMetadata,
   processImage,
+  variantUrl,
 } from "./image-optimizer.ts";
-import { getCached, getImageCacheDir, setCached } from "./image-cache.ts";
+import { cacheKey, getCached, getImageCacheDir, setCached } from "./image-cache.ts";
 import { imgLoadingAttrs } from "./img-loading.ts";
 import { resolveAssetUrl } from "@jxsuite/schema/asset-paths";
 import { isNodeObject, isNonNullObject, isString } from "@jxsuite/schema/guards";
@@ -96,17 +96,31 @@ function buildCloudflareSrcset(
   const quality = config.quality.webp ?? 80;
   const separator = src.startsWith("/") ? "" : "/";
   const suffix = hash ? `?v=${hash}` : "";
+  const path = srcsetSafe(src);
   return config.widths
     .filter((w) => w <= originalWidth)
     .toSorted((a, b) => a - b)
     .map(
       (w) =>
         `/cdn-cgi/image/width=${w},quality=${quality},fit=scale-down,format=auto` +
-        `${separator}${src}${suffix} ${w}w`,
+        `${separator}${path}${suffix} ${w}w`,
     )
     .join(", ");
 }
 
+/**
+ * An authored `src` made safe to stand as a `srcset` candidate: whitespace and commas encoded,
+ * everything else as written. A `src` attribute tolerates a space, but a `srcset` splits on it.
+ * Only those characters are touched, because an author's `src` may already be percent-encoded and
+ * encoding it whole would encode its `%` a second time.
+ *
+ * @param {string} src
+ * @returns {string}
+ */
+function srcsetSafe(src: string) {
+  return src.replaceAll(/[\s,]/g, (char) => encodeURIComponent(char));
+}
+
 /**
  * @param {string} absoluteSrc
  * @param {string} src
@@ -122,7 +136,7 @@ async function resolveManifest(
   projectRoot: string,
   cache: CacheManifest,
 ) {
-  const key = `${contentHash(absoluteSrc)}:${configHash(config)}`;
+  const key = cacheKey(absoluteSrc, config);
   const cached = getCached(cache, key);
 
   if (cached) {
@@ -471,7 +485,7 @@ function fallbackVariant(variants: ImageVariant[], formats: readonly string[]):
       best = variant;
     }
   }
-  return best?.outputPath;
+  return best && variantUrl(best.outputPath);
 }
 
 /**

package/src/site/site-loader.ts

@@ -7,8 +7,9 @@
 
 import { existsSync, readFileSync } from "node:fs";
 import type { ImageConfig, JxDocumentValue, ProjectConfig } from "@jxsuite/schema/types";
-import { errorMessage, parseProjectConfig } from "@jxsuite/schema/parse";
-import { resolve } from "node:path";
+import { errorMessage } from "@jxsuite/schema/parse";
+import { parseProjectSource } from "@jxsuite/schema/project-file";
+import { basename, resolve } from "node:path";
 import { projectFilePath } from "@jxsuite/schema/project-file/node";
 
 /**
@@ -65,24 +66,24 @@ const DEFAULTS = {
 } satisfies Partial<ResolvedProjectConfig>;
 
 /**
- * Load and validate project.json from a project root.
+ * Load and validate the project file, `project.jxn` or `project.json`, from a project root.
  *
  * @param {string} projectRoot - Absolute path to the project directory
  * @returns {{ config: ProjectConfig; configPath: string; projectRoot: string }}
- * @throws {Error} If project.json is missing or invalid JSON
+ * @throws {Error} If there is no project file, there are two, or it does not read
  */
 export function loadProjectConfig(projectRoot: string) {
   const configPath = projectFilePath(projectRoot);
 
   if (!existsSync(configPath)) {
-    throw new Error(`project.json not found in ${projectRoot}`);
+    throw new Error(`No project.jxn or project.json in ${projectRoot}`);
   }
 
   let raw: ProjectConfig;
   try {
-    raw = parseProjectConfig(readFileSync(configPath, "utf8"), configPath);
+    raw = parseProjectSource(readFileSync(configPath, "utf8"), configPath);
   } catch (error) {
-    throw new Error(`Invalid project.json: ${errorMessage(error)}`, { cause: error });
+    throw new Error(`Invalid ${basename(configPath)}: ${errorMessage(error)}`, { cause: error });
   }
 
   // Deep merge with defaults. The `...raw` spread carries every author-declared key through

package/src/site/validate-command.ts

@@ -33,7 +33,6 @@ import type { JsonObject, JsonValue, JxElement } from "@jxsuite/schema/types";
 import { buildProjectExtensionRegistry } from "./format-host.ts";
 import { loadProjectConfig } from "./site-loader.ts";
 import { readBundledProjectSchemas } from "./schema-command.ts";
-import { PROJECT_FILE_NAME } from "@jxsuite/schema/project-file";
 
 /** Directories that hold Jx documents validated against the document schema. */
 const DOCUMENT_DIRS = ["components", "pages", "layouts"] as const;
@@ -174,11 +173,11 @@ export async function validateProjectTree(
     return { checked, issues, lint, valid: false };
   }
 
-  // 2. project.json against the generated entry schema.
+  // 2. The project file against the generated entry schema.
   const projectResult = await validateProjectFile(root);
   checked += 1;
   if (!projectResult.valid) {
-    issues.push({ errors: projectResult.errors ?? [], file: PROJECT_FILE_NAME });
+    issues.push({ errors: projectResult.errors ?? [], file: projectResult.file });
   }
 
   const { addFormats, Ajv } = await loadAjv();