✨ add internal force cache config (#1018)

examples/main/multiple.js

@@ -3,7 +3,10 @@ import { loadMicroApp } from '../../es';
 let app;
 
 function mount() {
-  app = loadMicroApp({ name: 'react15', entry: '//localhost:7102', container: '#react15' });
+  app = loadMicroApp(
+    { name: 'react15', entry: '//localhost:7102', container: '#react15' },
+    { sandbox: { experimentalStyleIsolation: true } },
+  );
 }
 
 function unmount() {

src/apis.ts

@@ -44,7 +44,7 @@ export function registerMicroApps<T extends object = {}>(
   });
 }
 
-const appConfigPormiseGetterMap = new Map<string, Promise<ParcelConfigObjectGetter>>();
+const appConfigPromiseGetterMap = new Map<string, Promise<ParcelConfigObjectGetter>>();
 
 export function loadMicroApp<T extends object = {}>(
   app: LoadableApp<T>,
@@ -62,33 +62,46 @@ export function loadMicroApp<T extends object = {}>(
     return undefined;
   };
 
+  const wrapParcelConfigForRemount = (config: ParcelConfigObject): ParcelConfigObject => {
+    return {
+      ...config,
+      // empty bootstrap hook which should not run twice while it calling from cached micro app
+      bootstrap: () => Promise.resolve(),
+    };
+  };
+
   /**
    * using name + container xpath as the micro app instance id,
    * it means if you rendering a micro app to a dom which have been rendered before,
    * the micro app would not load and evaluate its lifecycles again
    */
   const memorizedLoadingFn = async (): Promise<ParcelConfigObject> => {
+    const { $$cacheLifecycleByAppName } = configuration ?? frameworkConfiguration;
     const container = 'container' in app ? app.container : undefined;
+
     if (container) {
+      // using appName as cache for internal experimental scenario
+      if ($$cacheLifecycleByAppName) {
+        const parcelConfigGetterPromise = appConfigPromiseGetterMap.get(name);
+        if (parcelConfigGetterPromise) return wrapParcelConfigForRemount((await parcelConfigGetterPromise)(container));
+      }
+
       const xpath = getContainerXpath(container);
       if (xpath) {
-        const parcelConfigGetterPromise = appConfigPormiseGetterMap.get(`${name}-${xpath}`);
+        const parcelConfigGetterPromise = appConfigPromiseGetterMap.get(`${name}-${xpath}`);
-        if (parcelConfigGetterPromise) {
+        if (parcelConfigGetterPromise) return wrapParcelConfigForRemount((await parcelConfigGetterPromise)(container));
-          const parcelConfig = (await parcelConfigGetterPromise)(container);
-          return {
-            ...parcelConfig,
-            // empty bootstrap hook which should not run twice while it calling from cached micro app
-            bootstrap: () => Promise.resolve(),
-          };
-        }
       }
     }
 
     const parcelConfigObjectGetterPromise = loadApp(app, configuration ?? frameworkConfiguration, lifeCycles);
 
     if (container) {
-      const xpath = getContainerXpath(container);
+      if ($$cacheLifecycleByAppName) {
-      if (xpath) appConfigPormiseGetterMap.set(`${name}-${xpath}`, parcelConfigObjectGetterPromise);
+        appConfigPromiseGetterMap.set(name, parcelConfigObjectGetterPromise);
+      } else {
+        const xpath = getContainerXpath(container);
+        if (xpath) appConfigPromiseGetterMap.set(`${name}-${xpath}`, parcelConfigObjectGetterPromise);
+      }
     }
 
     return (await parcelConfigObjectGetterPromise)(container);

src/interfaces.ts

@@ -54,6 +54,10 @@ export type PrefetchStrategy =
   | ((apps: AppMetadata[]) => { criticalAppNames: string[]; minorAppsName: string[] });
 
 type QiankunSpecialOpts = {
+  /**
+   * @deprecated internal api, don't used it as normal, might be removed after next version
+   */
+  $$cacheLifecycleByAppName?: boolean;
   prefetch?: PrefetchStrategy;
   sandbox?:
     | boolean

src/sandbox/patchers/dynamicAppend/common.ts

@@ -353,7 +353,6 @@ export function rebuildCSSRules(
 ) {
   styleSheetElements.forEach((stylesheetElement) => {
     // re-append the dynamic stylesheet to sub-app container
-    // Using document.head.appendChild ensures that appendChild invocation can also directly use the HTMLHeadElement.prototype.appendChild method which is overwritten at mounting phase
     reAppendElement(stylesheetElement);
 
     /*