Merge pull request #173 from marp-team/preview-on-macos-catalina

Support preview mode in macOS Catalina

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixed
 
 - Safari prevents moving slide after too many navigations ([#158](https://github.com/marp-team/marp-cli/issues/158), [#160](https://github.com/marp-team/marp-cli/pull/160))
+- Support preview mode in macOS Catalina ([#173](https://github.com/marp-team/marp-cli/pull/173))
 
 ### Changed
 

src/converter.ts

@@ -1,9 +1,9 @@
 import { MarpOptions } from '@marp-team/marp-core'
 import { Marpit, MarpitOptions } from '@marp-team/marpit'
 import chalk from 'chalk'
-import * as chromeFinder from 'chrome-launcher/dist/chrome-finder'
 import puppeteer from 'puppeteer-core'
 import { URL } from 'url'
+import findChrome from './utils/find-chrome'
 import { silence, warn } from './cli'
 import { Engine } from './engine'
 import metaPlugin from './engine/meta-plugin'
@@ -402,15 +402,9 @@ export class Converter {
       if (process.env.IS_DOCKER || process.env.CI)
         args.push('--disable-features=VizDisplayCompositor')
 
-      const finder: () => string[] = (() => {
-        if (process.env.IS_DOCKER) return () => ['/usr/bin/chromium-browser']
-        if (require('is-wsl')) return chromeFinder.wsl
-        return chromeFinder[process.platform]
-      })()
-
       Converter.browser = await puppeteer.launch({
         args,
-        executablePath: finder ? finder()[0] : undefined,
+        executablePath: findChrome(),
       })
 
       Converter.browser.once('disconnected', () => {

src/preview.ts

@@ -2,6 +2,7 @@ import os from 'os'
 import path from 'path'
 import carlo from 'carlo'
 import { File, FileType } from './file'
+import findChrome from './utils/find-chrome'
 import TypedEventEmitter from './utils/typed-event-emitter'
 import { ConvertType, mimeTypes } from './converter'
 import { CLIError } from './error'
@@ -59,20 +60,16 @@ export class Preview extends TypedEventEmitter<Preview.Events> {
     this.carloInternal = await carlo.launch({
       localDataDir: path.resolve(os.tmpdir(), './marp-cli-carlo'),
       args: [
-        // Fix wrong rendered position of elements in <foreignObject>
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=467484
-        '--enable-blink-gen-property-trees',
-
         // Puppeteer >= v1.13.0 cannot use BGPT due to crbug.com/937609.
-        // https://github.com/GoogleChrome/puppeteer/commit/ef2251d7a722bcd6d183f7876673224ac58f2244
+        // https://github.com/GoogleChrome/puppeteer/blob/master/lib/Launcher.js
         //
         // Related bug is affected only in capturing, so we override
         // `--disable-features` option to prevent disabling BGPT.
-        '--disable-features=site-per-process,TranslateUI',
+        '--disable-features=TranslateUI',
       ],
       height: this.options.height,
       width: this.options.width,
-      channel: ['canary', 'stable'],
+      executablePath: findChrome(),
       icon: Buffer.from(favicon.slice(22), 'base64'),
       title: 'Marp CLI',
     })

src/utils/find-chrome.ts

@@ -0,0 +1,20 @@
+import * as chromeFinder from 'chrome-launcher/dist/chrome-finder'
+
+let cachedPath: string | undefined | false = false
+
+export default function findChrome() {
+  if (cachedPath === false) {
+    const finder: (() => string[]) | undefined = (() => {
+      // Use already known path within Marp CLI official Docker image
+      if (process.env.IS_DOCKER) return () => ['/usr/bin/chromium-browser']
+
+      // Use Chrome installed to Windows within WSL
+      if (require('is-wsl')) return chromeFinder.wsl
+
+      return chromeFinder[process.platform]
+    })()
+
+    cachedPath = finder ? finder()[0] : undefined
+  }
+  return cachedPath
+}

test/preview.ts

@@ -5,6 +5,7 @@ import { Preview, fileToURI } from '../src/preview'
 import { CLIError } from '../src/error'
 
 jest.mock('path')
+jest.setTimeout(15000)
 
 describe('Preview', () => {
   const previews = new Set<Preview>()

test/watcher.ts

@@ -2,7 +2,7 @@ import chokidar from 'chokidar'
 import http from 'http'
 import portfinder from 'portfinder'
 import { File, FileType } from '../src/file'
-import { ThemeSet, Theme } from '../src/theme'
+import { ThemeSet } from '../src/theme'
 import { Watcher, WatchNotifier, notifier } from '../src/watcher'
 
 const mockWsOn = jest.fn()