live code (of sorts)

Author: mbostock

.prettierignore

@@ -1 +1,2 @@
+test/input
 test/output

docs/index.md

@@ -3,7 +3,7 @@
 
 In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.
 
-```js echo
+```js show
 Plot.plot({
   y: {percent: true},
   marks: [

package.json

@@ -17,6 +17,8 @@
     "test:prettier": "prettier --check src test"
   },
   "dependencies": {
+    "acorn": "^8.10.0",
+    "acorn-walk": "^8.2.0",
     "highlight.js": "^11.8.0",
     "markdown-it": "^13.0.2",
     "send": "^0.18.0",

src/javascript.ts

@@ -0,0 +1,38 @@
+import type {Options} from "acorn";
+import {Parser} from "acorn";
+import {findAwaits} from "./javascript/awaits.js";
+import {findDeclarations} from "./javascript/declarations.js";
+import {defaultGlobals} from "./javascript/globals.js";
+import {findReferences} from "./javascript/references.js";
+
+export function parseJavaScript(
+  input,
+  {globals = defaultGlobals, ...otherOptions}: Partial<Options> & {globals?: Set<string>} = {}
+) {
+  const options: Options = {...otherOptions, ecmaVersion: 13, sourceType: "module"};
+
+  // Parse the input as a program.
+  let body = Parser.parse(input, options) as any;
+
+  // If the program consists of a single expression statement, it is promoted to
+  // an expression. (Note this means that {foo: 1} is parsed as a statement
+  // rather than an object literal; we could fix that by trying to parse as an
+  // expression first, if desired.) Only program cells are allowed to declare
+  // variables and imports.
+  let declarations;
+  if (body.body.length === 1 && body.body[0].type === "ExpressionStatement") {
+    body = body.body[0].expression;
+  } else {
+    declarations = findDeclarations(body, globals, input);
+  }
+
+  const async = findAwaits(body).length > 0;
+  const references = findReferences(body, globals, input);
+
+  return {
+    body,
+    declarations,
+    references,
+    async
+  };
+}

src/javascript/awaits.js

@@ -0,0 +1,14 @@
+import {recursive} from "acorn-walk";
+
+export function findAwaits(node) {
+  const nodes = [];
+
+  recursive(node, null, {
+    Function() {}, // ignore anything inside a function
+    AwaitExpression(node) {
+      nodes.push(node);
+    }
+  });
+
+  return nodes;
+}

src/javascript/declarations.js

@@ -0,0 +1,61 @@
+import {syntaxError} from "./syntaxError.js";
+
+export function findDeclarations(node, globals, input) {
+  if (node.type !== "Program") throw new Error(`unexpected type: ${node.type}`);
+
+  const declarations = [];
+
+  function declareLocal(node) {
+    if (globals.has(node.name) || node.name === "arguments") {
+      throw syntaxError(`Global '${node.name}' cannot be redefined`, node, input);
+    }
+    declarations.push(node);
+  }
+
+  function declarePattern(node) {
+    switch (node.type) {
+      case "Identifier":
+        declareLocal(node);
+        break;
+      case "ObjectPattern":
+        node.properties.forEach((node) => declarePattern(node));
+        break;
+      case "ArrayPattern":
+        node.elements.forEach((node) => node && declarePattern(node));
+        break;
+      case "Property":
+        declarePattern(node.value);
+        break;
+      case "RestElement":
+        declarePattern(node.argument);
+        break;
+      case "AssignmentPattern":
+        declarePattern(node.left);
+        break;
+      default:
+        throw new Error("Unrecognized pattern type: " + node.type);
+    }
+  }
+
+  for (const child of node.body) {
+    switch (child.type) {
+      case "VariableDeclaration":
+        child.declarations.forEach((declaration) => declarePattern(declaration.id));
+        break;
+      case "ClassDeclaration":
+      case "FunctionDeclaration":
+        declareLocal(child.id);
+        break;
+      case "ImportDefaultSpecifier":
+      case "ImportSpecifier":
+      case "ImportNamespaceSpecifier":
+        declareLocal(child.local);
+        break;
+      case "Class":
+      case "Function":
+        throw new Error(`unexpected type: ${child.type}`);
+    }
+  }
+
+  return declarations;
+}

src/javascript/globals.js

@@ -0,0 +1,85 @@
+export const defaultGlobals = new Set([
+  "Array",
+  "ArrayBuffer",
+  "atob",
+  "AudioContext",
+  "Blob",
+  "Boolean",
+  "BigInt",
+  "btoa",
+  "clearInterval",
+  "clearTimeout",
+  "console",
+  "crypto",
+  "CustomEvent",
+  "DataView",
+  "Date",
+  "decodeURI",
+  "decodeURIComponent",
+  "devicePixelRatio",
+  "document",
+  "encodeURI",
+  "encodeURIComponent",
+  "Error",
+  "escape",
+  "eval",
+  "fetch",
+  "File",
+  "FileList",
+  "FileReader",
+  "Float32Array",
+  "Float64Array",
+  "Function",
+  "Headers",
+  "Image",
+  "ImageData",
+  "Infinity",
+  "Int16Array",
+  "Int32Array",
+  "Int8Array",
+  "Intl",
+  "isFinite",
+  "isNaN",
+  "JSON",
+  "Map",
+  "Math",
+  "NaN",
+  "Number",
+  "navigator",
+  "Object",
+  "parseFloat",
+  "parseInt",
+  "performance",
+  "Path2D",
+  "Promise",
+  "Proxy",
+  "RangeError",
+  "ReferenceError",
+  "Reflect",
+  "RegExp",
+  "cancelAnimationFrame",
+  "requestAnimationFrame",
+  "Set",
+  "setInterval",
+  "setTimeout",
+  "String",
+  "Symbol",
+  "SyntaxError",
+  "TextDecoder",
+  "TextEncoder",
+  "this",
+  "TypeError",
+  "Uint16Array",
+  "Uint32Array",
+  "Uint8Array",
+  "Uint8ClampedArray",
+  "undefined",
+  "unescape",
+  "URIError",
+  "URL",
+  "WeakMap",
+  "WeakSet",
+  "WebSocket",
+  "Worker",
+  "window"
+]);

src/javascript/imports.js

@@ -0,0 +1,19 @@
+import {syntaxError} from "./syntaxError.js";
+
+export function findImports(program, input) {
+  const node = program.body.find(isExport);
+  if (node) throw syntaxError("Illegal export declaration", node, input);
+  return program.body.filter(isImport);
+}
+
+function isImport(node) {
+  return node.type === "ImportDeclaration";
+}
+
+function isExport(node) {
+  return (
+    node.type === "ExportNamedDeclaration" ||
+    node.type === "ExportDefaultDeclaration" ||
+    node.type === "ExportAllDeclaration"
+  );
+}