stitch2 0.22.1 → 0.22.3

package/dist/report.js

@@ -2,8 +2,10 @@
  * Consistency report: every shared component cropped from every active screen, next to the component
  * catalog's version, with what differs. Writes <design>/consistency/index.html, which the canvas opens from
  * its sidebar. Usage: stitch2 consistency [kind…]   (kinds: tab-bar, header, icon-button, chip, …)
+ * Signatures and crops are cached in <design>/consistency/known.json: reruns only visit screens that are
+ * new, changed, or lack crops for the requested kinds, and check the issues against every screen.
  */
-import { mkdirSync, writeFileSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { chromium } from '@playwright/test';
 import { config } from './config.js';
@@ -21,67 +23,168 @@ const esc = (s) => String(s ?? '')
     .replaceAll('<', '&lt;')
     .replaceAll('>', '&gt;')
     .replaceAll('"', '&quot;');
+const KNOWN_FILE = join(out, 'known.json');
+const cached = existsSync(KNOWN_FILE)
+    ? JSON.parse(readFileSync(KNOWN_FILE, 'utf8'))
+    : {};
+// A screen needs a visit when it is new, changed, or lacks crops for the requested kinds.
+const needsVisit = (path) => {
+    const hit = cached[path];
+    if (!hit)
+        return true;
+    try {
+        if (statSync(join(ROOT, path)).mtimeMs !== hit.mtime)
+            return true;
+    }
+    catch {
+        return true;
+    }
+    if (!kinds.length)
+        return !hit.kinds.includes('all');
+    return !kinds.every((k) => hit.kinds.includes(k) || hit.kinds.includes('all'));
+};
+const todo = screens.filter((s) => needsVisit(s.path));
+const todoPaths = new Set(todo.map((s) => s.path));
 const server = await startServer(0);
-let browser = await chromium.launch();
-let page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+const CONCURRENCY = 4;
 const known = {};
 const crops = {}; // kind -> path -> image files
-for (const [i, s] of screens.entries()) {
-    if (i > 0 && i % 50 === 0) {
-        // Chromium gets fragile after hundreds of page loads in one browser; a fresh one keeps long runs alive.
-        await page.close().catch(() => { });
-        await browser.close().catch(() => { });
-        browser = await chromium.launch();
-        page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+// Reuse the cached signatures and crops of unchanged screens; only changed screens get a visit.
+for (const s of screens) {
+    const hit = cached[s.path];
+    if (hit && !todoPaths.has(s.path)) {
+        known[s.path] = hit.components;
+        for (const [kind, files] of Object.entries(hit.crops)) {
+            if (kinds.length && !kinds.includes(kind.split(':')[0]))
+                continue;
+            crops[kind] ??= {};
+            crops[kind][s.path] = files;
+        }
     }
-    await page.setViewportSize({ width: s.width, height: 844 });
-    await page
-        .goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 })
-        .catch(() => { });
-    await page.waitForTimeout(600);
-    const found = await page.evaluate(collectComponents, collectOptions());
-    known[s.path] = found.components;
-    for (const [kind, sigs] of Object.entries(found.components)) {
-        if (kinds.length && !kinds.includes(kind.split(':')[0]))
-            continue;
-        const files = [];
-        for (const [i, sig] of sigs.entries()) {
-            const file = `${safe(kind)}/${safe(s.path)}-${i}.png`;
-            mkdirSync(join(out, safe(kind)), { recursive: true });
-            try {
-                // Crop the element plus anything drawn outside it (a raised centre button above a tab bar).
-                const el = page.locator(sig.selector).first();
-                await el.scrollIntoViewIfNeeded({ timeout: 3000 });
-                const clip = await el.evaluate((node) => {
-                    const r = node.getBoundingClientRect();
-                    let top = r.top;
-                    let bottom = r.bottom;
-                    for (const c of node.querySelectorAll('*')) {
-                        const q = c.getBoundingClientRect();
-                        if (q.width && q.height) {
-                            top = Math.min(top, q.top);
-                            bottom = Math.max(bottom, q.bottom);
+}
+const fresh = async () => {
+    const browser = await chromium.launch();
+    const page = await browser.newPage({ viewport: { width: 390, height: 844 }, deviceScaleFactor: 2 });
+    return { browser, page, visits: 0 };
+};
+const pool = await Promise.all(Array.from({ length: Math.min(CONCURRENCY, todo.length) }, fresh));
+/** Component families cropped per visited screen, merged into the cache. */
+const visitedKinds = {};
+let cursor = 0;
+// One screen per worker at a time: workers pull from the queue, so a page is never shared.
+const runOne = async (s, worker) => {
+    try {
+        if (worker.visits > 0 && worker.visits % 50 === 0) {
+            // Chromium gets fragile after hundreds of page loads; a fresh browser keeps long runs alive.
+            await worker.page.close().catch(() => { });
+            await worker.browser.close().catch(() => { });
+            const next = await fresh();
+            worker.browser = next.browser;
+            worker.page = next.page;
+        }
+        worker.visits++;
+        const page = worker.page;
+        await page.setViewportSize({ width: s.width, height: 844 });
+        await page
+            .goto(`http://127.0.0.1:${server.port}/${s.path}`, { waitUntil: 'networkidle', timeout: 30_000 })
+            .catch(() => { });
+        await page.waitForTimeout(600);
+        const found = await page.evaluate(collectComponents, collectOptions());
+        known[s.path] = found.components;
+        visitedKinds[s.path] = new Set();
+        for (const [kind, sigs] of Object.entries(found.components)) {
+            if (kinds.length && !kinds.includes(kind.split(':')[0]))
+                continue;
+            visitedKinds[s.path].add(kind.split(':')[0]);
+            const files = [];
+            for (const [i, sig] of sigs.entries()) {
+                const file = `${safe(kind)}/${safe(s.path)}-${i}.png`;
+                mkdirSync(join(out, safe(kind)), { recursive: true });
+                try {
+                    // Crop the element plus anything drawn outside it (a raised centre button above a tab bar).
+                    const el = page.locator(sig.selector).first();
+                    await el.scrollIntoViewIfNeeded({ timeout: 3000 });
+                    const clip = await el.evaluate((node) => {
+                        const r = node.getBoundingClientRect();
+                        let top = r.top;
+                        let bottom = r.bottom;
+                        for (const c of node.querySelectorAll('*')) {
+                            const q = c.getBoundingClientRect();
+                            if (q.width && q.height) {
+                                top = Math.min(top, q.top);
+                                bottom = Math.max(bottom, q.bottom);
+                            }
                         }
-                    }
-                    return {
-                        x: Math.max(0, r.left),
-                        y: Math.max(0, top),
-                        width: r.width,
-                        height: bottom - Math.max(0, top),
-                    };
-                });
-                if (clip.width < 1 || clip.height < 1)
-                    continue;
-                await page.screenshot({ path: join(out, file), clip });
-                files.push(file);
+                        return {
+                            x: Math.max(0, r.left),
+                            y: Math.max(0, top),
+                            width: r.width,
+                            height: bottom - Math.max(0, top),
+                        };
+                    });
+                    if (clip.width < 1 || clip.height < 1)
+                        continue;
+                    await page.screenshot({ path: join(out, file), clip });
+                    files.push(file);
+                }
+                catch { }
             }
-            catch { }
+            crops[kind] ??= {};
+            crops[kind][s.path] = files;
         }
-        crops[kind] ??= {};
-        crops[kind][s.path] = files;
+        visitedKinds[s.path].add('all');
+    }
+    catch (e) {
+        // A dead page must not kill the other workers: the screen keeps no cache entry and is retried next run.
+        delete known[s.path];
+        delete visitedKinds[s.path];
+        console.error(`consistency: skipping ${s.path} (${String(e).split('\n')[0]})`);
+    }
+};
+const drive = async (worker) => {
+    while (cursor < todo.length)
+        await runOne(todo[cursor++], worker);
+};
+await Promise.all(pool.map((w) => drive(w)));
+// Remember what this run saw: visited screens with fresh mtimes, the rest untouched. Screens that are
+// gone leave the cache; their rows leave the report with them.
+const live = new Set(screens.map((s) => s.path));
+const next = {};
+for (const [path, hit] of Object.entries(cached)) {
+    if (live.has(path) && !todoPaths.has(path))
+        next[path] = hit;
+}
+for (const s of todo) {
+    // Screens that failed keep no cache entry, so the next run retries them.
+    if (!known[s.path])
+        continue;
+    const screenCrops = {};
+    for (const [kind, byPath] of Object.entries(crops)) {
+        if (byPath[s.path])
+            screenCrops[kind] = byPath[s.path];
+    }
+    const prev = cached[s.path];
+    const families = new Set([...(prev?.kinds ?? []), ...(visitedKinds[s.path] ?? [])]);
+    if (!kinds.length)
+        families.add('all');
+    else
+        for (const k of kinds)
+            families.add(k);
+    try {
+        next[s.path] = {
+            mtime: statSync(join(ROOT, s.path)).mtimeMs,
+            components: known[s.path],
+            kinds: [...families],
+            crops: { ...(prev?.crops ?? {}), ...screenCrops },
+        };
     }
+    catch { }
 }
-await browser.close();
+writeFileSync(KNOWN_FILE, JSON.stringify(next));
+await Promise.all(pool.map(async (w) => {
+    await w.page.close().catch(() => { });
+    await w.browser.close().catch(() => { });
+}));
 server.close();
 const issues = consistencyIssues(known, Object.keys(known));
 const ORDER = ['tab-bar', 'header', 'icon-button', 'button:primary:md', 'chip', 'section'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.22.1",
+  "version": "0.22.3",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",