refactor(ui-extender)!: ship ui-extender as ESM only#358
refactor(ui-extender)!: ship ui-extender as ESM only#358
Conversation
🦜 Chachalog
|
4eb6f49 to
30cf4c7
Compare
There was a problem hiding this comment.
Pull request overview
This PR modernizes @jahia/ui-extender’s packaging and tooling by moving it to an ESM-only distribution, simplifying the build pipeline, and migrating the test stack from Jest/Enzyme to Vitest with browser-based tests (Playwright).
Changes:
- Shipped
@jahia/ui-extenderas ESM-only with anexportsmap and TypeScript declaration output fromtsc. - Replaced Jest/Enzyme tests with Vitest +
vitest-browser-react(Playwright-backed browser runs) and updated CI to install Chromium. - Removed Storybook and legacy Babel/Jest build/test configuration from the package.
Reviewed changes
Copilot reviewed 34 out of 36 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| yarn.lock | Adds/updates dependencies for Vitest browser testing (Playwright) and React 18 types/runtime. |
| packages/ui-extender/vitest.config.ts | Introduces Vitest browser config using the Playwright provider. |
| packages/ui-extender/tsconfig.json | Updates TS output to emit runtime JS + declarations targeting modern ESM settings. |
| packages/ui-extender/src/registry/registry.spec.ts | Migrates test imports to Vitest. |
| packages/ui-extender/src/registry/composeServices.spec.ts | Migrates test imports to Vitest. |
| packages/ui-extender/src/global.d.ts | Adds Vitest Playwright type augmentation for the package test suite. |
| packages/ui-extender/src/adminRoutes/useAdminRoutesTreeStructure.spec.ts | Migrates Jest mocks to vi.mock and updates test imports. |
| packages/ui-extender/src/actions/menuAction/menuAction.stories.jsx | Removes Storybook story for menuAction. |
| packages/ui-extender/src/actions/menuAction/menuAction.spec.tsx | Replaces Enzyme-based menuAction tests with Vitest browser tests. |
| packages/ui-extender/src/actions/menuAction/menuAction.spec.jsx | Removes legacy Jest/Enzyme menuAction test. |
| packages/ui-extender/src/actions/core/DisplayActions.stories.jsx | Removes Storybook story for DisplayActions. |
| packages/ui-extender/src/actions/core/DisplayActions.spec.tsx | Migrates DisplayActions tests from Enzyme/Jest to Vitest + browser render. |
| packages/ui-extender/src/actions/core/DisplayAction.stories.jsx | Removes Storybook story for DisplayAction. |
| packages/ui-extender/src/actions/core/DisplayAction.spec.tsx | Replaces legacy DisplayAction tests with Vitest browser tests. |
| packages/ui-extender/src/actions/core/DisplayAction.spec.jsx | Removes legacy Jest/Enzyme DisplayAction test. |
| packages/ui-extender/src/actions/componentRendererAction/componentRenderAction.stories.jsx | Removes Storybook story for componentRendererAction. |
| packages/ui-extender/src/actions/componentRendererAction/componentRenderAction.spec.tsx | Adds Vitest browser test for componentRendererAction behavior. |
| packages/ui-extender/src/actions/componentRendererAction/componentRenderAction.spec.jsx | Removes legacy Jest/Enzyme test for componentRendererAction. |
| packages/ui-extender/src/ComponentRenderer/ComponentRenderer.spec.tsx | Adds Vitest browser test for ComponentRenderer lifecycle behavior. |
| packages/ui-extender/src/ComponentRenderer/ComponentRenderer.spec.js | Removes legacy JS/Enzyme tests for ComponentRenderer. |
| packages/ui-extender/package.json | Switches package to ESM (type: module), introduces exports, updates peers/devDeps, and changes build/test scripts. |
| packages/ui-extender/jest.config.js | Removes Jest configuration for ui-extender. |
| packages/ui-extender/build.mjs | Removes Babel-based build step. |
| packages/ui-extender/babel.config.js | Removes Babel config. |
| packages/ui-extender/babel.build.config.js | Removes Babel build config. |
| packages/ui-extender/.storybook/webpack.config.js | Removes Storybook webpack config. |
| packages/ui-extender/.storybook/preview-head.html | Removes Storybook preview head customizations. |
| packages/ui-extender/.storybook/config.js | Removes Storybook story loader config. |
| packages/ui-extender/.storybook/addons.js | Removes Storybook addon wiring. |
| packages/ui-extender/.npmignore | Removes npmignore in favor of files packaging config. |
| packages/ui-extender/.eslintrc | Removes package-local ESLint config. |
| package.json | Adds Playwright to root devDependencies to support workspace-level browser tests. |
| .github/workflows/release.yml | Updates chachalog version used for publishing and removes the “prepare-next-release” job. |
| .github/workflows/comment-pr.yml | Removes the PR-commenting workflow. |
| .github/workflows/build-and-test.yml | Installs Playwright Chromium as part of CI setup before tests. |
| .chachalog/hgr3gHNa.md | Adds a major-version changelog entry for the ESM-only ui-extender release. |
Comments suppressed due to low confidence (1)
packages/ui-extender/src/actions/core/DisplayActions.spec.tsx:40
- Typo in the test name: “otional” should be “optional”.
packages/ui-extender/src/actions/menuAction/menuAction.spec.tsx
Outdated
Show resolved
Hide resolved
packages/ui-extender/src/actions/componentRendererAction/componentRenderAction.spec.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Looks good, thanks for cleaning up the storybook as well.
I am having some issues with yarn build, specifically lint though. Seems to be ok running it on the root dir but getting some issues when I run yarn build in the ui-extender folder:
Found 108 errors in 14 files.
Errors Files
1 ../../node_modules/@types/react-transition-group/TransitionGroup.d.ts:1
1 src/actions/componentRendererAction/componentRenderAction.spec.tsx:41
28 src/actions/core/DisplayAction.spec.tsx:31
1 src/actions/core/DisplayAction.tsx:86
3 src/actions/core/DisplayActions.spec.tsx:33
48 src/actions/menuAction/menuAction.spec.tsx:12
1 src/actions/menuAction/menuAction.tsx:188
4 src/actions/samples/ButtonRenderer.jsx:3
1 src/actions/samples/LinkRenderer.jsx:3
2 src/actions/samples/Modal.jsx:3
10 src/adminRoutes/useAdminRoutesTreeStructure.spec.ts:35
3 src/ComponentRenderer/ComponentRenderer.spec.tsx:31
4 src/registry/composeServices.spec.ts:26
1 src/registry/registry.spec.ts:79
Also not sure if something to adjust on the workflows if lint needs to be run per-project.
I'm not sure if it's been already done here but it'd be good to check if we might have compatibility issues when included on a module and in the jahia runtime before the merge.
Not sure if possible to do the test locally (maybe include this version as jcontent dep locally). If not we can do the test once it's released.
|
The typechecking failures are expected, the ui-extender is still containing a lot of unsafe/unchecked code, that's why I run In a monorepo, linting is supposed to be a global step (same as formatting), but we're still in the process of making it a monorepo You can try locally by:
|
|
Thanks for the steps. Haven't had time to dig into it yet, but tried I don't know if it might need some tweaking in webpack config maybe. I tried |
I got carried away 😬
tscinvocation