@datawheel/bespoke 0.6.0-rc.3 → 0.6.0-rc.4

package/dist/server.js

@@ -27,7 +27,7 @@ import NextCors from 'nextjs-cors';
 import imageType from 'image-type';
 import formidable from 'formidable';
 import puppeteer from 'puppeteer-core';
-import chromium from '@sparticuz/chromium';
+import puppeteer2 from 'puppeteer';
 import DomParser from 'dom-parser';
 import path from 'path';
 import axiosRetry from 'axios-retry';
@@ -4329,8 +4329,6 @@ function endpointDownloadReport() {
     }
   });
 }
-chromium.setHeadlessMode = true;
-chromium.setGraphicsMode = false;
 var minimal_args = [
   "--autoplay-policy=user-gesture-required",
   "--disable-background-networking",
@@ -4378,22 +4376,23 @@ async function generateImage(path2, section, format = "png", transparent = false
   const width = 1366;
   const height = 768;
   const maxTimeoutPerPage = 0;
+  console.time("puppeteer");
   try {
-    const browser = await puppeteer.launch({
+    const browser = await puppeteer2.launch({
       args: [
         `--window-size=${width},${height}`,
-        ...minimal_args,
-        ...chromium.args
+        ...minimal_args
       ],
       defaultViewport: { width, height, deviceScaleFactor: 2 },
       ignoreHTTPSErrors: true,
-      executablePath: await chromium.executablePath(),
-      headless: chromium.headless
+      headless: true
     });
+    console.timeLog("puppeteer", "Browser started");
     const url = new URL(path2);
     const searchParams = new URLSearchParams(url.search);
     url.search = searchParams.toString();
     const page = await browser.newPage();
+    console.timeLog("puppeteer", "Creating page");
     await page.addStyleTag({ content: ".bespoke-Section-container{ padding: 1rem !important }" });
     await page.setRequestInterception(true);
     page.on("request", (request) => {
@@ -4404,15 +4403,22 @@ async function generateImage(path2, section, format = "png", transparent = false
         request.continue();
       }
     });
+    console.timeLog("puppeteer", "Setting request interceptor");
     await page.goto(url.toString(), { waitUntil: "networkidle0", timeout: maxTimeoutPerPage });
+    console.timeLog("puppeteer", "Navigated to page");
     await page.waitForSelector("#bespoke-report", { timeout: maxTimeoutPerPage });
+    console.timeLog("puppeteer", "Selector detected");
     if (transparent) {
       await page.$eval(`.bespoke-Section-${section}`, (el) => el["style"].background = "transparent");
       await page.evaluate(() => document.body.style.background = "transparent");
+      console.timeLog("puppeteer", "Added transparent background");
     }
     if (format === "svg") {
       const element = await page.$(".d3plus-viz");
       const svg = await element?.evaluate((el) => el.outerHTML);
+      console.timeLog("puppeteer", "Finishing SVG");
+      console.timeEnd("puppeteer");
+      await browser.close();
       return svg?.replace(/ {4}|[\t\n\r]/gm, "");
     } else {
       const element = await page.$(".bespoke-Section-container");
@@ -4420,11 +4426,15 @@ async function generateImage(path2, section, format = "png", transparent = false
         type: "png",
         omitBackground: true
       });
+      console.timeLog("puppeteer", "Finishing PNG");
+      console.timeEnd("puppeteer");
       await browser.close();
       return screenshot;
     }
   } catch (error) {
     console.error("Error generating Image:", error);
+    console.timeLog("puppeteer", "Finishing with error");
+    console.timeEnd("puppeteer");
     throw error;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.6.0-rc.3",
+  "version": "0.6.0-rc.4",
   "description": "Content management system for creating automated data reports",
   "exports": {
     ".": {
@@ -52,7 +52,6 @@
     "@mantine/prism": "^6.0.19",
     "@monaco-editor/react": "^4.4.5",
     "@reduxjs/toolkit": "^1.8.4",
-    "@sparticuz/chromium": "^123.0.1",
     "@tabler/icons-react": "^2.15.0",
     "@tiptap/extension-hard-break": "^2.2.2",
     "@tiptap/extension-history": "^2.2.2",
@@ -105,6 +104,7 @@
     "normalizr": "^3.6.2",
     "pg": "^8.7.3",
     "pretty-format": "^28.1.1",
+    "puppeteer": "^22.10.0",
     "puppeteer-core": "^22.10.0",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",