Fronts 2.0
Packages

@fronts/core

Framework-neutral application protocol, Host runtime, resolvers, containers, services, errors, and iframe entry point.

Framework-neutral application protocol and host runtime for Fronts 2.0.

pnpm add @fronts/core

Define an application

import { defineApp } from '@fronts/core';

export default defineApp<{ message: string }, HostServices>({
  name: 'notice',
  capabilities: ['telemetry'],
  mount({ props, services, target }) {
    const element = document.createElement('p');
    element.textContent = props.message;
    target.append(element);
    services.telemetry.emit('notice.mounted');

    return {
      update(next) {
        element.textContent = next.message;
      },
      unmount() {
        element.remove();
      },
    };
  },
});

Create a host

import { createDomContainer, createFrontsHost, createStaticResolver } from '@fronts/core';

const host = createFrontsHost({
  resolver: createStaticResolver([
    { match: { name: 'notice' }, resolve: { source: mySource, version: '2.0.0' } },
  ]),
  loader: myLoader,
  containers: [createDomContainer()],
  services: { telemetry },
});

const app = await host.mount({
  ref: { name: 'notice' },
  target: document.querySelector('#slot')!,
  props: { message: 'Hello' },
});

await app.update({ message: 'Updated' });
await app.unmount();
host.assertIdle();

Public surfaces

The main entry exports:

  • defineApp() and protocol validation
  • createFrontsHost() and mounted-instance controls
  • static, registry, cached, and fallback resolvers
  • DOM and Shadow DOM containers
  • resolution-aware container planning before loader selection
  • static and instance-provided capability-scoped services
  • correlated operation contexts for resolvers, loaders, and containers
  • typed errors, lifecycle events, replacement, and leak audit

Additional entry points:

  • @fronts/core/iframe — origin-bound iframe container/proxy, child agent, and negotiated RPC capabilities

See the Host Runtime API guide for resolution, preload, mount, replacement, contextual services, observability, and shutdown workflows. See the iframe deployment guide for cross-origin parent/child wiring, capability negotiation, browser policy, and production teardown.

The core package has no React, Vue, bundler, or Module Federation dependency. Pair it with @fronts/mf, a custom loader, or both.

Fronts is currently alpha. Protocol and API changes may occur before 2.0 stable.

MIT

On this page