@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.

• 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.

DEMO

• react-container-app
• react-sub-app

License

MIT License