@saco/qiankun

🤔 Motivation

In the micro frontend framework, each project built from scratch, such as the main application, requires packaging or copying the previously packaged code every time, resulting in repetitive tasks for each project setup. Therefore, there is a need for a dependency library that can quickly set up a project and encapsulate the code for both the main and sub-applications, allowing developers to focus solely on the business logic.

📦 Install

$ npm install @saco/qiankun -S

📖 Documentation

The current library provides the following functions：

import qiankun, { mount, listenMsg, sendMsg, unmount } from '@saco/qiankun'

That is, the method of deconstruction is also present in the complete export，For example qiankun.mount === mount

✨ Function Description

① mount： Application Mount

unmount(options)

options：The application mount function is used to activate an application with specific configuration options. You need to provide the following information for the configuration options

1. name: Application Name
2. entry：Application Address
3. activeRule：Activation Path - If it does not exist, it will be automatically generated based on the 'name'.
4. container：The DOM element name for application mounting, it will be automatically generated based on the 'name'.
5. store：Status Repository - This method is a function that takes 'name' as a parameter (Explanation: In order to obtain the latest status upon each reactivation, rather than old status values, and also to distinguish between different applications by passing different states). --- (Certainly, you can also pass an object directly. However, if you are considering real-time functionality, it is not recommended. )
6. actions：Message Repository - This method is a function that takes 'name' as a parameter (Explanation: In order to distinguish between different applications and set different operations for each). --- (Certainly, you can also pass an object directly. However, if you are considering real-time functionality, it is not recommended. )
7. ...：You can also add other items to pass to the child application.

② listenMsg： Message Receiver

listenMsg(appName, callBack)

appName：is the name of the application that sends messages to the current application, corresponding to the 'name' configuration option passed in during the 'mount' operation

callBack: The callback function to be executed when a message is received. The function will take one parameter, which is the content of the received message

③ sendMsg： Message Sender

sendMsg(appName, data)

appName：The name of the application to which you need to send messages, corresponding to the 'name' configuration option passed during the 'mount' operation.

data: Message content (i.e., the parameter in the callBack of listenMsg).

④ unmount： Application Uninstallation

unmount(appName)

appName：It refers to the name of the application that needs to be uninstalled, corresponding to the 'name' configuration option passed during the mount operation. Note: This function can be an array.

✨ Application Access Case（TypeScript）

• ⚡ base-app

main.ts

import { mount } from '@saco/qiankun'
mount({
  name: 'vue2',
  entry: '//localhost:7002',
  container: '#vue2',
  activeRule: '/vue2',
  store: {
    token: '123456789'
  },
  actions: (name) => {
    return {
      closeTab: () => {
        console.log('name', name)
      }
    }
  },
  loading: (type, flag, err) => {

  },
  // Custom Content
  components: `custom option to vue2`,
})

• ⚡ webpack-app

main.ts

import qiankunWebpack from '@saco/qiankun/webpack'
import type { QiankunProps } from '@saco/qiankun'
type MyMicroProps = QiankunProps<{
  token: string
}, {
  closeTab: Function
}, {
  components: any[]
}>

// Child Application Loading Logic
const render = (props?: MyMicroProps) => {
  // ...
}

export async function bootstrap(){}
export async function mount(props: MyMicroProps){
  render(props)
}
export async function unmount() {}

qiankunWebpack(render) // Application Autostart when not using Micro-Frontends

webpack.config.js

const { name } = require('./package.json')
const qiankunWebpack = require('@saco/qiankun/webpack.plugin')
module.exports = qiankunWebpack({ // plugin-config
  name,
  type: 'webpack', // or vue-cli  
}, { // webpack-config
  // ...
})

• ⚡ vite-app

main.ts

import qiankunVite from '@saco/qiankun/vite'
import type { QiankunProps } from '@saco/qiankun'
type MyMicroProps = QiankunProps<{
  token: string
}, {
  closeTab: Function
}, {
  components: any[]
}>

// Child Application Loading Logic
const render = (props?: MyMicroProps) => {
  // ...
}

qiankunVite({
  mount: (props: MyMicroProps) => {
    render(props)
  },
  bootstrap: () => {},
  update: (props: MyMicroProps) => {},
  unmount: (props: MyMicroProps) => {},
  single: () => { // Application Autostart when not using Micro-Frontends
    render({} as MyMicroProps)
  }
})

vite.config.ts

import { name } from './package.json'
import qiankunVite from '@saco/qiankun/vite.plugin'
// The `qiankunVite` function has encapsulated `defineConfig`, and you can pass it as the second parameter.
export default qiankunVite({ // plugin-config
  name,
  useDevMode: true,
  port: 8000 // The port is set by yourself, and the current one is just for demonstration,
             // When you pass this item, it will override the port in the vite-config's server.
}, { // vite-config
  // ...
})
// Certainly, you can also use functional configuration.
export default qiankunVite({ // plugin-config
    name,
    useDevMode: true,
    port: 8000
}, (options) => { // vite-config 
  console.log('----', options)
  return options
})

💪 Compatibility

Browser Support Status：Modern Browsers

If you indeed need to support outdated browsers such as IE11 and below, you can follow the guidelines below to add polyfills to your project：The following steps are aimed at the host application!

Install the corresponding dependencies.

$ npm i custom-event-polyfill whatwg-fetch -S

Import in the entry file.

import 'whatwg-fetch'
import 'custom-event-polyfill'