WU / DOCSUNIVERSAL MICROFRONTENDS
ES

Plantillas y composición políglota

Los trece targets de microapps, shells disponibles, adapters generados y el alcance de cada plantilla.

Consulta las versiones, cambios y requisitos en Framework 4.0 y CLI 1.2.

Catálogo implementado

La CLI acepta trece nombres de microapp. La selección del shell añade astro y next. El soporte de un nombre significa que existe una ruta de generación; no acredita paridad absoluta de compilador, SSR, ecosistema ni ciclo de vida entre frameworks.

Target Componente / registro generado Shell generado con esa selección
react App.tsx, wuReact.register con runtime React/ReactDOM explícito React
vue App.vue, wuVue.register Vue
svelte App.svelte, wuSvelte.registerSvelte5 JavaScript agnóstico
solid App.tsx, wuSolid.register Solid
preact App.tsx, wuPreact.register Preact
qwik App.tsx, wuQwik.register Qwik
lit App.ts, wuLit.register Lit
vanilla Módulo de app, wuVanilla.register con función render JavaScript agnóstico
angular Componente y config Angular, registerStandalone Angular
alpine JavaScript con @alpinejs/csp, wuAlpine.register JavaScript agnóstico
stencil Custom element y wuStencil.register JavaScript agnóstico
htmx Módulo HTML/JS, wuHtmx.register JavaScript agnóstico
stimulus Módulo de controladores, wuStimulus.register JavaScript agnóstico

Las extensiones reflejan el modo rápido con TypeScript activado donde es compatible. El asistente puede generar variantes JavaScript. En Alpine, HTMX y Stimulus no ofrece TypeScript.

Versiones del catálogo 1.1

wu catalog
wu catalog --json

El catálogo es la fuente única para create, add, install, upgrade y descubrimiento. Declara WU Framework ^4.0.0, Preact ^11.0.0 y TypeScript ~6.0.0 para Angular 22. El JSON incluye rangos y razones de versiones retenidas; no consulta npm para elegir versiones durante la generación.

Qué constituye una microapp generada

El generador escribe un paquete identificable, una configuración Vite, un index.html, un componente de demostración y un entrypoint de registro. El contenedor standalone del HTML coincide con el selector esperado por el adaptador. Esto permite ejecutar la app con su toolchain, además de montarla desde el shell WU.

No genera automáticamente un wu.json fuente. En desarrollo el servidor puede ofrecer un manifiesto virtual con contratos vacíos; en producción el build escribe uno con la entrada emitida. Para utilizar imports/exports de contrato o permisos, escribe un manifiesto explícito y comprueba que sus solicitudes coincidan con los grants del host.

Particularidades que importan

React

El entrypoint pasa React y ReactDOM al adaptador para conservar una misma identidad de runtime. Evita mezclar una copia del adaptador que resuelve otra instancia con la usada por el componente. Compartir dependencias en producción también exige incluir los specifiers completos que se importan.

Angular

El scaffold genera tsconfig.json y tsconfig.app.json, importa el compilador, prepara configuración de aplicación y pasa funciones de creación al adaptador standalone. La compilación de Angular necesita su integración específica; quitar esos archivos por considerarlos decoración puede producir un build sin el código esperado.

Stencil

La plantilla actual escribe directamente una clase que extiende HTMLElement y registra un custom element. Utiliza el adaptador Stencil, pero no equivale a generar un proyecto completo del compilador de Stencil con todo su pipeline. Si necesitas ese pipeline, intégralo explícitamente y verifica su entrada construida.

Cada app Stencil registra wu-stencil-<name> y no instala @stencil/core. El shell Angular declara rxjs, el shell Solid su preset Babel y el shell agnóstico no añade Svelte. La plantilla Vanilla transmite estado y contexto WU al render y sus componentes.

Alpine y HTMX

Alpine utiliza la distribución CSP. El entrypoint de HTMX desactiva evaluación y tags de script, prepara la configuración antes de importar el runtime y evita estilos automáticos de indicador. Esas decisiones forman parte del scaffold; volver a activar las funciones requiere revisar su relación con la política del host.

Qwik

En desarrollo hay una selección de compilación que utiliza el optimizador de Qwik. La plantilla como microapp WU se monta en cliente; no promete por sí sola una arquitectura SSR o resumability completa del host.

Shell Astro o Next

wu create conocimiento --template react --shell astro
cd conocimiento
wu add vue explorador --no-install
wu add lit indicador --no-install
wu install
wu dev --no-open

Astro construye el shell; React, Vue y Lit se registran como microapps. El host debe decidir su montaje y sus contratos. No necesitan adoptar el framework del shell.

La alternativa --shell next utiliza un export estático hacia out/. --template astro y --template next fallan porque el catálogo de microapps no contiene esos targets. El soporte de shell no implica que WU ejecute un servidor SSR de Astro o Next.

Prueba mínima de una combinación

Construye, carga cada app, acciona su contador de demostración, cambia de app y vuelve a montarla. Revisa consola, estilos y limpieza al desmontar. Si añades comunicación, verifica tanto una operación permitida como una rechazada por contrato. Una tabla de plantillas es inventario; esa prueba establece qué comportamiento funciona en tu proyecto y versiones instaladas.

Referencia de implementación

  • wu-cli/src/config/catalog.zig
  • wu-cli/src/commands/catalog.zig
  • wu-cli/src/commands/templates/
  • wu-cli/tests/scaffold-catalog.test.cjs
  • wu-cli/tests/vanilla-ctx.test.cjs
WU SE CONSTRUYE CONTIGO

¿Encontraste un bug? ¿Tienes una idea?

Tu experiencia mejora WU. Cuéntanos qué falla o ayuda a sostener su desarrollo.