Merge pull request #282 from mpearson/mpearson/component-params-typing

feat: add  optional type parameter for addPanel() params

packages/dockview-core/src/__tests__/gridview/baseComponentGridview.spec.ts

@@ -21,7 +21,7 @@ class TestPanel implements IGridPanelView {
         return true;
     }
 
-    get params(): Record<string, any> {
+    get params(): Parameters {
         return {};
     }
 

packages/dockview-core/src/__tests__/groupview/dockviewGroupPanelModel.spec.ts

@@ -1,4 +1,4 @@
-import { DockviewComponent } from '../../dockview/dockviewComponent';
+import {DockviewComponent} from '../../dockview/dockviewComponent';
 import {
     GroupviewPanelState,
     IGroupPanelInitParameters,
@@ -7,7 +7,7 @@ import {
     ITabRenderer,
     IWatermarkRenderer,
 } from '../../dockview/types';
-import { PanelUpdateEvent } from '../../panel/types';
+import { PanelUpdateEvent, Parameters } from '../../panel/types';
 import {
     DockviewGroupPanelModel,
     GroupOptions,
@@ -178,7 +178,7 @@ export class TestPanel implements IDockviewPanel {
         return this._group!;
     }
 
-    get params(): Record<string, any> {
+    get params(): Parameters {
         return {};
     }
 

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

@@ -8,6 +8,7 @@ import {
     AddPanelOptions,
     MovementOptions,
 } from '../dockview/options';
+import { Parameters } from '../panel/types';
 import { Direction } from '../gridview/baseComponentGridview';
 import {
     AddComponentOptions,
@@ -431,7 +432,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddPanelOptions): IDockviewPanel {
+    addPanel<P extends object = Parameters>(options: AddPanelOptions<P>): IDockviewPanel {
         return this.component.addPanel(options);
     }
 

packages/dockview-core/src/dockview/dockviewComponent.ts

@@ -28,6 +28,7 @@ import {
     isPanelOptionsWithPanel,
     MovementOptions,
 } from './options';
+import { Parameters } from '../panel/types';
 import {
     BaseGrid,
     Direction,
@@ -96,7 +97,7 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void;
     removeGroup: (group: DockviewGroupPanel) => void;
     options: DockviewComponentOptions;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel<P extends object = Parameters>(options: AddPanelOptions<P>): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
     getGroupPanel: (id: string) => IDockviewPanel | undefined;
     createWatermarkComponent(): IWatermarkRenderer;
@@ -495,7 +496,7 @@ export class DockviewComponent
         }
     }
 
-    addPanel(options: AddPanelOptions): IDockviewPanel {
+    addPanel<P extends object = Parameters>(options: AddPanelOptions<P>): IDockviewPanel {
         if (this.panels.find((_) => _.id === options.id)) {
             throw new Error(`panel with id ${options.id} already exists`);
         }
@@ -913,8 +914,8 @@ export class DockviewComponent
         return view;
     }
 
-    private createPanel(
-        options: AddPanelOptions,
+    private createPanel<P extends object = Parameters>(
+        options: AddPanelOptions<P>,
         group: DockviewGroupPanel
     ): IDockviewPanel {
         const contentComponent = options.component;

packages/dockview-core/src/dockview/dockviewPanel.ts

@@ -14,8 +14,8 @@ export interface IDockviewPanel extends IDisposable, IPanel {
     readonly view: IDockviewPanelModel;
     readonly group: DockviewGroupPanel;
     readonly api: DockviewPanelApi;
-    readonly title: string | undefined;
-    readonly params: Record<string, any> | undefined;
+    readonly title: string;
+    readonly params: Parameters | undefined;
     updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void;
     init(params: IGroupPanelInitParameters): void;
     toJSON(): GroupviewPanelState;

packages/dockview-core/src/dockview/options.ts

@@ -8,6 +8,7 @@ import {
     IWatermarkRenderer,
     DockviewDropTargets,
 } from './types';
+import { Parameters } from '../panel/types';
 import {
     DockviewGroupPanel,
     DockviewGroupPanelApi,
@@ -86,10 +87,10 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     parentElement?: HTMLElement;
 }
 
-export interface PanelOptions {
+export interface PanelOptions<P extends object = Parameters> {
     component: string;
     tabComponent?: string;
-    params?: { [key: string]: any };
+    params?: P;
     id: string;
     title?: string;
 }
@@ -131,8 +132,8 @@ export function isPanelOptionsWithGroup(
     return false;
 }
 
-export interface AddPanelOptions
-    extends Omit<PanelOptions, 'component' | 'tabComponent'> {
+export interface AddPanelOptions<P extends object = Parameters>
+    extends Omit<PanelOptions<P>, 'component' | 'tabComponent'> {
     component: string;
     tabComponent?: string;
     position?: AddPanelPositionOptions;

packages/dockview-core/src/gridview/basePanelView.ts

@@ -5,13 +5,14 @@ import {
     PanelUpdateEvent,
     PanelInitParameters,
     IPanel,
+    Parameters,
 } from '../panel/types';
 import { PanelApi, PanelApiImpl } from '../api/panelApi';
 
 export interface BasePanelViewState {
     readonly id: string;
     readonly component: string;
-    readonly params?: Record<string, any>;
+    readonly params?: Parameters;
 }
 
 export interface BasePanelViewExported<T extends PanelApi> {
@@ -19,7 +20,7 @@ export interface BasePanelViewExported<T extends PanelApi> {
     readonly api: T;
     readonly width: number;
     readonly height: number;
-    readonly params: Record<string, any> | undefined;
+    readonly params: Parameters | undefined;
     focus(): void;
     toJSON(): object;
     update(event: PanelUpdateEvent): void;
@@ -50,7 +51,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
         return this._height;
     }
 
-    get params(): Record<string, any> | undefined {
+    get params(): Parameters | undefined {
         return this._params?.params;
     }
 

packages/dockview/src/react.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { IFrameworkPart, IDockviewDisposable } from 'dockview-core';
+import { IFrameworkPart, IDockviewDisposable, Parameters } from 'dockview-core';
 
 export interface ReactPortalStore {
     addPortal: (portal: React.ReactPortal) => IDockviewDisposable;
@@ -66,7 +66,7 @@ export const ReactPartContext = React.createContext<{}>({});
 export class ReactPart<P extends object, C extends object = {}>
     implements IFrameworkPart
 {
-    private _initialProps: Record<string, any> = {};
+    private _initialProps: Parameters = {};
     private componentInstance?: IPanelWrapperRef;
     private ref?: {
         portal: React.ReactPortal;

packages/dockview/src/types.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
+import { Parameters } from 'dockview-core';
 
 export interface PanelCollection<T extends object> {
     [name: string]: React.FunctionComponent<T>;
 }
 
-export interface PanelParameters<T extends {} = Record<string, any>> {
+export interface PanelParameters<T extends {} = Parameters> {
     params: T;
 }