Micro-frontends

@tagna/udiot/mfe exports the experimental shell registry, remote contracts and shared platform context. The loader is bundler-neutral: your application owns the import/fetch/federation integration and version selection.

Register and match a remote

import assert from 'node:assert/strict';
import { createShellRegistry, defineRemote } from '@tagna/udiot/mfe';

const registry = createShellRegistry();
registry.register(defineRemote({
  name: 'help',
  route: '/help',
  loader: async () => ({
    mount: element => {
      const node = document.createElement('p');
      node.textContent = 'Help';
      element.appendChild(node);
      return { unmount: () => { node.remove(); } };
    },
  }),
}));
assert.equal(registry.match('/help/article')?.name, 'help');

This checks registration/routing without invoking DOM mounting. In a browser, call await registry.mount('help', element, { props }) with your target element and props. Call unmount/unmountAll when replacing remotes. Remote mount handles must clean up their DOM, listeners, timers and subscriptions. Coordinate rapid navigation and aborted loads in the shell.

Shared contracts

Pass application-owned router/auth/state/logger interfaces through the shared context. Prefer structural IStore<T>/ReadonlyStore<T> contracts over concrete class identity when remotes can contain separate physical package installs. Keep shared data minimal; do not expose server secrets.

This runtime is not a security sandbox. Loaded JavaScript runs with the page's authority. Load trusted, version-controlled remotes and apply your CSP and deployment integrity controls. Test cross-remote state/lifecycle behavior and rollback; registry metadata does not enforce authorization or compatibility.