@lilaquadrat/design-core 0.2.2 → 0.3.0

package/tooling/cypress/config.ts

@@ -12,68 +12,82 @@ type CypressConfig = Parameters<typeof defineConfig>[0];
  * pass overrides for anything project specific (baseUrl, viewport, extra
  * setupNodeEvents).
  */
-export function createCypressConfig (overrides: CypressConfig = {}) {
+export function createCypressConfig(overrides: CypressConfig = {}) {
 
-  const { e2e: e2eOverrides, ...rest } = overrides;
+    const { e2e: e2eOverrides, ...rest } = overrides;
 
-  return defineConfig({
-    e2e: {
-      baseUrl       : 'http://localhost:5173/test',
-      /**
+    return defineConfig({
+        e2e: {
+            baseUrl: 'http://localhost:5173/test',
+            /**
        * the shared commands live in the package, so a project does not need a
        * cypress/support folder of its own
        */
-      supportFile   : fileURLToPath(new URL('./support/e2e.ts', import.meta.url)),
-      viewportHeight: 1920,
-      viewportWidth : 1080,
-      video         : false,
-      testIsolation : false,
-      ...e2eOverrides,
-      /**
+            supportFile: fileURLToPath(new URL('./support/e2e.ts', import.meta.url)),
+            viewportHeight: 1920,
+            viewportWidth: 1080,
+            video: false,
+            testIsolation: false,
+            ...e2eOverrides,
+            /**
        * always the framework handler: it chains into an override at the end, so
        * a project can add its own tasks without losing the manifest wiring
        */
-      setupNodeEvents (on, config) {
-        const root = process.cwd();
-        const files = rebuildManifest(root);
-
-        console.log(`[manifest] seeded with ${files.length} existing screenshots`);
-
-        on('after:screenshot', (details) => {
-          files.push(screenshotToManifestPath(root, details.path));
-          writeManifest(root, files);
-        });
-
-        on('before:browser:launch', (browser, launchOptions) => {
-          if (browser.name === 'electron') {
-            launchOptions.preferences.width = 1920
-            launchOptions.preferences.height = 3000
-          }
-
-          if (browser.family === 'chromium' && browser.name !== 'electron') {
-            launchOptions.args.push('--window-size=1920,1080');
-          }
-
-          if (browser.name === 'firefox') {
-            launchOptions.args.push('--width=1920')
-            launchOptions.args.push('--height=3000')
-
-            launchOptions.preferences['layout.css.devPixelsPerPx'] = '1.0'
-          }
-
-          if (browser.name === 'chrome' && browser.isHeadless) {
-            launchOptions.args.push('--window-size=1920,3000');
-            launchOptions.args.push('--force-device-scale-factor=1');
-          }
-
-          return launchOptions
-        })
-
-        return e2eOverrides?.setupNodeEvents?.(on, config);
-      },
-    },
-    ...rest,
-  })
+            setupNodeEvents(on, config) {
+
+                const root = process.cwd();
+                const files = rebuildManifest(root);
+
+                console.log(`[manifest] seeded with ${files.length} existing screenshots`);
+
+                on('after:screenshot', (details) => {
+
+                    files.push(screenshotToManifestPath(root, details.path));
+                    writeManifest(root, files);
+                
+                });
+
+                on('before:browser:launch', (browser, launchOptions) => {
+
+                    if (browser.name === 'electron') {
+
+                        launchOptions.preferences.width = 1920
+                        launchOptions.preferences.height = 3000
+                    
+                    }
+
+                    if (browser.family === 'chromium' && browser.name !== 'electron') {
+
+                        launchOptions.args.push('--window-size=1920,1080');
+                    
+                    }
+
+                    if (browser.name === 'firefox') {
+
+                        launchOptions.args.push('--width=1920')
+                        launchOptions.args.push('--height=3000')
+
+                        launchOptions.preferences['layout.css.devPixelsPerPx'] = '1.0'
+                    
+                    }
+
+                    if (browser.name === 'chrome' && browser.isHeadless) {
+
+                        launchOptions.args.push('--window-size=1920,3000');
+                        launchOptions.args.push('--force-device-scale-factor=1');
+                    
+                    }
+
+                    return launchOptions
+                
+                })
+
+                return e2eOverrides?.setupNodeEvents?.(on, config);
+            
+            },
+        },
+        ...rest,
+    })
 
 }
 

package/tooling/cypress/manifest-utils.mjs

@@ -1,40 +1,52 @@
 import { writeFileSync, readdirSync, statSync, existsSync } from 'fs';
 import { resolve, join, relative } from 'path';
 
-export function walkImages (dir, base = dir) {
-  return readdirSync(dir).flatMap((entry) => {
-    const full = join(dir, entry);
-
-    if (statSync(full).isDirectory()) return walkImages(full, base);
-    if (/\.(png|jpe?g)$/i.test(entry)) return [full.slice(base.length + 1).replace(/\\/g, '/')];
-    return [];
-  });
+export function walkImages(dir, base = dir) {
+
+    return readdirSync(dir).flatMap((entry) => {
+
+        const full = join(dir, entry);
+
+        if (statSync(full).isDirectory()) return walkImages(full, base);
+        if (/\.(png|jpe?g)$/i.test(entry)) return [full.slice(base.length + 1).replace(/\\/g, '/')];
+        return [];
+    
+    });
+
 }
 
-export function writeManifest (root, files) {
-  const content = `window.__SCREENSHOTS__ = ${JSON.stringify(files.slice().sort(), null, 2)};\n`;
+export function writeManifest(root, files) {
+
+    const content = `window.__SCREENSHOTS__ = ${JSON.stringify(files.slice().sort(), null, 2)};\n`;
+
+    writeFileSync(resolve(root, 'cypress/manifest.js'), content, 'utf-8');
 
-  writeFileSync(resolve(root, 'cypress/manifest.js'), content, 'utf-8');
 }
 
-export function scanScreenshots (root) {
-  const screenshotsDir = resolve(root, 'cypress/screenshots');
+export function scanScreenshots(root) {
 
-  if (!existsSync(screenshotsDir)) return [];
+    const screenshotsDir = resolve(root, 'cypress/screenshots');
+
+    if (!existsSync(screenshotsDir)) return [];
+
+    return walkImages(screenshotsDir).map((f) => `screenshots/${f}`);
 
-  return walkImages(screenshotsDir).map((f) => `screenshots/${f}`);
 }
 
-export function rebuildManifest (root = process.cwd()) {
-  const files = scanScreenshots(root);
+export function rebuildManifest(root = process.cwd()) {
+
+    const files = scanScreenshots(root);
 
-  writeManifest(root, files);
+    writeManifest(root, files);
+
+    return files;
 
-  return files;
 }
 
-export function screenshotToManifestPath (root, absolutePath) {
-  const screenshotsDir = resolve(root, 'cypress/screenshots');
+export function screenshotToManifestPath(root, absolutePath) {
+
+    const screenshotsDir = resolve(root, 'cypress/screenshots');
+
+    return `screenshots/${relative(screenshotsDir, absolutePath).replace(/\\/g, '/')}`;
 
-  return `screenshots/${relative(screenshotsDir, absolutePath).replace(/\\/g, '/')}`;
 }

package/tooling/cypress/run-parallel.mjs

@@ -9,33 +9,33 @@ import { resolve } from 'path';
 // gallery) run 3-6x longer than the rest and would otherwise dominate one shard.
 // Unlisted specs (new ones added later) fall back to the average below.
 const KNOWN_DURATIONS = {
-  'blog-intro.cy.ts'    : 41,
-  'event.cy.ts'         : 25,
-  'gallery.cy.ts'       : 194,
-  'navigation.cy.ts'    : 64,
-  'prices.cy.ts'        : 19,
-  'contact.cy.ts'       : 94,
-  'facts.cy.ts'         : 103,
-  'location.cy.ts'      : 3,
-  'pictureandtext.cy.ts': 152,
-  'text.cy.ts'          : 29,
-  'compare.cy.ts'       : 39,
-  'eventlist.cy.ts'     : 44,
-  'index.cy.ts'         : 79,
-  'picture.cy.ts'       : 376,
-  'quote.cy.ts'         : 40,
-  'FAQ.cy.ts'           : 95,
-  'emotion.cy.ts'       : 197,
-  'footer.cy.ts'        : 26,
-  'menu.cy.ts'          : 31,
-  'picturegroup.cy.ts'  : 300,
-  'timeline.cy.ts'      : 256,
+    'blog-intro.cy.ts': 41,
+    'event.cy.ts': 25,
+    'gallery.cy.ts': 194,
+    'navigation.cy.ts': 64,
+    'prices.cy.ts': 19,
+    'contact.cy.ts': 94,
+    'facts.cy.ts': 103,
+    'location.cy.ts': 3,
+    'pictureandtext.cy.ts': 152,
+    'text.cy.ts': 29,
+    'compare.cy.ts': 39,
+    'eventlist.cy.ts': 44,
+    'index.cy.ts': 79,
+    'picture.cy.ts': 376,
+    'quote.cy.ts': 40,
+    'FAQ.cy.ts': 95,
+    'emotion.cy.ts': 197,
+    'footer.cy.ts': 26,
+    'menu.cy.ts': 31,
+    'picturegroup.cy.ts': 300,
+    'timeline.cy.ts': 256,
 };
 const root = process.cwd();
 const durationsFile = resolve(root, 'cypress/durations.json');
 const DURATIONS = existsSync(durationsFile)
-  ? { ...KNOWN_DURATIONS, ...JSON.parse(readFileSync(durationsFile, 'utf-8')) }
-  : KNOWN_DURATIONS;
+    ? { ...KNOWN_DURATIONS, ...JSON.parse(readFileSync(durationsFile, 'utf-8')) }
+    : KNOWN_DURATIONS;
 const AVG_DURATION = Object.values(DURATIONS).reduce((a, b) => a + b, 0) / Object.keys(DURATIONS).length;
 const cypressBin = resolve(root, 'node_modules/.bin/cypress');
 const specsDir = resolve(root, 'cypress/e2e');
@@ -46,14 +46,16 @@ const shards = Array.from({ length: shardCount }, () => ({ specs: [], total: 0 }
 // Longest-processing-time-first: sort heaviest specs first, always drop the next
 // spec into whichever shard currently has the least total weight.
 specNames
-  .map((name) => ({ name, duration: DURATIONS[name] ?? AVG_DURATION }))
-  .sort((a, b) => b.duration - a.duration)
-  .forEach(({ name, duration }) => {
-    const lightest = shards.reduce((min, s) => (s.total < min.total ? s : min), shards[0]);
+    .map((name) => ({ name, duration: DURATIONS[name] ?? AVG_DURATION }))
+    .sort((a, b) => b.duration - a.duration)
+    .forEach(({ name, duration }) => {
 
-    lightest.specs.push(`cypress/e2e/${name}`);
-    lightest.total += duration;
-  });
+        const lightest = shards.reduce((min, s) => (s.total < min.total ? s : min), shards[0]);
+
+        lightest.specs.push(`cypress/e2e/${name}`);
+        lightest.total += duration;
+    
+    });
 
 console.log(`[parallel] running ${specNames.length} specs across ${shardCount} shards (est. longest shard ~${Math.round(Math.max(...shards.map((s) => s.total)) / 60)}m)`);
 
@@ -62,12 +64,16 @@ console.log(`[parallel] running ${specNames.length} specs across ${shardCount} s
 // every shard has finished — the "cy:parallel" script always follows this up with
 // a single authoritative `generate-manifest.js` rebuild over the full directory.
 const runs = shards.map(({ specs }, i) => new Promise((resolveRun, rejectRun) => {
-  const child = spawn(cypressBin, ['run', '--spec', specs.join(',')], { stdio: 'inherit' });
 
-  child.on('exit', (code) => {
-    if (code === 0) resolveRun();
-    else rejectRun(new Error(`shard ${i} failed (exit code ${code})`));
-  });
+    const child = spawn(cypressBin, ['run', '--spec', specs.join(',')], { stdio: 'inherit' });
+
+    child.on('exit', (code) => {
+
+        if (code === 0) resolveRun();
+        else rejectRun(new Error(`shard ${i} failed (exit code ${code})`));
+    
+    });
+
 }));
 const results = await Promise.allSettled(runs);
 const failed = results.filter((r) => r.status === 'rejected');