WU / DOCSUNIVERSAL MICROFRONTENDS
EN

Astro, Next, and helper reference

Client and server integration points and exported utility functions.

Choosing a package entrypoint

Import Astro components from wu-framework/integrations/astro/*.astro. The astro.config factory is in wu-framework/integrations/astro. In Next, use the wu-framework/integrations/next barrel or its WuShell, WuApp, WuAppSSR, and WuMount subpaths.

WuShell initializes the catalog, WuApp mounts on the client, and WuAppSSR composes initial HTML with a hydration bridge. A UI component does not constitute an additional remote registration: keep app names consistent across the server, catalog, and browser entrypoint.

Astro examples use frontmatter; Next examples use JSX. The server recipe shows composition with SSR modules. For helper functions, explicitly import the indicated name from wu-framework.

wuIntegration

Configures Vite and injects client initialization from astro.config.

wuIntegration(options?): AstroIntegration

  • Parameters: apps, sandbox, cdn, and debug.
  • Returns: Astro integration object with an astro:config:setup hook.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
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 adds a UMD script to head, but app auto-init still imports the wu-framework package. Choosing CDN here does not automatically replace that import.

Reference: integrations/astro/index.js.

Astro WuShell

Emits catalog configuration and runs wu.init in a client script.

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

  • Parameters: Required apps; sandbox and debug. Renders its slot.
  • Returns: Astro markup with JSON configuration and a bundled script.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
---
import WuShell from 'wu-framework/integrations/astro/WuShell.astro';
---
<WuShell apps={[{ name: 'card', url: '/apps/card' }]}><main>Contenido</main></WuShell>

It is not a reactive provider: changing an HTML attribute does not update runtime configuration or create a second instance.

Reference: integrations/astro/WuShell.astro.

Astro WuApp

Emits a client mount point for a registered application.

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

  • Parameters: name; lazy enables IntersectionObserver; container class and style.
  • Returns: Astro container and mounting script.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
---
import WuApp from 'wu-framework/integrations/astro/WuApp.astro';
---
<WuApp name="card" lazy />

Initialize and register the application through a shell or integration. The component does not receive module or render SSR.

Reference: integrations/astro/WuApp.astro.

Astro WuAppSSR

Renders an application in Astro SSR or SSG and publishes props for optional hydration.

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

  • Parameters: Required server module; hydrate and fallbackToClient true; optional class/style.
  • Returns: Initial HTML with an SSR marker and JSON state when hydrating.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
---
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 keeps server HTML only. fallbackToClient:false propagates the SSR error. The component does not expose every nonce/shadowMode option of renderApp.

Reference: integrations/astro/WuAppSSR.astro.

Next WuShell

Initializes the client runtime and coordinates descendants through the shell promise.

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

  • Parameters: apps and children; sandbox/debug.
  • Returns: children without an extra DOM wrapper.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
import { WuShell } from 'wu-framework/integrations/next';
export default function Layout({ children }) {
  return <WuShell apps={[{ name: 'card', url: '/apps/card' }]}>{children}</WuShell>;
}

Initialization runs once per shell mount. Changing apps afterward does not automatically reconfigure the catalog.

Reference: integrations/next/WuShell.js.

Next WuApp

Mounts a WU app from a Next client component.

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

  • Parameters: Registered name, lazy, className/style, onMount/onUnmount, and additional props.
  • Returns: React-managed host element.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
import { WuApp } from 'wu-framework/integrations/next';
export default function Page() { return <WuApp name="card" lazy />; }

Import the integration subpath, not runtime WuApp: the latter is a different imperative wrapper.

Reference: integrations/next/WuApp.js.

Next WuAppSSR

Renders the server module and adds the client bridge when hydrate is true.

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

  • Parameters: Required module; props, styles, shadowMode, hydrate true, fallbackToClient true.
  • Returns: React tree with SSR HTML and optional WuMount bridge.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: Keep one shell instance per document and unmount applications when their host is removed.
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} />;
}

The browser bundle must register compatible hydrate to adopt DOM; a server renderer does not supply that lifecycle automatically.

Reference: integrations/next/WuAppSSR.js.

Next WuMount

Connects an existing server container to core mounting or hydration.

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

  • Parameters: name, id of an existing element, optional props, and ssr true.
  • Returns: null; performs client effects only.
  • Errors: Handles registration or module-loading failures; components may log errors according to their contract.
  • Permissions: The host controls the catalog and WU policy. The integration does not itself grant application capabilities.
  • Cleanup: The effect unmounts on removal and also reverses a mount finishing after cancellation. Does not destroy the singleton.
import WuMount from 'wu-framework/integrations/next/WuMount';
const bridge = <WuMount name="card" containerId="wu-app-card" props={{ count: 1 }} />;

props are published before mounting; props are absent from effect dependencies, so changing them is not a reactive update channel.

Reference: integrations/next/WuMount.js.

parseVersion

Parses a version for versioned contracts.

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

  • Parameters: Value converted to string; removes v/= prefixes, prerelease, and build. Nonnumeric components become 0.
  • Returns: Tuple [major,minor,patch].
  • Errors: Not a strict validator: a nonnumeric version may produce [0,0,0].
  • Permissions: Utility function without grants or privileged access of its own.
  • Cleanup: Creates no persistent resources.
import { parseVersion } from 'wu-framework';
console.log(parseVersion('1.2.3'));

Uses the same semantics as contracts; does not replace all node-semver rules.

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

compareVersions

Compares version structures to order compatibility.

compareVersions(a, b): number

  • Parameters: Two version strings or [major,minor,patch] tuples.
  • Returns: Negative, zero, or positive value.
  • Errors: Validates according to its implementation; not a general package parser.
  • Permissions: Utility function without grants or privileged access of its own.
  • Cleanup: Creates no persistent resources.
import { compareVersions, parseVersion } from 'wu-framework';
console.log(compareVersions(parseVersion('1.0.0'), parseVersion('2.0.0')));

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

satisfies

Checks a version range supported by WU contracts.

satisfies(version, range): boolean

  • Parameters: Version and range strings.
  • Returns: Boolean.
  • Errors: Validates according to its implementation; not a general package parser.
  • Permissions: Utility function without grants or privileged access of its own.
  • Cleanup: Creates no persistent resources.
import { satisfies } from 'wu-framework';
console.log(satisfies('1.2.3', '^1.0.0'));

Supported operators are those WU implements; do not assume complete npm grammar support.

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

silenceAllLogs

Disables framework central-logger levels.

silenceAllLogs(): void

  • Parameters: No arguments.
  • Returns: void.
  • Errors: Validates according to its implementation; not a general package parser.
  • Permissions: Utility function without grants or privileged access of its own.
  • Cleanup: Creates no persistent resources.
import { silenceAllLogs } from 'wu-framework';
silenceAllLogs();

Does not intercept all browser console output or guarantee silencing adapter/application console calls.

Reference: src/index.js.

enableAllLogs

Enables framework central-logger levels.

enableAllLogs(): void

  • Parameters: No arguments.
  • Returns: void.
  • Errors: Validates according to its implementation; not a general package parser.
  • Permissions: Utility function without grants or privileged access of its own.
  • Cleanup: Creates no persistent resources.
import { enableAllLogs } from 'wu-framework';
enableAllLogs();

Controls the shared central logger of that imported module.

Reference: src/index.js.

BUILD WU WITH US

Found a bug? Have an idea?

Your experience improves WU. Tell us what went wrong or help support its development.