@open-assets/open-assets 0.3.0 → 0.5.0

package/lib/renderer.mjs

@@ -2,128 +2,254 @@ import { launch } from "puppeteer";
 import { resolve } from "path";
 import { writeFileSync, mkdirSync, readdirSync, unlinkSync } from "fs";
 
-let browser = null;
+// The browser is launched once per process and shared. Storing the launch
+// promise (not the instance) makes concurrent callers await the same launch
+// instead of racing to spawn duplicate Chromium processes.
+let browserPromise = null;
+
+// Pages are pooled and reused across renders: page.goto fully replaces the
+// document, and newPage()/close() cost 100-300ms per image in headless mode.
+const pagePool = [];
 
 async function getBrowser() {
-  if (!browser || !browser.connected) {
-    browser = await launch({ headless: true });
+  for (;;) {
+    if (!browserPromise) {
+      browserPromise = launch({
+        headless: true,
+        // Pages render concurrently; without these flags Chromium throttles
+        // timers and frames in non-active tabs, stalling background renders.
+        args: [
+          "--disable-background-timer-throttling",
+          "--disable-backgrounding-occluded-windows",
+          "--disable-renderer-backgrounding",
+        ],
+      }).catch((err) => {
+        browserPromise = null;
+        throw err;
+      });
+    }
+    const current = browserPromise;
+    const browser = await current;
+    if (browser.connected) return browser;
+    // Browser died; clear the cached promise (unless someone already
+    // replaced it) and relaunch.
+    if (browserPromise === current) browserPromise = null;
+  }
+}
+
+/**
+ * Pre-launch the shared browser so the first render doesn't pay the ~2s
+ * launch cost interactively.
+ */
+export function warmupBrowser() {
+  return getBrowser();
+}
+
+async function acquirePage() {
+  const browser = await getBrowser();
+  while (pagePool.length > 0) {
+    const page = pagePool.pop();
+    // Drop pages tied to a closed or replaced browser instance
+    if (!page.isClosed() && page.browser() === browser) return page;
   }
-  return browser;
+  return browser.newPage();
+}
+
+function releasePage(page) {
+  if (page && !page.isClosed()) pagePool.push(page);
 }
 
 export async function closeBrowser() {
-  if (browser) {
-    await browser.close();
-    browser = null;
+  pagePool.length = 0;
+  if (browserPromise) {
+    const pending = browserPromise;
+    browserPromise = null;
+    try {
+      const browser = await pending;
+      await browser.close();
+    } catch {
+      // Launch already failed; nothing to close.
+    }
   }
 }
 
 /**
- * Render an HTML file to an image buffer at the given dimensions.
- * Scales from sourceSize to target size via CSS zoom.
+ * Deterministic readiness barrier, replacing fixed sleeps: yields a macrotask
+ * (so MutationObserver-driven DOM updates like locale image swaps have run),
+ * forces a layout (so font loads triggered by first layout have started),
+ * then waits for fonts and image decodes. No frame waits here: rAF can stall
+ * indefinitely in a non-active tab, and the screenshot capture itself forces
+ * a fresh frame that flushes pending style and layout.
+ */
+async function settle(page) {
+  await page.evaluate(async () => {
+    await new Promise((r) => setTimeout(r, 0));
+    document.documentElement.getBoundingClientRect();
+    await document.fonts.ready;
+    const images = document.images ? Array.from(document.images) : [];
+    await Promise.all(images.map((img) => img.decode().catch(() => {})));
+  });
+}
+
+/**
+ * Render an HTML file at multiple sizes from a single navigation.
+ * The page is loaded (and localized) once; each variant re-applies
+ * viewport + CSS zoom and takes its own screenshot.
+ *
  * @param {string} projectDir
  * @param {string} htmlFile
- * @param {number} width
- * @param {number} height
  * @param {number} sourceW
  * @param {number} sourceH
- * @param {{ format?: "png"|"jpeg", quality?: number, background?: string, localization?: { strings: object, locale: string, direction: string } }} [options]
+ * @param {{ width: number, height: number, format?: "png"|"jpeg", quality?: number }[]} variants
+ * @param {{ background?: string, localization?: { strings: object, locale: string, direction: string }, timeout?: number }} [options]
+ * @returns {Promise<Buffer[]>} Screenshot buffers in variant order
  */
-export async function renderScreenshot(
+export async function renderVariants(
   projectDir,
   htmlFile,
-  width,
-  height,
   sourceW,
   sourceH,
+  variants,
   options = {}
 ) {
-  const b = await getBrowser();
-  const page = await b.newPage();
+  const page = await acquirePage();
+  try {
+    const first = variants[0];
+    await page.setViewport({
+      width: first.width,
+      height: first.height,
+      deviceScaleFactor: 1,
+    });
+
+    const filePath = resolve(projectDir, htmlFile);
+    await page.goto(`file://${filePath}`, {
+      waitUntil: "load",
+      timeout: options.timeout || 30000,
+    });
 
-  const scale = Math.max(width / sourceW, height / sourceH);
+    // Inject localized strings and set lang before rendering
+    if (options.localization) {
+      const { strings, locale, direction } = options.localization;
+      await page.evaluate((strings, locale, dir) => {
+        // Set lang on root for font selection; do NOT set dir on root
+        // because it flips the entire CSS layout (flexbox, margins, etc.)
+        // which breaks fixed-pixel marketing layouts.
+        document.documentElement.lang = locale;
 
-  await page.setViewport({ width, height, deviceScaleFactor: 1 });
+        const formatter = new Intl.NumberFormat(locale);
 
-  const filePath = resolve(projectDir, htmlFile);
-  await page.goto(`file://${filePath}`, { waitUntil: "networkidle0" });
-  await new Promise((r) => setTimeout(r, 500));
+        function processValue(value) {
+          return value.replace(/\{\{n:(\d+(?:\.\d+)?)\}\}/g, (_, num) => {
+            return formatter.format(parseFloat(num));
+          });
+        }
+
+        const walker = document.createTreeWalker(
+          document.documentElement,
+          NodeFilter.SHOW_TEXT
+        );
+        while (walker.nextNode()) {
+          const node = walker.currentNode;
+          let text = node.textContent;
+          let changed = false;
+          text = text.replace(/\{\{([a-zA-Z_][\w.]*)\}\}/g, (match, key) => {
+            if (strings[key] !== undefined) {
+              changed = true;
+              return processValue(strings[key]);
+            }
+            return match;
+          });
+          if (changed) {
+            node.textContent = text;
+            // Apply text direction on the parent element so RTL text
+            // renders correctly without flipping the overall page layout.
+            if (dir === "rtl") {
+              node.parentElement.dir = dir;
+            }
+          }
+        }
+      }, strings, locale, direction);
+    }
 
-  // Inject localized strings and set lang/dir before rendering
-  if (options.localization) {
-    const { strings, locale, direction } = options.localization;
-    await page.evaluate((strings, locale, dir) => {
-      // Set lang on root for font selection; do NOT set dir on root
-      // because it flips the entire CSS layout (flexbox, margins, etc.)
-      // which breaks fixed-pixel marketing layouts.
-      document.documentElement.lang = locale;
+    // Handle background: transparent by default for PNG, or use specified color
+    if (options.background) {
+      await page.evaluate((color) => {
+        document.documentElement.style.backgroundColor = color;
+      }, options.background);
+    }
 
-      const formatter = new Intl.NumberFormat(locale);
+    await settle(page);
 
-      function processValue(value) {
-        return value.replace(/\{\{n:(\d+(?:\.\d+)?)\}\}/g, (_, num) => {
-          return formatter.format(parseFloat(num));
-        });
-      }
+    const buffers = [];
+    for (const variant of variants) {
+      const { width, height } = variant;
+      await page.setViewport({ width, height, deviceScaleFactor: 1 });
 
-      const walker = document.createTreeWalker(
-        document.documentElement,
-        NodeFilter.SHOW_TEXT
-      );
-      while (walker.nextNode()) {
-        const node = walker.currentNode;
-        let text = node.textContent;
-        let changed = false;
-        text = text.replace(/\{\{([a-zA-Z_][\w.]*)\}\}/g, (match, key) => {
-          if (strings[key] !== undefined) {
-            changed = true;
-            return processValue(strings[key]);
-          }
-          return match;
-        });
-        if (changed) {
-          node.textContent = text;
-          // Apply text direction on the parent element so RTL text
-          // renders correctly without flipping the overall page layout.
-          if (dir === "rtl") {
-            node.parentElement.dir = dir;
+      const scale = Math.max(width / sourceW, height / sourceH);
+      // Always assign zoom (clearing it at scale 1) so a previous variant's
+      // zoom can't leak into this one, and freeze animations at t=0 so the
+      // capture is deterministic. The screenshot's forced frame applies both.
+      await page.evaluate((zoom) => {
+        document.documentElement.style.zoom = zoom;
+        for (const anim of document.getAnimations()) {
+          try {
+            anim.pause();
+            anim.currentTime = 0;
+          } catch {
+            // Some animations (e.g. infinite transitions) can reject; skip.
           }
         }
-      }
-    }, strings, locale, direction);
-    await new Promise((r) => setTimeout(r, 200));
-  }
-
-  if (scale !== 1) {
-    await page.evaluate((z) => {
-      document.documentElement.style.zoom = z;
-    }, scale);
-    await new Promise((r) => setTimeout(r, 200));
-  }
+      }, scale === 1 ? "" : String(scale));
 
-  // Handle background: transparent by default for PNG, or use specified color
-  const bg = options.background;
-  if (bg) {
-    await page.evaluate((color) => {
-      document.documentElement.style.backgroundColor = color;
-    }, bg);
-  }
+      const format = variant.format || "png";
+      const screenshotOpts = {
+        type: format,
+        clip: { x: 0, y: 0, width, height },
+      };
+      if (format === "png" && !options.background) {
+        screenshotOpts.omitBackground = true;
+      }
+      if (format === "jpeg" && variant.quality) {
+        screenshotOpts.quality = variant.quality;
+      }
+      buffers.push(await page.screenshot(screenshotOpts));
+    }
 
-  const format = options.format || "png";
-  const screenshotOpts = {
-    type: format,
-    clip: { x: 0, y: 0, width, height },
-  };
-  if (format === "png" && !bg) {
-    screenshotOpts.omitBackground = true;
-  }
-  if (format === "jpeg" && options.quality) {
-    screenshotOpts.quality = options.quality;
+    return buffers;
+  } finally {
+    releasePage(page);
   }
+}
 
-  const buffer = await page.screenshot(screenshotOpts);
-
-  await page.close();
+/**
+ * Render an HTML file to an image buffer at the given dimensions.
+ * Scales from sourceSize to target size via CSS zoom.
+ * Single-variant wrapper around renderVariants.
+ * @param {string} projectDir
+ * @param {string} htmlFile
+ * @param {number} width
+ * @param {number} height
+ * @param {number} sourceW
+ * @param {number} sourceH
+ * @param {{ format?: "png"|"jpeg", quality?: number, background?: string, localization?: { strings: object, locale: string, direction: string }, timeout?: number }} [options]
+ */
+export async function renderScreenshot(
+  projectDir,
+  htmlFile,
+  width,
+  height,
+  sourceW,
+  sourceH,
+  options = {}
+) {
+  const [buffer] = await renderVariants(
+    projectDir,
+    htmlFile,
+    sourceW,
+    sourceH,
+    [{ width, height, format: options.format, quality: options.quality }],
+    options
+  );
   return buffer;
 }
 

package/lib/server.mjs

@@ -2,6 +2,7 @@ import { createServer } from "http";
 import { readFileSync, existsSync, statSync, watch } from "fs";
 import { resolve, join, extname } from "path";
 import { fileURLToPath } from "url";
+import { loadLocalizations, resolveStrings, getLocales, getDirection } from "./localization.mjs";
 
 const __dirname = resolve(fileURLToPath(import.meta.url), "..");
 const VIEWER_PATH = join(__dirname, "..", "public", "viewer.html");
@@ -61,7 +62,7 @@ export async function startServer(projectDir, options = {}, renderer) {
   if (!renderer) {
     renderer = await import("./renderer.mjs");
   }
-  const { renderScreenshot, runXcodeOutput, closeBrowser } = renderer;
+  const { renderScreenshot, runXcodeOutput, closeBrowser, warmupBrowser } = renderer;
 
   const port = options.port || 3200;
   const host = options.host || "localhost";
@@ -146,7 +147,7 @@ export async function startServer(projectDir, options = {}, renderer) {
     // API: render screenshot (unified for all collection types)
     if (req.method === "POST" && pathname === "/api/render-screenshot") {
       try {
-        const { file, width, height, sourceW, sourceH, background } = JSON.parse(
+        const { file, width, height, sourceW, sourceH, background, localization } = JSON.parse(
           await readBody(req)
         );
         if (!file || !width || !height) {
@@ -157,8 +158,12 @@ export async function startServer(projectDir, options = {}, renderer) {
         }
         const sw = sourceW || width;
         const sh = sourceH || height;
-        log(`Rendering ${file} at ${width}x${height} (source ${sw}x${sh})...`);
-        const buffer = await renderScreenshot(projectDir, file, width, height, sw, sh, { background });
+        log(`Rendering ${file} at ${width}x${height} (source ${sw}x${sh})${localization ? ` [${localization.locale}]` : ''}...`);
+        const buffer = await renderScreenshot(projectDir, file, width, height, sw, sh, {
+          background,
+          localization,
+          timeout: options.renderTimeout,
+        });
         res.writeHead(200, {
           "Content-Type": "image/png",
           "Content-Length": buffer.length,
@@ -172,6 +177,32 @@ export async function startServer(projectDir, options = {}, renderer) {
       return;
     }
 
+    // API: get localization data for a collection
+    if (req.method === "GET" && pathname === "/api/localizations") {
+      try {
+        const colId = url.searchParams.get("collection");
+        if (!colId) {
+          res.writeHead(400, { "Content-Type": "application/json" });
+          return res.end(JSON.stringify({ ok: false, error: "Missing collection param" }));
+        }
+        const col = manifest.collections.find((c) => c.id === colId);
+        if (!col || !col.localizations) {
+          res.writeHead(404, { "Content-Type": "application/json" });
+          return res.end(JSON.stringify({ ok: false, error: "Collection has no localizations" }));
+        }
+        const data = loadLocalizations(projectDir, col.localizations);
+        const locales = getLocales(data, col.locales);
+        const defaultLocale = manifest.defaultLocalization || data.sourceLanguage || "en";
+        res.writeHead(200, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ ok: true, data, locales, defaultLocale }));
+      } catch (err) {
+        console.error(err);
+        res.writeHead(500, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ ok: false, error: err.message }));
+      }
+      return;
+    }
+
     // API: run xcode output for a collection
     if (req.method === "POST" && pathname === "/api/run-output") {
       try {
@@ -288,27 +319,31 @@ export async function startServer(projectDir, options = {}, renderer) {
     tryListen();
   });
 
-  return { port: actualPort };
-
   function cleanup() {
     for (const w of watchers) w.close();
     for (const client of sseClients) client.end();
     sseClients.clear();
   }
 
-  process.on("SIGINT", async () => {
+  const shutdown = async () => {
     cleanup();
     await closeBrowser();
     server.close();
     process.exit(0);
-  });
+  };
 
-  process.on("SIGTERM", async () => {
-    cleanup();
-    await closeBrowser();
-    server.close();
-    process.exit(0);
+  process.once("SIGINT", shutdown);
+  process.once("SIGTERM", shutdown);
+  server.on("close", () => {
+    process.removeListener("SIGINT", shutdown);
+    process.removeListener("SIGTERM", shutdown);
   });
 
-  return server;
+  // Pre-launch the shared browser in the background so the first interactive
+  // render doesn't pay the ~2s launch cost. Failures surface on first render.
+  if (typeof warmupBrowser === "function") {
+    Promise.resolve(warmupBrowser()).catch(() => {});
+  }
+
+  return { port: actualPort, server };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@open-assets/open-assets",
-  "version": "0.3.0",
-  "description": "Dev server and export tool for app screenshots, icons, and logos. Like Storybook for marketing assets.",
+  "version": "0.5.0",
+  "description": "Screenshots, icons, and marketing assets, made a breeze in your git repo. Design in HTML/CSS/SVG, render at every size, export anywhere. Like Storybook for marketing assets.",
   "type": "module",
   "bin": {
     "open-assets": "bin/open-assets.mjs"
@@ -40,7 +40,7 @@
   },
   "scripts": {
     "assets": "node bin/open-assets.mjs render --force -o ./public/img",
-    "test": "node --experimental-vm-modules node_modules/.bin/jest",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "release": "./scripts/release.sh"
   },
   "homepage": "https://openassets.dev",