@hpcc-js/observablehq-compiler 1.1.0

package/README.md

@@ -0,0 +1,106 @@
+# @hpcc-js/observablehq-compiler
+
+An unofficial compiler, interpreter and download tool for [Observable HQ](https://observablehq.com/) notebooks.
+
+* [Quick Start](#quick-start)
+* [Compiler](./src/compiler)
+* [Utilities](./src/util)
+
+## Quick Start
+
+This library contains a command line tool (`ojscc`) for downloading and compiling notebooks and an interpreter for rendering notebooks in the browser:
+* [Command line interface](#command-line-interface)
+* [JS Interpreter](#js-interpreter)
+
+## Command line interface
+
+To call `ojscc` without installing:
+
+```sh
+npx -p @hpcc-js/observablehq-compiler ojscc [download | compile] ...
+```
+
+To install `ojscc` as a global command:
+```sh
+npm install --global @hpcc-js/observablehq-compiler
+```
+
+Then it can be called by:
+```sh
+ojscc [download | compile] ...
+```
+
+### Usage:
+
+General:
+```sh
+ojscc [command]
+
+Commands:
+  ojscc download  Download ObservableHQ Notebook
+  ojscc compile   Compile ObservableHQ Notebook
+
+Options:
+      --version  Show version number                                             [boolean]
+  -h, --help     Show help                                                       [boolean]
+```
+
+Download:
+```sh
+ohqcc download [-o myfile.ojsnb] https://observablehq.com/@user/notebook
+
+Options:
+      --version  Show version number                                             [boolean]
+  -h, --help     Show help                                                       [boolean]
+  -o, --output   Optional output file path
+```
+
+Compile:
+```sh
+ohqcc compile [-o myfile.js] myfile.ojsnb
+
+Options:
+      --version  Show version number                                             [boolean]
+  -h, --help     Show help                                                       [boolean]
+  -o, --output   Optional output file path
+```
+
+## JS Interpreter
+
+To install with npm :
+```
+npm install --save @hpcc-js/observablehq-compiler
+```
+
+The interpreter is 100% compatible with:
+* [ObservableHQ Runtime](https://github.com/observablehq/runtime)
+* [ObservableHQ Inspector](https://github.com/observablehq/inspector)
+* [ObservableHQ Library](https://github.com/observablehq/library)
+
+It also supports fetching notebooks directly from the ObservableHQ repository.
+
+```js
+import { Library, Runtime, Inspector } from "@observablehq/runtime";
+import { download, compile } from "@hpcc-js/observablehq-compiler";
+
+const placeholder = document.getElementById("placeholder");
+
+const ohqnb = await download("https://observablehq.com/@observablehq/summary-table");
+const compiledNB = await compile(ohqnb);
+
+const library = new Library();
+const runtime = new Runtime(library);
+compiledNB(runtime, name => {
+    const div = document.createElement("div");
+    placeholder.appendChild(div);
+    return new Inspector(div);
+});
+```
+
+Which produces (screenshot):
+
+---
+
+![Sumary Table](./resources/summary-table.png)
+
+---

package/bin/ojscc.mjs

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+import fetch, { Blob, blobFrom, blobFromSync, File, fileFrom, fileFromSync, FormData, Headers, Request, Response } from "node-fetch";
+if (!globalThis.fetch) {
+    globalThis.fetch = fetch;
+    globalThis.Headers = Headers;
+    globalThis.Request = Request;
+    globalThis.Response = Response;
+}
+import { promises as fs } from "fs";
+import { compile, download, Writer } from "../dist/index.js";
+import yargsMode from "yargs/yargs";
+
+async function doDownload(url, filePath) {
+    const nb = await download(url);
+    if (filePath) {
+        fs.writeFile(filePath, JSON.stringify(nb, undefined, 4));
+    } else {
+        console.info(nb);
+    }
+}
+
+async function doCompile(url, filePath) {
+    const nb = await download(url);
+    const define = await compile(nb, process.cwd());
+    const w = new Writer();
+    define.write(w);
+    if (filePath) {
+        fs.writeFile(filePath, w.toString());
+    } else {
+        console.info(w.toString());
+    }
+}
+
+const yargs = yargsMode(process.argv.slice(2));
+yargs
+    .scriptName("ojscc")
+    .wrap(Math.min(90, yargs.terminalWidth()))
+    .command("download", "Download ObservableHQ Notebook",
+        function (yargs) {
+            return yargs
+                .usage("ohqcc download [-o myfile.ojsnb] https://observablehq.com/@user/notebook")
+                .demandCommand(1, "URL required")
+                .option("o", {
+                    alias: "output",
+                    describe: "Optional output file path"
+                })
+                ;
+        }, function (argv) {
+            doDownload(argv._[1], argv.o);
+        }
+    )
+    .command("compile", "Compile ObservableHQ Notebook",
+        function (yargs) {
+            return yargs
+                .usage("ohqcc compile [-o myfile.js] myfile.ojsnb")
+                .demandCommand(1, "URL required")
+                .option("o", {
+                    alias: "output",
+                    describe: "Optional output file path"
+                })
+                ;
+        },
+        async function (argv) {
+            doCompile(argv._[1], argv.o);
+        }
+    )
+    .help("h")
+    .alias("h", "help")
+    .epilog("https://github.com/hpcc-systems/Visualization/tree/trunk/packages/observablehq-compiler")
+    ;
+
+yargs.argv;

package/dist/index.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");:root{--syntax-normal:#1b1e23;--syntax-comment:#828282;--syntax-number:#20a5ba;--syntax-keyword:#c30771;--syntax-atom:#10a778;--syntax-string:#008ec4;--syntax-error:#ffbedc;--syntax-unknown-variable:#838383;--syntax-known-variable:#005f87;--syntax-matchbracket:#20bbfc;--syntax-key:#6636b4;--mono-fonts:82%/1.5 Menlo,Consolas,monospace}.observablehq--collapsed,.observablehq--expanded,.observablehq--function,.observablehq--gray,.observablehq--import,.observablehq--string:after,.observablehq--string:before{color:var(--syntax-normal)}.observablehq--collapsed,.observablehq--expanded.observablehq--inspect a{cursor:pointer}.observablehq--field{margin-left:1em;text-indent:-1em}.observablehq--empty{color:var(--syntax_comment)}.observablehq--blue,.observablehq--keyword,a[href]{color:#3182bd}.hljs-deletion,.hljs-variable,.observablehq--forbidden,.observablehq--pink{color:#e377c2}.observablehq--orange{color:#e6550d}.hljs-literal,.observablehq--boolean,.observablehq--null,.observablehq--undefined{color:var(--syntax-atom)}.hljs-bullet,.hljs-link,.hljs-number,.hljs-regexp,.observablehq--bigint,.observablehq--date,.observablehq--green,.observablehq--number,.observablehq--regexp,.observablehq--symbol{color:var(--syntax-number)}.observablehq--index,.observablehq--key{color:var(--syntax-key)}.observablehq--prototype-key{color:#aaa}.observablehq--empty{font-style:oblique}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.observablehq--purple,.observablehq--string{color:var(--syntax-string)}.observablehq--error,.observablehq--red{color:#e7040f}.observablehq--inspect,.observablehq:empty:after,.observablehq>link:only-child,.observablehq>style:only-child{display:block;font:var(--monospace-font);overflow-x:auto;padding:4px 0;white-space:pre}.observablehq--error .observablehq--inspect{white-space:pre-wrap;word-break:break-all}:root{--syntax-diff:#24292e;--syntax-diff-bg:#fff;--hr:rgba(0,0,0,.05);--monospace:Menlo,Consolas,monospace;--monospace-font:14px/1.5 var(--monospace);--serif:"Source Serif Pro","Iowan Old Style","Apple Garamond","Palatino Linotype","Times New Roman","Droid Serif",Times,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--sans-serif:-apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#1b1e23;font:17px/1.5 var(--serif)}body{margin:0 14px}body.fullscreen{margin:0}h1,h2,h3,h4,h5,h6{color:#333;font-weight:700;line-height:1.15;margin-bottom:.25rem;margin-top:0}h2~p,h2~table,h3~p,h3~table,h4~p,h4~table{margin-top:0}.observablehq:first-of-type h1+h2{font-size:20px;font-style:italic;font-weight:400;margin-bottom:1rem}a[href]{text-decoration:none}a[href]:hover{text-decoration:underline}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size:90%}code,pre,tt{font-family:var(--monospace);font-size:14px;line-height:1.5}img{max-width:calc(100vw - 28px)}.katex-display,figcaption,figure,h1,h2,h3,h4,h5,h6,p,table{max-width:640px}blockquote,ol,ul{max-width:600px}blockquote{margin:1rem 1.5rem}ol,ul{padding-left:28px}hr{background:no-repeat 50%/100% 1px linear-gradient(to right,var(--hr),var(--hr));border:none;height:1px;margin:1rem 0;padding:1rem 0}pre{padding:2px 0}.observablehq--md-pre{overflow-x:auto}input:not([type]),input[type=email],input[type=number],input[type=password],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=url]{width:240px}button,canvas,input{vertical-align:middle}button,input,textarea{accent-color:#3b5fc0}table{border-collapse:collapse;font:13px/1.2 var(--sans-serif);width:100%}table code,table pre,table tt{font-size:inherit;line-height:inherit}td>pre:only-child,th>pre:only-child{margin:0;padding:0}th{color:#111;text-align:left;vertical-align:bottom}td{color:#444;vertical-align:top}td,th{padding:3px 6.5px 3px 0}td:last-child,th:last-child{padding-right:0}tr:not(:last-child){border-bottom:1px solid #eee}thead tr{border-bottom:1px solid #ccc}figure,table{margin:1rem 0}figure img{max-width:100%}figcaption{color:var(--syntax-unknown-variable);font:small var(--sans-serif)}.observablehq--caret{margin-right:4px;vertical-align:baseline}.observablehq--field{margin-left:1rem;text-indent:-1rem}.hljs-comment,.observablehq--empty,.observablehq--prototype-key{color:var(--syntax-comment)}.hljs-built_in{color:var(--syntax-known-variable)}.observablehq--unknown{color:var(--syntax-unknown-variable)}.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-type{color:var(--syntax-keyword)}.observablehq{margin:17px 0;min-height:1.5rem;position:relative}.observablehq:before{bottom:1px;content:"";left:-14px;position:absolute;top:0;transition:background-color .25s linear;width:4px}.observablehq--changed:before,.observablehq--running:before{background-color:#a9b0bc;transition:none}.observablehq--error:before{background-color:#e7040f}.observablehq:not(.observablehq--running):empty:after{color:var(--syntax-comment);content:"<detached>";font-style:oblique}.observablehq>link:only-child,.observablehq>style:only-child{color:var(--syntax-keyword);visibility:hidden;white-space:nowrap}.observablehq>link:only-child:before{content:"<link>";pointer-events:none;text-decoration:none;visibility:visible}.observablehq>style:only-child:before{content:"<style>";visibility:visible}.observablehq--inspect.observablehq--import{white-space:normal}.observablehq--inspect::-webkit-scrollbar{display:none}.observablehq--string-expand{background:#eee;border-radius:2px;color:var(--syntax-normal);cursor:pointer;font-size:80%;margin-left:6px;padding:2px 6px;position:sticky;right:0;vertical-align:middle}.observablehq--string-expand:active,.observablehq--string-expand:hover{background:#ddd}

package/dist/index.esm.css

@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");:root{--syntax-normal:#1b1e23;--syntax-comment:#828282;--syntax-number:#20a5ba;--syntax-keyword:#c30771;--syntax-atom:#10a778;--syntax-string:#008ec4;--syntax-error:#ffbedc;--syntax-unknown-variable:#838383;--syntax-known-variable:#005f87;--syntax-matchbracket:#20bbfc;--syntax-key:#6636b4;--mono-fonts:82%/1.5 Menlo,Consolas,monospace}.observablehq--collapsed,.observablehq--expanded,.observablehq--function,.observablehq--gray,.observablehq--import,.observablehq--string:after,.observablehq--string:before{color:var(--syntax-normal)}.observablehq--collapsed,.observablehq--expanded.observablehq--inspect a{cursor:pointer}.observablehq--field{margin-left:1em;text-indent:-1em}.observablehq--empty{color:var(--syntax_comment)}.observablehq--blue,.observablehq--keyword,a[href]{color:#3182bd}.hljs-deletion,.hljs-variable,.observablehq--forbidden,.observablehq--pink{color:#e377c2}.observablehq--orange{color:#e6550d}.hljs-literal,.observablehq--boolean,.observablehq--null,.observablehq--undefined{color:var(--syntax-atom)}.hljs-bullet,.hljs-link,.hljs-number,.hljs-regexp,.observablehq--bigint,.observablehq--date,.observablehq--green,.observablehq--number,.observablehq--regexp,.observablehq--symbol{color:var(--syntax-number)}.observablehq--index,.observablehq--key{color:var(--syntax-key)}.observablehq--prototype-key{color:#aaa}.observablehq--empty{font-style:oblique}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable,.observablehq--purple,.observablehq--string{color:var(--syntax-string)}.observablehq--error,.observablehq--red{color:#e7040f}.observablehq--inspect,.observablehq:empty:after,.observablehq>link:only-child,.observablehq>style:only-child{display:block;font:var(--monospace-font);overflow-x:auto;padding:4px 0;white-space:pre}.observablehq--error .observablehq--inspect{white-space:pre-wrap;word-break:break-all}:root{--syntax-diff:#24292e;--syntax-diff-bg:#fff;--hr:rgba(0,0,0,.05);--monospace:Menlo,Consolas,monospace;--monospace-font:14px/1.5 var(--monospace);--serif:"Source Serif Pro","Iowan Old Style","Apple Garamond","Palatino Linotype","Times New Roman","Droid Serif",Times,serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--sans-serif:-apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#1b1e23;font:17px/1.5 var(--serif)}body{margin:0 14px}body.fullscreen{margin:0}h1,h2,h3,h4,h5,h6{color:#333;font-weight:700;line-height:1.15;margin-bottom:.25rem;margin-top:0}h2~p,h2~table,h3~p,h3~table,h4~p,h4~table{margin-top:0}.observablehq:first-of-type h1+h2{font-size:20px;font-style:italic;font-weight:400;margin-bottom:1rem}a[href]{text-decoration:none}a[href]:hover{text-decoration:underline}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size:90%}code,pre,tt{font-family:var(--monospace);font-size:14px;line-height:1.5}img{max-width:calc(100vw - 28px)}.katex-display,figcaption,figure,h1,h2,h3,h4,h5,h6,p,table{max-width:640px}blockquote,ol,ul{max-width:600px}blockquote{margin:1rem 1.5rem}ol,ul{padding-left:28px}hr{background:no-repeat 50%/100% 1px linear-gradient(to right,var(--hr),var(--hr));border:none;height:1px;margin:1rem 0;padding:1rem 0}pre{padding:2px 0}.observablehq--md-pre{overflow-x:auto}input:not([type]),input[type=email],input[type=number],input[type=password],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=url]{width:240px}button,canvas,input{vertical-align:middle}button,input,textarea{accent-color:#3b5fc0}table{border-collapse:collapse;font:13px/1.2 var(--sans-serif);width:100%}table code,table pre,table tt{font-size:inherit;line-height:inherit}td>pre:only-child,th>pre:only-child{margin:0;padding:0}th{color:#111;text-align:left;vertical-align:bottom}td{color:#444;vertical-align:top}td,th{padding:3px 6.5px 3px 0}td:last-child,th:last-child{padding-right:0}tr:not(:last-child){border-bottom:1px solid #eee}thead tr{border-bottom:1px solid #ccc}figure,table{margin:1rem 0}figure img{max-width:100%}figcaption{color:var(--syntax-unknown-variable);font:small var(--sans-serif)}.observablehq--caret{margin-right:4px;vertical-align:baseline}.observablehq--field{margin-left:1rem;text-indent:-1rem}.hljs-comment,.observablehq--empty,.observablehq--prototype-key{color:var(--syntax-comment)}.hljs-built_in{color:var(--syntax-known-variable)}.observablehq--unknown{color:var(--syntax-unknown-variable)}.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-type{color:var(--syntax-keyword)}.observablehq{margin:17px 0;min-height:1.5rem;position:relative}.observablehq:before{bottom:1px;content:"";left:-14px;position:absolute;top:0;transition:background-color .25s linear;width:4px}.observablehq--changed:before,.observablehq--running:before{background-color:#a9b0bc;transition:none}.observablehq--error:before{background-color:#e7040f}.observablehq:not(.observablehq--running):empty:after{color:var(--syntax-comment);content:"<detached>";font-style:oblique}.observablehq>link:only-child,.observablehq>style:only-child{color:var(--syntax-keyword);visibility:hidden;white-space:nowrap}.observablehq>link:only-child:before{content:"<link>";pointer-events:none;text-decoration:none;visibility:visible}.observablehq>style:only-child:before{content:"<style>";visibility:visible}.observablehq--inspect.observablehq--import{white-space:normal}.observablehq--inspect::-webkit-scrollbar{display:none}.observablehq--string-expand{background:#eee;border-radius:2px;color:var(--syntax-normal);cursor:pointer;font-size:80%;margin-left:6px;padding:2px 6px;position:sticky;right:0;vertical-align:middle}.observablehq--string-expand:active,.observablehq--string-expand:hover{background:#ddd}