WU / DOCSUNIVERSAL MICROFRONTENDS
ES

Referencia de Astro, Next y helpers

Puntos de integración de cliente y servidor y funciones exportadas de utilidad.

Elegir una entrada del paquete

Los componentes de Astro se importan desde wu-framework/integrations/astro/*.astro. La factory de astro.config está en wu-framework/integrations/astro. En Next puedes usar el barrel wu-framework/integrations/next o sus subpaths WuShell, WuApp, WuAppSSR y WuMount.

WuShell inicia el catálogo, WuApp monta en el cliente y WuAppSSR compone HTML inicial con un puente de hidratación. Un componente de UI no constituye un registro remoto adicional: conserva los mismos nombres de apps en servidor, catálogo y entry de navegador.

Los ejemplos Astro utilizan frontmatter y los de Next JSX. La receta de servidor muestra su composición con módulos SSR. Para funciones auxiliares importa explícitamente el nombre indicado desde wu-framework.

wuIntegration

Configura Vite e inyecta inicialización cliente desde astro.config.

wuIntegration(options?): AstroIntegration

  • Parámetros: apps, sandbox, cdn y debug.
  • Retorno: Objeto de integración Astro con hook astro:config:setup.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
import { defineConfig } from 'astro/config';
import wuIntegration from 'wu-framework/integrations/astro';
export default defineConfig({ integrations: [wuIntegration({ apps: [{ name: 'card', url: '/apps/card' }], sandbox: 'module' })] });

cdn añade un script UMD al head, pero el auto-init de apps sigue importando el paquete wu-framework. Elegir CDN aquí no sustituye automáticamente esa importación.

Referencia: integrations/astro/index.js.

Astro WuShell

Emite la configuración del catálogo y ejecuta wu.init en un script cliente.

<WuShell apps={apps} sandbox? debug?>children</WuShell>

  • Parámetros: apps obligatoria; sandbox y debug. Renderiza su slot.
  • Retorno: Markup Astro con configuración JSON y script bundleado.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
---
import WuShell from 'wu-framework/integrations/astro/WuShell.astro';
---
<WuShell apps={[{ name: 'card', url: '/apps/card' }]}><main>Contenido</main></WuShell>

No es un proveedor reactivo: cambiar un atributo HTML no actualiza la configuración del runtime ni crea una segunda instancia.

Referencia: integrations/astro/WuShell.astro.

Astro WuApp

Emite un punto de montaje cliente para una aplicación registrada.

<WuApp name="card" lazy? class? style? />

  • Parámetros: name; lazy activa IntersectionObserver; class y style del contenedor.
  • Retorno: Contenedor Astro y script de montaje.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
---
import WuApp from 'wu-framework/integrations/astro/WuApp.astro';
---
<WuApp name="card" lazy />

Inicializa y registra la aplicación desde un shell o integración. El componente no recibe module ni renderiza SSR.

Referencia: integrations/astro/WuApp.astro.

Astro WuAppSSR

Renderiza una aplicación en Astro SSR o SSG y publica props para hidratación opcional.

<WuAppSSR name module props? styles? hydrate? fallbackToClient? />

  • Parámetros: module servidor obligatorio; hydrate y fallbackToClient true; class/style opcionales.
  • Retorno: HTML inicial con marcador de SSR y estado JSON cuando se hidrata.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
---
import WuAppSSR from 'wu-framework/integrations/astro/WuAppSSR.astro';
import { renderHtml } from 'wu-framework/server';
const module = renderHtml(() => '<p>Resumen</p>');
---
<WuAppSSR name="card" module={module} hydrate={false} />

hydrate:false conserva solo HTML servidor. fallbackToClient:false propaga el error SSR. El componente no expone todas las opciones nonce/shadowMode de renderApp.

Referencia: integrations/astro/WuAppSSR.astro.

Next WuShell

Inicializa el runtime en el cliente y coordina sus descendientes con la promesa del shell.

WuShell({apps, sandbox?, debug?, children?}): ReactNode

  • Parámetros: apps y children; sandbox/debug.
  • Retorno: children sin un wrapper DOM adicional.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
import { WuShell } from 'wu-framework/integrations/next';
export default function Layout({ children }) {
  return <WuShell apps={[{ name: 'card', url: '/apps/card' }]}>{children}</WuShell>;
}

La inicialización se ejecuta una vez por montaje del shell. Cambiar apps después no reconfigura automáticamente el catálogo.

Referencia: integrations/next/WuShell.js.

Next WuApp

Monta una app WU desde un componente cliente de Next.

WuApp({name, appName?, lazy?, ...props}): ReactNode

  • Parámetros: Nombre registrado, lazy, className/style, onMount/onUnmount y props adicionales.
  • Retorno: Elemento de host gestionado por React.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
import { WuApp } from 'wu-framework/integrations/next';
export default function Page() { return <WuApp name="card" lazy />; }

Importa el subpath de integración, no WuApp del runtime: ese último es un wrapper imperativo diferente.

Referencia: integrations/next/WuApp.js.

Next WuAppSSR

Renderiza el módulo de servidor y agrega el puente cliente cuando hydrate es true.

WuAppSSR({name, module, props?, ...options}): Promise<ReactNode>

  • Parámetros: module obligatorio; props, styles, shadowMode, hydrate true, fallbackToClient true.
  • Retorno: Árbol React con el HTML SSR y puente WuMount opcional.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: Mantén una instancia de shell por documento y desmonta las aplicaciones cuando se retire su host.
import { WuAppSSR } from 'wu-framework/integrations/next';
import { renderHtml } from 'wu-framework/server';
const module = renderHtml(() => '<p>Resumen</p>');
export default async function Page() {
  return <WuAppSSR name="card" module={module} hydrate={false} />;
}

El bundle de navegador debe registrar un hydrate compatible para adoptar DOM; un renderer de servidor no proporciona ese lifecycle automáticamente.

Referencia: integrations/next/WuAppSSR.js.

Next WuMount

Conecta un contenedor existente del servidor con el montaje o hidratación del core.

WuMount({name, containerId, props?, ssr?}): null

  • Parámetros: name, id de un elemento ya existente, props opcionales y ssr true.
  • Retorno: null; solo realiza efectos cliente.
  • Errores: Maneja fallos de registro o carga del módulo; los componentes pueden registrar errores en consola según su contrato.
  • Permisos: El host controla el catálogo y la política de WU. La integración no concede capacidades a las aplicaciones por sí sola.
  • Limpieza: El efecto desmonta al retirarse y también revierte un mount que termine después de cancelar. No destruye el singleton.
import WuMount from 'wu-framework/integrations/next/WuMount';
const bridge = <WuMount name="card" containerId="wu-app-card" props={{ count: 1 }} />;

props se publica antes de montar; props no figura en dependencias del efecto, así que cambiarla no representa un canal reactivo de update.

Referencia: integrations/next/WuMount.js.

parseVersion

Descompone una versión para los contratos versionados.

parseVersion(version): [number, number, number]

  • Parámetros: Valor convertido a string; elimina prefijos v/=, prerelease y build. Componentes no numéricos se convierten en 0.
  • Retorno: Tupla [major,minor,patch].
  • Errores: No es un validador estricto: una versión no numérica puede producir [0,0,0].
  • Permisos: Función de utilidad sin grants ni acceso privilegiado propio.
  • Limpieza: No crea recursos persistentes.
import { parseVersion } from 'wu-framework';
console.log(parseVersion('1.2.3'));

Usa la misma semántica que contracts; no reemplaza todas las reglas de node-semver.

Referencia: src/core/wu-semver.js.

compareVersions

Compara estructuras de versiones para ordenar compatibilidad.

compareVersions(a, b): number

  • Parámetros: Dos strings de versión o tuplas [major,minor,patch].
  • Retorno: Valor negativo, cero o positivo.
  • Errores: Valida según su implementación; no equivale a un parser general de paquetes.
  • Permisos: Función de utilidad sin grants ni acceso privilegiado propio.
  • Limpieza: No crea recursos persistentes.
import { compareVersions, parseVersion } from 'wu-framework';
console.log(compareVersions(parseVersion('1.0.0'), parseVersion('2.0.0')));

Referencia: src/core/wu-semver.js.

satisfies

Comprueba un rango de versión admitido por los contratos WU.

satisfies(version, range): boolean

  • Parámetros: Versión y rango strings.
  • Retorno: Boolean.
  • Errores: Valida según su implementación; no equivale a un parser general de paquetes.
  • Permisos: Función de utilidad sin grants ni acceso privilegiado propio.
  • Limpieza: No crea recursos persistentes.
import { satisfies } from 'wu-framework';
console.log(satisfies('1.2.3', '^1.0.0'));

Los operadores soportados son los que implementa WU; no presupongas soporte completo de la gramática npm.

Referencia: src/core/wu-semver.js.

silenceAllLogs

Desactiva los niveles del logger central del framework.

silenceAllLogs(): void

  • Parámetros: Sin argumentos.
  • Retorno: void.
  • Errores: Valida según su implementación; no equivale a un parser general de paquetes.
  • Permisos: Función de utilidad sin grants ni acceso privilegiado propio.
  • Limpieza: No crea recursos persistentes.
import { silenceAllLogs } from 'wu-framework';
silenceAllLogs();

No intercepta todo console del navegador ni garantiza silenciar console de adapters o aplicaciones.

Referencia: src/index.js.

enableAllLogs

Activa los niveles del logger central del framework.

enableAllLogs(): void

  • Parámetros: Sin argumentos.
  • Retorno: void.
  • Errores: Valida según su implementación; no equivale a un parser general de paquetes.
  • Permisos: Función de utilidad sin grants ni acceso privilegiado propio.
  • Limpieza: No crea recursos persistentes.
import { enableAllLogs } from 'wu-framework';
enableAllLogs();

Controla el logger central compartido de ese módulo importado.

Referencia: src/index.js.

WU SE CONSTRUYE CONTIGO

¿Encontraste un bug? ¿Tienes una idea?

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