mathuo · mathuo · Jul 3, 2026 · Jul 3, 2026 · Jul 4, 2026 · Jul 4, 2026
diff --git a/packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts b/packages/dockview-core/src/dnd/dropTargetAnchorContainer.ts
@@ -34,9 +34,7 @@ export class DropTargetAnchorContainer extends CompositeDisposable {
         return {
             clear: () => {
                 if (this._model) {
-                    this._model.root.parentElement?.removeChild(
-                        this._model.root
-                    );
+                    this._model.root.remove();
                 }
                 this._model = undefined;
             },

diff --git a/packages/dockview-core/src/dnd/pointer/pointerDragController.ts b/packages/dockview-core/src/dnd/pointer/pointerDragController.ts
@@ -140,7 +140,7 @@ export class PointerDragController extends CompositeDisposable {
             targetWindow,
             'pointermove',
             (e) => {
-                if (!this._active || e.pointerId !== this._active.pointerId) {
+                if (e.pointerId !== this._active?.pointerId) {
                     return;
                 }
                 this._handleMove(e);
@@ -151,7 +151,7 @@ export class PointerDragController extends CompositeDisposable {
             targetWindow,
             'pointerup',
             (e) => {
-                if (!this._active || e.pointerId !== this._active.pointerId) {
+                if (e.pointerId !== this._active?.pointerId) {
                     return;
                 }
                 this._handleEnd(e, true);
@@ -162,7 +162,7 @@ export class PointerDragController extends CompositeDisposable {
             targetWindow,
             'pointercancel',
             (e) => {
-                if (!this._active || e.pointerId !== this._active.pointerId) {
+                if (e.pointerId !== this._active?.pointerId) {
                     return;
                 }
                 this._handleEnd(e, false);

diff --git a/packages/dockview-core/src/dockview/components/panel/content.ts b/packages/dockview-core/src/dockview/components/panel/content.ts
@@ -101,7 +101,7 @@ export class ContentContainer
                 return false;
             }
 
-            if (data && data.viewId === this.accessor.id) {
+            if (data?.viewId === this.accessor.id) {
                 return true;
             }
 
@@ -182,7 +182,7 @@ export class ContentContainer
             /**
              * If the currently attached panel is mounted directly to the content then remove it
              */
-            this._element.removeChild(this.panel.view.content.element);
+            this.panel.view.content.element.remove();
             this.panel.view.content.onHide?.();
         }
 
@@ -207,7 +207,7 @@ export class ContentContainer
                 if (
                     panel.view.content.element.parentElement === this._element
                 ) {
-                    this._element.removeChild(panel.view.content.element);
+                    panel.view.content.element.remove();
                 }
                 container = this.group.renderContainer.attach({
                     panel,
@@ -250,9 +250,7 @@ export class ContentContainer
     public closePanel(): void {
         if (this.panel) {
             if (this.panel.api.renderer === 'onlyWhenVisible') {
-                this.panel.view.content.element.parentElement?.removeChild(
-                    this.panel.view.content.element
-                );
+                this.panel.view.content.element.remove();
                 this.panel.view.content.onHide?.();
             }
         }

diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts
@@ -101,7 +101,7 @@ export class Tab extends CompositeDisposable {
 
             const data = getPanelData();
 
-            if (data && this.accessor.id === data.viewId) {
+            if (this.accessor.id === data?.viewId) {
                 // Smooth-reorder takes over the in-flight visual when active,
                 // so individual tab overlays are suppressed for internal drags.
                 if (this.accessor.options.theme?.tabAnimation === 'smooth') {
@@ -265,7 +265,7 @@ export class Tab extends CompositeDisposable {
 
     public setContent(part: ITabRenderer): void {
         if (this.content) {
-            this._element.removeChild(this.content.element);
+            this.content.element.remove();
         }
         this.content = part;
         this._element.appendChild(this.content.element);

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts b/packages/dockview-core/src/dockview/components/titlebar/tabGroupIndicator.ts
@@ -204,11 +204,8 @@ abstract class BaseTabGroupIndicator implements ITabGroupIndicator {
                 tg.collapsed ||
                 tg.panelIds.some((pid) => {
                     const te = tabMap.get(pid);
-                    return (
-                        te &&
-                        te.value.element.classList.contains(
-                            'dv-tab--group-expanding'
-                        )
+                    return te?.value.element.classList.contains(
+                        'dv-tab--group-expanding'
                     );
                 });
 
@@ -342,7 +339,9 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
         // Ensure SVG + path child exists (created once, reused)
         let svg = underline.firstElementChild as SVGSVGElement | null;
         let path: SVGPathElement;
-        if (!svg || svg.tagName !== 'svg') {
+        if (svg?.tagName === 'svg') {
+            path = svg.firstElementChild as SVGPathElement;
+        } else {
             underline.replaceChildren();
             svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
             svg.style.display = 'block';
@@ -353,8 +352,6 @@ export class WrapTabGroupIndicator extends BaseTabGroupIndicator {
             path.setAttribute('fill', 'none');
             svg.appendChild(path);
             underline.appendChild(svg);
-        } else {
-            path = svg.firstElementChild as SVGPathElement;
         }
 
         path.setAttribute('stroke', color);

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabGroups.ts b/packages/dockview-core/src/dockview/components/titlebar/tabGroups.ts
@@ -530,7 +530,7 @@ export class TabGroupManager {
                     return false;
                 }
                 const data = getPanelData();
-                if (data && this._ctx.accessor.id === data.viewId) {
+                if (this._ctx.accessor.id === data?.viewId) {
                     if (
                         this._ctx.accessor.options.theme?.tabAnimation ===
                         'smooth'

diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.ts b/packages/dockview-core/src/dockview/components/titlebar/tabs.ts
@@ -1160,7 +1160,7 @@ export class Tabs extends CompositeDisposable {
         }
         const data = getPanelData();
         const sourceIndex =
-            data && data.groupId === this.group.id && data.panelId
+            data?.groupId === this.group.id && data?.panelId
                 ? this._tabs.findIndex((x) => x.value.panel.id === data.panelId)
                 : -1;
         const adjustedIndex =

diff --git a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts
@@ -90,7 +90,7 @@ export class VoidContainer extends CompositeDisposable {
 
             const data = getPanelData();
 
-            if (data && this.accessor.id === data.viewId) {
+            if (this.accessor.id === data?.viewId) {
                 return true;
             }
 

diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -441,8 +441,7 @@ let _hasWarnedUsingCoreDirectly = false;
 function warnIfUsingCoreDirectly(): void {
     if (
         typeof process !== 'undefined' &&
-        process.env &&
-        process.env.NODE_ENV === 'production'
+        process.env?.NODE_ENV === 'production'
     ) {
         return;
     }
@@ -1014,7 +1013,7 @@ export class DockviewComponent
         // The shell always wraps the dockview element so edge groups can be
         // added at any time via addEdgeGroup() without re-parenting the DOM.
         this.disableResizing = true;
-        container.removeChild(this.element);
+        this.element.remove();
 
         this._shellManager = new ShellManager(
             container,
@@ -3321,15 +3320,19 @@ export class DockviewComponent
 
     removePanel(
         panel: IDockviewPanel,
-        options: {
-            removeEmptyGroup: boolean;
+        options?: {
+            removeEmptyGroup?: boolean;
             skipDispose?: boolean;
             skipSetActiveGroup?: boolean;
-        } = {
-            removeEmptyGroup: true,
         }
     ): void {
-        this.mutation('remove', () => this._doRemovePanel(panel, options));
+        this.mutation('remove', () =>
+            this._doRemovePanel(panel, {
+                removeEmptyGroup: options?.removeEmptyGroup ?? true,
+                skipDispose: options?.skipDispose,
+                skipSetActiveGroup: options?.skipSetActiveGroup,
+            })
+        );
     }
 
     private _doRemovePanel(
@@ -3338,8 +3341,6 @@ export class DockviewComponent
             removeEmptyGroup: boolean;
             skipDispose?: boolean;
             skipSetActiveGroup?: boolean;
-        } = {
-            removeEmptyGroup: true,
         }
     ): void {
         const group = panel.group;
@@ -3641,7 +3642,7 @@ export class DockviewComponent
                     const refGroup = selectedGroup.referenceGroup
                         ? this.getPanel(selectedGroup.referenceGroup)
                         : undefined;
-                    if (refGroup && refGroup.panels.length === 0) {
+                    if (refGroup?.panels.length === 0) {
                         this.removeGroup(refGroup);
                     }
                 }

diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts
@@ -788,7 +788,7 @@ export class DockviewGroupPanelModel
 
         // Remove from any existing group first
         const existingGroup = this.getTabGroupForPanel(panelId);
-        if (existingGroup && existingGroup.id === tabGroupId) {
+        if (existingGroup?.id === tabGroupId) {
             return; // already in this group — no mutation
         }
 
@@ -818,7 +818,7 @@ export class DockviewGroupPanelModel
         newIndex: number
     ): void {
         const tabGroup = this._tabGroupMap.get(tabGroupId);
-        if (!tabGroup || !tabGroup.containsPanel(panelId)) {
+        if (!tabGroup?.containsPanel(panelId)) {
             return;
         }
 
@@ -1090,7 +1090,7 @@ export class DockviewGroupPanelModel
         for (let i = activePanelIndex + 1; i < this._panels.length; i++) {
             const candidate = this._panels[i];
             const candidateGroup = this._findTabGroupForPanel(candidate.id);
-            if (!candidateGroup || !candidateGroup.collapsed) {
+            if (!candidateGroup?.collapsed) {
                 this.doSetActivePanel(candidate);
                 this.updateContainer();
                 return;
@@ -1100,7 +1100,7 @@ export class DockviewGroupPanelModel
         for (let i = activePanelIndex - 1; i >= 0; i--) {
             const candidate = this._panels[i];
             const candidateGroup = this._findTabGroupForPanel(candidate.id);
-            if (!candidateGroup || !candidateGroup.collapsed) {
+            if (!candidateGroup?.collapsed) {
                 this.doSetActivePanel(candidate);
                 this.updateContainer();
                 return;
@@ -1473,7 +1473,7 @@ export class DockviewGroupPanelModel
         if (!this._activePanel && this.panels.length > 0) {
             const candidate = this._panels.find((p) => {
                 const tg = this._findTabGroupForPanel(p.id);
-                return !tg || !tg.collapsed;
+                return !tg?.collapsed;
             });
             if (candidate) {
                 this.doSetActivePanel(candidate);

diff --git a/packages/dockview-core/src/dockview/dockviewShell.ts b/packages/dockview-core/src/dockview/dockviewShell.ts
@@ -891,6 +891,6 @@ export class ShellManager implements IDisposable {
 
     dispose(): void {
         this._disposables.dispose();
-        this._shellElement.parentElement?.removeChild(this._shellElement);
+        this._shellElement.remove();
     }
 }
diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts
@@ -197,7 +197,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
                 this.forceRelayout();
             }),
             Disposable.from(() => {
-                this.element.parentElement?.removeChild(this.element);
+                this.element.remove();
             }),
             this.gridview.onDidChange(() => {
                 this._bufferOnDidLayoutChange.fire();

diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
@@ -682,7 +682,7 @@ export class Gridview implements IDisposable {
         if (oldRoot) {
             oldRoot.dispose();
             this._maximizedNode = undefined;
-            this.element.removeChild(oldRoot.element);
+            oldRoot.element.remove();
         }
 
         this._root = root;

diff --git a/packages/dockview-core/src/overlay/overlayRenderContainer.ts b/packages/dockview-core/src/overlay/overlayRenderContainer.ts
@@ -28,7 +28,7 @@ class PositionCache {
         height: number;
     } {
         const cached = this.cache.get(element);
-        if (cached && cached.frameId === this.currentFrameId) {
+        if (cached?.frameId === this.currentFrameId) {
             return cached.rect;
         }
 
@@ -321,10 +321,10 @@ export class OverlayRenderContainer extends CompositeDisposable {
 
         this.map[panel.api.id].destroy = Disposable.from(() => {
             if (contentElement.parentElement === focusContainer) {
-                focusContainer.removeChild(contentElement);
+                contentElement.remove();
             }
 
-            focusContainer.parentElement?.removeChild(focusContainer);
+            focusContainer.remove();
         });
 
         correctLayerPosition();

diff --git a/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts b/packages/dockview-core/src/paneview/draggablePaneviewPanel.ts
@@ -175,7 +175,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
     private onDrop(event: DroptargetEvent): void {
         const data = getPaneData();
 
-        if (!data || data.viewId !== this.accessor.id) {
+        if (data?.viewId !== this.accessor.id) {
             // if there is no local drag event for this panel
             // or if the drag event was creating by another Paneview instance
             this._onDidDrop.fire({

diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts
@@ -414,7 +414,7 @@ export class Splitview {
         const viewItem = new ViewItem(container, view, viewSize, {
             dispose: () => {
                 disposable.dispose();
-                this.viewContainer.removeChild(container);
+                container.remove();
             },
         });
 
@@ -572,7 +572,7 @@ export class Splitview {
                 container: sash,
                 disposable: () => {
                     sash.removeEventListener('pointerdown', onPointerStart);
-                    this.sashContainer.removeChild(sash);
+                    sash.remove();
                 },
             };
 
@@ -643,7 +643,7 @@ export class Splitview {
             this.relayout();
         }
 
-        if (sizing && sizing.type === 'distribute') {
+        if (sizing?.type === 'distribute') {
             this.distributeViewSizes();
         }
 
@@ -1160,7 +1160,7 @@ export class Splitview {
 
         for (let i = 0; i < this.element.children.length; i++) {
             if (this.element.children.item(i) === this.element) {
-                this.element.removeChild(this.element);
+                this.element.remove();
                 break;
             }
         }

diff --git a/packages/dockview-core/src/theme/_space-mixin.scss b/packages/dockview-core/src/theme/_space-mixin.scss
@@ -27,7 +27,7 @@
     // dimensions don't overflow the content box and trigger scrollbars.
     // .dv-dockview already has no padding, so this is a defensive zero that
     // guarantees the inner element never picks up the spaced inset.
-    & .dv-dockview {
+    .dv-dockview {
         padding: 0;
     }
 

diff --git a/packages/dockview-vue/src/utils.ts b/packages/dockview-vue/src/utils.ts
@@ -57,7 +57,7 @@ export function findComponent(
     name: string,
     components?: Record<string, VueComponent | undefined>
 ): VueComponent | null {
-    if (components && components[name]) {
+    if (components?.[name]) {
         return components[name] as VueComponent;
     }