feat: 插件添加appendOrInsertElementHook钩子 (#217)

Tencent · Oct 13, 2022 · fbffe68 · fbffe68
1 parent bd9b334
commit fbffe68
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 3 deletions.
diff --git a/docs/api/preloadApp.md b/docs/api/preloadApp.md
@@ -234,6 +234,8 @@ interface plugin {
   documentAddEventListenerHook?: eventListenerHook;
   /** 子应用 document removeEventListener 钩子回调 */
   documentRemoveEventListenerHook?: eventListenerHook;
+  /** 子应用 向body、head插入元素后执行的钩子回调 */
+  appendOrInsertElementHook?: <T extends Node>(element: T, iframeWindow: Window) => void;
   /** 用户自定义覆盖子应用 window 属性 */
   windowPropertyOverride?: (iframeWindow: Window) => void;
   /** 用户自定义覆盖子应用 document 属性 */

diff --git a/docs/api/startApp.md b/docs/api/startApp.md
@@ -263,6 +263,8 @@ interface plugin {
   documentAddEventListenerHook?: eventListenerHook;
   /** 子应用 document removeEventListener 钩子回调 */
   documentRemoveEventListenerHook?: eventListenerHook;
+  /** 子应用 向body、head插入元素后执行的钩子回调 */
+  appendOrInsertElementHook?: <T extends Node>(element: T, iframeWindow: Window) => void;
   /** 用户自定义覆盖子应用 window 属性 */
   windowPropertyOverride?: (iframeWindow: Window) => void;
   /** 用户自定义覆盖子应用 document 属性 */

diff --git a/docs/guide/plugin.md b/docs/guide/plugin.md
@@ -304,6 +304,22 @@ const plugins = [
   },
 ];
 ```
+## appendOrInsertElementHook
+
+子应用往`body`、`head`插入元素后执行的回调函数
+
+- **示例**
+
+```javascript
+const plugins = [
+  {
+    // element 为插入的元素，window 为子应用的 window
+    appendOrInsertElementHook(element, iframeWindow) {
+      console.log(element, iframeWindow)
+    }
+  },
+];
+```
 
 <!--
 ## windowPropertyOverride

diff --git a/packages/wujie-core/src/effect.ts b/packages/wujie-core/src/effect.ts
@@ -8,7 +8,7 @@ import {
   rawAddEventListener,
   rawRemoveEventListener,
 } from "./common";
-import { isFunction, isHijackingTag, requestIdleCallback, error, warn, nextTick, getCurUrl } from "./utils";
+import { isFunction, isHijackingTag, requestIdleCallback, error, warn, nextTick, getCurUrl, execHooks } from "./utils";
 import { insertScriptToIframe, patchElementEffect } from "./iframe";
 import Wujie from "./sandbox";
 import { getPatchStyleElements } from "./shadow";
@@ -153,6 +153,7 @@ function rewriteAppendOrInsertChild(opts: {
     if (!isHijackingTag(element.tagName) || !wujieId) {
       const res = rawDOMAppendOrInsertBefore.call(this, element, refChild) as T;
       patchElementEffect(element, iframe.contentWindow);
+      execHooks(plugins, "appendOrInsertElementHook", element, iframe.contentWindow);
       return res;
     }
 
@@ -166,7 +167,11 @@ function rewriteAppendOrInsertChild(opts: {
           const { href, rel, type } = element as HTMLLinkElement;
           const styleFlag = rel === "stylesheet" || type === "text/css" || href.endsWith(".css");
           // 非 stylesheet 不做处理
-          if (!styleFlag) return rawDOMAppendOrInsertBefore.call(this, element, refChild);
+          if (!styleFlag) {
+            const res = rawDOMAppendOrInsertBefore.call(this, element, refChild);
+            execHooks(plugins, "appendOrInsertElementHook", element, iframe.contentWindow);
+            return res;
+          }
           // 排除css
           if (href && !isMatchUrl(href, getEffectLoaders("cssExcludes", plugins))) {
             getExternalStyleSheets(
@@ -218,6 +223,7 @@ function rewriteAppendOrInsertChild(opts: {
           // 处理样式补丁
           patchStylesheetElement(stylesheetElement, cssLoader, sandbox, curUrl);
           handleStylesheetElementPatch(stylesheetElement, sandbox);
+          execHooks(plugins, "appendOrInsertElementHook", element, iframe.contentWindow);
           return res;
         }
         case "SCRIPT": {
@@ -294,6 +300,7 @@ function rewriteAppendOrInsertChild(opts: {
           } catch (e) {
             error(e);
           }
+          execHooks(plugins, "appendOrInsertElementHook", element, iframe.contentWindow);
           return res;
         }
         default:

diff --git a/packages/wujie-core/src/iframe.ts b/packages/wujie-core/src/iframe.ts
@@ -697,7 +697,8 @@ export function insertScriptToIframe(scriptResult: ScriptObject | ScriptObjectLo
   content && onload?.();
   // 调用回调
   callback?.(iframeWindow);
-
+  // 执行 hooks
+  execHooks(plugins, "appendOrInsertElementHook", scriptElement, iframeWindow);
   // async脚本不在执行队列，无需next操作
   !async && container.appendChild(nextScriptElement);
 }

diff --git a/packages/wujie-core/src/index.ts b/packages/wujie-core/src/index.ts
@@ -60,6 +60,8 @@ export interface plugin {
   documentAddEventListenerHook?: eventListenerHook;
   /** 子应用 document removeEventListener 钩子回调 */
   documentRemoveEventListenerHook?: eventListenerHook;
+  /** 子应用 向body、head插入元素后执行的钩子回调 */
+  appendOrInsertElementHook?: <T extends Node>(element: T, iframeWindow: Window) => void;
   /** 用户自定义覆盖子应用 window 属性 */
   windowPropertyOverride?: (iframeWindow: Window) => void;
   /** 用户自定义覆盖子应用 document 属性 */