Esta pregunta está inspirada en la convención de Uso de ganchos de React para separar preocupaciones .

¿Sería posible incorporar un sistema similar utilizando Stencil?

Esta es la idea inicial, está inspirada en la convención de Services de Angular:

1. Cree un componente de plantilla regular:

 import { Component, State, h } from '@stencil/core'; @Component({ tag: 'my-app-component' }) export class MyAppComponent { @State() color: string = 'blue'; private changeColorToRed() { this.color = 'red'; } private changeColorToBlue() { this.color = 'blue'; } render() { return ( <div> <button onClick={this.changeColorToRed}>Red</button> <button onClick={this.changeColorToBlue}>Blue</button> <p>Selection: {this.color}</button> </div> ); } }

2. Métodos separados en MyAppService.ts :

 export default class MyAppService { color: string; constructor({ color }) { this.color = color; } changeColorToRed() { this.color = 'red'; } changeColorToBlue() { this.color = 'blue'; } }

3. Modifique el componente Plantilla, reemplace los métodos con Servicio:

 import { Component, State, h } from '@stencil/core'; import MyAppService from './MyAppService.ts'; @Component({ tag: 'my-app-component' }) export class MyAppComponent { private service; @State() color: string = 'blue'; connectedCallback() { this.service = new MyAppService({ color: this.color }); } render() { return ( <div> <button onClick={this.service.changeColorToRed}>Red</button> <button onClick={this.service.changeColorToBlue}>Blue</button> <p>Selection: {this.color}</button> </div> ); } }

Si bien esto puede funcionar para un ejemplo simple, no estoy seguro de si esta es la convención correcta para esto, y no estoy seguro de que se conserve la reactividad ya que solo estoy inicializando el Servicio en connectedCallback .

Estoy buscando para averiguar si hay una mejor manera de hacer esto, cualquier razón obvia por la que esto no funcionará que podría haber pasado por alto, y cualquier idea similar que podría desordenar el código JSX & Logic.