fix: 修复appendChild执行顺序的问题 (#470)

close #465
Tencent · Mar 24, 2023 · af054da · af054da
1 parent a1a4b4a
commit af054da
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 22 deletions.
diff --git a/packages/wujie-core/src/effect.ts b/packages/wujie-core/src/effect.ts
@@ -161,6 +161,7 @@ function patchStylesheetElement(
   });
 }
 
+let dynamicScriptExecStack = Promise.resolve();
 function rewriteAppendOrInsertChild(opts: {
   rawDOMAppendOrInsertBefore: <T extends Node>(newChild: T, refChild?: Node | null) => T;
   wujieId: string;
@@ -274,27 +275,29 @@ function rewriteAppendOrInsertChild(opts: {
               crossoriginType: crossOrigin || "",
               ignore: isMatchUrl(src, getEffectLoaders("jsIgnores", plugins)),
             } as ScriptObject;
-            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(() =>
-                    fiber
-                      ? requestIdleCallback(() => {
-                          execScript({ ...scriptResult, content });
-                        })
-                      : execScript({ ...scriptResult, content })
-                  );
-                  // 同步脚本如果都执行完了，需要手动触发执行
-                  if (!execQueueLength) sandbox.execQueue.shift()();
-                },
-                () => {
-                  manualInvokeElementEvent(element, "error");
-                  element = null;
-                }
-              )
-            );
+            getExternalScripts([scriptOptions], fetch, lifecycles.loadError, fiber).forEach((scriptResult) => {
+              dynamicScriptExecStack = dynamicScriptExecStack.then(() =>
+                scriptResult.contentPromise.then(
+                  (content) => {
+                    if (sandbox.execQueue === null) return warn(WUJIE_TIPS_REPEAT_RENDER);
+                    const execQueueLength = sandbox.execQueue?.length;
+                    sandbox.execQueue.push(() =>
+                      fiber
+                        ? requestIdleCallback(() => {
+                            execScript({ ...scriptResult, content });
+                          })
+                        : execScript({ ...scriptResult, content })
+                    );
+                    // 同步脚本如果都执行完了，需要手动触发执行
+                    if (!execQueueLength) sandbox.execQueue.shift()();
+                  },
+                  () => {
+                    manualInvokeElementEvent(element, "error");
+                    element = null;
+                  }
+                )
+              );
+            });
           } else {
             const execQueueLength = sandbox.execQueue?.length;
             sandbox.execQueue.push(() =>

diff --git a/packages/wujie-core/src/utils.ts b/packages/wujie-core/src/utils.ts
@@ -290,9 +290,10 @@ export function isScriptElement(element: HTMLElement): boolean {
   return element.tagName?.toUpperCase() === "SCRIPT";
 }
 
+let count = 1;
 export function setTagToScript(element: HTMLScriptElement, tag?: string): void {
   if (isScriptElement(element)) {
-    const scriptTag = tag || `${new Date().valueOf()}`;
+    const scriptTag = tag || String(count++);
     element.setAttribute(WUJIE_SCRIPT_ID, scriptTag);
   }
 }