WIP Benchmark observable-prerender itself.

benchmark-internal/README.md

@@ -0,0 +1 @@
+# `observable-prerender` Internal Benchmarks

benchmark-internal/basics.md

@@ -0,0 +1,8 @@
+| Command | Mean [s] | Min [s] | Max [s] | Relative |
+|:---|---:|---:|---:|---:|
+| `observable-prerender @d3/bar-chart chart -o ./out/bar-chart.svg` | 1.251 ± 0.432 | 1.055 | 2.472 | 1.00 |
+| `observable-prerender @d3/bar-chart chart -o ./out/bar-chart.png` | 1.354 ± 0.036 | 1.311 | 1.424 | 1.08 ± 0.37 |
+| `observable-prerender @d3/bivariate-choropleth chart -o ./out/choropleth-chart.svg` | 1.479 ± 0.244 | 1.354 | 2.168 | 1.18 ± 0.45 |
+| `observable-prerender @d3/bivariate-choropleth chart -o ./out/choropleth-chart.png` | 1.591 ± 0.048 | 1.534 | 1.695 | 1.27 ± 0.44 |
+| `observable-prerender @asg017/covid19-cases-in-whittier-california chart -o ./out/whittier-chart.svg` | 2.139 ± 0.953 | 1.735 | 4.840 | 1.71 ± 0.96 |
+| `observable-prerender @asg017/covid19-cases-in-whittier-california chart -o ./out/whittier-chart.png` | 2.595 ± 0.620 | 2.015 | 3.844 | 2.07 ± 0.87 |

benchmark-internal/benchmark-internal.sh

@@ -0,0 +1,57 @@
+#!/bin/bash
+BASEDIR=$(dirname "$0")
+OUTDIR="$BASEDIR/out"
+
+PATH="$PATH:$BASEDIR/../bin"
+
+mkdir -p $OUTDIR
+
+bm_basic () {
+    hyperfine --export-markdown basics.md \
+        "observable-prerender @d3/bar-chart chart -o $OUTDIR/bar-chart.svg" \
+        "observable-prerender @d3/bar-chart chart -o $OUTDIR/bar-chart.png" \
+        "observable-prerender @d3/bivariate-choropleth chart -o $OUTDIR/choropleth-chart.svg" \
+        "observable-prerender @d3/bivariate-choropleth chart -o $OUTDIR/choropleth-chart.png" \
+        "observable-prerender @asg017/covid19-cases-in-whittier-california chart -o $OUTDIR/whittier-chart.svg" \
+        "observable-prerender @asg017/covid19-cases-in-whittier-california chart -o $OUTDIR/whittier-chart.png"
+}
+
+bm_format() {
+    hyperfine --export-markdown format.md \
+        "observable-prerender @d3/bar-chart chart -o $OUTDIR/bar-chart.svg" \
+        "observable-prerender @d3/bar-chart chart -o $OUTDIR/bar-chart.png" \
+        "observable-prerender @d3/bar-chart chart -o $OUTDIR/bar-chart.jpeg" \
+        "observable-prerender @d3/bar-chart chart -o $OUTDIR/bar-chart.html"
+}
+
+bm_browser() {
+    node start-headed-browser.js > headed_ws.tmp & 
+    HEADED_PID=$!
+    sleep 3
+    HEADED_WS=$(cat headed_ws.tmp)
+
+    node start-headless-browser.js > headless_ws.tmp & 
+    HEADLESS_PID=$!
+    sleep 3
+    HEADLESS_WS=$(cat headless_ws.tmp)
+
+    echo $HEADED_PID $HEADED_WS 
+    echo $HEADLESS_PID $HEADLESS_WS 
+    echo $OUTDIR
+    hyperfine --export-markdown browser.md \
+        "../bin/observable-prerender @d3/bar-chart chart -o -" \
+        "../bin/observable-prerender @d3/bar-chart chart -o - --browser-wsendpoint $HEADED_WS" \
+        "../bin/observable-prerender @d3/bar-chart chart -o - --browser-wsendpoint $HEADLESS_WS"  
+
+    kill $HEADED_PID $HEADLESS_PID
+
+    rm headed_ws.tmp headless_ws.tmp
+}
+
+bm() {
+    bm_basic
+    bm_format
+    bm_browser
+}
+
+bm

benchmark-internal/browser.md

@@ -0,0 +1,5 @@
+| Command | Mean [s] | Min [s] | Max [s] | Relative |
+|:---|---:|---:|---:|---:|
+| `../bin/observable-prerender @d3/bar-chart chart -o -` | 1.367 ± 0.445 | 1.065 | 2.235 | 3.94 ± 2.64 |
+| `../bin/observable-prerender @d3/bar-chart chart -o - --browser-wsendpoint ws://127.0.0.1:53496/devtools/browser/d88565c0-23f7-40bd-88c5-817bbe4e57f0` | 0.993 ± 0.051 | 0.941 | 1.124 | 2.86 ± 1.68 |
+| `../bin/observable-prerender @d3/bar-chart chart -o - --browser-wsendpoint ws://127.0.0.1:53518/devtools/browser/ff52357a-44e2-4fbc-b25d-be61bc46cf11` | 0.347 ± 0.204 | 0.251 | 0.923 | 1.00 |

benchmark-internal/format.md

@@ -0,0 +1,6 @@
+| Command | Mean [s] | Min [s] | Max [s] | Relative |
+|:---|---:|---:|---:|---:|
+| `observable-prerender @d3/bar-chart chart -o ./out/bar-chart.svg` | 1.321 ± 0.452 | 1.062 | 2.318 | 1.00 |
+| `observable-prerender @d3/bar-chart chart -o ./out/bar-chart.png` | 1.359 ± 0.024 | 1.334 | 1.402 | 1.03 ± 0.35 |
+| `observable-prerender @d3/bar-chart chart -o ./out/bar-chart.jpeg` | 1.462 ± 0.195 | 1.273 | 1.813 | 1.11 ± 0.41 |
+| `observable-prerender @d3/bar-chart chart -o ./out/bar-chart.html` | 1.350 ± 0.344 | 1.120 | 2.253 | 1.02 ± 0.44 |

benchmark-internal/start-headed-browser.js

@@ -0,0 +1,6 @@
+const puppeteer = require("puppeteer");
+async function main() {
+  const browser = await puppeteer.launch({ headless: false });
+  console.log(browser.wsEndpoint());
+}
+main();

benchmark-internal/start-headless-browser.js

@@ -0,0 +1,6 @@
+const puppeteer = require("puppeteer");
+async function main() {
+  const browser = await puppeteer.launch({ headless: true });
+  console.log(browser.wsEndpoint());
+}
+main();

bin/observable-prerender-animate

@@ -1,7 +1,12 @@
 #!/usr/bin/env node
 const { program } = require("commander");
 const { load } = require("../src");
-const { applyBrowserOptions, applyRedefineOptions } = require("./utils.js");
+const {
+  applyBrowserOptions,
+  applyRedefineOptions,
+  getNotebookConfig,
+  runRedefines,
+} = require("./utils.js");
 const { join } = require("path");
 
 function parseArgIter(iter) {

bin/observable-prerender-open

@@ -25,6 +25,7 @@ p.action(async function (argNotebook, argCells) {
       await runRedefines(notebook, opts, true);
       console.log(`Notebook ${argNotebook} loaded.`);
       console.log(notebook.browser.wsEndpoint());
+      process.on("exit", () => notebook.close());
     })
     .catch((error) => {
       console.error(`Error caught when loading ${argNotebook} with`, argCells);

bin/utils.js

@@ -114,7 +114,7 @@ function getNotebookConfig(opts) {
     width,
     height,
     headless,
-    browserWsendpoint,
+    browserWSEndpoint: browserWsendpoint,
   };
 
   if (token) config["OBSERVABLEHQ_API_KEY"] = token;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alex.garcia/observable-prerender",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "Pre-render and programmatically control Observable notebooks with Puppeteer!",
   "main": "src/index.js",
   "author": "Alex Garcia <[email protected]>",

src/index.js

@@ -245,11 +245,11 @@ async function load(notebook, targets = [], config = {}) {
   let launchedBrowser = false;
   if (!browser) {
     if (page) browser = page.browser();
-    else if (browserWSEndpoint)
+    else if (browserWSEndpoint) {
       browser = await puppeteer.connect({
         browserWSEndpoint,
       });
-    else {
+    } else {
       browser = await puppeteer.launch({
         defaultViewport: { width, height },
         args: [`--window-size=${width},${height}`],