chore(docs): use playwright in showcase script

+ ts and use node 22 to run it
+ qwik version
+ update after a week

Author: wmertens

flake.nix

@@ -30,8 +30,8 @@
               bashInteractive
               gitMinimal
 
-              nodejs_20
-              corepack_20
+              nodejs_22
+              corepack_22
 
               # Playwright for the end-to-end tests
               playwright-driver.browsers

packages/docs/package.json

@@ -43,7 +43,7 @@
     "prettier": "3.6.2",
     "prism-themes": "1.9.0",
     "prismjs": "1.30.0",
-    "puppeteer": "22.13.1",
+    "playwright": "1.40.0",
     "qwik-image": "0.0.16",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -75,7 +75,7 @@
     "build.preview": "NODE_OPTIONS=--max-old-space-size=8192 vite build --ssr src/entry.preview.tsx",
     "build.repl-sw": "vite --config vite.config-repl-sw.mts build",
     "build.server": "NODE_OPTIONS=--max-old-space-size=8192 vite build -c adapters/cloudflare-pages/vite.config.mts",
-    "build.showcase": "pnpm node scripts/showcase.js",
+    "build.showcase": "node scripts/showcase.ts",
     "codesandbox.sync": "node codesandbox.sync.ts",
     "contributors": "node contributors.ts",
     "deploy": "wrangler pages publish ./dist",

packages/docs/scripts/showcase.js renamed to packages/docs/scripts/showcase.ts

@@ -1,49 +1,72 @@
-/* eslint-disable no-console */
-
-const fs = require('fs');
-const puppeteer = require('puppeteer');
-const pages = require('./pages.json');
-
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { chromium, type Page } from 'playwright';
+import { fetch } from 'undici';
+import pages from './pages.json' with { type: 'json' };
+
+type InputPageData = {
+  href: string;
+  tags: string[];
+  size: 'small' | 'large';
+  repo?: string;
+};
+type PageData = InputPageData & {
+  title?: string;
+  imgSrc?: string;
+  perf?: {
+    score?: number;
+    inpMs?: number;
+    clsScore?: number;
+    ttfbMs?: number;
+    fcpDisplay?: string;
+    fcpScore?: number;
+    lcpDisplay?: string;
+    lcpScore?: number;
+    ttiDisplay?: string;
+    ttiScore?: number;
+    ttiTime?: number;
+  };
+  version?: string;
+  ts: number;
+};
 const OUTPUT_JSON = 'src/routes/(ecosystem)/showcase/generated-pages.json';
 async function captureMultipleScreenshots() {
-  if (!fs.existsSync('public/showcases')) {
-    fs.mkdirSync('public/showcases');
+  if (!existsSync('public/showcases')) {
+    mkdirSync('public/showcases');
   }
 
   let browser = null;
   const output = [];
   try {
     // launch headless Chromium browser
-    browser = await puppeteer.launch({
+    browser = await chromium.launch({
       headless: true,
-      incognito: true,
     });
-    const incognito = await browser.createBrowserContext();
-    let existingJson = [];
+    const context = await browser.newContext();
+    let existingJson: PageData[] = [];
     try {
-      const data = fs.readFileSync(OUTPUT_JSON, 'utf8');
-      existingJson = JSON.parse(data);
+      const data = readFileSync(OUTPUT_JSON, 'utf8');
+      existingJson = JSON.parse(data) as PageData[];
     } catch {
       // ignore
     }
 
     for (const pageData of pages) {
-      let page;
+      let page: Page;
       try {
-        page = await incognito.newPage();
-        page.setUserAgent(
-          'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'
-        );
+        page = await context.newPage();
+        // page.setUserAgent(
+        //   'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'
+        // );
 
         // set viewport width and height
-        await page.setViewport({
+        await page.setViewportSize({
           width: 1440,
           height: 980,
         });
 
         const href = pageData.href;
         const existing = existingJson.find((item) => item.href === href);
-        if (existing) {
+        if (existing && existing.ts - Date.now() < 1000 * 60 * 60 * 24 * 7) {
           console.log('Skipping page', href);
 
           output.push({
@@ -58,12 +81,13 @@ async function captureMultipleScreenshots() {
         await page.goto(href);
 
         const title = await page.title();
-        const html = await page.$('html');
+        const html = page.locator('html');
         const hasContainer = await html.evaluate((node) => node.hasAttribute('q:container'));
         if (!hasContainer) {
           console.warn('❌ Not Qwik Site', href);
           continue;
         }
+        const version = await html.getAttribute('q:version');
         const filename = href
           .replace('https://', '')
           .replace('/', '_')
@@ -72,12 +96,12 @@ async function captureMultipleScreenshots() {
           .toLowerCase();
 
         await wait(5000);
-        const path = `public/showcases/${filename}.webp`;
+        const path = `public/showcases/${filename}.jpeg`;
         const [pagespeedOutput, _] = await Promise.all([
           getPagespeedData(href),
           page.screenshot({
             path: path,
-            type: 'webp',
+            type: 'jpeg',
             quality: 50,
           }),
         ]);
@@ -119,33 +143,34 @@ async function captureMultipleScreenshots() {
           ttiTime,
         };
         output.push({
+          ...pageData,
+          ts: Date.now(),
           title,
-          imgSrc: `/showcases/${filename}.webp`,
+          imgSrc: `/showcases/${filename}.jpeg`,
           perf,
-          ...pageData,
+          version,
         });
         console.log(`✅ ${title} - (${href})`);
       } catch (err) {
         console.error(err);
       } finally {
-        if (page) {
+        if (page!) {
           await page.close();
         }
       }
     }
   } catch (err) {
-    console.log(`❌ Error: ${err.message}`);
+    console.log(`❌ Error: ${(err as Error)?.message || err}`);
   } finally {
     if (browser) {
       await browser.close();
     }
     console.log(`\n🎉 ${pages.length} screenshots captured.`);
   }
-  fs.writeFileSync(OUTPUT_JSON, JSON.stringify(output, undefined, 2) + '\n');
+  writeFileSync(OUTPUT_JSON, JSON.stringify(output, undefined, 2) + '\n');
 }
 
-async function getPagespeedData(url) {
-  const { fetch } = await import('undici');
+async function getPagespeedData(url: string) {
   const requestURL = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(
     url
   )}&key=AIzaSyApBC9gblaCzWrtEBgHnZkd_B37OF49BfM&category=PERFORMANCE&strategy=MOBILE`;
@@ -157,11 +182,15 @@ async function getPagespeedData(url) {
     if (!res.ok) {
       throw new Error(await res.text());
     }
-    return res.json();
+    return res.json() as Promise<{
+      lighthouseResult: any;
+      loadingExperience: any;
+      pagespeedResult: any;
+    }>;
   });
 }
 captureMultipleScreenshots();
 
-function wait(ms) {
+function wait(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }