Mf-test-pkg NPM

@widget/micro-frontends-static

This is a micro-frontends common module base on Single-spa for widget2.0 to load widget sub app.

📦 Install

$ npm install @widget/micro-frontends-static

🔨 Usage

1、import at the entrance of container app

// index.tsx
import { microFrontend } from '@widget/micro-frontends-static';

microFrontend
	.registerApp({
		url: 'http://localhost:5001/',
		name: 'sub-app',
		library: 'microFrontend',
		active: true
	})
	.launch();

2、Use components in sub-apps

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import App from './App';
import { subAppWrapper } from '@widget/micro-frontends-static';

const reactLifecycles = subAppWrapper({
	React,
	ReactDOMClient: ReactDOMClient,
	renderType: 'createRoot',
	rootComponent: App,
	domElementGetter: () => document.getElementById('react-app')!
});

export const { bootstrap, mount, unmount } = reactLifecycles;

API Reference

subAppWrapper(opts: ReactSubAppOpts)

option	desc	type
React	The main React object, which is generally either exposed onto the window or is available via `import React from 'react'`	React
ReactDOMClient	The main ReactDOMbject, which is available via `import ReactDOM from 'react-dom'.`	ReactDOMClient
rootComponent	The top level React component which will be rendered.	ReactElement
domElementGetter	A function that is given the single-spa props and returns a DOMElement.	Function

registerApps(opts: ApplicationConfig[])
option desc type
url A address of sub app string
name The name of sub app boolean
library Specify a name for the output.library of umd. boolean
active Whether the sub app should be activated. boolean
launch
navigateTo(opts: NavigationObj)
- NavigationObj (string | context | DOMEvent) — navigationObj must be one of the following types:
  - a url string.
  - a context / thisArg that has an href property; useful for calling singleSpaNavigate.call(anchorElement) with a reference to the anchor element or other context.
  - a DOMEvent object for a click event on a DOMElement that has an href attribute; ideal for the singleSpaNavigate use case.

option	desc	type
url	A address of sub app	string
name	The name of sub app	boolean
library	Specify a name for the `output.library` of `umd`.	boolean
active	Whether the sub app should be activated.	boolean

catchError|removeCatchError(handler: ErrorHandlerFn)
- ErrorHandlerFn (Function(error: Error)) — Must be a function. Will be called with an Error object that additionally has a message and appOrParcelName property.