Aluka-w / ionia

🌈 The rapid development framework for Micro Frontends ｜微前端快速开发框架

Ionia（艾欧尼亚）

The rapid development framework for Micro Frontends

English | 简体中文

Features

• Global state synchronization
• Common component library
• Internationalization
• API Mock
• Authority control

Usage

$ git clone [e-mail]:ioniajs/ionia.git --depth=1 && cd ionia

$ yarn && yarn start

Architecture

Master application

import { isDev, logger, MasterApplication } from '@ionia/libs';
import { IoniaApp } from '@ionia/libs/es/core/master-application';
import * as React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './i18n';

if (isDev) {
	require('../mocks').default.start();
}

const apps: IoniaApp<{}>[] = [
	{
		name: 'dashboard',
		entry: '//localhost:7001',
		activeRule: '/dashboard',
	},
	{
		name: 'auth',
		entry: '//localhost:7002',
		activeRule: '/auth',
		hideInMenu: true,
	},
	{
		name: 'cms',
		entry: '//localhost:7003',
		activeRule: '/cms',
	},
];

const lifeCycles = {
	beforeLoad: [
		(app: any): any => {
			logger.debug('[LifeCycle] before load %c%s', 'color: green;', app.name);
		},
	],
	beforeMount: [
		(app: any): any => {
			logger.debug('[LifeCycle] before mount %c%s', 'color: green;', app.name);
		},
	],
	afterUnmount: [
		(app: any): any => {
			logger.debug('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
		},
	],
};

const initGlobalState = {
	title: 'Ionia',
};

new MasterApplication(
	(
		<Router>
			<App />
		</Router>
	),
	apps,
	'/dashboard',
	initGlobalState,
	lifeCycles
).start();

Slave application

import { Application, isSlave } from '@ionia/libs';
import * as React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const app = new Application(
	(
		<Router basename={isSlave ? '/dashboard' : '/'}>
			<App />
		</Router>
	)
);

app.start();

export async function bootstrap() {
	await app.bootstrap();
}

export async function mount(props: any) {
	await app.mount(props);
}

export async function unmount(props: any) {
	await app.unmount(props);
}

Support

We sincerely invite you to participate in the ecological construction of Ionia (e.g. star)