feat: make loadEntry and beforeLoad runs parallelly

.changeset/ninety-rivers-check.md

@@ -0,0 +1,6 @@
+---
+"@qiankunjs/loader": patch
+"qiankun": patch
+---
+
+feat: add transformer options for app loader

packages/loader/src/index.ts

@@ -1,13 +1,7 @@
 import type { Sandbox } from '@qiankunjs/sandbox';
 import { qiankunHeadTagName } from '@qiankunjs/sandbox';
 import type { BaseTranspilerOpts } from '@qiankunjs/shared';
-import {
-  Deferred,
-  isValidJavaScriptType,
-  moduleResolver as defaultModuleResolver,
-  QiankunError,
-  transpileAssets,
-} from '@qiankunjs/shared';
+import { Deferred, moduleResolver as defaultModuleResolver, QiankunError, transpileAssets } from '@qiankunjs/shared';
 import { TagTransformStream } from './TagTransformStream';
 import { isUrlHasOwnProtocol } from './utils';
 import WritableDOMStream from './writable-dom';
@@ -23,8 +17,8 @@ type Entry = HTMLEntry;
 //   execute: (executor?: Promise<K>) => Promise<K>;
 // };
 //
-export type ImportOpts = {
-  decoder?: (chunk: string) => string;
+export type LoaderOpts = {
+  transformer?: TransformStream<string, string>;
   nodeTransformer?: typeof transpileAssets;
 } & BaseTranspilerOpts & { sandbox?: Sandbox };
 
@@ -33,14 +27,11 @@ export type ImportOpts = {
  * @param container
  * @param opts
  */
-export async function loadEntry<T>(
-  entry: Entry,
-  container: HTMLElement,
-  opts: ImportOpts,
-): Promise<[Promise<void>, Promise<T | void>]> {
+export async function loadEntry<T>(entry: Entry, container: HTMLElement, opts: LoaderOpts): Promise<T | void> {
   const {
     fetch,
     nodeTransformer = transpileAssets,
+    transformer,
     sandbox,
     moduleResolver = (url: string) => {
       return defaultModuleResolver(url, container, document.head);
@@ -50,12 +41,16 @@ export async function loadEntry<T>(
   const res = isUrlHasOwnProtocol(entry) ? await fetch(entry) : new Response(entry);
   if (res.body) {
     let noExternalScript = true;
-    const firstScriptStartLoadDeferred = new Deferred<void>();
     const entryScriptLoadedDeferred = new Deferred<T | void>();
     const entryHTMLLoadedDeferred = new Deferred<void>();
 
-    void res.body
-      .pipeThrough(new TextDecoderStream())
+    let readableStream = res.body.pipeThrough(new TextDecoderStream());
+
+    if (transformer) {
+      readableStream = readableStream.pipeThrough(transformer);
+    }
+
+    void readableStream
       .pipeThrough(
         new TagTransformStream(
           [
@@ -79,14 +74,6 @@ export async function loadEntry<T>(
 
           const script = transformedNode as unknown as HTMLScriptElement;
 
-          if (
-            firstScriptStartLoadDeferred.status === 'pending' &&
-            script.tagName === 'SCRIPT' &&
-            isValidJavaScriptType(script.type)
-          ) {
-            firstScriptStartLoadDeferred.resolve();
-          }
-
           /*
            * If the entry script is executed, we can complete the entry process in advance
            * otherwise we need to wait until the last script is executed.
@@ -150,7 +137,7 @@ export async function loadEntry<T>(
         }
       });
 
-    return [firstScriptStartLoadDeferred.promise, entryScriptLoadedDeferred.promise];
+    return entryScriptLoadedDeferred.promise;
   }
 
   throw new QiankunError(`entry ${entry} response body is empty!`);

packages/qiankun/src/core/loadApp.ts

@@ -2,7 +2,7 @@
  * @author Kuitos
  * @since 2023-04-25
  */
-import type { ImportOpts } from '@qiankunjs/loader';
+import type { LoaderOpts } from '@qiankunjs/loader';
 import { loadEntry } from '@qiankunjs/loader';
 import type { Sandbox } from '@qiankunjs/sandbox';
 import { createSandboxContainer } from '@qiankunjs/sandbox';
@@ -28,7 +28,7 @@ export default async function loadApp<T extends ObjectType>(
   lifeCycles?: LifeCycles<T>,
 ) {
   const { name: appName, entry, container } = app;
-  const { fetch = window.fetch, sandbox, globalContext = window } = configuration || {};
+  const { fetch = window.fetch, sandbox, globalContext = window, transformer } = configuration || {};
 
   const markName = `[qiankun] App ${appName} Loading`;
   if (process.env.NODE_ENV === 'development') {
@@ -56,13 +56,10 @@ export default async function loadApp<T extends ObjectType>(
     unmountSandbox = () => sandboxContainer.unmount();
   }
 
-  const containerOpts: ImportOpts = { fetch, sandbox: sandboxInstance };
+  const containerOpts: LoaderOpts = { fetch, sandbox: sandboxInstance, transformer };
+
+  const lifecyclesPromise = loadEntry<MicroAppLifeCycles>(entry, microAppContainer, containerOpts);
 
-  const [firstScriptStartLoadPromise, entryScriptLoadedPromise] = await loadEntry<MicroAppLifeCycles>(
-    entry,
-    microAppContainer,
-    containerOpts,
-  );
   const assetPublicPath = calcPublicPath(entry);
   const {
     beforeUnmount = [],
@@ -73,10 +70,10 @@ export default async function loadApp<T extends ObjectType>(
   } = mergeWith({}, getAddOns(global, assetPublicPath), lifeCycles, (v1, v2) =>
     concat((v1 ?? []) as LifeCycleFn<T>, (v2 ?? []) as LifeCycleFn<T>),
   );
-  await firstScriptStartLoadPromise;
+  // FIXME Due to the asynchronous execution of loadEntry, the DOM of the sub-app is inserted synchronously through appendChild, and inline scripts are also executed synchronously. Therefore, the beforeLoad may need to rely on transformer configuration to coordinate and ensure the order of asynchronous operations.
   await execHooksChain(toArray(beforeLoad), app, global);
 
-  const lifecycles = await entryScriptLoadedPromise;
+  const lifecycles = await lifecyclesPromise;
   if (!lifecycles) throw new QiankunError(`${appName} entry ${entry} load failed as it not export lifecycles`);
   const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(
     lifecycles,

packages/qiankun/src/types.ts

@@ -2,7 +2,7 @@
  * @author Kuitos
  * @since 2023-04-25
  */
-import type { BaseLoaderOpts } from '@qiankunjs/shared';
+import type { LoaderOpts } from '@qiankunjs/loader';
 import type { LifeCycles as ParcelLifeCycles, Parcel, RegisterApplicationConfig } from 'single-spa';
 
 declare global {
@@ -41,7 +41,7 @@ export type RegistrableApp<T extends ObjectType> = LoadableApp<T> & {
   activeRule: RegisterApplicationConfig['activeWhen'];
 };
 
-export type AppConfiguration = Partial<BaseLoaderOpts> & {
+export type AppConfiguration = Pick<LoaderOpts, 'fetch' | 'transformer'> & {
   sandbox?: boolean;
   globalContext?: WindowProxy;
 };