Remove puppeteer v2

.github/templates/run-playwright/action.yml

@@ -31,7 +31,7 @@ runs:
         key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ inputs.project }}
         restore-keys: |
           ${{ runner.os }}-playwright-${{ inputs.project }}
-    - run: pnpm playwright install --with-deps ${{ inputs.project }}
+    - run: pnpm playwright install --with-deps chromium ${{ inputs.project }}
       if: steps.playwright-cache.outputs.cache-hit != 'true'
       shell: bash
     - run: pnpm playwright install-deps ${{ inputs.project }}
@@ -51,3 +51,4 @@ runs:
         path: |
           playwright-report
           test-results
+          build

.github/templates/setup-node/action.yml

@@ -13,5 +13,3 @@ runs:
         cache: 'pnpm'
     - run: pnpm install
       shell: bash
-    - run: pnpm exec puppeteer browsers install chrome
-      shell: bash

.github/workflows/ci-improvement.yml

@@ -94,6 +94,7 @@ jobs:
           fetch-depth: 30 # needed for Sentry to get list of commits released
       - name: Setup Node
         uses: './.github/templates/setup-node'
+      - run: npx playwright install chromium
       - run: pnpm build
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
@@ -147,6 +148,7 @@ jobs:
       - uses: actions/checkout@v4
       - name: Setup Node
         uses: './.github/templates/setup-node'
+      - run: npx playwright install chromium
       - run: pnpm build --base /prs/${{ github.event.number }}/ && rm -rf build/songs
         shell: bash
       - name: Deploy PR 🚀

docs/prerendering-ssg.md

@@ -9,10 +9,9 @@ putting params of the URL the query string this is now mitigated.
 ## Solution
 During build, all known paths (kept in `src/routePaths.ts`) are passed to 
 [vite-plugin-html-prerender](https://github.com/saeedafzal/vite-plugin-html-prerender), which then uses Puppeteer to render 
-the pages and save them in appropriate folder structure.
-
-Although the plugin is niche and not very popular, it's simple enough to be easily ported to this project and make it
-compatible with it if it gets abandoned.
+the pages and save them in appropriate folder structure. The project is copied and modified so it
+1. Handles custom `basePath` (needed for branch deployment)
+2. Uses Playwright rather than Puppeteer for rendering (so there's no need to double-install the browsers)
 
 ## Alternative solutions considered
 ### Next.js

package.json

@@ -150,7 +150,6 @@
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "puppeteer": "^21.11.0",
     "react-refresh": "^0.14.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",

vite-plugin-html-prerender/src/renderer.ts

@@ -1,18 +1,17 @@
 import fs from 'fs';
 import path from 'path';
-import puppeteer, { Browser, PuppeteerLaunchOptions } from 'puppeteer';
+import { Browser, chromium, LaunchOptions } from 'playwright';
 import { RenderedRoute } from './types';
 
 export default class Renderer {
   private _browser?: Browser;
 
   async init(): Promise<void> {
-    const options: PuppeteerLaunchOptions = {
-      headless: 'new',
-      args: ['--no-sandbox', '--disable-setuid-sandbox'],
+    const options: LaunchOptions = {
+      args: ['--headless=new', '--no-sandbox', '--disable-setuid-sandbox'],
     };
 
-    this._browser = await puppeteer.launch(options);
+    this._browser = await chromium.launch(options);
   }
 
   async destroy(): Promise<void> {
@@ -26,9 +25,14 @@ export default class Renderer {
 
     const page = await this._browser.newPage();
     await page.goto(`http://localhost:${port}${path.join(basePath, route)}`);
-    await page.waitForSelector(selector, { timeout: 10000 });
-    const html = await page.content();
+    try {
+      await page.waitForSelector(selector, { timeout: 10000, state: 'attached' });
+      await page.waitForLoadState('networkidle');
+    } catch (error) {
+      console.error(`Failed to prerender route: ${route}`);
+    }
 
+    const html = await page.content();
     return { route, html };
   }