Usando Bit.dev para la gestión de componentes de React Native

En esta guía mostrare como utilizar Bit Harmony para gestionar, versionar y reutilizar los componentes de un proyecto de React Native existente.

Previamente, en la guía “Introducción a Bit.dev (Bit Harmony) para gestionar nuestros componentes de React Native ” ya expliqué como instalar y configurar Bit para proyectos de React Native. Empezare a partir de un proyecto existente donde ya he programado varios componentes, pero donde no se ha configurado Bit, este caso seguramente sea el de la mayoría, y también el mas complicado de implementar.

Como ya he dicho antes, en esta guía utilizare como ejemplo un proyecto existente llamado “savver” que consiste en una aplicación React Native programada con TypeScript. Para inicializar este proyecto utilice la plantilla react-native-community/react-native-template-typescript: 👾 Clean and minimalist React Native template for a quick start with TypeScript. (github.com)

Por lo tanto, la estructura del proyecto esta completamente basada en esta plantilla.

Estructura de las carpetas del proyecto

En primer lugar tenemos la carpeta raíz “savver ”que contiene todos los ficheros de configuración, la carpeta de módulos, la carpeta src , el fichero App.tsx y el fichero index.js

La carpeta src solamente contiene tres carpetas:

• Components: Contiene todos los componentes personalizados que he implementado para la aplicación, estos se encuentran organizados en carpetas con sus nombres, donde dentro de cada una esta el código.
• Screens: Tiene las carpetas de todas las pantallas que he creado para formar la aplicación, dentro de estas carpetas se encuentra el código.
• Data: Agrupa los archivos de código donde se implementa toda la gestión de los datos de la aplicación.

Los componentes personalizados se han implementado específicamente para savver, pero es posible reutilizarlos en cualquier otra aplicación.

En primer lugar realizaré la configuración inicial de Bit en el proyecto, pero resumiré ciertas partes, porque esto ya se ha explicado en el tutorial anterior, de todas formas si hay alguna duda sobre esto podéis echar un vistazo a la guía, o enviarme un mensaje.

Inicialización

Para empezar con la configuración, en la carpeta raíz del proyecto savver se ejecuta el comando bit init --harmony para inicializar el workspace de Bit en el proyecto.

Configurar workspace.jsonc

Después hay que asignar el scope del proyecto en workspace.jsonc, pero en mi caso no voy a crear un nuevo scope remoto en el usuario de Bit.dev, ya que en este proyecto configuraré como defaultScope, el scope “test” que ya había creado previamente. De esta manera los componentes se exportaran a este mismo scope.

Por lo tanto, en el archivo workspace.jsonc, hay que editar la propiedad defaultScope siguiendo la expresión “<nombre de usario>.<nombre del scope>” así que en mi proyecto la propiedad se establece de la siguiente manera:

"defaultScope": "brandres.test"

Mas abajo en el fichero workspace.jsonc hay que establecer la propiedad “teambit.workspace/variants” tal y como se especifica a continuación:

Se puede observar que en “teambit.dependencies/dependency-resolver” en la política de peerDependencies hay que establecer la versión de react que se especifica en package.json como una dependencia de todos los componentes, ya que esta versión es la que tenemos instalada en el proyecto, y es con la que se ha desarrollado el componente. Especificar esto es muy importante ya que por defecto Bit utiliza otras políticas de dependencias que pueden dar problemas a la hora de instalar el componente en otros proyectos mediante npm ≥ 7

En mi caso, utilizo la versión 17.0.1 y por lo tanto en mi configuración seria la siguiente:

"teambit.dependencies/dependency-resolver": {
  "policy": {
    "peerDependencies": {
      "react": "17.0.1",
      "react-dom": "17.0.1"
    }
  }
}

Añadir componentes

En mi situación, no voy a crear ningun nuevo componente, solamente voy a añadir los componentes existentes. Para ello, existen dos opciones:

• Añadirlos uno a uno con el comando:

bit add <ruta del componente> -n <nombre del grupo de componentes>

• Anadir varios utilizando el comando:

bit add <ruta de la carpeta que contiene los componentes/*> -n <nombre del grupo de componentes>

Yo he optado por añadir los componentes uno a uno, ya que en la carpeta componentes hay algunos componentes que no voy a añadir ya que son específicos de la aplicación, y no tiene sentido utilizarlos en otras. Además, no voy a agrupar los componentes en un namespace, por lo tanto no utilizare el flag -n para especificar el nombre.

Resultado tras añadir los componentes

Si hubiese decidido exportar todos los componentes de la carpeta componentes debería haber ejecutado el siguiente comando:

bit add src/componentes/*

En este punto, los componentes ya se han añadido al espacio de trabajo de Bit, por lo tanto se podrán visualizar en el servidor de desarrollo. para ello hay que ejecutar los siguientes comandos en el mismo orden:

bit compile
bit start

Salida de la ejecución del comando compile

Salida de la ejecución del comando start

Si todo ha ido bien, entrando en http://localhost:3000/ se podrán visualizar todos los componentes que se han añadido previamente.

Respecto al ejemplo que he llevado a cabo durante esta guía, se podría observar lo siguiente:

Visualización de los componentes añadidos

Exportar componentes

Antes de exportar los componentes añadidos tenemos que etiquetarlos mediante el comando tag. Esto creará una nueva versión de cada componente, pero para ello tenemos dos opciones:

• Etiquetar cada componente uno a uno con el comando:

bit tag <id del componente>--patch --message "first version"

• Etiquetar todos los componentes a la vez usando el siguiente comando:

bit tag --all --message "first version"

En mi caso he optado por la segunda opción, ya que con un comando etiqueto al mismo tiempo todos los componentes que he añadido previamente. La ejecución del comando bit tag --all --message “first version” y su salida se puede ver a continuación:

A veces pueden aparecer errores al ejecutar este comando, en mi caso yo tengo un error de dependencias provocado porque este componente importa un tipo del fichero de tipos del mismo proyecto. Este error lo podemos resolver de dos maneras:

• Añadiendo al espacio de trabajo el elemento del que se depende mediante el comando bit add
• Refactorizando el código para que no se dependa de este elemento.

Yo he optado por refactorizar el código del componente Dropdown el cual depende del tipo StorageItem. Para ello, he eliminado la importación del tipo StorageItem, y he especificado el tipo directamente en el componente. De esta manera el tipo esta autocontenido en el componente, lo cual simplifica la reutilización, la gestión y el mantenimiento del componente.

Esta refactorización del Dropdown se puede observar a continuación:

Ahora la definición de los props del componente tiene que especificar la estructura del tipo:

Finalmente solamente faltaría por cambiar los lugares donde se utilizaban los tipos:

Después de solucionar los errores, hay que volver a ejecutar el comando bit tag --all --message “first version” y si todo ha ido correctamente se deberían etiquetar los componentes, tal y como se puede observar en mi caso tras ejecutar este comando:

Después de esto hay que exportar los componentes mediante el siguiente comando:

bit export

Después de exportar los componentes se me muestra el siguiente mensaje:

Eso significa que ha ido bien, y en vuestro caso debería ser algo similar pero con vuestros componentes.

Tras esto, los componentes ya estarían publicados correctamente en el scope remoto de nuestro usuario, y serian accesible mediante https://bit.dev/<user-name>/<scope-name>, que en mi caso es https://bit.dev/brandres/test donde se puede observar lo siguiente:

Veréis algo similar, pero con vuestros componentes. En esta pagina se puede acceder a los detalles de cada componente clicando sobre su tarjeta, estos detalles se autogeneran con el código del componente, pero se puede añadir mucha mas información acerca del componente mediante sus archivos spec, compositions y docs.

Usando los componentes publicados

Finalmente, solamente quedaría reutilizar los componentes en otros proyectos, para ello simplemente hay que acceder al detalle del componente a través de https://bit.dev/<user-name>/<scope-name> o https://bit.dev/<user-name>/<scope-name>/<component-name> En este detalle existe un botón “Use” que muestra los comandos de npm, bit o yarn para instalar el componente. Esto se puede ver a continuación en mi ejemplo del componente DropDown:

Para probar la la importación/instalación de los componentes en otros proyectos, he creado un proyecto de React Native con un espacio de trabajo bit inicializado, tal y como muestro en la guía de configuración.

Como se puede observar tenemos dos opciones:

• Importar el componente mediante bit, esto crea una carpeta en el espacio de trabajo que contiene el componente, de la misma manera que en el espacio de trabajo anterior, este componente se podrá editar, y gestionar desde el nuevo espacio de trabajo mediante bit, es decir que se podrían exportar nuevas versiones del componente, y a la vez utilizarse en el nuevo proyecto. Para realizar esto es necesario haber inicializado el espacio de trabajo de Bit donde se vaya a importar el componente.
• Instalar el componente mediante npm o yarn, el cual lo instala como una dependencia del proyecto, como si se tratase de un paquete mas que instalamos en el proyecto. En este caso no es necesario inicializar el espacio de trabajo de bit, por lo que resulta mucho mas conveniente si no se va a editar o gestionar el componente.

Yo voy a probar a instalar el componente mediante npm, para ello lo primero que hay que hacer es configurar el usuario como un scope registry utilizando el siguiente comando:

npm config set '@YourUserName:registry' https://node.bit.dev

En mi caso este comando es:

npm config set '@brandres:registry' https://node.bit.dev

Después ya se puede realizar la instalación de los componentes mediante el comando:

npm install @YourUserName/componentScopeName.componentID

En mi ejemplo, para instalar el componente DropDown seria el siguiente comando:

npm install @brandres/test.drop-down

Finalmente solo quedaría importar y utilizar el componente, para ello simplemente hay que importarlo en el código:

import { Component } from ‘@yourUserName/componentScopeName.componentID’;

Siguiendo este fragmento, mi componente DropDown se importaría de la siguiente manera:

import DropDown from ‘@brandres/test.drop-down’;

Después de esto ya se puede utilizar el componente en el nuevo proyecto. Espero que este texto os haya sido de ayuda en vuestras aplicaciones y componentes.

Seguramente haga mas guías sobre como utilizar otros de los aspectos interesante de bit, como la documentación o las composiciones. Además pienso que crear un espacio de trabajo de Bit dentro de un proyecto de React Native no es de las mejores ideas. Tengo varias propuestas de como resolver esto, pero sin duda que son mucho mas difíciles de llevar a cabo que todo lo que acabo de explicar, pero mas adelante seguramente escriba una guía entera dedicada a este tema. Si tenéis cualquier duda o sugerencia me la podéis comentar sin problema😉.

Muchas gracias.

Introducción a Bit Harmony:

Introducción a Bit.dev (Bit Harmony) para gestionar nuestros componentes de React Native