@ollie-shop/cli 0.3.3 → 1.0.0

package/src/utils/esbuild.ts

@@ -0,0 +1,533 @@
+import fs from "node:fs/promises";
+import http from "node:http";
+import path from "node:path";
+import * as esbuild from "esbuild";
+import { glob } from "glob";
+import { createComponentBundle } from "./bundle.js";
+
+export interface ComponentInfo {
+  /** Component ID from meta.json (UUID) or generated temporary ID (studio-*) */
+  id: string;
+  /** Folder name */
+  name: string;
+  /** Target slot for new components (from meta.json) */
+  slot?: string;
+  entryPoint: string;
+  outfile: string;
+}
+
+interface ComponentMeta {
+  /** Component UUID (optional for local-only components) */
+  id?: string;
+  /** Human-readable name */
+  name?: string | null;
+  /** Default props */
+  props?: Record<string, unknown> | null;
+  /** Source path */
+  src?: string;
+  /** Deploy path */
+  deployPath?: string | null;
+  /** Target slot for local development */
+  slot?: string;
+}
+
+/**
+ * Reads the meta.json file for a component.
+ * Supports stage-specific meta files: meta.{stage}.json
+ */
+async function readComponentMeta(
+  componentDir: string,
+  stage?: string,
+): Promise<ComponentMeta | null> {
+  // Try stage-specific meta first
+  if (stage && stage !== "prod") {
+    const stagePath = path.join(componentDir, `meta.${stage}.json`);
+    try {
+      const content = await fs.readFile(stagePath, "utf-8");
+      return JSON.parse(content) as ComponentMeta;
+    } catch {
+      // Fall through to default meta.json
+    }
+  }
+
+  // Read default meta.json
+  const metaPath = path.join(componentDir, "meta.json");
+  try {
+    const content = await fs.readFile(metaPath, "utf-8");
+    return JSON.parse(content) as ComponentMeta;
+  } catch {
+    return null;
+  }
+}
+
+export interface DiscoverComponentsOptions {
+  cwd?: string;
+  stage?: string;
+}
+
+/**
+ * Discovers components in the components directory.
+ * Each component should have an index.tsx file and a meta.json with its ID.
+ */
+export async function discoverComponents(
+  options: DiscoverComponentsOptions = {},
+): Promise<ComponentInfo[]> {
+  const { cwd = process.cwd(), stage } = options;
+  const componentsDir = path.join(cwd, "components");
+
+  try {
+    await fs.access(componentsDir);
+  } catch {
+    return [];
+  }
+
+  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);
+
+    // Components without id (or without meta.json) get a temporary studio-* ID
+    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`,
+      );
+    }
+
+    components.push({
+      id,
+      name,
+      slot: meta?.slot,
+      entryPoint: path.join(componentsDir, entry),
+      outfile: path.join(cwd, "node_modules/.ollie", "build", name, "index.js"),
+    });
+  }
+
+  return components;
+}
+
+export interface BuildResult {
+  status: "ok" | "error";
+  errors: BuildError[];
+  buildTime: number;
+}
+
+export interface CreateBuildContextOptions {
+  cwd?: string;
+  stage?: string;
+  onBuildEnd?: (components: ComponentInfo[], result: BuildResult) => void;
+}
+
+/**
+ * Creates an esbuild context for building components.
+ * Configuration matches the production build from infra/builder.
+ */
+export async function createBuildContext(
+  components: ComponentInfo[],
+  options: CreateBuildContextOptions = {},
+): Promise<esbuild.BuildContext> {
+  const { cwd = process.cwd(), stage, onBuildEnd } = options;
+  const outdir = path.join(cwd, "node_modules/.ollie", "build");
+
+  // Ensure output directory exists
+  await fs.mkdir(outdir, { recursive: true });
+
+  // Create entryPoints object for named outputs
+  const entryPoints: Record<string, string> = {};
+  for (const component of components) {
+    entryPoints[`${component.name}/index`] = component.entryPoint;
+  }
+
+  // Plugin to update manifest after each build
+  const manifestPlugin: esbuild.Plugin = {
+    name: "manifest-plugin",
+    setup(build) {
+      let buildStartTime = 0;
+
+      build.onStart(() => {
+        buildStartTime = Date.now();
+      });
+
+      build.onEnd(async (result) => {
+        const buildTime = Date.now() - buildStartTime;
+
+        // Parse errors into our format
+        const errors: BuildError[] = result.errors.map((err) => {
+          // Extract component name from file path (e.g., components/Header/index.tsx -> Header)
+          const match = err.location?.file?.match(/components\/([^/]+)\//);
+          return {
+            component: match?.[1] ?? "unknown",
+            message: err.text,
+            line: err.location?.line,
+            column: err.location?.column,
+          };
+        });
+
+        const buildResult: BuildResult = {
+          status: result.errors.length > 0 ? "error" : "ok",
+          errors,
+          buildTime,
+        };
+
+        // Re-discover components to get fresh metadata
+        const freshComponents = await discoverComponents({ cwd, stage });
+
+        // Always write manifest (with status info)
+        await writeManifest(freshComponents, buildResult, cwd);
+
+        // Notify callback
+        onBuildEnd?.(freshComponents, buildResult);
+      });
+    },
+  };
+
+  const ctx = await esbuild.context({
+    entryPoints,
+    bundle: true,
+    outdir,
+    format: "cjs", // CommonJS format for module.exports.default
+    platform: "browser",
+    target: "es2020",
+    sourcemap: true,
+    metafile: true,
+    // External dependencies - these are provided by the runtime
+    external: ["react", "react-dom", "next", "@ollie-shop/sdk", "next-intl"],
+    loader: {
+      ".tsx": "tsx",
+      ".ts": "ts",
+      ".js": "js",
+      ".jsx": "jsx",
+      ".css": "css",
+    },
+    logLevel: "silent", // We handle logging ourselves
+    jsx: "automatic",
+    plugins: [manifestPlugin],
+  });
+
+  return ctx;
+}
+
+export interface ServeResult {
+  host: string;
+  port: number;
+}
+
+/**
+ * Starts the esbuild serve + watch mode with a proxy server.
+ * The proxy handles /bundle/:componentName requests and forwards others to esbuild.
+ * Returns the server info and a way to stop it.
+ */
+export async function startDevServer(
+  ctx: esbuild.BuildContext,
+  options: {
+    port?: number;
+    host?: string;
+    cwd?: string;
+    onRequest?: (args: esbuild.ServeOnRequestArgs) => void;
+    onRebuild?: (result: esbuild.BuildResult) => void;
+  } = {},
+): Promise<ServeResult & { stop: () => Promise<void> }> {
+  const { port = 4000, host = "localhost", cwd = process.cwd() } = options;
+
+  const servedir = path.join(cwd, "node_modules/.ollie", "build");
+
+  // Start watching for changes
+  await ctx.watch();
+
+  // Start esbuild server on internal port (proxy will forward to it)
+  const internalPort = port + 1;
+  await ctx.serve({
+    port: internalPort,
+    host,
+    servedir,
+    onRequest: options.onRequest,
+  });
+
+  // Create proxy server that handles /bundle/* and forwards to esbuild
+  const proxyServer = http.createServer(async (req, res) => {
+    const url = new URL(req.url || "/", `http://${host}:${port}`);
+
+    // Handle /bundle?path=/ComponentName/index.js
+    if (url.pathname === "/bundle" && req.method === "GET") {
+      const componentPath = url.searchParams.get("path");
+
+      if (!componentPath) {
+        res.statusCode = 400;
+        res.setHeader("Content-Type", "application/json");
+        res.end(JSON.stringify({ error: "Missing 'path' query parameter" }));
+        return;
+      }
+
+      // Extract component name from path (e.g., /Header/index.js → Header)
+      const pathMatch = componentPath.match(/^\/?([^/]+)\//);
+      if (!pathMatch) {
+        res.statusCode = 400;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({ error: `Invalid path format: ${componentPath}` }),
+        );
+        return;
+      }
+
+      const componentName = pathMatch[1];
+
+      // Set CORS headers
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
+
+      try {
+        const stream = await createComponentBundle({ cwd, componentName });
+
+        res.setHeader("Content-Type", "application/zip");
+        res.setHeader(
+          "Content-Disposition",
+          `attachment; filename="${componentName}.zip"`,
+        );
+
+        stream.pipe(res);
+
+        stream.on("error", (err) => {
+          console.error("[Bundle] Stream error:", err);
+          if (!res.headersSent) {
+            res.statusCode = 500;
+            res.end(JSON.stringify({ error: err.message }));
+          }
+        });
+      } catch (err) {
+        res.statusCode = 400;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({
+            error: err instanceof Error ? err.message : "Unknown error",
+          }),
+        );
+      }
+      return;
+    }
+
+    // Handle POST /meta?component=ComponentName to update meta.json
+    if (url.pathname === "/meta" && req.method === "POST") {
+      const componentName = url.searchParams.get("component");
+
+      if (!componentName) {
+        res.statusCode = 400;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({ error: "Missing 'component' query parameter" }),
+        );
+        return;
+      }
+
+      // Set CORS headers
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+
+      // Read request body
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk.toString();
+      });
+
+      req.on("end", async () => {
+        try {
+          const updates = JSON.parse(body) as Record<string, unknown>;
+          const metaPath = path.join(
+            cwd,
+            "components",
+            componentName,
+            "meta.json",
+          );
+
+          // Read existing meta.json or create new one
+          let existingMeta: Record<string, unknown> = {};
+          try {
+            const content = await fs.readFile(metaPath, "utf-8");
+            existingMeta = JSON.parse(content) as Record<string, unknown>;
+          } catch {
+            // File doesn't exist, start fresh
+          }
+
+          // Merge updates
+          const newMeta = { ...existingMeta, ...updates };
+
+          // Write back
+          await fs.writeFile(metaPath, JSON.stringify(newMeta, null, 2));
+
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ success: true, meta: newMeta }));
+        } 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 CORS preflight
+    if (req.method === "OPTIONS") {
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+      res.statusCode = 204;
+      res.end();
+      return;
+    }
+
+    // Proxy all other requests to esbuild
+    const proxyReq = http.request(
+      {
+        hostname: host,
+        port: internalPort,
+        path: req.url,
+        method: req.method,
+        headers: req.headers,
+      },
+      (proxyRes) => {
+        // Add CORS headers to proxied responses
+        res.setHeader("Access-Control-Allow-Origin", "*");
+
+        res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+        proxyRes.pipe(res);
+      },
+    );
+
+    proxyReq.on("error", (err) => {
+      console.error("[Proxy] Error:", err);
+      res.statusCode = 502;
+      res.end("Bad Gateway");
+    });
+
+    req.pipe(proxyReq);
+  });
+
+  // Start proxy server
+  await new Promise<void>((resolve, reject) => {
+    proxyServer.on("error", reject);
+    proxyServer.listen(port, host, () => resolve());
+  });
+
+  return {
+    host,
+    port,
+    stop: async () => {
+      proxyServer.close();
+      await ctx.dispose();
+    },
+  };
+}
+
+/**
+ * Gets the list of output files from the last build.
+ */
+export function getOutputFiles(
+  metafile: esbuild.Metafile | undefined,
+  cwd: string = process.cwd(),
+): string[] {
+  if (!metafile) return [];
+
+  return Object.keys(metafile.outputs).map((output) =>
+    path.relative(cwd, output),
+  );
+}
+
+/**
+ * Component manifest entry for the admin app.
+ * Components with id starting with "studio-" are unlinked (not in database).
+ */
+export interface ManifestEntry {
+  /** Component UUID from meta.json or generated studio ID (studio-*) */
+  id: string;
+  /** Folder name */
+  name: string;
+  /** URL path to JS file */
+  js: string;
+  /** URL path to CSS file (if exists) */
+  css?: string;
+  /** Target slot for components */
+  slot?: string;
+}
+
+/**
+ * Build error info for the admin app.
+ */
+export interface BuildError {
+  /** Component name (folder) where the error occurred */
+  component: string;
+  /** Error message */
+  message: string;
+  /** Line number if available */
+  line?: number;
+  /** Column number if available */
+  column?: number;
+}
+
+/**
+ * Build manifest with status info.
+ */
+export interface BuildManifest {
+  /** Build status */
+  status: "ok" | "error";
+  /** Build errors if any */
+  errors: BuildError[];
+  /** Build duration in milliseconds */
+  buildTime: number;
+  /** Component entries */
+  components: ManifestEntry[];
+}
+
+/**
+ * Writes a manifest.json file to the build directory.
+ * This allows the admin app to map component names to IDs.
+ */
+export async function writeManifest(
+  components: ComponentInfo[],
+  buildResult: BuildResult,
+  cwd: string = process.cwd(),
+): Promise<void> {
+  const outdir = path.join(cwd, "node_modules/.ollie", "build");
+  const manifestPath = path.join(outdir, "manifest.json");
+
+  const componentEntries: ManifestEntry[] = await Promise.all(
+    components.map(async (c) => {
+      const entry: ManifestEntry = {
+        id: c.id,
+        name: c.name,
+        js: `/${c.name}/index.js`,
+        slot: c.slot,
+      };
+
+      // Check if CSS exists
+      const cssPath = path.join(outdir, c.name, "index.css");
+      try {
+        await fs.access(cssPath);
+        entry.css = `/${c.name}/index.css`;
+      } catch {
+        // No CSS file
+      }
+
+      return entry;
+    }),
+  );
+
+  const manifest: BuildManifest = {
+    status: buildResult.status,
+    errors: buildResult.errors,
+    buildTime: buildResult.buildTime,
+    components: componentEntries,
+  };
+
+  await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
+}

package/tsconfig.json

@@ -1,26 +1,21 @@
 {
   "compilerOptions": {
-    "lib": ["ESNext"],
-    "module": "Node16",
-    "target": "ES2020",
-    "moduleResolution": "Node16",
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
     "jsx": "react-jsx",
     "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
     "declaration": true,
     "declarationMap": true,
-    "noUncheckedIndexedAccess": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
     "outDir": "dist",
     "rootDir": "src",
-    "isolatedModules": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "@tests/*": ["./src/__tests__/*"]
-    }
+    "resolveJsonModule": true,
+    "isolatedModules": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+  "exclude": ["node_modules", "dist"]
 }

package/tsup.config.ts

@@ -1,15 +1,13 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts"],
-  bundle: true,
-  minify: false,
-  sourcemap: false,
-  format: ["cjs"],
+  entry: ["src/index.tsx"],
+  format: ["esm"],
+  target: "node22",
+  dts: false,
   clean: true,
-  dts: true,
-  treeshake: true,
-  platform: "node",
-  target: "node18",
-  noExternal: ["@ollie-shop/core"],
+  sourcemap: false,
+  banner: {
+    js: "#!/usr/bin/env node",
+  },
 });