Merge pull request #200 from mathuo/198-vanillajs-rendering-and-persistance

198 vanillajs rendering and persistance

.github/workflows/deploy-docs.yml

@@ -27,6 +27,8 @@ jobs:
 
             - run: yarn install
             - run: lerna bootstrap
+            - run: npm run build
+              working-directory: packages/dockview-core
             - run: npm run build
               working-directory: packages/dockview
             - run: npm run build

packages/README.md

@@ -0,0 +1,18 @@
+# Project Structure
+
+This mono-repository has a number of packages containing the code for the [dockview](https://www.npmjs.com/package/dockview) library and the documentation website [dockview.dev](dockview.dev).
+
+## dockview-core
+
+-   Contains the core logic for the dockview library.
+-   Written entirely in vanilla JavaScript/TypeScript.
+
+## dockview
+
+-   Depends on `dockview-core`.
+-   Exports a `React` wrapper.
+-   Published as [dockview](https://www.npmjs.com/package/dockview) on npm.
+
+## docs
+
+-   Code for [dockview.dev](dockview.dev).

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

@@ -16,7 +16,6 @@ import {
     DockviewPanelApi,
     DockviewPanelApiImpl,
 } from '../../api/dockviewPanelApi';
-import { DefaultDockviewDeserialzier } from '../../dockview/deserializer';
 import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
 import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelMode';
 import { DefaultTab } from '../../dockview/components/tab/defaultTab';
@@ -94,66 +93,6 @@ class PanelTabPartTest implements ITabRenderer {
     }
 }
 
-class TestGroupPanel implements IDockviewPanel {
-    private _group: DockviewGroupPanel | undefined;
-
-    readonly api: DockviewPanelApi;
-    readonly view: IDockviewPanelModel;
-
-    constructor(
-        public readonly id: string,
-        public readonly title: string,
-        accessor: DockviewComponent
-    ) {
-        this.api = new DockviewPanelApiImpl(this, this._group!);
-        this._group = new DockviewGroupPanel(accessor, id, {});
-        this.view = new DockviewPanelModelMock(
-            'component',
-            new PanelContentPartTest(id, 'component'),
-            'tabComponent',
-            new DefaultTab()
-        );
-    }
-
-    get params(): Record<string, any> {
-        return {};
-    }
-    get group(): DockviewGroupPanel {
-        return this._group!;
-    }
-
-    updateParentGroup(group: DockviewGroupPanel, isGroupActive: boolean): void {
-        this._group = group;
-    }
-
-    init(params: IGroupPanelInitParameters): void {
-        //
-    }
-
-    layout(width: number, height: number): void {
-        //
-    }
-
-    focus(): void {
-        //
-    }
-
-    toJSON(): GroupviewPanelState {
-        return {
-            id: this.id,
-            title: this.title,
-        };
-    }
-
-    update(event: GroupPanelUpdateEvent): void {
-        //
-    }
-
-    dispose(): void {
-        //
-    }
-}
-
 describe('dockviewComponent', () => {
     let container: HTMLElement;
     let dockview: DockviewComponent;
@@ -470,7 +409,6 @@ describe('dockviewComponent', () => {
     test('serialization', () => {
         dockview.layout(1000, 1000);
 
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -992,15 +930,6 @@ describe('dockviewComponent', () => {
 
     test('#1', () => {
         dockview.layout(500, 500);
-        dockview.deserializer = {
-            fromJSON: (panelData: GroupviewPanelState): IDockviewPanel => {
-                return new TestGroupPanel(
-                    panelData.id,
-                    panelData.title || '',
-                    dockview
-                );
-            },
-        };
 
         const panel1 = dockview.addPanel({
             id: 'panel1',
@@ -1055,14 +984,17 @@ describe('dockviewComponent', () => {
             panels: {
                 view_1: {
                     id: 'view_1',
+                    contentComponent: 'default',
                     title: 'view_1_title',
                 },
                 view_2: {
                     id: 'view_2',
+                    contentComponent: 'default',
                     title: 'view_2_title',
                 },
                 view_3: {
                     id: 'view_3',
+                    contentComponent: 'default',
                     title: 'view_3_title',
                 },
             },
@@ -1382,7 +1314,6 @@ describe('dockviewComponent', () => {
                 default: PanelContentPartTest,
             },
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         dockview.layout(500, 1000);
 
@@ -1507,7 +1438,6 @@ describe('dockviewComponent', () => {
             })
         );
 
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1641,7 +1571,6 @@ describe('dockviewComponent', () => {
                 default: PanelContentPartTest,
             },
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1731,7 +1660,6 @@ describe('dockviewComponent', () => {
                 test_tab_id: PanelTabPartTest,
             },
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1840,7 +1768,6 @@ describe('dockviewComponent', () => {
                 test_tab_id: PanelTabPartTest,
             },
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1928,7 +1855,6 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
@@ -2034,7 +1960,6 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
@@ -2175,7 +2100,6 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
@@ -2303,7 +2227,6 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.groups.length).toBe(0);
     });
@@ -2320,7 +2243,6 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(dockview.groups.length).toBe(0);
 
@@ -2360,7 +2282,6 @@ describe('dockviewComponent', () => {
             },
             orientation: Orientation.HORIZONTAL,
         });
-        dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
         expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
             grid: {

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

@@ -16,7 +16,7 @@ import {
     DockviewDropTargets,
 } from './types';
 import { sequentialNumberGenerator } from '../math';
-import { IPanelDeserializer } from './deserializer';
+import { DefaultDockviewDeserialzier } from './deserializer';
 import { createComponent } from '../panel/componentFactory';
 import {
     AddGroupOptions,
@@ -87,7 +87,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
     readonly onDidDrop: Event<DockviewDropEvent>;
     readonly orientation: Orientation;
     tabHeight: number | undefined;
-    deserializer: IPanelDeserializer | undefined;
     updateOptions(options: DockviewComponentUpdateOptions): void;
     moveGroupOrPanel(
         referenceGroup: DockviewGroupPanel,
@@ -125,8 +124,8 @@ export class DockviewComponent
     implements IDockviewComponent
 {
     private readonly nextGroupId = sequentialNumberGenerator();
-    private _deserializer: IPanelDeserializer | undefined;
+    private readonly _deserializer = new DefaultDockviewDeserialzier(this);
-    private _api: DockviewApi;
+    private readonly _api: DockviewApi;
     private _options: Exclude<DockviewComponentOptions, 'orientation'>;
     private watermark: IWatermarkRenderer | null = null;
 
@@ -161,14 +160,6 @@ export class DockviewComponent
         return this.groups.flatMap((group) => group.panels);
     }
 
-    get deserializer(): IPanelDeserializer | undefined {
-        return this._deserializer;
-    }
-
-    set deserializer(value: IPanelDeserializer | undefined) {
-        this._deserializer = value;
-    }
-
     get options(): DockviewComponentOptions {
         return this._options;
     }
@@ -428,9 +419,6 @@ export class DockviewComponent
     fromJSON(data: SerializedDockview): void {
         this.clear();
 
-        if (!this.deserializer) {
-            throw new Error('no deserializer provided');
-        }
         const { grid, panels, options, activeGroup } = data;
 
         if (typeof options?.tabHeight === 'number') {
@@ -454,7 +442,7 @@ export class DockviewComponent
                 this._onDidAddGroup.fire(group);
 
                 for (const child of views) {
-                    const panel = this.deserializer!.fromJSON(
+                    const panel = this._deserializer.fromJSON(
                         panels[child],
                         group
                     );

packages/dockview/src/dockview/dockview.tsx

@@ -11,7 +11,6 @@ import {
     ITabRenderer,
     watchElementResize,
     DockviewGroupPanel,
-    DefaultDockviewDeserialzier,
 } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
@@ -173,7 +172,6 @@ export const DockviewReact = React.forwardRef(
             });
 
             domRef.current?.appendChild(dockview.element);
-            dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
 
             const { clientWidth, clientHeight } = domRef.current!;
             dockview.layout(clientWidth, clientHeight);