[charts] Use vendor to have CJS working out of the box

.circleci/config.yml

@@ -91,6 +91,9 @@ commands:
       - run:
           name: Install js dependencies
           command: pnpm install
+      - run:
+          name: Build charts vendor
+          command: node ./packages/x-charts-vendor/scripts/build.js
       - when:
           condition: << parameters.browsers >>
           steps:
@@ -128,9 +131,6 @@ jobs:
     steps:
       - checkout
       - install_js
-      - run:
-          name: Tests charts
-          command: pnpm test:charts:unit # Run special test for charts due to ESM compatibility issue
       - run:
           name: Tests fake browser
           command: pnpm test:coverage

.codesandbox/ci.json

@@ -11,6 +11,7 @@
     "packages/x-date-pickers",
     "packages/x-date-pickers-pro",
     "packages/x-charts",
+    "packages/x-charts-vendor",
     "packages/x-tree-view",
     "packages/x-internals"
   ],
@@ -23,6 +24,7 @@
     "@mui/x-date-pickers": "packages/x-date-pickers/build",
     "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build",
     "@mui/x-charts": "packages/x-charts/build",
+    "@mui/x-charts-vendor": "packages/x-charts-vendor",
     "@mui/x-charts-pro": "packages/x-charts-pro/build",
     "@mui/x-tree-view": "packages/x-tree-view/build",
     "@mui/x-tree-view-pro": "packages/x-tree-view-pro/build",

.eslintignore

@@ -6,6 +6,7 @@ netlify/functions
 /docs/pages/playground/
 /lerna.json
 /packages/x-codemod/src/**/*.spec.js
+/packages/x-charts-vendor
 build
 CHANGELOG.md
 dist

babel.config.js

@@ -16,6 +16,7 @@ const defaultAlias = {
   '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
   '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'),
   '@mui/x-charts-pro': resolveAliasPath('./packages/x-charts-pro/src'),
+  '@mui/x-charts-vendor': resolveAliasPath('./packages/x-charts-vendor'),
   '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
   '@mui/x-tree-view-pro': resolveAliasPath('./packages/x-tree-view-pro/src'),
   '@mui/x-internals': resolveAliasPath('./packages/x-internals/src'),

docs/next.config.mjs

@@ -36,6 +36,8 @@ const WORKSPACE_ALIASES = {
   '@mui/x-date-pickers': path.resolve(WORKSPACE_ROOT, './packages/x-date-pickers/src'),
   '@mui/x-date-pickers-pro': path.resolve(WORKSPACE_ROOT, './packages/x-date-pickers-pro/src'),
   '@mui/x-charts': path.resolve(WORKSPACE_ROOT, './packages/x-charts/src'),
+  '@mui/x-charts-pro': path.resolve(WORKSPACE_ROOT, './packages/x-charts-pro/src'),
+  '@mui/x-charts-vendor': path.resolve(WORKSPACE_ROOT, './packages/x-charts-vendor'),
   '@mui/x-tree-view': path.resolve(WORKSPACE_ROOT, './packages/x-tree-view/src'),
   '@mui/x-tree-view-pro': path.resolve(WORKSPACE_ROOT, './packages/x-tree-view-pro/src'),
   '@mui/x-license': path.resolve(WORKSPACE_ROOT, './packages/x-license/src'),

docs/package.json

@@ -5,7 +5,7 @@
   "author": "MUI Team",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf ./export && cross-env NODE_ENV=production next build --profile && pnpm build-sw",
+    "build": "rimraf ./export && node ../packages/x-charts-vendor/scripts/build.js && cross-env NODE_ENV=production next build --profile && pnpm build-sw",
     "build:clean": "rimraf .next && pnpm build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "next dev --port 3001",
@@ -37,6 +37,7 @@
     "@mui/system": "^5.15.20",
     "@mui/utils": "^5.15.20",
     "@mui/x-charts": "workspace:*",
+    "@mui/x-charts-vendor": "workspace:*",
     "@mui/x-data-grid": "workspace:*",
     "@mui/x-data-grid-generator": "workspace:*",
     "@mui/x-data-grid-premium": "workspace:*",

package.json

@@ -38,7 +38,6 @@
     "test:karma": "cross-env NODE_ENV=test TZ=UTC karma start test/karma.conf.js",
     "test:karma:parallel": "cross-env NODE_ENV=test TZ=UTC PARALLEL=true karma start test/karma.conf.js",
     "test:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc",
-    "test:charts:unit": "cross-env NODE_ENV=test TZ=UTC mocha -n expose_gc --config packages/x-charts/.mocharc.js",
     "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
     "test:e2e:build": "webpack --config test/e2e/webpack.config.js",
     "test:e2e:dev": "concurrently \"pnpm test:e2e:build --watch\" \"pnpm test:e2e:server\"",

packages/x-charts-pro/package.json

@@ -46,14 +46,10 @@
     "@mui/utils": "^5.15.20",
     "@mui/x-charts": "workspace:*",
     "@mui/x-license": "workspace:*",
+    "@mui/x-charts-vendor": "workspace:*",
     "@react-spring/rafz": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "clsx": "^2.1.1",
-    "d3-color": "^3.1.0",
-    "d3-delaunay": "^6.0.4",
-    "d3-interpolate": "^3.0.1",
-    "d3-scale": "^4.0.2",
-    "d3-shape": "^3.2.0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {
@@ -74,11 +70,6 @@
   "devDependencies": {
     "@react-spring/core": "^9.7.3",
     "@react-spring/shared": "^9.7.3",
-    "@types/d3-color": "^3.1.3",
-    "@types/d3-delaunay": "^6.0.4",
-    "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-scale": "^4.0.8",
-    "@types/d3-shape": "^3.1.6",
     "@types/prop-types": "^15.7.12",
     "csstype": "^3.1.3",
     "rimraf": "^5.0.7"

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { interpolateRgbBasis } from 'd3-interpolate';
+import { interpolateRgbBasis } from '@mui/x-charts-vendor/d3-interpolate';
 import useId from '@mui/utils/useId';
 import { ChartsAxis, ChartsAxisProps } from '@mui/x-charts/ChartsAxis';
 import {

packages/x-charts-vendor/.babelrc.js

@@ -0,0 +1,62 @@
+/**
+ * Transform d3 ESM libraries to vendored CommonJS libraries
+ *
+ * This produces `lib-vendor/d3-<package name>/src` files that have
+ * internally consistent references to other d3 packages. It is only meant
+ * to be used for the CommonJS import path.
+ */
+const path = require('path');
+
+module.exports = {
+  only: ['node_modules/*/src/**/*.js', 'node_modules/*/**/*.js'],
+  plugins: [
+    [
+      '@babel/transform-modules-commonjs',
+      {
+        strict: false,
+        allowTopLevelThis: true,
+      },
+    ],
+    [
+      'module-resolver',
+      {
+        // Convert all imports for _other_ d3 dependencies to the relative
+        // path in our vendor package.
+        resolvePath(sourcePath, currentFile) {
+          const d3pattern =
+            /^(?<pkg>(d3-[^\/]+|internmap|delaunator|robust-predicates))(?<path>.*)/;
+          const match = d3pattern.exec(sourcePath);
+          if (match) {
+            // We're assuming a common shape of d3 packages:
+            // - Only top level imports "d3-<whatever>"
+            // - With no path components (like "d3-<whatever>/path/to.js")
+            if (match.groups.path) {
+              throw new Error(`Unable to process ${sourcePath} import in ${currentFile}`);
+            }
+
+            // Get Vendor package path.
+            const vendorPkg = ['delaunator', 'robust-predicates'].includes(match.groups.pkg)
+              ? path.resolve(__dirname, `./lib-vendor/${match.groups.pkg}/index.js`)
+              : path.resolve(__dirname, `./lib-vendor/${match.groups.pkg}/src/index.js`);
+
+            console.log({ vendorPkg });
+            // Derive relative path to vendor lib to have a file like move from:
+            // - 'node_modules/d3-interpolate/src/rgb.js'
+            // - 'lib-vendor/d3-interpolate/src/rgb.js'
+            // and have an import transform like:
+            // - `d3-color`
+            // - `../../d3-color`
+            const currentFileVendor = currentFile.replace(/^node_modules/, 'lib-vendor');
+            const relPathToPkg = path
+              .relative(path.dirname(currentFileVendor), vendorPkg)
+              .replace(/\\/g, '/');
+
+            return relPathToPkg;
+          }
+
+          return sourcePath;
+        },
+      },
+    ],
+  ],
+};

packages/x-charts-vendor/.gitignore

@@ -0,0 +1,7 @@
+/lib-vendor
+/d3-*
+/delaunator.*
+/robust-predicates.*
+/internmap.js
+/es
+/lib

packages/x-charts-vendor/README.md

@@ -0,0 +1,72 @@
+# VictoryVendor
+
+Vendored dependencies for Victory.
+
+## Background
+
+D3 has released most of its libraries as ESM-only. This means that consumers in Node.js applications can no longer just `require()` anything with a d3 transitive dependency, including much of Victory.
+
+To help provide an easy path to folks still using CommonJS in their Node.js applications that consume Victory, we now provide this package to vendor in various d3-related packages.
+
+## Packages
+
+We presently provide the following top-level libraries:
+
+<!-- cat packages/victory-vendor/package.json | egrep '"d3-' | egrep -o 'd3-[^"]*'| sor t-->
+
+- d3-ease
+- d3-interpolate
+- d3-scale
+- d3-shape
+- d3-timer
+
+This is the total list of top and transitive libraries we vendor:
+
+<!-- ls packages/victory-vendor/lib-vendor | sort -->
+
+- d3-array
+- d3-color
+- d3-ease
+- d3-format
+- d3-interpolate
+- d3-path
+- d3-scale
+- d3-shape
+- d3-time
+- d3-time-format
+- d3-timer
+- internmap
+
+Note that this does _not_ include the following D3 libraries that still support CommonJS:
+
+- d3-voronoi
+
+## How it works
+
+We provide two alternate paths and behaviors -- for ESM and CommonJS
+
+### ESM
+
+If you do a Node.js import like:
+
+```js
+import { interpolate } from '@mui/x-charts-vendor/d3-interpolate';
+```
+
+under the hood it's going to just re-export and pass you through to `node_modules/d3-interpolate`, the **real** ESM library from D3.
+
+### CommonJS
+
+If you do a Node.js import like:
+
+```js
+const { interpolate } = require('@mui/x-charts-vendor/d3-interpolate');
+```
+
+under the hood it's going to will go to an alternate path that contains the transpiled version of the underlying d3 library to be found at `victory-vendor/lib-vendor/d3-interpolate/**/*.js`. This futher has internally consistent import references to other `victory-vendor/lib-vendor/<pkg-name>` paths.
+
+Note that for some tooling (like Jest) that doesn't play well with `package.json:exports` routing to this CommonJS path, we **also** output a root file in the form of `victory-vendor/d3-interpolate.js`.
+
+## Licenses
+
+This project is released under the MIT license, but the vendor'ed in libraries include other licenses (e.g. ISC) that we enumerate in our `package.json:license` field.

packages/x-charts-vendor/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@mui/x-charts-vendor",
+  "version": "7.8.0",
+  "description": "Vendored dependencies for MUI charts",
+  "author": "MUI Team",
+  "main": "./index.js",
+  "keywords": [
+    "data visualization",
+    "React",
+    "d3",
+    "charting"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/mui-x"
+  },
+  "license": "MIT AND ISC",
+  "exports": {
+    "./package.json": "./package.json",
+    "./d3-*": {
+      "types": "./d3-*.d.ts",
+      "import": "./es/d3-*.js",
+      "default": "./lib/d3-*.js"
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.7",
+    "d3-color": "^3.1.0",
+    "d3-delaunay": "^6.0.4",
+    "d3-interpolate": "^3.0.1",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "d3-time": "^3.1.0",
+    "@types/d3-color": "^3.1.3",
+    "@types/d3-delaunay": "^6.0.4",
+    "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-shape": "^3.1.6",
+    "@types/d3-time": "^3.0.3",
+    "robust-predicates": "^3.0.2",
+    "delaunator": "^5.0.1"
+  },
+  "devDependencies": {
+    "d3-format": "^3.1.0",
+    "d3-time-format": "^4.1.0",
+    "d3-path": "^3.0.1",
+    "d3-array": "^3.1.6",
+    "@types/d3-format": "^3.0.4",
+    "@types/d3-time-format": "^4.0.3",
+    "@types/d3-path": "^3.0.1",
+    "@types/d3-array": "^3.0.3",
+    "internmap": "^2.0.3",
+    "execa": "^6.1.0",
+    "rimraf": "^3.0.2"
+  },
+  "publishConfig": {
+    "provenance": true
+  },
+  "scripts": {
+    "build": "node ./scripts/build.js"
+  }
+}