feat: add --wait option when exporting (#1472)

docs/guide/exporting.md

@@ -159,6 +159,14 @@ For big presentations you might want to increase the Playwright timeout with `--
 $ slidev export --timeout 60000
 ```
 
+### Wait
+
+Some parts of your slides may require a longer time to render. You can use the `--wait` option to have an extra delay before exporting.
+
+```bash
+$ slidev export --wait 10000
+```
+
 ### Executable path
 
 You can set the browser executable path for Playwright using `--executable-path`

packages/slidev/node/cli.ts

@@ -501,12 +501,18 @@ cli.command(
       type: 'number',
       describe: 'timeout for rendering the print page',
     })
+    .option('wait', {
+      default: 0,
+      type: 'number',
+      describe: 'wait for the specified ms before exporting',
+    })
     .strict()
     .help(),
   async ({
     entry,
     output,
     timeout,
+    wait,
   }) => {
     const { exportNotes } = await import('./commands/export')
     const port = await getPort(12445)
@@ -528,6 +534,7 @@ cli.command(
         port,
         output: output || (options.data.config.exportFilename ? `${options.data.config.exportFilename}-notes` : `${path.basename(entryFile, '.md')}-export-notes`),
         timeout,
+        wait,
       })
       console.log(`${green('  ✓ ')}${dim('exported to ')}./${result}\n`)
 
@@ -571,6 +578,10 @@ function exportOptions<T>(args: Argv<T>) {
       type: 'number',
       describe: 'timeout for rendering the print page',
     })
+    .option('wait', {
+      type: 'number',
+      describe: 'wait for the specified ms before exporting',
+    })
     .option('range', {
       type: 'string',
       describe: 'page ranges to export, for example "1,4-5,6"',

packages/slidev/node/commands/export.ts

@@ -22,6 +22,7 @@ export interface ExportOptions {
   format?: 'pdf' | 'png' | 'md'
   output?: string
   timeout?: number
+  wait?: number
   dark?: boolean
   routerMode?: 'hash' | 'history'
   width?: number
@@ -69,6 +70,7 @@ export interface ExportNotesOptions {
   base?: string
   output?: string
   timeout?: number
+  wait?: number
 }
 
 function createSlidevProgress(indeterminate = false) {
@@ -112,6 +114,7 @@ export async function exportNotes({
   base = '/',
   output = 'notes',
   timeout = 30000,
+  wait = 0,
 }: ExportNotesOptions): Promise<string> {
   const { chromium } = await importPlaywright()
   const browser = await chromium.launch()
@@ -129,6 +132,9 @@ export async function exportNotes({
   await page.waitForLoadState('networkidle')
   await page.emulateMedia({ media: 'screen' })
 
+  if (wait)
+    await page.waitForTimeout(wait)
+
   await page.pdf({
     path: output,
     margin: {
@@ -156,6 +162,7 @@ export async function exportSlides({
   slides,
   base = '/',
   timeout = 30000,
+  wait = 0,
   dark = false,
   routerMode = 'history',
   width = 1920,
@@ -260,6 +267,9 @@ export async function exportSlides({
         await element.evaluate(node => node.style.display = 'none')
       }
     }
+    // Wait for the given time
+    if (wait)
+      await page.waitForTimeout(wait)
   }
 
   async function getSlidesIndex() {
@@ -503,6 +513,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     output,
     format,
     timeout,
+    wait,
     range,
     dark,
     withClicks,
@@ -521,6 +532,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption
     range,
     format: (format || 'pdf') as 'pdf' | 'png' | 'md',
     timeout: timeout ?? 30000,
+    wait: wait ?? 0,
     dark: dark || options.data.config.colorSchema === 'dark',
     routerMode: options.data.config.routerMode,
     width: options.data.config.canvasWidth,

packages/types/src/cli.ts

@@ -7,6 +7,7 @@ export interface ExportArgs extends CommonArgs {
   'output'?: string
   'format'?: string
   'timeout'?: number
+  'wait'?: number
   'range'?: string
   'dark'?: boolean
   'with-clicks'?: boolean