fix: record deleted props in snapshotSandbox (#2869)

src/sandbox/__tests__/snapshotSandBox.test.ts

@@ -0,0 +1,52 @@
+import SnapshotSandbox from '../snapshotSandbox';
+
+it('modify, add and delete  props should isolated at sandbox', () => {
+  window.globalProps = { a: 1 };
+  window.globalDeletedProps = { b: [] };
+  const sandbox1 = new SnapshotSandbox('app1');
+  const sandbox2 = new SnapshotSandbox('app2');
+  sandbox1.active();
+  window.globalProps = { a: 2 };
+  window.globalAddedProps = 3;
+  delete window.globalDeletedProps;
+  sandbox1.inactive();
+  // change to sandbox2
+  sandbox2.active();
+  expect(window.globalProps).toEqual({ a: 1 });
+  expect(window.globalAddedProps).not.toBeDefined();
+  expect(window.globalDeletedProps).toEqual({ b: [] });
+  sandbox2.inactive();
+  // restore sandbox1
+  sandbox1.active();
+  expect(window.globalProps).toEqual({ a: 2 });
+  expect(window.globalAddedProps).toEqual(3);
+  expect(window.globalDeletedProps).not.toBeDefined();
+  // add delete props
+  window.globalDeletedProps = { b: [2] };
+  sandbox1.inactive();
+  expect(window.globalDeletedProps).toEqual({ b: [] });
+  sandbox1.active();
+  expect(window.globalDeletedProps).toEqual({ b: [2] });
+  // delete props again
+  delete window.globalDeletedProps;
+  sandbox1.inactive();
+  expect(window.globalDeletedProps).toEqual({ b: [] });
+  sandbox1.active();
+  expect(window.globalDeletedProps).not.toBeDefined();
+  // 1. add props 2. modify props 2. delete props
+  window.globalDeletedProps = { b: [2] };
+  window.globalDeletedProps = { b: [3] };
+  delete window.globalDeletedProps;
+  sandbox1.inactive();
+  expect(window.globalDeletedProps).toEqual({ b: [] });
+  sandbox1.active();
+  expect(window.globalDeletedProps).not.toBeDefined();
+  // 1. delete props 2. add props 3. modify props
+  delete window.globalAddedProps;
+  window.globalAddedProps = 3;
+  window.globalAddedProps = 4;
+  sandbox1.inactive();
+  expect(window.globalAddedProps).not.toBeDefined();
+  sandbox1.active();
+  expect(window.globalAddedProps).toEqual(4);
+});

src/sandbox/snapshotSandbox.ts

@@ -5,7 +5,7 @@
 import type { SandBox } from '../interfaces';
 import { SandBoxType } from '../interfaces';
 
-function iter(obj: typeof window, callbackFn: (prop: any) => void) {
+function iter(obj: typeof window | Record<any, any>, callbackFn: (prop: any) => void) {
   // eslint-disable-next-line guard-for-in, no-restricted-syntax
   for (const prop in obj) {
     // patch for clearInterval for compatible reason, see #1490
@@ -31,6 +31,8 @@ export default class SnapshotSandbox implements SandBox {
 
   private modifyPropsMap: Record<any, any> = {};
 
+  private deletePropsSet: Set<any> = new Set();
+
   constructor(name: string) {
     this.name = name;
     this.proxy = window;
@@ -49,12 +51,19 @@ export default class SnapshotSandbox implements SandBox {
       window[p] = this.modifyPropsMap[p];
     });
 
+    // 删除之前删除的属性
+    this.deletePropsSet.forEach((p: any) => {
+      delete window[p];
+    });
+
     this.sandboxRunning = true;
   }
 
   inactive() {
     this.modifyPropsMap = {};
 
+    this.deletePropsSet.clear();
+
     iter(window, (prop) => {
       if (window[prop] !== this.windowSnapshot[prop]) {
         // 记录变更，恢复环境
@@ -63,8 +72,20 @@ export default class SnapshotSandbox implements SandBox {
       }
     });
 
+    iter(this.windowSnapshot, (prop) => {
+      if (!window.hasOwnProperty(prop)) {
+        // 记录被删除的属性，恢复环境
+        this.deletePropsSet.add(prop);
+        window[prop] = this.windowSnapshot[prop];
+      }
+    });
+
     if (process.env.NODE_ENV === 'development') {
-      console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap));
+      console.info(
+        `[qiankun:sandbox] ${this.name} origin window restore...`,
+        Object.keys(this.modifyPropsMap),
+        this.deletePropsSet.keys(),
+      );
     }
 
     this.sandboxRunning = false;