From ef58f4855080da275e969f5043fbf0d298eb1290 Mon Sep 17 00:00:00 2001
From: yiludege <damyxu@tencent.com>
Date: Thu, 22 Sep 2022 16:15:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddefer=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC=E6=97=A0=E6=B3=95=E5=85=B3=E9=97=ADfiber=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20(#166)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #166
---
 packages/wujie-core/src/effect.ts | 14 ++++++++------
 packages/wujie-core/src/entry.ts  | 12 +++++++++---
 packages/wujie-core/src/index.ts  |  3 +++
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/wujie-core/src/effect.ts b/packages/wujie-core/src/effect.ts
index c969af804..a6ece40dc 100644
--- a/packages/wujie-core/src/effect.ts
+++ b/packages/wujie-core/src/effect.ts
@@ -148,7 +148,7 @@ function rewriteAppendOrInsertChild(opts: {
     const { rawDOMAppendOrInsertBefore, wujieId } = opts;
     const sandbox = getWujieById(wujieId);
 
-    const { styleSheetElements, replace, fetch, plugins, iframe, lifecycles, proxyLocation } = sandbox;
+    const { styleSheetElements, replace, fetch, plugins, iframe, lifecycles, proxyLocation, fiber } = sandbox;
 
     if (!isHijackingTag(element.tagName) || !wujieId) {
       const res = rawDOMAppendOrInsertBefore.call(this, element, refChild) as T;
@@ -238,13 +238,13 @@ function rewriteAppendOrInsertChild(opts: {
               crossoriginType: crossOrigin || "",
               ignore: isMatchUrl(src, getEffectLoaders("jsIgnores", plugins)),
             } as ScriptObject;
-            getExternalScripts([scriptOptions], fetch, lifecycles.loadError).forEach((scriptResult) =>
+            getExternalScripts([scriptOptions], fetch, lifecycles.loadError, fiber).forEach((scriptResult) =>
               scriptResult.contentPromise.then(
                 (content) => {
                   if (sandbox.execQueue === null) return warn(WUJIE_TIPS_REPEAT_RENDER);
                   const execQueueLength = sandbox.execQueue?.length;
                   sandbox.execQueue.push(() =>
-                    sandbox.fiber
+                    fiber
                       ? requestIdleCallback(() => {
                           execScript({ ...scriptResult, content });
                         })
@@ -262,9 +262,11 @@ function rewriteAppendOrInsertChild(opts: {
           } else {
             const execQueueLength = sandbox.execQueue?.length;
             sandbox.execQueue.push(() =>
-              requestIdleCallback(() => {
-                insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow);
-              })
+              fiber
+                ? requestIdleCallback(() => {
+                    insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow);
+                  })
+                : insertScriptToIframe({ src: null, content: text }, sandbox.iframe.contentWindow)
             );
             if (!execQueueLength) sandbox.execQueue.shift()();
           }
diff --git a/packages/wujie-core/src/entry.ts b/packages/wujie-core/src/entry.ts
index c42193cfe..a908624e1 100644
--- a/packages/wujie-core/src/entry.ts
+++ b/packages/wujie-core/src/entry.ts
@@ -26,6 +26,7 @@ interface htmlParseResult {
 
 type ImportEntryOpts = {
   fetch?: typeof window.fetch;
+  fiber?: boolean;
   plugins?: Array<plugin>;
   loadError?: loadErrorHandler;
 };
@@ -161,7 +162,8 @@ export function getExternalStyleSheets(
 export function getExternalScripts(
   scripts: ScriptObject[],
   fetch: (input: RequestInfo, init?: RequestInit) => Promise<Response> = defaultFetch,
-  loadError: loadErrorHandler
+  loadError: loadErrorHandler,
+  fiber: boolean
 ): ScriptResultList {
   // module should be requested in iframe
   return scripts.map((script) => {
@@ -170,7 +172,9 @@ export function getExternalScripts(
     // async
     if ((async || defer) && src && !module) {
       contentPromise = new Promise((resolve, reject) =>
-        requestIdleCallback(() => fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject))
+        fiber
+          ? requestIdleCallback(() => fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject))
+          : fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject)
       );
       // module || ignore
     } else if ((module && src) || ignore) {
@@ -188,6 +192,7 @@ export function getExternalScripts(
 
 export default function importHTML(url: string, opts?: ImportEntryOpts): Promise<htmlParseResult> {
   const fetch = opts.fetch ?? defaultFetch;
+  const fiber = opts.fiber ?? true;
   const { plugins, loadError } = opts;
   const htmlLoader = plugins ? compose(plugins.map((plugin) => plugin.htmlLoader)) : defaultGetTemplate;
   const jsExcludes = getEffectLoaders("jsExcludes", plugins);
@@ -217,7 +222,8 @@ export default function importHTML(url: string, opts?: ImportEntryOpts): Promise
                 .filter((script) => !script.src || !isMatchUrl(script.src, jsExcludes))
                 .map((script) => ({ ...script, ignore: script.src && isMatchUrl(script.src, jsIgnores) })),
               fetch,
-              loadError
+              loadError,
+              fiber
             ),
           getExternalStyleSheets: () =>
             getExternalStyleSheets(
diff --git a/packages/wujie-core/src/index.ts b/packages/wujie-core/src/index.ts
index 5e9201f69..22b1ac0e6 100644
--- a/packages/wujie-core/src/index.ts
+++ b/packages/wujie-core/src/index.ts
@@ -206,6 +206,7 @@ export async function startApp(startOptions: startOptions): Promise<Function | v
           fetch: fetch || window.fetch,
           plugins: sandbox.plugins,
           loadError: sandbox.lifecycles.loadError,
+          fiber,
         });
         await sandbox.start(getExternalScripts);
       }
@@ -239,6 +240,7 @@ export async function startApp(startOptions: startOptions): Promise<Function | v
     fetch: fetch || window.fetch,
     plugins: newSandbox.plugins,
     loadError: newSandbox.lifecycles.loadError,
+    fiber,
   });
 
   const processedHtml = await processCssLoader(newSandbox, template, getExternalStyleSheets);
@@ -271,6 +273,7 @@ export function preloadApp(preOptions: preOptions): void {
         fetch: fetch || window.fetch,
         plugins: sandbox.plugins,
         loadError: sandbox.lifecycles.loadError,
+        fiber,
       });
       const processedHtml = await processCssLoader(sandbox, template, getExternalStyleSheets);
       await sandbox.active({ url, props, prefix, alive, template: processedHtml, fetch, replace });