type=module; update dependencies (observablehq#342)

* type=module; update dependencies * remove cjs bundle * add the *mode* aggregation (observablehq#463) the plot example shows the most common word of length x as a title for each bar closes observablehq#420 (cherry-pick of ea9f8cd) * fix path to d3’s package.json * remove erroneous hard wrap Co-authored-by: Philippe Rivière <[email protected]>
yurivish · Jul 30, 2021 · 13052a8 · 13052a8
1 parent d58a749
commit 13052a8
Show file tree

Hide file tree

Showing 33 changed files with 2,780 additions and 1,677 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
     - uses: actions/checkout@v2

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,9 +10,7 @@ cd plot
 yarn
 ```
 
-Plot is written in ES modules and uses [Snowpack](https://snowpack.dev/) for
-development; this means that you can edit the Plot source code and examples, and
-they’ll update live as you save changes. To start Snowpack:
+Plot is written in ES modules and uses [Snowpack](https://snowpack.dev/) for development; this means that you can edit the Plot source code and examples, and they’ll update live as you save changes. To start Snowpack:
 
 ```
 yarn dev
@@ -24,15 +22,9 @@ This should open http://localhost:8008/ where you can browse the tests.
 
 Plot has both unit tests and snapshot tests.
 
-**Unit tests** live in `test` and have the `-test.js` extension. These tests are
-written using [Tape](https://github.com/substack/tape) (more precisely,
-[tape-await](https://github.com/mbostock/tape-await) for easier async testing).
-Generally speaking, unit tests make specific assertions about the behavior of
-Plot’s internals and helper methods.
+**Unit tests** live in `test` and have the `-test.js` extension. These tests are written using [Mocha](https://mochajs.org). Generally speaking, unit tests make specific assertions about the behavior of Plot’s internals and helper methods.
 
-**Snapshot tests** live in `test/plots`; these also serve as examples of how to
-use the Plot API. Each snapshot test defines a plot by exporting a default async
-function. For example, here’s a line chart using BLS unemployment data:
+**Snapshot tests** live in `test/plots`; these also serve as examples of how to use the Plot API. Each snapshot test defines a plot by exporting a default async function. For example, here’s a line chart using BLS unemployment data:
 
 ```js
 import * as Plot from "@observablehq/plot";
@@ -49,32 +41,19 @@ export default async function() {
 }
 ```
 
-When a snapshot test is run, its output is compared against the SVG snapshot
-saved in the `test/output` folder. This makes it easier to see the effect of
-code changes and to catch unintended changes.
+When a snapshot test is run, its output is compared against the SVG snapshot saved in the `test/output` folder. This makes it easier to see the effect of code changes and to catch unintended changes.
 
-To add a new snapshot test, create a new JavaScript file in the `test/plots`
-folder. Then register your test in the test registry, `test/plots/index.js`.
-Once you’ve registered your test, it will also appear automatically in the test
-browser (http://localhost:8008), where you can inspect and debug the output.
-(Snapshot tests must have deterministic, reproducible behavior; they should not
-depend on live data, external servers, the current time, the weather, etc. To
-use randomness in a test, use a seeded random number generator such as
-[d3.randomLcg](https://github.com/d3/d3-random/blob/master/README.md#randomLcg).)
+To add a new snapshot test, create a new JavaScript file in the `test/plots` folder. Then register your test in the test registry, `test/plots/index.js`. Once you’ve registered your test, it will also appear automatically in the test browser (http://localhost:8008), where you can inspect and debug the output. (Snapshot tests must have deterministic, reproducible behavior; they should not depend on live data, external servers, the current time, the weather, etc. To use randomness in a test, use a seeded random number generator such as [d3.randomLcg](https://github.com/d3/d3-random/blob/master/README.md#randomLcg).)
 
 To run the tests:
 
 ```
 yarn test
 ```
 
-This will automatically generate any missing snapshots in `test/output`, which
-you should remember to `git add` before committing your changes. (If you forget,
-your PR will fail in CI, and you’ll get a reminder.)
+This will automatically generate any missing snapshots in `test/output`, which you should remember to `git add` before committing your changes. (If you forget, your PR will fail in CI, and you’ll get a reminder.)
 
-If your code intentionally changes some of the existing snapshots, simply blow
-away the existing snapshots and run the tests again. You can then review what’s
-changed using `git diff`.
+If your code intentionally changes some of the existing snapshots, simply blow away the existing snapshots and run the tests again. You can then review what’s changed using `git diff`.
 
 ```
 rm -rf test/output

diff --git a/README.md b/README.md
@@ -992,6 +992,7 @@ The following aggregation methods are supported:
 * *median* - the median value
 * *deviation* - the standard deviation
 * *variance* - the variance per [Welford’s algorithm](https://en.wikipedia.org/wiki/Algorithms_for_calculating_variance#Welford's_online_algorithm)
+* *mode* - the value with the most occurrences
 * a function to be passed the array of values for each bin
 * an object with a *reduce* method
 

diff --git a/esm.js b/esm.js
diff --git a/package.json b/package.json
@@ -7,10 +7,15 @@
     "url": "https://observablehq.com"
   },
   "license": "ISC",
-  "main": "dist/plot.cjs.js",
+  "type": "module",
+  "main": "src/index.js",
+  "module": "src/index.js",
   "jsdelivr": "dist/plot.umd.min.js",
   "unpkg": "dist/plot.umd.min.js",
-  "module": "src/index.js",
+  "exports": {
+    "umd": "./dist/plot.umd.min.js",
+    "default": "./src/index.js"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/observablehq/plot.git"
@@ -20,35 +25,38 @@
     "src/**/*.js"
   ],
   "scripts": {
-    "bundle": "rm -rf dist && rollup -c",
-    "test": "mkdir -p test/output && tape -r ./esm.js -r esm -r module-alias/register 'test/**/*-test.js' | tap-dot && node -r ./esm.js -r esm -r module-alias/register test/plot.js | tap-dot && eslint src test",
-    "prepublishOnly": "yarn bundle",
+    "test": "mkdir -p test/output && mocha -r module-alias/register 'test/**/*-test.js' && mocha -r module-alias/register test/plot.js && eslint src test",
+    "prepublishOnly": "rm -rf dist && rollup -c",
     "postpublish": "git push && git push --tags",
     "dev": "snowpack dev"
   },
   "_moduleAliases": {
     "@observablehq/plot": "./src/index.js"
   },
+  "sideEffects": false,
   "devDependencies": {
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-node-resolve": "^13.0.4",
     "clean-css": "^5.1.1",
     "eslint": "^7.12.1",
-    "esm": "^3.2.25",
-    "htl": "^0.2.5",
+    "htl": "^0.3.0",
     "js-beautify": "^1.13.0",
     "jsdom": "^16.4.0",
     "jsesc": "^3.0.2",
+    "mocha": "^9.0.3",
     "module-alias": "^2.2.2",
     "rollup": "^2.32.1",
     "rollup-plugin-terser": "^7.0.2",
-    "snowpack": "^3.0.11",
-    "tap-dot": "^2.0.0",
-    "tape": "^4.13.3",
-    "tape-await": "^0.1.2"
+    "snowpack": "^3.0.11"
   },
   "dependencies": {
-    "d3": "^6.7.0",
+    "d3": "^7.0.0",
     "isoformat": "^0.1.0"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -10,7 +10,7 @@ import * as meta from "./package.json";
 const filename = meta.name.split("/").pop();
 
 // Resolve D3 dependency.
-const d3 = require("d3/package.json");
+const d3 = JSON.parse(fs.readFileSync("./node_modules/d3/package.json", "utf-8"));
 if (typeof d3.jsdelivr === "undefined") throw new Error("unable to resolve d3");
 const d3Path = `d3@${d3.version}/${d3.jsdelivr}`;
 
@@ -55,14 +55,6 @@ const config = {
 };
 
 export default [
-  {
-    ...config,
-    output: {
-      ...config.output,
-      format: "cjs",
-      file: `dist/${filename}.cjs.js`
-    }
-  },
   {
     ...config,
     output: {

diff --git a/snowpack.config.js b/snowpack.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   alias: {
     "@observablehq/plot": "./src/index.js"
   },

diff --git a/src/transforms/group.js b/src/transforms/group.js
@@ -1,4 +1,4 @@
-import {group as grouper, sort, sum, deviation, min, max, mean, median, variance, InternSet} from "d3";
+import {group as grouper, sort, sum, deviation, min, max, mean, median, mode, variance, InternSet} from "d3";
 import {firstof} from "../defined.js";
 import {valueof, maybeColor, maybeInput, maybeTransform, maybeTuple, maybeLazyChannel, lazyChannel, first, identity, take, labelof, range} from "../mark.js";
 
@@ -149,6 +149,7 @@ export function maybeReduce(reduce, value) {
     case "mean": return reduceAccessor(mean);
     case "median": return reduceAccessor(median);
     case "variance": return reduceAccessor(variance);
+    case "mode": return reduceAccessor(mode);
   }
   throw new Error("invalid reduce");
 }

diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -0,0 +1,5 @@
+{
+  "env": {
+    "mocha": true
+  }
+}
diff --git a/test/cjs-test.js b/test/cjs-test.js