feat: api enhancements

- reduce scope of public api
- expose params field on panel api

packages/dockview/src/api/component.api.ts

@@ -13,14 +13,14 @@ import {
     IGridviewComponent,
     SerializedGridview,
 } from '../gridview/gridviewComponent';
-import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
+import { IGridviewPanel } from '../gridview/gridviewPanel';
 import { IGroupPanel } from '../groupview/groupPanel';
 import {
     AddPaneviewCompponentOptions,
     SerializedPaneview,
     IPaneviewComponent,
 } from '../paneview/paneviewComponent';
-import { IPaneviewPanel, PaneviewPanel } from '../paneview/paneviewPanel';
+import { IPaneviewPanel } from '../paneview/paneviewPanel';
 import {
     AddSplitviewComponentOptions,
     ISplitviewComponent,
@@ -29,7 +29,7 @@ import {
 } from '../splitview/splitviewComponent';
 import { IView, Orientation, Sizing } from '../splitview/core/splitview';
 import { ISplitviewPanel } from '../splitview/splitviewPanel';
-import { GroupviewPanel } from '../groupview/groupviewPanel';
+import { GroupviewPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
 import { Emitter, Event } from '../events';
 import { IDisposable } from '../lifecycle';
 import { PaneviewDropEvent } from '../react';
@@ -156,11 +156,11 @@ export class PaneviewApi implements CommonApi {
         return this.component.onDidLayoutChange;
     }
 
-    get onDidAddView(): Event<PaneviewPanel> {
+    get onDidAddView(): Event<IPaneviewPanel> {
         return this.component.onDidAddView;
     }
 
-    get onDidRemoveView(): Event<PaneviewPanel> {
+    get onDidRemoveView(): Event<IPaneviewPanel> {
         return this.component.onDidRemoveView;
     }
 
@@ -255,7 +255,7 @@ export class GridviewApi implements CommonApi {
         return this.component.onDidLayoutChange;
     }
 
-    get panels(): GridviewPanel[] {
+    get panels(): IGridviewPanel[] {
         return this.component.groups;
     }
 
@@ -296,7 +296,7 @@ export class GridviewApi implements CommonApi {
         this.component.resizeToFit();
     }
 
-    getPanel(id: string): GridviewPanel | undefined {
+    getPanel(id: string): IGridviewPanel | undefined {
         return this.component.getPanel(id);
     }
 
@@ -366,7 +366,7 @@ export class DockviewApi implements CommonApi {
         return this.component.panels;
     }
 
-    get groups(): GroupviewPanel[] {
+    get groups(): IGroupviewPanel[] {
         return this.component.groups;
     }
 
@@ -374,7 +374,7 @@ export class DockviewApi implements CommonApi {
         return this.component.activePanel;
     }
 
-    get activeGroup(): GroupviewPanel | undefined {
+    get activeGroup(): IGroupviewPanel | undefined {
         return this.component.activeGroup;
     }
 
@@ -428,15 +428,15 @@ export class DockviewApi implements CommonApi {
         return this.component.closeAllGroups();
     }
 
-    removeGroup(group: GroupviewPanel): void {
+    removeGroup(group: IGroupviewPanel): void {
-        this.component.removeGroup(group);
+        this.component.removeGroup(<GroupviewPanel>group);
     }
 
     resizeToFit(): void {
         return this.component.resizeToFit();
     }
 
-    getGroup(id: string): GroupviewPanel | undefined {
+    getGroup(id: string): IGroupviewPanel | undefined {
         return this.component.getPanel(id);
     }
 

packages/dockview/src/events.ts

@@ -61,9 +61,9 @@ export class Emitter<T> implements IDisposable {
 
     public fire(e: T) {
         this._last = e;
-        this._listeners.forEach((listener) => {
+        for (const listener of this._listeners) {
             listener(e);
-        });
+        }
     }
 
     public dispose() {

packages/dockview/src/gridview/basePanelView.ts

@@ -11,8 +11,8 @@ import { PanelApiImpl } from '../api/panelApi';
 export interface BasePanelViewState {
     id: string;
     component: string;
-    params?: { [key: string]: any };
+    params?: Record<string, any>;
-    state?: { [key: string]: any };
+    state?: Record<string, any>;
 }
 
 export interface BasePanelViewExported<T extends PanelApiImpl> {
@@ -20,9 +20,9 @@ export interface BasePanelViewExported<T extends PanelApiImpl> {
     readonly api: T;
     readonly width: number;
     readonly height: number;
+    readonly params: Record<string, any> | undefined;
     focus(): void;
     toJSON(): object;
-    update(params: PanelUpdateEvent): void;
 }
 
 export abstract class BasePanelView<T extends PanelApiImpl>
@@ -33,7 +33,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
     private _width = 0;
     private _element: HTMLElement;
     protected part?: IFrameworkPart;
-    protected params?: PanelInitParameters;
+    protected _params?: PanelInitParameters;
 
     /**
      * Provide an IFrameworkPart that will determine the rendered UI of this view piece.
@@ -52,6 +52,10 @@ export abstract class BasePanelView<T extends PanelApiImpl>
         return this._height;
     }
 
+    get params(): Record<string, any> | undefined {
+        return this._params?.params;
+    }
+
     constructor(
         public readonly id: string,
         protected readonly component: string,
@@ -89,32 +93,32 @@ export abstract class BasePanelView<T extends PanelApiImpl>
         this.api._onDidPanelDimensionChange.fire({ width, height });
 
         if (this.part) {
-            if (this.params) {
+            if (this._params) {
-                this.part.update(this.params.params);
+                this.part.update(this._params.params);
             }
         }
     }
 
     init(parameters: PanelInitParameters): void {
-        this.params = parameters;
+        this._params = parameters;
         this.part = this.getComponent();
     }
 
     update(event: PanelUpdateEvent) {
-        this.params = {
+        this._params = {
-            ...this.params,
+            ...this._params,
             params: {
-                ...this.params?.params,
+                ...this._params?.params,
                 ...event.params,
             },
         };
-        this.part?.update({ params: this.params.params });
+        this.part?.update({ params: this._params.params });
     }
 
     toJSON(): BasePanelViewState {
         const state = this.api.getState();
 
-        const params = this.params?.params ?? {};
+        const params = this._params?.params ?? {};
 
         return {
             id: this.id,

packages/dockview/src/gridview/gridviewPanel.ts

@@ -131,11 +131,11 @@ export abstract class GridviewPanel
         this.addDisposables(
             this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params as GridviewInitParameters;
+                const { containerApi } = this._params as GridviewInitParameters;
                 containerApi.setVisible(this, isVisible);
             }),
             this.api.onActiveChange(() => {
-                const { containerApi } = this.params as GridviewInitParameters;
+                const { containerApi } = this._params as GridviewInitParameters;
                 containerApi.setActive(this);
             }),
             this.api.onDidConstraintsChangeInternal((event) => {

packages/dockview/src/groupview/groupviewPanel.ts

@@ -2,9 +2,13 @@ import { IFrameworkPart } from '../panel/types';
 import { IDockviewComponent } from '../dockview/dockviewComponent';
 import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
 import { Groupview, GroupOptions } from './groupview';
-import { GridviewPanel } from '../gridview/gridviewPanel';
+import { GridviewPanel, IGridviewPanel } from '../gridview/gridviewPanel';
 
-export class GroupviewPanel extends GridviewPanel {
+export interface IGroupviewPanel extends IGridviewPanel {
+    model: Groupview;
+}
+
+export class GroupviewPanel extends GridviewPanel implements IGroupviewPanel {
     private readonly _model: Groupview;
 
     get model(): Groupview {

packages/dockview/src/paneview/draggablePaneviewPanel.ts

@@ -112,7 +112,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
                     return;
                 }
 
-                const containerApi = (this.params! as PanePanelInitParameter)
+                const containerApi = (this._params! as PanePanelInitParameter)
                     .containerApi;
                 const panelId = data.paneId;
 

packages/dockview/src/paneview/paneviewPanel.ts

@@ -285,7 +285,7 @@ export abstract class PaneviewPanel
     }
 
     toJSON(): PanePanelViewState {
-        const params = this.params as PanePanelInitParameter;
+        const params = this._params as PanePanelInitParameter;
         return {
             ...super.toJSON(),
             headerComponent: this.headerComponent,

packages/dockview/src/react/gridview/view.ts

@@ -21,9 +21,9 @@ export class ReactGridPanelView extends GridviewPanel {
             this.reactPortalStore,
             this.reactComponent,
             {
-                params: this.params?.params || {},
+                params: this._params?.params || {},
                 api: this.api,
-                containerApi: (this.params as GridviewInitParameters)
+                containerApi: (this._params as GridviewInitParameters)
                     .containerApi,
             }
         );

packages/dockview/src/react/splitview/view.ts

@@ -19,9 +19,9 @@ export class ReactPanelView extends SplitviewPanel {
             this.reactPortalStore,
             this.reactComponent,
             {
-                params: this.params?.params || {},
+                params: this._params?.params || {},
                 api: this.api,
-                containerApi: (this.params as PanelViewInitParameters)
+                containerApi: (this._params as PanelViewInitParameters)
                     .containerApi,
             }
         );

packages/dockview/src/splitview/splitviewPanel.ts

@@ -19,7 +19,8 @@ export interface ISplitviewPanel
 
 export abstract class SplitviewPanel
     extends BasePanelView<SplitviewPanelApiImpl>
-    implements ISerializableView, ISplitviewPanel {
+    implements ISerializableView, ISplitviewPanel
+{
     private _evaluatedMinimumSize = 0;
     private _evaluatedMaximumSize = Number.POSITIVE_INFINITY;
 
@@ -83,11 +84,13 @@ export abstract class SplitviewPanel
         this.addDisposables(
             this.api.onVisibilityChange((event) => {
                 const { isVisible } = event;
-                const { containerApi } = this.params as PanelViewInitParameters;
+                const { containerApi } = this
+                    ._params as PanelViewInitParameters;
                 containerApi.setVisible(this, isVisible);
             }),
             this.api.onActiveChange(() => {
-                const { containerApi } = this.params as PanelViewInitParameters;
+                const { containerApi } = this
+                    ._params as PanelViewInitParameters;
                 containerApi.setActive(this);
             }),
             this.api.onDidConstraintsChangeInternal((event) => {