fix(runtime): prevent watchers from prematurely firing in custom elements build

[rwaskiewicz]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Tests (npm run test.karma.prod) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

When using the custom elements build, it's possible that @Watch annotated methods will fire before our components are fully instantiated. This is inconsistent with the lazy load build, as well as the Stencil documentation:

The Watch decorator does not fire when a component initially loads.

GitHub Issue Number: N/A

What is the new behavior?

• Wait until a component is fully instantiated before a @Watch method can be fired
  • The ramification here is that watchers fired before fully instantiated will never run
  • With this PR, the behavior will match the behavior in the the lazy load builds today

Does this introduce a breaking change?

• Yes
• No

However, folks that are using the custom elements build may see watchers not firing as they expect. So we should either

1. Make this very explicit in the release notes
2. Push this to v3.0.0-dev instead

Testing

Programmatic tests have been pushed to a future story, as the work required to get that wired up is beyond the scope of this effort

Manual:

Replication

• Clone https://github.com/rwaskiewicz/demo-stencil-watch, run npm ci
• Serve the lazy loaded bundle (npm start)
• Serve the custom elements build (npm serve)
• Notice the difference in behavior after 5 seconds:
  

What's happening?

For the custom element build, runTest is being invoked when the component is ready according to the CustomElementRegistry, not according to Stencil. Stencil hasn't finished building the component on its side, but the @Watch is fired.

Testing the Fix

• Pull down this branch, run npm ci && npm run build && npm pack
• In the directory housing your clone of https://github.com/rwaskiewicz/demo-stencil-watch, npm i <PATH_TO_STENCIL>/stencil-core-2.7.0-0.tgz
• Serve the lazy loaded bundle (npm start)
• Serve the custom elements build (npm serve)
• Note the behavior is the same:
  

Other information

• Internal ticket: STENCIL-13

[splitinfinities]

LGTM 👍