Native ESM support

.github/workflows/playwright.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
       - name: Install dependencies
         run: npm i
       - name: Install Playwright

.gitignore

@@ -1,6 +1,5 @@
 node_modules
 lib/
-lib-esm/
 storybook-static/
 /playwright-report/
 /playwright/.cache/

.nvmrc

@@ -1 +1 @@
-20
+22

.prettierignore

@@ -1,5 +1,4 @@
 /lib
-/lib-esm
 /node_modules
 CHANGELOG.md
 /playwright-report

.storybook/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [

.storybook/preview.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unassigned-import
 import './stories.css';
 
 export const parameters = {

eslint.config.js

@@ -0,0 +1,24 @@
+import react from 'eslint-config-zakodium/react';
+import ts from 'eslint-config-zakodium/ts';
+import unicorn from 'eslint-config-zakodium/unicorn';
+
+export default [
+  {
+    ignores: ['lib', 'node_modules', 'playwright/.cache', 'storybook-static'],
+  },
+  ...ts,
+  ...react,
+  ...unicorn,
+  {
+    rules: {
+      '@typescript-eslint/no-dynamic-delete': 'off',
+      'import/namespace': 'off',
+    },
+  },
+  {
+    files: ['tests/**/*.test.tsx'],
+    rules: {
+      '@typescript-eslint/unbound-method': 'off',
+    },
+  },
+];

package.json

@@ -2,20 +2,18 @@
   "name": "react-plot",
   "version": "2.0.0",
   "description": "Library of React components to render SVG 2D plots.",
-  "main": "lib/index.js",
-  "module": "lib-esm/index.js",
-  "types": "lib-esm/index.d.ts",
+  "type": "module",
+  "exports": "./lib/index.js",
   "files": [
     "lib",
-    "lib-esm",
     "src"
   ],
   "scripts": {
     "build": "npm run clean && npm run build-ts",
     "build-storybook": "storybook build",
-    "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build-ts": "tsc -p tsconfig.build.json",
     "check-types": "tsc --noEmit",
-    "clean": "rimraf lib lib-esm",
+    "clean": "rimraf lib",
     "dev": "storybook dev -p 6006",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
@@ -54,37 +52,38 @@
     "react": ">=18.0.0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.45.3",
+    "@playwright/experimental-ct-react": "^1.48.0",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-storysource": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/react-vite": "^8.2.6",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-storysource": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.8",
     "@types/d3-scale-chromatic": "^3.0.3",
     "@types/d3-shape": "^3.1.6",
-    "@types/node": "^22.0.0",
+    "@types/node": "^22.7.5",
     "@types/point-in-polygon": "^1.1.5",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "eslint": "^8.57.0",
-    "eslint-config-zakodium": "^10.0.0",
-    "isotopic-distribution": "^3.2.1",
-    "iv-analysis": "^0.3.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "eslint": "^9.12.0",
+    "eslint-config-zakodium": "^13.0.0",
+    "isotopic-distribution": "^3.3.2",
+    "iv-analysis": "^0.4.0",
     "ml-dataset-iris": "^1.2.1",
     "ml-directional-distribution": "^0.1.1",
     "ml-pca": "^4.1.1",
     "ml-regression-simple-linear": "^3.0.1",
-    "ml-spectra-processing": "^14.5.1",
-    "ms-spectrum": "^3.6.2",
+    "ml-spectra-processing": "^14.6.0",
+    "ms-spectrum": "^3.6.7",
     "point-in-polygon": "^1.1.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "typescript": "^5.5.4"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3"
   },
   "dependencies": {
     "d3-array": "^3.2.4",
@@ -93,9 +92,9 @@
     "d3-shape": "^3.2.0",
     "immer": "^10.1.1",
     "ml-distance-euclidean": "^2.0.0",
-    "react-d3-utils": "^1.0.0"
+    "react-d3-utils": "^2.0.0"
   },
   "volta": {
-    "node": "20.16.0"
+    "node": "22.9.0"
   }
 }

src/components/Annotations/Annotations.tsx

@@ -0,0 +1,9 @@
+import { type ReactElement, type ReactNode } from 'react';
+
+export interface AnnotationsProps {
+  children: ReactNode;
+}
+
+export function Annotations(props: AnnotationsProps): ReactElement {
+  return <>{props.children}</>;
+}

src/components/Annotations/Arrow.tsx

@@ -1,9 +1,9 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { usePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
-import MarkerDefs from './MarkerDefs';
+import MarkerDefs from './MarkerDefs.js';
 
 type AnnotationShapeList = 'circle' | 'triangle' | 'line' | 'none';
 

src/components/Annotations/BoxPlot.tsx

@@ -1,7 +1,7 @@
-import { CSSProperties, MouseEventHandler } from 'react';
+import type { CSSProperties, MouseEventHandler } from 'react';
 
-import { useBoxPlotPosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { useBoxPlotPosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationBoxPlotProps {
   min: ScalarValue;

src/components/Annotations/Circle.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { useEllipsePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { useEllipsePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationCircleProps
   extends Omit<

src/components/Annotations/DirectedEllipse.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { useDirectedEllipsePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { useDirectedEllipsePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationDirectedEllipseProps
   extends Omit<

src/components/Annotations/Ellipse.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { useEllipsePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { useEllipsePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationEllipseProps
   extends Omit<

src/components/Annotations/Group.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Align, AlignGroup } from 'react-d3-utils';
+import type { CSSProperties, ReactNode } from 'react';
+import { type Align, AlignGroup } from 'react-d3-utils';
 
-import { usePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationGroupProps {
   x: ScalarValue;

src/components/Annotations/Line.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { usePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationLineProps
   extends Omit<

src/components/Annotations/Polygon.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { usePointsPosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePointsPosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationPolygonProps
   extends Omit<

src/components/Annotations/Polyline.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { usePointsPosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePointsPosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationPolylineProps
   extends Omit<

src/components/Annotations/Rectangle.tsx

@@ -1,7 +1,7 @@
-import { SVGProps } from 'react';
+import type { SVGProps } from 'react';
 
-import { useRectanglePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { useRectanglePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationRectangleProps
   extends Omit<

src/components/Annotations/Shape.tsx

@@ -1,13 +1,13 @@
-import { CSSProperties, MouseEventHandler } from 'react';
+import type { CSSProperties, MouseEventHandler } from 'react';
 
-import { usePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 import {
   Circle as CircleMarker,
-  Triangle as TriangleMarker,
   Diamond as DiamondMarker,
   Square as SquareMarker,
-} from '../Markers';
+  Triangle as TriangleMarker,
+} from '../Markers.js';
 
 const shapes = {
   triangle: Triangle,

src/components/Annotations/Text.tsx

@@ -1,7 +1,7 @@
-import { ReactNode, SVGProps } from 'react';
+import type { ReactNode, SVGProps } from 'react';
 
-import { usePosition } from '../../hooks';
-import { ScalarValue } from '../../types';
+import { usePosition } from '../../hooks.js';
+import type { ScalarValue } from '../../types.js';
 
 export interface AnnotationTextProps
   extends Omit<