restore mocha and eslint for typescript

Author: mbostock

.eslintrc.json

@@ -1,9 +1,7 @@
 {
-  "extends": ["eslint:recommended", "prettier"],
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 2021
-  },
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  "plugins": ["@typescript-eslint"],
+  "parser": "@typescript-eslint/parser",
   "env": {
     "es2020": true,
     "node": true,
@@ -14,6 +12,9 @@
     "no-constant-condition": 0,
     "no-sparse-arrays": 0,
     "no-unexpected-multiline": 0,
-    "no-unused-vars": ["error", {"ignoreRestSiblings": true}]
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-this-alias": 0,
+    "@typescript-eslint/no-unused-vars": ["error", {"ignoreRestSiblings": true}]
   }
 }

.mocharc.json

@@ -1,3 +1,5 @@
 {
-  "require": ["module-alias/register.js"]
+  "require": ["module-alias/register.js"],
+  "loader": "./loader.js",
+  "extensions": ["js", "ts"]
 }

jsconfig.json

@@ -0,0 +1,35 @@
+import {transform, applySourceMap, installSourceMapSupport, resolveTsPath} from "@esbuild-kit/core-utils";
+import {getTsconfig} from "get-tsconfig";
+
+const sourcemaps = installSourceMapSupport();
+const tsExtensionsPattern = /\.([cm]?ts|[tj]sx)$/;
+const tsconfig = getTsconfig();
+const tsconfigRaw = tsconfig?.config;
+
+export async function resolve(specifier, context, defaultResolve) {
+  const tsPath = resolveTsPath(specifier);
+  if (tsPath) {
+    try {
+      return await resolve(tsPath, context, defaultResolve, true);
+    } catch (error) {
+      if (error.code !== "ERR_MODULE_NOT_FOUND") {
+        throw error;
+      }
+    }
+  }
+  const resolved = await defaultResolve(specifier, context, defaultResolve);
+  return resolved.format === undefined ? {...resolved, format: "module"} : resolved;
+}
+
+export async function load(url, context, defaultLoad) {
+  const loaded = await defaultLoad(url, context, defaultLoad);
+  if (tsExtensionsPattern.test(url)) {
+    const code = loaded.source.toString();
+    const transformed = await transform(code, url, {tsconfigRaw});
+    return {
+      format: "module",
+      source: applySourceMap(transformed, url, sourcemaps)
+    };
+  }
+  return loaded;
+}

loader.js

@@ -27,9 +27,10 @@
     "src/**/*.d.ts"
   ],
   "scripts": {
-    "test": "yarn test:mocha && yarn test:lint",
+    "test": "yarn test:mocha && yarn test:lint && yarn test:tsc",
     "test:mocha": "mkdir -p test/output && mocha 'test/**/*-test.*' 'test/plot.js'",
     "test:lint": "eslint src test",
+    "test:tsc": "tsc",
     "prepublishOnly": "rm -rf build dist && node scripts/readme-to-jsdoc.js && rollup -c",
     "postpublish": "git push && git push --tags",
     "dev": "vite"
@@ -41,14 +42,18 @@
     "./src/plot.js"
   ],
   "devDependencies": {
+    "@esbuild-kit/core-utils": "^2.0.2",
     "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "canvas": "^2.0.0",
     "d3-geo-projection": "^4.0.0",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.5.0",
+    "get-tsconfig": "^4.1.0",
     "htl": "^0.3.0",
     "js-beautify": "1",
     "jsdom": "^21.0.0",
@@ -58,6 +63,7 @@
     "prettier": "^2.7.1",
     "rollup": "^3.7.0",
     "topojson-client": "^3.1.0",
+    "typescript": "^4.9.5",
     "vite": "^4.0.0"
   },
   "dependencies": {

package.json

@@ -2,6 +2,7 @@ import type {Dimensions} from "./dimensions.js";
 import type {ChannelDomainSort, ChannelSpec, ChannelValue, ChannelValueSpec} from "./channel.js";
 import type {Context} from "./context.js";
 import type {Facet, FacetAnchor} from "./facet.js";
+import type {plot} from "./plot.js";
 
 export type Data = any[]; // TODO iterable, arquero, arrow, etc.
 
@@ -61,3 +62,6 @@ export interface MarkOptions {
 
 /** @jsdoc Mark */
 export class Mark {} // TODO
+
+/** @jsdoc marks */
+export function marks(...marks: Markish[]): Markish[] & {plot: typeof plot};

src/mark.d.ts

@@ -72,6 +72,3 @@ export interface Plot {
 
 /** @jsdoc plot */
 export function plot(options?: PlotOptions): (SVGSVGElement | HTMLElement) & Plot;
-
-/** @jsdoc marks */
-export function marks(...marks: Markish[]): Markish[] & {plot: typeof plot};

src/plot.d.ts

@@ -1,7 +1,7 @@
 import * as Plot from "@observablehq/plot";
 import {svg} from "htl";
 
-export default async function () {
+export async function empty() {
   return Plot.plot({
     grid: true,
     inset: 6,

test/plots/empty.js renamed to test/plots/empty.ts

@@ -60,7 +60,6 @@ export {default as dotSort} from "./dot-sort.js";
 export {default as downloads} from "./downloads.js";
 export {default as downloadsOrdinal} from "./downloads-ordinal.js";
 export {default as driving} from "./driving.js";
-export {default as empty} from "./empty.js";
 export {default as emptyFacet} from "./empty-facet.js";
 export {default as emptyLegend} from "./empty-legend.js";
 export {default as emptyX} from "./empty-x.js";
@@ -287,6 +286,7 @@ export * from "./axis-labels.js";
 export * from "./bigint.js";
 export * from "./bin-1m.js";
 export * from "./electricity-demand.js";
+export * from "./empty.ts";
 export * from "./federal-funds.js";
 export * from "./frame.js";
 export * from "./function-contour.js";

test/plots/index.js

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "noEmit": true,
+    "module": "Node16",
+    "baseUrl": "./src",
+    "paths": {
+      "@observablehq/plot": ["index"]
+    }
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.js",
+    "src/**/*.ts",
+    "test/**/*.js",
+    "test/**/*.ts",
+  ]
+}