fix: on-demand chromium for dev / prerender (#150)

Author: harlan-zw

src/build/ensureChromium.ts

@@ -136,6 +136,9 @@ export function applyNitroPresetCompatibility(nitroConfig: NitroConfig, options:
     let binding = options.compatibility?.[key]
     if (typeof binding === 'undefined')
       binding = compatibility[key]
+    // TODO avoid breaking changes, remove this in v4
+    if (key === 'chromium' && binding === 'node')
+      binding = 'playwright'
     // @ts-expect-error untyped
     resolvedCompatibility[key] = binding
     return {

src/compatibility.ts

@@ -16,13 +16,12 @@ import {
 } from '@nuxt/kit'
 import type { SatoriOptions } from 'satori'
 import { installNuxtSiteConfig } from 'nuxt-site-config-kit'
-import { isCI, isDevelopment } from 'std-env'
+import { isDevelopment } from 'std-env'
 import { hash } from 'ohash'
 import { relative } from 'pathe'
 import type { ResvgRenderOptions } from '@resvg/resvg-js'
 import type { SharpOptions } from 'sharp'
 import { defu } from 'defu'
-import { Launcher } from 'chrome-launcher'
 import { readPackageJSON } from 'pkg-types'
 import type {
   CompatibilityFlagEnvOverrides,
@@ -31,6 +30,7 @@ import type {
   OgImageComponent,
   OgImageOptions,
   OgImageRuntimeConfig,
+  RuntimeCompatibilitySchema,
 } from './runtime/types'
 import {
   ensureDependencies,
@@ -43,9 +43,8 @@ import { setupDevHandler } from './build/dev'
 import { setupGenerateHandler } from './build/generate'
 import { setupPrerenderHandler } from './build/prerender'
 import { setupBuildHandler } from './build/build'
-import { ensureChromium } from './build/ensureChromium'
+import { checkLocalChrome, checkPlaywrightDependency, isUndefinedOrTruthy } from './util'
 import { normaliseFontInput } from './runtime/utils.pure'
-import { isUndefinedOrTruthy } from './util'
 
 export interface ModuleOptions {
   /**
@@ -201,38 +200,35 @@ export default defineNuxtModule<ModuleOptions>({
       })
     }
 
-    // we can check if we have chrome and disable chromium if not
-    let hasChromeLocally = false
-    try {
-      hasChromeLocally = !!Launcher.getFirstInstallation()
+    // in dev and prerender we rely on local chrome or playwright dependency
+    // for runtime we need playwright dependency
+    const hasChromeLocally = checkLocalChrome()
+    const hasPlaywrightDependency = await checkPlaywrightDependency()
+    const chromeCompatibilityFlags = {
+      prerender: config.compatibility?.prerender?.chromium,
+      dev: config.compatibility?.dev?.chromium,
+      runtime: config.compatibility?.runtime?.chromium,
     }
-    catch {}
-    const isUndefinedOrTruthy = (v?: any) => typeof v === 'undefined' || v !== false
-    if (isUndefinedOrTruthy(config.compatibility?.prerender?.chromium) && isUndefinedOrTruthy(config.compatibility?.runtime?.chromium)) {
-      if (isCI)
-        await ensureChromium(logger)
-
-      const hasPlaywrightDependency = !!(await tryResolveModule('playwright'))
-      if (hasChromeLocally) {
-        // we have chrome locally so we can enable chromium in dev
-        config.compatibility = defu(config.compatibility, <CompatibilityFlagEnvOverrides>{
-          runtime: { chromium: false },
-          dev: { chromium: 'node' },
-          prerender: { chromium: 'node' },
-        })
-      }
-      else if (hasPlaywrightDependency && targetCompatibility.chromium) {
-        // need to disable chromium in all environments
-        config.compatibility = defu(config.compatibility, <CompatibilityFlagEnvOverrides>{
-          runtime: { chromium: 'node' },
-          dev: { chromium: 'node' },
-          prerender: { chromium: 'node' },
-        })
-      }
+    const chromiumBinding: Record<string, RuntimeCompatibilitySchema['chromium'] | null> = {
+      dev: null,
+      prerender: null,
+      runtime: null,
     }
-    else if (!hasChromeLocally && nuxt.options.dev && config.compatibility?.dev?.chromium === 'node') {
-      await ensureChromium(logger)
+    if (nuxt.options.dev) {
+      if (isUndefinedOrTruthy(chromeCompatibilityFlags.dev))
+        chromiumBinding.dev = hasChromeLocally ? 'chrome-launcher' : hasPlaywrightDependency ? 'playwright' : 'on-demand'
     }
+    else {
+      if (isUndefinedOrTruthy(chromeCompatibilityFlags.prerender))
+        chromiumBinding.prerender = hasChromeLocally ? 'chrome-launcher' : hasPlaywrightDependency ? 'playwright' : 'on-demand'
+      if (isUndefinedOrTruthy(chromeCompatibilityFlags.runtime))
+        chromiumBinding.runtime = hasPlaywrightDependency ? 'playwright' : null
+    }
+    config.compatibility = defu(config.compatibility, <CompatibilityFlagEnvOverrides>{
+      runtime: { chromium: chromiumBinding.runtime },
+      dev: { chromium: chromiumBinding.dev },
+      prerender: { chromium: chromiumBinding.prerender },
+    })
 
     // let's check we can access resvg
     await import('@resvg/resvg-js')

src/module.ts

@@ -0,0 +1,12 @@
+import type { Browser } from 'playwright-core'
+import playwrightCore from 'playwright-core'
+import { Launcher } from 'chrome-launcher'
+
+const chromePath = Launcher.getFirstInstallation()
+
+export async function createBrowser(): Promise<Browser | void> {
+  return playwrightCore.chromium.launch({
+    headless: true,
+    executablePath: chromePath,
+  })
+}

src/runtime/core/bindings/chromium/chrome-launcher.ts

@@ -0,0 +1,42 @@
+import type { Browser } from 'playwright-core'
+import { execa } from 'execa'
+import terminate from 'terminate'
+import { createConsola } from 'consola'
+import playwrightCore from 'playwright-core'
+
+let installedChromium = false
+let installChromiumPromise: Promise<void>
+
+export async function createBrowser(): Promise<Browser | void> {
+  if (installChromiumPromise)
+    await installChromiumPromise
+  if (!installedChromium) {
+    installChromiumPromise = new Promise<void>((_resolve) => {
+      const logger = createConsola().withTag('Nuxt OG Image')
+      // avoid problems by installing playwright
+      logger.info('Installing Chromium install for og:image generation...')
+      const installChromeProcess = execa('npx', ['playwright', 'install', 'chromium'], {
+        stdio: 'inherit',
+      })
+
+      installChromeProcess.stderr?.pipe(process.stderr)
+      new Promise((resolve) => {
+        installChromeProcess.on('exit', (e) => {
+          if (e !== 0)
+            logger.error('Failed to install Playwright dependency for og:image generation. Trying anyway...')
+          resolve(true)
+        })
+      }).then(() => {
+        installChromeProcess.pid && terminate(installChromeProcess.pid)
+        logger.info('Installed Chromium install for og:image generation.')
+        _resolve()
+      })
+    }).then(() => {
+      installedChromium = true
+    })
+  }
+
+  return await playwrightCore.chromium.launch({
+    headless: true,
+  })
+}

src/runtime/core/bindings/chromium/node.ts

@@ -0,0 +1,8 @@
+import type { Browser } from 'playwright-core'
+import playwright from 'playwright'
+
+export async function createBrowser(): Promise<Browser | void> {
+  return await playwright.chromium.launch({
+    headless: true,
+  })
+}

src/runtime/core/bindings/chromium/on-demand.ts

@@ -129,7 +129,7 @@ export interface ResolvedFontConfig extends FontConfig { cacheKey: string, data?
 export type InputFontConfig = (`${string}:${number}` | string | FontConfig)
 
 export interface RuntimeCompatibilitySchema {
-  chromium: 'node' | false
+  chromium: 'chrome-launcher' | 'on-demand' | 'playwright' | false
   ['css-inline']: 'node' | 'wasm' | 'wasm-fs' | false
   resvg: 'node' | 'wasm' | 'wasm-fs' | false
   satori: 'node' | 'wasm' | 'wasm-fs' | false

src/runtime/core/bindings/chromium/playwright.ts

@@ -1 +1,22 @@
+import { Launcher } from 'chrome-launcher'
+import { tryResolveModule } from '@nuxt/kit'
+import { isCI } from 'std-env'
+
 export const isUndefinedOrTruthy = (v?: any) => typeof v === 'undefined' || v !== false
+
+export function checkLocalChrome() {
+  // quick path for CI
+  if (isCI)
+    return false
+
+  let hasChromeLocally = false
+  try {
+    hasChromeLocally = !!Launcher.getFirstInstallation()
+  }
+  catch {}
+  return hasChromeLocally
+}
+
+export async function checkPlaywrightDependency() {
+  return !!(await tryResolveModule('playwright'))
+}

src/runtime/types.ts

@@ -17,7 +17,7 @@ describe('debug', () => {
     expect(debug).toMatchInlineSnapshot(`
       {
         "compatibility": {
-          "chromium": false,
+          "chromium": "playwright",
           "css-inline": "node",
           "resvg": "node",
           "satori": "node",