feat: make module native ESM

BREAKING-CHANGE: the module is now ESM-only

.gitignore

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

.prettierignore

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

eslint.config.js

@@ -4,13 +4,7 @@ import unicorn from 'eslint-config-zakodium/unicorn';
 
 export default [
   {
-    ignores: [
-      'lib',
-      'lib-esm',
-      'node_modules',
-      'playwright/.cache',
-      'storybook-static',
-    ],
+    ignores: ['lib', 'node_modules', 'playwright/.cache', 'storybook-static'],
   },
   ...ts,
   ...react,

package.json

@@ -3,21 +3,17 @@
   "version": "2.0.0",
   "description": "Library of React components to render SVG 2D plots.",
   "type": "module",
-  "main": "lib/index.js",
-  "module": "lib-esm/index.js",
-  "types": "lib-esm/index.d.ts",
+  "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",
-    "postbuild-ts": "echo '{\"type\":\"commonjs\"}' > lib/package.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",
@@ -70,16 +66,16 @@
     "@types/node": "^22.7.5",
     "@types/point-in-polygon": "^1.1.5",
     "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "eslint": "^9.12.0",
     "eslint-config-zakodium": "^13.0.0",
     "isotopic-distribution": "^3.3.2",
-    "iv-analysis": "^0.3.0",
+    "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.3",
+    "ml-spectra-processing": "^14.6.0",
     "ms-spectrum": "^3.6.7",
     "point-in-polygon": "^1.1.0",
     "prettier": "^3.3.3",
@@ -96,7 +92,7 @@
     "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": "22.9.0"

src/components/Annotations/Annotations.tsx

@@ -1,4 +1,4 @@
-import { type ReactElement, ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 
 export interface AnnotationsProps {
   children: ReactNode;

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<

src/components/Annotations/index.ts

@@ -1,15 +1,15 @@
-import { Arrow } from './Arrow';
-import { BoxPlot } from './BoxPlot';
-import { Circle } from './Circle';
-import { DirectedEllipse } from './DirectedEllipse';
-import { Ellipse } from './Ellipse';
-import { Group } from './Group';
-import { Line } from './Line';
-import { Polygon } from './Polygon';
-import { Polyline } from './Polyline';
-import { Rectangle } from './Rectangle';
-import { Shape } from './Shape';
-import { Text } from './Text';
+import { Arrow } from './Arrow.js';
+import { BoxPlot } from './BoxPlot.js';
+import { Circle } from './Circle.js';
+import { DirectedEllipse } from './DirectedEllipse.js';
+import { Ellipse } from './Ellipse.js';
+import { Group } from './Group.js';
+import { Line } from './Line.js';
+import { Polygon } from './Polygon.js';
+import { Polyline } from './Polyline.js';
+import { Rectangle } from './Rectangle.js';
+import { Shape } from './Shape.js';
+import { Text } from './Text.js';
 
 export const Annotation = {
   Arrow,
@@ -26,16 +26,16 @@ export const Annotation = {
   BoxPlot,
 };
 
-export * from './Annotations';
-export type { AnnotationArrowProps } from './Arrow';
-export type { AnnotationCircleProps } from './Circle';
-export type { AnnotationDirectedEllipseProps } from './DirectedEllipse';
-export type { AnnotationEllipseProps } from './Ellipse';
-export type { AnnotationGroupProps } from './Group';
-export type { AnnotationLineProps } from './Line';
-export type { AnnotationRectangleProps } from './Rectangle';
-export type { AnnotationShapeProps, AnnotationShapeName } from './Shape';
-export type { AnnotationTextProps } from './Text';
-export type { AnnotationPolygonProps } from './Polygon';
-export type { AnnotationPolylineProps } from './Polyline';
-export type { AnnotationBoxPlotProps } from './BoxPlot';
+export * from './Annotations.js';
+export type { AnnotationArrowProps } from './Arrow.js';
+export type { AnnotationCircleProps } from './Circle.js';
+export type { AnnotationDirectedEllipseProps } from './DirectedEllipse.js';
+export type { AnnotationEllipseProps } from './Ellipse.js';
+export type { AnnotationGroupProps } from './Group.js';
+export type { AnnotationLineProps } from './Line.js';
+export type { AnnotationRectangleProps } from './Rectangle.js';
+export type { AnnotationShapeProps, AnnotationShapeName } from './Shape.js';
+export type { AnnotationTextProps } from './Text.js';
+export type { AnnotationPolygonProps } from './Polygon.js';
+export type { AnnotationPolylineProps } from './Polyline.js';
+export type { AnnotationBoxPlotProps } from './BoxPlot.js';

src/components/Axis/Axis.tsx

@@ -1,21 +1,21 @@
-import { ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3-scale';
-import { CSSProperties, ReactNode, useEffect } from 'react';
+import type { ScaleLinear, ScaleLogarithmic, ScaleTime } from 'd3-scale';
+import { type CSSProperties, type ReactNode, useEffect } from 'react';
 
 import {
   usePlotContext,
   usePlotDispatchContext,
-} from '../../contexts/plotContext';
-import {
+} from '../../contexts/plotContext.js';
+import type {
   Position,
   ScalarValue,
   TickLabelFormat,
   TickPosition,
-} from '../../types';
-import { getInnerOffset } from '../../utils/axis';
+} from '../../types.js';
+import { getInnerOffset } from '../../utils/axis.js';
 
-import LinearAxis from './LinearAxis';
-import LogAxis from './LogAxis';
-import TimeAxis from './TimeAxis';
+import LinearAxis from './LinearAxis.js';
+import LogAxis from './LogAxis.js';
+import TimeAxis from './TimeAxis.js';
 
 export type AxisScale = 'linear' | 'log' | 'time';
 

src/components/Axis/HorizontalAxis.tsx

@@ -1,13 +1,13 @@
 import { useContext } from 'react';
 import { useBBoxObserver } from 'react-d3-utils';
 
-import { bboxContext } from '../../contexts/bboxContext';
+import { bboxContext } from '../../contexts/bboxContext.js';
 
-import HorizontalAxisGridLines from './HorizontalAxisGridLines';
-import HorizontalAxisLabel from './HorizontalAxisLabel';
-import HorizontalAxisLine from './HorizontalAxisLine';
-import { Ticks } from './Ticks';
-import { AxisRendererProps } from './types';
+import HorizontalAxisGridLines from './HorizontalAxisGridLines.js';
+import HorizontalAxisLabel from './HorizontalAxisLabel.js';
+import HorizontalAxisLine from './HorizontalAxisLine.js';
+import { Ticks } from './Ticks.js';
+import type { AxisRendererProps } from './types.js';
 
 export default function HorizontalAxis(props: AxisRendererProps) {
   const {

src/components/Axis/HorizontalAxisGridLines.tsx

@@ -1,8 +1,8 @@
-import { CSSProperties, type ReactElement, useMemo } from 'react';
+import { type CSSProperties, type ReactElement, useMemo } from 'react';
 
-import { Position } from '../../types';
+import type { Position } from '../../types.js';
 
-import { Scales, TicksType } from './types';
+import type { Scales, TicksType } from './types.js';
 
 interface HorizontalAxisGridLinesProps {
   plotHeight: number;

src/components/Axis/HorizontalAxisLabel.tsx

@@ -1,5 +1,5 @@
-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';
 
 interface HorizontalAxisLabelProps {
   plotWidth: number;

src/components/Axis/HorizontalAxisLine.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
 
 interface HorizontalAxisLineProps {
   plotWidth: number;

src/components/Axis/LinearAxis.tsx

@@ -1,10 +1,10 @@
-import { ScaleLinear } from 'd3-scale';
+import type { ScaleLinear } from 'd3-scale';
 import { memo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
 
-import HorizontalAxis from './HorizontalAxis';
-import VerticalAxis from './VerticalAxis';
-import { AxisChildProps } from './types';
+import HorizontalAxis from './HorizontalAxis.js';
+import VerticalAxis from './VerticalAxis.js';
+import type { AxisChildProps } from './types.js';
 
 interface LinearAxisProps extends AxisChildProps<number> {
   scale: ScaleLinear<number, number>;

src/components/Axis/LogAxis.tsx

@@ -1,10 +1,10 @@
-import { ScaleLogarithmic } from 'd3-scale';
+import type { ScaleLogarithmic } from 'd3-scale';
 import { memo, useRef } from 'react';
 import { useLogTicks } from 'react-d3-utils';
 
-import HorizontalAxis from './HorizontalAxis';
-import VerticalAxis from './VerticalAxis';
-import { AxisChildProps } from './types';
+import HorizontalAxis from './HorizontalAxis.js';
+import VerticalAxis from './VerticalAxis.js';
+import type { AxisChildProps } from './types.js';
 
 interface LogAxisProps extends AxisChildProps<number> {
   scale: ScaleLogarithmic<number, number>;