bug: Functional components imported from a file are not rendering if minified in dist-custom-elements build

[mahendranvm]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.22.1

Current Behavior

Functional components imported from a file are not rendering correctly in dist-custom-elements when built with minify set to true. It can be easily reproduced.

1. npm init Stencil
2. Create a Hello.tsx, with "export const Hello = props => <h1>Hello, {props.name}!</h1>;"
3. import and use it in the default my-component.tsx

Expected Behavior

Functional components should be rendered even if minified

System Info

System: node 20.12.2
    Platform: darwin (22.3.0)
   CPU Model: Apple M1 Pro (10 cpus)
    Compiler: .../fctest/stencil-fc-minify-test/node_modules/@stencil/core/compiler/stencil.js
       Build: 1728498324
     Stencil: 4.22.1 🌪
  TypeScript: 5.5.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.1

Steps to Reproduce

1. npm init Stencil
2. Create a Hello.tsx, with "export const Hello = props => <h1>Hello, {props.name}!</h1>;"
3. import and use it in the default my-component.tsx
4. Build with minify set to true in dist-custom-elements output target
5. Refer to generated component in a simple test html. Functional component will not show.
6. Build without minify set to true in dist-custom-elements output target. Functional component will now show.

Code Reproduction URL

https://github.com/mahendranvm/stencil-fc-minify-test

Additional Information

Digging a bit more, seems like mangling is the cause of the issue. I built without minify using stencil build. and then installed terser and minified using my own script, influenced by stencil code I kept the config close to what stencil does, and replicated the issue.

In the Stencil like config, I had getTerserManglePropertiesConfig returning the following for mangle properties config. And this recreated the issue of functional component not rendering.
" {
regex: "^$.+$$",
reserved: ["$hostElement$"], // Preserves properties needed by Stencil
}"

When I disabled mangling, by setting opts.mangle.properties = false, then the code is minified without any issues. So this tells me that mangling could be the root cause? Although I am not entirely sure.

[christian-bromann]

Thanks for filing the issue and providing a reproducible example. We would appreciate any support and contributions that help resolve this problem.