feat: cleanup components on dispose

packages/dockview/src/__tests__/dockview/dockviewComponent.spec.ts

@@ -154,18 +154,12 @@ class TestGroupPanel implements IGroupPanel {
 }
 
 describe('dockviewComponent', () => {
-    let root: HTMLElement;
     let container: HTMLElement;
     let dockview: DockviewComponent;
 
     beforeEach(() => {
-        root = document.createElement('div'); // dockview container must have parent element
         container = document.createElement('div');
 
-        root.appendChild(container);
-        root.className = 'root';
-        container.className = 'container';
-
         dockview = new DockviewComponent(container, {
             components: {
                 default: PanelContentPartTest,
@@ -1038,4 +1032,31 @@ describe('dockviewComponent', () => {
 
         disposable.dispose();
     });
+
+    test('dispose of dockviewComponent', () => {
+        dockview.layout(500, 1000);
+
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+        dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+        dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+        });
+        dockview.addPanel({
+            id: 'panel4',
+            component: 'default',
+        });
+
+        expect(container.childNodes.length).toBe(1);
+
+        dockview.dispose();
+
+        expect(container.childNodes.length).toBe(0);
+    });
 });

packages/dockview/src/__tests__/paneview/paneview.spec.ts

@@ -102,4 +102,38 @@ describe('paneview', () => {
 
         disposable.dispose();
     });
+
+    test('dispose of paneview', () => {
+        expect(container.childNodes.length).toBe(0);
+
+        const paneview = new Paneview(container, {
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        const view1 = new TestPanel(
+            'id',
+            'component',
+            'headerComponent',
+            Orientation.VERTICAL,
+            true,
+            true
+        );
+        const view2 = new TestPanel(
+            'id2',
+            'component',
+            'headerComponent',
+            Orientation.VERTICAL,
+            true,
+            true
+        );
+
+        paneview.addPane(view1);
+        paneview.addPane(view2);
+
+        expect(container.childNodes.length).toBeGreaterThan(0);
+
+        paneview.dispose();
+
+        expect(container.childNodes.length).toBe(0);
+    });
 });

packages/dockview/src/__tests__/paneview/paneviewComponent.spec.ts

@@ -276,4 +276,33 @@ describe('componentPaneview', () => {
 
         disposable.dispose();
     });
+
+    test('dispose of paneviewComponent', () => {
+        expect(container.childNodes.length).toBe(0);
+
+        const paneview = new PaneviewComponent(container, {
+            components: {
+                testPanel: TestPanel,
+            },
+        });
+
+        paneview.layout(1000, 1000);
+
+        paneview.addPanel({
+            id: 'panel1',
+            component: 'testPanel',
+            title: 'Panel 1',
+        });
+        paneview.addPanel({
+            id: 'panel2',
+            component: 'testPanel',
+            title: 'Panel 2',
+        });
+
+        expect(container.childNodes.length).toBeGreaterThan(0);
+
+        paneview.dispose();
+
+        expect(container.childNodes.length).toBe(0);
+    });
 });

packages/dockview/src/__tests__/splitview/core/splitview.spec.ts

@@ -565,4 +565,25 @@ describe('splitview', () => {
 
         disposable.dispose();
     });
+
+    test('dispose of splitview', () => {
+        expect(container.childNodes.length).toBe(0);
+
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+
+        const view1 = new Testview(0, 100);
+        const view2 = new Testview(0, 100);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+
+        expect(container.childNodes.length).toBeGreaterThan(0);
+
+        splitview.dispose();
+
+        expect(container.childNodes.length).toBe(0);
+    });
 });

packages/dockview/src/__tests__/splitview/splitviewComponent.spec.ts

@@ -358,37 +358,31 @@ describe('componentSplitview', () => {
         disposable.dispose();
     });
 
-    class EventListenerTracker {
+    test('dispose of splitviewComponent', () => {
-        private events = new Map<string, Set<any>>();
+        expect(container.childNodes.length).toBe(0);
 
-        get size() {
+        const splitview = new SplitviewComponent(container, {
-            return this.events.size;
+            orientation: Orientation.HORIZONTAL,
-        }
+            components: {
+                testPanel: TestPanel,
+            },
+        });
 
-        constructor() {
+        splitview.layout(1000, 1000);
-            const originalAddEventListener = document.addEventListener;
-            const originalRemoveEventListener = document.removeEventListener;
 
-            document.addEventListener = jest.fn((event, callback, options) => {
+        splitview.addPanel({
-                if (!this.events.has(event)) {
+            id: 'panel1',
-                    this.events.set(event, new Set<any>());
+            component: 'testPanel',
-                }
+        });
-                this.events.get(event).add(callback);
+        splitview.addPanel({
-                originalAddEventListener(event, callback, options);
+            id: 'panel2',
-            });
+            component: 'testPanel',
+        });
 
-            document.removeEventListener = jest.fn(
+        expect(container.childNodes.length).toBeGreaterThan(0);
-                (event, callback, options) => {
-                    if (this.events.has(event)) {
-                        this.events.get(event).delete(callback);
-                        if (this.events.get(event).size === 0) {
-                            this.events.delete(event);
-                        }
-                    }
 
-                    originalRemoveEventListener(event, callback, options);
+        splitview.dispose();
-                }
+
-            );
+        expect(container.childNodes.length).toBe(0);
-        }
+    });
-    }
 });

packages/dockview/src/gridview/gridview.ts

@@ -287,6 +287,8 @@ export class Gridview implements IDisposable {
         this.disposable.dispose();
         this._onDidChange.dispose();
         this.root.dispose();
+
+        this.element.remove();
     }
 
     public clear() {

packages/dockview/src/paneview/paneview.ts

@@ -189,8 +189,6 @@ export class Paneview extends CompositeDisposable implements IDisposable {
     public dispose() {
         super.dispose();
 
-        this.splitview.dispose();
-
         if (this.animationTimer) {
             clearTimeout(this.animationTimer);
             this.animationTimer = undefined;
@@ -201,6 +199,7 @@ export class Paneview extends CompositeDisposable implements IDisposable {
         });
         this.paneItems = [];
 
+        this.splitview.dispose();
         this.element.remove();
     }
 }

packages/dockview/src/paneview/paneviewComponent.ts

@@ -452,4 +452,10 @@ export class PaneviewComponent
             queue.forEach((f) => f());
         }
     }
+
+    public dispose(): void {
+        super.dispose();
+
+        this.paneview.dispose();
+    }
 }

packages/dockview/src/react/dockview/dockview.tsx

@@ -155,6 +155,7 @@ export const DockviewReact = React.forwardRef(
             return () => {
                 disposable.dispose();
                 dockview.dispose();
+                element.remove();
             };
         }, []);
 

packages/dockview/src/react/gridview/gridview.tsx

@@ -96,6 +96,7 @@ export const GridviewReact = React.forwardRef(
 
             return () => {
                 gridview.dispose();
+                element.remove();
             };
         }, []);
 

packages/dockview/src/splitview/core/splitview.ts

@@ -1038,12 +1038,13 @@ export class Splitview {
         this._onDidAddView.dispose();
         this._onDidRemoveView.dispose();
 
-        this.element.remove();
         for (let i = 0; i < this.element.children.length; i++) {
             if (this.element.children.item(i) === this.element) {
                 this.element.removeChild(this.element);
                 break;
             }
         }
+
+        this.element.remove();
     }
 }

packages/dockview/src/splitview/splitviewComponent.ts

@@ -421,6 +421,8 @@ export class SplitviewComponent
         });
         this.panels.clear();
 
+        this.splitview.dispose();
+
         super.dispose();
     }
 }