🟠 Desacoplando Componentes

Muchas gracias a Robin Goetz y su Proyecto Spartan. Este desafío fue propuesto por Robin y está fuertemente inspirado en su proyecto.

Información

El objetivo de este desafío es separar el comportamiento de un componente a traves de su estilo. Para el propósito de este desafío, trabajaremos en un elemento botón. Al hacer clic en él, alternaremos una propiedad llamada disabled para que cambie el estilo del elemento. Esto es bastante inútil en la vida real, pero el desafío tiene como objetivo demostrar un concepto útil.

El comportamiento del componente (referido como el cerebro en el stack de Spartan) se encuentra en la biblioteca del cerebro, la cual es llamada “brain”. La parte de estilo (referida como el casco y llamado como helmet) está dentro de la biblioteca helmet. Ambas bibliotecas no pueden depender una de la otra porque queremos poder publicarlas por separado. Para ayudarnos a abordar el problema, estamos utilizando la regla eslint de Nx. Puedes encontrar más detalles aquí.

Sin embargo, el helmet del botón necesita acceder al estado del componente para estilizar el botón de manera diferente según su estado. Como se mencionó anteriormente, no podemos importar la BtnDisabledDirective directamente en la biblioteca helmet como se hace actualmente. Si vas a BtnHelmetDirective, te encontrarás con un error de linting. Un proyecto etiquetado con type:hlm solo puede depender de libs etiquetadas con type:core.

Declaración

El objetivo de este desafío es encontrar una forma de desacoplar ambas Directivas.

Pista

Pista 1

Lee cuidadosamente el título del desafío 😇