Typescript

.eslintrc.json

@@ -1,9 +1,7 @@
 {
-  "extends": "eslint:recommended",
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2020
-  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "plugins": ["@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
   "env": {
     "es6": true,
     "node": true,
@@ -15,6 +13,9 @@
     "no-sparse-arrays": 0,
     "no-unexpected-multiline": 0,
     "comma-dangle": ["error", "never"],
-    "semi": [2, "always"]
+    "semi": [2, "always"],
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-this-alias": 0,
+    "@typescript-eslint/no-unused-vars": ["error", {"ignoreRestSiblings": true}]
   }
 }

.gitignore

@@ -3,3 +3,5 @@ dist/
 node_modules/
 test/output/*-changed.svg
 test/output/*-changed.html
+tsconfig.tsbuildinfo
+yarn-error.log

.mocharc.json

@@ -0,0 +1,14 @@
+{
+  "require": ["module-alias/register.js", "ts-node/register"],
+  "loader": "ts-node/esm",
+  "extensions": ["js", "ts"],
+  "spec": [
+    "test/**/*-test.*",
+    "test/plot.js"
+  ],
+  "watch-files": [
+    "bundle.js",
+    "test",
+    "src"
+  ]
+}

package.json

@@ -8,13 +8,14 @@
   },
   "license": "ISC",
   "type": "module",
-  "main": "src/index.js",
-  "module": "src/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "jsdelivr": "dist/plot.umd.min.js",
   "unpkg": "dist/plot.umd.min.js",
   "exports": {
+    "mocha": "./src/index.js",
     "umd": "./dist/plot.umd.min.js",
-    "default": "./src/index.js"
+    "default": "./dist/index.js"
   },
   "repository": {
     "type": "git",
@@ -25,8 +26,11 @@
     "src/**/*.js"
   ],
   "scripts": {
-    "test": "mkdir -p test/output && mocha -r module-alias/register 'test/**/*-test.js' test/plot.js && eslint src test",
-    "prepublishOnly": "rm -rf dist && rollup -c",
+    "test": "yarn test:typecheck && yarn test:lint && yarn test:mocha",
+    "test:mocha": "mkdir -p test/output && mocha --conditions=mocha",
+    "test:lint": "eslint src test",
+    "test:typecheck": "tsc --noEmit",
+    "prepublishOnly": "rm -rf dist && rollup -c && tsc",
     "postpublish": "git push && git push --tags",
     "dev": "vite"
   },
@@ -38,15 +42,27 @@
     "@rollup/plugin-commonjs": "22",
     "@rollup/plugin-json": "4",
     "@rollup/plugin-node-resolve": "13",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@types/d3": "^7.4.0",
+    "@types/expect": "^24.3.0",
+    "@types/mocha": "^9.1.1",
+    "@types/node": "^17.0.35",
+    "@typescript-eslint/eslint-plugin": "^5.25.0",
+    "@typescript-eslint/parser": "^5.25.0",
     "canvas": "2",
-    "eslint": "8",
+    "eslint": "^8.16.0",
+    "glob": "^8.0.3",
     "htl": "0.3",
     "js-beautify": "1",
     "jsdom": "19",
     "mocha": "10",
     "module-alias": "2",
     "rollup": "2",
     "rollup-plugin-terser": "7",
+    "ts-node": "^10.8.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "typescript-module-alias": "^1.0.2",
     "vite": "2"
   },
   "dependencies": {

rollup.config.js

@@ -4,6 +4,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
 import node from "@rollup/plugin-node-resolve";
 import * as meta from "./package.json";
+import typescript from "@rollup/plugin-typescript";
 
 const filename = meta.name.split("/").pop();
 
@@ -26,6 +27,7 @@ const config = {
     banner: `// ${meta.name} v${meta.version} Copyright ${copyrights.join(", ")}`
   },
   plugins: [
+    typescript(),
     commonjs(),
     json(),
     node()

src/curve.js → src/curve.ts

@@ -20,8 +20,41 @@ import {
   curveStepAfter,
   curveStepBefore
 } from "d3";
+import type {
+  CurveFactory,
+  CurveBundleFactory,
+  CurveCardinalFactory,
+  CurveCatmullRomFactory
+} from "d3";
+
+type CurveFunction =
+  | CurveFactory
+  | CurveBundleFactory
+  | CurveCardinalFactory
+  | CurveCatmullRomFactory;
+type CurveName =
+  | "basis"
+  | "basis-closed"
+  | "basis-open"
+  | "bundle"
+  | "bump-x"
+  | "bump-y"
+  | "cardinal"
+  | "cardinal-closed"
+  | "cardinal-open"
+  | "catmull-rom"
+  | "catmull-rom-closed"
+  | "catmull-rom-open"
+  | "linear"
+  | "linear-closed"
+  | "monotone-x"
+  | "monotone-y"
+  | "natural"
+  | "step"
+  | "step-after"
+  | "step-before";
 
-const curves = new Map([
+const curves = new Map<CurveName, CurveFunction>([
   ["basis", curveBasis],
   ["basis-closed", curveBasisClosed],
   ["basis-open", curveBasisOpen],
@@ -44,19 +77,20 @@ const curves = new Map([
   ["step-before", curveStepBefore]
 ]);
 
-export function Curve(curve = curveLinear, tension) {
+export function Curve(
+  curve: CurveName | CurveFunction = curveLinear,
+  tension?: number
+): CurveFunction {
   if (typeof curve === "function") return curve; // custom curve
-  const c = curves.get(`${curve}`.toLowerCase());
+  const c = curves.get(`${curve}`.toLowerCase() as CurveName);
   if (!c) throw new Error(`unknown curve: ${curve}`);
   if (tension !== undefined) {
-    switch (c) {
-      case curveBundle: return c.beta(tension);
-      case curveCardinalClosed:
-      case curveCardinalOpen:
-      case curveCardinal: return c.tension(tension);
-      case curveCatmullRomClosed:
-      case curveCatmullRomOpen:
-      case curveCatmullRom: return c.alpha(tension);
+    if ("beta" in c) {
+      return c.beta(tension);
+    } else if ("tension" in c) {
+      return c.tension(tension);
+    } else if ("alpha" in c) {
+      return c.alpha(tension);
     }
   }
   return c;

src/defined.ts

@@ -0,0 +1,29 @@
+import {ascending, descending, type Primitive} from "d3";
+
+export function defined(x: Primitive | undefined): boolean {
+  return x != null && !Number.isNaN(x);
+}
+
+export function ascendingDefined(a: Primitive | undefined, b: Primitive | undefined): number {
+  return +defined(b) - +defined(a) || ascending(a, b);
+}
+
+export function descendingDefined(a: Primitive | undefined, b: Primitive | undefined): number {
+  return +defined(b) - +defined(a) || descending(a, b);
+}
+
+export function nonempty(x: unknown): boolean {
+  return x != null && `${x}` !== "";
+}
+
+export function finite(x: number): number {
+  return isFinite(x) ? x : NaN;
+}
+
+export function positive(x: number): number {
+  return x > 0 && isFinite(x) ? x : NaN;
+}
+
+export function negative(x: number): number {
+  return x < 0 && isFinite(x) ? x : NaN;
+}

src/format.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {format as isoFormat} from "isoformat";
+import {string} from "./options.js";
+import {memoize1} from "./memoize.js";
+
+const numberFormat = memoize1<Intl.NumberFormat>((locale: string | string[] | undefined) => new Intl.NumberFormat(locale));
+const monthFormat = memoize1<Intl.DateTimeFormat>((locale: string | string[] | undefined, month: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined) => new Intl.DateTimeFormat(locale, {timeZone: "UTC", month}));
+const weekdayFormat = memoize1<Intl.DateTimeFormat>((locale: string | string[] | undefined, weekday: "long" | "short" | "narrow" | undefined) => new Intl.DateTimeFormat(locale, {timeZone: "UTC", weekday}));
+
+export function formatNumber(locale = "en-US"): (value: any) => string | undefined {
+  const format = numberFormat(locale);
+  return (i: any) => i != null && !isNaN(i) ? format.format(i) : undefined;
+}
+
+export function formatMonth(locale = "en-US", month: "numeric" | "2-digit" | "long" | "short" | "narrow" | undefined = "short") {
+  const format = monthFormat(locale, month);
+  return (i: Date | number | null | undefined) => i != null && !isNaN(i = +new Date(Date.UTC(2000, +i))) ? format.format(i) : undefined;
+}
+
+export function formatWeekday(locale = "en-US", weekday: "long" | "short" | "narrow" | undefined = "short") {
+  const format = weekdayFormat(locale, weekday);
+  return (i: Date | number | null | undefined) => i != null && !isNaN(i = +new Date(Date.UTC(2001, 0, +i))) ? format.format(i) : undefined;
+}
+
+export function formatIsoDate(date: Date): string {
+  return isoFormat(date, "Invalid Date");
+}
+
+export function formatAuto(locale = "en-US"): (value: any) => string | number | undefined {
+  const number = formatNumber(locale);
+  return (v: any) => (v instanceof Date ? formatIsoDate : typeof v === "number" ? number : string)(v);
+}
+
+// TODO When Plot supports a top-level locale option, this should be removed
+// because it lacks context to know which locale to use; formatAuto should be
+// used instead whenever possible.
+export const formatDefault = formatAuto();

src/math.ts

@@ -0,0 +1 @@
+export const radians: number = Math.PI / 180;

src/memoize.ts

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function memoize1<T>(compute: (...rest: any[]) => T) {
+  let cacheValue: T, cacheKeys: any[] | undefined;
+  return (...keys: any[]) => {
+    if (cacheKeys?.length !== keys.length || cacheKeys.some((k, i) => k !== keys[i])) {
+      cacheKeys = keys;
+      cacheValue = compute(...keys);
+    }
+    return cacheValue;
+  };
+}

src/transforms/bin.js

@@ -88,10 +88,10 @@ function binn(
     stroke,
     x1, x2, // consumed if x is an output
     y1, y2, // consumed if y is an output
-    domain, // eslint-disable-line no-unused-vars
-    cumulative, // eslint-disable-line no-unused-vars
-    thresholds, // eslint-disable-line no-unused-vars
-    interval, // eslint-disable-line no-unused-vars
+    domain,
+    cumulative,
+    thresholds,
+    interval,
     ...options
   } = inputs;
   const [GZ, setGZ] = maybeColumn(z);

src/types/isoformat.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module "isoformat" {
+  export function format(value: any, fallback: string): string;
+  export function format(value: any, fallback: any): any;
+  export function parse(value: string): Date;
+}

src/warnings.js → src/warnings.ts

@@ -6,7 +6,7 @@ export function consumeWarnings() {
   return w;
 }
 
-export function warn(message) {
+export function warn(message: string) {
   console.warn(message);
   ++warnings;
 }

test/legends/legends-test.js → test/legends/legends-test.ts

@@ -1,5 +1,5 @@
 import * as Plot from "@observablehq/plot";
-import assert from "assert";
+import * as assert from "assert";
 
 it("Plot.legend({color: {type:'identity'}}) returns undefined", () => {
   const l = Plot.legend({color: {type: "identity"}});