Reuse the browser if files are processed concurrently

Author: remcohaszing

__fixtures__/gantt/output.md

@@ -108,7 +108,7 @@
       <tspan x="10" alignment-baseline="central">Critical tasks</tspan>
     </text>
   </g>
-  <path fill="none" stroke="red" stroke-width="2" d="M70593 25v290"/>
+  <path fill="none" stroke="red" stroke-width="2" d="M70727 25v290"/>
   <text x="292" y="25" font-family="'trebuchet ms',verdana,arial,sans-serif" font-size="18" text-anchor="middle">
     Adding GANTT diagram functionality to mermaid
   </text>

__tests__/index.ts

@@ -2,6 +2,7 @@ import { promises as fs, readdirSync } from 'fs';
 import { join, resolve } from 'path';
 
 import { toMatchFile } from 'jest-file-snapshot';
+import * as puppeteer from 'puppeteer';
 import * as remark from 'remark';
 
 import { defaultSVGOOptions, remarkMermaid, RemarkMermaidOptions } from '../src';
@@ -27,3 +28,38 @@ describe('fixtures', () => {
     expect(contents).toMatchFile(expected);
   });
 });
+
+const markdown = `
+\`\`\`mermaid
+graph TD;
+  A-->B;
+\`\`\`
+`;
+
+it('should not launch the browser if no graphs are defined', async () => {
+  const processor = remark().use(remarkMermaid);
+  jest.spyOn(puppeteer, 'launch');
+  await processor.process('```js\n```');
+  // eslint-disable-next-line jest/no-restricted-matchers
+  expect(puppeteer.launch).not.toHaveBeenCalled();
+});
+
+it('should share the browser for concurrent calls', async () => {
+  const processor = remark().use(remarkMermaid);
+  jest.spyOn(puppeteer, 'launch');
+  await Promise.all(
+    Array.from<string>({ length: 3 })
+      .fill(markdown)
+      .map((content) => processor.process(content)),
+  );
+  expect(puppeteer.launch).toHaveBeenCalledTimes(1);
+});
+
+it('should close the browser if no more files are being processed', async () => {
+  const processor = remark().use(remarkMermaid);
+  jest.spyOn(puppeteer, 'launch');
+  for (const content of Array.from<string>({ length: 3 }).fill(markdown)) {
+    await processor.process(content);
+  }
+  expect(puppeteer.launch).toHaveBeenCalledTimes(3);
+});

jest.config.js

@@ -2,6 +2,9 @@ module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
   collectCoverageFrom: ['<rootDir>/src/*'],
+  clearMocks: true,
+  resetMocks: true,
+  restoreMocks: true,
   globals: {
     'ts-jest': {
       isolatedModules: true,

src/index.ts

@@ -4,7 +4,7 @@ import { pathToFileURL } from 'url';
 // eslint-disable-next-line import/no-unresolved
 import { Code, Parent } from 'mdast';
 import { Mermaid } from 'mermaid';
-import { Browser, launch, LaunchOptions } from 'puppeteer';
+import { Browser, launch, LaunchOptions, Page } from 'puppeteer';
 import * as SVGO from 'svgo';
 import { Attacher } from 'unified';
 import * as visit from 'unist-util-visit';
@@ -89,6 +89,8 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
   theme = 'default',
 } = {}) => {
   const optimizer = svgo && new SVGO(svgo);
+  let browserPromise: Promise<Browser> | undefined;
+  let count = 0;
 
   return async function transformer(ast) {
     const instances: [string, number, Parent][] = [];
@@ -102,10 +104,12 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
       return ast;
     }
 
-    let browser: Browser;
+    count += 1;
+    browserPromise ??= launch(launchOptions);
+    const browser = await browserPromise;
+    let page: Page | undefined;
     try {
-      browser = await launch(launchOptions);
-      const page = await browser.newPage();
+      page = await browser.newPage();
       await page.goto(String(pathToFileURL(resolve(__dirname, '..', 'index.html'))));
       await page.addScriptTag({ path: require.resolve('mermaid/dist/mermaid.min') });
       await page.setViewport({ width: 600, height: 3000 });
@@ -135,7 +139,11 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
         }),
       );
     } finally {
-      // @ts-expect-error The browser is referenced before it’s defined on purpose here.
+      count -= 1;
+      await page?.close();
+    }
+    if (!count) {
+      browserPromise = undefined;
       await browser?.close();
     }