fix: 修复defer脚本无法关闭fiber模式 (#166)

close #166
Tencent · Sep 22, 2022 · ef58f48 · ef58f48
1 parent 5c20d56
commit ef58f48
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 });