[docs] Support demos with side effect imports

[m4theushw]

• I have followed (at least) the PR section of the contributing guide.

In the X repo there's a demo that imports a locale from dayjs, but this import is not used along the code. This causes the demo to crash because: 1. the demos are loaded with react-runner; which 2. requires all imports to be specified at front, but since the regex that searches the imports to be loaded doesn't match imports not used along the code the module can't be found.

Side note: Today I learned that this kind of import is called "side effect import" by MDN.

Related to mui/mui-x#6369 (review)

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35177--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 76e4765

[oliviertassinari]

👍

It might make sense to create a simple test for it in docs/packages/markdown/extractImports.test.js, not sure.

I wonder if there isn't a way to share the same abstraction with

material-ui/docs/src/modules/sandbox/Dependencies.ts

Lines 117 to 124 in 04d2a26

	const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;
	let m: RegExpExecArray | null = null;
	// eslint-disable-next-line no-cond-assign
	while ((m = re.exec(raw))) {
	const fullName = m[2] ?? m[1];
	// handle scope names
	const name =
	fullName.charAt(0) === '@' ? fullName.split('/', 2).join('/') : fullName.split('/', 1)[0];

It feels like these two functions aim for saving the same problem.

[m4theushw]

I don't understand. It seems that by only upgrading the monorepo in master solved the problem: https://deploy-preview-6864--material-ui-x.netlify.app/x/react-date-pickers/localization/

[oliviertassinari]

I don't understand. It seems that by only mui/mui-x#6864 the monorepo in master solved the problem:

@m4theushw I covers a bit of the why in:

Now, it uses the v1 of the live edit, the v2 makes the demo work when no edits are done. So, the bug will be less visible. TL:DR updating the @mui/monorepo will fix a large chunk of the issue.

mui/mui-x#6369 (review)

Try to make an edit in the field, and the demo will still be broken.

[Janpot]

For reference, this is what we use in toolpad: https://github.com/mui/mui-toolpad/blob/3ef124ab46e4ba0682665b6cc93b87d6fc0434d9/packages/toolpad-app/src/utils/strings.ts#L80-L104
We have a very basic test suite that you can copy if you want https://github.com/mui/mui-toolpad/blob/3ef124ab46e4ba0682665b6cc93b87d6fc0434d9/packages/toolpad-app/src/utils/strings.spec.ts#L3

[flaviendelangle]

Is the regexp ready or do we need to wait ?

[m4theushw]

@Janpot Thanks! I managed to reuse them here by doing slightly modifications to ignore capturing groups, characters from template strings and spaces. One thing to note: the regex from Toolpad is matching spaces when the import name is "module-2\s\s" (GitHub doesn't allow me to use 2 spaces). This can be fixed adding \s to the list of characters that shouldn't be matched.

[Janpot]

One thing to note: the regex from Toolpad is matching spaces when the import name is "module-2\s\s"

We were specifically looking to match on any import specifier (e.g. anything between ""). The idea being that it's up to subsequent validation to verify whether it can resolve to a module or not.