chore: clean code

packages/dockview-vue/src/utils.ts

@@ -5,7 +5,6 @@ import type {
     GroupPanelPartInitParameters,
     IContentRenderer,
     IDockviewPanelHeaderProps,
-    IDockviewPanelProps,
     IGroupHeaderProps,
     IHeaderActionsRenderer,
     ITabRenderer,
@@ -61,12 +60,6 @@ export function findComponent(
 }
 
 /**
- * TODO List
- *
- * 1. handle vue context-ish stuff (appContext? provides?)
- *
- *
- *
  * @see https://vuejs.org/api/render-function.html#clonevnode
  * @see https://vuejs.org/api/render-function.html#mergeprops
  */
@@ -96,27 +89,33 @@ export function mountVueComponent<T extends Record<string, any>>(
     };
 }
 
-export class VueRenderer implements ITabRenderer, IContentRenderer {
+abstract class AbstractVueRenderer {
-    private _element: HTMLElement;
+    protected readonly _element: HTMLElement;
-    private _renderDisposable:
-        | { update: (props: any) => void; dispose: () => void }
-        | undefined;
-    private _api: DockviewPanelApi | undefined;
-    private _containerApi: DockviewApi | undefined;
 
     get element(): HTMLElement {
         return this._element;
     }
 
     constructor(
-        private readonly component: VueComponent,
+        protected readonly component: VueComponent,
-        private readonly parent: ComponentInternalInstance
+        protected readonly parent: ComponentInternalInstance
     ) {
         this._element = document.createElement('div');
         this.element.className = 'dv-vue-part';
         this.element.style.height = '100%';
         this.element.style.width = '100%';
     }
+}
+
+export class VueRenderer
+    extends AbstractVueRenderer
+    implements ITabRenderer, IContentRenderer
+{
+    private _renderDisposable:
+        | { update: (props: any) => void; dispose: () => void }
+        | undefined;
+    private _api: DockviewPanelApi | undefined;
+    private _containerApi: DockviewApi | undefined;
 
     init(parameters: GroupPanelPartInitParameters): void {
         this._api = parameters.api;
@@ -143,7 +142,6 @@ export class VueRenderer implements ITabRenderer, IContentRenderer {
         }
 
         const params = event.params;
-        // TODO: handle prop updates somehow?
         this._renderDisposable?.update({
             params: {
                 params: params,
@@ -158,8 +156,10 @@ export class VueRenderer implements ITabRenderer, IContentRenderer {
     }
 }
 
-export class VueWatermarkRenderer implements IWatermarkRenderer {
+export class VueWatermarkRenderer
-    private _element: HTMLElement;
+    extends AbstractVueRenderer
+    implements IWatermarkRenderer
+{
     private _renderDisposable:
         | { update: (props: any) => void; dispose: () => void }
         | undefined;
@@ -168,16 +168,6 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
         return this._element;
     }
 
-    constructor(
-        private readonly component: VueComponent,
-        private readonly parent: ComponentInternalInstance
-    ) {
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-part';
-        this.element.style.height = '100%';
-        this.element.style.width = '100%';
-    }
-
     init(parameters: WatermarkRendererInitParameters): void {
         const props: IWatermarkPanelProps = {
             group: parameters.group,
@@ -206,8 +196,10 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
     }
 }
 
-export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
+export class VueHeaderActionsRenderer
-    private _element: HTMLElement;
+    extends AbstractVueRenderer
+    implements IHeaderActionsRenderer
+{
     private _renderDisposable:
         | { update: (props: any) => void; dispose: () => void }
         | undefined;
@@ -217,14 +209,11 @@ export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
     }
 
     constructor(
-        private readonly component: VueComponent,
+        component: VueComponent,
-        private readonly parent: ComponentInternalInstance,
+        parent: ComponentInternalInstance,
         group: DockviewGroupPanel
     ) {
-        this._element = document.createElement('div');
+        super(component, parent);
-        this.element.className = 'dv-vue-header-action-part';
-        this._element.style.width = '100%';
-        this._element.style.height = '100%';
     }
 
     init(props: IGroupHeaderProps): void {