@datawheel/bespoke 0.6.0-rc.5 → 0.6.0-rc.7

package/dist/server.js

@@ -26,6 +26,7 @@ import * as allIcons from '@tabler/icons-react';
 import NextCors from 'nextjs-cors';
 import imageType from 'image-type';
 import formidable from 'formidable';
+import { BrowserPool, PlaywrightPlugin } from '@crawlee/browser-pool';
 import { chromium } from 'playwright-chromium';
 import DomParser from 'dom-parser';
 import path from 'path';
@@ -4260,34 +4261,34 @@ var minimal_args = [
   "--no-sandbox"
 ];
 var TIME = "playwright";
-async function generateImage(path2, section, format = "png", transparent = false) {
-  const width = 1366;
-  const height = 768;
-  const maxTimeoutPerPage = 0;
-  console.time(TIME);
-  try {
-    const browser = await chromium.launch({
+var width = 1366;
+var height = 768;
+var browserPool = new BrowserPool({
+  browserPlugins: [new PlaywrightPlugin(chromium, {
+    launchOptions: {
+      headless: true,
+      excecutablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH,
       args: [
         `--window-size=${width},${height}`,
         ...minimal_args
-      ]
-    });
-    const context = await browser.newContext({
+      ],
       viewport: { width, height },
       deviceScaleFactor: 2
-    });
+    }
+  })]
+});
+async function generateImage(path2, section, format = "png", transparent = false) {
+  console.time(TIME);
+  try {
     console.timeLog(TIME, "Browser started");
     const url = new URL(path2);
     const searchParams = new URLSearchParams(url.search);
     url.search = searchParams.toString();
-    const page = await context.newPage();
+    const page = await browserPool.newPage();
     console.timeLog(TIME, "Creating page");
-    await page.addStyleTag({ content: ".bespoke-Section-container{ padding: 1rem !important }" });
     console.timeLog(TIME, "Setting request interceptor");
-    await page.goto(url.toString(), { timeout: maxTimeoutPerPage });
+    await page.goto(url.toString());
     console.timeLog(TIME, "Navigated to page");
-    await page.waitForSelector("#bespoke-report", { timeout: maxTimeoutPerPage });
-    console.timeLog(TIME, "Selector detected");
     await page.waitForLoadState("networkidle");
     if (transparent) {
       await page.$eval(`.bespoke-Section-${section}`, (el) => el["style"].background = "transparent");
@@ -4299,7 +4300,7 @@ async function generateImage(path2, section, format = "png", transparent = false
       const svg = await element?.evaluate((el) => el.outerHTML);
       console.timeLog(TIME, "Finishing SVG");
       console.timeEnd(TIME);
-      await browser.close();
+      await page.close();
       return svg?.replace(/ {4}|[\t\n\r]/gm, "");
     } else {
       const element = await page.$(".bespoke-Section-container");
@@ -4309,7 +4310,7 @@ async function generateImage(path2, section, format = "png", transparent = false
       });
       console.timeLog(TIME, "Finishing PNG");
       console.timeEnd(TIME);
-      await browser.close();
+      await page.close();
       return screenshot;
     }
   } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.6.0-rc.5",
+  "version": "0.6.0-rc.7",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -40,6 +40,7 @@
   "homepage": "https://github.com/Datawheel/reports#readme",
   "dependencies": {
     "@auth0/nextjs-auth0": "^3.5.0",
+    "@crawlee/browser-pool": "^3.10.2",
     "@emotion/react": "^11.10.4",
     "@hello-pangea/dnd": "16.3.0",
     "@mantine/core": "^6.0.19",