🖼 microfrontend-loader

info

Available since v2.2.0

Logical web component that encapsulates the ability to load a standalone microfrontend.

Microfrontends loaded via microfrontend-loader are not controlled by micro-lc in terms of routing.

Usage

caution

This component is intended to be used inside micro-lc either in the layout composable section or in a compose microfrontend, since it makes use of micro-lc API and the compose API.

You can use it standalone, but you will have to manually provide a matching API with the property microlcApi.

The component can be sourced from jsDelivr CDN or from mia CDN

To use the component in micro-lc, declare it as part of a compose application including its properties and attributes.

my-compose-application.config.json

{
  "sources": "https://cdn.jsdelivr.net/npm/@micro-lc/orchestrator@latest/dist/microfrontend-loader.js",
  "content": [
    {
      "tag": "microfrontend-loader",
      "properties": {
        // See properties & attributes table below
        "application": {
          "integrationMode": "parcel",
          "entry": "/my-application/index.html"
        }
      },
    },
    {
      "tag": "microfrontend-loader",
      "booleanAttributes": ["disable-shadow-dom"],
      "properties": {
        // See properties & attributes table below
        "application": {
          "integrationMode": "compose",
          "config": {
            "content": "Hello!"
          }
        }
      }
    }
  ]
}

Properties & attributes

Property	Attribute	Type	Default	Description
application	-	RoutelessApplication	-	The microfrontend to be loaded configuration
-	disable-shadow-dom	boolean	false	Whether <microfrontend-loader></microfrontend-loader> should mount its application in Shadow DOM.
-	disable-styling	boolean	false	Disable <microfrontend-loader></microfrontend-loader> preset styling.

RoutelessApplication

A RoutelessApplication is any Application without the route property since any microfrontend, loaded by another microfrontend controlled by micro-lc, does not acquire orchestration in terms of router.

Shared

Property	Type	Default	Description
integrationMode	iframe | compose | parcel	Required	see integrationMode
...			extra properties related to the choice of an integrationMode

when "integrationMode": "iframe"

Property	Type	Default	Description
src	String	-	the iframe source
srcdoc	String	-	alternative to src, the HTML injected into the iframe
attributes	Record<string, string>	-	attributes to provide to the iframe tag

when "integrationMode": "compose"

Property	Type	Default	Description
config	PluginConfiguration	-	the compose configuration

when "integrationMode": "parcel"

Property	Type	Default	Description
entry	Entry	-	the entry html or resources of the parcel application
properties	Properties	-	must be serializable, a dictionary of properties to inject on application mount