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

package/dist/server.js

@@ -26,8 +26,7 @@ import * as allIcons from '@tabler/icons-react';
 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 { chromium } from 'playwright-chromium';
 import DomParser from 'dom-parser';
 import path from 'path';
 import axiosRetry from 'axios-retry';
@@ -4221,116 +4220,6 @@ function endpointUpdateMyDataFactory(operations) {
     }
   }, []);
 }
-async function generatePDF(path2) {
-  const width = 1920;
-  const height = 1080;
-  const maxTimeoutPerPage = 0;
-  try {
-    const browser = await puppeteer.launch({
-      args: [
-        `--window-size=${width},${height}`,
-        "--start-fullscreen"
-      ],
-      defaultViewport: { width, height },
-      headless: "shell",
-      ignoreHTTPSErrors: true
-    });
-    const url = new URL(path2);
-    const searchParams = new URLSearchParams(url.search);
-    searchParams.set("print", "true");
-    url.search = searchParams.toString();
-    const page = await browser.newPage();
-    await page.goto(url.toString(), { waitUntil: "networkidle0", timeout: maxTimeoutPerPage });
-    await page.waitForSelector("#bespoke-report", { timeout: maxTimeoutPerPage });
-    await page.evaluate(async () => {
-      await new Promise((resolve) => {
-        const scrollInterval = setInterval(() => {
-          window.scrollBy(0, window.innerHeight);
-        }, 100);
-        const checkNetworkActivity = () => {
-          const activeRequests = performance.getEntriesByType("resource").filter((entry) => entry.duration === 0);
-          return activeRequests.length === 0;
-        };
-        const checkInterval = setInterval(() => {
-          if (checkNetworkActivity()) {
-            clearInterval(scrollInterval);
-            clearInterval(checkInterval);
-            resolve();
-          }
-        }, 1e3);
-      });
-    });
-    const pdf = await page.pdf({
-      displayHeaderFooter: true,
-      footerTemplate: `
-        <div
-          style="
-            color: lightgray; border-top: solid lightgray 1px; font-size: 10px;
-            padding-top: 5px; text-align: center; width: 100%;
-          "
-        >
-          <p>Page <span class="pageNumber" /> of <span class="totalPages" /></p>
-        </div>`,
-      format: "A4",
-      // Letter,Legal,Tabloid,Ledger,A0,A1,A2,A3,A4,A5,A6
-      headerTemplate: `
-        <div
-          style="
-            color: lightgray; border-bottom: solid lightgray 1px; font-size: 10px;
-            padding-bottom: 5px; text-align: center; width: 100%;
-          "
-        >
-          <p class="url" />
-        </div>`,
-      // height: `${height}px`,
-      landscape: false,
-      margin: {
-        bottom: 70,
-        // minimum required for footer msg to display
-        left: 20,
-        right: 20,
-        top: 70
-        // minimum required for header msg to display
-      },
-      omitBackground: true,
-      pageRanges: "",
-      // All
-      // path: "./test.pdf" // Path to save the file
-      preferCSSPageSize: false,
-      // Give any CSS @page size declared in the page priority over what is declared in the width or height or format option.
-      printBackground: true,
-      scale: 1,
-      // From 0.1 to 2
-      tagged: false,
-      // Generate tagged (accessible) PDF.
-      timeout: 0
-      // width: `${width}px`,
-    });
-    await browser.close();
-    return pdf.toString("base64");
-  } catch (error) {
-    console.error("Error generating PDF:", error);
-    throw error;
-  }
-}
-function endpointDownloadReport() {
-  return endpoint("POST", "pdf", async (req, res) => {
-    const { slugs, path: path2 } = req.body;
-    if (!slugs || !path2) {
-      throw new BackendError(400, "Missing path parameter in request.");
-    } else {
-      const url = new URL(path2, req.headers["origin"]);
-      const pdf = await generatePDF(url);
-      return {
-        ok: true,
-        status: 200,
-        data: pdf
-      };
-    }
-  });
-}
-chromium.setHeadlessMode = true;
-chromium.setGraphicsMode = false;
 var minimal_args = [
   "--autoplay-policy=user-gesture-required",
   "--disable-background-networking",
@@ -4370,49 +4259,47 @@ var minimal_args = [
   "--disable-dev-shm-usage",
   "--no-sandbox"
 ];
-var blocked_domains = [
-  "google-analytics.com",
-  "googletagmanager.com"
-];
+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 puppeteer.launch({
+    const browser = await chromium.launch({
       args: [
         `--window-size=${width},${height}`,
-        ...minimal_args,
-        ...chromium.args
-      ],
-      defaultViewport: { width, height, deviceScaleFactor: 2 },
-      ignoreHTTPSErrors: true,
-      executablePath: await chromium.executablePath(),
-      headless: chromium.headless
+        ...minimal_args
+      ]
+    });
+    const context = await browser.newContext({
+      viewport: { width, height },
+      deviceScaleFactor: 2
     });
+    console.timeLog(TIME, "Browser started");
     const url = new URL(path2);
     const searchParams = new URLSearchParams(url.search);
     url.search = searchParams.toString();
-    const page = await browser.newPage();
+    const page = await context.newPage();
+    console.timeLog(TIME, "Creating page");
     await page.addStyleTag({ content: ".bespoke-Section-container{ padding: 1rem !important }" });
-    await page.setRequestInterception(true);
-    page.on("request", (request) => {
-      const url2 = request.url();
-      if (blocked_domains.some((domain) => url2.includes(domain))) {
-        request.abort();
-      } else {
-        request.continue();
-      }
-    });
-    await page.goto(url.toString(), { waitUntil: "networkidle0", timeout: maxTimeoutPerPage });
+    console.timeLog(TIME, "Setting request interceptor");
+    await page.goto(url.toString(), { timeout: maxTimeoutPerPage });
+    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");
       await page.evaluate(() => document.body.style.background = "transparent");
+      console.timeLog(TIME, "Added transparent background");
     }
     if (format === "svg") {
       const element = await page.$(".d3plus-viz");
       const svg = await element?.evaluate((el) => el.outerHTML);
+      console.timeLog(TIME, "Finishing SVG");
+      console.timeEnd(TIME);
+      await browser.close();
       return svg?.replace(/ {4}|[\t\n\r]/gm, "");
     } else {
       const element = await page.$(".bespoke-Section-container");
@@ -4420,11 +4307,15 @@ async function generateImage(path2, section, format = "png", transparent = false
         type: "png",
         omitBackground: true
       });
+      console.timeLog(TIME, "Finishing PNG");
+      console.timeEnd(TIME);
       await browser.close();
       return screenshot;
     }
   } catch (error) {
     console.error("Error generating Image:", error);
+    console.timeLog(TIME, "Finishing with error");
+    console.timeEnd(TIME);
     throw error;
   }
 }
@@ -4550,7 +4441,7 @@ function getEndpointMap(db) {
     endpointRevalidateReportFactory(api),
     endpointRevalidateUrlFactory(),
     endpointReadPrivateBlocksFactory(api),
-    endpointDownloadReport(),
+    // endpointDownloadReport(),
     endpointExportImage(),
     endpointListIconsFactory(api, "tabler"),
     endpointReadIconFactory(api, "tabler"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datawheel/bespoke",
-  "version": "0.6.0-rc.3",
+  "version": "0.6.0-rc.5",
   "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",
@@ -104,8 +103,8 @@
     "nextjs-cors": "^2.1.1",
     "normalizr": "^3.6.2",
     "pg": "^8.7.3",
+    "playwright-chromium": "^1.44.1",
     "pretty-format": "^28.1.1",
-    "puppeteer-core": "^22.10.0",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",
     "react-dom": "^18.2.0",