@open-assets/open-assets 0.1.10 → 0.1.12

package/lib/render.mjs

@@ -0,0 +1,206 @@
+import { resolve, join } from "path";
+import { mkdirSync, writeFileSync, copyFileSync, existsSync } from "fs";
+import { filterCollections, filterTemplates, resolveRenderSizes } from "./manifest.mjs";
+
+/**
+ * @typedef {object} RenderDeps
+ * @property {(projectDir: string, htmlFile: string, w: number, h: number, sw: number, sh: number) => Promise<Buffer>} renderScreenshot
+ * @property {(projectDir: string, collection: object, outputConfig: object) => Promise<string>} runXcodeOutput
+ * @property {() => Promise<void>} closeBrowser
+ * @property {(projectDir: string) => object} readLockfile
+ * @property {(projectDir: string, data: object) => void} writeLockfile
+ * @property {(filePath: string) => string|null} computeChecksum
+ * @property {(lockData: object, assetKey: string, variantKey: string, checksum: string, outputPath: string) => boolean} isUpToDate
+ * @property {(lockData: object, assetKey: string, variantKey: string, checksum: string, outputPath: string) => void} recordExport
+ */
+
+/**
+ * Render assets according to the manifest and options.
+ *
+ * @param {string} projectDir - Absolute path to the project directory
+ * @param {object} manifest - Parsed manifest object
+ * @param {object} options - Render options from CLI
+ * @param {string} [options.collection] - Filter by collection ID
+ * @param {string} [options.tag] - Filter by tag
+ * @param {string} [options.template] - Filter by template name/label
+ * @param {string} [options.size] - Named export size
+ * @param {string} [options.format] - Output format override (png or jpg)
+ * @param {string|number} [options.width] - Custom width
+ * @param {string|number} [options.height] - Custom height
+ * @param {boolean} [options.all] - Export at all sizes
+ * @param {boolean} [options.force] - Re-render even if unchanged
+ * @param {string} [options.output] - Output directory path
+ * @param {boolean} [options.quiet] - Suppress logs
+ * @param {RenderDeps} deps - Injected dependencies
+ * @param {(msg: string) => void} [log] - Optional log function
+ * @returns {Promise<{ results: object[], skipped: number, elapsed: string, error?: string }>}
+ */
+export async function renderAssets(projectDir, manifest, options, deps, log) {
+  const noop = () => {};
+  const _log = log || noop;
+
+  // Filter collections
+  const { collections, error } = filterCollections(manifest.collections, {
+    collection: options.collection,
+    tag: options.tag,
+  });
+
+  if (error) {
+    return { results: [], skipped: 0, elapsed: "0.0s", error };
+  }
+
+  const outputDir = resolve(options.output || "./exports");
+  mkdirSync(outputDir, { recursive: true });
+
+  const lockData = deps.readLockfile(projectDir);
+  const results = [];
+  let skipped = 0;
+  const startTime = Date.now();
+
+  for (const col of collections) {
+    const sourceW = col.sourceSize.width;
+    const sourceH = col.sourceSize.height;
+
+    const templates = filterTemplates(col.templates, options.template);
+
+    const { sizes: sizesToRender, warning } = resolveRenderSizes(col, {
+      width: options.width,
+      height: options.height,
+      size: options.size,
+      all: options.all,
+    });
+
+    if (warning) {
+      _log(`  Warning: ${warning}`);
+      continue;
+    }
+
+    if (sizesToRender.length === 0) {
+      _log(`  No export sizes found for collection "${col.id}"`);
+      continue;
+    }
+
+    const useSubDirs = sizesToRender.length > 1 || options.all;
+
+    for (const entry of sizesToRender) {
+      const w = entry.size.width;
+      const h = entry.size.height;
+
+      const sizeDir = useSubDirs
+        ? join(outputDir, col.id, entry.name)
+        : join(outputDir, col.id);
+      mkdirSync(sizeDir, { recursive: true });
+
+      if (sizesToRender.length > 1) {
+        _log(`\n  ${entry.label} (${w}x${h})`);
+      }
+
+      for (const template of templates) {
+        // Determine output format from outFile extension or default to png
+        const outExt = entry.outFile
+          ? entry.outFile.split(".").pop().toLowerCase()
+          : "png";
+        const format = outExt === "jpg" || outExt === "jpeg" ? "jpeg" : "png";
+        const defaultExt = format === "jpeg" ? "jpg" : "png";
+
+        const outPath = entry.outFile
+          ? resolve(projectDir, entry.outFile.replace(/\{template\}/g, template.name))
+          : join(sizeDir, `${template.name}.${defaultExt}`);
+
+        const assetKey = `${col.id}/${template.name}`;
+        const variantKey = entry.name;
+        const srcPath = resolve(projectDir, template.src);
+        const checksum = deps.computeChecksum(srcPath);
+
+        // Skip if unchanged
+        if (
+          !options.force &&
+          checksum &&
+          deps.isUpToDate(lockData, assetKey, variantKey, checksum, outPath)
+        ) {
+          _log(
+            `  Skipping ${template.name} at ${w}x${h} (unchanged)`
+          );
+          skipped++;
+          continue;
+        }
+
+        _log(
+          `  Rendering ${template.name} at ${w}x${h}...`
+        );
+
+        const isSvg = template.src.endsWith(".svg");
+        if (isSvg && w === sourceW && h === sourceH) {
+          copyFileSync(srcPath, outPath.replace(`.${defaultExt}`, ".svg"));
+        }
+
+        // Ensure output directory exists when using outFile
+        if (entry.outFile) {
+          mkdirSync(resolve(projectDir, join(outPath, "..")), { recursive: true });
+        }
+
+        const buffer = await deps.renderScreenshot(
+          projectDir,
+          template.src,
+          w,
+          h,
+          sourceW,
+          sourceH,
+          { format }
+        );
+        writeFileSync(outPath, buffer);
+        results.push({
+          collection: col.id,
+          template: template.name,
+          path: outPath,
+          width: w,
+          height: h,
+          size: buffer.length,
+        });
+        if (checksum) {
+          deps.recordExport(lockData, assetKey, variantKey, checksum, outPath);
+        }
+        _log(`    → ${outPath}`);
+      }
+    }
+
+    // Handle outputs (xcode, copy-source, etc.)
+    if (col.outputs && options.all) {
+      for (const output of col.outputs) {
+        if (output.type === "xcode") {
+          _log(`\n  Exporting to Xcode: ${output.path}`);
+          const path = await deps.runXcodeOutput(projectDir, col, output);
+          results.push({ collection: col.id, type: "xcode", path });
+        } else if (output.type === "copy-source") {
+          const format = output.format || "svg";
+          const copyDir = join(outputDir, col.id, format);
+          mkdirSync(copyDir, { recursive: true });
+          for (const template of templates) {
+            if (template.src.endsWith(`.${format}`)) {
+              const srcPath = resolve(projectDir, template.src);
+              const destPath = join(copyDir, `${template.name}.${format}`);
+              if (existsSync(srcPath)) {
+                copyFileSync(srcPath, destPath);
+                results.push({
+                  collection: col.id,
+                  template: template.name,
+                  type: `copy-${format}`,
+                  path: destPath,
+                });
+                _log(`    → ${destPath}`);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Persist lockfile
+  deps.writeLockfile(projectDir, lockData);
+
+  await deps.closeBrowser();
+
+  const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+  return { results, skipped, elapsed: `${elapsed}s` };
+}

package/lib/renderer.mjs

@@ -19,8 +19,15 @@ export async function closeBrowser() {
 }
 
 /**
- * Render an HTML file to a PNG buffer at the given dimensions.
+ * Render an HTML file to an image buffer at the given dimensions.
  * Scales from sourceSize to target size via CSS zoom.
+ * @param {string} projectDir
+ * @param {string} htmlFile
+ * @param {number} width
+ * @param {number} height
+ * @param {number} sourceW
+ * @param {number} sourceH
+ * @param {{ format?: "png"|"jpeg", quality?: number }} [options]
  */
 export async function renderScreenshot(
   projectDir,
@@ -28,7 +35,8 @@ export async function renderScreenshot(
   width,
   height,
   sourceW,
-  sourceH
+  sourceH,
+  options = {}
 ) {
   const b = await getBrowser();
   const page = await b.newPage();
@@ -48,10 +56,16 @@ export async function renderScreenshot(
     await new Promise((r) => setTimeout(r, 200));
   }
 
-  const buffer = await page.screenshot({
-    type: "png",
+  const format = options.format || "png";
+  const screenshotOpts = {
+    type: format,
     clip: { x: 0, y: 0, width, height },
-  });
+  };
+  if (format === "jpeg" && options.quality) {
+    screenshotOpts.quality = options.quality;
+  }
+
+  const buffer = await page.screenshot(screenshotOpts);
 
   await page.close();
   return buffer;

package/lib/server.mjs

@@ -2,7 +2,6 @@ import { createServer } from "http";
 import { readFileSync, existsSync, statSync, watch } from "fs";
 import { resolve, join, extname } from "path";
 import { fileURLToPath } from "url";
-import { renderScreenshot, runXcodeOutput, closeBrowser } from "./renderer.mjs";
 
 const __dirname = resolve(fileURLToPath(import.meta.url), "..");
 const VIEWER_PATH = join(__dirname, "..", "public", "viewer.html");
@@ -28,7 +27,7 @@ const MIME_TYPES = {
   ".webm": "video/webm",
 };
 
-function getMime(filePath) {
+export function getMime(filePath) {
   return MIME_TYPES[extname(filePath).toLowerCase()] || "application/octet-stream";
 }
 
@@ -52,11 +51,22 @@ function readBody(req) {
   });
 }
 
-export function startServer(projectDir, options = {}) {
+/**
+ * @param {string} projectDir
+ * @param {object} [options]
+ * @param {{ renderScreenshot: Function, runXcodeOutput: Function, closeBrowser: Function }} [renderer]
+ *   Optional renderer dependency injection. Falls back to importing ./renderer.mjs.
+ */
+export async function startServer(projectDir, options = {}, renderer) {
+  if (!renderer) {
+    renderer = await import("./renderer.mjs");
+  }
+  const { renderScreenshot, runXcodeOutput, closeBrowser } = renderer;
+
   const port = options.port || 3200;
   const host = options.host || "localhost";
   const quiet = options.quiet || false;
-  const manifestPath = options.manifestPath || resolve(projectDir, "manifest.json");
+  const manifestPath = options.manifestPath || resolve(projectDir, "assets.json");
   const staticDirs = (options.staticDirs || []).map((d) => resolve(d));
 
   const log = quiet ? () => {} : console.log.bind(console);

package/lib/validate.mjs

@@ -0,0 +1,90 @@
+import { existsSync } from "fs";
+import { resolve } from "path";
+import { flatSizes } from "./manifest.mjs";
+
+/**
+ * Validate a config object and check that referenced files exist.
+ * Returns structured results instead of printing/exiting.
+ *
+ * @param {object} manifest - Parsed config object
+ * @param {string} projectDir - Absolute path to the project directory
+ * @returns {{ checks: Array<{ ok: boolean, message: string }>, errors: number }}
+ */
+export function validateConfig(manifest, projectDir) {
+  const checks = [];
+  let errors = 0;
+
+  const ok = (msg) => checks.push({ ok: true, message: msg });
+  const fail = (msg) => {
+    checks.push({ ok: false, message: msg });
+    errors++;
+  };
+
+  // Check top-level fields
+  if (manifest.name) {
+    ok(`name: "${manifest.name}"`);
+  } else {
+    fail("Missing top-level 'name' field");
+  }
+
+  if (Array.isArray(manifest.collections) && manifest.collections.length > 0) {
+    ok(`${manifest.collections.length} collection(s) defined`);
+  } else {
+    fail("Missing or empty 'collections' array");
+    return { checks, errors };
+  }
+
+  // Check each collection
+  const ids = new Set();
+  for (const col of manifest.collections) {
+    if (!col.id) {
+      fail("Collection missing 'id' field");
+      continue;
+    }
+    if (ids.has(col.id)) {
+      fail(`Duplicate collection id: "${col.id}"`);
+    }
+    ids.add(col.id);
+
+    if (!col.sourceSize || !col.sourceSize.width || !col.sourceSize.height) {
+      fail(`Collection "${col.id}" missing or invalid 'sourceSize'`);
+    } else {
+      ok(`Collection "${col.id}" sourceSize: ${col.sourceSize.width}\u00d7${col.sourceSize.height}`);
+    }
+
+    if (!col.templates || col.templates.length === 0) {
+      fail(`Collection "${col.id}" has no templates`);
+    } else {
+      for (const template of col.templates) {
+        if (!template.src) {
+          fail(`Collection "${col.id}" has a template without 'src'`);
+          continue;
+        }
+        const filePath = resolve(projectDir, template.src);
+        if (existsSync(filePath)) {
+          ok(`${template.src} exists`);
+        } else {
+          fail(`${template.src} not found`);
+        }
+      }
+    }
+
+    const sizes = flatSizes(col);
+    if (sizes.length > 0) {
+      ok(`Collection "${col.id}" has ${sizes.length} export size(s)`);
+    }
+
+    // Validate outputs
+    if (col.outputs) {
+      for (const output of col.outputs) {
+        if (!output.type) {
+          fail(`Collection "${col.id}" has an output without 'type'`);
+        } else {
+          ok(`Output: ${output.type}`);
+        }
+      }
+    }
+  }
+
+  return { checks, errors };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-assets/open-assets",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Dev server and export tool for app screenshots, icons, and logos. Like Storybook for marketing assets.",
   "type": "module",
   "bin": {
@@ -10,6 +10,7 @@
     "bin/",
     "lib/",
     "public/",
+    "skills/",
     "README.md",
     "LICENSE"
   ],
@@ -37,10 +38,18 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "assets": "node bin/open-assets.mjs render --all -o ./public/img",
+    "test": "node --experimental-vm-modules node_modules/.bin/jest",
+    "release": "./scripts/release.sh"
+  },
   "homepage": "https://openassets.dev",
   "dependencies": {
     "commander": "^13.0.0",
     "open": "^10.0.0",
     "puppeteer": "^24.37.5"
+  },
+  "devDependencies": {
+    "jest": "^30.3.0"
   }
 }

package/public/viewer.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Open Assets</title>
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/icon/32/icon.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/icon/16/icon.png" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
     <style>
@@ -12,6 +14,7 @@
 
       .toolbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(10,10,10,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }
       .toolbar-left { display: flex; align-items: center; gap: 12px; }
+      .toolbar-left img.toolbar-icon { width: 20px; height: 20px; border-radius: 4px; }
       .toolbar-left h1 { font-size: 14px; font-weight: 700; color: #fff; }
       .segmented { display: flex; background: rgba(255,255,255,0.06); border-radius: 6px; padding: 2px; gap: 1px; }
       .seg-btn { padding: 4px 14px; border-radius: 5px; border: none; background: transparent; color: #888; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; font-family: inherit; text-decoration: none; }
@@ -82,6 +85,7 @@
   <body>
     <div class="toolbar">
       <div class="toolbar-left">
+        <img class="toolbar-icon" src="/img/icon/32/icon.png" alt="" />
         <h1 id="app-title">Loading...</h1>
         <div class="segmented" id="tab-bar"></div>
       </div>
@@ -174,7 +178,7 @@
       }
 
       function flatSizes(col) {
-        return (col.exportSizes || []).flatMap(g => g.sizes || []);
+        return col.export || [];
       }
 
       // ---- Build collection tab bar ----
@@ -288,31 +292,30 @@
           }
         }
 
-        // Export sizes grouped by platform
-        for (const group of col.exportSizes || []) {
-          if (group.platform) {
-            const sectionLabel = document.createElement('div');
-            sectionLabel.className = 'section-label';
-            sectionLabel.textContent = group.platform;
-            exportDropdown.appendChild(sectionLabel);
-          }
+        // Export sizes
+        const sizes = col.export || [];
+        if (sizes.length > 0) {
+          const sectionLabel = document.createElement('div');
+          sectionLabel.className = 'section-label';
+          sectionLabel.textContent = 'Sizes';
+          exportDropdown.appendChild(sectionLabel);
+        }
 
-          for (const size of group.sizes || []) {
-            const btn = document.createElement('button');
-            btn.innerHTML = `${size.label} <span class="dim">${size.width} &times; ${size.height}</span>`;
-            btn.addEventListener('click', () => {
-              if (hasMultipleTemplates) {
-                exportZip(size.width, size.height, sw, sh, size.name);
-              } else {
-                exportSinglePNG(col.templates[0], size.width, size.height, sw, sh, size.name);
-              }
-            });
-            exportDropdown.appendChild(btn);
-          }
+        for (const entry of sizes) {
+          const btn = document.createElement('button');
+          btn.innerHTML = `${entry.label} <span class="dim">${entry.size.width} &times; ${entry.size.height}</span>`;
+          btn.addEventListener('click', () => {
+            if (hasMultipleTemplates) {
+              exportZip(entry.size.width, entry.size.height, sw, sh, entry.name);
+            } else {
+              exportSinglePNG(col.templates[0], entry.size.width, entry.size.height, sw, sh, entry.name);
+            }
+          });
+          exportDropdown.appendChild(btn);
         }
 
         // Custom size
-        if (col.exportSizes && flatSizes(col).length > 0 || col.customExport) {
+        if (col.export && col.export.length > 0 || col.customExport) {
           exportDropdown.appendChild(document.createElement('hr'));
 
           const customLabel = document.createElement('div');
@@ -320,8 +323,8 @@
           customLabel.textContent = 'Custom Size';
           exportDropdown.appendChild(customLabel);
 
-          const defaultW = col.customExport?.defaultWidth || flatSizes(col)[0]?.width || sw;
-          const defaultH = col.customExport?.defaultHeight || flatSizes(col)[0]?.height || sh;
+          const defaultW = col.customExport?.defaultWidth || flatSizes(col)[0]?.size?.width || sw;
+          const defaultH = col.customExport?.defaultHeight || flatSizes(col)[0]?.size?.height || sh;
 
           // Check if square (icon-like) for simplified input
           const isSquare = sw === sh;
@@ -446,7 +449,7 @@
 
       // ---- Init ----
       async function init() {
-        const res = await fetch('manifest.json');
+        const res = await fetch('assets.json');
         manifest = await res.json();
 
         // Set title