feat(atomic): add @watch decorator for Lit components

[y-lakhdar]

Currently, there is no equivalent in Lit for Stencil’s Watch Decorator. Without this feature, monitoring changes to specific properties and triggering methods in response requires more boilerplate in Lit components.

Stencil Example with @watch

Using Stencil’s @Watch decorator, the code to monitor properties and invoke corresponding methods is concise:

  @Watch('searchHub')
  public updateSearchHub() {
    // ...
  }

  @Watch('pipeline')
  public updatePipeline() {
    // ...
  }

  @Watch('analytics')
  public toggleAnalytics() {
    // ...
  }

  @Watch('language')
  public updateLanguage() {
    // ...
  }

Equivalent Code in Lit Components

In Lit, achieving the same functionality requires additional logic in the willUpdate lifecycle method, as shown below:

  public updateSearchHub() {
    // ...
  }

  public updatePipeline() {
    // ...
  }

  public toggleAnalytics() {
    // ...
  }

  public updateLanguage() {
    // ...
  }

  async willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
    if (changedProperties.has('searchHub')) {
      this.updateSearchHub();
    }
    if (changedProperties.has('pipeline')) {
      this.updatePipeline();
    }
    if (changedProperties.has('analytics')) {
      this.toggleAnalytics();
    }
    if (changedProperties.has('language')) {
      this.updateLanguage();
    }
  }

Introducing the @watch Decorator

To avoid the extra code, I added @watch decorator for Lit components that replicates the functionality of Stencil’s @Watch.

Cons

The decorator requires us to overwrite the willUpdate method which is considered protected.
Let me know if you think we should go with it?

Bonus of the watch decorator

Autocomplete Support: The decorator provides autocompletion for property names, enhancing developer experience.

https://coveord.atlassian.net/browse/KIT-3860

[github-actions]

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	243.8	243.8	0
commerce	355	355	0
search	414.9	414.9	0
insight	406.2	406.2	0
recommendation	256.1	256.1	0
ssr	408.8	408.8	0
ssr-commerce	372.7	372.7	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support