feat(Package): convert to strict ESM #1215
Conversation
…istribute-as-esm-package
|
Size stats
|
…istribute-as-esm-package
|
Accessibility report ℹ️ You can run this locally by executing |
|
Deploy preview for mistica-web ready! ✅ Preview Built with commit 3930366. |
| "test-acceptance": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs test-acceptance --config jest.acceptance.config.cjs", | ||
| "test-ssr": "JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs test-acceptance --config jest.ssr.config.cjs", |
There was a problem hiding this comment.
The JEST_PUPPETEER_CONFIG env var tells jest-environment-puppeteer where to find the puppeteer config.
This is needed because we're using an old version of the jest-environment-puppeteer library (v6) and it is unaware of .cjs files. Newer versions don't have this issue but we cannot upgrade because this requires a puppeteer upgrade.
| { | ||
| "env": { | ||
| "es6": true | ||
| } | ||
| } |
There was a problem hiding this comment.
We should update our jest configuration to understand .cjs files.
https://jira.tid.es/browse/WEB-2005
| // otherwise, all dependencies are included in a "node_modules" folder inside "./dist" | ||
| external: [ | ||
| ...Object.keys(packageJson.dependencies), | ||
| ...Object.keys(packageJson.peerDependencies), | ||
| 'react/jsx-runtime', | ||
| 'moment/locale/de.js', | ||
| 'moment/locale/es.js', | ||
| 'moment/locale/en-gb.js', | ||
| 'moment/locale/pt-br.js', | ||
| 'moment/moment.js', | ||
| '@vanilla-extract/sprinkles/createRuntimeSprinkles', | ||
| ], |
There was a problem hiding this comment.
For some reason, without this, a node_modules folder is created inside dist containing copies of all external packages, including react and react-dom. That produces a broken build because using mistica introduces two copies of react.
| /* | ||
| * Temporary solution to export Community components until Mistica gets migrated to ESModules | ||
| * the community.js export has issues because it exports an ES module and next12 interterprets it as a CommonJS module | ||
| * importing from /dist/ is not an option because those modules don't get the context from the theme provider | ||
| */ | ||
| export {default as CommunityExampleComponent} from './community/example-component'; | ||
| export {default as CommunityAdvancedDataCard} from './community/advanced-data-card'; | ||
| export { | ||
| RowBlock as CommunityRowBlock, | ||
| SimpleBlock as CommunitySimpleBlock, | ||
| InformationBlock as CommunityInformationBlock, | ||
| HighlightedValueBlock as CommunityHighlightedValueBlock, | ||
| ValueBlock as CommunityValueBlock, | ||
| ProgressBlock as CommunityProgressBlock, | ||
| } from './community/blocks'; |
There was a problem hiding this comment.
see package.json. There is now a dedicated export in /community for these components
|
Screenshot tests report ✔️ All passing |
| } from './community/blocks'; | ||
| export {default as iconKeywords} from './generated/mistica-icons/icons-keywords'; | ||
|
|
||
| // Exported this way to facilitate tree-shaking |
There was a problem hiding this comment.
no more copy paste needed. The icons are exported as export * from './generated/mistica-icons'; (see the end of this file)
BREAKING CHANGE:
Tasks in this PR
exportsconfigurationdistfoldercssfiles are now located indist/css(physical location)dist-tsfolder for type definitions generationcommonjsscripts now use the.cjsextensionexport * from