feat: intro @zendeskgarden/codemods + add v8-v9 migration transforms
#1928
Conversation
| @@ -102,6 +105,10 @@ consider additional positioning prop support on a case-by-case basis. | |||
| - same breaking changes as `ColorSwatch`. | |||
| - `popperModifiers` prop (see [note](#breaking-changes)) | |||
|
|
|||
| <!-- prettier-ignore --> | |||
There was a problem hiding this comment.
Prettier doesn't support Github-flavored Markdown alerts. 😢
| commonConfig[0].output[0], | ||
| { | ||
| ...commonConfig[0].output[1], | ||
| entryFileNames: '[name].mjs' |
There was a problem hiding this comment.
It's 2024 and the CommonJS / ESM struggles are still real! 😡
Currently, jscodeshift doesn't support ESM, and the latest version of libraries like Chalk and @inquire/prompts dropped CommonJS support.
After trying several approaches, I’ve found a workable solution:
- Setting "type": "module" did not resolve the issues with jscodeshift.
- Directing the "module" to the CommonJS build failed with Chalk and other ESM-only libraries.
Since this package requires Node.js version 18 or higher, we can use the .mjs extension to maintain compatibility and avoid encountering ERR_REQUIRE_ESM errors when executing the script.
I'm open to suggestions for reusing the common Rollup config instead.
| @@ -0,0 +1,97 @@ | |||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | |||
There was a problem hiding this comment.
I would not typically recommend snapshot testing; however, among all the available unit testing methods, defineSnapshotTest appears to be the easiest to set up while still ensuring that the test files remain reasonably readable.
| return root.find(j.ImportDeclaration, { | ||
| source: { | ||
| // ensure deep equal check | ||
| value: (val: string) => val === importSource |
There was a problem hiding this comment.
Very important. The object literal form (ex: { source: { value: importSource } }) appears to use String.prototype.includes, which has led to surprises with react-dropdowns and react-dropdown.next.
| // @ts-expect-error - TS7016: Could not find a declaration file for module | ||
| import { defineSnapshotTest } from 'jscodeshift/dist/testUtils'; |
There was a problem hiding this comment.
Not types are available. 😞
Would it be better to add declare module jscodeshift/dist/testUtils {} to a .d.ts file?
| importSource: '@zendeskgarden/react-notifications', | ||
| subComponents: ['Close', 'Paragraph', 'Title'], | ||
| mainComponent: 'Well', | ||
| bannedComponents: ['Well', 'Notification'] |
There was a problem hiding this comment.
Alert, Well, and Notifications share the same subcomponent names. To avoid modifying JSX nodes incorrectly, it's preferable to skip files that import a combination of these components.
ze-flo
force-pushed
the
ze-flo/garden-codemods
branch
from
382baba to
0d9a4ae
Compare
|
Garden Codemods was offered internally as an early access experimental tool. Further considerations need to be addressed before releasing it as an open-source package. Closing for now. |
Description
🚀 Introducing...
The
@zendeskgarden/codemodspackage offers a variety of codemods designed to automatecode transformations in Garden-based projects.
Detail
@zendeskgarden/codemodsChecklist
👌 design updates will be Garden Designer approved (add the designer as a reviewer)🌐 demo is up-to-date (npm start)⬅️ renders as expected with reversed (RTL) direction⚫ renders as expected in dark mode🤘 renders as expected with Bedrock CSS (?bedrock)♿ tested for WCAG 2.1 AA accessibility compliance📝 tested in Chrome, Firefox, Safari, and Edge