# wujie-instanceof-plugin

**Repository Path**: li-hanming/wujie-instanceof-plugin

## Basic Information

- **Project Name**: wujie-instanceof-plugin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-28
- **Last Updated**: 2025-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wujie-instanceof-plugin

一个用于解决 wujie 微前端框架中，Element UI 和 T Design 等组件库在火狐（Firefox）浏览器环境下 Popper 弹出框显示异常问题的插件。

## 作用

解决 `element-ui` 和 `t-design` 在 `wujie` 微前端和火狐浏览器环境下，`popper` 弹出框显示不正确的问题。

## 安装

```bash
# 使用 npm
npm i wujie-instanceof-plugin

# 或使用 pnpm
pnpm add wujie-instanceof-plugin
```

## 本质

`wujie` 使用 `iframe` 进行 JS 沙箱隔离，用 `shadow dom` 进行 HTML 和 CSS 的沙箱隔离，这导致两者之间被割裂，部分 API 在 `wujie` 框架中并未得到完全兼容。

此问题的根本原因是 UI 框架使用了 `popperjs` 来处理弹出框，而 `popperjs` 内部存在大量判断输入 DOM 节点类型的代码（例如 `element instanceof HTMLElement`）。`wujie` 框架虽然做了一定的兼容，但由于火狐浏览器的内核较为特殊，此类问题在 Chrome 浏览器中通常不会出现。

本插件的原理是通过代理劫持 `instanceof` 操作符，来修复上述兼容性问题。

## 使用方法

直接将插件添加到 wujie 的插件列表即可。

```javascript
import wujieInstance from "wujie-instanceof-plugin";

// 在 wujie 配置中
{
  plugin: [wujieInstance(?pluginConfig)]
}
```

## 配置项 (pluginConfig)

插件接受一个可选的配置对象 `pluginConfig`，以下是其接口定义和默认值：

```typescript
interface pluginConfig {
  // 需要代理的 API 列表。如果仅需解决火狐浏览器的问题，无需配置此项
  patchList?: Array<string>;
  // 是否仅将此插件应用于火狐浏览器环境
  onlyUseInFireFox?: boolean;
}
```

**默认配置如下：**

```javascript
config: pluginConfig = {
  patchList: ["HTMLElement"],
  onlyUseInFireFox: true,
}
```