feat: avoid layouts thrashing

packages/core-browser/__tests__/dom/fastdom.test.ts

@@ -0,0 +1,108 @@
+import { fastdom } from '@opensumi/ide-core-browser';
+
+/**
+ * 用于 mock requestAnimationFrame 的表现，可以手动触发动画帧
+ */
+class AnimationFrameController {
+  private callbacks: Array<() => void> = [];
+  private currentFrame: number = 0;
+  private running: boolean = false;
+
+  constructor() {
+    this.run = this.run.bind(this);
+  }
+
+  /**
+   * 触发动画帧
+   */
+  public run() {
+    if (this.running) {
+      return;
+    }
+    this.running = true;
+    this.callbacks.forEach((callback) => {
+      callback();
+    });
+    this.running = false;
+    this.currentFrame++;
+  }
+
+  /**
+   * 注册回调函数
+   * @param callback
+   */
+
+  public register(callback: () => void) {
+    this.callbacks.push(callback);
+  }
+
+  /**
+   * 注销回调函数
+   * @param callback
+   */
+
+  public unregister(callback: () => void) {
+    const index = this.callbacks.indexOf(callback);
+    if (index !== -1) {
+      this.callbacks.splice(index, 1);
+    }
+  }
+
+  /**
+   * 获取当前的动画帧
+   */
+  public getCurrentFrame() {
+    return this.currentFrame;
+  }
+}
+
+describe('fastdom', () => {
+  it('should measure', () => {
+    const animationFrameController = new AnimationFrameController();
+
+    global.requestAnimationFrame = (callback) => {
+      animationFrameController.register(callback);
+      return 1;
+    };
+
+    global.cancelAnimationFrame = () => {};
+    let count = 0;
+    fastdom.measure(() => {
+      count++;
+      expect(count).toBe(1);
+
+      fastdom.measure(() => {
+        // will run on current frame
+        count++;
+        expect(count).toBe(3);
+      });
+
+      fastdom.measureAtNextFrame(() => {
+        // will run on next frame
+        count++;
+        expect(count).toBe(4);
+
+        fastdom.measure(() => {
+          count += 2;
+          expect(count).toBe(6);
+        });
+        fastdom.mutate(() => {
+          count += 3;
+          expect(count).toBe(9);
+        });
+      });
+    });
+
+    fastdom.mutate(() => {
+      count++;
+      expect(count).toBe(2);
+    });
+
+    animationFrameController.run();
+    animationFrameController.run();
+    expect(count).toBe(9);
+    animationFrameController.run();
+    animationFrameController.run();
+    expect(count).toBe(9);
+  });
+});

packages/core-browser/package.json

@@ -25,15 +25,13 @@
     "@vscode/codicons": "0.0.35",
     "ajv": "^6.10.0",
     "classnames": "2.5.1",
-    "font-awesome": "^4.7.0",
     "fuzzy": "^0.1.3",
     "jsonc-parser": "^2.1.0",
     "keycode": "^2.2.0",
     "lodash": "^4.17.21",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
     "react": "^18.2.0",
-    "react-autosize-textarea": "^7.0.0",
     "react-ctxmenu-trigger": "^1.0.0",
     "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.2.0",

packages/core-browser/src/bootstrap/app.view.tsx

@@ -38,6 +38,7 @@ export function App(props: AppProps) {
         lastFrame = null;
         allSlot.forEach((item) => {
           eventBus.fire(new ResizeEvent({ slotLocation: item.slot }));
+          eventBus.fireDirective(ResizeEvent.createDirective(item.slot));
         });
       });
     };

packages/core-browser/src/components/layout/split-panel.tsx

@@ -224,6 +224,7 @@ export const SplitPanel: React.FC<SplitPanelProps> = (props) => {
     (location?: string) => {
       if (location) {
         eventBus.fire(new ResizeEvent({ slotLocation: location }));
+        eventBus.fireDirective(ResizeEvent.createDirective(location));
       }
     },
     [eventBus],
@@ -329,12 +330,10 @@ export const SplitPanel: React.FC<SplitPanelProps> = (props) => {
     if (rootRef.current) {
       splitPanelService.setRootNode(rootRef.current);
     }
-    const disposer = eventBus.on(ResizeEvent, (e) => {
-      if (e.payload.slotLocation === id) {
-        childList.forEach((c) => {
-          fireResizeEvent(getProp(c, 'slot') || getProp(c, 'id'));
-        });
-      }
+    const disposer = eventBus.onDirective(ResizeEvent.createDirective(id), () => {
+      childList.forEach((c) => {
+        fireResizeEvent(getProp(c, 'slot') || getProp(c, 'id'));
+      });
     });
     return () => {
       disposer.dispose();