Inyección de dependencias en custom elements

El desarrollo web basado en web components es ya un estándar de facto en la industria gracias a frameworks como Vue.js, React o Angular, entre otros. Aunque estos frameworks aportan multitud de características que hacen mucho más fácil el desarrollo, no todo son ventajas. Los custom elements creados con estas herramientas tienen un fuerte acoplamiento con éstas, tanto que no pueden funcionar de forma autónoma sin ellas. Es por esto que, a veces, es conveniente desarrollar custom elements siguiendo el estándar HTML. Alejarnos de los frameworks puede tener algunas desventajas, entre ellas, el sistema de inyección de dependencias que ofrecen. Así que en este pequeño tip vamos a implementar un inyector de dependencias bastante simple para nuestros componentes.

Pero, antes de comenzar, debemos tener en cuenta varios aspectos del ciclo de vida de los custom elements. En este caso es el navegador el que maneja la creación de los elementos y nos ofrece una interfaz que no nos permite pasar parámetros al constructor de éstos, así que tenemos que buscar otro método de inyectar las dependencias.

El siguiente bloque de código muestra una función que dada una clase y una lista de dependencias, crea un subtipo que en la fase de construcción, crea y envía una instancia de cada una de las dependencias indicadas al método __inject.

function DependencyInjector(klass, deps) {
   return class extends klass {
       constructor () {
           super()
          
           if(typeof this.__inject !== "function")
               throw new Error(`ERROR!`)

           this.__inject(...Array.from(deps).map(dep => new dep.constructor(...dep.args)))
       }
   }
}

Siguiendo el código anterior, sólo tendríamos que implementar y registrar nuestro custom element de la siguiente forma:

class UserListElement extends HTMLElement {
 
   // ...

   __inject(userRepository) {
       this.userRepository = userRepository
   }

   // ...
}


let UserListElement_Rest = DependencyInjector(UserListElement, [{ constructor: userRestRepository, args: ["http://...."] }])
let UserListElement_WS = DependencyInjector(UserListElement, [{ constructor: userWSRepository, args: ["ws://...."] }])

customElements.define("user-list-rest", UserListElement_Rest)
customElements.define("user-list-ws", UserListElement_WS)