@allegrocdp/preview 0.1.0-dev.6

package/dist/server.js

@@ -0,0 +1,353 @@
+#!/usr/bin/env node
+
+// src/server.ts
+import chokidar from "chokidar";
+import express from "express";
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import open from "open";
+import { basename, isAbsolute, join, relative, resolve } from "path";
+import { fileURLToPath } from "url";
+var __dirname = fileURLToPath(new URL(".", import.meta.url));
+var BOILERPLATE_HTML = `<div class="signup">
+  <div class="signup__eyebrow">Newsletter</div>
+  <h2 class="signup__headline">{% headline %}</h2>
+  <p class="signup__sub">{% subheadline %}</p>
+  <form class="signup__form" onsubmit="return false">
+    <div class="signup__row">
+      <input class="signup__input" type="email" placeholder="{% input_placeholder %}" />
+      <button class="signup__btn" type="submit">{% button_text %}</button>
+    </div>
+    <p class="signup__note">{% privacy_note %}</p>
+  </form>
+</div>
+`;
+var BOILERPLATE_CSS = `*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+.signup {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  padding: 16px;
+}
+
+.signup__eyebrow {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #6366f1;
+  margin-bottom: 8px;
+}
+
+.signup__headline {
+  font-size: clamp(20px, 4vw, 26px);
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+
+.signup__sub {
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.signup__row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.signup__input {
+  flex: 1;
+  min-width: 180px;
+  height: 42px;
+  padding: 0 12px;
+  border: 1.5px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 14px;
+  color: #0f172a;
+  background: #f8fafc;
+  outline: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.signup__input:focus { border-color: #6366f1; background: #fff; }
+.signup__input::placeholder { color: #94a3b8; }
+
+.signup__btn {
+  height: 42px;
+  padding: 0 20px;
+  background: #6366f1;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+
+.signup__btn:hover { background: #4f46e5; }
+.signup__btn:active { opacity: 0.9; }
+
+.signup__note {
+  margin-top: 10px;
+  font-size: 12px;
+  color: #94a3b8;
+}
+`;
+var BOILERPLATE_FIELDS = [
+  { slug: "headline", label: "Headline", type: "text", default_value: "Stay in the know" },
+  {
+    slug: "subheadline",
+    label: "Subheadline",
+    type: "textarea",
+    default_value: "Get the latest stories delivered to your inbox."
+  },
+  { slug: "input_placeholder", label: "Input placeholder", type: "text", default_value: "Enter your email" },
+  { slug: "button_text", label: "Button text", type: "text", default_value: "Subscribe" },
+  { slug: "privacy_note", label: "Privacy note", type: "text", default_value: "No spam. Unsubscribe anytime." }
+];
+var sseClients = /* @__PURE__ */ new Set();
+function broadcast(event) {
+  for (const client of sseClients) {
+    client.write(`event: ${event}
+data: {}
+
+`);
+  }
+}
+function broadcastReload() {
+  broadcast("reload");
+}
+function broadcastConfig() {
+  broadcast("config");
+}
+function readTemplateMeta(dir) {
+  const jsonPath = join(dir, "template.json");
+  if (!existsSync(jsonPath)) {
+    return { name: basename(dir) };
+  }
+  try {
+    const parsed = JSON.parse(readFileSync(jsonPath, "utf-8"));
+    return { name: parsed.name ?? basename(dir) };
+  } catch {
+    return { name: basename(dir) };
+  }
+}
+function isTemplateDir(dir) {
+  return existsSync(join(dir, "index.html"));
+}
+function scanTemplates(baseDir) {
+  const results = [];
+  if (isTemplateDir(baseDir)) {
+    const meta = readTemplateMeta(baseDir);
+    results.push({ slug: ".", name: meta.name });
+  }
+  try {
+    for (const entry of readdirSync(baseDir, { withFileTypes: true })) {
+      if (!entry.isDirectory() || entry.name.startsWith(".")) {
+        continue;
+      }
+      const sub = join(baseDir, entry.name);
+      if (!isTemplateDir(sub)) {
+        continue;
+      }
+      const meta = readTemplateMeta(sub);
+      results.push({ slug: entry.name, name: meta.name });
+    }
+  } catch {
+  }
+  return results;
+}
+function readTemplateFiles(dir) {
+  const read = (filename) => {
+    const filePath = join(dir, filename);
+    return existsSync(filePath) ? readFileSync(filePath, "utf-8") : "";
+  };
+  let fields = [];
+  let name = basename(dir);
+  let fieldsParseError = null;
+  const jsonPath = join(dir, "template.json");
+  if (existsSync(jsonPath)) {
+    try {
+      const parsed = JSON.parse(readFileSync(jsonPath, "utf-8"));
+      fields = parsed.fields ?? [];
+      name = parsed.name ?? name;
+    } catch (err) {
+      fieldsParseError = err instanceof Error ? err.message : "Invalid JSON in template.json";
+    }
+  }
+  return {
+    html: read("index.html"),
+    css: read("index.css"),
+    js: read("index.js"),
+    fields,
+    name,
+    fieldsParseError
+  };
+}
+async function startServer(templatePath, port = 0, tenant = "") {
+  const baseDir = resolve(process.cwd(), templatePath);
+  if (!existsSync(baseDir)) {
+    console.error(`Directory not found: ${baseDir}`);
+    process.exit(1);
+  }
+  let templates = scanTemplates(baseDir);
+  const app = express();
+  const clientDistDir = join(__dirname, "client");
+  app.use(express.static(clientDistDir));
+  app.get("/api/config", (_req, res) => {
+    res.json({ defaultSlug: templates[0]?.slug ?? null, templates, tenant });
+  });
+  app.get("/api/template", (req, res) => {
+    const slug = req.query.slug ?? ".";
+    if (slug !== "." && !templates.some((template) => template.slug === slug)) {
+      res.status(404).json({ error: "Template not found" });
+      return;
+    }
+    const targetDir = slug === "." ? baseDir : join(baseDir, slug);
+    const resolvedBaseDir = resolve(baseDir);
+    const resolvedDir = resolve(targetDir);
+    const relativePath = relative(resolvedBaseDir, resolvedDir);
+    if (relativePath.startsWith("..") || isAbsolute(relativePath)) {
+      res.status(400).json({ error: "Invalid template path" });
+      return;
+    }
+    if (!existsSync(resolvedDir) || !isTemplateDir(resolvedDir)) {
+      res.status(404).json({ error: "Template not found" });
+      return;
+    }
+    res.json(readTemplateFiles(resolvedDir));
+  });
+  app.post("/api/template/create", express.json(), (req, res) => {
+    const body = req.body;
+    const slug = body.slug;
+    if (typeof slug !== "string" || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug)) {
+      res.status(400).json({
+        error: "Slug must be lowercase letters, numbers, and hyphens only (e.g. my-template)."
+      });
+      return;
+    }
+    const targetDir = join(baseDir, slug);
+    if (existsSync(targetDir)) {
+      res.status(400).json({ error: `A template named "${slug}" already exists.` });
+      return;
+    }
+    try {
+      mkdirSync(targetDir);
+      writeFileSync(join(targetDir, "index.html"), BOILERPLATE_HTML);
+      writeFileSync(join(targetDir, "index.css"), BOILERPLATE_CSS);
+      writeFileSync(
+        join(targetDir, "template.json"),
+        JSON.stringify({ name: slug, fields: BOILERPLATE_FIELDS }, null, 2) + "\n"
+      );
+    } catch (err) {
+      console.error("[allegro-preview] Failed to create template:", err);
+      res.status(500).json({ error: "Failed to create template files." });
+      return;
+    }
+    rescan();
+    res.status(201).json({ slug });
+  });
+  app.get("/api/events", (req, res) => {
+    res.setHeader("Content-Type", "text/event-stream");
+    res.setHeader("Cache-Control", "no-cache");
+    res.setHeader("Connection", "keep-alive");
+    res.flushHeaders();
+    sseClients.add(res);
+    req.on("close", () => {
+      sseClients.delete(res);
+    });
+  });
+  const indexHtmlPath = join(clientDistDir, "index.html");
+  app.get("/*path", (_req, res) => {
+    if (existsSync(indexHtmlPath)) {
+      res.type("html").send(readFileSync(indexHtmlPath));
+    } else {
+      res.status(503).send(
+        'Preview client build artifacts not found. Ensure the client is built (for example, by running "npm run build" in this package during development).'
+      );
+    }
+  });
+  const TEMPLATE_FILES = ["index.html", "index.css", "index.js", "template.json"];
+  function templateFilePaths(dir) {
+    return TEMPLATE_FILES.map((f) => join(dir, f));
+  }
+  const fileWatcher = chokidar.watch(
+    templates.flatMap((t) => templateFilePaths(t.slug === "." ? baseDir : join(baseDir, t.slug))),
+    { ignoreInitial: true }
+  );
+  fileWatcher.on("change", (changedPath) => {
+    console.log(`Changed: ${changedPath}`);
+    broadcastReload();
+  });
+  fileWatcher.on("add", (addedPath) => {
+    console.log(`Added: ${addedPath}`);
+    if (basename(addedPath) === "index.html") {
+      rescan();
+    }
+    broadcastReload();
+  });
+  const dirWatcher = chokidar.watch(baseDir, { depth: 1, ignoreInitial: true });
+  function rescan() {
+    templates = scanTemplates(baseDir);
+    console.log(`Templates updated: ${templates.map((t) => t.slug).join(", ") || "(none)"}`);
+    broadcastConfig();
+  }
+  dirWatcher.on("addDir", (dirPath) => {
+    if (dirPath === baseDir) {
+      return;
+    }
+    setTimeout(() => {
+      rescan();
+      fileWatcher.add(templateFilePaths(dirPath));
+    }, 300);
+  });
+  dirWatcher.on("unlinkDir", (dirPath) => {
+    if (dirPath === baseDir) {
+      return;
+    }
+    rescan();
+  });
+  dirWatcher.on("add", (filePath) => {
+    if (basename(filePath) === "index.html") {
+      rescan();
+      fileWatcher.add(templateFilePaths(join(filePath, "..")));
+    }
+  });
+  const bindServer = (p) => new Promise((resolve2, reject) => {
+    const server = app.listen(p);
+    server.once("listening", () => {
+      const addr = server.address();
+      const assignedPort2 = typeof addr === "object" && addr ? addr.port : p;
+      resolve2({ server, assignedPort: assignedPort2 });
+    });
+    server.once("error", reject);
+  });
+  let assignedPort;
+  try {
+    ({ assignedPort } = await bindServer(port));
+  } catch (err) {
+    const nodeErr = err;
+    if (nodeErr.code === "EADDRINUSE" && port !== 0) {
+      console.log(`Port ${port} is in use, using a random available port instead.`);
+      ({ assignedPort } = await bindServer(0));
+    } else {
+      throw err;
+    }
+  }
+  const url = `http://localhost:${assignedPort}`;
+  console.log(`
+allegro-preview \u2192 ${url}
+`);
+  void open(url);
+}
+export {
+  startServer
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+    "$schema": "https://json.schemastore.org/package.json",
+    "name": "@allegrocdp/preview",
+    "version": "0.1.0-dev.6",
+    "description": "Local dev server for previewing Allegro templates",
+    "type": "module",
+    "bin": {
+        "allegro-preview": "./dist/cli.js"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "npm run build:client && npm run build:cli",
+        "build:client": "vite build",
+        "build:cli": "tsup",
+        "dev": "vite",
+        "types": "tsc --noEmit",
+        "format": "prettier --write src/",
+        "format:check": "prettier --check src/"
+    },
+    "dependencies": {
+        "chokidar": "^4.0.3",
+        "commander": "^13.1.0",
+        "express": "^5.1.0",
+        "open": "^10.1.2"
+    },
+    "devDependencies": {
+        "@alleyinteractive/allegro-platform": "*",
+        "@types/express": "^5.0.1",
+        "@types/node": "^22.13.5",
+        "prettier": "^3.4.2",
+        "prettier-plugin-organize-imports": "^4.1.0",
+        "tsup": "^8.4.0",
+        "typescript": "^5.7.2",
+        "vite": "^7.0.4"
+    }
+}