0

For some while now I am trying to figure out how to re-use Stencil Decorators. In our company we have a whole bunch of components that do all use Translations. A user of our web component should be able to pass a translations object as an attribute. We receive that attribute by using the @Prop decorator:

@Component({
   tag: "component",
})
export class Component {
   private translationService: TranslationService;

   @Prop() public translations: PersonaListTranslations;

   @Watch("translations")
   watchTranslationsHandler(newTranslations: PersonaListTranslations) {
      this.translationService.updateTranslations(newTranslations);
   }

   public render() {
      return (...)
   }
}

As mentionned we have a rather big list of components that need exactly the same code over and over again: translationService, @Prop and @Watch for that prop.

Is there a way to gather that code, put it somewhere else and re-use the same code in all the components?

Thanks in advance!

Jeroen De Groote
  • 78
  • 5
  • 1
    There is an [open PR](https://github.com/ionic-team/stencil/pull/2921) that would make that possible which the team are looking at. Until then you could have a look at [Stencil Store](https://github.com/ionic-team/stencil-store). – Thomas Feb 18 '22 at 15:30
  • The open PR link was really interesting to read. Tried the code out and it exactly solves our problem. Will watch the PR and hopefully it will someday be accepted. Thanks for pointing me to it! – Jeroen De Groote Feb 18 '22 at 18:39
  • Make sure to give the PR a thumbs up. The Stencil team uses it for prioritization. – Thomas Feb 23 '22 at 19:36

0 Answers0