Components

The “Components” section within the AppShell documentation focuses on three pivotal components: AppRenderer, PluginRenderer and ModalRenderer. These components are instrumental in rendering and managing the lifecycle of “fullpage” and “plugin” applications respectively, within the larger application ecosystem. Understanding their usage and underlying logic is essential for integrating micro frontends with the AppShell.

AppRenderer

Overview

AppRenderer is designed for rendering “fullpage” micro frontends managed by the AppShell. It dynamically inserts the micro frontend’s iframe into the DOM based on the provided application ID, facilitating seamless integration within the application’s layout.

Usage

To use AppRenderer, you need to pass it the unique identifier (id) of the micro frontend you wish to render. The component then retrieves the corresponding iframe from the AppShell context and inserts it into the designated container.

import { AppRenderer } from '@akinon/app-shell';
 
const FullPageAppContainer = () => {
  return (
    <div className="fullpage-container">
      <AppRenderer id={1} /> {/* Replace 1 with the actual app ID */}
    </div>
  );
};
 
export default FullPageAppContainer;

AppRenderer Props

Logic Explained

When AppRenderer mounts, it performs the following steps:

• Retrieve Iframe: It accesses the AppShell context to get the iframe reference corresponding to the provided id.
• Insert Iframe: The iframe is then dynamically inserted into the DOM, specifically within a div container rendered by AppRenderer. The iframe styles are adjusted to ensure it occupies the full container space, providing a seamless integration.

PluginRenderer

Overview

PluginRenderer is utilized for rendering plugin-type micro frontends. These plugins are designed to be embedded within specific parts of the application, enhancing the main application’s functionality without taking over the entire page.

Usage

PluginRenderer requires the placeholderId, which corresponds to the DOM element where the plugin should be rendered. This approach allows for a more flexible and dynamic integration of plugins within the application.

import { PluginRenderer } from '@akinon/app-shell';
 
const PluginAppContainer = () => {
  return (
    <div className="plugin-container">
      <PluginRenderer placeholderId="plugin-placeholder" />
    </div>
  );
};
 
export default PluginAppContainer;

PluginRenderer Props

Type

/**
 * Additional parameters to be passed to the plugin micro app.
 */
interface ApplicationParams {
  [key: string]: string | number | boolean | string[] | number[];
}

Logic Explained

Upon mounting, PluginRenderer executes the following logic:

• Identify Plugin: It uses the provided placeholderId to identify the correct plugin application from the AppShell context, based on the configurations stored there.
• Embed Iframe: The iframe corresponding to the identified plugin application is then embedded within the placeholder div. Similar to AppRenderer, iframe styles are adjusted to ensure it fits well within the designated area, ensuring a consistent and integrated look and feel.

ModalRenderer

Overview

ModalRenderer renders a fullpage application iframe in a modal managed by the AppShell. This component retrieves an iframe based on the provided uuid and inserts it into the DOM. The iframe is styled and made visible within a designated div container.

Usage

ModalRenderer requires the uuid for the application iframe to render. Also it requires the path to render content within the modal.

import { ModalRenderer } from '@akinon/app-shell';
 
const ModalAppContainer = () => {
  return (
    <div className="modal-container">
      <ModalRenderer
        uuid="e9cfe724-304f-4d69-872d-7a430e95f477"
        path="/path/to/fullpage-app"
      />
    </div>
  );
};
 
export default ModalAppContainer;

An example implementation with rich modal integration is here.

ModalRenderer Props