chore: upgrade to Stencil v4.38.0 #154
Conversation
Upgraded Stencil and related dependencies: - @stencil/core: 2.6.0 → 4.38.0 - @stencil/sass: 1.4.1 → 3.2.2 - jest: 27.0.3 → 29.7.0 - jest-cli: 24.9.0 → 29.7.0 (updated to match jest version) - puppeteer: 1.19.0 → 22.15.0 - Removed @types/puppeteer (Puppeteer v10+ provides own types) Configuration changes: - Set preferBuiltins: false in nodeResolve config to allow rollup-plugin-polyfill-node to intercept Node.js built-ins (path, process, etc.) before Rollup treats them as external modules. This enables runtime markdown processing with unified/remark libraries by bundling polyfilled implementations instead of leaving bare imports. - Replaced rollup-plugin-node-polyfills (v0.2.1, 2019) with rollup-plugin-polyfill-node (v0.13.0, 2023) for better modern module support. Code changes: - Fixed event handler type in search.tsx (KeyboardEvent → InputEvent) - Updated TypeScript target to es2018 (required for regex dotAll flag)
There was a problem hiding this comment.
Pull request overview
This PR upgrades Stencil from v2.6.0 to v4.38.0 along with related dependencies and tooling. The upgrade necessitates several configuration changes to support modern polyfilling and fixes a type error in an event handler.
Key changes:
- Major version upgrades for Stencil (2.6.0 → 4.38.0), Jest (27.0.3 → 29.7.0), and Puppeteer (1.19.0 → 22.15.0)
- Replaced deprecated rollup-plugin-node-polyfills with rollup-plugin-polyfill-node for better modern module support
- Fixed event handler type signature to use InputEvent instead of KeyboardEvent
Reviewed changes
Copilot reviewed 4 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated core dependencies (Stencil, Jest, Puppeteer) to latest versions and removed @types/puppeteer |
| stencil.config.ts | Switched to modern polyfill plugin and configured nodeResolve to prefer polyfills over built-ins |
| tsconfig.json | Updated TypeScript target from es2017 to es2018 for regex dotAll flag support |
| src/components/search/search.tsx | Fixed event handler type from KeyboardEvent to InputEvent |
| src/components/navigation/navigation.scss | Added list styling resets and font-size properties |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| p { | ||
| padding-left: pxToRem(28); | ||
| font-size: pxToRem(12); |
There was a problem hiding this comment.
The font-size property is redundant here. The parent .powered-by class already sets font-size: pxToRem(12) on line 120, which inherits to all children including the p element. This duplicate declaration should be removed.
| font-size: pxToRem(12); |
There was a problem hiding this comment.
This font-size is not redundant. It was intentionally added as part of the Stencil v4 upgrade to address CSS shadow-DOM changes. Without it, global p styles from the application root can override the .powered-by class font-size due to how Stencil v4 handles CSS encapsulation.
Use caret prefix for puppeteer version for consistency with other dev dependencies. This allows patch and minor updates while preventing breaking major version changes. Addresses review feedback from @Copilot
Upgraded Stencil and related dependencies:
Configuration changes:
Set preferBuiltins: false in nodeResolve config to allow rollup-plugin-polyfill-node to intercept Node.js built-ins (path, process, etc.) before Rollup treats them as external modules. This enables runtime markdown processing with unified/remark libraries by bundling polyfilled implementations instead of leaving bare imports.
Replaced rollup-plugin-node-polyfills (v0.2.1, 2019) with rollup-plugin-polyfill-node (v0.13.0, 2023) for better modern module support.
Code changes:
Testing
This branch of Kompendium has been packed and installed in Lundalogik/lime-elements#3745, and can be tested at https://lundalogik.github.io/lime-elements/versions/PR-3745/