refactor: reduce code smells

packages/splitview/jest.config.js

@@ -1,22 +1,24 @@
-const package = require("./package");
+const { name } = require('./package');
 
-const baseConfig = require("../../jest.config.base");
+const baseConfig = require('../../jest.config.base');
 
-console.log("loaded");
+console.log('loaded');
 
 module.exports = {
     ...baseConfig,
-    roots: ["<rootDir>/packages/splitview"],
+    roots: ['<rootDir>/packages/splitview'],
-    modulePaths: ["<rootDir>/packages/splitview/src"],
+    modulePaths: ['<rootDir>/packages/splitview/src'],
-    displayName: {name: package.name, color: "blue"},
+    displayName: { name, color: 'blue' },
-    rootDir: "../../",
+    rootDir: '../../',
-    collectCoverageFrom:[
+    collectCoverageFrom: [
-        "<rootDir>/packages/splitview/src/**/*.{js,jsx,ts,tsx}",
+        '<rootDir>/packages/splitview/src/**/*.{js,jsx,ts,tsx}',
     ],
-    setupFiles: ["<rootDir>/packages/splitview/src/__tests__/__mocks__/resizeObserver.js"],
+    setupFiles: [
-    coveragePathIgnorePatterns: [
+        '<rootDir>/packages/splitview/src/__tests__/__mocks__/resizeObserver.js',
-        "/node_modules/",
     ],
-    modulePathIgnorePatterns: ["<rootDir>/packages/splitview/src/__tests__/__mocks__",],
+    coveragePathIgnorePatterns: ['/node_modules/'],
-    coverageDirectory: "coverage"
+    modulePathIgnorePatterns: [
-}
+        '<rootDir>/packages/splitview/src/__tests__/__mocks__',
+    ],
+    coverageDirectory: 'coverage',
+};

packages/splitview/src/api/component.api.ts

@@ -20,8 +20,8 @@ import { IGroupPanel } from '../groupview/groupPanel';
 import {
     AddPaneviewCompponentOptions,
     SerializedPaneview,
+    IPaneviewComponent,
 } from '../paneview/paneviewComponent';
-import { IPaneviewComponent } from '../paneview/paneviewComponent';
 import { IPaneviewPanel } from '../paneview/paneviewPanel';
 import {
     AddSplitviewComponentOptions,

packages/splitview/src/dockview/deserializer.ts

@@ -28,12 +28,10 @@ export class DefaultDeserializer implements IViewDeserializer {
             panels.push(panel);
         }
 
-        const group = this.layout.createGroup({
+        return this.layout.createGroup({
             panels,
             activePanel: panels.find((p) => p.id === active),
             id: node.data.id,
         });
-
-        return group;
     }
 }

packages/splitview/src/dockview/dockviewComponent.ts

@@ -1,9 +1,9 @@
 import {
     getRelativeLocation,
     SerializedGridObject,
+    getGridLocation,
 } from '../gridview/gridview';
 import { Position } from '../dnd/droptarget';
-import { getGridLocation } from '../gridview/gridview';
 import { tail, sequenceEquals } from '../array';
 import {
     GroupPanel,
@@ -744,7 +744,6 @@ export class DockviewComponent
             }
 
             referenceGroup.group.openPanel(groupItem, { index });
-            return;
         } else {
             const referenceLocation = getGridLocation(referenceGroup.element);
             const targetLocation = getRelativeLocation(
@@ -770,7 +769,7 @@ export class DockviewComponent
                     const targetGroup = this.doRemoveGroup(sourceGroup, {
                         skipActive: true,
                         skipDispose: true,
-                    }) as GroupviewPanel;
+                    });
 
                     // after deleting the group we need to re-evaulate the ref location
                     const updatedReferenceLocation = getGridLocation(

packages/splitview/src/dockview/options.ts

@@ -9,7 +9,6 @@ import {
     WatermarkPart,
 } from '../groupview/types';
 import { GroupviewPanel } from '../groupview/v2/groupviewPanel';
-import { IGroupPanelView } from '../react/dockview/v2/defaultGroupPanelView';
 import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
 

packages/splitview/src/dom.ts

@@ -11,8 +11,8 @@ export function watchElementResize(
     cb: (entry: ResizeObserverEntry) => void
 ): IDisposable {
     const observer = new ResizeObserver((entires) => {
-        const element = entires[0];
+        const firstEntry = entires[0];
-        cb(element);
+        cb(firstEntry);
     });
 
     observer.observe(element);

packages/splitview/src/gridview/baseComponentGridview.ts

@@ -3,9 +3,12 @@ import { getGridLocation, Gridview, IGridView } from './gridview';
 import { Position } from '../dnd/droptarget';
 import { CompositeDisposable, IValueDisposable } from '../lifecycle';
 import { sequentialNumberGenerator } from '../math';
-import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
+import {
+    ISplitviewStyles,
+    Orientation,
+    Sizing,
+} from '../splitview/core/splitview';
 import { IPanel } from '../panel/types';
-import { Sizing } from '../splitview/core/splitview';
 import { MovementOptions2 } from '../dockview/options';
 import { GroupChangeEvent, GroupChangeKind } from '../groupview/v2/component';
 

packages/splitview/src/gridview/basePanelView.ts

@@ -104,14 +104,17 @@ export abstract class BasePanelView<T extends PanelApi>
 
     toJSON(): BasePanelViewState {
         const state = this.api.getState();
+
+        const params = this.params?.params
+            ? Object.keys(this.params.params).length > 0
+                ? this.params.params
+                : undefined
+            : undefined;
+
         return {
             id: this.id,
             component: this.component,
-            params: this.params?.params
+            params,
-                ? Object.keys(this.params.params).length > 0
-                    ? this.params.params
-                    : undefined
-                : undefined,
             state: Object.keys(state).length === 0 ? undefined : state,
         };
     }

packages/splitview/src/gridview/gridview.ts

@@ -319,7 +319,7 @@ export class Gridview implements IDisposable {
     ): Node {
         let result: Node;
         if (node.type === 'branch') {
-            const serializedChildren = node.data as ISerializedNode[];
+            const serializedChildren = node.data;
             const children = serializedChildren.map((serializedChild) => {
                 return {
                     node: this._deserializeNode(

packages/splitview/src/gridview/gridviewComponent.ts

@@ -1,6 +1,9 @@
-import { getRelativeLocation, SerializedGridObject } from './gridview';
+import {
+    getRelativeLocation,
+    SerializedGridObject,
+    getGridLocation,
+} from './gridview';
 import { Position } from '../dnd/droptarget';
-import { getGridLocation } from './gridview';
 import { tail, sequenceEquals } from '../array';
 import { CompositeDisposable } from '../lifecycle';
 import { IPanelDeserializer } from '../dockview/deserializer';
@@ -155,7 +158,7 @@ export class GridviewComponent
     }
 
     public fromJSON(data: SerializedGridview, deferComponentLayout?: boolean) {
-        const { grid, activePanel } = data as SerializedGridview;
+        const { grid, activePanel } = data;
 
         this.gridview.clear();
         this.groups.clear();

packages/splitview/src/groupview/groupPanel.ts

@@ -5,18 +5,12 @@ import {
     CompositeDisposable,
     IDisposable,
 } from '../lifecycle';
-import {
+import { HeaderPartInitParameters } from './types';
-    HeaderPartInitParameters,
-    IContentRenderer,
-    ITabRenderer,
-} from './types';
 import { IPanel, PanelInitParameters, PanelUpdateEvent } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
-import { DefaultTab } from '../dockview/components/tab/defaultTab';
 import { GroupviewPanel } from './v2/groupviewPanel';
 import { GroupChangeKind } from './v2/component';
 import { IGroupPanelView } from '../react/dockview/v2/defaultGroupPanelView';
-import { IGridPanelView } from '../gridview/baseComponentGridview';
 
 export interface IGroupPanelInitParameters
     extends PanelInitParameters,

packages/splitview/src/groupview/tab.ts

@@ -1,6 +1,6 @@
 import { addDisposableListener, Emitter, Event } from '../events';
 import { Droptarget, DroptargetEvent } from '../dnd/droptarget';
-import { CompositeDisposable, IDisposable } from '../lifecycle';
+import { CompositeDisposable } from '../lifecycle';
 import {
     DATA_KEY,
     DragType,

packages/splitview/src/groupview/v2/component.ts

@@ -586,7 +586,7 @@ export class GroupComponent extends CompositeDisposable implements IGroupview {
 
         this.tabsContainer.openPanel(panel, index);
 
-        this.contentContainer.openPanel(panel!);
+        this.contentContainer.openPanel(panel);
 
         this.tabsContainer.show();
         this.contentContainer.show();

packages/splitview/src/groupview/v2/groupviewPanel.ts

@@ -4,11 +4,8 @@ import {
     GridviewPanelApi,
     IGridviewPanelApi,
 } from '../../api/gridviewPanelApi';
-import { GroupComponent, GroupOptions, GroupPanelViewState } from './component';
+import { GroupComponent, GroupOptions } from './component';
-import {
+import { GridviewPanel } from '../../gridview/gridviewPanel';
-    GridPanelViewState,
-    GridviewPanel,
-} from '../../gridview/gridviewPanel';
 
 interface IGroupApi extends IGridviewPanelApi {}
 

packages/splitview/src/hostedContainer.ts

@@ -1,5 +1,5 @@
 import { trackFocus } from './dom';
-import { addDisposableListener, Emitter, Event } from './events';
+import { Emitter, Event } from './events';
 import { IDisposable } from './lifecycle';
 
 export interface HostedContainerOptions {

packages/splitview/src/panel/componentFactory.ts

@@ -1,4 +1,3 @@
-import { Orientation } from '../splitview/core/splitview';
 import { FrameworkFactory } from '../types';
 
 export function createComponent<T>(
@@ -50,5 +49,5 @@ export function createComponent<T>(
         );
     }
 
-    return new Component(id, componentName!) as T;
+    return new Component(id, componentName!);
 }

packages/splitview/src/paneview/paneview.ts

@@ -120,8 +120,8 @@ export class Paneview extends CompositeDisposable implements IDisposable {
         return this.splitview.getViewSize(index);
     }
 
-    public getPanes() {
+    public getPanes(): PaneviewPanel[] {
-        return this.splitview.getViews() as PaneviewPanel[];
+        return this.splitview.getViews();
     }
 
     public removePane(index: number) {

packages/splitview/src/paneview/paneviewComponent.ts

@@ -272,7 +272,7 @@ export class PaneviewComponent
     }
 
     getPanels(): PaneviewPanel[] {
-        return this.paneview.getPanes() as PaneviewPanel[];
+        return this.paneview.getPanes();
     }
 
     removePanel(panel: PaneviewPanel) {

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

@@ -12,7 +12,6 @@ import { usePortalsLifecycle } from '../react';
 import { DockviewApi } from '../../api/component.api';
 import { ReactWatermarkPart } from './reactWatermarkPart';
 import { PanelCollection } from '../types';
-import { IDisposable } from '../../lifecycle';
 import { watchElementResize } from '../../dom';
 import { IContentRenderer, ITabRenderer } from '../../groupview/types';
 

packages/splitview/src/react/paneview/paneview.tsx

@@ -6,7 +6,7 @@ import {
 } from '../../paneview/paneviewComponent';
 import { usePortalsLifecycle } from '../react';
 import { PaneviewApi } from '../../api/component.api';
-import { PanelBody, PanelHeader } from './view';
+import { PanePanelSection } from './view';
 import { PanelCollection } from '../types';
 import { watchElementResize } from '../../dom';
 
@@ -66,7 +66,9 @@ export const PaneviewReact: React.FunctionComponent<IPaneviewReactProps> = (
                         componentId,
                         component: any
                     ) => {
-                        return new PanelHeader(id, component, { addPortal });
+                        return new PanePanelSection(id, component, {
+                            addPortal,
+                        });
                     },
                 },
                 body: {
@@ -75,7 +77,9 @@ export const PaneviewReact: React.FunctionComponent<IPaneviewReactProps> = (
                         componentId,
                         component: any
                     ) => {
-                        return new PanelBody(id, component, { addPortal });
+                        return new PanePanelSection(id, component, {
+                            addPortal,
+                        });
                     },
                 },
             },

packages/splitview/src/react/paneview/view.tsx

@@ -7,7 +7,7 @@ import {
 import { ReactPart, ReactPortalStore } from '../react';
 import { IPaneviewPanelProps } from './paneview';
 
-export class PanelBody implements IPaneBodyPart {
+export class PanePanelSection implements IPaneBodyPart {
     private _element: HTMLElement;
     private part?: ReactPart<IPaneviewPanelProps>;
 
@@ -17,58 +17,7 @@ export class PanelBody implements IPaneBodyPart {
 
     constructor(
         public readonly id: string,
-        private readonly component: React.FunctionComponent<
+        private readonly component: React.FunctionComponent<IPaneviewPanelProps>,
-            IPaneviewPanelProps
-        >,
-        private readonly reactPortalStore: ReactPortalStore
-    ) {
-        this._element = document.createElement('div');
-        this._element.style.height = '100%';
-        this._element.style.width = '100%';
-    }
-
-    public init(parameters: PanePanelComponentInitParameter): void {
-        this.part = new ReactPart(
-            this.element,
-            this.reactPortalStore,
-            this.component,
-            {
-                ...parameters.params,
-                api: parameters.api,
-                title: parameters.title,
-                containerApi: parameters.containerApi,
-            }
-        );
-    }
-
-    public toJSON() {
-        return {
-            id: this.id,
-        };
-    }
-
-    public update(params: PanelUpdateEvent) {
-        this.part?.update(params.params);
-    }
-
-    public dispose() {
-        this.part?.dispose();
-    }
-}
-
-export class PanelHeader implements IPaneBodyPart {
-    private _element: HTMLElement;
-    private part?: ReactPart<IPaneviewPanelProps>;
-
-    get element() {
-        return this._element;
-    }
-
-    constructor(
-        public readonly id: string,
-        private readonly component: React.FunctionComponent<
-            IPaneviewPanelProps
-        >,
         private readonly reactPortalStore: ReactPortalStore
     ) {
         this._element = document.createElement('div');

packages/splitview/src/splitview/core/options.ts

@@ -1,11 +1,6 @@
 import { IPanel, PanelInitParameters } from '../../panel/types';
-import {
+import { IView, SplitViewOptions, LayoutPriority } from './splitview';
-    IView,
+import { FrameworkFactory } from '../../types';
-    SplitViewOptions,
-    LayoutPriority,
-    Orientation,
-} from './splitview';
-import { Constructor, FrameworkFactory } from '../../types';
 import { SplitviewPanel } from '../splitviewPanel';
 import { SplitviewApi } from '../../api/component.api';
 

packages/splitview/src/splitview/splitviewComponent.ts

@@ -171,7 +171,7 @@ export class SplitviewComponent
     }
 
     getPanels(): SplitviewPanel[] {
-        return this.splitview.getViews() as SplitviewPanel[];
+        return this.splitview.getViews();
     }
 
     removePanel(panel: SplitviewPanel, sizing?: Sizing) {