@jxsuite/compiler 0.1.0 → 0.5.1

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@jxsuite/compiler",
-  "version": "0.1.0",
+  "version": "0.5.1",
   "description": "Jx static HTML compiler, island detector, and site builder",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jxsuite/jx.git",
+    "directory": "packages/compiler"
+  },
   "bin": {
     "jx": "./src/cli.js"
   },
@@ -13,24 +18,30 @@
   "type": "module",
   "exports": {
     ".": "./src/compiler.js",
-    "./site": "./src/site/site-build.js",
-    "./site-loader": "./src/site/site-loader.js",
-    "./pages-discovery": "./src/site/pages-discovery.js",
-    "./layout-resolver": "./src/site/layout-resolver.js",
-    "./head-merger": "./src/site/head-merger.js",
+    "./content-loader": "./src/site/content-loader.js",
     "./context-injection": "./src/site/context-injection.js",
-    "./content-loader": "./src/site/content-loader.js"
+    "./head-merger": "./src/site/head-merger.js",
+    "./layout-resolver": "./src/site/layout-resolver.js",
+    "./pages-discovery": "./src/site/pages-discovery.js",
+    "./site": "./src/site/site-build.js",
+    "./site-loader": "./src/site/site-loader.js"
+  },
+  "publishConfig": {
+    "provenance": true
   },
   "scripts": {
-    "test": "bun test",
     "build": "bun build src/compiler.js --outdir=dist --format=esm --minify",
     "build:site": "bun src/cli.js build",
+    "test": "bun test",
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
     "@apidevtools/json-schema-ref-parser": "^15.3.5",
-    "@jxsuite/parser": "0.0.1",
-    "@jxsuite/runtime": "0.0.1"
+    "@jxsuite/parser": "workspace:^",
+    "@jxsuite/runtime": "workspace:^",
+    "remark-gfm": "^4.0.1",
+    "remark-stringify": "^11.0.0",
+    "unified": "^11.0.5"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.9.0"

package/src/compiler.js

@@ -54,10 +54,21 @@ export async function compile(sourcePath, opts = {}) {
     title = "Jx App",
     reactivitySrc = DEFAULT_REACTIVITY_SRC,
     litHtmlSrc = DEFAULT_LIT_HTML_SRC,
+    projectStyle = null,
   } = opts;
 
-  const raw =
-    typeof sourcePath === "string" ? JSON.parse(readFileSync(sourcePath, "utf8")) : sourcePath;
+  let raw;
+  if (typeof sourcePath === "string") {
+    const source = readFileSync(sourcePath, "utf8");
+    if (sourcePath.endsWith(".md")) {
+      const { transpileJxMarkdown } = await import("@jxsuite/parser/transpile");
+      raw = transpileJxMarkdown(source);
+    } else {
+      raw = JSON.parse(source);
+    }
+  } else {
+    raw = sourcePath;
+  }
 
   // Route 0: .class.json schema-defined class → JS class module
   if (raw.$prototype === "Class") {
@@ -72,7 +83,7 @@ export async function compile(sourcePath, opts = {}) {
 
   // Route 1: Fully static → plain HTML/CSS
   if (!isDynamic(raw)) {
-    return compileStaticPage(raw, { title, reactivitySrc, litHtmlSrc });
+    return compileStaticPage(raw, { title, reactivitySrc, litHtmlSrc, projectStyle });
   }
 
   // Route 2: Custom element tagName (contains hyphen) → lit-html web component
@@ -109,7 +120,7 @@ export async function compile(sourcePath, opts = {}) {
   }
 
   // Route 3: Dynamic with standard tagName → pre-rendered HTML + reactive bindings
-  return compileClient(raw, { title, reactivitySrc, litHtmlSrc });
+  return compileClient(raw, { title, reactivitySrc, litHtmlSrc, projectStyle });
 }
 
 // ─── CLI ──────────────────────────────────────────────────────────────────────

package/src/shared.js

@@ -325,8 +325,19 @@ export function resolveRefValue(refValue, scope) {
  * @returns {any}
  */
 export function evaluateStaticTemplate(str, scope) {
-  const fn = new Function("state", "$map", `return \`${str}\``);
-  return fn(scope, scope?.$map);
+  try {
+    // When the entire string is a single ${...} expression, evaluate it directly
+    // to preserve the return type (boolean, number, etc.) instead of stringifying.
+    const singleExprMatch = str.match(/^\$\{(.+)\}$/s);
+    if (singleExprMatch) {
+      const fn = new Function("state", "$map", `return (${singleExprMatch[1]})`);
+      return fn(scope, scope?.$map);
+    }
+    const fn = new Function("state", "$map", `return \`${str}\``);
+    return fn(scope, scope?.$map);
+  } catch {
+    return null;
+  }
 }
 
 /**
@@ -435,6 +446,10 @@ export function buildAttrs(def, scope) {
     }
   }
 
+  if (def.$props && typeof def.$props === "object") {
+    out += ` data-jx-props="${escapeHtml(JSON.stringify(def.$props))}"`;
+  }
+
   return out;
 }
 
@@ -476,10 +491,54 @@ export function buildInner(def, raw, context, childCompiler) {
  * @param {Record<string, any>} [mediaQueries]
  * @returns {string}
  */
-export function compileStyles(doc, mediaQueries = {}) {
+export function compileStyles(doc, mediaQueries = {}, projectStyle = null) {
   /** @type {string[]} */
   const rules = [];
-  collectStyles(doc, rules, mediaQueries, "");
+
+  // Emit project-level (site-wide) styles — CSS custom properties go on :root,
+  // everything else on body.  Project-level style is implicitly :root, so a
+  // flat object like { "--bg": "#000", "margin": "0" } is the expected format.
+  if (projectStyle && typeof projectStyle === "object") {
+    for (const [key, val] of Object.entries(projectStyle)) {
+      if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[")) {
+        // Standalone selector (e.g. `.dark`)
+        rules.push(`${key} { ${toCSSText(/** @type {any} */ (val))} }`);
+      } else if (key.startsWith("@")) {
+        // @media block
+        const query = key.startsWith("@--")
+          ? (mediaQueries[key.slice(1)] ?? key.slice(1))
+          : key.slice(1);
+        rules.push(`@media ${query} { body { ${toCSSText(/** @type {any} */ (val))} } }`);
+      }
+    }
+    // Collect CSS custom properties into :root {}
+    /** @type {Record<string, any>} */
+    const rootProps = {};
+    // Collect direct CSS properties into body {}
+    /** @type {Record<string, any>} */
+    const bodyProps = {};
+    for (const [key, val] of Object.entries(projectStyle)) {
+      if (key.startsWith(":") || key.startsWith(".") || key.startsWith("[") || key.startsWith("@"))
+        continue;
+      if (val !== null && typeof val === "object" && !Array.isArray(val)) continue;
+      if (key.startsWith("--")) {
+        rootProps[key] = val;
+      } else {
+        bodyProps[key] = val;
+      }
+    }
+    const rootCSS = toCSSText(/** @type {any} */ (rootProps));
+    if (rootCSS) {
+      rules.push(`:root { ${rootCSS} }`);
+    }
+    const bodyCSS = toCSSText(/** @type {any} */ (bodyProps));
+    if (bodyCSS) {
+      rules.push(`body { ${bodyCSS} }`);
+    }
+  }
+
+  const counter = { n: 0 };
+  collectStyles(doc, rules, mediaQueries, "", counter);
   if (rules.length === 0) return "";
   return `<style>\n${rules.join("\n")}\n</style>`;
 }
@@ -489,10 +548,28 @@ export function compileStyles(doc, mediaQueries = {}) {
  * @param {string[]} rules
  * @param {Record<string, any>} mediaQueries
  * @param {string} [_parentSel]
+ * @param {{ n: number }} [counter]
  */
-export function collectStyles(def, rules, mediaQueries, _parentSel = "") {
+export function collectStyles(def, rules, mediaQueries, _parentSel = "", counter = { n: 0 }) {
   if (!def || typeof def !== "object") return;
 
+  if (def.style) {
+    // Check if this element needs CSS rules (media queries, pseudo-classes, etc.)
+    const needsCSS = Object.keys(def.style).some(
+      (k) =>
+        k.startsWith("@") ||
+        k.startsWith(":") ||
+        k.startsWith(".") ||
+        k.startsWith("&") ||
+        k.startsWith("["),
+    );
+
+    // Auto-scope elements that need CSS rules but lack a unique selector
+    if (needsCSS && !def.id && !def.className) {
+      def.className = `jx-${counter.n++}`;
+    }
+  }
+
   const selector = def.id
     ? `#${def.id}`
     : def.className
@@ -567,7 +644,7 @@ export function collectStyles(def, rules, mediaQueries, _parentSel = "") {
 
   if (Array.isArray(def.children)) {
     def.children.forEach((/** @type {any} */ c) => {
-      collectStyles(c, rules, mediaQueries, selector);
+      collectStyles(c, rules, mediaQueries, selector, counter);
     });
   }
 }
@@ -688,3 +765,171 @@ function _walkServerEntries(def, entries) {
     def.children.forEach((/** @type {any} */ c) => _walkServerEntries(c, entries));
   }
 }
+
+// ─── Component pre-rendering ─────────────────────────────────────────────────
+
+/** @type {Set<string>} */
+const SELF_CLOSING = new Set(["input", "br", "hr", "img", "meta", "link", "area", "col"]);
+
+/**
+ * Recursively render a Jx node tree to static HTML for pre-rendering.
+ *
+ * @param {any} node
+ * @param {any} scope
+ * @param {string | null} [slotContent] - HTML to substitute for `<slot>` elements
+ * @returns {string}
+ */
+export function renderStaticNode(node, scope, slotContent = null) {
+  if (typeof node === "string") return escapeHtml(node);
+  if (typeof node === "number" || typeof node === "boolean") return escapeHtml(String(node));
+  if (Array.isArray(node))
+    return node.map((/** @type {any} */ c) => renderStaticNode(c, scope, slotContent)).join("\n");
+  if (!node || typeof node !== "object") return "";
+
+  // Skip mapped arrays — can't pre-render dynamic lists
+  if (node.$prototype === "Array") return "";
+
+  const tag = node.tagName ?? "div";
+
+  // Replace <slot> with provided slot content
+  if (tag === "slot" && slotContent != null) return slotContent;
+
+  const attrs = buildAttrs(node, scope);
+
+  if (SELF_CLOSING.has(tag)) 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 ? val : node.innerHTML;
+  } else if (Array.isArray(node.children)) {
+    inner = node.children
+      .map((/** @type {any} */ c) => renderStaticNode(c, scope, slotContent))
+      .join("\n");
+  }
+
+  return `<${tag}${attrs}>${inner}</${tag}>`;
+}
+
+/**
+ * Pre-render a component definition to static HTML for its inner content.
+ *
+ * @param {any} doc - Component JSON definition
+ * @param {Record<string, any> | null} [propsOverride] - Instance-specific prop values to merge into
+ *   state
+ * @param {string | null} [slotContent] - HTML to substitute for `<slot>` elements
+ * @returns {string} The pre-rendered innerHTML
+ */
+export function preRenderComponentHtml(doc, propsOverride = null, slotContent = null) {
+  let stateDefs = doc.state ?? {};
+  if (propsOverride) {
+    stateDefs = { ...stateDefs };
+    for (const [key, value] of Object.entries(propsOverride)) {
+      if (key in stateDefs) {
+        const existing = stateDefs[key];
+        // If the existing definition is an expanded signal with "default", override the default
+        if (
+          existing &&
+          typeof existing === "object" &&
+          !Array.isArray(existing) &&
+          "default" in existing
+        ) {
+          stateDefs[key] = { ...existing, default: value };
+        } else {
+          stateDefs[key] = value;
+        }
+      } else {
+        stateDefs[key] = value;
+      }
+    }
+  }
+  const scope = buildInitialScope(stateDefs, null);
+  if (!Array.isArray(doc.children)) return "";
+  return doc.children
+    .map((/** @type {any} */ c) => renderStaticNode(c, scope, slotContent))
+    .join("\n");
+}
+
+/**
+ * Check if a component definition is fully static (no runtime behavior needed).
+ *
+ * Returns true when: no event handlers, no $prototype entries (Functions, Request, Storage), no
+ * $ref values. Conservative — returns false when uncertain.
+ *
+ * @param {any} doc - Component JSON definition
+ * @returns {boolean}
+ */
+export function isComponentFullyStatic(doc) {
+  return _isStaticNode(doc);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function _isStaticNode(node) {
+  if (!node || typeof node !== "object") return true;
+  if (Array.isArray(node)) return node.every(_isStaticNode);
+
+  // Check for $prototype (Functions, Request, Storage, etc.)
+  if (node.$prototype) return false;
+  // Check for $ref
+  if (node.$ref) return false;
+
+  // Check state entries
+  if (node.state) {
+    for (const def of Object.values(node.state)) {
+      if (!def || typeof def !== "object") continue;
+      const d = /** @type {any} */ (def);
+      if (d.$prototype) return false;
+      if (d.$ref) return false;
+    }
+  }
+
+  // Check for event handlers
+  for (const key of Object.keys(node)) {
+    if (key.startsWith("on") && key !== "observedAttributes") return false;
+  }
+
+  // Recurse into children
+  if (Array.isArray(node.children)) {
+    if (!node.children.every(_isStaticNode)) return false;
+  } else if (node.children && typeof node.children === "object") {
+    // children descriptor object ($prototype: "Array", etc.)
+    if (node.children.$prototype) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Generate a CSS rule block for a component's root-level styles. Uses the tag name as the selector.
+ * Skips pseudo-selectors, media queries, nested rules, and template strings (runtime-only).
+ *
+ * @param {string} tagName - The custom element tag name (used as CSS selector)
+ * @param {any} styleDef - The component's style object
+ * @returns {string} CSS text, or empty string if no styles
+ */
+export function buildComponentCSS(tagName, styleDef) {
+  if (!styleDef || typeof styleDef !== "object") return "";
+  /** @type {string[]} */
+  const decls = [];
+  for (const [prop, value] of Object.entries(styleDef)) {
+    if (
+      prop.startsWith(":") ||
+      prop.startsWith(".") ||
+      prop.startsWith("&") ||
+      prop.startsWith("[") ||
+      prop.startsWith("@")
+    )
+      continue;
+    if (value === null || typeof value === "object") continue;
+    if (typeof value === "string" && isTemplateString(value)) continue;
+    decls.push(`  ${camelToKebab(prop)}: ${value};`);
+  }
+  if (decls.length === 0) return "";
+  return `${tagName} {\n${decls.join("\n")}\n}\n`;
+}

package/src/site/content-loader.js

@@ -97,14 +97,14 @@ function parseCSV(csv) {
 let _mdModule = null;
 
 /**
- * Lazily import @jxplatform/parser for Markdown support. This avoids hard dependency — only loads
- * when MD collections exist.
+ * Lazily import @jxsuite/parser for Markdown support. This avoids hard dependency — only loads when
+ * MD collections exist.
  *
  * @returns {Promise<any>}
  */
 async function getMarkdownModule() {
   if (!_mdModule) {
-    _mdModule = await import("@jxplatform/parser");
+    _mdModule = await import("@jxsuite/parser");
   }
   return _mdModule;
 }

package/src/site/pages-discovery.js

@@ -66,8 +66,9 @@ function walkDir(dir, pagesRoot, routes) {
       continue;
     }
 
-    // Only process .json files
-    if (extname(entry.name) !== ".json") continue;
+    // Only process .json and .md files
+    const ext = extname(entry.name);
+    if (ext !== ".json" && ext !== ".md") continue;
 
     // Skip underscore-prefixed files (local components, not routes)
     if (entry.name.startsWith("_")) continue;
@@ -86,8 +87,8 @@ function walkDir(dir, pagesRoot, routes) {
  * @returns {Route}
  */
 function fileToRoute(relativePath, absolutePath) {
-  // Remove .json extension
-  let urlPath = relativePath.replace(/\.json$/, "");
+  // Remove .json or .md extension
+  let urlPath = relativePath.replace(/\.(json|md)$/, "");
 
   // Normalize path separators
   urlPath = urlPath.split("\\").join("/");
@@ -124,13 +125,24 @@ function fileToRoute(relativePath, absolutePath) {
     },
   );
 
-  // Peek at the page JSON to extract $layout if present
+  // Peek at the page to extract $layout if present
   /** @type {string | null} */
   let $layout = null;
   try {
-    const raw = JSON.parse(readFileSync(absolutePath, "utf8"));
-    if (typeof raw.$layout === "string") {
-      $layout = raw.$layout;
+    const source = readFileSync(absolutePath, "utf8");
+    if (absolutePath.endsWith(".md")) {
+      // Parse YAML frontmatter for $layout
+      const fmMatch = source.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+      if (fmMatch) {
+        // Quick regex extraction — avoids full YAML dependency
+        const layoutMatch = fmMatch[1].match(/^\$layout:\s*(.+)/m);
+        if (layoutMatch) $layout = layoutMatch[1].trim().replace(/^['"]|['"]$/g, "");
+      }
+    } else {
+      const raw = JSON.parse(source);
+      if (typeof raw.$layout === "string") {
+        $layout = raw.$layout;
+      }
     }
   } catch {
     // Skip unreadable files — will error during compilation