[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 issues: 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 use 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 think so, because if users are working with ESM this vendor should be transparent. And if they were transpiling d3 modules now they don't need it because we do it for them.

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

Changelog

📦 [charts] Use vendor to have CJS working out of the box
This modifies how the package imports D3.js. It should not impact you.

For more context, the initial issue is caused by D3 only exporting ESM. The solution up until now was to export charts with only ESM. But some frameworks are confused by this configuration. So the time we can fix our build, we use a vendor package providing a CJS version of D3.

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 eb8d06b

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.

github-actions · 2024-07-24T10:28:33Z

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

alexfauquette · 2024-07-26T09:04:42Z

vale github action failing is expected.

It fails when to many lines are modified, because that crash the review dog (which usually put comment in docs update)

github-actions · 2024-07-26T09:48:37Z

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

LukasTy

LGTM. 👍
Leaving some final comments and noting that I didn't take the time to test if the latest changes still fix the mentioned issues. 🙈

LukasTy · 2024-07-26T10:17:35Z

packages/x-charts-vendor/package.json

+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.24.8",


Would putting it into peerDependencies instead make any difference? 🤔
Given that it is always going to be used in tandem with mui/x-charts, which has a direct @babel/runtime dependency, it should be "fine".
However, if it doesn't change anything in the build process—there is probably no reason to do it. 🤔

LukasTy · 2024-07-26T13:09: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",


Will deploy examples work without it by using the latest version?

LukasTy · 2024-07-26T13:14:06Z

package.json

@@ -65,7 +64,8 @@
    "release:publish:dry-run": "pnpm publish --recursive --tag latest --registry=\"http://localhost:4873/\"",
    "release:tag": "node scripts/releaseTag.mjs",
    "validate": "concurrently \"pnpm prettier && pnpm eslint\" \"pnpm proptypes\" \"pnpm docs:typescript:formatted\" \"pnpm docs:api\"",
-    "clean:node_modules": "rimraf --glob \"**/node_modules\""
+    "clean:node_modules": "rimraf --glob \"**/node_modules\"",
+    "build:charts:vendor": "node ./packages/x-charts-vendor/scripts/build.js"


Is there a point in having this script if we can run pnpm --filter @mui/x-charts-vendor build or at least use it here? 🤔

I was not aware of this --filter option

LukasTy · 2024-07-26T13:18:17Z

.circleci/config.yml

+      - run:
+          name: '`pnpm build:charts:vendor` changes committed?'
+          command: |
+            pnpm build:charts:vendor


Nitpick: I see that it takes ~9 seconds on CI, but still, have you considered running it less frequently?
Maybe use the same logic as for the dedupe?

mui-x/.circleci/config.yml

Lines 126 to 134 in ad605ff

name: '`pnpm dedupe` was run?'

command: |

# #default-branch-switch

if [[ $(git diff --name-status master | grep pnpm-lock) == "" ]];

then

echo "No changes to dependencies detected. Skipping..."

else

pnpm dedupe --check

fi

alexfauquette · 2024-07-26T13:40:33Z

I didn't take the time to test if the latest changes still fix the mentioned issues. 🙈

No wories, I plan to do it before merging, but after having CI green :)

.circleci/config.yml

Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

JCQuintas · 2024-07-29T19:57:45Z

It only occurred to me now, but couldn't we have bundled the lib files into a single file for cjs? 🤔 Probably for a future iteration though 😆

LukasTy · 2024-07-30T08:49:11Z

couldn't we have bundled the lib files into a single file for cjs? 🤔 Probably for a future iteration though 😆

We could have done that, yes. 👍
But we tried keeping the solution close to victory-vendor AFAIK. 🤔

alexfauquette · 2024-07-30T09:30:33Z

Good idea. I keep it in case the number of file generated reveals to be an issue 👍

Janpot · 2024-08-29T09:49:58Z

Finally managed to take a look at this. Some remarks:

Looks good! I see nothing in the package layout that wouldn't work. It's just re-exporting for ESM so no resolution problems there.
Rollup would likely have been more appropriate here as a tool to bundle those d3 sources. It would completely eliminate the custom resolver required in babel. (If you find that resolving is required in babel, it's an indication that a bundler should be used instead). But it's working well, we can roll with it 👍.
Ideally the output extensions of the esm target are .mjs

oliviertassinari · 2024-09-02T23:05:02Z

packages/x-charts-vendor/package.json

+  "version": "7.8.0",
+  "description": "Vendored dependencies for MUI X Charts",
+  "author": "MUI Team",
+  "main": "./index.js",


This file doesn't exist:

https://publint.dev/@mui/x-charts-vendor@7.15.0

I think that we can remove it, it will be clearer:

Suggested change

"main": "./index.js",

Edit: fixed in #14465

Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>

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 added 2 commits July 24, 2024 12:20

use babel runtime

f70d698

pnpm install

fca1af4

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

alexfauquette mentioned this pull request Jul 24, 2024

[test] Fix adapters code coverage #13969

Merged

alexfauquette added 2 commits July 26, 2024 10:46

limit vale action

1055b74

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

cc68da2

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

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

38e222b

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

LukasTy approved these changes Jul 26, 2024

View reviewed changes

alexfauquette added 2 commits July 26, 2024 15:56

lukas feedback

d7db24a

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

f975545

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

LukasTy reviewed Jul 29, 2024

View reviewed changes

.circleci/config.yml Outdated Show resolved Hide resolved

.circleci/config.yml Outdated Show resolved Hide resolved

alexfauquette and others added 2 commits July 29, 2024 09:54

Apply suggestions from code review

a8aa2c0

Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>

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

eb8d06b

alexfauquette merged commit 743779f into mui:master Jul 29, 2024
16 of 17 checks passed

JCQuintas mentioned this pull request Aug 19, 2024

[code-infra] Fully resolve imports in ESM target #14234

Merged

2 tasks

alexfauquette mentioned this pull request Aug 29, 2024

[charts] Replace ESM extensions by .mjs #14387

Merged

oliviertassinari reviewed Sep 2, 2024

View reviewed changes

alexfauquette mentioned this pull request Sep 3, 2024

[charts] Update package.json for vendor package #14465

Merged

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 by oliviertassinari

Loading

mui-bot commented Jun 24, 2024 •

edited

Loading

github-actions bot commented Jun 25, 2024

github-actions bot commented Jun 26, 2024

github-actions bot commented Jul 24, 2024

alexfauquette commented Jul 26, 2024

github-actions bot commented Jul 26, 2024

LukasTy left a comment

LukasTy Jul 26, 2024

LukasTy Jul 26, 2024

LukasTy Jul 26, 2024

alexfauquette Jul 26, 2024

LukasTy Jul 26, 2024

alexfauquette commented Jul 26, 2024

JCQuintas commented Jul 29, 2024

LukasTy commented Jul 30, 2024

alexfauquette commented Jul 30, 2024

Janpot commented Aug 29, 2024 •

edited

Loading

oliviertassinari Sep 2, 2024 •

edited

Loading

	name: '`pnpm dedupe` was run?'
	command: \|
	# #default-branch-switch
	if [[ $(git diff --name-status master \| grep pnpm-lock) == "" ]];
	then
	echo "No changes to dependencies detected. Skipping..."
	else
	pnpm dedupe --check
	fi

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

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

Conversation

alexfauquette commented Jun 24, 2024 • edited by oliviertassinari Loading

Related issues

What has been done

Open question

TODO if we agree on the strategy

Changelog

mui-bot commented Jun 24, 2024 • edited Loading

github-actions bot commented Jun 25, 2024

github-actions bot commented Jun 26, 2024

github-actions bot commented Jul 24, 2024

alexfauquette commented Jul 26, 2024

github-actions bot commented Jul 26, 2024

LukasTy left a comment

Choose a reason for hiding this comment

LukasTy Jul 26, 2024

Choose a reason for hiding this comment

LukasTy Jul 26, 2024

Choose a reason for hiding this comment

LukasTy Jul 26, 2024

Choose a reason for hiding this comment

alexfauquette Jul 26, 2024

Choose a reason for hiding this comment

LukasTy Jul 26, 2024

Choose a reason for hiding this comment

alexfauquette commented Jul 26, 2024

JCQuintas commented Jul 29, 2024

LukasTy commented Jul 30, 2024

alexfauquette commented Jul 30, 2024

Janpot commented Aug 29, 2024 • edited Loading

oliviertassinari Sep 2, 2024 • edited Loading

Choose a reason for hiding this comment

alexfauquette commented Jun 24, 2024 •

edited by oliviertassinari

Loading

mui-bot commented Jun 24, 2024 •

edited

Loading

Janpot commented Aug 29, 2024 •

edited

Loading

oliviertassinari Sep 2, 2024 •

edited

Loading