Merge pull request #594 from mathuo/562-dockview-framework-wrappers-vuejs-angular-javascript-etc-1

feat: vue3

.codesandbox/ci.json

@@ -1,6 +1,7 @@
 {
   "packages": [
     "packages/dockview-core",
+    "packages/dockview-vue",
     "packages/dockview"
   ],
   "sandboxes": [

.github/workflows/deploy-docs.yml

@@ -26,6 +26,8 @@ jobs:
               working-directory: packages/dockview-core
             - run: npm run build
               working-directory: packages/dockview
+            - run: npm run build
+              working-directory: packages/dockview-vue
             - run: npm run build
               working-directory: packages/docs
             - run: npm run docs

.github/workflows/publish.yml

@@ -35,6 +35,9 @@ jobs:
             - name: Publish dockview
               run: npm publish --provenance
               working-directory: packages/dockview
+            - name: Publish dockview-vue
+              run: npm publish --provenance
+              working-directory: packages/dockview-vue
     publish-experimental:
         if: github.event_name == 'workflow_dispatch'
         runs-on: ubuntu-latest
@@ -64,3 +67,6 @@ jobs:
             - name: Publish dockview
               run: npm publish --provenance --tag experimental
               working-directory: packages/dockview
+            - name: Publish dockview-vue
+              run: npm publish --provenance --tag experimental
+              working-directory: packages/dockview-vue

package.json

@@ -16,7 +16,7 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "lerna run build --scope '{dockview-core,dockview}'",
+    "build": "lerna run build --scope '{dockview-core,dockview,dockview-vue}'",
     "clean": "lerna run clean",
     "docs": "typedoc",
     "generate-docs": "node scripts/docs.mjs",

packages/dockview-core/src/dockview/components/tab/tab.ts

@@ -12,7 +12,6 @@ import { DockviewGroupPanel } from '../../dockviewGroupPanel';
 import {
     DroptargetEvent,
     Droptarget,
-    Position,
     WillShowOverlayEvent,
 } from '../../../dnd/droptarget';
 import { DragHandler } from '../../../dnd/abstractDragHandler';

packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts

@@ -10,11 +10,7 @@ import { VoidContainer } from './voidContainer';
 import { toggleClass } from '../../../dom';
 import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
 import { DockviewComponent } from '../../dockviewComponent';
-import { WillShowOverlayEvent } from '../../../dnd/droptarget';
-import {
-    DockviewGroupDropLocation,
-    WillShowOverlayLocationEvent,
-} from '../../dockviewGroupPanelModel';
+import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
 import { getPanelData } from '../../../dnd/dataTransfer';
 
 export interface TabDropIndexEvent {

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

@@ -2,7 +2,6 @@ import { IDockviewComponent } from './dockviewComponent';
 import { DockviewPanelApi } from '../api/dockviewPanelApi';
 import { PanelInitParameters, IPanel } from '../panel/types';
 import { DockviewApi } from '../api/component.api';
-import { Event } from '../events';
 import { Optional } from '../types';
 import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
 import { DockviewPanelRenderer } from '../overlayRenderContainer';

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

@@ -1,8 +1,5 @@
 import { PanelInitParameters } from '../panel/types';
-import {
-    GridviewComponent,
-    IGridPanelComponentView,
-} from './gridviewComponent';
+import { IGridPanelComponentView } from './gridviewComponent';
 import { FunctionOrValue } from '../types';
 import {
     BasePanelView,

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

@@ -1,5 +1,5 @@
-import { IPanel, PanelInitParameters } from '../panel/types';
-import { IView, SplitViewOptions, LayoutPriority } from './splitview';
+import { PanelInitParameters } from '../panel/types';
+import { SplitViewOptions, LayoutPriority } from './splitview';
 import { SplitviewPanel } from './splitviewPanel';
 import { SplitviewComponent } from './splitviewComponent';
 import {

packages/dockview-react/gulpfile.js

@@ -1,6 +0,0 @@
-const gulp = require('gulp');
-const buildfile = require('../../scripts/build');
-
-buildfile.init();
-
-gulp.task('run', gulp.series(['sass']));

packages/dockview-vue/gulpfile.js

@@ -1,6 +0,0 @@
-const gulp = require('gulp');
-const buildfile = require('../../scripts/build');
-
-buildfile.init();
-
-gulp.task('run', gulp.series(['sass']));

packages/dockview-vue/jest.config.ts

@@ -4,7 +4,7 @@ const config: JestConfigWithTsJest = {
     preset: 'ts-jest',
     roots: ['<rootDir>/packages/dockview-vue'],
     modulePaths: ['<rootDir>/packages/dockview-vue/src'],
-    displayName: { name: 'dockview', color: 'blue' },
+    displayName: { name: 'dockview-vue', color: 'blue' },
     rootDir: '../../',
     collectCoverageFrom: [
         '<rootDir>/packages/dockview-vue/src/**/*.{js,jsx,ts,tsx}',

packages/dockview-vue/package.json

@@ -41,19 +41,14 @@
     "README.md"
   ],
   "scripts": {
-    "build-only": "vite build",
-    "build": "npm run build:package",
-    "build:bundles": "rollup -c",
-    "build:cjs": "cross-env ../../node_modules/.bin/vue-tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
-    "build:css": "gulp sass",
-    "build:esm": "cross-env ../../node_modules/.bin/vue-tsc --build ./tsconfig.esm.json --verbose --extendedDiagnostics",
-    "build:package": "npm run build-only && npm run build:types",
+    "build:js": "vite build",
+    "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types",
+    "build": "npm run build:js && npm run build:types",
     "clean": "rimraf dist/ .build/ .rollup.cache/",
     "prepublishOnly": "npm run rebuild && npm run test",
     "rebuild": "npm run clean && npm run build",
-    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
-    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage",
-    "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types "
+    "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-vue",
+    "test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-vue --coverage"
   },
   "dependencies": {
     "dockview-core": "^1.13.1"

packages/dockview-vue/rollup.config.js

@@ -1,116 +0,0 @@
-/* eslint-disable */
-
-const { join } = require('path');
-const typescript = require('@rollup/plugin-typescript');
-const terser = require('@rollup/plugin-terser');
-const postcss = require('rollup-plugin-postcss');
-const nodeResolve = require('@rollup/plugin-node-resolve');
-const vue = require('@vitejs/plugin-vue');
-
-const { name, version, homepage, license } = require('./package.json');
-const main = join(__dirname, './scripts/rollupEntryTarget.ts');
-const mainNoStyles = join(__dirname, './src/index.ts');
-const outputDir = join(__dirname, 'dist');
-
-function outputFile(format, isMinified, withStyles) {
-    let filename = join(outputDir, name);
-
-    if (format !== 'umd') {
-        filename += `.${format}`;
-    }
-    if (isMinified) {
-        filename += '.min';
-    }
-    if (!withStyles) {
-        filename += '.noStyle';
-    }
-
-    return `${filename}.js`;
-}
-
-function getInput(options) {
-    const { withStyles } = options;
-
-    if (withStyles) {
-        return main;
-    }
-
-    return mainNoStyles;
-}
-
-function createBundle(format, options) {
-    const { withStyles, isMinified } = options;
-    const input = getInput(options);
-    const file = outputFile(format, isMinified, withStyles);
-
-    const external = [];
-
-    const output = {
-        file,
-        format,
-        sourcemap: true,
-        globals: {},
-        banner: [
-            `/**`,
-            ` * ${name}`,
-            ` * @version ${version}`,
-            ` * @link ${homepage}`,
-            ` * @license ${license}`,
-            ` */`,
-        ].join('\n'),
-    };
-
-    const plugins = [
-        nodeResolve({
-            include: ['node_modules/dockview-core/**'],
-        }),
-
-        typescript({
-            tsconfig: 'tsconfig.config.json',
-        }),
-        vue({}),
-    ];
-
-    if (isMinified) {
-        plugins.push(terser());
-    }
-    if (withStyles) {
-        plugins.push(postcss());
-    }
-
-    if (format === 'umd') {
-        output['name'] = name;
-    }
-
-    external.push('react', 'react-dom');
-
-    if (format === 'umd') {
-        output.globals['react'] = 'React';
-        output.globals['react-dom'] = 'ReactDOM';
-    }
-
-    return {
-        input,
-        output,
-        plugins,
-        external,
-    };
-}
-
-module.exports = [
-    // amd
-    createBundle('amd', { withStyles: false, isMinified: false }),
-    createBundle('amd', { withStyles: true, isMinified: false }),
-    createBundle('amd', { withStyles: false, isMinified: true }),
-    createBundle('amd', { withStyles: true, isMinified: true }),
-    // umd
-    createBundle('umd', { withStyles: false, isMinified: false }),
-    createBundle('umd', { withStyles: true, isMinified: false }),
-    createBundle('umd', { withStyles: false, isMinified: true }),
-    createBundle('umd', { withStyles: true, isMinified: true }),
-    // cjs
-    createBundle('cjs', { withStyles: true, isMinified: false }),
-    // esm
-    createBundle('esm', { withStyles: true, isMinified: false }),
-    createBundle('esm', { withStyles: true, isMinified: true }),
-];

packages/dockview-vue/scripts/rollupEntryTarget.ts

@@ -1,2 +0,0 @@
-import '../dist/styles/dockview.css';
-export * from '../src/index';

packages/dockview-vue/src/dockview/dockview.vue

@@ -2,13 +2,6 @@
 import {
     DockviewApi,
     DockviewComponent,
-    type IContentRenderer,
-    type ITabRenderer,
-    type IWatermarkRenderer,
-    type IDockviewPanelProps,
-    type IDockviewPanelHeaderProps,
-    type IGroupPanelBaseProps,
-    type IWatermarkPanelProps,
     type DockviewOptions,
     PROPERTY_KEYS,
     type DockviewFrameworkOptions,
@@ -22,13 +15,11 @@ import {
     watch,
     onBeforeUnmount,
     markRaw,
-    toRaw,
     getCurrentInstance,
 } from 'vue';
 import {
-    VueContentRenderer,
     VueHeaderActionsRenderer,
-    VueTabRenderer,
+    VueRenderer,
     VueWatermarkRenderer,
     findComponent,
 } from '../utils';
@@ -41,18 +32,6 @@ interface VueProps {
     prefixHeaderActionsComponent?: string;
 }
 
-const VUE_PROPERTIES = (() => {
-    const _value: Record<keyof VueProps, undefined> = {
-        watermarkComponent: undefined,
-        defaultTabComponent: undefined,
-        rightHeaderActionsComponent: undefined,
-        leftHeaderActionsComponent: undefined,
-        prefixHeaderActionsComponent: undefined,
-    };
-
-    return Object.keys(_value) as (keyof VueProps)[];
-})();
-
 type VueEvents = {
     ready: [event: DockviewReadyEvent];
 };
@@ -73,10 +52,6 @@ function extractCoreOptions(props: IDockviewVueProps): DockviewOptions {
 
 const emit = defineEmits<VueEvents>();
 
-/**
- * Anything here that is a Vue.js component should not be reactive
- * i.e. markRaw(toRaw(...))
- */
 const props = defineProps<IDockviewVueProps>();
 
 const el = ref<HTMLElement | null>(null);
@@ -105,7 +80,7 @@ onMounted(() => {
                 getCurrentInstance()!,
                 options.name
             );
-            return new VueContentRenderer(component!, getCurrentInstance()!);
+            return new VueRenderer(component!, getCurrentInstance()!);
         },
         createTabComponent(options) {
             let component = findComponent(getCurrentInstance()!, options.name);
@@ -118,7 +93,7 @@ onMounted(() => {
             }
 
             if (component) {
-                return new VueTabRenderer(component, getCurrentInstance()!);
+                return new VueRenderer(component, getCurrentInstance()!);
             }
             return undefined;
         },
@@ -199,8 +174,6 @@ onMounted(() => {
      */
     instance.value = markRaw(dockview);
 
-    console.log(getCurrentInstance());
-
     emit('ready', { api: new DockviewApi(dockview) });
 });
 

packages/dockview-vue/src/utils.ts

@@ -1,9 +1,10 @@
 import type {
+    DockviewApi,
     DockviewGroupPanel,
+    DockviewPanelApi,
     GroupPanelPartInitParameters,
     IContentRenderer,
     IDockviewPanelHeaderProps,
-    IDockviewPanelProps,
     IGroupHeaderProps,
     IHeaderActionsRenderer,
     ITabRenderer,
@@ -59,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
  */
@@ -84,8 +79,8 @@ export function mountVueComponent<T extends Record<string, any>>(
 
     return {
         update: (newProps: any) => {
-            runningProps = { ...props, newProps };
-            vNode = cloneVNode(vNode, Object.freeze(runningProps));
+            runningProps = { ...props, ...newProps };
+            vNode = cloneVNode(vNode, runningProps);
             render(vNode, element);
         },
         dispose: () => {
@@ -94,78 +89,38 @@ export function mountVueComponent<T extends Record<string, any>>(
     };
 }
 
-export class VueContentRenderer implements IContentRenderer {
-    private _element: HTMLElement;
-    private _renderDisposable:
-        | { update: (props: any) => void; dispose: () => void }
-        | undefined;
+abstract class AbstractVueRenderer {
+    protected readonly _element: HTMLElement;
 
     get element(): HTMLElement {
         return this._element;
     }
 
     constructor(
-        private readonly component: VueComponent,
-        private readonly parent: ComponentInternalInstance
+        protected readonly component: VueComponent,
+        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%';
     }
-
-    init(parameters: GroupPanelPartInitParameters): void {
-        const props: IDockviewPanelProps = {
-            params: parameters.params,
-            api: parameters.api,
-            containerApi: parameters.containerApi,
-        };
-
-        this._renderDisposable?.dispose();
-        this._renderDisposable = mountVueComponent(
-            this.component,
-            this.parent,
-            { params: props },
-            this.element
-        );
-    }
-
-    update(event: PanelUpdateEvent<Parameters>): void {
-        const params = event.params;
-        // TODO: handle prop updates somehow?
-        this._renderDisposable?.update(params);
-    }
-
-    focus(): void {
-        //  TODO: make optional on interface
-    }
-
-    dispose(): void {
-        this._renderDisposable?.dispose();
-    }
 }
 
-export class VueTabRenderer implements ITabRenderer {
-    private _element: HTMLElement;
+export class VueRenderer
+    extends AbstractVueRenderer
+    implements ITabRenderer, IContentRenderer
+{
     private _renderDisposable:
         | { update: (props: any) => void; dispose: () => void }
         | undefined;
-
-    get element(): HTMLElement {
-        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%';
-    }
+    private _api: DockviewPanelApi | undefined;
+    private _containerApi: DockviewApi | undefined;
 
     init(parameters: GroupPanelPartInitParameters): void {
+        this._api = parameters.api;
+        this._containerApi = parameters.containerApi;
+
         const props: IDockviewPanelHeaderProps = {
             params: parameters.params,
             api: parameters.api,
@@ -182,9 +137,18 @@ export class VueTabRenderer implements ITabRenderer {
     }
 
     update(event: PanelUpdateEvent<Parameters>): void {
+        if (!this._api || !this._containerApi) {
+            return;
+        }
+
         const params = event.params;
-        // TODO: handle prop updates somehow?
-        this._renderDisposable?.update(params);
+        this._renderDisposable?.update({
+            params: {
+                params: params,
+                api: this._api,
+                containerApi: this._containerApi,
+            },
+        });
     }
 
     dispose(): void {
@@ -192,8 +156,10 @@ export class VueTabRenderer implements ITabRenderer {
     }
 }
 
-export class VueWatermarkRenderer implements IWatermarkRenderer {
-    private _element: HTMLElement;
+export class VueWatermarkRenderer
+    extends AbstractVueRenderer
+    implements IWatermarkRenderer
+{
     private _renderDisposable:
         | { update: (props: any) => void; dispose: () => void }
         | undefined;
@@ -202,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,
@@ -232,9 +188,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
     }
 
     update(event: PanelUpdateEvent<Parameters>): void {
-        const params = event.params;
-        // TODO: handle prop updates somehow?
-        this._renderDisposable?.update(params);
+        // noop
     }
 
     dispose(): void {
@@ -242,8 +196,10 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
     }
 }
 
-export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
-    private _element: HTMLElement;
+export class VueHeaderActionsRenderer
+    extends AbstractVueRenderer
+    implements IHeaderActionsRenderer
+{
     private _renderDisposable:
         | { update: (props: any) => void; dispose: () => void }
         | undefined;
@@ -253,14 +209,11 @@ export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
     }
 
     constructor(
-        private readonly component: VueComponent,
-        private readonly parent: ComponentInternalInstance,
+        component: VueComponent,
+        parent: ComponentInternalInstance,
         group: DockviewGroupPanel
     ) {
-        this._element = document.createElement('div');
-        this.element.className = 'dv-vue-header-action-part';
-        this._element.style.width = '100%';
-        this._element.style.height = '100%';
+        super(component, parent);
     }
 
     init(props: IGroupHeaderProps): void {

packages/dockview-vue/vite.config.ts

@@ -5,6 +5,7 @@ import vue from '@vitejs/plugin-vue';
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [vue()],
+
     build: {
         minify: false,
         lib: {
@@ -13,6 +14,7 @@ export default defineConfig({
             name: 'dockview-vue',
             // the name of the output files when the build is run
             fileName: (format) => `dockview-vue.${format}.js`,
+            formats: ['es', 'umd', 'cjs'],
         },
         rollupOptions: {
             // make sure to externalize deps that shouldn't be bundled

packages/dockview/src/dockview/dockview.tsx

@@ -3,8 +3,6 @@ import {
     DockviewComponent,
     DockviewWillDropEvent,
     DockviewApi,
-    IContentRenderer,
-    ITabRenderer,
     DockviewGroupPanel,
     IHeaderActionsRenderer,
     DockviewDidDropEvent,
@@ -16,13 +14,11 @@ import {
     PROPERTY_KEYS,
     DockviewComponentOptions,
     DockviewFrameworkOptions,
-    IDockviewDisposable,
     DockviewDndOverlayEvent,
     DockviewReadyEvent,
 } from 'dockview-core';
 import { ReactPanelContentPart } from './reactContentPart';
 import { ReactPanelHeaderPart } from './reactHeaderPart';
-
 import { ReactPortalStore, usePortalsLifecycle } from '../react';
 import { ReactWatermarkPart } from './reactWatermarkPart';
 import { ReactHeaderActionsRendererPart } from './headerActionsRenderer';

packages/docs/docs/core/overview.mdx

@@ -22,12 +22,21 @@ function onReady(event: DockviewReadyEvent) {
 ```
 </FrameworkSpecific>
 
-
-<FrameworkSpecific framework='JavaScript'>
+<FrameworkSpecific framework='Vue'>
 ```tsx
-const component = new DockviewComponent({
-  /** options */
-});
+const App = {
+    name: 'App',
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+          const api: DockviewApi = event.api;
+        },
+    },
+    template: `
+      <dockview-vue
+        @ready="onReady"
+      >
+      </dockview-vue>`,
+};
 ```
 </FrameworkSpecific>
 

packages/docs/docs/core/panels/register.mdx

@@ -39,6 +39,37 @@ return <DockviewReact components={components}/>
 </FrameworkSpecific>
 
 
+<FrameworkSpecific framework='Vue'>
+```tsx
+const App = {
+    name: 'App',
+    components: {
+        'component_1': VueComponent1,
+        'component_2': VueComponent2,
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'component_1'
+            });
+
+               event.api.addPanel({
+                id: 'panel_2',
+                component: 'component_2'
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        @ready="onReady"
+      >
+      </dockview-vue>`,
+};
+```
+</FrameworkSpecific>
+
+
 Each panel has an [api](/docs/api/dockview/panelApi) which is used to control specific
 features on that individual panel.
 The panel also has access the [group api](/docs/api/dockview/groupApi) and the container

packages/docs/docs/core/panels/tabs.mdx

@@ -31,6 +31,32 @@ return <DockviewReact tabComponents={tabComponents}/>
 ```
 </FrameworkSpecific>
 
+<FrameworkSpecific framework='Vue'>
+```tsx
+const App = {
+    name: 'App',
+    components: {
+        'component_1': VueComponent1,
+        'tab_1': VueComponent2,
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'component_1',
+                tabComponent: 'tab_1'
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        @ready="onReady"
+      >
+      </dockview-vue>`,
+};
+```
+</FrameworkSpecific>
+
 <FrameworkSpecific framework='JavaScript'>
 not implemented
 </FrameworkSpecific>
@@ -51,6 +77,32 @@ return <DockviewReact defaultTabRenderer={CustomTabRenderer}/>
 ```
 </FrameworkSpecific>
 
+<FrameworkSpecific framework='Vue'>
+```tsx
+const App = {
+    name: 'App',
+    components: {
+        'component_1': VueComponent1,
+        'tab_1': VueComponent2,
+    },
+    methods: {
+        onReady(event: DockviewReadyEvent) {
+            event.api.addPanel({
+                id: 'panel_1',
+                component: 'component_1',
+            });
+        },
+    },
+    template: `
+      <dockview-vue
+        @ready="onReady"
+        :defaultTabRenderer='tab_1'
+      >
+      </dockview-vue>`,
+};
+```
+</FrameworkSpecific>
+
 <FrameworkSpecific framework='JavaScript'>
 not implemented
 </FrameworkSpecific>

packages/docs/templates/dockview/basic/typescript/src/index.ts

@@ -15,7 +15,6 @@ class Panel implements IContentRenderer {
 
     constructor() {
         this._element = document.createElement('div');
-
         this._element.style.color = 'white';
     }
 
@@ -28,7 +27,12 @@ document.getElementById('app').className = 'dockview-theme-abyss';
 
 const dockview = new DockviewComponent({
     parentElement: document.getElementById('app'),
-    components: { default: Panel },
+    createComponent: (options) => {
+        switch (options.name) {
+            case 'default':
+                return new Panel();
+        }
+    },
 });
 
 const api = new DockviewApi(dockview);

packages/docs/templates/dockview/update-parameters/vue/src/index.ts

@@ -27,7 +27,7 @@ const Panel = defineComponent({
         },
     },
     mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
             this.title = this.api.title;
         });
         this.title = this.api.title;
@@ -64,14 +64,16 @@ const Tab = defineComponent({
     name: 'Tab',
     props: {
         params: {
-            type: Object as PropType<IDockviewPanelHeaderProps>,
+            type: Object as PropType<
+                IDockviewPanelHeaderProps<{ myValue: number }>
+            >,
             required: true,
         },
     },
     data() {
         return {
             title: '',
-            value: null,
+            value: this.params.params.myValue,
         };
     },
     mounted() {
@@ -80,11 +82,12 @@ const Tab = defineComponent({
         });
 
         const disposable2 = this.params.api.onDidParametersChange(() => {
-            this.value = this.params.myValue;
+            console.log(this.params);
+            this.value = this.params.params.myValue;
         });
 
         this.title = this.api.title;
-        this.value = this.params.myValue;
+        this.value = this.params.params.myValue;
 
         return () => {
             disposable.dispose();

scripts/set-experimental-versions.js

@@ -50,22 +50,35 @@ fs.writeFileSync(
 
 // dockview
 
-const dockviewPath = path.join(rootDir, 'packages', 'dockview', 'package.json');
-const dockviewPackageJson = JSON.parse(
+const depPackages = ['dockview', 'dockview-vue'];
+
+for (const depPackage of depPackages) {
+    const dockviewPath = path.join(
+        rootDir,
+        'packages',
+        depPackage,
+        'package.json'
+    );
+    const dockviewPackageJson = JSON.parse(
         fs.readFileSync(dockviewPath).toString()
-);
+    );
 
-dockviewPackageJson.version = version;
-dockviewPackageJson.dependencies['dockview-core'] = dockviewPackageJson.version;
+    dockviewPackageJson.version = version;
+    dockviewPackageJson.dependencies['dockview-core'] =
+        dockviewPackageJson.version;
 
-fs.writeFileSync(dockviewPath, JSON.stringify(dockviewPackageJson, null, 4));
+    fs.writeFileSync(
+        dockviewPath,
+        JSON.stringify(dockviewPackageJson, null, 4)
+    );
 
-// sanity check
+    // sanity check
 
-const dvCore = JSON.parse(fs.readFileSync(dockviewCorePath).toString());
-const dv = JSON.parse(fs.readFileSync(dockviewPath).toString());
+    const dvCore = JSON.parse(fs.readFileSync(dockviewCorePath).toString());
+    const dv = JSON.parse(fs.readFileSync(dockviewPath).toString());
 
-console.log(`dockview-core version: ${dvCore.version}`);
-console.log(
-    `dockview version: ${dv.version} dockview-core dependency version: ${dv.dependencies['dockview-core']}`
-);
+    console.log(`dockview-core version: ${dvCore.version}`);
+    console.log(
+        `${depPackage} version: ${dv.version} dockview-core dependency version: ${dv.dependencies['dockview-core']}`
+    );
+}

sonar-project.properties

@@ -1,9 +1,9 @@
 sonar.projectKey=mathuo_dockview
 sonar.organization=dockview
 
-sonar.inclusions=packages/dockview/src/**/*,packages/dockview-core/src/**/*
-sonar.exclusions=packages/dockview/src/__tests__/**,packages/dockview-core/src/__tests__/**
-sonar.tests=packages/dockview/src/__tests__,packages/dockview-core/src/__tests__
+sonar.inclusions=packages/dockview/src/**/*,packages/dockview-core/src/**/*,packages/dockview-vue/src/**/*
+sonar.exclusions=packages/dockview/src/__tests__/**,packages/dockview-core/src/__tests__/**,packages/dockview-vue/src/__tests__/**
+sonar.tests=packages/dockview/src/__tests__,packages/dockview-core/src/__tests__,packages/dockview-vue/src/__tests__
 
 sonar.testExecutionReportPaths=test-report.xml
 sonar.javascript.lcov.reportPaths=coverage/lcov.info

tsconfig.json

@@ -6,6 +6,9 @@
         },
         {
             "path": "./packages/dockview-core"
+        },
+        {
+            "path": "./packages/dockview-vue"
         }
     ]
 }