@ollie-shop/cli 1.4.1 → 1.6.0

package/src/utils/esbuild.ts

@@ -5,14 +5,24 @@ import path from "node:path";
 import * as esbuild from "esbuild";
 import { glob } from "glob";
 import { createComponentBundle } from "./bundle.js";
+import {
+  type OllieConfig,
+  listStages,
+  loadConfig,
+  upsertComponentEntry,
+} from "./config.js";
 
 export interface ComponentInfo {
-  /** Component ID from meta.json (UUID) or generated temporary ID (studio-*) */
+  /** Component ID from the ollie config (UUID) or generated temporary ID (studio-*) */
   id: string;
   /** Folder name */
   name: string;
-  /** Target slot for new components (from meta.json) */
+  /** Target slot (from the ollie config) */
   slot?: string;
+  /** True when the folder belongs to another stage's config, not the active one */
+  otherStage?: boolean;
+  /** True when the folder isn't linked to a component id (synthetic studio-* id) */
+  unlinked?: boolean;
   entryPoint: string;
   outfile: string;
 }
@@ -33,7 +43,7 @@ interface ComponentMeta {
 }
 
 /**
- * Reads the meta.json file for a component.
+ * Reads the meta.json file for a component (legacy, per-folder source).
  * Supports stage-specific meta files: meta.{stage}.json
  */
 async function readComponentMeta(
@@ -66,35 +76,118 @@ export interface DiscoverComponentsOptions {
   stage?: string;
 }
 
+/** Maps resolved component dirs -> {id, slot} for a stage's config map. */
+async function componentsByDir(
+  cwd: string,
+  stageLabel: string,
+): Promise<Map<string, { id: string; slot?: string }>> {
+  const byDir = new Map<string, { id: string; slot?: string }>();
+  let config: OllieConfig | null = null;
+  try {
+    config = await loadConfig({ cwd, stage: stageLabel });
+  } catch {
+    return byDir;
+  }
+  for (const [id, entry] of Object.entries(config?.components ?? {})) {
+    const dir = path.resolve(cwd, entry.path);
+    if (!byDir.has(dir)) byDir.set(dir, { id, slot: entry.slot });
+  }
+  return byDir;
+}
+
 /**
- * Discovers components in the components directory.
- * Each component should have an index.tsx file and a meta.json with its ID.
+ * Discovers components, config-first:
+ * 1. The active stage's `components` map — the source of truth; entries may
+ *    point inside or outside components/.
+ * 2. Folders under components/ that belong to ANOTHER stage's config are
+ *    surfaced with their real id and flagged `otherStage` (hidden by default
+ *    in Studio, shown via "show all").
+ * 3. Remaining folders fall back to legacy per-folder meta.json; folders with
+ *    neither get a temporary studio-* id (unlinked).
  */
 export async function discoverComponents(
   options: DiscoverComponentsOptions = {},
 ): Promise<ComponentInfo[]> {
   const { cwd = process.cwd(), stage } = options;
-  const componentsDir = path.join(cwd, "components");
+  const activeStage = stage ?? "prod";
+  const buildDir = path.join(cwd, "node_modules/.ollie", "build");
+  const components: ComponentInfo[] = [];
+  const mappedDirs = new Set<string>();
+
+  const activeByDir = await componentsByDir(cwd, activeStage);
 
+  // Component dirs claimed by other stages (so we don't mistake them for new)
+  const otherStageByDir = new Map<string, { id: string; slot?: string }>();
+  try {
+    for (const { stage: label } of await listStages(cwd)) {
+      if (label === activeStage) continue;
+      for (const [dir, entry] of await componentsByDir(cwd, label)) {
+        if (!activeByDir.has(dir) && !otherStageByDir.has(dir)) {
+          otherStageByDir.set(dir, entry);
+        }
+      }
+    }
+  } catch {
+    // No other stages
+  }
+
+  // 1. Active stage's config map (source of truth)
+  for (const [componentDir, entry] of activeByDir) {
+    const entryPoint = path.join(componentDir, "index.tsx");
+    try {
+      await fs.access(entryPoint);
+    } catch {
+      console.warn(
+        `${entry.id}: ${componentDir}/index.tsx not found - skipping`,
+      );
+      continue;
+    }
+    const name = path.basename(componentDir);
+    mappedDirs.add(componentDir);
+    components.push({
+      id: entry.id,
+      name,
+      slot: entry.slot,
+      entryPoint,
+      outfile: path.join(buildDir, name, "index.js"),
+    });
+  }
+
+  // 2. Folders under components/ not in the active map
+  const componentsDir = path.join(cwd, "components");
   try {
     await fs.access(componentsDir);
   } catch {
-    return [];
+    return components;
   }
 
   const entries = await glob("*/index.tsx", { cwd: componentsDir });
-  const components: ComponentInfo[] = [];
-
   for (const entry of entries) {
     const name = path.dirname(entry);
-    const componentDir = path.join(componentsDir, name);
-    const meta = await readComponentMeta(componentDir, stage);
+    const componentDir = path.resolve(componentsDir, name);
+    if (mappedDirs.has(componentDir)) continue;
+
+    const entryPoint = path.join(componentsDir, entry);
+    const outfile = path.join(buildDir, name, "index.js");
+
+    // Belongs to another stage's config: surface with its real id, flagged
+    const other = otherStageByDir.get(componentDir);
+    if (other) {
+      components.push({
+        id: other.id,
+        name,
+        slot: other.slot,
+        otherStage: true,
+        entryPoint,
+        outfile,
+      });
+      continue;
+    }
 
-    // Components without id (or without meta.json) get a temporary studio-* ID
+    // Legacy per-folder meta.json fallback
+    const meta = await readComponentMeta(componentDir, stage);
     const id = meta?.id ?? `studio-${name}`;
     const isUnlinked = !meta?.id;
-
-    // Unlinked components without a slot can still be built, just not placed in checkout
     if (isUnlinked && !meta?.slot) {
       console.warn(
         `${name}: no slot defined - component will be built but not placed in checkout`,
@@ -105,8 +198,9 @@ export async function discoverComponents(
       id,
       name,
       slot: meta?.slot,
-      entryPoint: path.join(componentsDir, entry),
-      outfile: path.join(cwd, "node_modules/.ollie", "build", name, "index.js"),
+      ...(isUnlinked ? { unlinked: true } : {}),
+      entryPoint,
+      outfile,
     });
   }
 
@@ -119,10 +213,111 @@ export interface BuildResult {
   buildTime: number;
 }
 
+export interface BrowserLogEntry {
+  level: string;
+  component?: string;
+  message: string;
+}
+
+function browserLogBridge(endpoint: string): string {
+  const target = JSON.stringify(endpoint);
+  return `(() => {
+  if (typeof window === "undefined" || window.__ollieLogBridge) return;
+  window.__ollieLogBridge = true;
+
+  const endpoint = ${target};
+  const SLOT_FRAME = /ollie-slot\\/([^.\\s:]+)\\.js/;
+  const LEVELS = ["log", "info", "warn", "error", "debug"];
+  const MAX_MESSAGE = 2000;
+  const MAX_BATCH = 20;
+  const FLUSH_MS = 200;
+
+  let queue = [];
+  let flushTimer = null;
+
+  function format(value) {
+    if (typeof value === "string") return value;
+    try {
+      return JSON.stringify(value);
+    } catch (_) {
+      return String(value);
+    }
+  }
+
+  function slotName(stack) {
+    const match = (stack || "").match(SLOT_FRAME);
+    return match ? match[1] : null;
+  }
+
+  function flush() {
+    if (flushTimer) {
+      clearTimeout(flushTimer);
+      flushTimer = null;
+    }
+    if (queue.length === 0) return;
+    const batch = queue;
+    queue = [];
+    try {
+      fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        keepalive: true,
+        headers: { "Content-Type": "text/plain" },
+        body: JSON.stringify({ batch: batch }),
+      }).catch(function () {});
+    } catch (_) {}
+  }
+
+  function forward(level, component, args) {
+    try {
+      let message = args.map(format).join(" ");
+      if (message.length > MAX_MESSAGE) {
+        message = message.slice(0, MAX_MESSAGE) + " …(truncated)";
+      }
+      queue.push({ level: level, component: component, message: message });
+      if (queue.length >= MAX_BATCH) {
+        flush();
+      } else if (!flushTimer) {
+        flushTimer = setTimeout(flush, FLUSH_MS);
+      }
+    } catch (_) {}
+  }
+
+  for (const level of LEVELS) {
+    const original = console[level]
+      ? console[level].bind(console)
+      : function () {};
+    console[level] = function () {
+      const args = Array.prototype.slice.call(arguments);
+      original.apply(null, args);
+      const component = slotName(new Error().stack);
+      if (component) forward(level, component, args);
+    };
+  }
+
+  window.addEventListener("error", function (event) {
+    const component = slotName(event.error && event.error.stack);
+    if (component) forward("error", component, [event.message]);
+  });
+
+  window.addEventListener("unhandledrejection", function (event) {
+    const reason = event.reason;
+    const component = slotName(reason && reason.stack);
+    if (component) {
+      const message = reason && reason.message ? reason.message : String(reason);
+      forward("error", component, [message]);
+    }
+  });
+
+  window.addEventListener("pagehide", flush);
+})();`;
+}
+
 export interface CreateBuildContextOptions {
   cwd?: string;
   stage?: string;
   onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+  browserLogsEndpoint?: string;
 }
 
 /**
@@ -133,7 +328,12 @@ export async function createBuildContext(
   components: ComponentInfo[],
   options: CreateBuildContextOptions = {},
 ): Promise<esbuild.BuildContext> {
-  const { cwd = process.cwd(), stage, onBuildEnd } = options;
+  const {
+    cwd = process.cwd(),
+    stage,
+    onBuildEnd,
+    browserLogsEndpoint,
+  } = options;
   const outdir = path.join(cwd, "node_modules/.ollie", "build");
 
   // Ensure output directory exists
@@ -209,6 +409,9 @@ export async function createBuildContext(
     logLevel: "silent", // We handle logging ourselves
     jsx: "automatic",
     plugins: [manifestPlugin],
+    ...(browserLogsEndpoint
+      ? { banner: { js: browserLogBridge(browserLogsEndpoint) } }
+      : {}),
   });
 
   return ctx;
@@ -233,6 +436,7 @@ export async function startDevServer(
     stage?: string;
     onRequest?: (args: esbuild.ServeOnRequestArgs) => void;
     onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+    onBrowserLogs?: (entries: BrowserLogEntry[]) => void;
   } = {},
 ): Promise<
   ServeResult & { rebuild: () => Promise<void>; stop: () => Promise<void> }
@@ -244,25 +448,37 @@ export async function startDevServer(
     stage,
     onRequest,
     onBuildEnd,
+    onBrowserLogs,
   } = options;
 
   const servedir = path.join(cwd, "node_modules/.ollie", "build");
   const componentsDir = path.join(cwd, "components");
   const internalPort = port + 1;
+  const browserLogsEndpoint = onBrowserLogs
+    ? `http://${host}:${port}/__log`
+    : undefined;
+
+  // The active stage is mutable: the admin can switch it at runtime via POST /stage.
+  let activeStage = stage ?? "prod";
 
   let ctx: esbuild.BuildContext | null = null;
   let entryNames = new Set<string>();
 
   async function buildAndServe(components: ComponentInfo[]): Promise<void> {
     entryNames = new Set(components.map((c) => c.name));
-    ctx = await createBuildContext(components, { cwd, stage, onBuildEnd });
+    ctx = await createBuildContext(components, {
+      cwd,
+      stage: activeStage,
+      onBuildEnd,
+      browserLogsEndpoint,
+    });
     await ctx.rebuild();
     await ctx.watch();
     await ctx.serve({ port: internalPort, host, servedir, onRequest });
   }
 
   async function recreate(): Promise<void> {
-    const components = await discoverComponents({ cwd, stage });
+    const components = await discoverComponents({ cwd, stage: activeStage });
     const oldCtx = ctx;
     ctx = null;
     if (oldCtx) await oldCtx.dispose();
@@ -270,7 +486,7 @@ export async function startDevServer(
     notifyComponentsChanged(components);
   }
 
-  await buildAndServe(await discoverComponents({ cwd, stage }));
+  await buildAndServe(await discoverComponents({ cwd, stage: activeStage }));
 
   async function currentComponentNames(): Promise<Set<string>> {
     try {
@@ -459,6 +675,62 @@ export async function startDevServer(
       return;
     }
 
+    // List available stages (from local ollie*.json) and the active one
+    if (url.pathname === "/stages" && req.method === "GET") {
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+      res.setHeader("Content-Type", "application/json");
+      const stages = await listStages(cwd);
+      res.end(JSON.stringify({ active: activeStage, stages }));
+      return;
+    }
+
+    // Switch the active stage at runtime: re-discover + rebuild for it
+    if (url.pathname === "/stage" && req.method === "POST") {
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk.toString();
+      });
+      req.on("end", async () => {
+        try {
+          const { stage: next } = JSON.parse(body) as { stage?: unknown };
+          if (typeof next !== "string" || !next) {
+            res.statusCode = 400;
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ error: "Missing 'stage' in body" }));
+            return;
+          }
+          activeStage = next;
+          await recreate();
+          let versionId: string | undefined;
+          try {
+            versionId = (await loadConfig({ cwd, stage: activeStage }))
+              ?.versionId;
+          } catch {
+            // Stage config may be missing/invalid
+          }
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({ success: true, stage: activeStage, versionId }),
+          );
+        } catch (err) {
+          res.statusCode = 400;
+          res.setHeader("Content-Type", "application/json");
+          res.end(
+            JSON.stringify({
+              error: err instanceof Error ? err.message : "Invalid JSON body",
+            }),
+          );
+        }
+      });
+      return;
+    }
+
     // Handle POST /meta?component=ComponentName to update meta.json
     if (url.pathname === "/meta" && req.method === "POST") {
       const componentName = url.searchParams.get("component");
@@ -487,6 +759,40 @@ export async function startDevServer(
       req.on("end", async () => {
         try {
           const updates = JSON.parse(body) as Record<string, unknown>;
+
+          // A project opts into the config model by having a `components` map.
+          // Otherwise we keep writing the legacy per-folder meta.json.
+          let cfg: OllieConfig | null = null;
+          try {
+            cfg = await loadConfig({ cwd, stage: activeStage });
+          } catch {
+            // Treat as legacy if the config can't be loaded
+          }
+
+          if (cfg?.components !== undefined) {
+            const id = typeof updates.id === "string" ? updates.id : undefined;
+            if (!id) {
+              res.statusCode = 400;
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ error: "Missing 'id' in body" }));
+              return;
+            }
+            const slot =
+              typeof updates.slot === "string" ? updates.slot : undefined;
+            const entry = await upsertComponentEntry(
+              id,
+              { defaultPath: `components/${componentName}`, slot },
+              { cwd, stage: activeStage },
+            );
+            // Rebuild so the manifest reflects the new mapping/slot
+            await ctx?.rebuild();
+            res.setHeader("Content-Type", "application/json");
+            res.end(
+              JSON.stringify({ success: true, component: { id, ...entry } }),
+            );
+            return;
+          }
+
           const metaPath = path.join(
             cwd,
             "components",
@@ -540,6 +846,50 @@ export async function startDevServer(
       return;
     }
 
+    if (url.pathname === "/__log" && req.method === "POST") {
+      if (!onBrowserLogs) {
+        res.statusCode = 404;
+        res.end();
+        return;
+      }
+
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Private-Network", "true");
+
+      const MAX_LOG_BODY = 64 * 1024;
+      let body = "";
+      let aborted = false;
+      req.on("data", (chunk) => {
+        if (aborted) return;
+        body += chunk.toString();
+        if (body.length > MAX_LOG_BODY) {
+          aborted = true;
+          res.statusCode = 413;
+          res.end();
+          req.destroy();
+        }
+      });
+      req.on("end", () => {
+        if (aborted) return;
+        try {
+          const parsed: unknown = JSON.parse(body);
+          const batch = (parsed as { batch?: unknown }).batch;
+          const candidates: unknown[] = Array.isArray(batch) ? batch : [parsed];
+          const entries = candidates.filter(
+            (entry): entry is BrowserLogEntry =>
+              typeof (entry as BrowserLogEntry)?.message === "string",
+          );
+          if (entries.length > 0) onBrowserLogs(entries);
+        } catch {
+          // Ignore malformed log payloads
+        }
+        res.statusCode = 204;
+        res.end();
+      });
+      return;
+    }
+
     // Handle CORS preflight
     if (req.method === "OPTIONS") {
       res.setHeader("Access-Control-Allow-Origin", "*");
@@ -641,6 +991,10 @@ export interface ManifestEntry {
   css?: string;
   /** Target slot for components */
   slot?: string;
+  /** True when the component belongs to another stage's config */
+  otherStage?: boolean;
+  /** True when the component isn't linked to a component id (studio-*) */
+  unlinked?: boolean;
 }
 
 /**
@@ -690,6 +1044,8 @@ export async function writeManifest(
         name: c.name,
         js: `/${c.name}/index.js`,
         slot: c.slot,
+        ...(c.otherStage ? { otherStage: true } : {}),
+        ...(c.unlinked ? { unlinked: true } : {}),
       };
 
       // Check if CSS exists