Cómo compartir componentes de React entre módulos Liferay

Cuando trabajamos Liferay con OSGi, nos encontramos con la posibilidad de poder manejar nuestros portlets de react como módulos independientes, esto hace que debamos definir en cada módulo las dependencias que se necesitan y en cada módulo definimos nuestros propios Componentes.

En nuestro proyecto queríamos compartir componentes personalizados entre diferentes portlets, ya que, por un lado, necesitábamos un proyecto proveedor de librerías (el cual permite utilizar las mismas dependencias en varios módulos) y, por otro lado, necesitábamos compartir componentes para poder reutilizarlos en diferentes módulos dentro del proyecto.

Ventajas

Componentes de bajo nivel que podemos reutilizar en diferentes portlets, manteniendo la consistencia de la aplicación.
El tamaño de los portlets será mucho más liviano, ya que las dependencias y componentes personalizados estarán solo en los proyectos proveedores.
La compilación de los módulos es mucho más rápida.
Compatibilidad y estandarización de librerías y versiones: ya que al tener un único proyecto en donde definimos las dependencias y sus respectivas versiones, evitaríamos múltiples versiones de la misma dependencia.
Una vez definidos los componentes genéricos personalizados, los desarrolladores concentrarán el esfuerzo en la lógica de negocio reutilizando estos componentes.

Nos hemos basado en el Blog de Roselaine https://liferay.dev/es/blogs/-/blogs/how-to-use-shared-library-javascript-with-react-in-liferay para la creación de los módulos provider-bundle y consumer-bundle, y adicionalmente, hemos creado el módulo components-provider-bundle:

Módulo provider-bundle:

1. Crear un proyecto tipo “Share bundle” ejecutando el comando:

yo liferay-js

2. En el archivo package.json, agregar las dependencias necesarias con su respectiva versión en la sección “dependencies”

3. Ahora, ejecuta los comandos npm install y npm run build

Módulo components-provider-bundle:

1. Crear un proyecto tipo “Share bundle” ejecutando el comando:
yo liferay-js

2. En el archivo package.json:
a. Agrega en las “devDependencies”: "@babel/preset-react"
b. Deja vacía la sección “dependencies”

3. Agrega el preset de react en tu archivo .babelrc ("@babel/preset-react"):

4. Importe el módulo proveedor provider-bundle:

5. Crea la carpeta src/components donde alojaremos todos nuestros componentes personalizados

6. Crea tu componente. Para nuestro ejemplo será un botón que aumente el contador de clics, e imprima el nombre del consumidor:

7. Ahora, ejecuta los comandos npm install y npm run build

Módulo consumer-bundle:

1. Vamos a crear el portlet consumidor. Este será tipo “React Widget” (generando código de ejemplo):

2. Agrega las dependencias de los módulos proveedores al archivo .npmbundlerrc del proyecto consumidor:
"config": { "imports": { "provider-bundle": { "react": "*", "react-dom": "*" }, "": { "components-provider-bundle": "^1.0.0" } } }

3. Elimina las “dependencies” del package.json:

4. Desde el archivo AppComponent.js ya puedes importar y hacer uso de tus componentes personalizados: