Skip to main content
Version: 2.x

micro-lc web component

Web component​

micro-lc in itself is a web component, registered with tag micro-lc. It can be sourced from CDN, or installed as a npm package.

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CDN example</title>

  <script async type="module" src="https://cdn.jsdelivr.net/npm/@micro-lc/orchestrator@latest/dist/micro-lc.production.js"></script>
</head>
<body>
    <micro-lc></micro-lc>
</body>
</html>

Development and production mode​

micro-lc web component comes in two flavors: development and production.

Development variant is injected into the CustomElementRegistry with a larger bundle size (~700 KB) since it includes an instance of the Ajv JSON schema validator to check if configurations provided to the web components are valid. Development variant also provides feedback on errors via browser console.

To reduce the bundle size, production variant lacks all previously mentioned features and shrinks down to ~180 KB.

Properties & attributes​

PropertyAttributeTypeDefaultDescription
config-ConfigurationDefault configurationmicro-lc configuration.
configSrcconfig-srcstring-URL from which configuration can be fetched.
fallbackLanguagefallback-languagestring-Language tag used as fallback.
-disable-shadow-dombooleanfalseWhether micro-lc should be in Shadow DOM.
-root-idstring__micro_lcMount point <div> id.
-disable-stylingbooleanfalseDisable mount point preset styling.
caution

Attributes disable-shadow-dom, root-id, and disable-styling are not observed, meaning their initial value is the only one that matters and no changes are listened to.

Configuration​

Everything concerning the structure of your application – from layout to content, from general settings to global imports – is contained in micro-lc configuration.

This configuration can be directly supplied to micro-lc web component through property config, programmatically set with API method setcurrentconfig, or sourced through property configSrc (or mirrored attribute config-src) in JSON or YAML format.

tip

YAML is clearer and easier to read and write, but bring a computational and bundle size (~38 KB) overhead, since it requires an extra step to be compiled back to JSON.

For this reason, we recommend YAML for development and JSON for production. A YAML to JSON converter is available in the Playground section.

Practically speaking, micro-lc configuration is an object with the following structure (each key is explained in details below):

interface Config {
  $schema?: string 
  version?: 2
  settings?: Settings
  shared?: Shared
  importmap?: Importmap
  layout?: Layout
  applications?: Applications
}
tip

Key $schema can be used to reference micro-lc configuration JSON schema to greatly ease the writing process by constantly validating the JSON or YAML content against it.

Default configuration​

If no configuration is provided micro-lc uses the following default configuration:

micro-lc.config.yaml
version: 2

settings:
  defaultUrl: ./

layout:
  content:
    tag: slot

settings​

  • Type: Object

Global micro-lc settings.

4xx​

  • Type: Object
  • Optional

Configuration for custom error pages linked to client errors.

Example:

micro-lc.config.yaml
settings:
  4xx:
    401:
      integrationMode: parcel
      entry: https://my-static-server/custom-401-error-page.html

5xx​

  • Type: Object
  • Optional

Configuration for custom error pages linked to server errors.

Example:

micro-lc.config.yaml
settings:
  5xx:
    502:
      integrationMode: parcel
      entry: https://my-static-server/custom-502-error-page.html

composerUri​

  • Type: string
  • Optional

URI from which composer can be sourced, if a different implementation from default micro-lc one is needed.

Example:

micro-lc.config.yaml
settings:
  composerUri: https://my-static-server/my-custom-composer.js

mountPoint​

  • Type: Object
  • Optional

Custom application mount point configuration.

Example:

micro-lc.config.yaml
settings:
  mountPoint:
    tag: div
    attributes:
      id: custom-mount-point

mountPointSelector​

  • Type: string
  • Optional

Query selector to plugins mounting DOM element.

Example:

micro-lc.config.yaml
settings:
  mountPointSelector: "#custom-mount-point"

defaultUrl​

  • Type: string
  • Default: ./

Landing URL. If it does not correspond to any configured application, 404 error page will be rendered.

Example:

micro-lc.config.yaml
settings:
  defaultUrl: ./home

shared​

  • Type:
    interface Shared {
      properties?: Record<string, unknown>
    }

Properties injected by micro-lc into all registered parcels, custom error pages, and composed DOM elements.

Parcel applications and custom error pages of type parcel can access shared properties in lifecycle methods. Web components of composed applications, error pages of type compose, and constructed layout will find shared properties as interpolated properties.

Example:

micro-lc.config.yaml
shared:
  properties:
    client-key: some_client_key

importmap​

  • Type: Object

Global import map.

Example:

micro-lc.config.yaml
importmap:
  imports:
    react: https://esm.sh/react@next
    react-dom: https://esm.sh/react-dom@next
  scopes:
    https://esm.sh/react-dom@next:
      /client: https://esm.sh/react-dom@next/client

layout​

  • Type: Object
  • Default:
    layout:
      content:
        tag: slot

Application layout DOM configuration.

Example:

micro-lc.config.yaml
layout:
  content:
    - tag: div
      attributes:
        class: layout-container
        content:
          - tag: div
            attributes:
              class: side-bar
          - tag: slot

applications​

  • Type: Object

Map of mounted applications.

Example:

micro-lc.config.yaml
applications:
  home:
    integrationMode: parcel
    entry: https://my-static-server/home-parcel.html
    route: ./home