Remove CJS build (#449)

### Changelog
Breaking changes:
* Package is ESM-only

### Docs

None

### Description

Split from #448 

- Upgrade `@foxglove/tsconfig`, replace some TS-specific syntax
features, add file extensions on all imports
- Add `"type": "module"`, remove `tsconfig.cjs.json`

Author: jtbandes

.github/dependabot.yml

@@ -22,17 +22,15 @@ updates:
         patterns:
           - "storybook"
           - "@storybook/*"
+          - "eslint-plugin-storybook"
       jest:
         patterns:
           - "jest"
           - "jest-*"
-          - "babel-jest"
           - "@types/jest"
+          - "@swc/*"
       webpack:
         patterns:
           - "webpack"
           - "webpack-cli"
           - "webpack-dev-server"
-      babel:
-        patterns:
-          - "@babel/*"

babel.config.json

@@ -1,11 +1,9 @@
 import foxglove from "@foxglove/eslint-plugin";
+import { defineConfig } from "eslint/config";
 import storybook from "eslint-plugin-storybook";
 import globals from "globals";
-import tseslint from "typescript-eslint";
 
-// avoid a type error when using eslint's builtin defineConfig()
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-export default tseslint.config(
+export default defineConfig(
   {
     ignores: ["**/dist", "!.storybook"],
   },
@@ -34,9 +32,11 @@ export default tseslint.config(
   },
   {
     rules: {
+      "@typescript-eslint/consistent-type-imports": ["error", { disallowTypeAnnotations: false }],
       "@typescript-eslint/no-unsafe-assignment": "off",
       "@typescript-eslint/no-unsafe-member-access": "off",
       "@foxglove/prefer-hash-private": "off",
+      "import/extensions": ["error", "ignorePackages", { checkTypeImports: true }],
     },
   },
   {

eslint.config.mjs

@@ -0,0 +1,10 @@
+import type { Config } from "jest";
+
+export default {
+  testMatch: ["<rootDir>/src/**/*.test.ts"],
+  setupFiles: ["jest-canvas-mock"],
+  transform: {
+    "^.+\\.(t|j)sx?$": "@swc/jest",
+  },
+  transformIgnorePatterns: [],
+} satisfies Config;

jest.config.js

@@ -12,19 +12,21 @@
     "email": "contact@foxglove.dev",
     "url": "https://foxglove.dev/"
   },
-  "module": "dist/esm/index.js",
-  "main": "dist/cjs/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
     "clean": "rimraf dist *.tsbuildinfo",
-    "prepack": "tsc -b tsconfig.build.json tsconfig.cjs.json",
-    "build": "tsc -b tsconfig.build.json tsconfig.cjs.json",
+    "prepack": "tsc -b tsconfig.build.json",
+    "build": "tsc -b tsconfig.build.json",
     "lint": "eslint --fix .",
     "lint:ci": "eslint .",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test": "jest",
     "typecheck": "tsc -b --noEmit tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -37,13 +39,15 @@
   },
   "devDependencies": {
     "@foxglove/eslint-plugin": "2.1.0",
-    "@foxglove/tsconfig": "2.0.0",
+    "@foxglove/tsconfig": "3.2.0",
     "@storybook/addon-webpack5-compiler-swc": "4.0.2",
     "@storybook/react-webpack5": "10.1.11",
+    "@swc/core": "^1.15.11",
+    "@swc/jest": "^0.2.39",
     "@types/jest": "30.0.0",
     "@types/node": "25.0.3",
     "@types/react": "19.2.2",
-    "@types/three": "0.181.0",
+    "@types/three": "0.182.0",
     "eslint": "9.39.1",
     "eslint-plugin-storybook": "10.1.4",
     "globals": "16.5.0",
@@ -55,8 +59,7 @@
     "react-dom": "19.2.0",
     "rimraf": "6.1.2",
     "storybook": "10.1.11",
-    "three": "0.181.2",
-    "ts-jest": "29.4.5",
+    "three": "0.182.0",
     "typescript": "5.9.3"
   },
   "packageManager": "yarn@4.12.0"

jest.config.ts

@@ -1,6 +1,7 @@
 import { useEffect, useRef, type ReactElement } from "react";
 
-import { AtlasData, FontManager } from "./FontManager";
+import type { AtlasData } from "./FontManager.ts";
+import { FontManager } from "./FontManager.ts";
 
 export default {
   title: "FontManager",

package.json

@@ -1,6 +1,6 @@
 /** @jest-environment jsdom */
 
-import { FontManager } from "./FontManager";
+import { FontManager } from "./FontManager.ts";
 
 describe("FontManager", () => {
   it("emits error events", () => {

src/FontManager.stories.tsx

@@ -1,5 +1,5 @@
 import TinySDF from "@mapbox/tiny-sdf";
-import { EventDispatcher } from "three";
+import * as THREE from "three";
 
 export type CharInfo = {
   atlasX: number;
@@ -50,7 +50,7 @@ type EventMap = {
  * Manages the creation of a Signed Distance Field (SDF) font atlas, and performs text layout to
  * generate attributes for rendering text using the atlas.
  */
-export class FontManager extends EventDispatcher<EventMap> {
+export class FontManager extends THREE.EventDispatcher<EventMap> {
   private alphabet = "";
   readonly atlasData: AtlasData = {
     data: new Uint8ClampedArray(1024 * 1024),
@@ -64,8 +64,11 @@ export class FontManager extends EventDispatcher<EventMap> {
   #tinysdf: TinySDF;
   #lastCharPosition = { x: 0, y: 0, rowHeight: 0 };
 
-  constructor(public readonly options: FontManagerOptions = {}) {
+  public readonly options: FontManagerOptions;
+
+  constructor(options: FontManagerOptions = {}) {
     super();
+    this.options = options;
 
     this.options.fontSize = this.options.fontSize ?? 48;
     this.#buffer = Math.ceil(this.options.fontSize / 16);

src/FontManager.test.ts

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { useEffect, useRef, useState, type ReactElement } from "react";
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
-import { Label, LabelPool } from "./LabelPool";
+import type { Label } from "./LabelPool.ts";
+import { LabelPool } from "./LabelPool.ts";
 
 const meta: Meta<typeof BasicTemplate> = {
   title: "LabelPool",
@@ -41,6 +42,9 @@ const meta: Meta<typeof BasicTemplate> = {
 };
 export default meta;
 
+type StorySceneOptions = {
+  logDepthBuffer: boolean;
+};
 class StoryScene {
   labelPool = new LabelPool();
 
@@ -54,7 +58,10 @@ class StoryScene {
 
   bgCube?: THREE.Mesh;
 
-  constructor(private options: { logDepthBuffer: boolean }) {
+  private options: StorySceneOptions;
+
+  constructor(options: StorySceneOptions) {
+    this.options = options;
     this.perspectiveCamera.position.set(4, 4, 4);
     this.scene.background = new THREE.Color(0xf0f0f0);
     this.scene.add(new THREE.AxesHelper(5));