Mark bespoke template as not-printable and apply fallback if Puppeteer is required in bespoke template

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Fixed
 
 - Better support for custom Chrome path via `CHROME_PATH` env in WSL ([#288](https://github.com/marp-team/marp-cli/issues/288), [#292](https://github.com/marp-team/marp-cli/pull/292))
+- Apply workaround of printable template fallback, for broken background images caused by regression in Chrome >= 85 ([#293](https://github.com/marp-team/marp-cli/issues/293), [#294](https://github.com/marp-team/marp-cli/pull/294))
 
 ## v0.21.1 - 2020-09-12
 

src/converter.ts

@@ -11,6 +11,7 @@ import metaPlugin from './engine/meta-plugin'
 import { error } from './error'
 import { File, FileType } from './file'
 import templates, {
+  bare,
   Template,
   TemplateMeta,
   TemplateOption,
@@ -94,7 +95,13 @@ export class Converter {
     return template
   }
 
-  async convert(markdown: string, file?: File): Promise<TemplateResult> {
+  async convert(
+    markdown: string,
+    file?: File,
+    {
+      fallbackToPrintableTemplate = false,
+    }: { fallbackToPrintableTemplate?: boolean } = {}
+  ): Promise<TemplateResult> {
     const { lang, globalDirectives, type } = this.options
     const isFile = (f: File | undefined): f is File =>
       !!f && f.type === FileType.File
@@ -114,7 +121,10 @@ export class Converter {
       }
     }
 
-    return await this.template({
+    let template = this.template
+    if (fallbackToPrintableTemplate && !template.printable) template = bare
+
+    return await template({
       ...(this.options.templateOption || {}),
       lang,
       base:
@@ -142,24 +152,32 @@ export class Converter {
     file: File,
     opts: ConvertFileOption = {}
   ): Promise<ConvertResult> {
-    const template = await (async (): Promise<TemplateResult> => {
+    let template: TemplateResult
+
+    const useTemplate = async (
+      fallbackToPrintableTemplate?: boolean
+    ): Promise<TemplateResult> => {
       try {
         silence(!!opts.onlyScanning)
-        return await this.convert((await file.load()).toString(), file)
+        return await this.convert((await file.load()).toString(), file, {
+          fallbackToPrintableTemplate,
+        })
       } finally {
         silence(false)
       }
-    })()
+    }
 
     if (!opts.onlyScanning) {
       const files: File[] = []
 
       switch (this.options.type) {
         case ConvertType.pdf:
+          template = await useTemplate(true)
           files.push(await this.convertFileToPDF(template, file))
           break
         case ConvertType.png:
         case ConvertType.jpeg:
+          template = await useTemplate(true)
           files.push(
             ...(await this.convertFileToImage(template, file, {
               pages: this.options.pages,
@@ -169,9 +187,11 @@ export class Converter {
           )
           break
         case ConvertType.pptx:
+          template = await useTemplate(true)
           files.push(await this.convertFileToPPTX(template, file))
           break
         default:
+          template = await useTemplate()
           files.push(this.convertFileToHTML(template, file))
       }
 
@@ -182,6 +202,9 @@ export class Converter {
 
       // #convertFile must return a single file to serve in server
       return { file, template, newFile: files[0] }
+    } else {
+      // Try conversion with specific template to scan using resources
+      template = await useTemplate()
     }
 
     return { file, template }

src/preview.ts

@@ -78,6 +78,7 @@ export class Preview extends TypedEventEmitter<Preview.Events> {
           return await page.close()
         } catch (e) {
           // Ignore raising error if a target page has already close
+          /* istanbul ignore next */
           if (!e.message.includes('Target closed.')) throw e
         }
       },

src/templates/index.ts

@@ -48,9 +48,11 @@ export interface TemplateResult {
   result: string
 }
 
-export type Template<T = TemplateOption> = (
+export type Template<T = TemplateOption> = ((
   locals: TemplateCoreOption & T
-) => Promise<TemplateResult>
+) => Promise<TemplateResult>) & {
+  printable?: boolean
+}
 
 export const bare: Template<TemplateBareOption> = async (opts) => {
   const rendered = opts.renderer({
@@ -70,6 +72,8 @@ export const bare: Template<TemplateBareOption> = async (opts) => {
   }
 }
 
+Object.defineProperty(bare, 'printable', { value: true })
+
 export const bespoke: Template<TemplateBespokeOption> = async (opts) => {
   const rendered = opts.renderer({
     container: new Element('div', { id: 'p' }),
@@ -93,6 +97,9 @@ export const bespoke: Template<TemplateBespokeOption> = async (opts) => {
   }
 }
 
+// Sometimes bespoke template cannot render background images since Chrome 85
+Object.defineProperty(bespoke, 'printable', { value: false })
+
 async function libJs(fn: string) {
   return (await readFile(path.resolve(__dirname, fn))).toString()
 }