dockview-core 1.7.3 → 1.7.5

package/dist/dockview-core.esm.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 1.7.3
+ * @version 1.7.5
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -119,9 +119,49 @@ var Event;
         };
     };
 })(Event || (Event = {}));
-// dumb event emitter with better typings than nodes event emitter
-// https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
+class LeakageMonitor {
+    constructor() {
+        this.events = new Map();
+    }
+    get size() {
+        return this.events.size;
+    }
+    add(event, stacktrace) {
+        this.events.set(event, stacktrace);
+    }
+    delete(event) {
+        this.events.delete(event);
+    }
+    clear() {
+        this.events.clear();
+    }
+}
+class Stacktrace {
+    static create() {
+        var _a;
+        return new Stacktrace((_a = new Error().stack) !== null && _a !== void 0 ? _a : '');
+    }
+    constructor(value) {
+        this.value = value;
+    }
+    print() {
+        console.warn(this.value);
+    }
+}
+class Listener {
+    constructor(callback, stacktrace) {
+        this.callback = callback;
+        this.stacktrace = stacktrace;
+    }
+}
+// relatively simple event emitter taken from https://github.com/microsoft/vscode/blob/master/src/vs/base/common/event.ts
 class Emitter {
+    static setLeakageMonitorEnabled(isEnabled) {
+        if (isEnabled !== Emitter.ENABLE_TRACKING) {
+            Emitter.MEMORY_LEAK_WATCHER.clear();
+        }
+        Emitter.ENABLE_TRACKING = isEnabled;
+    }
     constructor(options) {
         this.options = options;
         this._listeners = [];
@@ -129,11 +169,12 @@ class Emitter {
     }
     get event() {
         if (!this._event) {
-            this._event = (listener) => {
+            this._event = (callback) => {
                 var _a;
                 if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.replay) && this._last !== undefined) {
-                    listener(this._last);
+                    callback(this._last);
                 }
+                const listener = new Listener(callback, Emitter.ENABLE_TRACKING ? Stacktrace.create() : undefined);
                 this._listeners.push(listener);
                 return {
                     dispose: () => {
@@ -141,28 +182,50 @@ class Emitter {
                         if (index > -1) {
                             this._listeners.splice(index, 1);
                         }
+                        else if (Emitter.ENABLE_TRACKING) ;
                     },
                 };
             };
+            if (Emitter.ENABLE_TRACKING) {
+                Emitter.MEMORY_LEAK_WATCHER.add(this._event, Stacktrace.create());
+            }
         }
         return this._event;
     }
     fire(e) {
         this._last = e;
         for (const listener of this._listeners) {
-            listener(e);
+            listener.callback(e);
         }
     }
     dispose() {
-        this._listeners = [];
-        this._disposed = true;
+        if (!this._disposed) {
+            this._disposed = true;
+            if (this._listeners.length > 0) {
+                if (Emitter.ENABLE_TRACKING) {
+                    queueMicrotask(() => {
+                        var _a;
+                        // don't check until stack of execution is completed to allow for out-of-order disposals within the same execution block
+                        for (const listener of this._listeners) {
+                            console.warn((_a = listener.stacktrace) === null || _a === void 0 ? void 0 : _a.print());
+                        }
+                    });
+                }
+                this._listeners = [];
+            }
+            if (Emitter.ENABLE_TRACKING && this._event) {
+                Emitter.MEMORY_LEAK_WATCHER.delete(this._event);
+            }
+        }
     }
 }
+Emitter.ENABLE_TRACKING = false;
+Emitter.MEMORY_LEAK_WATCHER = new LeakageMonitor();
 function addDisposableWindowListener(element, type, listener, options) {
     element.addEventListener(type, listener, options);
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }
@@ -170,7 +233,7 @@ function addDisposableListener(element, type, listener, options) {
     element.addEventListener(type, listener, options);
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }
@@ -210,13 +273,13 @@ class CompositeDisposable {
     }
     constructor(...args) {
         this._isDisposed = false;
-        this.disposables = args;
+        this._disposables = args;
     }
     addDisposables(...args) {
-        args.forEach((arg) => this.disposables.push(arg));
+        args.forEach((arg) => this._disposables.push(arg));
     }
     dispose() {
-        this.disposables.forEach((arg) => arg.dispose());
+        this._disposables.forEach((arg) => arg.dispose());
         this._isDisposed = true;
     }
 }
@@ -306,6 +369,7 @@ class FocusTracker extends CompositeDisposable {
         this.onDidFocus = this._onDidFocus.event;
         this._onDidBlur = new Emitter();
         this.onDidBlur = this._onDidBlur.event;
+        this.addDisposables(this._onDidFocus, this._onDidBlur);
         let hasFocus = isAncestor(document.activeElement, element);
         let loosingFocus = false;
         const onFocus = () => {
@@ -350,11 +414,6 @@ class FocusTracker extends CompositeDisposable {
     refreshState() {
         this._refreshStateHandler();
     }
-    dispose() {
-        super.dispose();
-        this._onDidBlur.dispose();
-        this._onDidFocus.dispose();
-    }
 }
 
 function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
@@ -583,7 +642,7 @@ class Splitview {
         this._orthogonalSize = value;
     }
     get length() {
-        return this.views.length;
+        return this.viewItems.length;
     }
     get proportions() {
         return this._proportions ? [...this._proportions] : undefined;
@@ -602,12 +661,12 @@ class Splitview {
             : 'vertical');
     }
     get minimumSize() {
-        return this.views.reduce((r, item) => r + item.minimumSize, 0);
+        return this.viewItems.reduce((r, item) => r + item.minimumSize, 0);
     }
     get maximumSize() {
         return this.length === 0
             ? Number.POSITIVE_INFINITY
-            : this.views.reduce((r, item) => r + item.maximumSize, 0);
+            : this.viewItems.reduce((r, item) => r + item.maximumSize, 0);
     }
     get startSnappingEnabled() {
         return this._startSnappingEnabled;
@@ -631,7 +690,7 @@ class Splitview {
     }
     constructor(container, options) {
         this.container = container;
-        this.views = [];
+        this.viewItems = [];
         this.sashes = [];
         this._size = 0;
         this._orthogonalSize = 0;
@@ -645,12 +704,12 @@ class Splitview {
         this.onDidAddView = this._onDidAddView.event;
         this._onDidRemoveView = new Emitter();
         this.onDidRemoveView = this._onDidRemoveView.event;
-        this.resize = (index, delta, sizes = this.views.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
-            if (index < 0 || index > this.views.length) {
+        this.resize = (index, delta, sizes = this.viewItems.map((x) => x.size), lowPriorityIndexes, highPriorityIndexes, overloadMinDelta = Number.NEGATIVE_INFINITY, overloadMaxDelta = Number.POSITIVE_INFINITY, snapBefore, snapAfter) => {
+            if (index < 0 || index > this.viewItems.length) {
                 return 0;
             }
             const upIndexes = range(index, -1);
-            const downIndexes = range(index + 1, this.views.length);
+            const downIndexes = range(index + 1, this.viewItems.length);
             //
             if (highPriorityIndexes) {
                 for (const i of highPriorityIndexes) {
@@ -665,34 +724,34 @@ class Splitview {
                 }
             }
             //
-            const upItems = upIndexes.map((i) => this.views[i]);
+            const upItems = upIndexes.map((i) => this.viewItems[i]);
             const upSizes = upIndexes.map((i) => sizes[i]);
             //
-            const downItems = downIndexes.map((i) => this.views[i]);
+            const downItems = downIndexes.map((i) => this.viewItems[i]);
             const downSizes = downIndexes.map((i) => sizes[i]);
             //
-            const minDeltaUp = upIndexes.reduce((_, i) => _ + this.views[i].minimumSize - sizes[i], 0);
-            const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.views[i].maximumSize - sizes[i], 0);
+            const minDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].minimumSize - sizes[i], 0);
+            const maxDeltaUp = upIndexes.reduce((_, i) => _ + this.viewItems[i].maximumSize - sizes[i], 0);
             //
             const maxDeltaDown = downIndexes.length === 0
                 ? Number.POSITIVE_INFINITY
-                : downIndexes.reduce((_, i) => _ + sizes[i] - this.views[i].minimumSize, 0);
+                : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].minimumSize, 0);
             const minDeltaDown = downIndexes.length === 0
                 ? Number.NEGATIVE_INFINITY
-                : downIndexes.reduce((_, i) => _ + sizes[i] - this.views[i].maximumSize, 0);
+                : downIndexes.reduce((_, i) => _ + sizes[i] - this.viewItems[i].maximumSize, 0);
             //
             const minDelta = Math.max(minDeltaUp, minDeltaDown);
             const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
             //
             let snapped = false;
             if (snapBefore) {
-                const snapView = this.views[snapBefore.index];
+                const snapView = this.viewItems[snapBefore.index];
                 const visible = delta >= snapBefore.limitDelta;
                 snapped = visible !== snapView.visible;
                 snapView.setVisible(visible, snapBefore.size);
             }
             if (!snapped && snapAfter) {
-                const snapView = this.views[snapAfter.index];
+                const snapView = this.viewItems[snapAfter.index];
                 const visible = delta < snapAfter.limitDelta;
                 snapped = visible !== snapView.visible;
                 snapView.setVisible(visible, snapAfter.size);
@@ -754,7 +813,7 @@ class Splitview {
                 );
             });
             // Initialize content size and proportions for first layout
-            this.contentSize = this.views.reduce((r, i) => r + i.size, 0);
+            this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
             this.saveProportions();
         }
     }
@@ -771,18 +830,18 @@ class Splitview {
         }
     }
     isViewVisible(index) {
-        if (index < 0 || index >= this.views.length) {
+        if (index < 0 || index >= this.viewItems.length) {
             throw new Error('Index out of bounds');
         }
-        const viewItem = this.views[index];
+        const viewItem = this.viewItems[index];
         return viewItem.visible;
     }
     setViewVisible(index, visible) {
-        if (index < 0 || index >= this.views.length) {
+        if (index < 0 || index >= this.viewItems.length) {
             throw new Error('Index out of bounds');
         }
         toggleClass(this.container, 'visible', visible);
-        const viewItem = this.views[index];
+        const viewItem = this.viewItems[index];
         toggleClass(this.container, 'visible', visible);
         viewItem.setVisible(visible, viewItem.size);
         this.distributeEmptySpace(index);
@@ -790,33 +849,33 @@ class Splitview {
         this.saveProportions();
     }
     getViewSize(index) {
-        if (index < 0 || index >= this.views.length) {
+        if (index < 0 || index >= this.viewItems.length) {
             return -1;
         }
-        return this.views[index].size;
+        return this.viewItems[index].size;
     }
     resizeView(index, size) {
-        if (index < 0 || index >= this.views.length) {
+        if (index < 0 || index >= this.viewItems.length) {
             return;
         }
-        const indexes = range(this.views.length).filter((i) => i !== index);
+        const indexes = range(this.viewItems.length).filter((i) => i !== index);
         const lowPriorityIndexes = [
-            ...indexes.filter((i) => this.views[i].priority === LayoutPriority.Low),
+            ...indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.Low),
             index,
         ];
-        const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.High);
-        const item = this.views[index];
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.High);
+        const item = this.viewItems[index];
         size = Math.round(size);
         size = clamp(size, item.minimumSize, Math.min(item.maximumSize, this._size));
         item.size = size;
         this.relayout(lowPriorityIndexes, highPriorityIndexes);
     }
     getViews() {
-        return this.views.map((x) => x.view);
+        return this.viewItems.map((x) => x.view);
     }
     onDidChange(item, size) {
-        const index = this.views.indexOf(item);
-        if (index < 0 || index >= this.views.length) {
+        const index = this.viewItems.indexOf(item);
+        if (index < 0 || index >= this.viewItems.length) {
             return;
         }
         size = typeof size === 'number' ? size : item.size;
@@ -824,7 +883,7 @@ class Splitview {
         item.size = size;
         this.relayout([index]);
     }
-    addView(view, size = { type: 'distribute' }, index = this.views.length, skipLayout) {
+    addView(view, size = { type: 'distribute' }, index = this.viewItems.length, skipLayout) {
         const container = document.createElement('div');
         container.className = 'view';
         container.appendChild(view.element);
@@ -842,24 +901,25 @@ class Splitview {
             viewSize = view.minimumSize;
         }
         const disposable = view.onDidChange((newSize) => this.onDidChange(viewItem, newSize.size));
-        const dispose = () => {
-            disposable === null || disposable === void 0 ? void 0 : disposable.dispose();
-            this.viewContainer.removeChild(container);
-        };
-        const viewItem = new ViewItem(container, view, viewSize, { dispose });
-        if (index === this.views.length) {
+        const viewItem = new ViewItem(container, view, viewSize, {
+            dispose: () => {
+                disposable.dispose();
+                this.viewContainer.removeChild(container);
+            },
+        });
+        if (index === this.viewItems.length) {
             this.viewContainer.appendChild(container);
         }
         else {
             this.viewContainer.insertBefore(container, this.viewContainer.children.item(index));
         }
-        this.views.splice(index, 0, viewItem);
-        if (this.views.length > 1) {
+        this.viewItems.splice(index, 0, viewItem);
+        if (this.viewItems.length > 1) {
             //add sash
             const sash = document.createElement('div');
             sash.className = 'sash';
             const onStart = (event) => {
-                for (const item of this.views) {
+                for (const item of this.viewItems) {
                     item.enabled = false;
                 }
                 const iframes = [
@@ -874,27 +934,29 @@ class Splitview {
                     : event.clientY;
                 const sashIndex = firstIndex(this.sashes, (s) => s.container === sash);
                 //
-                const sizes = this.views.map((x) => x.size);
+                const sizes = this.viewItems.map((x) => x.size);
                 //
                 let snapBefore;
                 let snapAfter;
                 const upIndexes = range(sashIndex, -1);
-                const downIndexes = range(sashIndex + 1, this.views.length);
-                const minDeltaUp = upIndexes.reduce((r, i) => r + (this.views[i].minimumSize - sizes[i]), 0);
-                const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.views[i].viewMaximumSize - sizes[i]), 0);
+                const downIndexes = range(sashIndex + 1, this.viewItems.length);
+                const minDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].minimumSize - sizes[i]), 0);
+                const maxDeltaUp = upIndexes.reduce((r, i) => r + (this.viewItems[i].viewMaximumSize - sizes[i]), 0);
                 const maxDeltaDown = downIndexes.length === 0
                     ? Number.POSITIVE_INFINITY
-                    : downIndexes.reduce((r, i) => r + (sizes[i] - this.views[i].minimumSize), 0);
+                    : downIndexes.reduce((r, i) => r +
+                        (sizes[i] - this.viewItems[i].minimumSize), 0);
                 const minDeltaDown = downIndexes.length === 0
                     ? Number.NEGATIVE_INFINITY
                     : downIndexes.reduce((r, i) => r +
-                        (sizes[i] - this.views[i].viewMaximumSize), 0);
+                        (sizes[i] -
+                            this.viewItems[i].viewMaximumSize), 0);
                 const minDelta = Math.max(minDeltaUp, minDeltaDown);
                 const maxDelta = Math.min(maxDeltaDown, maxDeltaUp);
                 const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
                 const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
                 if (typeof snapBeforeIndex === 'number') {
-                    const snappedViewItem = this.views[snapBeforeIndex];
+                    const snappedViewItem = this.viewItems[snapBeforeIndex];
                     const halfSize = Math.floor(snappedViewItem.viewMinimumSize / 2);
                     snapBefore = {
                         index: snapBeforeIndex,
@@ -905,7 +967,7 @@ class Splitview {
                     };
                 }
                 if (typeof snapAfterIndex === 'number') {
-                    const snappedViewItem = this.views[snapAfterIndex];
+                    const snappedViewItem = this.viewItems[snapAfterIndex];
                     const halfSize = Math.floor(snappedViewItem.viewMinimumSize / 2);
                     snapAfter = {
                         index: snapAfterIndex,
@@ -926,7 +988,7 @@ class Splitview {
                     this.layoutViews();
                 };
                 const end = () => {
-                    for (const item of this.views) {
+                    for (const item of this.viewItems) {
                         item.enabled = true;
                     }
                     for (const iframe of iframes) {
@@ -935,12 +997,10 @@ class Splitview {
                     this.saveProportions();
                     document.removeEventListener('mousemove', mousemove);
                     document.removeEventListener('mouseup', end);
-                    document.removeEventListener('mouseend', end);
                     this._onDidSashEnd.fire(undefined);
                 };
                 document.addEventListener('mousemove', mousemove);
                 document.addEventListener('mouseup', end);
-                document.addEventListener('mouseend', end);
             };
             sash.addEventListener('mousedown', onStart);
             const sashItem = {
@@ -966,7 +1026,7 @@ class Splitview {
     distributeViewSizes() {
         const flexibleViewItems = [];
         let flexibleSize = 0;
-        for (const item of this.views) {
+        for (const item of this.viewItems) {
             if (item.maximumSize - item.minimumSize > 0) {
                 flexibleViewItems.push(item);
                 flexibleSize += item.size;
@@ -976,17 +1036,17 @@ class Splitview {
         for (const item of flexibleViewItems) {
             item.size = clamp(size, item.minimumSize, item.maximumSize);
         }
-        const indexes = range(this.views.length);
-        const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.Low);
-        const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.High);
+        const indexes = range(this.viewItems.length);
+        const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.Low);
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.High);
         this.relayout(lowPriorityIndexes, highPriorityIndexes);
     }
     removeView(index, sizing, skipLayout = false) {
         // Remove view
-        const viewItem = this.views.splice(index, 1)[0];
+        const viewItem = this.viewItems.splice(index, 1)[0];
         viewItem.dispose();
         // Remove sash
-        if (this.views.length >= 1) {
+        if (this.viewItems.length >= 1) {
             const sashIndex = Math.max(index - 1, 0);
             const sashItem = this.sashes.splice(sashIndex, 1)[0];
             sashItem.disposable();
@@ -1001,10 +1061,10 @@ class Splitview {
         return viewItem.view;
     }
     getViewCachedVisibleSize(index) {
-        if (index < 0 || index >= this.views.length) {
+        if (index < 0 || index >= this.viewItems.length) {
             throw new Error('Index out of bounds');
         }
-        const viewItem = this.views[index];
+        const viewItem = this.viewItems[index];
         return viewItem.cachedVisibleSize;
     }
     moveView(from, to) {
@@ -1020,14 +1080,14 @@ class Splitview {
         this.size = size;
         this.orthogonalSize = orthogonalSize;
         if (!this.proportions) {
-            const indexes = range(this.views.length);
-            const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.Low);
-            const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.High);
-            this.resize(this.views.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
+            const indexes = range(this.viewItems.length);
+            const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.Low);
+            const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.High);
+            this.resize(this.viewItems.length - 1, size - previousSize, undefined, lowPriorityIndexes, highPriorityIndexes);
         }
         else {
-            for (let i = 0; i < this.views.length; i++) {
-                const item = this.views[i];
+            for (let i = 0; i < this.viewItems.length; i++) {
+                const item = this.viewItems[i];
                 item.size = clamp(Math.round(this.proportions[i] * size), item.minimumSize, item.maximumSize);
             }
         }
@@ -1035,18 +1095,18 @@ class Splitview {
         this.layoutViews();
     }
     relayout(lowPriorityIndexes, highPriorityIndexes) {
-        const contentSize = this.views.reduce((r, i) => r + i.size, 0);
-        this.resize(this.views.length - 1, this._size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
+        const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
+        this.resize(this.viewItems.length - 1, this._size - contentSize, undefined, lowPriorityIndexes, highPriorityIndexes);
         this.distributeEmptySpace();
         this.layoutViews();
         this.saveProportions();
     }
     distributeEmptySpace(lowPriorityIndex) {
-        const contentSize = this.views.reduce((r, i) => r + i.size, 0);
+        const contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
         let emptyDelta = this.size - contentSize;
-        const indexes = range(this.views.length - 1, -1);
-        const lowPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.Low);
-        const highPriorityIndexes = indexes.filter((i) => this.views[i].priority === LayoutPriority.High);
+        const indexes = range(this.viewItems.length - 1, -1);
+        const lowPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.Low);
+        const highPriorityIndexes = indexes.filter((i) => this.viewItems[i].priority === LayoutPriority.High);
         for (const index of highPriorityIndexes) {
             pushToStart(indexes, index);
         }
@@ -1057,7 +1117,7 @@ class Splitview {
             pushToEnd(indexes, lowPriorityIndex);
         }
         for (let i = 0; emptyDelta !== 0 && i < indexes.length; i++) {
-            const item = this.views[indexes[i]];
+            const item = this.viewItems[indexes[i]];
             const size = clamp(item.size + emptyDelta, item.minimumSize, item.maximumSize);
             const viewDelta = size - item.size;
             emptyDelta -= viewDelta;
@@ -1066,16 +1126,16 @@ class Splitview {
     }
     saveProportions() {
         if (this.proportionalLayout && this.contentSize > 0) {
-            this._proportions = this.views.map((i) => i.size / this.contentSize);
+            this._proportions = this.viewItems.map((i) => i.size / this.contentSize);
         }
     }
     layoutViews() {
-        this.contentSize = this.views.reduce((r, i) => r + i.size, 0);
+        this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
         let sum = 0;
         const x = [];
         this.updateSashEnablement();
-        for (let i = 0; i < this.views.length - 1; i++) {
-            sum += this.views[i].size;
+        for (let i = 0; i < this.viewItems.length - 1; i++) {
+            sum += this.viewItems[i].size;
             x.push(sum);
             const offset = Math.min(Math.max(0, sum - 2), this.size - 4);
             if (this._orientation === Orientation.HORIZONTAL) {
@@ -1087,7 +1147,7 @@ class Splitview {
                 this.sashes[i].container.style.top = `${offset}px`;
             }
         }
-        this.views.forEach((view, i) => {
+        this.viewItems.forEach((view, i) => {
             if (this._orientation === Orientation.HORIZONTAL) {
                 view.container.style.width = `${view.size}px`;
                 view.container.style.left = i == 0 ? '0px' : `${x[i - 1]}px`;
@@ -1106,7 +1166,7 @@ class Splitview {
     findFirstSnapIndex(indexes) {
         // visible views first
         for (const index of indexes) {
-            const viewItem = this.views[index];
+            const viewItem = this.viewItems[index];
             if (!viewItem.visible) {
                 continue;
             }
@@ -1116,7 +1176,7 @@ class Splitview {
         }
         // then, hidden views
         for (const index of indexes) {
-            const viewItem = this.views[index];
+            const viewItem = this.viewItems[index];
             if (viewItem.visible &&
                 viewItem.maximumSize - viewItem.minimumSize > 0) {
                 return undefined;
@@ -1129,10 +1189,10 @@ class Splitview {
     }
     updateSashEnablement() {
         let previous = false;
-        const collapsesDown = this.views.map((i) => (previous = i.size - i.minimumSize > 0 || previous));
+        const collapsesDown = this.viewItems.map((i) => (previous = i.size - i.minimumSize > 0 || previous));
         previous = false;
-        const expandsDown = this.views.map((i) => (previous = i.maximumSize - i.size > 0 || previous));
-        const reverseViews = [...this.views].reverse();
+        const expandsDown = this.viewItems.map((i) => (previous = i.maximumSize - i.size > 0 || previous));
+        const reverseViews = [...this.viewItems].reverse();
         previous = false;
         const collapsesUp = reverseViews
             .map((i) => (previous = i.size - i.minimumSize > 0 || previous))
@@ -1144,19 +1204,19 @@ class Splitview {
         let position = 0;
         for (let index = 0; index < this.sashes.length; index++) {
             const sash = this.sashes[index];
-            const viewItem = this.views[index];
+            const viewItem = this.viewItems[index];
             position += viewItem.size;
             const min = !(collapsesDown[index] && expandsUp[index + 1]);
             const max = !(expandsDown[index] && collapsesUp[index + 1]);
             if (min && max) {
                 const upIndexes = range(index, -1);
-                const downIndexes = range(index + 1, this.views.length);
+                const downIndexes = range(index + 1, this.viewItems.length);
                 const snapBeforeIndex = this.findFirstSnapIndex(upIndexes);
                 const snapAfterIndex = this.findFirstSnapIndex(downIndexes);
                 const snappedBefore = typeof snapBeforeIndex === 'number' &&
-                    !this.views[snapBeforeIndex].visible;
+                    !this.viewItems[snapBeforeIndex].visible;
                 const snappedAfter = typeof snapAfterIndex === 'number' &&
-                    !this.views[snapAfterIndex].visible;
+                    !this.viewItems[snapAfterIndex].visible;
                 if (snappedBefore &&
                     collapsesUp[index] &&
                     (position > 0 || this.startSnappingEnabled)) {
@@ -1216,6 +1276,9 @@ class Splitview {
                 break;
             }
         }
+        for (const viewItem of this.viewItems) {
+            viewItem.dispose();
+        }
         this.element.remove();
     }
 }
@@ -1650,7 +1713,7 @@ class BranchNode extends CompositeDisposable {
             throw new Error('Invalid index');
         }
         this.splitview.removeView(index, sizing);
-        this._removeChild(index);
+        return this._removeChild(index);
     }
     _addChild(node, index) {
         this.children.splice(index, 0, node);
@@ -1672,10 +1735,10 @@ class BranchNode extends CompositeDisposable {
         });
     }
     dispose() {
-        super.dispose();
         this._childrenDisposable.dispose();
-        this.children.forEach((child) => child.dispose());
         this.splitview.dispose();
+        this.children.forEach((child) => child.dispose());
+        super.dispose();
     }
 }
 
@@ -1905,7 +1968,8 @@ class Gridview {
         if (oldRoot.children.length === 1) {
             // can remove one level of redundant branching if there is only a single child
             const childReference = oldRoot.children[0];
-            oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+            const child = oldRoot.removeChild(0); // remove to prevent disposal when disposing of unwanted root
+            child.dispose();
             oldRoot.dispose();
             this._root.addChild(
             /**
@@ -2012,7 +2076,8 @@ class Gridview {
             if (typeof newSiblingCachedVisibleSize === 'number') {
                 newSiblingSize = Sizing.Invisible(newSiblingCachedVisibleSize);
             }
-            grandParent.removeChild(parentIndex);
+            const child = grandParent.removeChild(parentIndex);
+            child.dispose();
             const newParent = new BranchNode(parent.orientation, this.proportionalLayout, this.styles, parent.size, parent.orthogonalSize);
             grandParent.addChild(newParent, parent.size, parentIndex);
             const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size);
@@ -2574,6 +2639,7 @@ class Droptarget extends CompositeDisposable {
     }
     dispose() {
         this.removeDropTarget();
+        super.dispose();
     }
     toggleClasses(quadrant, width, height) {
         var _a, _b, _c, _d;
@@ -2751,8 +2817,8 @@ class ContentContainer extends CompositeDisposable {
         if (this.panel.view) {
             const _onDidFocus = this.panel.view.content.onDidFocus;
             const _onDidBlur = this.panel.view.content.onDidBlur;
-            const { onDidFocus, onDidBlur } = trackFocus(this._element);
-            disposable.addDisposables(onDidFocus(() => this._onDidFocus.fire()), onDidBlur(() => this._onDidBlur.fire()));
+            const focusTracker = trackFocus(this._element);
+            disposable.addDisposables(focusTracker, focusTracker.onDidFocus(() => this._onDidFocus.fire()), focusTracker.onDidBlur(() => this._onDidBlur.fire()));
             if (_onDidFocus) {
                 disposable.addDisposables(_onDidFocus(() => this._onDidFocus.fire()));
             }
@@ -2791,24 +2857,32 @@ class DragHandler extends CompositeDisposable {
     constructor(el) {
         super();
         this.el = el;
-        this.disposable = new MutableDisposable();
+        this.dataDisposable = new MutableDisposable();
+        this.pointerEventsDisposable = new MutableDisposable();
         this._onDragStart = new Emitter();
         this.onDragStart = this._onDragStart.event;
-        this.iframes = [];
+        this.addDisposables(this._onDragStart, this.dataDisposable, this.pointerEventsDisposable);
         this.configure();
     }
     configure() {
         this.addDisposables(this._onDragStart, addDisposableListener(this.el, 'dragstart', (event) => {
-            this.iframes = [
+            const iframes = [
                 ...getElementsByTagName('iframe'),
                 ...getElementsByTagName('webview'),
             ];
-            for (const iframe of this.iframes) {
+            this.pointerEventsDisposable.value = {
+                dispose: () => {
+                    for (const iframe of iframes) {
+                        iframe.style.pointerEvents = 'auto';
+                    }
+                },
+            };
+            for (const iframe of iframes) {
                 iframe.style.pointerEvents = 'none';
             }
             this.el.classList.add('dv-dragged');
             setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
-            this.disposable.value = this.getData(event.dataTransfer);
+            this.dataDisposable.value = this.getData(event.dataTransfer);
             if (event.dataTransfer) {
                 event.dataTransfer.effectAllowed = 'move';
                 /**
@@ -2823,11 +2897,8 @@ class DragHandler extends CompositeDisposable {
                 event.dataTransfer.setData('text/plain', '__dockview_internal_drag_event__');
             }
         }), addDisposableListener(this.el, 'dragend', () => {
-            for (const iframe of this.iframes) {
-                iframe.style.pointerEvents = 'auto';
-            }
-            this.iframes = [];
-            this.disposable.dispose();
+            this.pointerEventsDisposable.dispose();
+            this.dataDisposable.dispose();
         }));
     }
 }
@@ -2845,13 +2916,12 @@ class Tab extends CompositeDisposable {
         this.onChanged = this._onChanged.event;
         this._onDropped = new Emitter();
         this.onDrop = this._onDropped.event;
-        this.addDisposables(this._onChanged, this._onDropped);
         this._element = document.createElement('div');
         this._element.className = 'tab';
         this._element.tabIndex = 0;
         this._element.draggable = true;
         toggleClass(this.element, 'inactive-tab', true);
-        this.addDisposables(new (class Handler extends DragHandler {
+        this.addDisposables(this._onChanged, this._onDropped, new (class Handler extends DragHandler {
             constructor() {
                 super(...arguments);
                 this.panelTransfer = LocalSelectionTransfer.getInstance();
@@ -2864,9 +2934,6 @@ class Tab extends CompositeDisposable {
                     },
                 };
             }
-            dispose() {
-                //
-            }
         })(this._element));
         this.addDisposables(addDisposableListener(this._element, 'mousedown', (event) => {
             if (event.defaultPrevented) {
@@ -2901,7 +2968,7 @@ class Tab extends CompositeDisposable {
         });
         this.addDisposables(this.droptarget.onDrop((event) => {
             this._onDropped.fire(event);
-        }));
+        }), this.droptarget);
     }
     setActive(isActive) {
         toggleClass(this.element, 'active-tab', isActive);
@@ -2916,7 +2983,6 @@ class Tab extends CompositeDisposable {
     }
     dispose() {
         super.dispose();
-        this.droptarget.dispose();
     }
 }
 
@@ -2962,9 +3028,6 @@ class GroupDragHandler extends DragHandler {
             },
         };
     }
-    dispose() {
-        //
-    }
 }
 
 class VoidContainer extends CompositeDisposable {
@@ -3120,6 +3183,7 @@ class TabsContainer extends CompositeDisposable {
         const tabToRemove = this.tabs.splice(index, 1)[0];
         const { value, disposable } = tabToRemove;
         disposable.dispose();
+        value.dispose();
         value.element.remove();
     }
     setActivePanel(panel) {
@@ -3163,9 +3227,10 @@ class TabsContainer extends CompositeDisposable {
     }
     dispose() {
         super.dispose();
-        this.tabs.forEach((tab) => {
-            tab.disposable.dispose();
-        });
+        for (const { value, disposable } of this.tabs) {
+            disposable.dispose();
+            value.dispose();
+        }
         this.tabs = [];
     }
 }
@@ -3263,7 +3328,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
         container.append(this.tabsContainer.element, this.contentContainer.element);
         this.header.hidden = !!options.hideHeader;
         this.locked = !!options.locked;
-        this.addDisposables(this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange, this.tabsContainer.onDrop((event) => {
+        this.addDisposables(this.tabsContainer.onDrop((event) => {
             this.handleDropEvent(event.event, 'center', event.index);
         }), this.contentContainer.onDidFocus(() => {
             this.accessor.doSetGroupActive(this.groupPanel, true);
@@ -3271,7 +3336,7 @@ class DockviewGroupPanelModel extends CompositeDisposable {
             // noop
         }), this.dropTarget.onDrop((event) => {
             this.handleDropEvent(event.nativeEvent, event.position);
-        }));
+        }), this._onMove, this._onDidChange, this._onDidDrop, this._onDidAddPanel, this._onDidRemovePanel, this._onDidActivePanelChange);
     }
     initialize() {
         var _a, _b;
@@ -3705,8 +3770,7 @@ class BaseGrid extends Resizable {
         this.layout(0, 0, true); // set some elements height/widths
         this.addDisposables(this.gridview.onDidChange(() => {
             this._bufferOnDidLayoutChange.fire();
-        }));
-        this.addDisposables(Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
+        }), Event.any(this.onDidAddGroup, this.onDidRemoveGroup, this.onDidActiveGroupChange)(() => {
             this._bufferOnDidLayoutChange.fire();
         }), this._bufferOnDidLayoutChange.onEvent(() => {
             this._onDidLayoutChange.fire();
@@ -3809,7 +3873,6 @@ class BaseGrid extends Resizable {
         this.gridview.layout(width, height);
     }
     dispose() {
-        super.dispose();
         this._onDidActiveGroupChange.dispose();
         this._onDidAddGroup.dispose();
         this._onDidRemoveGroup.dispose();
@@ -3818,6 +3881,7 @@ class BaseGrid extends Resizable {
             group.dispose();
         }
         this.gridview.dispose();
+        super.dispose();
     }
 }
 
@@ -3881,7 +3945,7 @@ class PanelApiImpl extends CompositeDisposable {
         //
         this._onUpdateParameters = new Emitter();
         this.onUpdateParameters = this._onUpdateParameters.event;
-        this.addDisposables(this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters, this.onDidFocusChange((event) => {
+        this.addDisposables(this.onDidFocusChange((event) => {
             this._isFocused = event.isFocused;
         }), this.onDidActiveChange((event) => {
             this._isActive = event.isActive;
@@ -3890,14 +3954,12 @@ class PanelApiImpl extends CompositeDisposable {
         }), this.onDidDimensionsChange((event) => {
             this._width = event.width;
             this._height = event.height;
-        }));
+        }), this.panelUpdatesDisposable, this._onDidDimensionChange, this._onDidChangeFocus, this._onDidVisibilityChange, this._onDidActiveChange, this._onFocusEvent, this._onActiveChange, this._onVisibilityChange, this._onUpdateParameters);
     }
     initialize(panel) {
         this.panelUpdatesDisposable.value = this._onUpdateParameters.event((parameters) => {
             panel.update({
-                params: {
-                    params: parameters,
-                },
+                params: parameters,
             });
         });
     }
@@ -3992,12 +4054,12 @@ class BasePanelView extends CompositeDisposable {
         this._element.style.height = '100%';
         this._element.style.width = '100%';
         this._element.style.overflow = 'hidden';
-        const { onDidFocus, onDidBlur } = trackFocus(this._element);
-        this.addDisposables(this.api, onDidFocus(() => {
+        const focusTracker = trackFocus(this._element);
+        this.addDisposables(this.api, focusTracker.onDidFocus(() => {
             this.api._onDidChangeFocus.fire({ isFocused: true });
-        }), onDidBlur(() => {
+        }), focusTracker.onDidBlur(() => {
             this.api._onDidChangeFocus.fire({ isFocused: false });
-        }));
+        }), focusTracker);
     }
     focus() {
         this.api._onFocusEvent.fire();
@@ -4018,7 +4080,18 @@ class BasePanelView extends CompositeDisposable {
     }
     update(event) {
         var _a, _b;
+        // merge the new parameters with the existing parameters
         this._params = Object.assign(Object.assign({}, this._params), { params: Object.assign(Object.assign({}, (_a = this._params) === null || _a === void 0 ? void 0 : _a.params), event.params) });
+        /**
+         * delete new keys that have a value of undefined,
+         * allow values of null
+         */
+        for (const key of Object.keys(event.params)) {
+            if (event.params[key] === undefined) {
+                delete this._params.params[key];
+            }
+        }
+        // update the view with the updated props
         (_b = this.part) === null || _b === void 0 ? void 0 : _b.update({ params: this._params.params });
     }
     toJSON() {
@@ -4032,9 +4105,9 @@ class BasePanelView extends CompositeDisposable {
     }
     dispose() {
         var _a;
-        super.dispose();
         this.api.dispose();
         (_a = this.part) === null || _a === void 0 ? void 0 : _a.dispose();
+        super.dispose();
     }
 }
 
@@ -4413,7 +4486,7 @@ class GridviewPanel extends BasePanelView {
             this._maximumHeight = options.maximumHeight;
         }
         this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
-        this.addDisposables(this._onDidChange, this.api.onVisibilityChange((event) => {
+        this.addDisposables(this.api.onVisibilityChange((event) => {
             const { isVisible } = event;
             const { accessor } = this._params;
             accessor.setVisible(this, isVisible);
@@ -4442,7 +4515,7 @@ class GridviewPanel extends BasePanelView {
                 height: event.height,
                 width: event.width,
             });
-        }));
+        }), this._onDidChange);
     }
     setVisible(isVisible) {
         this.api._onDidVisibilityChange.fire({ isVisible });
@@ -4599,7 +4672,7 @@ class DockviewPanelApiImpl extends GridviewPanelApiImpl {
         this.addDisposables(this.disposable, this._onDidTitleChange, this._onDidGroupChange, this._onDidActiveGroupChange);
     }
     setTitle(title) {
-        this.panel.update({ params: { title } });
+        this.panel.setTitle(title);
     }
     close() {
         this.group.model.closePanel(this.panel);
@@ -4664,12 +4737,18 @@ class DockviewPanel extends CompositeDisposable {
         }
     }
     update(event) {
-        const params = event.params;
-        this._params = Object.assign(Object.assign({}, (this._params || {})), event.params.params);
-        if (params.title !== this.title) {
-            this._title = params.title;
-            this.api._onDidTitleChange.fire({ title: params.title });
+        // merge the new parameters with the existing parameters
+        this._params = Object.assign(Object.assign({}, (this._params || {})), event.params);
+        /**
+         * delete new keys that have a value of undefined,
+         * allow values of null
+         */
+        for (const key of Object.keys(event.params)) {
+            if (event.params[key] === undefined) {
+                delete this._params[key];
+            }
         }
+        // update the view with the updated props
         this.view.update({
             params: {
                 params: this._params,
@@ -5045,7 +5124,7 @@ class DockviewComponent extends BaseGrid {
                 size: { type: 'pixels', value: 20 },
             },
         });
-        this.addDisposables(dropTarget, dropTarget.onDrop((event) => {
+        this.addDisposables(dropTarget.onDrop((event) => {
             const data = getPanelData();
             if (data) {
                 this.moveGroupOrPanel(this.orthogonalize(event.position), data.groupId, data.panelId || undefined, 'center');
@@ -5053,7 +5132,7 @@ class DockviewComponent extends BaseGrid {
             else {
                 this._onDidDrop.fire(Object.assign(Object.assign({}, event), { api: this._api, group: null, getData: getPanelData }));
             }
-        }));
+        }), dropTarget);
         this._api = new DockviewApi(this);
         this.updateWatermark();
     }
@@ -5377,31 +5456,33 @@ class DockviewComponent extends BaseGrid {
         }
         super.doRemoveGroup(group, { skipActive });
     }
-    moveGroupOrPanel(referenceGroup, groupId, itemId, target, index) {
+    moveGroupOrPanel(destinationGroup, sourceGroupId, sourceItemId, destinationTarget, destinationIndex) {
         var _a;
-        const sourceGroup = groupId
-            ? (_a = this._groups.get(groupId)) === null || _a === void 0 ? void 0 : _a.value
+        const sourceGroup = sourceGroupId
+            ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
             : undefined;
-        if (itemId === undefined) {
+        if (sourceItemId === undefined) {
             if (sourceGroup) {
-                this.moveGroup(sourceGroup, referenceGroup, target);
+                this.moveGroup(sourceGroup, destinationGroup, destinationTarget);
             }
             return;
         }
-        if (!target || target === 'center') {
-            const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                this.panels.find((panel) => panel.id === itemId);
+        if (!destinationTarget || destinationTarget === 'center') {
+            const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
+                this.panels.find((panel) => panel.id === sourceItemId);
             if (!groupItem) {
-                throw new Error(`No panel with id ${itemId}`);
+                throw new Error(`No panel with id ${sourceItemId}`);
             }
             if ((sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.size) === 0) {
                 this.doRemoveGroup(sourceGroup);
             }
-            referenceGroup.model.openPanel(groupItem, { index });
+            destinationGroup.model.openPanel(groupItem, {
+                index: destinationIndex,
+            });
         }
         else {
-            const referenceLocation = getGridLocation(referenceGroup.element);
-            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+            const referenceLocation = getGridLocation(destinationGroup.element);
+            const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
             if (sourceGroup && sourceGroup.size < 2) {
                 const [targetParentLocation, to] = tail(targetLocation);
                 const sourceLocation = getGridLocation(sourceGroup.element);
@@ -5419,18 +5500,18 @@ class DockviewComponent extends BaseGrid {
                         skipDispose: true,
                     });
                     // after deleting the group we need to re-evaulate the ref location
-                    const updatedReferenceLocation = getGridLocation(referenceGroup.element);
-                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, target);
+                    const updatedReferenceLocation = getGridLocation(destinationGroup.element);
+                    const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
                     this.doAddGroup(targetGroup, location);
                 }
             }
             else {
-                const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(itemId)) ||
-                    this.panels.find((panel) => panel.id === itemId);
+                const groupItem = (sourceGroup === null || sourceGroup === void 0 ? void 0 : sourceGroup.model.removePanel(sourceItemId)) ||
+                    this.panels.find((panel) => panel.id === sourceItemId);
                 if (!groupItem) {
-                    throw new Error(`No panel with id ${itemId}`);
+                    throw new Error(`No panel with id ${sourceItemId}`);
                 }
-                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
+                const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
                 const group = this.createGroupAtLocation(dropLocation);
                 group.model.openPanel(groupItem);
             }
@@ -5524,11 +5605,11 @@ class DockviewComponent extends BaseGrid {
         return (_a = Array.from(this._groups.values()).find((group) => group.value.model.containsPanel(panel))) === null || _a === void 0 ? void 0 : _a.value;
     }
     dispose() {
-        super.dispose();
         this._onDidActivePanelChange.dispose();
         this._onDidAddPanel.dispose();
         this._onDidRemovePanel.dispose();
         this._onDidLayoutFromJSON.dispose();
+        super.dispose();
     }
 }
 
@@ -5786,7 +5867,7 @@ class SplitviewComponent extends Resizable {
     }
     set splitview(value) {
         this._splitview = value;
-        this._disposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
+        this._splitviewChangeDisposable.value = new CompositeDisposable(this._splitview.onDidSashEnd(() => {
             this._onDidLayoutChange.fire(undefined);
         }), this._splitview.onDidAddView((e) => this._onDidAddView.fire(e)), this._splitview.onDidRemoveView((e) => this._onDidRemoveView.fire(e)));
     }
@@ -5808,7 +5889,7 @@ class SplitviewComponent extends Resizable {
     }
     constructor(options) {
         super(options.parentElement);
-        this._disposable = new MutableDisposable();
+        this._splitviewChangeDisposable = new MutableDisposable();
         this._panels = new Map();
         this._onDidLayoutfromJSON = new Emitter();
         this.onDidLayoutFromJSON = this._onDidLayoutfromJSON.event;
@@ -5826,7 +5907,7 @@ class SplitviewComponent extends Resizable {
             options.frameworkComponents = {};
         }
         this.splitview = new Splitview(this.element, options);
-        this.addDisposables(this._disposable, this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
+        this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
     }
     updateOptions(options) {
         const hasOrientationChanged = typeof options.orientation === 'string' &&
@@ -5864,15 +5945,15 @@ class SplitviewComponent extends Resizable {
         }
     }
     removePanel(panel, sizing) {
-        const disposable = this._panels.get(panel.id);
-        if (!disposable) {
+        const item = this._panels.get(panel.id);
+        if (!item) {
             throw new Error(`unknown splitview panel ${panel.id}`);
         }
-        disposable.disposable.dispose();
-        disposable.value.dispose();
+        item.dispose();
         this._panels.delete(panel.id);
         const index = this.panels.findIndex((_) => _ === panel);
-        this.splitview.removeView(index, sizing);
+        const removedView = this.splitview.removeView(index, sizing);
+        removedView.dispose();
         const panels = this.panels;
         if (panels.length > 0) {
             this.setActive(panels[panels.length - 1]);
@@ -5919,7 +6000,7 @@ class SplitviewComponent extends Resizable {
             }
             this.setActive(view, true);
         });
-        this._panels.set(view.id, { disposable, value: view });
+        this._panels.set(view.id, disposable);
     }
     toJSON() {
         var _a;
@@ -5992,20 +6073,26 @@ class SplitviewComponent extends Resizable {
         this._onDidLayoutfromJSON.fire();
     }
     clear() {
-        for (const [_, value] of this._panels.entries()) {
-            value.disposable.dispose();
-            value.value.dispose();
+        for (const disposable of this._panels.values()) {
+            disposable.dispose();
         }
         this._panels.clear();
-        this.splitview.dispose();
+        while (this.splitview.length > 0) {
+            const view = this.splitview.removeView(0, Sizing.Distribute, true);
+            view.dispose();
+        }
     }
     dispose() {
-        for (const [_, value] of this._panels.entries()) {
-            value.disposable.dispose();
-            value.value.dispose();
+        for (const disposable of this._panels.values()) {
+            disposable.dispose();
         }
         this._panels.clear();
+        const views = this.splitview.getViews();
+        this._splitviewChangeDisposable.dispose();
         this.splitview.dispose();
+        for (const view of views) {
+            view.dispose();
+        }
         super.dispose();
     }
 }