wujie-instanceof-plugin

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

作用

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

安装

# 使用 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 的插件列表即可。

import wujieInstance from "wujie-instanceof-plugin";

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

配置项 (pluginConfig)

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

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

默认配置如下：

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