You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing issues that already report this problem, without success.
Stencil Version
4.22.2
Current Behavior
So in our project, we are trying to integrate Bootstrap's JS into our stencil components.
One problem we are experiencing is that when we try to integrate some of Bootstrap's components such as Collapse into stencil, https://getbootstrap.com/docs/5.3/components/collapse/, the animations for showing work fine, but the animations for hiding are non-existent (collapsed element just dissapears).
Funnily enough, my colleague discovered that the problem only happens when stencil builds the library that is using the Bootstrap Collapse in --prod settings. However if the settings are set to --dev, then the animations for showing and hiding collapses work perfectly.
My colleague suspects that there is an issue with perhaps a tree shaking or part of a build process that seems like it removes some of the script calls that are responsible for the animation hiding.
Further update: My colleague has been looking at the stencil codebase and he seems to think there is an issue with the treeshaking configuration handling, that's possibly affecting the output and ultimately the behaviour of our integrated bootstrap collapse in production settings. It seems like there is no way to disable it completely or customise that particular config.
In Line 170, the treeshake option should theoretically disable tree-shaking when set to false.
However, this configuration doesn't seem to work as expected. Even when treeshake is explicitly set to false, it is not properly reflected, causing issues downstream.
On Line 29, the treeshake property is extracted during configuration validation. This appears normal at first glance but is impacted by the custom pluck method.
The method at Line 185 checks if (obj[key]), which fails when treeshake is false. This results in treeshake not being applied correctly.
He has suggested to either update this check to if (isDefined(obj[key])), ensuring even false values are recognized.
OR
To make tree-shaking more customizable, the relevant snippet in bundle-output.ts (Line 170) Source Code: bundle-output.ts, Line 170 could be updated as follows:
Prerequisites
Stencil Version
4.22.2
Current Behavior
So in our project, we are trying to integrate Bootstrap's JS into our stencil components.
One problem we are experiencing is that when we try to integrate some of Bootstrap's components such as Collapse into stencil, https://getbootstrap.com/docs/5.3/components/collapse/, the animations for showing work fine, but the animations for hiding are non-existent (collapsed element just dissapears).
Funnily enough, my colleague discovered that the problem only happens when stencil builds the library that is using the Bootstrap Collapse in
--prod
settings. However if the settings are set to--dev
, then the animations for showing and hiding collapses work perfectly.My colleague suspects that there is an issue with perhaps a tree shaking or part of a build process that seems like it removes some of the script calls that are responsible for the animation hiding.
According to him, he thinks that in the collapse class of the Bootstrap JS, there is a method called
hide
and somewhere down in that hide method,reflow()
(See here: https://github.com/twbs/bootstrap/blob/c2a7d686de56f5cdb829c63e1b3849a2c04409d0/js/src/util/index.js#L175) doesn't seem to get called and removed from the final output which is required for the animation.He says he's not sure if it is rollup or the typescript compiler removing.
Also he's mentioned that
rollupConfig.treeshake
does not seem like it's working , even when it is set tofalse
.I've produced a minimum state that will replicate both prod and dev build scenarios.
If it is something in the prod build process that is affecting the output of 3rd party plugins, I fear this could affect others too.
Expected Behaviour
Animations for showing and hiding collapses should work in a similar way as shown on the official Bootstrap documentation's page. https://getbootstrap.com/docs/5.3/components/collapse/
When a collapsible region hides, it should not straight away go to its hidden state (effectively disappearing straight away) and animate.
System Info
Steps to Reproduce
npm run start:dev
to see the expected working behaviour in building in--dev
mode. The collapses should animate in both showing and hiding statenpm run start
to see the buggy behaviour in building in--prod
mode. The collapses now will not animate in hide mode.Code Reproduction URL
https://github.com/classicmike/stencil-bs-collapse-modules-bug.git
Additional Information
No response
The text was updated successfully, but these errors were encountered: