vanilla-native-federation

@aukevanoost/vanilla-native-federation-runtime

Check the full description of native-federation on @softarc/native-federation. This library is specifically made for stateful models that require a small library to load micro frontends or web components using native-federation.

This library also contains the implementation for micro frontend discovery.

Simple usage:

loader.ts

import { initFederation } from '@aukevanoost/vanilla-native-federation-runtime';

(() => {
    const manifest = {
        "mfe": "http://localhost:3000/remoteEntry.json"
    }
    initFederation(manifest)
        .then(({load, importMap}) => Promise.all([
            load('mfe1', './Component'),
            load('mfe2', './Component'),
        ]))
        .catch(console.error);
})();

usage using custom events:

loader.ts

import { initFederation } from '@aukevanoost/vanilla-native-federation-runtime';

(() => {
    initFederation("http://localhost:3000/native-federation")
        .then(({load, importMap}) => {
            console.log("importMap: ", importMap);
            window.dispatchEvent(new CustomEvent("mfe-loader-available", {detail: {load}}));
        })
})();

your-shell.html

<script type="module" src="loader.js"></script>

<script>
    window.addEventListener('mfe-loader-available', (e) => {
        Promise.all([
            e.detail.load('mfe1', './Component'),
            e.detail.load('mfe2', './Component'),
        ]).catch(console.error);
    }, {once: true});
</script>    

Usage with discovery:

loader.ts

(() => {
    const myDiscoveryUrl = "http://localhost:3000";
    initFederationWithDiscovery(myDiscoveryUrl)
        .then(({load, discovery, importMap}) => {
            console.log("discovery: ", discovery);
            console.log("importMap: ", importMap);
            window.dispatchEvent(new CustomEvent("mfe-loader-available", {detail: {load}}));
        })
})();

your-shell.html

<script type="module" src="loader.js"></script>

<script>
    window.addEventListener('mfe-loader-available', (e) => {
        Promise.all([
            e.detail.load('mfe1', './Component'),
            e.detail.load('mfe2', './Component'),
        ]).catch(console.error);
    }, {once: true});
</script>