Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: @Watch methods not firing in code build as dist-custom-elements output target #4221

Closed
3 tasks done
bpark opened this issue Apr 3, 2023 · 3 comments
Closed
3 tasks done
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil

Comments

@bpark
Copy link

bpark commented Apr 3, 2023

Prerequisites

Stencil Version

3.2.0

Current Behavior

Code build as dist-custom-elements output, @watch decorated methods are not executed when a watched attribute is changed dynamically.

A similar issue was reported in Jun 1, 2020 and got fixed, but as I can see the fixes got reverted afterwards, see here #2478

Expected Behavior

Methods decorated with @watch should be executed on attribute change in code generated by a dist-custom-elements output

System Info

System: node 18.15.0
    Platform: windows (10.0.22621)
   CPU Model: AMD Ryzen 7 5800X 8-Core Processor              (16 cpus)
    Compiler: C:\dev\stencil-custom-elements-watch-bug\node_modules\@stencil\core\compiler\stencil.js
       Build: 1678807683
     Stencil: 3.2.0
  TypeScript: 4.9.5
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.16.6

Steps to Reproduce

  1. Clone repo https://github.com/bpark/stencil-custom-elements-watch-bug
  2. Run npm install and npm run build
  3. Start a web server in dist/ folder and open the index.html
  4. Click either of "Change prop" buttons and observe watchCallCount=... values

Code Reproduction URL

https://github.com/bpark/stencil-custom-elements-watch-bug

Additional Information

No response

@ionitron-bot ionitron-bot bot added the triage label Apr 3, 2023
@rwaskiewicz rwaskiewicz self-assigned this Apr 3, 2023
@rwaskiewicz
Copy link
Member

Hey @bpark,

Thanks for the detailed reproduction! I've confirmed that the method decorated with @Watch is not firing properly. Is this only reproducible with externalRuntime set to false?

@rwaskiewicz rwaskiewicz added the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Apr 3, 2023
@ionitron-bot ionitron-bot bot removed the triage label Apr 3, 2023
@bpark
Copy link
Author

bpark commented Apr 4, 2023

Hi @rwaskiewicz ,

the problem also occurs when the externalRuntime flag is set to true. Originally I found the problem when I integrated a dist-custom-elements built WebComponent into an angular application with defineCustomElement.

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Apr 4, 2023
@rwaskiewicz rwaskiewicz changed the title @Watch methods not firing in code build as dist-custom-elements-bundle output target @Watch methods not firing in code build as dist-custom-elements output target Apr 5, 2023
@rwaskiewicz rwaskiewicz changed the title @Watch methods not firing in code build as dist-custom-elements output target bug: @Watch methods not firing in code build as dist-custom-elements output target Apr 5, 2023
@rwaskiewicz rwaskiewicz added the Bug: Validated This PR or Issue is verified to be a bug within Stencil label Apr 5, 2023
@rwaskiewicz rwaskiewicz removed their assignment Apr 5, 2023
@rwaskiewicz
Copy link
Member

👋

The fix for this issue has been included in the 🏒 v3.2.2 release of Stencil, which was released earlier today. As a result, I'm going to close this issue. Should it reappear, please feel free to open a new issue. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil
Projects
None yet
Development

No branches or pull requests

2 participants