@appshell/loader

Dynamically load Appshell components for micro-frontends built with Appshell and Webpack Module federation.

Working examples can be found here.

Getting Started

To begin, you'll need to install @appshell/loader:

npm install @appshell/loader

or

yarn add @appshell/loader

or

pnpm add @appshell/loader

The default export is the loader factory. It returns an async function that resolves a remote key and loads the component behind it. It needs no configuration — the composition is read from the document the registry served.

import componentLoader from '@appshell/loader';

const load = componentLoader();

const Component = load<MyComponent>('MyModule/MyComponent');

render(<Component />);

Where does the composition come from?

The registry inlines it into the document it serves, as window.__appshell_config__.

How a remote is resolved

The loader walks a chain of resolvers and uses the first one that answers:

| Resolver | Source | When it answers | | ------------------ | ----------------------------------------- | -------------------------------------------------------------------------- | | inlineResolver | window.__appshell_config__ | The registry served the page and inlined the composition. No network call. | | registryResolver | GET /v1/applications/:id/remotes/:key | The remote was activated after this page was served. |

A package's vars are delivered into the @appshell/runtime store immediately before its remote is loaded, so they are in place before the package's modules evaluate. They arrive already merged with the application's overrides, because the registry does that merge server side — the browser applies nothing. The package reads them with getVars() from @appshell/vars.

You can bypass the chain entirely, which is mainly useful for tests and embedders:

const load = componentLoader({ resolver: myResolver });

Do you have any framework specific loaders?

See @appshell/react for a React loader.