@jxsuite/compiler 0.21.4 → 0.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.21.4",
+  "version": "0.22.1",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
   "repository": {
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.3.5",
-    "@jxsuite/parser": "^0.21.4",
-    "@jxsuite/runtime": "^0.21.4",
+    "@jxsuite/parser": "^0.22.1",
+    "@jxsuite/runtime": "^0.22.1",
     "remark-gfm": "^4.0.1",
     "remark-stringify": "^11.0.0",
     "sharp": "^0.34.5",

package/src/shared.js

@@ -518,11 +518,11 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
       for (const [key, val] of Object.entries(obj)) {
         if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
         if (key.startsWith("@")) {
-          const query = key.startsWith("@--")
-            ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-            : key.slice(1);
+          const atRule = key.startsWith("@--")
+            ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+            : key;
           const mProps = toCSSText(val);
-          if (mProps) rules.push(`@media ${query} { ${selector} { ${mProps} } }`);
+          if (mProps) rules.push(`${atRule} { ${selector} { ${mProps} } }`);
           for (const [sel, sub] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
             if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
             if (sel.startsWith("@")) continue;
@@ -532,7 +532,7 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
                 ? `${selector}${sel}`
                 : `${selector} ${sel}`;
             const subProps = toCSSText(sub);
-            if (subProps) rules.push(`@media ${query} { ${resolved} { ${subProps} } }`);
+            if (subProps) rules.push(`${atRule} { ${resolved} { ${subProps} } }`);
           }
           continue;
         }
@@ -558,10 +558,12 @@ export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
         emitProjectRules(key, val);
       } else if (key.startsWith("@")) {
         // @media block at top level
-        const query = key.startsWith("@--")
-          ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-          : key.slice(1);
-        rules.push(`@media ${query} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
+        const atRule = key.startsWith("@--")
+          ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+          : key.startsWith("@(")
+            ? `@media ${key.slice(1)}`
+            : key;
+        rules.push(`${atRule} { body { ${toCSSText(/** @type {object} */ (val))} } }`);
       }
     }
     // Collect CSS custom properties into :root {}
@@ -610,11 +612,13 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
   for (const [key, val] of Object.entries(obj)) {
     if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
     if (key.startsWith("@")) {
-      const query = key.startsWith("@--")
-        ? (mediaQueries[key.slice(1)] ?? key.slice(1))
-        : key.slice(1);
+      const atRule = key.startsWith("@--")
+        ? `@media ${mediaQueries[key.slice(1)] ?? key.slice(1)}`
+        : key.startsWith("@(")
+          ? `@media ${key.slice(1)}`
+          : key;
       const mProps = toCSSText(val);
-      if (mProps) rules.push(`@media ${query} { ${selector} { ${mProps} } }`);
+      if (mProps) rules.push(`${atRule} { ${selector} { ${mProps} } }`);
       for (const [sel, sub] of Object.entries(/** @type {Record<string, unknown>} */ (val))) {
         if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
         if (sel.startsWith("@")) continue;
@@ -624,7 +628,7 @@ function emitNestedElement(selector, obj, rules, mediaQueries) {
             ? `${selector}${sel}`
             : `${selector} ${sel}`;
         const subProps = toCSSText(sub);
-        if (subProps) rules.push(`@media ${query} { ${resolved} { ${subProps} } }`);
+        if (subProps) rules.push(`${atRule} { ${resolved} { ${subProps} } }`);
       }
       continue;
     }
@@ -688,10 +692,13 @@ export function collectStyles(
     for (const [prop, val] of Object.entries(def.style)) {
       if (val === null || typeof val !== "object" || Array.isArray(val)) continue;
       if (prop.startsWith("@")) {
-        const query = prop.startsWith("@--")
-          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
-          : prop.slice(1);
-        rules.push(`@media ${query} { ${selector} { ${toCSSText(val)} } }`);
+        const atRule = prop.startsWith("@--")
+          ? `@media ${mediaQueries[prop.slice(1)] ?? prop.slice(1)}`
+          : prop.startsWith("@(")
+            ? `@media ${prop.slice(1)}`
+            : prop;
+        const atBaseProps = toCSSText(val);
+        if (atBaseProps) rules.push(`${atRule} { ${selector} { ${atBaseProps} } }`);
         for (const [sel, nestedRules] of Object.entries(
           /** @type {Record<string, unknown>} */ (val),
         )) {
@@ -703,7 +710,7 @@ export function collectStyles(
             : sel.startsWith(":") || sel.startsWith(".") || sel.startsWith("[")
               ? `${selector}${sel}`
               : `${selector} ${sel}`;
-          rules.push(`@media ${query} { ${resolved} { ${toCSSText(nestedRules)} } }`);
+          rules.push(`${atRule} { ${resolved} { ${toCSSText(nestedRules)} } }`);
         }
       } else {
         const resolved = prop.startsWith("&")
@@ -1038,10 +1045,12 @@ export function buildComponentCSS(tagName, styleDef, doc = null, mediaQueries =
 
     for (const [prop, val] of Object.entries(styleDef)) {
       if (prop.startsWith("@")) {
-        const query = prop.startsWith("@--")
-          ? (mediaQueries[prop.slice(1)] ?? prop.slice(1))
-          : prop.slice(1);
-        rules.push(`@media ${query} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
+        const atRule = prop.startsWith("@--")
+          ? `@media ${mediaQueries[prop.slice(1)] ?? prop.slice(1)}`
+          : prop.startsWith("@(")
+            ? `@media ${prop.slice(1)}`
+            : prop;
+        rules.push(`${atRule} { ${tagName} { ${toCSSText(/** @type {object} */ (val))} } }`);
       } else if (
         prop.startsWith(":") ||
         prop.startsWith(".") ||

package/src/site/content-loader.js

@@ -381,67 +381,9 @@ function validateEntries(entries, schema, contentTypeName) {
   }
 }
 
-// ─── Content Type Querying ───────────────────────────────────────────────────
+// ─── Content Type Querying (re-exported from @jxsuite/parser/content) ────────
 
-/**
- * Query a loaded content type with filter, sort, and limit. Implements the ContentCollection
- * $prototype resolution.
- *
- * @param {ContentLoaderEntry[]} entries - Full content type entries
- * @param {{
- *   filter?: Record<string, unknown>;
- *   sort?: { field: string; order?: string };
- *   limit?: number;
- * }} [query]
- *   - Query options
- * @returns {ContentLoaderEntry[]} Filtered, sorted, limited entries
- */
-export function queryContentType(entries, query = {}) {
-  let result = [...entries];
-
-  // Filter
-  if (query.filter && typeof query.filter === "object") {
-    result = result.filter((entry) => {
-      for (const [key, expected] of Object.entries(
-        /** @type {Record<string, unknown>} */ (query.filter),
-      )) {
-        const actual = entry.data[key];
-        if (actual !== expected) return false;
-      }
-      return true;
-    });
-  }
-
-  // Sort
-  if (query.sort) {
-    const { field, order = "asc" } = query.sort;
-    result.sort((a, b) => {
-      const aVal = /** @type {string | number} */ (a.data[field] ?? "");
-      const bVal = /** @type {string | number} */ (b.data[field] ?? "");
-      if (aVal < bVal) return order === "asc" ? -1 : 1;
-      if (aVal > bVal) return order === "asc" ? 1 : -1;
-      return 0;
-    });
-  }
-
-  // Limit
-  if (query.limit && query.limit > 0) {
-    result = result.slice(0, query.limit);
-  }
-
-  return result;
-}
-
-/**
- * Find a single entry by ID in a content type. Implements the ContentEntry $prototype resolution.
- *
- * @param {ContentLoaderEntry[]} entries - Full content type entries
- * @param {string} id - Entry ID to find
- * @returns {ContentLoaderEntry | null} The matching entry or null
- */
-export function findEntry(entries, id) {
-  return entries.find((e) => e.id === id) ?? null;
-}
+export { queryContentType, findEntry } from "@jxsuite/parser/content";
 
 // ─── Content Type Reference Resolution ──────────────────────────────────────
 

package/src/site/context-injection.js

@@ -12,7 +12,6 @@
  * title $page.params — dynamic route parameters (if any)
  */
 
-import { queryContentType, findEntry } from "./content-loader.js";
 import { resolve, dirname, relative } from "node:path";
 
 /**
@@ -48,11 +47,6 @@ export function injectContext(
     params: route._pathParams ?? {},
   };
 
-  // Resolve ContentCollection and ContentEntry $prototype entries
-  if (contentTypes.size > 0) {
-    resolveContentPrototypes(doc.state, contentTypes, route._pathParams ?? {});
-  }
-
   // Merge project-level state into page state (page wins on conflicts)
   if (projectConfig.state) {
     for (const [key, value] of Object.entries(projectConfig.state)) {
@@ -110,49 +104,3 @@ export function injectContext(
 
   return doc;
 }
-
-/**
- * Resolve ContentCollection and ContentEntry $prototype state entries.
- *
- * Replaces state entries like: { "$prototype": "ContentCollection", "contentType": "blog", ... }
- * with the actual resolved content type data.
- *
- * @param {Record<string, unknown>} state - Page state (mutated)
- * @param {Map<string, ContentLoaderEntry[]>} contentTypes - Loaded content types
- * @param {Record<string, string>} params - Route parameters for $ref resolution
- */
-function resolveContentPrototypes(state, contentTypes, params) {
-  for (const [key, value] of Object.entries(state)) {
-    if (!value || typeof value !== "object" || !(/** @type {JxMutableNode} */ (value).$prototype))
-      continue;
-    const v = /** @type {JxPrototypeDef} */ (value);
-
-    if (v.$prototype === "ContentCollection") {
-      const entries = contentTypes.get(/** @type {string} */ (v.contentType));
-      if (!entries) {
-        console.warn(`ContentCollection: content type "${v.contentType}" not found`);
-        state[key] = [];
-        continue;
-      }
-      state[key] = queryContentType(entries, {
-        filter: v.filter,
-        sort: v.sort,
-        limit: v.limit,
-      });
-    } else if (v.$prototype === "ContentEntry") {
-      const entries = contentTypes.get(/** @type {string} */ (v.contentType));
-      if (!entries) {
-        console.warn(`ContentEntry: content type "${v.contentType}" not found`);
-        state[key] = null;
-        continue;
-      }
-      // Resolve the ID — may reference $params
-      let id = v.id;
-      if (id && typeof id === "object" && id.$ref?.startsWith("#/$params/")) {
-        const paramName = id.$ref.replace("#/$params/", "");
-        id = params[paramName];
-      }
-      state[key] = findEntry(entries, /** @type {string} */ (id));
-    }
-  }
-}

package/src/site/head-merger.js

@@ -94,7 +94,9 @@ function headEntryKey(entry) {
 
   // <style> — unique per content hash
   if (tag === "style") {
-    const content = Array.isArray(entry.children) ? entry.children.join("") : "";
+    const content = Array.isArray(entry.children)
+      ? entry.children.join("")
+      : (entry.textContent ?? "");
     return `style:${simpleHash(content)}`;
   }
 
@@ -149,7 +151,9 @@ function renderHeadEntry(entry) {
   if (VOID.has(tag)) return open;
 
   // Elements with content
-  const content = Array.isArray(entry.children) ? entry.children.join("") : "";
+  const content = Array.isArray(entry.children)
+    ? entry.children.join("")
+    : (entry.textContent ?? "");
   return `${open}${content}</${tag}>`;
 }
 

package/src/site/prototype-resolver.js

@@ -23,24 +23,7 @@ import { createRequire } from "node:module";
  * Prototype names handled elsewhere (builtins + legacy content system). These are skipped by the
  * generic resolver.
  */
-const SKIP_PROTOTYPES = new Set([
-  "Function",
-  "LocalStorage",
-  "SessionStorage",
-  "Array",
-  "ContentCollection",
-  "ContentEntry",
-]);
-
-/**
- * Built-in $prototype → .class.json mappings. These resolve automatically without requiring an
- * explicit `imports` entry in project.json. Project-level imports take precedence on collision.
- */
-/** @type {Record<string, string>} */
-const BUILTIN_CLASS_MAPPINGS = {
-  MarkdownFile: "@jxsuite/parser/MarkdownFile.class.json",
-  MarkdownCollection: "@jxsuite/parser/MarkdownCollection.class.json",
-};
+const SKIP_PROTOTYPES = new Set(["Function", "LocalStorage", "SessionStorage", "Array"]);
 
 /**
  * Keys reserved by the Jx prototype system — stripped before passing config to the external class
@@ -66,10 +49,12 @@ const RESERVED_KEYS = new Set([
  * result
  *
  * @param {JxMutableNode | JxDocument} doc - The page document (mutated in place)
- * @param {{ sourcePath?: string }} route - Route info (sourcePath = absolute path to page .json)
+ * @param {{ sourcePath?: string; _pathParams?: Record<string, string> }} route - Route info
  * @param {string} projectRoot - Absolute path to the project root
+ * @param {{ config?: Record<string, unknown>; contentTypes?: Map<string, unknown[]> }} [projectContext] -
+ *   Project-level context injected into all classes
  */
-export async function resolvePrototypes(doc, route, projectRoot) {
+export async function resolvePrototypes(doc, route, projectRoot, projectContext = {}) {
   const imports = doc.imports ?? {};
   const state = doc.state;
   if (!state) return;
@@ -83,13 +68,13 @@ export async function resolvePrototypes(doc, route, projectRoot) {
 
     // Look up in imports if no $src already set
     if (!def.$src) {
-      const mapped = imports[def.$prototype] ?? BUILTIN_CLASS_MAPPINGS[def.$prototype];
+      const mapped = imports[def.$prototype];
       if (!mapped) continue;
       def.$src = mapped;
     }
 
     try {
-      const resolved = await resolveClassPrototype(def, route, projectRoot);
+      const resolved = await resolveClassPrototype(def, route, projectRoot, state, projectContext);
       // Preserve timing metadata on the resolved value so compilePage() can strip it
       if (def.timing && resolved && typeof resolved === "object" && !Array.isArray(resolved)) {
         resolved.timing = def.timing;
@@ -108,11 +93,13 @@ export async function resolvePrototypes(doc, route, projectRoot) {
  * Resolve a single $prototype entry via its .class.json.
  *
  * @param {Record<string, any>} def - The state entry definition
- * @param {{ sourcePath?: string }} route
+ * @param {{ sourcePath?: string; _pathParams?: Record<string, string> }} route
  * @param {string} projectRoot
+ * @param {Record<string, unknown>} state - The full page state object
+ * @param {{ config?: Record<string, unknown>; contentTypes?: Map<string, unknown[]> }} projectContext
  * @returns {Promise<any>} The resolved value
  */
-async function resolveClassPrototype(def, route, projectRoot) {
+async function resolveClassPrototype(def, route, projectRoot, state, projectContext) {
   const src = def.$src;
 
   // 1. Resolve .class.json path — handles both npm specifiers and relative paths
@@ -162,6 +149,14 @@ async function resolveClassPrototype(def, route, projectRoot) {
     config.basePath = dirname(route.sourcePath);
   }
 
+  // Inject universal context — available to all classes
+  config._project = {
+    config: projectContext.config ?? null,
+    contentTypes: projectContext.contentTypes ?? null,
+    root: projectRoot,
+  };
+  config._document = { route, state };
+
   // 7. Instantiate and resolve
   const instance = new ExportedClass(config);
   if (typeof instance.resolve === "function") {

package/src/site/site-build.js

@@ -134,7 +134,7 @@ export async function buildSite(projectRoot, options = {}) {
     for (const file of componentFiles) {
       try {
         const componentPath = resolve(componentsDir, file);
-        const result = await compileElement(componentPath);
+        const result = await compileElement(componentPath, { $media: projectConfig.$media });
         for (const f of result.files) {
           const outName = f.path.includes("/")
             ? /** @type {string} */ (f.path.split("/").pop())
@@ -405,11 +405,14 @@ async function compilePage(
   delete layoutDoc._pageHead;
   delete layoutDoc._pageTitle;
 
-  // Inject $site and $page context, resolve ContentCollection/ContentEntry
+  // Inject $site and $page context
   injectContext(layoutDoc, projectConfig, route, contentTypes, projectRoot);
 
   // Resolve generic $prototype entries via .class.json imports
-  await resolvePrototypes(layoutDoc, route, projectRoot);
+  await resolvePrototypes(layoutDoc, route, projectRoot, {
+    config: projectConfig,
+    contentTypes,
+  });
 
   // Build scope from resolved state so template strings in title/$head can be evaluated
   const scope = buildInitialScope(layoutDoc.state ?? {});

package/src/targets/compile-element.js

@@ -16,7 +16,7 @@ import { escapeHtml, tagNameToClassName, isSchemaOnly, collectStyles } from "../
  * @returns {Promise<{ files: { path: string; content: string; tagName: string }[] }>}
  */
 export async function compileElement(sourcePath, opts = {}) {
-  const { resolveElementPath } = /** @type {JxMutableNode} */ (opts);
+  const { resolveElementPath, $media: optsMedia } = /** @type {JxMutableNode} */ (opts);
   /** @type {{ path: string; content: string; tagName: string }[]} */
   const files = [];
   /** @type {Set<string>} */
@@ -82,6 +82,9 @@ export async function compileElement(sourcePath, opts = {}) {
     }
 
     const className = tagNameToClassName(tagName);
+    if (optsMedia) {
+      doc.$media = { ...optsMedia, ...doc.$media };
+    }
     const jsContent = emitElementModule(doc, className, elementImports);
     const outputPath = filePath ? filePath.replace(/\.json$/, ".js") : `${tagName}.js`;
     files.push({ path: outputPath, content: jsContent, tagName });