rewrite dynamic imports in ojs (#170)

* rewrite dynamic imports in ojs

* adopt getStringLiteralValue

* more dynamic imports + tests (#171)

* clarifies resolveNpmImport, fixes a bug (?) with `import("prettier/plugins/acorn.js")`

* adopt resolveNpmImport

* tests

* revert change to resolveNpmImport

* prettier

* /+esm for .js import in ojs

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>

---------

Co-authored-by: Philippe Rivière <fil@rezo.net>

Author: mbostock

src/javascript/__snapshots__/transpile.test.ts.snap

@@ -1,5 +1,85 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`ignores non-bare Observable JavaScript dynamic imports 1`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("./local.js")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`ignores non-bare Observable JavaScript dynamic imports 2`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("../sibling.js")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`ignores non-bare Observable JavaScript dynamic imports 3`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("/abs.js")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`ignores non-bare Observable JavaScript dynamic imports 4`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.skypack.dev/canvas-confetti")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`ignores non-bare Observable JavaScript dynamic imports 5`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("npm:d3")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
 exports[`transpiles JavaScript expressions 1`] = `
 {
   "autodisplay": true,
@@ -129,6 +209,102 @@ await z;
 }
 `;
 
+exports[`transpiles Observable JavaScript dynamic imports 1`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.jsdelivr.net/npm/d3/+esm")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`transpiles Observable JavaScript dynamic imports 2`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.jsdelivr.net/npm/d3@7/+esm")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`transpiles Observable JavaScript dynamic imports 3`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.jsdelivr.net/npm/@observablehq/plot/+esm")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`transpiles Observable JavaScript dynamic imports 4`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.jsdelivr.net/npm/lodash/fp/+esm")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`transpiles Observable JavaScript dynamic imports 5`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.jsdelivr.net/npm/three@0.150.1/examples/jsm/controls/OrbitControls.js/+esm")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
+exports[`transpiles Observable JavaScript dynamic imports 6`] = `
+{
+  "autodisplay": true,
+  "automutable": false,
+  "autoview": false,
+  "body": "function(){return(
+import("https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css")
+)}",
+  "databases": Set {},
+  "files": Set {},
+  "inputs": [],
+  "output": undefined,
+  "secrets": Set {},
+}
+`;
+
 exports[`transpiles Observable JavaScript import-withs 1`] = `
 {
   "autodisplay": false,

src/javascript/features.ts

@@ -1,5 +1,5 @@
 import type {Node, CallExpression} from "acorn";
-import {getStringLiteralValue, isStringLiteral} from "./literal.js";
+import {getStringLiteralValue, isStringLiteral} from "./strings.js";
 import {findReferences} from "./references.js";
 import {syntaxError} from "./syntaxError.js";
 import {simple} from "./walk.js";

src/javascript/imports/npm.test.ts

@@ -34,6 +34,14 @@ test("adds /+esm as expected", () => {
     resolveNpmImport("npm:prettier/plugins/acorn.js/+esm"),
     "https://cdn.jsdelivr.net/npm/prettier/plugins/acorn.js/+esm" // preserve existing /+esm
   );
+  assert.strictEqual(
+    resolveNpmImport("npm:leaflet/dist/leaflet.css"),
+    "https://cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css" // no /+esm because non-JS file
+  );
+  assert.strictEqual(
+    resolveNpmImport("npm:foo/data.json"),
+    "https://cdn.jsdelivr.net/npm/foo/data.json" // no /+esm because non-JS file
+  );
   assert.strictEqual(
     resolveNpmImport("npm:prettier/plugins/estree"),
     "https://cdn.jsdelivr.net/npm/prettier/plugins/estree/+esm"

src/javascript/literal.ts

@@ -4,7 +4,9 @@ import {parseCell} from "@observablehq/parser";
 import type {Identifier, ImportDeclaration, Node} from "acorn";
 import {rewriteFileExpressions} from "./files.js";
 import {flatMapImportSpecifiers, rewriteImportDeclarations} from "./imports.js";
+import {resolveNpmImport} from "./imports/npm.js";
 import {Sourcemap} from "./sourcemap.js";
+import {getStringLiteralValue, isStringLiteral} from "./strings.js";
 import type {TranspiledJavaScript, TranspileOptions} from "./transpile.js";
 import {transpileJavaScript} from "./transpile.js";
 import {simple} from "./walk.js";
@@ -19,6 +21,7 @@ export function transpileObservable(
   if (cell.tag) throw new Error("tagged ojs cells are not supported");
   const output = new Sourcemap(input).trim();
   rewriteSpecialReferences(output, cell.body);
+  rewriteDynamicImports(output, cell.body);
   if (options?.resolveFiles) rewriteFileExpressions(output, cell.body);
   const inputs = Array.from(new Set(cell.references.map(asReference)));
   let start = "";
@@ -92,6 +95,24 @@ function transformObservableImport(body: ImportDeclaration): void {
   ];
 }
 
+/**
+ * Rewrite a bare dynamic import such as import("d3") to a CDN URL, like
+ * import("https://cdn.jsdelivr.net/npm/d3/+esm"), using the same resolution as
+ * static imports. Protocol (npm:, https:, …) and local imports are left alone.
+ */
+function rewriteDynamicImports(output: Sourcemap, body: Node): void {
+  simple(body, {
+    ImportExpression({source}) {
+      if (!isStringLiteral(source)) return;
+      let value = getStringLiteralValue(source);
+      if (/^(\w+:|\.?\.?\/)/.test(value)) return;
+      if (/\.(js|mjs|cjs)$/.test(value)) value += "/+esm";
+      const resolution = resolveNpmImport(`npm:${value}`);
+      output.replaceLeft(source.start, source.end, JSON.stringify(resolution));
+    }
+  });
+}
+
 /** Rewrite viewof x ↦ viewof$x, and mutable x ↦ mutable$x.value. */
 function rewriteSpecialReferences(output: Sourcemap, body: Node): void {
   simple(body, {

src/javascript/observable.ts

@@ -84,6 +84,23 @@ it("transpiles Observable JavaScript import-withs of views and mutables", () =>
   expect(transpile('import {color} with {foo, viewof bar, mutable baz as qux} from "2d6bf7be248d66f3"', "ojs")).toMatchSnapshot();
 });
 
+it("transpiles Observable JavaScript dynamic imports", () => {
+  expect(transpile('import("d3")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("d3@7")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("@observablehq/plot")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("lodash/fp")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("three@0.150.1/examples/jsm/controls/OrbitControls.js")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("leaflet/dist/leaflet.css")', "ojs")).toMatchSnapshot();
+});
+
+it("ignores non-bare Observable JavaScript dynamic imports", () => {
+  expect(transpile('import("./local.js")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("../sibling.js")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("/abs.js")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("https://cdn.skypack.dev/canvas-confetti")', "ojs")).toMatchSnapshot();
+  expect(transpile('import("npm:d3")', "ojs")).toMatchSnapshot();
+});
+
 it("transpiles import.meta.resolve", () => {
   expect(transpile('import.meta.resolve("npm:d3")', "js")).toMatchSnapshot();
   expect(transpile('import.meta.resolve("./test")', "js", {resolveLocalImports: true})).toMatchSnapshot();