@jxsuite/compiler 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -46,9 +46,9 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^16.0.0",
-    "@jxsuite/create": "^1.3.6",
-    "@jxsuite/runtime": "^2.0.5",
-    "@jxsuite/schema": "^1.8.1",
+    "@jxsuite/create": "^1.3.7",
+    "@jxsuite/runtime": "^2.1.0",
+    "@jxsuite/schema": "^1.9.0",
     "@vue/reactivity": "3.5.41",
     "esbuild": "^0.28.2",
     "lit-html": "^3.3.3",
@@ -56,8 +56,8 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.11.6",
-    "@jxsuite/connector": "^0.5.4",
-    "@jxsuite/parser": "^1.5.5",
+    "@jxsuite/connector": "^0.5.5",
+    "@jxsuite/parser": "^1.5.6",
     "@types/mdast": "^4.0.4"
   }
 }

package/src/shared.ts

@@ -12,6 +12,7 @@ import {
   RESERVED_KEYS,
   camelToKebab,
   pureSchemeOf,
+  resolveAtQuery,
   schemeSelectors,
   toCSSText,
 } from "@jxsuite/runtime";
@@ -779,6 +780,37 @@ function readsRuntimeOnlyState(str: string, scope: Record<string, unknown>) {
   return false;
 }
 
+/**
+ * Whether the whole string is exactly ONE `${…}` — the interpolation that opens at index 0 also
+ * closes at the final character.
+ *
+ * A greedy `/^\$\{(.+)\}$/` also matched `"${a} / ${b}"`, spliced the interior into `return (a} /
+ * ${b)`, and the SyntaxError became a silent null: the node rendered empty, and a `$head` entry
+ * shipped its own template text. A brace-depth scan is exact where a tightened regex is not —
+ * `"${`${a}-x`}"` is still one expression, and must keep returning a raw value.
+ *
+ * @param {string} str
+ * @returns {boolean}
+ */
+export function isSingleExpression(str: string): boolean {
+  if (!str.startsWith("${") || !str.endsWith("}")) {
+    return false;
+  }
+  let depth = 0;
+  for (let i = 1; i < str.length; i += 1) {
+    const c = str[i];
+    if (c === "{") {
+      depth += 1;
+    } else if (c === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        return i === str.length - 1;
+      }
+    }
+  }
+  return false;
+}
+
 /**
  * @param {string} str
  * @param {Record<string, unknown>} scope
@@ -799,8 +831,7 @@ export function evaluateStaticTemplate(str: string, scope: Record<string, unknow
   const args = ["state", "$map", "$site", "$page"] as const;
   const values = [scope, scope?.$map, scope?.$site, scope?.$page];
   try {
-    const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
-    const body = singleExprMatch ? `return (${singleExprMatch[1]})` : `return \`${str}\``;
+    const body = isSingleExpression(str) ? `return (${str.slice(2, -1)})` : `return \`${str}\``;
     const fn = new Function(...args, body) as (...a: unknown[]) => unknown;
     return fn(...values);
   } catch {
@@ -1013,11 +1044,7 @@ function conditionalRuleEmitter(
   mediaQueries: Record<string, string>,
   rules: string[],
 ): (selector: string, props: string) => void {
-  const query = atKey.startsWith("@--")
-    ? (mediaQueries[atKey.slice(1)] ?? atKey.slice(1))
-    : atKey.startsWith("@(")
-      ? atKey.slice(1)
-      : null;
+  const query = resolveAtQuery(atKey, mediaQueries);
   const atRule = query === null ? atKey : `@media ${query}`;
   const scheme = query === null ? null : pureSchemeOf(query);
   return (selector: string, props: string) => {
@@ -1513,6 +1540,40 @@ export function resolveStaticTagName(
   return expression.cases[String(key)] ?? expression.default;
 }
 
+/**
+ * The content of one node: `textContent`, else `innerHTML`, else rendered `children`.
+ *
+ * Shared with `preRenderComponentHtml`, which returns a component's innerHTML and so cannot call
+ * `renderStaticNode` (that would wrap the result in the host tag). It used to look at `children`
+ * alone and return "" for anything else, so a component whose content is root-level `textContent` —
+ * the shape spec.md §17.2 recommends when every child is a bare string — prerendered to nothing.
+ *
+ * @param {JxElement | JxMutableNode} node
+ * @param {Record<string, unknown> | null} scope
+ * @param {string | null} slotContent
+ * @returns {string}
+ */
+function renderInner(
+  node: JxElement | JxMutableNode,
+  scope: Record<string, unknown> | null,
+  slotContent: string | null,
+): string {
+  if (node.textContent !== undefined) {
+    const val = resolveStaticValue(node.textContent, scope);
+    return val != null ? escapeHtml(String(val)) : "";
+  }
+  if (node.innerHTML) {
+    const val = resolveStaticValue(node.innerHTML, scope);
+    return val != null ? String(val) : (node.innerHTML as string);
+  }
+  if (Array.isArray(node.children)) {
+    return node.children
+      .map((c: JxElement | JxMutableNode | string) => renderStaticNode(c, scope, slotContent))
+      .join("\n");
+  }
+  return "";
+}
+
 /**
  * Recursively render a Jx node tree to static HTML for pre-rendering.
  *
@@ -1587,20 +1648,7 @@ export function renderStaticNode(
     return `<${tag}${attrs}>`;
   }
 
-  let inner = "";
-  if (node.textContent !== undefined) {
-    const val = resolveStaticValue(node.textContent, scope);
-    inner = val != null ? escapeHtml(String(val)) : "";
-  } else if (node.innerHTML) {
-    const val = resolveStaticValue(node.innerHTML, scope);
-    inner = val != null ? String(val) : (node.innerHTML as string);
-  } else if (Array.isArray(node.children)) {
-    inner = node.children
-      .map((c: JxElement | JxMutableNode | string) => renderStaticNode(c, scope, slotContent))
-      .join("\n");
-  }
-
-  return `<${tag}${attrs}>${inner}</${tag}>`;
+  return `<${tag}${attrs}>${renderInner(node, scope, slotContent)}</${tag}>`;
 }
 
 /**
@@ -1636,12 +1684,7 @@ export function preRenderComponentHtml(
     }
   }
   const scope = buildInitialScope(stateDefs, null);
-  if (!Array.isArray(doc.children)) {
-    return "";
-  }
-  return doc.children
-    .map((c: JxElement | JxMutableNode | string) => renderStaticNode(c, scope, slotContent))
-    .join("\n");
+  return renderInner(doc, scope, slotContent);
 }
 
 /**

package/src/site/client-runtime.ts

@@ -15,7 +15,7 @@
  * @docs framework/build
  */
 
-import { existsSync, mkdirSync, writeFileSync } from "node:fs";
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, join, relative, resolve } from "node:path";
 import type { BundleResolver } from "./bundler.ts";
@@ -84,7 +84,15 @@ export interface ClientRuntime {
  * @param {string} [resolveDir] - Directory bare specifiers resolve from; defaults to this package
  * @returns {ClientRuntime}
  */
-export function resolveClientRuntime(resolveDir: string = import.meta.dir): ClientRuntime {
+/**
+ * This package's own directory, resolved under both runtimes. `import.meta.dir` is Bun-only and is
+ * `undefined` under Node — and `bin/jx.js` carries a Node shebang, so every `bunx jx build` took
+ * that path, `join(undefined, …)` threw, the bare catch read it as "cannot resolve", and the import
+ * map fell back to the esm.sh CDN. `import.meta.dirname` is defined on both.
+ */
+const PACKAGE_DIR = import.meta.dirname;
+
+export function resolveClientRuntime(resolveDir: string = PACKAGE_DIR): ClientRuntime {
   const imports: Record<string, string> = {};
   const warnings: string[] = [];
   const assetPaths: string[] = [];
@@ -122,7 +130,7 @@ export function resolveClientRuntime(resolveDir: string = import.meta.dir): Clie
 export async function writeClientRuntime(
   runtime: ClientRuntime,
   outDir: string,
-  resolveDir: string = import.meta.dir,
+  resolveDir: string = PACKAGE_DIR,
 ): Promise<{ written: number; errors: string[] }> {
   const errors: string[] = [];
   let written = 0;
@@ -212,7 +220,7 @@ const MAX_SUBPATH_PASSES = 10;
  */
 export async function writeRuntimeSubpaths(
   outDir: string,
-  resolveDir: string = import.meta.dir,
+  resolveDir: string = PACKAGE_DIR,
 ): Promise<{ written: number; errors: string[] }> {
   const errors: string[] = [];
   const done = new Set<string>();
@@ -235,7 +243,7 @@ export async function writeRuntimeSubpaths(
 
   /** `from "lit-html/directives/class-map.js"` — the import forms a bundler emits. */
   const importedSpecifiers = async (file: string): Promise<string[]> => {
-    const text = await Bun.file(file).text();
+    const text = readFileSync(file, "utf8");
     return [...text.matchAll(/(?:from|import)\s*["']([^"']+)["']/g)].map((m) => m[1] as string);
   };
 
@@ -243,9 +251,10 @@ export async function writeRuntimeSubpaths(
     let discovered = 0;
     let files: string[] = [];
     try {
-      files = await Array.fromAsync(
-        new Bun.Glob("**/*.js").scan({ absolute: true, cwd: assetsDir }),
-      );
+      files = readdirSync(assetsDir, { recursive: true })
+        .map(String)
+        .filter((entry) => entry.endsWith(".js"))
+        .map((entry) => join(assetsDir, entry));
     } catch {
       return finish(outDir, mirrors, errors, written);
     }

package/src/site/site-build.ts

@@ -18,6 +18,7 @@ import {
   statSync,
   writeFileSync,
 } from "node:fs";
+import { createHash } from "node:crypto";
 import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import { isMappedArray, isRef } from "@jxsuite/schema/guards";
 import { isNpmSpecifier, npmAssetPath, sidecarAssetPath } from "@jxsuite/schema/asset-paths";
@@ -63,6 +64,7 @@ import {
   colorSchemePrePaintScript,
   evaluateStaticTemplate,
   isComponentFullyStatic,
+  isSingleExpression,
   isTemplateString,
   preRenderComponentHtml,
   pureSchemeOf,
@@ -180,7 +182,11 @@ export async function buildSite(
   const elementBundles = new Map<string, string[]>();
   const registerElementBundle = (specifiers: string[]): string => {
     const sorted = specifiers.toSorted();
-    const key = Bun.hash(sorted.join("\u0000")).toString(36);
+    /*
+     * `node:crypto` rather than `Bun.hash`: the jx bin runs under Node, where the Bun global does
+     * not exist, and this line is reached by any page registering npm `$elements`.
+     */
+    const key = createHash("sha1").update(sorted.join("\u0000")).digest("hex").slice(0, 12);
     const assetPath = `/assets/elements-${key}.js`;
     elementBundles.set(assetPath, sorted);
     return assetPath;
@@ -1739,15 +1745,8 @@ function evaluateMapTemplate(str: string, scope: Record<string, unknown>) {
   try {
     const item = (scope.$map as Record<string, unknown>)?.item;
     const index = (scope.$map as Record<string, unknown>)?.index;
-    const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
-    if (singleExprMatch) {
-      const fn = new Function(
-        "state",
-        "$map",
-        "item",
-        "index",
-        `return (${singleExprMatch[1]})`,
-      ) as (
+    if (isSingleExpression(str)) {
+      const fn = new Function("state", "$map", "item", "index", `return (${str.slice(2, -1)})`) as (
         state: Record<string, unknown>,
         $map: unknown,
         item: unknown,
@@ -2038,6 +2037,23 @@ function expandComponents(
       }
     }
 
+    /*
+     * A non-static instance discards its prerendered markup on upgrade and re-renders, so the
+     * props have to survive as data or the element comes back with its state defaults — correct
+     * content painting first and then being replaced by the wrong content. compiler.md §5.2 gives
+     * connectedCallback three prop sources and this is the first of them; the compiler read it but
+     * never wrote it, and lifting `props.*` into $props above removed the other channel too.
+     *
+     * JSON rather than re-emitted `props.*` attributes because those are strings by spec: a number
+     * or an array would arrive stringified, and a key that is not lowercase would be dropped by
+     * attribute-name folding.
+     */
+    if (!isStatic && node.$props && Object.keys(node.$props).length > 0) {
+      node.attributes = {
+        ...node.attributes,
+        "data-jx-props": JSON.stringify(node.$props),
+      };
+    }
     delete node.$props;
 
     if (isStatic) {

package/src/targets/compile-element.ts

@@ -593,7 +593,15 @@ export function emitElementModule(
   // Declarations emitted inside `template()`, above the `return` — inside it, so they are rebuilt
   // Per render and read the same `s` the template does.
   const hoistScope = createHoistScope();
-  const templateBody = emitLitChildren(doc.children, doc.style, "      ", false, false, hoistScope);
+  /*
+   * A component whose content is root-level `textContent` has no `children`, and emitLitChildren
+   * returns "" for that — so the element rendered nothing, matching a prerender that dropped the
+   * same shape. spec.md §17.2 recommends `textContent` whenever every child is a bare string.
+   */
+  const templateBody =
+    !Array.isArray(doc.children) && doc.textContent !== undefined
+      ? `      ${toLitTextContent(doc.textContent)}`
+      : emitLitChildren(doc.children, doc.style, "      ", false, false, hoistScope);
 
   lines.push(
     // Template method