vanilla stdlib

Author: mbostock

.eslintrc.json

@@ -24,8 +24,8 @@
     "@typescript-eslint/no-unused-vars": ["error", {"ignoreRestSiblings": true}],
     "import/first": "warn",
     "import/newline-after-import": "warn",
+    "import/no-duplicates": "off",
     "import/no-import-module-exports": "warn",
-    "import/no-namespace": "error",
     "import/no-relative-packages": "warn",
     "import/no-unresolved": "off",
     "import/no-unused-modules": "error",

docs/stdlib.md

@@ -0,0 +1,38 @@
+# stdlib
+
+```js echo
+const div = Object.assign(document.createElement("div"), {style: "height: 180px;"});
+const map = L.map(display(div)).setView([51.505, -0.09], 13);
+L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  maxZoom: 19,
+  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+```
+
+```js echo
+const i = view(Inputs.range([0, 1], {label: "Test"}));
+```
+
+```js echo
+i
+```
+
+```js echo
+display(tex`E = mc^2`);
+```
+
+```js echo
+display(dot`digraph G { a -> b -> c; }`);
+```
+
+```js echo
+display(Generators);
+```
+
+```mermaid
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```

src/client/dot.js

@@ -1,4 +1,4 @@
-import {Inspector} from "./runtime.js";
+import {Inspector} from "observablehq:runtime";
 
 export function inspect(value) {
   const inspector = new Inspector(document.createElement("div"));

src/client/inspect.js

@@ -1,26 +1,24 @@
-import {makeDatabaseClient} from "./database.js";
+import {Runtime} from "observablehq:runtime";
+import {registerDatabase, registerFile} from "observablehq:stdlib";
+import {DatabaseClient, FileAttachment, Generators, Mutable, now, width} from "observablehq:stdlib";
 import {inspect, inspectError} from "./inspect.js";
-import {makeLibrary} from "./library.js";
-import {Runtime} from "./runtime.js";
+import * as recommendedLibraries from "./stdlib/recommendedLibraries.js";
+import * as sampleDatasets from "./stdlib/sampleDatasets.js";
 
-const library = makeLibrary();
-const {Generators} = library;
-library.DatabaseClient = () => makeDatabaseClient(resolveDatabaseToken);
+const library = {
+  now,
+  width,
+  DatabaseClient: () => DatabaseClient,
+  FileAttachment: () => FileAttachment,
+  Generators: () => Generators,
+  Mutable: () => Mutable,
+  ...recommendedLibraries,
+  ...sampleDatasets
+};
 
 const runtime = new Runtime(library);
 export const main = runtime.module();
 
-const attachedFiles = new Map();
-const resolveFile = (name) => attachedFiles.get(name);
-main.builtin("FileAttachment", runtime.fileAttachments(resolveFile));
-
-const databaseTokens = new Map();
-async function resolveDatabaseToken(name) {
-  const token = databaseTokens.get(name);
-  if (!token) throw new Error(`Database configuration for ${name} not found`);
-  return token;
-}
-
 export const cellsById = new Map(); // TODO hide
 
 export function define(cell) {
@@ -59,8 +57,8 @@ export function define(cell) {
   v.define(outputs.length ? `cell ${id}` : null, inputs, body);
   variables.push(v);
   for (const o of outputs) variables.push(main.variable(true).define(o, [`cell ${id}`], (exports) => exports[o]));
-  for (const f of files) attachedFiles.set(f.name, {url: f.path, mimeType: f.mimeType});
-  for (const d of databases) databaseTokens.set(d.name, d);
+  for (const f of files) registerFile(f.name, {url: f.path, mimeType: f.mimeType});
+  for (const d of databases) registerDatabase(d.name, d);
 }
 
 // Note: Element.prototype is instanceof Node, but cannot be inserted!

src/client/library.js

@@ -1,11 +1,18 @@
-export function makeDatabaseClient(resolveToken) {
-  return function DatabaseClient(name) {
-    if (new.target !== undefined) throw new TypeError("DatabaseClient is not a constructor");
-    return resolveToken((name += "")).then((token) => new DatabaseClientImpl(name, token));
-  };
+const databases = new Map();
+
+export function registerDatabase(name, token) {
+  if (token == null) databases.delete(name);
+  else databases.set(name, token);
+}
+
+export function DatabaseClient(name) {
+  if (new.target !== undefined) throw new TypeError("DatabaseClient is not a constructor");
+  const token = databases.get((name += ""));
+  if (!token) throw new Error(`Database not found: ${name}`);
+  return new DatabaseClientImpl(name, token);
 }
 
-class DatabaseClientImpl {
+const DatabaseClientImpl = class DatabaseClient {
   #token;
 
   constructor(name, token) {
@@ -64,7 +71,9 @@ class DatabaseClientImpl {
   async sql() {
     return this.query(...this.queryTag.apply(this, arguments));
   }
-}
+};
+
+DatabaseClient.prototype = DatabaseClientImpl.prototype; // instanceof
 
 function coerceBuffer(d) {
   return Uint8Array.from(d.data).buffer;

src/client/main.js

@@ -0,0 +1,39 @@
+import {instance} from "npm:@viz-js/viz";
+
+const viz = await instance();
+
+export default function dot(strings) {
+  let string = strings[0] + "";
+  let i = 0;
+  let n = arguments.length;
+  while (++i < n) string += arguments[i] + "" + strings[i];
+  const svg = viz.renderSVGElement(string, {
+    graphAttributes: {
+      bgcolor: "none",
+      color: "#00000101",
+      fontcolor: "#00000101",
+      fontname: "var(--sans-serif)",
+      fontsize: "12"
+    },
+    nodeAttributes: {
+      color: "#00000101",
+      fontcolor: "#00000101",
+      fontname: "var(--sans-serif)",
+      fontsize: "12"
+    },
+    edgeAttributes: {
+      color: "#00000101"
+    }
+  });
+  for (const e of svg.querySelectorAll("[stroke='#000001'][stroke-opacity='0.003922']")) {
+    e.setAttribute("stroke", "currentColor");
+    e.removeAttribute("stroke-opacity");
+  }
+  for (const e of svg.querySelectorAll("[fill='#000001'][fill-opacity='0.003922']")) {
+    e.setAttribute("fill", "currentColor");
+    e.removeAttribute("fill-opacity");
+  }
+  svg.remove();
+  svg.style = "max-width: 100%; height: auto;";
+  return svg;
+}