Update library path imports to conform to esm modules

.eslintrc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  extends: ['standard', 'react-app'],
+  rules: {
+    'space-before-function-paren': [
+      'error',
+      {
+        anonymous: 'ignore',
+        named: 'ignore',
+        asyncArrow: 'ignore'
+      }
+    ],
+    'no-unused-vars': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-unused-vars': 'error'
+  }
+}

babel.config.cjs

@@ -1,4 +1,3 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
-  plugins: ['babel-plugin-transform-import-meta']
+  presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react']
 }

package.json

@@ -69,6 +69,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-modules-commonjs": "^7.18.6",
     "@babel/preset-env": "^7.22.4",
     "@babel/preset-react": "^7.22.3",
@@ -91,8 +92,7 @@
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.31.8",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-standard": "^4.1.0",
     "gh-pages": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
@@ -101,14 +101,9 @@
     "jest-puppeteer": "^9.0.2",
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
-    "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.29.0",
     "pug": "^3.0.2",
     "puppeteer": "^21.6.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-is": "^18.2.0",
-    "react-simple-code-editor": "^0.13.0",
     "standard": "^17.0.0",
     "standardx": "^7.0.0",
     "storybook": "^7.0.20",

src/chart.ts

@@ -3,17 +3,16 @@ import { format as d3Format } from 'd3-format'
 import { scaleLinear as d3ScaleLinear, scaleLog as d3ScaleLog } from 'd3-scale'
 import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis } from 'd3-axis'
 import { zoom as d3Zoom } from 'd3-zoom'
-// @ts-ignore
 import { select as d3Select, pointer as d3Pointer } from 'd3-selection'
 import { interpolateRound as d3InterpolateRound } from 'd3-interpolate'
 import EventEmitter from 'events'
 
-import { FunctionPlotOptions, FunctionPlotDatum, FunctionPlotScale } from './types'
+import { FunctionPlotOptions, FunctionPlotDatum, FunctionPlotScale } from './types.js'
 
-import annotations from './helpers/annotations'
-import mousetip from './tip'
-import helpers from './helpers'
-import datumDefaults from './datum-defaults'
+import annotations from './helpers/annotations.js'
+import mousetip from './tip.js'
+import helpers from './helpers/index.js'
+import datumDefaults from './datum-defaults.js'
 import globals from './globals.mjs'
 
 export interface ChartMetaMargin {

src/datum-defaults.ts

@@ -1,4 +1,4 @@
-import { FunctionPlotDatum } from './types'
+import { FunctionPlotDatum } from './types.js'
 
 export default function datumDefaults(d: FunctionPlotDatum) {
   // default graphType uses boxes i.e. 2d intervals

src/evaluate-datum.ts

@@ -1,9 +1,9 @@
 import globals from './globals.mjs'
-import { syncSamplerInterval, asyncSamplerInterval } from './samplers/interval'
-import builtIn from './samplers/builtIn'
+import { syncSamplerInterval, asyncSamplerInterval } from './samplers/interval.js'
+import builtIn from './samplers/builtIn.js'
 
-import { Chart } from './index'
-import { FunctionPlotDatum, FunctionPlotScale } from './types'
+import { Chart } from './index.js'
+import { FunctionPlotDatum, FunctionPlotScale } from './types.js'
 
 /**
  * Computes the endpoints x_lo, x_hi of the range in d.range from which the sampler will take samples.

src/graph-types/index.ts

@@ -1,6 +1,6 @@
-import polyline from './polyline'
-import interval from './interval'
-import scatter from './scatter'
-import text from './text'
+import polyline from './polyline.js'
+import interval from './interval.js'
+import scatter from './scatter.js'
+import text from './text.js'
 
 export { polyline, interval, scatter, text }

src/graph-types/interval.ts

@@ -1,10 +1,10 @@
 import { select as d3Select, Selection } from 'd3-selection'
 
-import { asyncIntervalEvaluate, intervalEvaluate } from '../evaluate-datum'
+import { asyncIntervalEvaluate, intervalEvaluate } from '../evaluate-datum.js'
 import { infinity, color } from '../utils.mjs'
 
-import { Chart } from '../index'
-import { Interval, FunctionPlotDatum, FunctionPlotScale } from '../types'
+import { Chart } from '../index.js'
+import { Interval, FunctionPlotDatum, FunctionPlotScale } from '../types.js'
 
 function clampRange(minWidthHeight: number, vLo: number, vHi: number, gLo: number, gHi: number) {
   // issue 69

src/graph-types/polyline.ts

@@ -2,10 +2,10 @@ import { select as d3Select, Selection } from 'd3-selection'
 import { line as d3Line, area as d3Area, curveLinear as d3CurveLinear } from 'd3-shape'
 
 import { color, infinity, clamp } from '../utils.mjs'
-import { builtInEvaluate } from '../evaluate-datum'
+import { builtInEvaluate } from '../evaluate-datum.js'
 
-import { Chart } from '../index'
-import { FunctionPlotDatum } from '../types'
+import { Chart } from '../index.js'
+import { FunctionPlotDatum } from '../types.js'
 
 export default function polyline(chart: Chart) {
   function plotLine(selection: Selection<any, FunctionPlotDatum, any, any>) {

src/graph-types/scatter.ts

@@ -2,10 +2,10 @@ import { select as d3Select, Selection } from 'd3-selection'
 import { hsl as d3Hsl } from 'd3-color'
 
 import { color } from '../utils.mjs'
-import { builtInEvaluate } from '../evaluate-datum'
+import { builtInEvaluate } from '../evaluate-datum.js'
 
-import { Chart } from '../index'
-import { FunctionPlotDatum } from '../types'
+import { Chart } from '../index.js'
+import { FunctionPlotDatum } from '../types.js'
 
 export default function Scatter(chart: Chart) {
   const xScale = chart.meta.xScale

src/graph-types/text.ts

@@ -3,8 +3,8 @@ import { hsl as d3Hsl } from 'd3-color'
 
 import { color } from '../utils.mjs'
 
-import { Chart } from '../index'
-import { FunctionPlotDatum } from '../types'
+import { Chart } from '../index.js'
+import { FunctionPlotDatum } from '../types.js'
 
 export default function Text(chart: Chart) {
   const xScale = chart.meta.xScale

src/graph-types/types.ts

@@ -1,6 +1,7 @@
 import { Selection } from 'd3-selection'
-import { FunctionPlotDatum } from '../types'
-import { Chart } from '../chart'
+
+import { FunctionPlotDatum } from '../types.js'
+import { Chart } from '../chart.js'
 
 /**
  * GraphTypeBuilder is the returned Plotter instance, this function is called

src/helpers/annotations.ts

@@ -1,8 +1,8 @@
 import { line as d3Line } from 'd3-shape'
 import { select as d3Select, Selection } from 'd3-selection'
 
-import { FunctionPlotOptions } from '../types'
-import { Chart } from '../index'
+import { FunctionPlotOptions } from '../types.js'
+import { Chart } from '../index.js'
 
 export default function annotations(options: { owner: Chart }) {
   const xScale = options.owner.meta.xScale

src/helpers/derivative.ts

@@ -1,12 +1,12 @@
 import { select as d3Select, Selection } from 'd3-selection'
 
-import { polyline } from '../graph-types/'
+import { polyline } from '../graph-types/index.js'
 import { builtIn as builtInEvaluator } from '../samplers/eval.mjs'
-import datumDefaults from '../datum-defaults'
+import datumDefaults from '../datum-defaults.js'
 import { infinity } from '../utils.mjs'
 
-import { Chart } from '../index'
-import { FunctionPlotDatum } from '../types'
+import { Chart } from '../index.js'
+import { FunctionPlotDatum } from '../types.js'
 
 export default function derivative(chart: Chart) {
   const derivativeDatum = datumDefaults({

src/helpers/index.ts

@@ -1,8 +1,8 @@
 import { select as d3Select, Selection } from 'd3-selection'
-import derivative from './derivative'
-import secant from './secant'
+import derivative from './derivative.js'
+import secant from './secant.js'
 
-import { Chart } from '../index'
+import { Chart } from '../index.js'
 
 export default function helpers(chart: Chart) {
   function helper(selection: Selection<any, any, any, any>) {

src/helpers/secant.ts

@@ -1,12 +1,12 @@
 import { select as d3Select, Selection } from 'd3-selection'
 
 import { builtIn as builtInEvaluator } from '../samplers/eval.mjs'
-import datumDefaults from '../datum-defaults'
-import { polyline } from '../graph-types/'
+import datumDefaults from '../datum-defaults.js'
+import { polyline } from '../graph-types/index.js'
 import { infinity } from '../utils.mjs'
 
-import { Chart } from '../index'
-import { FunctionPlotDatumScope, FunctionPlotDatum, FunctionPlotDatumSecant } from '../types'
+import { Chart } from '../index.js'
+import { FunctionPlotDatumScope, FunctionPlotDatum, FunctionPlotDatumSecant } from '../types.js'
 
 export default function secant(chart: Chart) {
   const secantDefaults = datumDefaults({

src/index.ts

@@ -1,11 +1,11 @@
-import './polyfills'
+import './polyfills.js'
 
-import { IntervalWorkerPool } from './samplers/interval_worker_pool'
-import { FunctionPlotOptions } from './types'
-import { Chart, ChartMeta, ChartMetaMargin } from './chart'
+import { IntervalWorkerPool } from './samplers/interval_worker_pool.js'
+import { FunctionPlotOptions } from './types.js'
+import { Chart, ChartMeta, ChartMetaMargin } from './chart.js'
 
 import globals, { registerGraphType } from './globals.mjs'
-import { polyline, interval, scatter, text } from './graph-types'
+import { polyline, interval, scatter, text } from './graph-types/index.js'
 import { interval as intervalEval, builtIn as builtInEval } from './samplers/eval.mjs'
 
 // register common graphTypes on library load.
@@ -50,14 +50,14 @@ functionPlot.$eval = {
 functionPlot.graphTypes = { interval, polyline, scatter }
 functionPlot.withWebWorkers = withWebWorkers
 
-export * from './types'
+export * from './types.js'
 export { Chart, ChartMeta, ChartMetaMargin }
 export { registerGraphType, withWebWorkers }
 export { builtIn as EvalBuiltIn, interval as EvalInterval } from './samplers/eval.mjs'
 export {
   interval as GraphTypeInterval,
   polyline as GraphTypePolyline,
   scatter as GraphTypeScatter
-} from './graph-types'
-export { GraphTypePlotter, GraphTypeBuilder } from './graph-types/types'
-export * from './helpers'
+} from './graph-types/index.js'
+export { GraphTypePlotter, GraphTypeBuilder } from './graph-types/types.js'
+export * from './helpers/index.js'

src/perf/interval-pipeline.ts

@@ -7,10 +7,10 @@ import { Bench } from 'tinybench'
 import { scaleLinear } from 'd3-scale'
 
 import globals from '../globals.mjs'
-import { IntervalWorkerPool, BackpressureStrategy } from '../samplers/interval_worker_pool'
-import { FunctionPlotDatum, FunctionPlotOptionsAxis } from '../types'
-import { createPathD } from '../graph-types/interval'
-import { asyncSamplerInterval, syncSamplerInterval } from '../samplers/interval'
+import { IntervalWorkerPool, BackpressureStrategy } from '../samplers/interval_worker_pool.js'
+import { FunctionPlotDatum, FunctionPlotOptionsAxis } from '../types.js'
+import { createPathD } from '../graph-types/interval.js'
+import { asyncSamplerInterval, syncSamplerInterval } from '../samplers/interval.js'
 
 async function createData(nSamples: number, nGroups: number, async: boolean) {
   const width = 500

src/samplers/builtIn.test.js

@@ -1,7 +1,7 @@
 import { scaleLinear as d3ScaleLinear } from 'd3-scale'
 import { expect } from '@jest/globals'
 
-import builtIn from './builtIn'
+import builtIn from './builtIn.js'
 
 const width = 200
 const height = 100

src/samplers/builtIn.ts

@@ -1,8 +1,8 @@
 import { linspace, sgn, infinity, clamp, space, isValidNumber } from '../utils.mjs'
 import { builtIn as evaluate } from './eval.mjs'
 
-import { FunctionPlotDatum, FunctionPlotScale } from '../types'
-import { SamplerParams, SamplerFn } from './types'
+import { FunctionPlotDatum, FunctionPlotScale } from '../types.js'
+import { SamplerParams, SamplerFn } from './types.js'
 
 type Asymptote = {
   asymptote: boolean

src/samplers/index.ts

@@ -1,4 +1,4 @@
-import builtIn from './builtIn'
-import { syncSamplerInterval, asyncSamplerInterval } from './interval'
+import builtIn from './builtIn.js'
+import { syncSamplerInterval, asyncSamplerInterval } from './interval.js'
 
 export { builtIn, syncSamplerInterval, asyncSamplerInterval }

src/samplers/interval.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from '@jest/globals'
 import { scaleLinear as d3ScaleLinear } from 'd3-scale'
 import { Interval } from 'interval-arithmetic-eval'
 
-import { syncSamplerInterval } from './interval'
+import { syncSamplerInterval } from './interval.js'
 
 const width = 200
 const height = 100

src/samplers/interval.ts

@@ -4,8 +4,8 @@ import { interval as evaluate } from './eval.mjs'
 import { infinity, space, interval2dTypedArray } from '../utils.mjs'
 import globals from '../globals.mjs'
 
-import { FunctionPlotDatum } from '../types'
-import { SamplerParams, IntervalSamplerResult, IntervalSamplerResultGroup, SamplerFn, AsyncSamplerFn } from './types'
+import { FunctionPlotDatum } from '../types.js'
+import { SamplerParams, IntervalSamplerResult, IntervalSamplerResultGroup, SamplerFn, AsyncSamplerFn } from './types.js'
 
 // disable the use of typed arrays in interval-arithmetic to improve the performance
 ;(intervalArithmeticEval as any).policies.disableRounding()

src/samplers/interval_worker_pool.ts

@@ -1,6 +1,7 @@
-import { FunctionPlotDatum } from '../types'
 import Worker from 'web-worker'
 
+import { FunctionPlotDatum } from '../types.js'
+
 interface IntervalTask {
   d: FunctionPlotDatum
   lo: number

src/samplers/types.ts

@@ -1,4 +1,4 @@
-import { FunctionPlotDatum, FunctionPlotScale, FunctionPlotOptionsAxis } from '../types'
+import { FunctionPlotDatum, FunctionPlotScale, FunctionPlotOptionsAxis } from '../types.js'
 
 export type SamplerParams = {
   d: FunctionPlotDatum

src/tip.ts

@@ -4,7 +4,7 @@ import { select as d3Select, Selection } from 'd3-selection'
 import { color, clamp, infinity, isValidNumber, getterSetter } from './utils.mjs'
 import globals from './globals.mjs'
 import { builtIn as builtInEvaluator } from './samplers/eval.mjs'
-import { FunctionPlotTip } from './types'
+import { FunctionPlotTip } from './types.js'
 
 export default function mouseTip(config: FunctionPlotTip) {
   config = Object.assign(

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "esModuleInterop": true,
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
@@ -15,7 +15,6 @@
       ]
     },
     "types": ["node", "jest"],
-    "jsx": "react",
     "lib": ["es2022", "dom"]
   },
   "include": [