@allegrocdp/preview 0.1.0-dev.10 → 0.1.0-dev.12

package/dist/cli.js

@@ -7,9 +7,27 @@ import { Command } from "commander";
 import chokidar from "chokidar";
 import express from "express";
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import { get as httpGet } from "http";
+import { get as httpsGet } from "https";
 import open from "open";
 import { basename, isAbsolute, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
+
+// src/preview-bootstrap.ts
+var PREVIEW_BOOTSTRAP_SCRIPT = `window.__ALLEGRO_PREVIEW__ = true;
+localStorage.setItem('allegro_debug', 'true');
+window.__ALLEGRO_TEMPLATE_RESOLVER__ = async function (slug) {
+  try {
+    var r = await fetch('/api/template?slug=' + encodeURIComponent(slug));
+    if (!r.ok) return null;
+    var t = await r.json();
+    return { html: t.html, css: t.css, js: t.js, external_css_urls: [] };
+  } catch (e) {
+    return null;
+  }
+};`;
+
+// src/server.ts
 var __dirname = fileURLToPath(new URL(".", import.meta.url));
 var BOILERPLATE_HTML = `<div class="signup">
   <div class="signup__eyebrow">Newsletter</div>
@@ -142,6 +160,60 @@ function normalizeTenantSdkUrl(raw) {
   const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
   return withProtocol.replace(/\/+$/, "") + "/client.js";
 }
+var previewCssCache = /* @__PURE__ */ new Map();
+var PREVIEW_CSS_TTL_MS = 6e4;
+function escapeStyle(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+function isLocalHost(hostname) {
+  const name = hostname.toLowerCase();
+  return name === "localhost" || name.endsWith(".localhost") || name.endsWith(".test") || name === "127.0.0.1" || name === "::1";
+}
+function getJson(target) {
+  return new Promise((resolve2, reject) => {
+    const handleResponse = (res) => {
+      const status = res.statusCode ?? 0;
+      if (status < 200 || status >= 300) {
+        res.resume();
+        reject(new Error(`HTTP ${status}`));
+        return;
+      }
+      let body = "";
+      res.setEncoding("utf-8");
+      res.on("data", (chunk) => body += chunk);
+      res.on("end", () => {
+        try {
+          resolve2(JSON.parse(body));
+        } catch (err) {
+          reject(err);
+        }
+      });
+    };
+    const req = target.protocol === "https:" ? httpsGet(target, { rejectUnauthorized: !isLocalHost(target.hostname) }, handleResponse) : httpGet(target, handleResponse);
+    req.on("error", reject);
+    req.setTimeout(5e3, () => req.destroy(new Error("Request timed out")));
+  });
+}
+async function fetchPreviewCss(sdkUrl) {
+  let endpoint;
+  try {
+    endpoint = new URL("/api/preview-css", sdkUrl);
+  } catch {
+    return "";
+  }
+  const cached = previewCssCache.get(endpoint.origin);
+  if (cached && Date.now() - cached.fetchedAt < PREVIEW_CSS_TTL_MS) {
+    return cached.css;
+  }
+  try {
+    const data = await getJson(endpoint);
+    const css = typeof data.css === "string" ? data.css : "";
+    previewCssCache.set(endpoint.origin, { css, fetchedAt: Date.now() });
+    return css;
+  } catch {
+    return cached?.css ?? "";
+  }
+}
 var COOKIE_NOOP_SCRIPT = `(function(){var _jar={};Object.defineProperty(document,'cookie',{configurable:true,get:function(){return Object.keys(_jar).map(function(k){return k+'='+_jar[k];}).join('; ');},set:function(str){var parts=str.split(';');var kv=parts[0].trim();var eq=kv.indexOf('=');var name=kv.slice(0,eq).trim();var val=kv.slice(eq+1).trim();var maxAge=null;for(var i=1;i<parts.length;i++){var p=parts[i].trim().toLowerCase();if(p.indexOf('max-age=')===0){maxAge=parseInt(p.split('=')[1],10);}}if(maxAge!==null&&maxAge<=0){delete _jar[name];}else{_jar[name]=val;}}});})();`;
 function buildPreviewData(options) {
   const json = JSON.stringify({
@@ -154,6 +226,9 @@ function buildPreviewData(options) {
   });
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
+function previewCssTag(css) {
+  return css ? `<style data-allegro-preview-css>${escapeStyle(css)}</style>` : "";
+}
 function standaloneShell(options) {
   const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
   return `<!DOCTYPE html>
@@ -161,13 +236,14 @@ function standaloneShell(options) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  <script>${PREVIEW_BOOTSTRAP_SCRIPT}</script>
   ${cookieScript}
   <style>
     * { box-sizing: border-box; }
     body { margin: 0; }
     [data-allegro-interaction] { display: block; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -184,7 +260,7 @@ function articleShell(options) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  <script>${PREVIEW_BOOTSTRAP_SCRIPT}</script>
   ${cookieScript}
   <style>
     *, *::before, *::after { box-sizing: border-box; }
@@ -196,6 +272,7 @@ function articleShell(options) {
     p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
     [data-allegro-interaction] { display: block; margin: 24px 0; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -373,7 +450,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       sseClients.delete(res);
     });
   });
-  app.get("/preview", (req, res) => {
+  app.get("/preview", async (req, res) => {
     const slug = typeof req.query.slug === "string" ? req.query.slug : "";
     const tab = typeof req.query.tab === "string" ? req.query.tab : "standalone";
     const sdkParam = typeof req.query.sdk === "string" ? req.query.sdk : void 0;
@@ -381,6 +458,14 @@ async function startServer(templatePath, port = 0, tenant = "") {
       res.status(400).send("Missing slug");
       return;
     }
+    if (sdkParam !== void 0) {
+      try {
+        new URL(sdkParam);
+      } catch {
+        res.status(400).send("Invalid sdk URL");
+        return;
+      }
+    }
     if (slug !== "." && !templates.some((t) => t.slug === slug)) {
       res.status(404).send("Template not found");
       return;
@@ -406,6 +491,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
     }
     const effectiveSdkUrl = sdkParam ?? (tenant ? normalizeTenantSdkUrl(tenant) : void 0);
     const blockCookies = req.query.blockCookies !== "false";
+    const previewCss = effectiveSdkUrl ? await fetchPreviewCss(effectiveSdkUrl) : "";
     const shellOptions = {
       slug,
       html: templateFiles.html,
@@ -414,7 +500,8 @@ async function startServer(templatePath, port = 0, tenant = "") {
       fieldValues,
       tab,
       sdkUrl: effectiveSdkUrl,
-      blockCookies
+      blockCookies,
+      previewCss
     };
     const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
     res.setHeader("Cache-Control", "no-store");

package/dist/server.js

@@ -4,9 +4,27 @@
 import chokidar from "chokidar";
 import express from "express";
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
+import { get as httpGet } from "http";
+import { get as httpsGet } from "https";
 import open from "open";
 import { basename, isAbsolute, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
+
+// src/preview-bootstrap.ts
+var PREVIEW_BOOTSTRAP_SCRIPT = `window.__ALLEGRO_PREVIEW__ = true;
+localStorage.setItem('allegro_debug', 'true');
+window.__ALLEGRO_TEMPLATE_RESOLVER__ = async function (slug) {
+  try {
+    var r = await fetch('/api/template?slug=' + encodeURIComponent(slug));
+    if (!r.ok) return null;
+    var t = await r.json();
+    return { html: t.html, css: t.css, js: t.js, external_css_urls: [] };
+  } catch (e) {
+    return null;
+  }
+};`;
+
+// src/server.ts
 var __dirname = fileURLToPath(new URL(".", import.meta.url));
 var BOILERPLATE_HTML = `<div class="signup">
   <div class="signup__eyebrow">Newsletter</div>
@@ -139,6 +157,60 @@ function normalizeTenantSdkUrl(raw) {
   const withProtocol = /^https?:\/\//.test(trimmed) ? trimmed : `https://${trimmed}`;
   return withProtocol.replace(/\/+$/, "") + "/client.js";
 }
+var previewCssCache = /* @__PURE__ */ new Map();
+var PREVIEW_CSS_TTL_MS = 6e4;
+function escapeStyle(css) {
+  return css.replace(/<\/(style)/gi, "<\\/$1");
+}
+function isLocalHost(hostname) {
+  const name = hostname.toLowerCase();
+  return name === "localhost" || name.endsWith(".localhost") || name.endsWith(".test") || name === "127.0.0.1" || name === "::1";
+}
+function getJson(target) {
+  return new Promise((resolve2, reject) => {
+    const handleResponse = (res) => {
+      const status = res.statusCode ?? 0;
+      if (status < 200 || status >= 300) {
+        res.resume();
+        reject(new Error(`HTTP ${status}`));
+        return;
+      }
+      let body = "";
+      res.setEncoding("utf-8");
+      res.on("data", (chunk) => body += chunk);
+      res.on("end", () => {
+        try {
+          resolve2(JSON.parse(body));
+        } catch (err) {
+          reject(err);
+        }
+      });
+    };
+    const req = target.protocol === "https:" ? httpsGet(target, { rejectUnauthorized: !isLocalHost(target.hostname) }, handleResponse) : httpGet(target, handleResponse);
+    req.on("error", reject);
+    req.setTimeout(5e3, () => req.destroy(new Error("Request timed out")));
+  });
+}
+async function fetchPreviewCss(sdkUrl) {
+  let endpoint;
+  try {
+    endpoint = new URL("/api/preview-css", sdkUrl);
+  } catch {
+    return "";
+  }
+  const cached = previewCssCache.get(endpoint.origin);
+  if (cached && Date.now() - cached.fetchedAt < PREVIEW_CSS_TTL_MS) {
+    return cached.css;
+  }
+  try {
+    const data = await getJson(endpoint);
+    const css = typeof data.css === "string" ? data.css : "";
+    previewCssCache.set(endpoint.origin, { css, fetchedAt: Date.now() });
+    return css;
+  } catch {
+    return cached?.css ?? "";
+  }
+}
 var COOKIE_NOOP_SCRIPT = `(function(){var _jar={};Object.defineProperty(document,'cookie',{configurable:true,get:function(){return Object.keys(_jar).map(function(k){return k+'='+_jar[k];}).join('; ');},set:function(str){var parts=str.split(';');var kv=parts[0].trim();var eq=kv.indexOf('=');var name=kv.slice(0,eq).trim();var val=kv.slice(eq+1).trim();var maxAge=null;for(var i=1;i<parts.length;i++){var p=parts[i].trim().toLowerCase();if(p.indexOf('max-age=')===0){maxAge=parseInt(p.split('=')[1],10);}}if(maxAge!==null&&maxAge<=0){delete _jar[name];}else{_jar[name]=val;}}});})();`;
 function buildPreviewData(options) {
   const json = JSON.stringify({
@@ -151,6 +223,9 @@ function buildPreviewData(options) {
   });
   return json.replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026");
 }
+function previewCssTag(css) {
+  return css ? `<style data-allegro-preview-css>${escapeStyle(css)}</style>` : "";
+}
 function standaloneShell(options) {
   const cookieScript = options.blockCookies ?? true ? `<script>${COOKIE_NOOP_SCRIPT}</script>` : "";
   return `<!DOCTYPE html>
@@ -158,13 +233,14 @@ function standaloneShell(options) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  <script>${PREVIEW_BOOTSTRAP_SCRIPT}</script>
   ${cookieScript}
   <style>
     * { box-sizing: border-box; }
     body { margin: 0; }
     [data-allegro-interaction] { display: block; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -181,7 +257,7 @@ function articleShell(options) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>window.__ALLEGRO_PREVIEW__ = true; localStorage.setItem('allegro_debug', 'true');</script>
+  <script>${PREVIEW_BOOTSTRAP_SCRIPT}</script>
   ${cookieScript}
   <style>
     *, *::before, *::after { box-sizing: border-box; }
@@ -193,6 +269,7 @@ function articleShell(options) {
     p { margin: 0 0 1.1em; font-size: 1rem; overflow-wrap: break-word; }
     [data-allegro-interaction] { display: block; margin: 24px 0; }
   </style>
+  ${previewCssTag(options.previewCss)}
 </head>
 <body>
   <script id="allegro-preview-data" type="application/json">${buildPreviewData(options)}</script>
@@ -370,7 +447,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
       sseClients.delete(res);
     });
   });
-  app.get("/preview", (req, res) => {
+  app.get("/preview", async (req, res) => {
     const slug = typeof req.query.slug === "string" ? req.query.slug : "";
     const tab = typeof req.query.tab === "string" ? req.query.tab : "standalone";
     const sdkParam = typeof req.query.sdk === "string" ? req.query.sdk : void 0;
@@ -378,6 +455,14 @@ async function startServer(templatePath, port = 0, tenant = "") {
       res.status(400).send("Missing slug");
       return;
     }
+    if (sdkParam !== void 0) {
+      try {
+        new URL(sdkParam);
+      } catch {
+        res.status(400).send("Invalid sdk URL");
+        return;
+      }
+    }
     if (slug !== "." && !templates.some((t) => t.slug === slug)) {
       res.status(404).send("Template not found");
       return;
@@ -403,6 +488,7 @@ async function startServer(templatePath, port = 0, tenant = "") {
     }
     const effectiveSdkUrl = sdkParam ?? (tenant ? normalizeTenantSdkUrl(tenant) : void 0);
     const blockCookies = req.query.blockCookies !== "false";
+    const previewCss = effectiveSdkUrl ? await fetchPreviewCss(effectiveSdkUrl) : "";
     const shellOptions = {
       slug,
       html: templateFiles.html,
@@ -411,7 +497,8 @@ async function startServer(templatePath, port = 0, tenant = "") {
       fieldValues,
       tab,
       sdkUrl: effectiveSdkUrl,
-      blockCookies
+      blockCookies,
+      previewCss
     };
     const rendered = tab === "standalone" ? standaloneShell(shellOptions) : articleShell(shellOptions);
     res.setHeader("Cache-Control", "no-store");
@@ -506,5 +593,6 @@ allegro-preview \u2192 ${url}
   void open(url);
 }
 export {
+  escapeStyle,
   startServer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://json.schemastore.org/package.json",
     "name": "@allegrocdp/preview",
-    "version": "0.1.0-dev.10",
+    "version": "0.1.0-dev.12",
     "description": "Local dev server for previewing Allegro templates",
     "type": "module",
     "bin": {
@@ -15,6 +15,7 @@
         "build:client": "vite build",
         "build:cli": "tsup",
         "dev": "npm run build:client -- --watch & tsup --watch",
+        "test": "vitest run",
         "types": "tsc --noEmit",
         "format": "prettier --write src/",
         "format:check": "prettier --check src/"
@@ -33,6 +34,7 @@
         "prettier-plugin-organize-imports": "^4.1.0",
         "tsup": "^8.4.0",
         "typescript": "^5.7.2",
-        "vite": "^7.0.4"
+        "vite": "^7.0.4",
+        "vitest": "^4.0.18"
     }
 }