Merge pull request #283 from mathuo/281-type-hints-for-panel-parameters

281 type hints for panel parameters

packages/dockview-core/src/__tests__/dockview/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/__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/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,
@@ -117,7 +118,7 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
         return this.component.layout(width, height);
     }
 
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
+    addPanel<T extends object = Parameters>(options: AddSplitviewComponentOptions<T>): ISplitviewPanel {
         return this.component.addPanel(options);
     }
 
@@ -212,7 +213,7 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
         this.component.layout(width, height);
     }
 
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
+    addPanel<T extends object = Parameters>(options: AddPaneviewComponentOptions<T>): IPaneviewPanel {
         return this.component.addPanel(options);
     }
 
@@ -296,7 +297,7 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddComponentOptions): IGridviewPanel {
+    addPanel<T extends object = Parameters>(options: AddComponentOptions<T>): IGridviewPanel {
         return this.component.addPanel(options);
     }
 
@@ -431,7 +432,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
         this.component.layout(width, height, force);
     }
 
-    addPanel(options: AddPanelOptions): IDockviewPanel {
+    addPanel<T extends object = Parameters>(options: AddPanelOptions<T>): IDockviewPanel {
         return this.component.addPanel(options);
     }
 

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

@@ -44,6 +44,7 @@ import {
 import { DockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelModel } from './dockviewPanelModel';
 import { getPanelData } from '../dnd/dataTransfer';
+import { Parameters } from '../panel/types';
 import { Overlay } from '../dnd/overlay';
 import { toggleClass, watchElementResize } from '../dom';
 import {
@@ -111,7 +112,9 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     doSetGroupActive: (group: DockviewGroupPanel, skipFocus?: boolean) => void;
     removeGroup: (group: DockviewGroupPanel) => void;
     options: DockviewComponentOptions;
-    addPanel(options: AddPanelOptions): IDockviewPanel;
+    addPanel<T extends object = Parameters>(
+        options: AddPanelOptions<T>
+    ): IDockviewPanel;
     removePanel(panel: IDockviewPanel): void;
     getGroupPanel: (id: string) => IDockviewPanel | undefined;
     createWatermarkComponent(): IWatermarkRenderer;
@@ -686,7 +689,9 @@ export class DockviewComponent
         }
     }
 
-    addPanel(options: AddPanelOptions): DockviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddPanelOptions<T>
+    ): DockviewPanel {
         if (this.panels.find((_) => _.id === options.id)) {
             throw new Error(`panel with id ${options.id} already exists`);
         }

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

@@ -15,7 +15,7 @@ export interface IDockviewPanel extends IDisposable, IPanel {
     readonly group: DockviewGroupPanel;
     readonly api: DockviewPanelApi;
     readonly title: string | undefined;
-    readonly params: Record<string, any> | undefined;
+    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 } from './dockviewGroupPanel';
 import { ISplitviewStyles, Orientation } from '../splitview/splitview';
 import { PanelTransfer } from '../dnd/dataTransfer';
@@ -88,10 +89,10 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
     disableFloatingGroups?: boolean;
 }
 
-export interface PanelOptions {
+export interface PanelOptions<P extends object = Parameters> {
     component: string;
     tabComponent?: string;
-    params?: { [key: string]: any };
+    params?: P;
     id: string;
     title?: string;
 }
@@ -152,8 +153,8 @@ type AddPanelPositionUnion = {
 
 type AddPanelOptionsUnion = AddPanelFloatingGroupUnion | AddPanelPositionUnion;
 
-export type AddPanelOptions = Omit<
+export type AddPanelOptions<P extends object = Parameters> = Omit<
-    PanelOptions,
+    PanelOptions<P>,
     'component' | 'tabComponent'
 > & {
     component: string;

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-core/src/gridview/gridviewComponent.ts

@@ -21,7 +21,7 @@ import {
     GridPanelViewState,
     IGridviewPanel,
 } from './gridviewPanel';
-import { BaseComponentOptions } from '../panel/types';
+import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Orientation, Sizing } from '../splitview/splitview';
 import { createComponent } from '../panel/componentFactory';
 import { Emitter, Event } from '../events';
@@ -32,7 +32,8 @@ export interface SerializedGridviewComponent {
     activePanel?: string;
 }
 
-export interface AddComponentOptions extends BaseComponentOptions {
+export interface AddComponentOptions<T extends object = Parameters>
+    extends BaseComponentOptions<T> {
     minimumWidth?: number;
     maximumWidth?: number;
     minimumHeight?: number;
@@ -57,7 +58,9 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
     readonly orientation: Orientation;
     readonly onDidLayoutFromJSON: Event<void>;
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
-    addPanel(options: AddComponentOptions): IGridviewPanel;
+    addPanel<T extends object = Parameters>(
+        options: AddComponentOptions<T>
+    ): IGridviewPanel;
     removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
     focus(): void;
     fromJSON(serializedGridview: SerializedGridviewComponent): void;
@@ -280,7 +283,9 @@ export class GridviewComponent
         this.doAddGroup(removedPanel, relativeLocation, options.size);
     }
 
-    public addPanel(options: AddComponentOptions): IGridviewPanel {
+    public addPanel<T extends object = Parameters>(
+        options: AddComponentOptions<T>
+    ): IGridviewPanel {
         let relativeLocation: number[] = options.location || [0];
 
         if (options.position?.referencePanel) {

packages/dockview-core/src/panel/types.ts

@@ -29,10 +29,10 @@ export interface IFrameworkPart extends IDisposable {
     update(params: Parameters): void;
 }
 
-export interface BaseComponentOptions {
+export interface BaseComponentOptions<T extends object = Parameters> {
     id: string;
     component: string;
-    params?: Parameters;
+    params?: T;
     snap?: boolean;
     priority?: LayoutPriority;
     size?: number;

packages/dockview-core/src/paneview/paneviewComponent.ts

@@ -23,6 +23,7 @@ import { DefaultHeader } from './defaultPaneviewHeader';
 import { sequentialNumberGenerator } from '../math';
 import { PaneTransfer } from '../dnd/dataTransfer';
 import { Resizable } from '../resizable';
+import { Parameters } from '../panel/types';
 
 const nextLayoutId = sequentialNumberGenerator();
 
@@ -87,13 +88,11 @@ export class PaneFramework extends DraggablePaneviewPanel {
     }
 }
 
-export interface AddPaneviewComponentOptions {
+export interface AddPaneviewComponentOptions<T extends object = Parameters> {
     id: string;
     component: string;
     headerComponent?: string;
-    params?: {
+    params?: T;
-        [key: string]: any;
-    };
     minimumBodySize?: number;
     maximumBodySize?: number;
     isExpanded?: boolean;
@@ -115,7 +114,9 @@ export interface IPaneviewComponent extends IDisposable {
     readonly onDidDrop: Event<PaneviewDropEvent>;
     readonly onDidLayoutChange: Event<void>;
     readonly onDidLayoutFromJSON: Event<void>;
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
+    addPanel<T extends object = Parameters>(
+        options: AddPaneviewComponentOptions<T>
+    ): IPaneviewPanel;
     layout(width: number, height: number): void;
     toJSON(): SerializedPaneview;
     fromJSON(serializedPaneview: SerializedPaneview): void;
@@ -233,7 +234,9 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
         this._options = { ...this.options, ...options };
     }
 
-    addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddPaneviewComponentOptions<T>
+    ): IPaneviewPanel {
         const body = createComponent(
             options.id,
             options.component,

packages/dockview-core/src/splitview/splitviewComponent.ts

@@ -11,7 +11,7 @@ import {
     Splitview,
 } from './splitview';
 import { SplitviewComponentOptions } from './options';
-import { BaseComponentOptions } from '../panel/types';
+import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Emitter, Event } from '../events';
 import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
 import { createComponent } from '../panel/componentFactory';
@@ -39,7 +39,8 @@ export interface SerializedSplitview {
     views: SerializedSplitviewPanel[];
 }
 
-export interface AddSplitviewComponentOptions extends BaseComponentOptions {
+export interface AddSplitviewComponentOptions<T extends Parameters = Parameters>
+    extends BaseComponentOptions<T> {
     index?: number;
     minimumSize?: number;
     maximumSize?: number;
@@ -62,7 +63,9 @@ export interface ISplitviewComponent extends IDisposable {
     readonly onDidLayoutFromJSON: Event<void>;
     readonly panels: SplitviewPanel[];
     updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
-    addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
+    addPanel<T extends object = Parameters>(
+        options: AddSplitviewComponentOptions<T>
+    ): ISplitviewPanel;
     layout(width: number, height: number): void;
     onDidLayoutChange: Event<void>;
     toJSON(): SerializedSplitview;
@@ -248,7 +251,9 @@ export class SplitviewComponent
         return this.panels.find((view) => view.id === id);
     }
 
-    addPanel(options: AddSplitviewComponentOptions): SplitviewPanel {
+    addPanel<T extends object = Parameters>(
+        options: AddSplitviewComponentOptions<T>
+    ): SplitviewPanel {
         if (this._panels.has(options.id)) {
             throw new Error(`panel ${options.id} already exists`);
         }

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;
 }