DOCSEARCHbyAlgolia
Submit Docs

micro-lc Documentation

website·Indexed 32 days ago

https://micro-lc.io

A framework for composing frontend applications and micro-frontends. Features include routing, reactive communication, layout management, and support for web components. Documentation covers versions 1.x, 2.x, and 3.x.x, including API references for the composer and application state, as well as guides on styling, import maps, and backend middleware configuration.

Tokens
30.7K
Snippets
159
Records
226
Agent score
59%

What's inside micro-lc

  1. Overview of the micro-lc API

    In version 2.x, micro-lc injects a core API into every element that composes the layout and as a property of all applications rendered as content. This API provides the primary mechanism for communication and state management across the micro-frontend architecture, divided into four main functional areas: Application State (consuming content state), Reactive Communication (manipulating reactive state objects), Routing (navigation facilities), and Extensions (built-in and custom API additions).

  2. Overview of micro-lc micro-frontend orchestrator

    micro-lc is an open-source micro-frontend orchestrator used to build flexible, multi-tenant web applications. It provides a core interface that loads, embeds, and orchestrates individual frontend applications at runtime. It is designed to ensure a cohesive user interface (styling, theming, branding) and user experience (state sharing, routing, error handling) across independent micro-frontends. Key benefits include the ability to use different frameworks on the same page, independent deployment of applications, and communication via standard APIs and event-driven patterns.

  3. Overview of micro-lc micro frontend orchestrator

    micro-lc is an open-source micro frontend orchestrator designed to decouple frontend applications into reusable, modular components. It provides a consistent development experience by managing the orchestration of micro frontends through a combination of a frontend container and a backend configuration layer. Unlike build-time integration, micro-lc uses runtime integration, meaning changes to configurations can be applied by reloading the page without needing to re-release all individual components.

  4. Manage shared state with micro-lc Reactive Communication API

    micro-lc maintains a global state object that can be updated key-by-key at the first level. Clients are responsible for merging any data that goes deeper than the first level. The API uses rxjs@^7 to dispatch changes. If you encounter interoperability issues with other reactive libraries (e.g., Bacon.js, Kefir, xstream) or older versions of RxJS (^6), you should polyfill Symbol.observable.

    <!-- Polyfill for Symbol.observable interoperability --> <script src="https://cdn.jsdelivr.net/npm/@micro-lc/orchestrator/dist/polyfills/symbol-observable.js"></script>

  5. Use the micro-lc API for cross-application communication

    The micro-lc API acts as a bridge between the layout and content applications, as well as between different content applications. It is designed to replace global state patterns with event-driven communication. The API is injected into layout elements and provided as a property to content applications. It can be used to share styles, state, language, functional utilities, configuration, and routing. The API is extensible and provides a reactive Pub/Sub interface for triggering component refreshes.

  6. Understand how micro-lc composition transforms configuration to DOM

    micro-lc allows developers to dynamically define the shape of a page by transforming strings or serialization markup (such as JSON or YAML) into a valid, appendable DOM. This is used for both layout and content when using the compose integration strategy.

    Technically, this is achieved by combining the lit-html library with a lexer and a non-eval interpolation library. Crucially, micro-lc avoids unsafe runtime evaluation (like eval or Function), making it compatible with strict Content-Security-Policy (CSP) settings.

  7. Use the Composer API to dynamically mount HTML subtrees

    The composerApi is available to any HTML element mounted in micro-lc via layout, mount points, or composable applications. It provides the core capabilities for mounting HTML subtrees and managing dynamic configurations through three primary methods: premount, createComposerContext, and render.

  8. Fetch micro-lc runtime configuration

    To compose the application, micro-lc requires a JSON configuration at runtime. The front-end container performs a GET request to the endpoint /api/v1/microlc/configuration to retrieve this object.

  9. Understand the impact of Shadow DOM on styling

    In micro-lc, the behavior of styles depends on whether Shadow DOM is enabled:

    • Shadow DOM Enabled: The application layout is placed inside a shadow root, while the content is not. Styles are encapsulated; layout styles cannot affect content styles, and global document styles (e.g., <style> tags in the <head>) do not influence elements inside the shadow root.
    • Shadow DOM Disabled: Both layout and content are placed in the regular DOM and are affected by the same global styling rules.

  10. Understand the micro-lc architecture

    micro-lc is an open-source framework for building multi-tenant frontend applications using a Micro Frontend architecture. It consists of three primary components:

    1. fe-container: A lightweight launcher (React/TypeScript) that orchestrates plugins and provides core functionalities.
    2. be-config: A backend configuration provider that serves the runtime configuration to the fe-container.
    3. Plugins: Independent, self-contained micro-frontends written in any framework (Angular, React, Vue, Vanilla JS) that compose the final application.

  11. Configure the micro-lc layout and content areas

    micro-lc divides the DOM into two primary sections: the layout (which remains static) and the content (where microfrontends are dynamically mounted and unmounted based on the page URL). The configuration can be provided in JSON or YAML format, though JSON is natively interpreted by the browser and avoids the ~15kB overhead required for YAML parsing.
    {
  "version": 2,
  "applications": {
    "home": { ... }
  },
  "layout": {
    "sources": [],
    "content": { ... }
  }
}

  12. Inject Ant Design themes using mlc-antd-theme-manager

    The mlc-antd-theme-manager is a logical web component that calculates and injects CSS variables required by the Ant Design Dynamic Theme system. It derives these variables from base colors (primary, info, success, processing, error, and warning) and injects them globally via the micro-lc API setStyle method.

    Constraint: This component only works with components that use the Ant Design Dynamic Theme system.