[core] Introduce x-codemod package

[LukasTy]

Add the initial "infra" for @mui/x-codemod package.
Added most of the available utils from material-ui, event though only one is used for now.

• Copy relevant mui-codemod code
• Add one simple codemod/transform
• Create preset-safe
• Refactor code to TypeScript (involved some file moving and the final build package structure became more simple)
• Test by installing the locally built package and running provided x-codemod bin command
• Test by installing the codesandbox built package and running provided x-codemod bin command
• Test by installing the locally built package and running npx @mui/x-codemod
• Test that various and multiple jscodeshift options can be passed in

[LukasTy]

Locking version to the same as in material-ui as 0.14.0 produces unstable transformations...
I.e.:

return (
  <LocalizationProvider>
    stuff
  </LocalizationProvider>
);

becomes

return (
  (<LocalizationProvider>
    stuff
  </LocalizationProvider>)
);

[LukasTy]

Ideally this should be updated once we do a stable release. 🙈

[mui-bot]

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

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	742.8	1,344.1	742.8	970.72	224.342
Sort 100k rows	ms	768.3	1,261.9	1,206.6	1,107.76	176.056
Select 100k rows	ms	253.1	336.8	308.4	299.6	29.192
Deselect 100k rows	ms	179.6	387.6	244.4	256	77.693

Generated by 🚫 dangerJS against 28da2a4

[siriwatknp]

2 things that could be improved from the core repo:

• DX for writing tests. My pain point from the core repo is that the codemod logic files are separated from the test data files. It is quite frustrating when the codemods grow at some point. Ideally, the logic and test data files should live in the same folder:

  codemod-a
    - codemod-a.js
    - codemod-a.test.js
    - ...actual and expected files
  codemod-b
    - ...similar structure

• I remember that the community would like to pass some options to jscodeshift but it is not possible because @mui/codemod does not allow them to do that.

[flaviendelangle]

Fully agree with Jun 1st point !

[LukasTy]

@siriwatknp Thank you for the suggestion on a better file structure.
I've made changes to follow the following pattern. What do you think?

codemod-a
  - index.ts
  - codemod-a.test.ts
  - actual.spec.js
  - expect.spec.js
codemod-b
  - ...similar structure

[github-actions]

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

[siriwatknp]

@siriwatknp Thank you for the suggestion on a better file structure. I've made changes to follow the following pattern. What do you think?

codemod-a
  - index.ts
  - codemod-a.test.ts
  - actual.spec.js
  - expect.spec.js
codemod-b
  - ...similar structure

🤩 Definitely better than the core repo. One note about the spec files because it is possible to have multiple test cases in a single codemod, it could look like this:

codemod-a
  - index.ts
  - codemod-a.test.ts
  - {meaningful name1}-actual.spec.js
  - {meaningful name1}-expect.spec.js
  - {meaningful name2}-actual.spec.js
  - {meaningful name2}-expect.spec.js

But for a single test case, it is enough with this:

codemod-a
  - index.ts
  - codemod-a.test.ts
  - actual.spec.js
  - expect.spec.js
codemod-b
  - ...similar structure

[LukasTy]

@siriwatknp
Question regarding:

I remember that the community would like to pass some options to jscodeshift but it is not possible because @mui/codemod does not allow them to do that.

Are you sure that it does not allow? There is even a mention of it in readme. 🤔
But the problem I've noticed after testing this behaviour is that it seems that only 1 option is supported at a time. 🤔
Passing more than 1 seems to ignore all the options.
I'm still investigating this weird behaviour.... 🤷

[LukasTy]

@siriwatknp
I've done quite a bit of testing and I think I've narrowed down the issue.
I've updated the code and examples/readme to make it more clear for users.
Let me know if you still see room for improvement. 😉

[flaviendelangle]

Great work !