Ir al contenido

Crear proyectos

Ventana de terminal
wu create tienda --template react

Genera un proyecto completo: shell, una micro-app, wu.config.json, y los package.json y vite.config de cada parte.

react · vue · svelte · solid · preact · qwik · lit · vanilla · angular · alpine · stencil · htmx · stimulus

Cada uno se verifica de punta a punta antes de publicarse: crear, instalar, construir y renderizar en un navegador sin interfaz, comprobando que la app monta y que su contador responde al clic. Un build en verde no basta — un bundle puede compilar perfectamente y tener todos sus exports en undefined.

El shell es lo que orquesta: inicializa wu, decide qué micro-app se muestra y las monta. Hay dos clases.

Escrito en el propio framework, en shell/src/. Siete lo tienen:

React · Vue · Angular · Solid · Preact · Lit · Qwik

Un shell nativo tiene sentido cuando el propio shell lleva lógica de verdad: rutas, guards, servicios compartidos, estado global. Si solo pinta una barra lateral y llama a wu.mount(), el agnóstico hace lo mismo con menos piezas.

JavaScript plano, unas 70 líneas en shell/main.js, sin ninguna dependencia de framework. Lo reciben Svelte, Vanilla, Alpine, Stencil, HTMX y Stimulus.

Que el shell no necesite ningún framework para orquestar Angular, React y Vue a la vez es la propiedad, no una limitación.

El shell también puede ser un sitio Astro o Next.js:

Ventana de terminal
wu create tienda --template react --shell astro
wu create tienda --template react --shell next

Compilan con su propio bundler (npx astro build / npx next build) y wu sirve su salida; wu dev reconstruye el shell automáticamente cuando cambian sus fuentes. Son solo shell: una micro-app wu es un mount CSR de Vite, así que --template astro se rechaza con un mensaje que lo explica.

Svelte queda fuera de la lista nativa a propósito: su adaptador no expone componente de slot, así que un «shell Svelte» sería wu.mount() a mano — el mismo código del agnóstico, disfrazado. Alpine, HTMX y Stimulus son capas sobre HTML, no frameworks de aplicación.

El framework del shell y el de cada micro-app son independientes:

Ventana de terminal
wu create tienda --template angular # shell Angular
cd tienda
wu add react moderno # micro-app React
wu add vue panel # micro-app Vue

Las tres conviven en la misma página, cada una en su propio Shadow DOM. Es el caso de uso donde wu es más fuerte: migración gradual, un framework antiguo conviviendo con el nuevo sin reescribir nada.

Ventana de terminal
wu add svelte notificaciones

Crea la carpeta, la registra en wu.config.json, regenera el package.json raíz con las dependencias agregadas de todas las partes, e instala.

Ventana de terminal
wu doctor

Busca los fallos que no se ven mientras ocurren: un directorio de app que no existe, un index.html apuntando a una entrada que nadie escribió, rangos de wu-framework desincronizados entre package.json, overrides de versión cuya clave no casa con ningún directorio real, y puertos repetidos. Desde la 0.4 también revisa lo que está a punto de publicarse: credenciales, lockfiles o .git/ dentro de los public/, y un build sin cabeceras de seguridad aplicables para tu host.