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

alexfauquette · 2024-06-24T09:19:51Z

Related issues

Would fix [charts][ESM] @mui/x-charts does not work with jest #11568 -: with the following modification the error is gone test-victory-vendor alexfauquette/mui-x-charts-jest-issue-minimal-reproduction#1
For [charts][ESM] Can't import @mui/x-charts under node.js #11016 we still have some import issue: https://stackblitz.com/edit/stackblitz-starters-okvxu3?file=package.json,index.mjs
I had to do the following modification to have the example work (plus adding share dependencies)

- import { BarChart } from '@mui/x-charts/BarChart';
+ import { BarChart } from '@mui/x-charts/BarChart/index.js';

Fix [charts][ESM] Doesn't build in Next.js due to require() of ES Module (ERR_REQUIRE_ESM) #9826
https://codesandbox.io/p/devbox/elegant-forest-hvn8fk?file=%2Fnext.config.js%3A7%2C42&workspaceId=d214a4af-c616-40eb-ac12-807102cf00db
Allows to integrate charts unit test with others since the babel hack is not needed anymore

What has been done

I copy pasted the victory-vendor script and adapted it such that it includes all the d3 lib we need (colors, interpolation, scale)

I did not used directly the victory-vendor package because they use the legacy d3-voronoid and we are using the new d3-delaunay.

The d3-delaunay is a wrapper on top of delaunator which relies on robust-predicates. This last one seems to also be only ESM so I added both of them to the script such that they are correctly imported for CJS

Open question

Is it a breaking change? I don't hink so, because if user are woking with ESM this vendor should be transparent. ANd if they were transpiling d3 modules now they don't need because we do it for theme

TODO if we agree on the strategy

Clean the Readme and Licence
Make sure the built package only contains the needed stuff
Make sure release is working fine
Update instalation documentation

mui-bot · 2024-06-24T09:23:42Z

Deploy preview: https://deploy-preview-13608--material-ui-x.netlify.app/

Updated pages:

docs/data/charts/getting-started/getting-started.md

Generated by 🚫 dangerJS against eb50d4f

github-actions · 2024-06-25T08:00:06Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/x-charts-vendor/README.md

github-actions · 2024-06-26T12:12:59Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette · 2024-07-02T14:57:41Z

.circleci/config.yml

+      - run:
+          name: Build charts vendor
+          command: node ./packages/x-charts-vendor/scripts/build.js


We need to build the package each time. Otherwise the folder is empty and so every script complains that the package does not exist

Should we provide the package built already instead of having to build it in the pipelines and docs?

This would create an inconsistency in the release:

For not the @mui/x-charts-vendor is not published so no preview could work

The preview would used the last released version of the @mui/x-charts-vendor which is not practical if you need to bump one of the d3-lib

alexfauquette · 2024-07-02T14:58:12Z

.circleci/config.yml

      - install_js
-      - run:
-          name: Tests charts
-          command: pnpm test:charts:unit # Run special test for charts due to ESM compatibility issue
      - run:


Thos test are now in unit test since it does not require any specific babel config

alexfauquette · 2024-07-02T14:58:43Z

.codesandbox/ci.json

@@ -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",


Not sure it's usefull to ask circle ci to build it 🤔

alexfauquette · 2024-07-02T14:59:18Z

.eslintignore

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


Except the script all the files are automatically generated, so I just skipped the entire folder

I would argue it is useful for the script itself to be linted 😅

It's a copy past of victory-vendor so it nearly respect non of our linting rules. But could do it in a cleanup phase

alexfauquette · 2024-07-02T15:00:19Z

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 the vendor package otherwise netlify has no access to it

This currently means all our devs need to build the lib before we can run pnpm docs:dev, else docs can't find the files. We probably need to run it on the dev command as well 🤔

I assumed that once merged, everybody would run the build, and then it's done since all the generated files are in .gitignore

But effectively it's not friendly for external contributors. Maybe adding a parameter such that build.js chached check if some files already exist. if yes it just skip the build. Such that when running dev, we don't lose time generating this package

Yeah, maybe check if the entrypoints are present and run the script otherwise?

It also breaks when running tests btw

alexfauquette · 2024-07-02T15:00:55Z

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

+              ? path.resolve(__dirname, `./lib-vendor/${match.groups.pkg}/index.js`)
+              : path.resolve(__dirname, `./lib-vendor/${match.groups.pkg}/src/index.js`);
+
+            console.log({ vendorPkg });


Suggested change

console.log({ vendorPkg });

alexfauquette · 2024-07-02T15:03:55Z

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

+            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`);


Here is the main difference with the original script.

d3-delaunay requires delaunator which requires robust-predicates which seems to be ESM only too.

So I added the to the vendor too.

Those lines are here because they do not have the exact same structure as the d3 packages

github-actions · 2024-07-02T19:35:26Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

JCQuintas · 2024-07-03T10:25:09Z

.circleci/config.yml

+      - run:
+          name: Build charts vendor
+          command: node ./packages/x-charts-vendor/scripts/build.js


Should we provide the package built already instead of having to build it in the pipelines and docs?

package.json

packages/x-charts/package.json

JCQuintas · 2024-07-03T10:31:23Z

.eslintignore

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


I would argue it is useful for the script itself to be linted 😅

packages/x-charts-vendor/scripts/build.js

packages/x-charts-vendor/package.json

github-actions · 2024-07-05T15:46:25Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2024-07-16T12:12:02Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/data/charts/getting-started/getting-started.md

JCQuintas · 2024-07-19T10:17:14Z

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",


This currently means all our devs need to build the lib before we can run pnpm docs:dev, else docs can't find the files. We probably need to run it on the dev command as well 🤔

test

ae7a4a3

alexfauquette added the component: charts This is the name of the generic UI component, not the React module! label Jun 24, 2024

alexfauquette added 2 commits June 24, 2024 11:31

fix

c46b401

update

0d45b9c

alexfauquette force-pushed the test-ESM branch from 70262c6 to 0d45b9c Compare June 24, 2024 15:45

fixes

eaf8c8b

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 25, 2024

alexfauquette added 3 commits June 25, 2024 11:27

fix packages

49f743c

prettier

94f6877

Merge remote-tracking branch 'upstream/master' into test-ESM

c74279a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 25, 2024

alexfauquette commented Jun 25, 2024

View reviewed changes

packages/x-charts-vendor/README.md Outdated Show resolved Hide resolved

alexfauquette added 3 commits June 25, 2024 13:50

back to master

bc2f212

fix

ebf7b12

add sub libraries

0a35124

alexfauquette changed the title ~~[charts] Test victory-vendor~~ [charts] Use vendor to have CJS working out of the box Jun 26, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jun 26, 2024

alexfauquette added 4 commits July 1, 2024 16:54

build the package before running tests

7bde9b5

move content into build folder

140c7e1

fix

4e3fa69

Merge remote-tracking branch 'upstream/master' into test-ESM

f8fb844

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 1, 2024

alexfauquette added 5 commits July 1, 2024 17:20

update

11eb62a

fix

3c9a4ab

revert build folder creation

4f4a121

fix test

f354771

update next-config

3310079

alexfauquette commented Jul 2, 2024

View reviewed changes

alexfauquette marked this pull request as ready for review July 2, 2024 15:09

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 2, 2024

alexfauquette requested review from LukasTy and JCQuintas July 3, 2024 09:01

JCQuintas reviewed Jul 3, 2024

View reviewed changes

alexfauquette added 2 commits July 3, 2024 15:08

fixes

41fdb7d

Merge remote-tracking branch 'upstream/master' into test-ESM

8ed7c37

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 3, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 5, 2024

Merge remote-tracking branch 'upstream/master' into test-ESM

aa66988

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 12, 2024

fic-ci

b7ffe8e

alexfauquette mentioned this pull request Jul 16, 2024

[charts][ESM] @mui/x-charts does not work with jest #11568

Open

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 16, 2024

alexfauquette added 3 commits July 16, 2024 16:02

Merge remote-tracking branch 'upstream/master' into test-ESM

0d72a58

update readme

200eb1b

update docs

71d9cf3

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 16, 2024

alexfauquette added 3 commits July 16, 2024 16:49

fix import

e705edd

script

64e5802

back npmignore

683e05f

alexfauquette force-pushed the test-ESM branch from ed1e2b7 to 683e05f Compare July 17, 2024 09:45

alexfauquette requested review from JCQuintas and Janpot July 19, 2024 08:33

JCQuintas reviewed Jul 19, 2024

View reviewed changes

remove forced ESM export

eb50d4f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alexfauquette commented Jun 24, 2024 •

edited

Loading

mui-bot commented Jun 24, 2024 •

edited

Loading

github-actions bot commented Jun 25, 2024

github-actions bot commented Jun 26, 2024

alexfauquette Jul 2, 2024

JCQuintas Jul 3, 2024

alexfauquette Jul 3, 2024

alexfauquette Jul 2, 2024

alexfauquette Jul 2, 2024

alexfauquette Jul 2, 2024

JCQuintas Jul 3, 2024

alexfauquette Jul 3, 2024 •

edited

Loading

alexfauquette Jul 2, 2024

JCQuintas Jul 19, 2024 •

edited

Loading

alexfauquette Jul 19, 2024

JCQuintas Jul 19, 2024

JCQuintas Jul 19, 2024

alexfauquette Jul 2, 2024

alexfauquette Jul 2, 2024

github-actions bot commented Jul 2, 2024

JCQuintas Jul 3, 2024

JCQuintas Jul 3, 2024

github-actions bot commented Jul 5, 2024

github-actions bot commented Jul 16, 2024

JCQuintas Jul 19, 2024 •

edited

Loading

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

Are you sure you want to change the base?

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

Conversation

alexfauquette commented Jun 24, 2024 • edited Loading

Related issues

What has been done

Open question

TODO if we agree on the strategy

mui-bot commented Jun 24, 2024 • edited Loading

github-actions bot commented Jun 25, 2024

github-actions bot commented Jun 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexfauquette Jul 3, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JCQuintas Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Jul 5, 2024

github-actions bot commented Jul 16, 2024

JCQuintas Jul 19, 2024 • edited Loading

Choose a reason for hiding this comment

alexfauquette commented Jun 24, 2024 •

edited

Loading

mui-bot commented Jun 24, 2024 •

edited

Loading

alexfauquette Jul 3, 2024 •

edited

Loading

JCQuintas Jul 19, 2024 •

edited

Loading

JCQuintas Jul 19, 2024 •

edited

Loading