npm package: @saco/qiankun
Description: An integrated encapsulation based on qiankun@2
Author: seawavew
Latest version: 2.0.11

<p align="center">
  <a href="https://www.npmjs.com/search?q=%40saco">
    <img src="https://gw.alipayobjects.com/zos/bmw-prod/8a74c1d3-16f3-4719-be63-15e467a68a24/km0cv8vn_w500_h500.png" alt="qiankun" width="180" />
  </a>
</p>

## 🤔 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

```shell
$ npm install @saco/qiankun -S
```

## 📖 Documentation

The current library provides the following functions：
```javaScript
import sacoQiankun from '@saco/qiankun'
const qiankun = new qiankun(sacoQiankun)
```
> `options`：The plugin is used for specific configuration options of instantiation. You can provide the following information for the configuration options as needed.
1. `addGlobalUncaughtErrorHandler`: Global uncaught exception handler.
2. `setDefaultMountApp`: The default micro-app that the main application enters after startup.


### ✨ Function Description
① `mount`： Application Mount
```javascript
qiankun.mount(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
```javascript
qiankun.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
```javascript
qiankun.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
```javascript
qiankun.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**
<br/>
If you need to run on a lower version browser, click here to view the <a href="https://qiankun.umijs.org/faq#how-to-polyfill-ie">configuration</a>.
<br/>

`main.js/ts`
```javaScript
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**
<br/>
click here to view the <a href="https://qiankun.umijs.org/guide/tutorial#micro-app">configuration</a>.
<br/>
If using typescript, please refer to the following statement
<br/>

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

- ⚡ **vite-app**
<br/>
Recommend using the <a href="https://qiankun.umijs.org/guide/tutorial#micro-app">vite-plugin-qiankun</a> plugin for Vite applications.
<br/>
It should be noted that when the sub application cannot access the resources, please add the following code in the Vite configuration.
<br/>
If you need to use a local area network, you can search for how to use Node.js to obtain an IP address
<br/>
Type declaration refers to the webpack section.
<br/>

`vite.config.js/ts`
```javaScript
{
  server: {
    headers: {
      ['Access-Control-Allow-Origin']: '*'
    },
    origin: `http://localhost:${port}`
  }
}
```
It is recommended to replace `localhost` with the following methods:
```javaScript
import os from 'node:os'
const interfaces = os.networkInterfaces()
let ipAdr
for (const interface in interfaces) {
  for (const config of interfaces[interface]) {
    if (config.family === 'IPv4' && !config.internal) {
      ipAdr = config.address
    }
  }
}
```