npm package: @flow48/mfe-loader
Description: Helper library for loading micro frontends in Flow48 applications
Author: UtopiaEH
Latest version: 0.3.4

# @flow48/mfe-loader

MFELoader is a lightweight React component designed to load micro frontends (MFEs) dynamically inside a host React
application using Qiankun. It simplifies mounting, unmounting, and prop passing, allowing easy integration of micro
frontends.

---

## Features

```
• Dynamically load micro frontends based on app name and entry.
• Pass props from the host application to the micro frontend.
• Automatic mounting and unmounting.
• Supports multiple independent instances of the same micro frontend.
• Type-safe integration for React + TypeScript.
```

---

### Usage

1. Basic usage

```tsx
import { MFELoader } from 'mfe-loader';

export const MFEDmsLoaderExample = () => {
  return (
    <MFELoader
      app="dms"
      name="MFEDmsLoaderTest1"
      props={{
        initialPath: '/account-documents',
        testProp: 'Test Value',
      }}
    />
  );
};
```

```
• app: The unique name of the micro frontend you want to load.
• name: A unique identifier for this instance (used internally by Qiankun).
• props: An object with props to pass to the micro frontend.
```

---

2. Passing props to specific components

```tsx
<MFELoader
  app="dms"
  name="MFEDmsLoaderTest1"
  props={{
    initialPath: '/account-loan-documents',
    sfWidgetProps: {
      userId: '12345',
      theme: 'dark',
    },
  }}
/>
```

Inside the sub-app, the sfWidgetProps can be forwarded to a specific component:

```tsx
<Route
  path="/account-loan-documents"
  element={<SfWidget {...props.sfWidgetProps} />}
/>
```

---

3. Multiple instances

Render multiple instances of the same micro frontend by providing a unique name:

```tsx
<MFELoader app="dms" name="MFE1" props={{initialPath: '/doc1'}} />
<MFELoader app="dms" name="MFE2" props={{initialPath: '/doc2'}} />
```

Each instance maintains its own state and container.

---

Notes

```
• Ensure the sub-app implements Qiankun lifecycle methods (bootstrap, mount, unmount) and accepts props.
• Avoid calling render() inside update() in the sub-app to prevent overwriting the host app.
• For dynamic prop updates, use state management or context inside the sub-app.
```

# Helper

---

## Installation

Make sure your project uses the correct npm registry for the Flow48 organization:

Create a file .npmrc

```ini
@flow48 : registry=https://registry.npmjs.org/

```

Then install the package via npm or yarn:

## Publishing

### Prerequisites

- You must have access to the `@flow48` npm organization
- You must be logged in to npm:

```bash
npm whoami        # check if already logged in
npm login         # log in if not
```

### Workflow: Feature Branch → PR → Publish

#### Step 1 — Do your work and bump the version on the feature branch

```bash
git checkout -b FLW-123-my-feature

# ... make your changes ...

# Bump version in package.json as part of the same branch
# Pick one based on what changed:
npm version patch   # 0.3.3 → 0.3.4  (bug fixes, dependency updates)
npm version minor   # 0.3.3 → 0.4.0  (new features, backwards compatible)
npm version major   # 0.3.3 → 1.0.0  (breaking changes)

git push origin FLW-123-my-feature
```

#### Step 2 — Open a PR and merge to master

Create a PR on GitHub, get it reviewed, and merge it.

#### Step 3 — Pull master and publish

```bash
git checkout master
git pull origin master

# This runs yarn build:prod automatically, then publishes
npm publish --access public
```

> The `prepublishOnly` hook in `package.json` runs `yarn build:prod` automatically before every publish — **you never need to build manually**.

#### Step 4 — Verify

```bash
npm view @flow48/mfe-loader version   # should return the new version
```

## Run in development mode with watch

1. Create a symlink to use the local version of the package in another project

```bash
# In the mfe-loader project root
yarn link
```

2. Link the package in the host project

```bash
# In the host project root
yarn link @flow48/mfe-loader
```

3. Start the build in watch mode

```bash
yarn build:dev --watch
```

Now any changes made to the mfe-loader package will be reflected in the host project in real-time.