2022_02 Uso de: (1) controladores stimulus de motores, (2) foreman y (3) recarga viva en navegador

Controladores stimulus de motores disponibles en aplicación que usa esbuild

Suponemos que tiene una aplicación rails 7 que usa esbuild para construir fuentes javascript de app/javascript/ con punto de entrada app/javascript/application.js para dejarlas en app/assets/build.

También suponemos que en su aplicación usa stimulus reciente y que lo instaló con bin/rails stimullus:install por lo que tiene:

• stimulus-rails en su Gemfile.
• Un directorio app/javascript/controllers que incluye los archivos: index.js (que carga los controladores existentes) y
  app/javascript/controllers/application.js que inicializa Stimulus.
• Que el punto de entrada principal app/javascript/application.js incluye los controladores Stimulus mediante:

import './controllers'

Finalmente suponemos que el o los motores con controladores stimulus que va a usar definen esos controladores en app/javascript/controllers

Dado esto, para usar los controladores stimulus de los motores de una aplicación:

1. Actualizar a sip reciente y ejecutar bin/rails sip:stimulus_motores Se trata de una tarea rake que enlazará simbólicamente los directorios app/javascript/controllers de cada motor usado por la aplicación en app/javascript/controllers de la aplicación (cada uno en un directorio con el nombre del motor) y después ejecutará la tarea stimulus:manifest:udpate que regenerará el archivo app/javascript/controllers/index.js referenciando los controladores de la aplicación y de los motores. Así un controlador del motor sip de nombre mi-controlador será sip--mi-controlador. Recomendamos que en .gitignore agregue cada directorio enlazado en app/javascript/controllers

2. esbuild podrá operar con estos controladores siempre que al compilar se use la opción --preserve-symlinks. Por eso si hace falta edite su archivo package.json y cambie la tarea build para agregarla. i.e:

     "scripts": {
          "build": "esbuild app/javascript/*.* --preserve-symlinks --bundle --sourcemap --outdir=app/assets/builds"
      }
   

Recarga viva en navegador y uso de foreman

En su archivo .env agregue

if (test "$MAQRECVIVA" = "") then { # Recarga viva
  export MAQRECVIVA="192.168.10.1"
} fi;
if (test "$PUERTORECVIVA" = "") then { # Puerto para recarga viva
   export PUERTORECVIVA=4500
} fi;

Copie en el mismo directorio de package.json el script esbuild-des.config.js así:

ftp https://raw.githubusercontent.com/pasosdeJesus/sip/main/test/dummy/esbuild-des.config.js

Este script se basa en el de https://www.colby.so/posts/live-reloading-with-esbuild-and-rails y lo que hace es:

• Ejecutará un servidor web en el puerto PUERTORECVIVA del computador MAQRECVIVA para enviar notificaciones a los clientes que se conecten cada vez que se complete una construycción de fuentes.
• Ejecutará esbuild en modo observación (del inglés watch, que recompila fuentes cada vez que nota un cambio en las mismas en el sistema de archivos) y a cada empaquetado que produce la agrega un "pie de página" para conectarse con el servidor web y hacer que el navegador recargue la página cada vez que reciba una notificación de compilación completada.

foreman es muy útil para tener simultaneamente un proceso para la recompilación de las fuentes javascript y otro con la aplicación rails corriendo, los mensajes que cada uno produzca irán precedidos de un color distintivo.
Instalelo con

doas gem install foreman

Para su operación requiere un archivo Procfile con el siguiente contenido:

rails: R=f bin/corre                                                             
js: (. .env && yarn start --watch )

Debe modificarse package.json para agregar en la sección scripts:

"start": "node esbuild-des.config.js"

Y bin/corre también debe modificarse para usar foreman. Puede copiar el de https://github.com/pasosdeJesus/sip/blob/main/test/dummy/bin/corre con:

ftp -o bin/corre https://raw.githubusercontent.com/pasosdeJesus/sip/main/test/dummy/bin/corre

Su uso se resume a continuación.

Orden	Instala dependencias	Borra compilaciones y recompila	Inicia esbuild y rails con foreman
bin/corre	Si	Si	Si
R=r bin/corre		Si	Si
R=1 bin/corre			Si
R=f bin/corre			Solo rails sin foreman