Skip to content

refactor(ui-extender)!: ship ui-extender as ESM only#358

Open
GauBen wants to merge 16 commits intomasterfrom
feat/esm-ui-extender
Open

refactor(ui-extender)!: ship ui-extender as ESM only#358
GauBen wants to merge 16 commits intomasterfrom
feat/esm-ui-extender

Conversation

@GauBen
Copy link
Copy Markdown
Member

@GauBen GauBen commented Mar 10, 2026

I got carried away 😬

  • Replaced all build tools (babel and plugins) with a single tsc invocation
  • Replaced jest and enzyme with vitest and vitest-browser-react
  • Deleted vestigial storybook files (I couldn't make them run, I suspect it was broken when actions got moved to this monorepo)

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 10, 2026

🦜 Chachalog

@jahia/ui-extender major

Create a new entry online or run npx chachalog@0.5.0 prompt to create a new entry locally.

@GauBen GauBen changed the title rector(ui-extender)!: ship ui-extender as ESM only refactor(ui-extender)!: ship ui-extender as ESM only Mar 10, 2026
@GauBen GauBen force-pushed the feat/esm-ui-extender branch from 4eb6f49 to 30cf4c7 Compare March 10, 2026 13:19
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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-extender as ESM-only with an exports map and TypeScript declaration output from tsc.
  • 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”.

Copy link
Copy Markdown
Member

@gflores-jahia gflores-jahia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@GauBen
Copy link
Copy Markdown
Member Author

GauBen commented Mar 10, 2026

The typechecking failures are expected, the ui-extender is still containing a lot of unsafe/unchecked code, that's why I run tsc || true, it lists the errors but does not fail the build

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:

  • Running yarn build && yarn pack in the repo
  • Move the package.tgz archive to the test repo, and link to it with "@jahia/ui-extender": "./package.tgz" in the package.json

@gflores-jahia
Copy link
Copy Markdown
Member

Thanks for the steps.

Haven't had time to dig into it yet, but tried yarn build --stats-error-detail in jcontent with copied local package.tgz and got the following:

ERROR in resolving fallback for shared module @jahia/ui-extender
Module not found: Error: Can't resolve '@jahia/ui-extender' in '/Users/gflores/git/jcontent/src/javascript/JContent/redux'
resolve '@jahia/ui-extender' in '/Users/gflores/git/jcontent/src/javascript/JContent/redux'
  Parsed request is a module
  using description file: /Users/gflores/git/jcontent/package.json (relative path: ./src/javascript/JContent/redux)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/gflores/git/jcontent/src/javascript/JContent/redux/node_modules doesn't exist or is not a directory
      /Users/gflores/git/jcontent/src/javascript/JContent/node_modules doesn't exist or is not a directory
      /Users/gflores/git/jcontent/src/javascript/node_modules doesn't exist or is not a directory
      /Users/gflores/git/jcontent/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/gflores/git/jcontent/node_modules
        single file module
          using description file: /Users/gflores/git/jcontent/package.json (relative path: ./node_modules/@jahia/ui-extender)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender is not a file
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.js doesn't exist
            .jsx
              Field 'browser' doesn't contain a valid alias configuration
              /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.jsx doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.json doesn't exist
            .scss
              Field 'browser' doesn't contain a valid alias configuration
              /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.scss doesn't exist
        existing directory /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender
          using description file: /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/package.json (relative path: .)
            using description file: /Users/gflores/git/jcontent/package.json (relative path: ./node_modules/@jahia/ui-extender)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender is not a file
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.js doesn't exist
              .jsx
                Field 'browser' doesn't contain a valid alias configuration
                /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.jsx doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.json doesn't exist
              .scss
                Field 'browser' doesn't contain a valid alias configuration
                /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender.scss doesn't exist
              as directory
                existing directory /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender
                  using description file: /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/package.json (relative path: .)
                    using path: /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index
                      using description file: /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index doesn't exist
                        .mjs
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index.mjs doesn't exist
                        .js
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index.js doesn't exist
                        .jsx
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index.jsx doesn't exist
                        .json
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index.json doesn't exist
                        .scss
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/gflores/git/jcontent/node_modules/@jahia/ui-extender/index.scss doesn't exist
      /Users/gflores/git/node_modules doesn't exist or is not a directory
      /Users/gflores/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

I don't know if it might need some tweaking in webpack config maybe. I tried {fallback: {browser: false}} but didn't help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants