Saltar al contenido principal

Bundler frontend 26.01

Abrir en ChatGPT

El bundler frontend permite que una clase de webforJ utilice el ecosistema de npm, escriba componentes en React, Svelte o Lit, y autorice SCSS, todo desde un proyecto Java sin necesidad de instalar o ejecutar una herramienta de Node. Una clase nombra el frontend que necesita con una anotación, y la construcción instala los paquetes, compila las fuentes y carga el resultado cuando se crea un componente de esa clase.

El bundler se ejecuta como parte del plugin de construcción webforJ, que agregas una vez a tu construcción de Maven o Gradle. La mecánica de compilar un tipo específico de fuente, SCSS, Less, Tailwind, y el resto, son tarea de extensiones.

Cuándo necesitas el bundler​

webforJ funciona sin un bundler. Si ya tienes un script o una hoja de estilos y quieres adjuntarlo a un componente o a la aplicación, las anotaciones de activos lo hacen sin ningún paso de construcción, sin npm y sin compilación.

El bundler se justifica cuando el frontend es más que un archivo estático:

  • Quieres un paquete de npm, por nombre y versión, instalado y compilado en tu aplicación.
  • Quieres escribir un componente en React, Svelte o Lit y consumirlo desde Java.
  • Quieres autorizar SCSS, Sass o Less, o compilar utilidades de Tailwind.
  • Quieres ejecutar pruebas frontend como parte de la construcción.

El bundler es el camino predeterminado para ese trabajo, y hace todo lo que hacen las anotaciones de activos, por lo que un proyecto que lo adopte no pierde la opción más simple.

Agregándolo a un proyecto existente​

El bundler es optativo, por lo que puedes agregarlo a una aplicación que ya utiliza las anotaciones de activos y usarlo solo donde lo necesites.

  1. Agrega el plugin de construcción webforJ a tu construcción de Maven o Gradle. Se encarga de Bun por ti, así que no hay necesidad de instalar una herramienta de Node.
  2. Autoriza tus fuentes frontend bajo src/main/frontend.
  3. Declara lo que una clase necesita con @BundlePackage y @BundleEntry.

Tus anotaciones de activos existentes @StyleSheet, @JavaScript y las demás seguirán funcionando sin cambios, por lo que puedes mover un recurso al bundler cuando necesites un paquete, una fuente compilada o una prueba, y dejar el resto sin cambios.

Vinculando una clase a una entrada​

@BundleEntry vincula una clase a una entrada de frontend, y @BundlePackage declara los paquetes de npm que esa entrada importa. Ambas anotaciones viven en la clase, por lo que el frontend que necesita una vista viaja con la vista.

GreetingView.java
@Route("/greeting")
@BundlePackage(value = "lit", version = "^2.0.0")
@BundleEntry("greeting/hello-greeting.ts")
public class GreetingView extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public GreetingView() {
    self.add(new Element("hello-greeting"));
  }
}
greeting/hello-greeting.ts
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement("hello-greeting")
class HelloGreeting extends LitElement {
  render() {
    return html`<p>Saludos de webforJ</p>`;
  }
}

La entrada registra el elemento personalizado hello-greeting y se encarga de su renderizado. El lado de Java lo consume con new Element("hello-greeting") y escucha sus eventos. La construcción compila la entrada, instala lit, y carga la salida cuando se renderiza /greeting.

Temas​