Adopt ESM

.eslintrc.json

@@ -2,7 +2,7 @@
   "extends": "eslint:recommended",
   "parserOptions": {
     "sourceType": "module",
-    "ecmaVersion": 2018
+    "ecmaVersion": 2020
   },
   "env": {
     "browser": true,

.github/workflows/nodejs.yml

@@ -8,7 +8,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [10.x, 12.x]
+        node-version: [14.x, 16.x, 18.x]
 
     runs-on: ${{ matrix.os }}
 

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2018-2021 Observable, Inc.
+Copyright 2018-2022 Observable, Inc.
 
 Permission to use, copy, modify, and/or distribute this software for any purpose
 with or without fee is hereby granted, provided that the above copyright notice

README.md

@@ -2,7 +2,7 @@
 
 [![Node CI](https://github.com/observablehq/inspector/workflows/Node%20CI/badge.svg)](https://github.com/observablehq/inspector/actions?workflow=Node+CI)
 
-This library implements the default value renderer for Observable programs. When used with the [Observable runtime](https://github.com/observablehq/runtime) as [observers](https://github.com/observablehq/runtime/blob/master/README.md#observers), inspectors can insert elements into the DOM and render interactive displays for arbitrary values.
+This library implements the default value renderer for Observable programs. When used with the [Observable runtime](https://github.com/observablehq/runtime) as [observers](https://github.com/observablehq/runtime/blob/main/README.md#observers), inspectors can insert elements into the DOM and render interactive displays for arbitrary values.
 
 To install this library from [npm](https://www.npmjs.com/package/@observablehq/inspector):
 
@@ -16,24 +16,24 @@ This library is also available for download [from unpkg](https://unpkg.com/@obse
 
 ### Inspectors
 
-An inspector implements the Observable runtime’s [*Observer* interface](https://github.com/observablehq/runtime/blob/master/README.md#observers) by rendering the current value of its associated [variable](https://github.com/observablehq/runtime/blob/master/README.md#variables) to a given DOM element. Inspectors display DOM elements “as-is”, and create interactive “devtools”-style inspectors for other arbitrary values such as numbers and objects.
+An inspector implements the Observable runtime’s [*Observer* interface](https://github.com/observablehq/runtime/blob/main/README.md#observers) by rendering the current value of its associated [variable](https://github.com/observablehq/runtime/blob/main/README.md#variables) to a given DOM element. Inspectors display DOM elements “as-is”, and create interactive “devtools”-style inspectors for other arbitrary values such as numbers and objects.
 
-<a href="#Inspector" name="Inspector">#</a> new **Inspector**(*element*) [<>](https://github.com/observablehq/inspector/blob/master/src/index.js "Source")
+<a href="#Inspector" name="Inspector">#</a> new **Inspector**(*element*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source")
 
 Creates a new inspector attached to the specified DOM *element*. See also [Inspector.into](#Inspector_into).
 
-<a href="#inspector_pending" name="inspector_pending">#</a> *inspector*.**pending**() [<>](https://github.com/observablehq/inspector/blob/master/src/index.js "Source")
+<a href="#inspector_pending" name="inspector_pending">#</a> *inspector*.**pending**() [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source")
 
 Applies the `observablehq--running` class to this inspector’s *element*.
 
-<a href="#inspector_fulfilled" name="inspector_fulfilled">#</a> *inspector*.**fulfilled**(*value*) [<>](https://github.com/observablehq/inspector/blob/master/src/index.js "Source")
+<a href="#inspector_fulfilled" name="inspector_fulfilled">#</a> *inspector*.**fulfilled**(*value*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source")
 
 Inspects the specified *value*, replacing the contents of this inspector’s *element* as appropriate, and dispatching an *update* event. If the specified *value* is a DOM element or text node, and the *value* is not already attached to the DOM, it is inserted into this inspector’s *element*, replacing any existing contents. Otherwise, for other arbitrary values such as numbers, arrays, or objects, an expandable display of the specified *value* is generated into this inspector’s *element*. Applies the `observablehq` class to this inspector’s *element*, and for non-element *value*s, the `observablehq--inspect` class.
 
-<a href="#inspector_rejected" name="inspector_rejected">#</a> *inspector*.**rejected**(*error*) [<>](https://github.com/observablehq/inspector/blob/master/src/index.js "Source")
+<a href="#inspector_rejected" name="inspector_rejected">#</a> *inspector*.**rejected**(*error*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source")
 
 Inspects the specified *error*, replacing the contents of this inspector’s *element* as appropriate with the error’s description, and dispatching an *error* event. Applies the `observablehq` and `observablehq--error` class to this inspector’s *element*.
 
-<a href="#Inspector_into" name="Inspector_into">#</a> Inspector.**into**(*container*) [<>](https://github.com/observablehq/inspector/blob/master/src/index.js "Source")
+<a href="#Inspector_into" name="Inspector_into">#</a> Inspector.**into**(*container*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source")
 
-Returns a function that when passed a given [*variable*](https://github.com/observablehq/runtime/blob/master/README.md#variables), returns a new [*inspector*](#inspectors) attached to a new DIV element within the specifier *container* element. If *container* is a string, it represents a selector, and the *container* element becomes the matching selected element. This method can be used with [an Observable module definition](https://github.com/observablehq/runtime/blob/master/README.md#_define) as the observer factory to conveniently render an entire program.
+Returns a function that when passed a given [*variable*](https://github.com/observablehq/runtime/blob/main/README.md#variables), returns a new [*inspector*](#inspectors) attached to a new DIV element within the specifier *container* element. If *container* is a string, it represents a selector, and the *container* element becomes the matching selected element. This method can be used with [an Observable module definition](https://github.com/observablehq/runtime/blob/main/README.md#_define) as the observer factory to conveniently render an entire program.

package.json

@@ -1,46 +1,53 @@
 {
   "name": "@observablehq/inspector",
-  "version": "3.2.4",
-  "license": "ISC",
-  "main": "dist/inspector.js",
-  "module": "src/index.js",
+  "version": "4.0.0-rc.1",
   "author": {
     "name": "Observable, Inc.",
     "url": "https://observablehq.com"
   },
+  "license": "ISC",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "jsdelivr": "dist/inspector.js",
+  "unpkg": "dist/inspector.js",
+  "exports": {
+    "umd": "./dist/inspector.js",
+    "default": "./src/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/observablehq/inspector.git"
   },
+  "files": [
+    "dist/**/*.css",
+    "dist/**/*.js",
+    "src/**/*.css",
+    "src/**/*.js"
+  ],
   "scripts": {
-    "test": "rollup -c && jest",
-    "prepublishOnly": "rollup -c && cleancss -o dist/inspector.css src/style.css",
+    "test": "mkdir -p test/output && mocha 'test/**/*-test.js' && eslint src test",
+    "prepublishOnly": "rm -rf dist && rollup -c && cleancss -o dist/inspector.css src/style.css",
     "postpublish": "git push && git push --tags"
   },
-  "esm": {
-    "mode": "all",
-    "mainFields": [
-      "module"
-    ],
-    "cjs": true
+  "_moduleAliases": {
+    "@observablehq/inspector": "./src/index.js"
+  },
+  "dependencies": {
+    "isoformat": "^0.2.0"
   },
-  "files": [
-    "src/**/*.css",
-    "src/**/*.js",
-    "dist/**/*.css",
-    "dist/**/*.js"
-  ],
   "devDependencies": {
-    "clean-css-cli": "^4.3.0",
-    "eslint": "^7.18.0",
-    "esm": "^3.2.25",
-    "immutable": "^4.0.0-rc.12",
-    "jest": "^26.6.3",
-    "rollup": "^2.37.1",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "clean-css-cli": "^5.6.1",
+    "eslint": "^8.27.0",
+    "immutable": "^4.1.0",
+    "jsdom": "^20.0.2",
+    "mocha": "^10.1.0",
+    "module-alias": "^2.2.2",
+    "rollup": "^3.2.5",
     "rollup-plugin-terser": "^7.0.2"
   },
-  "dependencies": {
-    "isoformat": "^0.2.0"
+  "publishConfig": {
+    "tag": "next"
   }
 }

rollup.config.js

@@ -1,6 +1,6 @@
-import node from "rollup-plugin-node-resolve";
+import node from "@rollup/plugin-node-resolve";
 import {terser} from "rollup-plugin-terser";
-import * as meta from "./package.json";
+import * as meta from "./package.json" assert {type: "json"};
 
 const copyright = `// @observablehq/inspector v${meta.version} Copyright ${(new Date).getFullYear()} Observable, Inc.`;
 

test/.eslintrc.json

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "mocha": true
+  }
+}