feat: migrate to generic construction

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

@@ -96,7 +96,7 @@ export class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
     }
 }
 
-export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => {
+export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
     /**
      * by readong the keys from an empty value object TypeScript will error
      * when we add or remove new properties to `DockviewOptions`

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

@@ -23,7 +23,6 @@ import {
 } from './gridviewPanel';
 import { BaseComponentOptions, Parameters } from '../panel/types';
 import { Orientation, Sizing } from '../splitview/splitview';
-import { createComponent } from '../panel/componentFactory';
 import { Emitter, Event } from '../events';
 import { Position } from '../dnd/droptarget';
 
@@ -118,7 +117,9 @@ export class GridviewComponent
         super(parentElement, {
             proportionalLayout: options.proportionalLayout,
             orientation: options.orientation,
-            styles: options.styles,
+            styles: options.hideBorders
+                ? { separatorBorder: 'transparent' }
+                : undefined,
             disableAutoResizing: options.disableAutoResizing,
             className: options.className,
         });
@@ -139,13 +140,6 @@ export class GridviewComponent
                 this._onDidActiveGroupChange.fire(event);
             })
         );
-
-        if (!this.options.components) {
-            this.options.components = {};
-        }
-        if (!this.options.frameworkComponents) {
-            this.options.frameworkComponents = {};
-        }
     }
 
     override updateOptions(options: Partial<GridviewComponentOptions>): void {
@@ -216,19 +210,11 @@ export class GridviewComponent
             this.gridview.deserialize(grid, {
                 fromJSON: (node) => {
                     const { data } = node;
-                    const view = createComponent(
-                        data.id,
-                        data.component,
-                        this.options.components ?? {},
-                        this.options.frameworkComponents ?? {},
-                        this.options.frameworkComponentFactory
-                            ? {
-                                  createComponent:
-                                      this.options.frameworkComponentFactory
-                                          .createComponent,
-                              }
-                            : undefined
-                    );
+
+                    const view = this.options.createComponent({
+                        id: data.id,
+                        name: data.component,
+                    });
 
                     queue.push(() =>
                         view.init({
@@ -363,19 +349,10 @@ export class GridviewComponent
             }
         }
 
-        const view = createComponent(
-            options.id,
-            options.component,
-            this.options.components ?? {},
-            this.options.frameworkComponents ?? {},
-            this.options.frameworkComponentFactory
-                ? {
-                      createComponent:
-                          this.options.frameworkComponentFactory
-                              .createComponent,
-                  }
-                : undefined
-        );
+        const view = this.options.createComponent({
+            id: options.id,
+            name: options.component,
+        });
 
         view.init({
             params: options.params ?? {},

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

@@ -1,21 +1,34 @@
 import { GridviewPanel } from './gridviewPanel';
-import { ISplitviewStyles, Orientation } from '../splitview/splitview';
-import {
-    ComponentConstructor,
-    FrameworkFactory,
-} from '../panel/componentFactory';
+import { Orientation } from '../splitview/splitview';
+import { CreateComponentOptions } from '../dockview/options';
 
-export interface GridviewComponentOptions {
+export interface GridviewOptions {
     disableAutoResizing?: boolean;
     proportionalLayout: boolean;
     orientation: Orientation;
-    components?: {
-        [componentName: string]: ComponentConstructor<GridviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
-    styles?: ISplitviewStyles;
     className?: string;
+    hideBorders?: boolean;
+}
+
+export interface GridviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => GridviewPanel;
 }
+
+export type GridviewComponentOptions = GridviewOptions &
+    GridviewFrameworkOptions;
+
+export const PROPERTY_KEYS_GRIDVIEW: (keyof GridviewOptions)[] = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties: Record<keyof GridviewOptions, undefined> = {
+        disableAutoResizing: undefined,
+        proportionalLayout: undefined,
+        orientation: undefined,
+        hideBorders: undefined,
+        className: undefined,
+    };
+
+    return Object.keys(properties) as (keyof GridviewOptions)[];
+})();

packages/dockview-core/src/index.ts

@@ -24,11 +24,19 @@ export * from './splitview/splitview';
 export {
     SplitviewComponentOptions,
     PanelViewInitParameters,
+    SplitviewOptions,
+    SplitviewFrameworkOptions,
+    PROPERTY_KEYS_SPLITVIEW,
 } from './splitview/options';
 
 export * from './paneview/paneview';
 export * from './gridview/gridview';
-export { GridviewComponentOptions } from './gridview/options';
+export {
+    GridviewComponentOptions,
+    GridviewOptions,
+    GridviewFrameworkOptions,
+    PROPERTY_KEYS_GRIDVIEW,
+} from './gridview/options';
 export * from './gridview/baseComponentGridview';
 
 export {
@@ -67,7 +75,12 @@ export * from './dockview/dockviewComponent';
 export * from './gridview/gridviewComponent';
 export * from './splitview/splitviewComponent';
 export * from './paneview/paneviewComponent';
-export { PaneviewComponentOptions } from './paneview/options';
+export {
+    PaneviewComponentOptions,
+    PaneviewOptions,
+    PaneviewFrameworkOptions,
+    PROPERTY_KEYS_PANEVIEW,
+} from './paneview/options';
 
 export * from './gridview/gridviewPanel';
 export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel';

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

@@ -2,14 +2,11 @@ import { addDisposableListener } from '../events';
 import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
-import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
+import { IPanePart, PanePanelInitParameter } from './paneviewPanel';
 import { toggleClass } from '../dom';
 import { createChevronRightButton, createExpandMoreButton } from '../svg';
 
-export class DefaultHeader
-    extends CompositeDisposable
-    implements IPaneHeaderPart
-{
+export class DefaultHeader extends CompositeDisposable implements IPanePart {
     private readonly _expandedIcon = createExpandMoreButton();
     private readonly _collapsedIcon = createChevronRightButton();
     private readonly disposable = new MutableDisposable();

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

@@ -1,29 +1,35 @@
-import {
-    ComponentConstructor,
-    FrameworkFactory,
-} from '../panel/componentFactory';
+import { CreateComponentOptions } from '../dockview/options';
 import { PaneviewDndOverlayEvent } from './paneviewComponent';
-import { IPaneBodyPart, IPaneHeaderPart, PaneviewPanel } from './paneviewPanel';
+import { IPanePart } from './paneviewPanel';
 
-export interface PaneviewComponentOptions {
+export interface PaneviewOptions {
     disableAutoResizing?: boolean;
-    components?: {
-        [componentName: string]: ComponentConstructor<PaneviewPanel>;
-    };
-    frameworkComponents?: {
-        [componentName: string]: any;
-    };
-    headerComponents?: {
-        [componentName: string]: ComponentConstructor<PaneviewPanel>;
-    };
-    headerframeworkComponents?: {
-        [componentName: string]: any;
-    };
-    frameworkWrapper?: {
-        header: FrameworkFactory<IPaneHeaderPart>;
-        body: FrameworkFactory<IPaneBodyPart>;
-    };
     disableDnd?: boolean;
     showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
     className?: string;
 }
+
+export interface PaneviewFrameworkOptions {
+    createComponent: (options: CreateComponentOptions) => IPanePart;
+    createHeaderComponent: (
+        options: CreateComponentOptions
+    ) => IPanePart | undefined;
+}
+
+export type PaneviewComponentOptions = PaneviewOptions &
+    PaneviewFrameworkOptions;
+
+export const PROPERTY_KEYS_PANEVIEW: (keyof PaneviewOptions)[] = (() => {
+    /**
+     * by readong the keys from an empty value object TypeScript will error
+     * when we add or remove new properties to `DockviewOptions`
+     */
+    const properties: Record<keyof PaneviewOptions, undefined> = {
+        disableAutoResizing: undefined,
+        disableDnd: undefined,
+        showDndOverlay: undefined,
+        className: undefined,
+    };
+
+    return Object.keys(properties) as (keyof PaneviewOptions)[];
+})();