@jay-framework/dev-server 0.24.6 → 0.25.0

package/dist/index.js

@@ -7,13 +7,13 @@ import { createRequire } from "module";
 import "@jay-framework/compiler-shared";
 import * as path from "node:path";
 import path__default from "node:path";
-import { parseJayFile, JAY_IMPORT_RESOLVER, injectHeadfullFSTemplates, discoverHeadlessInstances, assignCoordinatesToJayHtml, parseAction, generateServerElementFile, parseContract, slowRenderTransform } from "@jay-framework/compiler-jay-html";
+import { parseJayFile, JAY_IMPORT_RESOLVER, discoverHeadlessInstances, assignCoordinatesToJayHtml, parseAction, generateServerElementFile, parseContract, slowRenderTransform } from "@jay-framework/compiler-jay-html";
 import { getLogger, getDevLogger } from "@jay-framework/logger";
 import { createRequire as createRequire$1 } from "node:module";
 import * as fs from "node:fs";
 import fs__default$1 from "node:fs";
 import { scanRoutes, createRoute, routeToExpressRoute } from "@jay-framework/stack-route-scanner";
-import { actionRegistry, scanPlugins, serializeHeadTags, mergeHeadTags, discoverPluginsWithInit, sortPluginsByDependencies, executePluginServerInits, runInitCallbacks, runShutdownCallbacks, clearLifecycleCallbacks, clearServiceRegistry, clearClientInitData, runLoadParams, DevSlowlyChangingPhase, preparePluginClientInits, registerService, getServiceRegistry, parseCookies, renderFastChangingData, getClientInitData, slowRenderInstances, normalizeAndResolveInstanceProps } from "@jay-framework/stack-server-runtime";
+import { makePassthroughInstanceComponent, actionRegistry, scanPlugins, serializeHeadTags, mergeHeadTags, discoverPluginsWithInit, sortPluginsByDependencies, executePluginServerInits, runInitCallbacks, runShutdownCallbacks, clearLifecycleCallbacks, clearServiceRegistry, clearClientInitData, runLoadParams, DevSlowlyChangingPhase, preparePluginClientInits, registerService, getServiceRegistry, parseCookies, renderFastChangingData, getClientInitData, slowRenderInstances, normalizeInstancePropNames } from "@jay-framework/stack-server-runtime";
 import * as fs$1 from "node:fs/promises";
 import fs__default from "node:fs/promises";
 import jsBeautify from "js-beautify";
@@ -22,6 +22,7 @@ import path$1 from "path";
 import YAML from "yaml";
 import crypto, { randomUUID } from "node:crypto";
 import { isJayAction, isJayStreamAction, createJayService } from "@jay-framework/fullstack-component";
+import { parse } from "node-html-parser";
 import { pathToFileURL } from "node:url";
 import Busboy from "busboy";
 import crypto$1 from "crypto";
@@ -1667,7 +1668,14 @@ async function loadPageParts(vite, route, pagesBase, projectBase, jayRollupConfi
       let clientModuleImport;
       let isNpmPackage;
       if (headlessImport.structural) {
-        continue;
+        compDefinition = makePassthroughInstanceComponent(
+          (headlessImport.contract?.tags ?? []).map((t) => ({
+            name: t.tag,
+            phase: t.phase
+          }))
+        );
+        isNpmPackage = false;
+        clientModuleImport = "";
       } else {
         const modulePath = isLocalModule ? path__default.resolve(dirName, module) : require$3.resolve(module, { paths: require$3.resolve.paths(dirName) });
         compDefinition = (await vite.ssrLoadModule(modulePath))[name];
@@ -1708,11 +1716,7 @@ async function loadPageParts(vite, route, pagesBase, projectBase, jayRollupConfi
       contract: hi.contract,
       contractPath: hi.contractPath
     }));
-    const jayHtmlForDiscovery = injectHeadfullFSTemplates(
-      jayHtmlSource,
-      dirName,
-      JAY_IMPORT_RESOLVER
-    );
+    const jayHtmlForDiscovery = jayHtmlSource;
     let discoveryResult;
     if (headlessInstanceComponents.length > 0) {
       const firstDiscovery = discoverHeadlessInstances(jayHtmlForDiscovery);
@@ -1749,6 +1753,8 @@ async function loadPageParts(vite, route, pagesBase, projectBase, jayRollupConfi
 var __defProp22 = Object.defineProperty;
 var __defNormalProp22 = (obj, key, value) => key in obj ? __defProp22(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField22 = (obj, key, value) => __defNormalProp22(obj, key + "", value);
+const JAY_EXTENSION = ".jay-html";
+const JAY_CONTRACT_EXTENSION = ".jay-contract";
 class JayAtomicType {
   constructor(name) {
     __publicField22(this, "kind", 0);
@@ -2927,6 +2933,169 @@ async function discoverPluginActions(pluginPath, projectRoot, registry = actionR
   }
   return registeredActions;
 }
+function readTemplateMeta(jayHtmlPath) {
+  let content;
+  try {
+    content = fs.readFileSync(jayHtmlPath, "utf-8");
+  } catch {
+    return {};
+  }
+  const root = parse(content);
+  const ref = root.querySelector('script[type="application/jay-data"]')?.getAttribute("contract");
+  const contractRef = ref ? path.resolve(path.dirname(jayHtmlPath), ref) : void 0;
+  const rawTitle = root.querySelector("title")?.text?.trim();
+  const staticTitle = rawTitle ? rawTitle.replace(/\{[^}]*\}/g, "").trim() : "";
+  return { contractRef, title: staticTitle.length > 0 ? staticTitle : void 0 };
+}
+function listTemplatesForContractFile(contractFile) {
+  if (!contractFile) return [];
+  const dir = path.dirname(contractFile);
+  const target = path.resolve(contractFile);
+  const contractBasename = path.basename(contractFile, JAY_CONTRACT_EXTENSION);
+  let names;
+  try {
+    names = fs.readdirSync(dir);
+  } catch {
+    return [];
+  }
+  const variants = [];
+  for (const f of names) {
+    if (!f.endsWith(JAY_EXTENSION)) continue;
+    const jayHtmlPath = path.join(dir, f);
+    const meta = readTemplateMeta(jayHtmlPath);
+    if (meta.contractRef !== target) continue;
+    const stem = path.basename(f, JAY_EXTENSION);
+    variants.push({
+      path: jayHtmlPath,
+      variant: stem === contractBasename ? "" : stem,
+      ...meta.title && { title: meta.title }
+    });
+  }
+  return variants.sort((a, b) => a.variant.localeCompare(b.variant));
+}
+function readContractField(contractFile, field) {
+  try {
+    const parsed = YAML.parse(fs.readFileSync(contractFile, "utf-8"));
+    const value = parsed?.[field];
+    return typeof value === "string" ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function findContractFilesSync(dir) {
+  const out = [];
+  let entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch {
+    return out;
+  }
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) out.push(...findContractFilesSync(full));
+    else if (entry.name.endsWith(JAY_CONTRACT_EXTENSION)) out.push(full);
+  }
+  return out.sort();
+}
+function buildDesignSystemIndex(options) {
+  const { projectRoot, plugins, resolvePluginContractPath } = options;
+  const componentsBase = options.componentsBase ? path.resolve(projectRoot, options.componentsBase) : path.join(projectRoot, "src", "components");
+  const rel = (p) => "./" + path.relative(projectRoot, p).replace(/\\/g, "/");
+  const makeEntry = (contractFile, source, pluginName, nameOverride) => {
+    const name = nameOverride ?? readContractField(contractFile, "name") ?? path.basename(contractFile, JAY_CONTRACT_EXTENSION);
+    const description = readContractField(contractFile, "description");
+    const templates = listTemplatesForContractFile(contractFile).map((t) => ({
+      ...t,
+      path: rel(t.path)
+    }));
+    return {
+      name,
+      contractPath: rel(contractFile),
+      ...description && { description },
+      source,
+      ...pluginName && { plugin: pluginName },
+      templates
+    };
+  };
+  const components = [];
+  for (const contractFile of findContractFilesSync(componentsBase)) {
+    components.push(makeEntry(contractFile, "local", void 0));
+  }
+  for (const [, plugin] of plugins) {
+    const contracts = plugin.manifest.contracts;
+    if (!Array.isArray(contracts)) continue;
+    for (const contract of contracts) {
+      const spec = contract.contract;
+      if (!spec) continue;
+      const contractFile = resolvePluginContractPath(plugin, spec);
+      components.push(makeEntry(contractFile, "plugin", plugin.name, contract.name));
+    }
+  }
+  return { components };
+}
+function toKebabCase$1(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase().replace(/[\s_]+/g, "-").replace(/^-/, "");
+}
+function renderAddMenu(index) {
+  const lines = [];
+  lines.push("# Design-system elements you can add");
+  lines.push("");
+  lines.push(
+    "Generated by `jay-stack agent-kit`. Each component ships a contract and one or more"
+  );
+  lines.push(
+    "`.jay-html` templates you can flatten into a page as a `<jay:X>` region. Pick a variant,"
+  );
+  lines.push("paste its import + region, then run `jay-stack sync` to flatten the markup. See");
+  lines.push("`designer/design-system-guide.md`.");
+  lines.push("");
+  if (index.components.length === 0) {
+    lines.push("_No design-system components found._");
+    lines.push("");
+    return lines.join("\n");
+  }
+  for (const component of index.components) {
+    lines.push(
+      component.description ? `## ${component.name} — ${component.description}` : `## ${component.name}`
+    );
+    lines.push("");
+    if (component.templates.length === 0) {
+      lines.push(
+        "_No template yet (COMPONENT-NO-TEMPLATE) — this component can't be flattened until it ships a `.jay-html`._"
+      );
+      lines.push("");
+      continue;
+    }
+    lines.push("| Variant | Title | Template |");
+    lines.push("| --- | --- | --- |");
+    for (const template of component.templates) {
+      const variant = template.variant === "" ? "(default)" : template.variant;
+      lines.push(`| ${variant} | ${template.title ?? ""} | ${template.path} |`);
+    }
+    lines.push("");
+    const first = component.templates[0];
+    const regionTag = toKebabCase$1(component.name);
+    const contractAttr = component.source === "plugin" ? component.name : component.contractPath;
+    lines.push("```html");
+    lines.push("<script");
+    lines.push('  type="application/jay-headless"');
+    if (component.source === "plugin" && component.plugin) {
+      lines.push(`  plugin="${component.plugin}"`);
+    }
+    lines.push(`  contract="${contractAttr}"`);
+    lines.push(`  template="${first.path}"`);
+    lines.push("><\/script>");
+    lines.push("");
+    lines.push(
+      `<jay:${regionTag} ref="${regionTag}"><!-- flattened copy; edit freely --></jay:${regionTag}>`
+    );
+    lines.push("```");
+    lines.push("");
+    lines.push("Then run `jay-stack sync` to flatten it.");
+    lines.push("");
+  }
+  return lines.join("\n");
+}
 const require$1 = createRequire(import.meta.url);
 async function executeDynamicGenerator(plugin, config, projectRoot, services, verbose, viteServer) {
   const { pluginPath, name: pluginName, isLocal, packageName } = plugin;
@@ -3056,6 +3225,15 @@ function resolveActionFilePath(actionPath, packageName, pluginPath, isLocal, pro
 function toKebabCase(str) {
   return str.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
 }
+function readComponentsBase(projectRoot) {
+  try {
+    const parsed = YAML.parse(fs.readFileSync(path.join(projectRoot, ".jay"), "utf-8"));
+    const base = parsed?.devServer?.componentsBase;
+    if (typeof base === "string" && base.length > 0) return base;
+  } catch {
+  }
+  return "./src/components";
+}
 async function materializeContracts(options, services = /* @__PURE__ */ new Map()) {
   const {
     projectRoot,
@@ -3275,13 +3453,26 @@ async function materializeContracts(options, services = /* @__PURE__ */ new Map(
       ...data.commands?.length && { commands: data.commands }
     }))
   };
+  const designSystem = buildDesignSystemIndex({
+    projectRoot,
+    componentsBase: readComponentsBase(projectRoot),
+    plugins,
+    resolvePluginContractPath: (plugin, spec) => resolveStaticContractPath(plugin, spec, projectRoot)
+  });
+  pluginsIndex.designSystemIndex = "./design-system-index.yaml";
   fs.mkdirSync(outputDir, { recursive: true });
   const agentKitDir = path.dirname(outputDir);
   const pluginsIndexPath = path.join(agentKitDir, "plugins-index.yaml");
   fs.writeFileSync(pluginsIndexPath, YAML.stringify(pluginsIndex), "utf-8");
+  const designSystemIndexPath = path.join(agentKitDir, "design-system-index.yaml");
+  fs.writeFileSync(designSystemIndexPath, YAML.stringify(designSystem), "utf-8");
+  const addMenuPath = path.join(agentKitDir, "design-system.md");
+  fs.writeFileSync(addMenuPath, renderAddMenu(designSystem), "utf-8");
   if (verbose) {
     getLogger().info(`
 ✅ Plugins index written to: ${pluginsIndexPath}`);
+    getLogger().info(`✅ Design-system index written to: ${designSystemIndexPath}`);
+    getLogger().info(`✅ Design-system add-menu written to: ${addMenuPath}`);
   }
   return {
     pluginsIndex,
@@ -4812,8 +5003,7 @@ async function sendResponse(vite, res, url, jayHtmlPath, sourceJayHtmlPath, page
   let pageHtml;
   try {
     const jayHtmlDir = path__default.dirname(jayHtmlPath);
-    let jayHtmlContent = preLoadedContent ?? await fs__default.readFile(jayHtmlPath, "utf-8");
-    jayHtmlContent = injectHeadfullFSTemplates(jayHtmlContent, jayHtmlDir, JAY_IMPORT_RESOLVER);
+    const jayHtmlContent = preLoadedContent ?? await fs__default.readFile(jayHtmlPath, "utf-8");
     pageHtml = await generateSSRPageHtml(
       vite,
       jayHtmlContent,
@@ -4893,15 +5083,10 @@ async function handleFrozenRequest(vite, route, options, freezeStore, slowRender
     const jayHtmlFilename = path__default.basename(jayHtmlPath);
     const jayHtmlDir = path__default.dirname(jayHtmlPath);
     const sourceDir = path__default.dirname(route.jayHtmlPath);
-    const fullJayHtml = injectHeadfullFSTemplates(
-      jayHtmlContent,
-      sourceDir,
-      JAY_IMPORT_RESOLVER
-    );
     const injectDevHmr = format === "page";
     const html = await generateFrozenPageHtml(
       vite,
-      fullJayHtml,
+      jayHtmlContent,
       jayHtmlFilename,
       jayHtmlDir,
       entry.viewState,
@@ -4931,13 +5116,8 @@ async function handleFrozenRequest(vite, route, options, freezeStore, slowRender
   timing?.end();
 }
 async function preRenderJayHtml(route, slowViewState, headlessContracts, headlessInstanceComponents, partKeys = [], pageParams = {}, pageProps = { language: "en", url: "" }) {
-  const jayHtmlContent = await fs__default.readFile(route.jayHtmlPath, "utf-8");
+  const jayHtmlWithTemplates = await fs__default.readFile(route.jayHtmlPath, "utf-8");
   const sourceDir = path__default.dirname(route.jayHtmlPath);
-  const jayHtmlWithTemplates = injectHeadfullFSTemplates(
-    jayHtmlContent,
-    sourceDir,
-    JAY_IMPORT_RESOLVER
-  );
   let contract;
   const contractPath = route.jayHtmlPath.replace(".jay-html", ".jay-contract");
   try {
@@ -4994,16 +5174,15 @@ async function preRenderJayHtml(route, slowViewState, headlessContracts, headles
         instancePhaseData = {
           discovered: finalDiscovery.instances.filter((i) => componentByContractName.has(i.contractName)).map((i) => {
             const comp = componentByContractName.get(i.contractName);
-            const normalizedProps = normalizeAndResolveInstanceProps(
+            const rawProps = normalizeInstancePropNames(
               Object.fromEntries(
                 Object.entries(i.props).map(([k, v]) => [k, String(v)])
               ),
-              comp.contract?.props,
-              { pageViewState: slowViewState, pageParams, pageProps }
+              comp.contract?.props
             );
             return {
               contractName: i.contractName,
-              props: normalizedProps,
+              props: rawProps,
               coordinate: i.coordinate
             };
           }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/dev-server",
-  "version": "0.24.6",
+  "version": "0.25.0",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -23,24 +23,24 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@jay-framework/compiler-jay-stack": "^0.24.6",
-    "@jay-framework/compiler-shared": "^0.24.6",
-    "@jay-framework/component": "^0.24.6",
-    "@jay-framework/fullstack-component": "^0.24.6",
-    "@jay-framework/logger": "^0.24.6",
-    "@jay-framework/runtime": "^0.24.6",
-    "@jay-framework/stack-client-runtime": "^0.24.6",
-    "@jay-framework/stack-route-scanner": "^0.24.6",
-    "@jay-framework/stack-server-build": "^0.24.6",
-    "@jay-framework/stack-server-runtime": "^0.24.6",
-    "@jay-framework/view-state-merge": "^0.24.6",
+    "@jay-framework/compiler-jay-stack": "^0.25.0",
+    "@jay-framework/compiler-shared": "^0.25.0",
+    "@jay-framework/component": "^0.25.0",
+    "@jay-framework/fullstack-component": "^0.25.0",
+    "@jay-framework/logger": "^0.25.0",
+    "@jay-framework/runtime": "^0.25.0",
+    "@jay-framework/stack-client-runtime": "^0.25.0",
+    "@jay-framework/stack-route-scanner": "^0.25.0",
+    "@jay-framework/stack-server-build": "^0.25.0",
+    "@jay-framework/stack-server-runtime": "^0.25.0",
+    "@jay-framework/view-state-merge": "^0.25.0",
     "busboy": "^1.6.0",
     "vite": "^5.0.11"
   },
   "devDependencies": {
-    "@jay-framework/dev-environment": "^0.24.6",
-    "@jay-framework/jay-cli": "^0.24.6",
-    "@jay-framework/stack-client-runtime": "^0.24.6",
+    "@jay-framework/dev-environment": "^0.25.0",
+    "@jay-framework/jay-cli": "^0.25.0",
+    "@jay-framework/stack-client-runtime": "^0.25.0",
     "@playwright/test": "^1.58.2",
     "@types/busboy": "^1.5.4",
     "@types/express": "^5.0.2",