add exports

.github/workflows/pkg-pr-new.yml

@@ -20,4 +20,4 @@ jobs:
       - run: pnpm install
       - name: Build nivo packages
         run: make pkgs-build
-      - run: pnpx pkg-pr-new publish
+      - run: pnpx pkg-pr-new publish --pnpm ./packages/*

conf/rollup.config.mjs

@@ -61,7 +61,7 @@ const configs = [
     {
         ...common,
         output: {
-            file: `./packages/${pkg}/dist/nivo-${pkg}.es.js`,
+            file: `./packages/${pkg}/dist/nivo-${pkg}.mjs`,
             format: 'es',
             name: `@nivo/${pkg}`,
             sourcemap: true,

hoge.mjs

@@ -0,0 +1,26 @@
+import { globSync, readFileSync, writeFileSync } from 'node:fs'
+
+const files = globSync('packages/**/package.json')
+
+for (const file of files) {
+    const content = JSON.parse(readFileSync(file, 'utf8'))
+
+    if (content['module'].endsWith('.es.js')) {
+        content['module'] = content['module'].replace('.es.js', '.mjs')
+    }
+    if (content['module'].endsWith('.es.mjs')) {
+        content['module'] = content['module'].replace('.es.mjs', '.mjs')
+    }
+
+    const exportsField = {
+        '.': {
+            types: content['types'],
+            import: content['module'],
+            require: content['main'],
+        },
+    }
+
+    content['exports'] = exportsField
+
+    writeFileSync(file, JSON.stringify(content, null, 2))
+}

packages/annotations/package.json

@@ -19,7 +19,7 @@
         "annotations"
     ],
     "main": "./dist/nivo-annotations.cjs.js",
-    "module": "./dist/nivo-annotations.es.js",
+    "module": "./dist/nivo-annotations.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -38,5 +38,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-annotations.mjs",
+            "require": "./dist/nivo-annotations.cjs.js"
+        }
     }
 }

packages/annotations/src/AnnotationNote.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react'
-import omit from 'lodash/omit'
+import omit from 'lodash/omit.js'
 import { useSpring, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { NoteSvg } from './types'

packages/annotations/src/compute.ts

@@ -1,6 +1,6 @@
-import filter from 'lodash/filter'
-import isNumber from 'lodash/isNumber'
-import omit from 'lodash/omit'
+import filter from 'lodash/filter.js'
+import isNumber from 'lodash/isNumber.js'
+import omit from 'lodash/omit.js'
 import {
     radiansToDegrees,
     absoluteAngleDegrees,

packages/arcs/package.json

@@ -19,7 +19,7 @@
         "arcs"
     ],
     "main": "./dist/nivo-arcs.cjs.js",
-    "module": "./dist/nivo-arcs.es.js",
+    "module": "./dist/nivo-arcs.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -39,5 +39,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-arcs.mjs",
+            "require": "./dist/nivo-arcs.cjs.js"
+        }
     }
 }

packages/axes/package.json

@@ -18,7 +18,7 @@
         "axes"
     ],
     "main": "./dist/nivo-axes.cjs.js",
-    "module": "./dist/nivo-axes.es.js",
+    "module": "./dist/nivo-axes.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -40,5 +40,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-axes.mjs",
+            "require": "./dist/nivo-axes.cjs.js"
+        }
     }
 }

packages/bar/package.json

@@ -20,7 +20,7 @@
         "bar-chart"
     ],
     "main": "./dist/nivo-bar.cjs.js",
-    "module": "./dist/nivo-bar.es.js",
+    "module": "./dist/nivo-bar.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -48,5 +48,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-bar.mjs",
+            "require": "./dist/nivo-bar.cjs.js"
+        }
     }
 }

packages/bar/src/compute/legends.ts

@@ -7,7 +7,7 @@ import {
     LegendLabelDatum,
 } from '../types'
 import { getPropertyAccessor } from '@nivo/core'
-import uniqBy from 'lodash/uniqBy'
+import uniqBy from 'lodash/uniqBy.js'
 
 export const getLegendDataForKeys = <RawDatum extends BarDatum>(
     bars: BarsWithHidden<RawDatum>,

packages/boxplot/package.json

@@ -25,7 +25,7 @@
         "stats"
     ],
     "main": "./dist/nivo-boxplot.cjs.js",
-    "module": "./dist/nivo-boxplot.es.js",
+    "module": "./dist/nivo-boxplot.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -53,5 +53,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-boxplot.mjs",
+            "require": "./dist/nivo-boxplot.cjs.js"
+        }
     }
 }

packages/boxplot/src/compute/legends.ts

@@ -1,7 +1,7 @@
 import { BoxPlotDatum, BoxPlotCommonProps, ComputedBoxPlotSummary, LegendData } from '../types'
 import { getPropertyAccessor } from '@nivo/core'
-import uniqBy from 'lodash/uniqBy'
-import sortBy from 'lodash/sortBy'
+import uniqBy from 'lodash/uniqBy.js'
+import sortBy from 'lodash/sortBy.js'
 
 export const getLegendData = <RawDatum extends BoxPlotDatum>({
     boxPlots,

packages/bullet/package.json

@@ -20,7 +20,7 @@
         "bullet-chart"
     ],
     "main": "./dist/nivo-bullet.cjs.js",
-    "module": "./dist/nivo-bullet.es.js",
+    "module": "./dist/nivo-bullet.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -42,5 +42,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-bullet.mjs",
+            "require": "./dist/nivo-bullet.cjs.js"
+        }
     }
 }

packages/bump/package.json

@@ -21,7 +21,7 @@
         "area-bump-chart"
     ],
     "main": "./dist/nivo-bump.cjs.js",
-    "module": "./dist/nivo-bump.es.js",
+    "module": "./dist/nivo-bump.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -48,5 +48,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-bump.mjs",
+            "require": "./dist/nivo-bump.cjs.js"
+        }
     }
 }

packages/calendar/package.json

@@ -20,7 +20,7 @@
         "calendar"
     ],
     "main": "./dist/nivo-calendar.cjs.js",
-    "module": "./dist/nivo-calendar.es.js",
+    "module": "./dist/nivo-calendar.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -45,5 +45,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-calendar.mjs",
+            "require": "./dist/nivo-calendar.cjs.js"
+        }
     }
 }

packages/calendar/src/compute/calendar.ts

@@ -1,6 +1,6 @@
-import isDate from 'lodash/isDate'
-import memoize from 'lodash/memoize'
-import range from 'lodash/range'
+import isDate from 'lodash/isDate.js'
+import memoize from 'lodash/memoize.js'
+import range from 'lodash/range.js'
 import { alignBox } from '@nivo/core'
 import { timeFormat } from 'd3-time-format'
 import { timeDays, timeWeek, timeWeeks, timeMonths, timeYear } from 'd3-time'

packages/calendar/src/compute/timeRange.ts

@@ -11,7 +11,7 @@ import {
 } from 'd3-time'
 import { timeFormat } from 'd3-time-format'
 import { DateOrString, Weekday } from '../types'
-import isDate from 'lodash/isDate'
+import isDate from 'lodash/isDate.js'
 
 // Interfaces
 interface ComputeBaseProps {

packages/canvas/package.json

@@ -19,7 +19,7 @@
         "canvas"
     ],
     "main": "./dist/nivo-canvas.cjs.js",
-    "module": "./dist/nivo-canvas.es.js",
+    "module": "./dist/nivo-canvas.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -29,5 +29,12 @@
     ],
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-canvas.mjs",
+            "require": "./dist/nivo-canvas.cjs.js"
+        }
     }
 }

packages/chord/package.json

@@ -20,7 +20,7 @@
         "chord-diagram"
     ],
     "main": "./dist/nivo-chord.cjs.js",
-    "module": "./dist/nivo-chord.es.js",
+    "module": "./dist/nivo-chord.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -45,5 +45,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-chord.mjs",
+            "require": "./dist/nivo-chord.cjs.js"
+        }
     }
 }

packages/circle-packing/package.json

@@ -20,7 +20,7 @@
         "circle-packing"
     ],
     "main": "./dist/nivo-circle-packing.cjs.js",
-    "module": "./dist/nivo-circle-packing.es.js",
+    "module": "./dist/nivo-circle-packing.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -42,5 +42,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-circle-packing.mjs",
+            "require": "./dist/nivo-circle-packing.cjs.js"
+        }
     }
 }

packages/circle-packing/src/hooks.ts

@@ -1,7 +1,7 @@
 import { useMemo, MouseEvent, MutableRefObject, useCallback } from 'react'
 import { pack as d3Pack, hierarchy as d3Hierarchy } from 'd3-hierarchy'
-import cloneDeep from 'lodash/cloneDeep'
-import sortBy from 'lodash/sortBy'
+import cloneDeep from 'lodash/cloneDeep.js'
+import sortBy from 'lodash/sortBy.js'
 import {
     usePropertyAccessor,
     useValueFormatter,

packages/colors/package.json

@@ -12,7 +12,7 @@
         "directory": "packages/colors"
     },
     "main": "./dist/nivo-colors.cjs.js",
-    "module": "./dist/nivo-colors.es.js",
+    "module": "./dist/nivo-colors.mjs",
     "types": "./dist/types/index.d.ts",
     "files": [
         "README.md",
@@ -37,5 +37,12 @@
     },
     "publishConfig": {
         "access": "public"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/types/index.d.ts",
+            "import": "./dist/nivo-colors.mjs",
+            "require": "./dist/nivo-colors.cjs.js"
+        }
     }
 }

packages/colors/src/inheritedColor.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
-import get from 'lodash/get'
-import isPlainObject from 'lodash/isPlainObject'
+import get from 'lodash/get.js'
+import isPlainObject from 'lodash/isPlainObject.js'
 import { rgb, RGBColor } from 'd3-color'
 import { Theme } from '@nivo/core'
 

packages/colors/src/scales/ordinalColorScale.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
-import get from 'lodash/get'
-import isPlainObject from 'lodash/isPlainObject'
+import get from 'lodash/get.js'
+import isPlainObject from 'lodash/isPlainObject.js'
 import { scaleOrdinal } from 'd3-scale'
 import {
     ColorSchemeId,