Merge pull request #1128 from mathuo/fix/vue-header-actions-props-lost-on-update

fix(dockview-vue): preserve full params in header actions after react…

Author: mathuo

packages/dockview-vue/src/__tests__/utils.spec.ts

@@ -456,4 +456,42 @@ describe('VueHeaderActionsRenderer', () => {
 
         renderer.dispose();
     });
+
+    test('should preserve full params including api after reactive updates', () => {
+        // Regression test for https://github.com/mathuo/dockview/issues/1127
+        // Partial updates (e.g. isGroupActive) must not discard api and other fields
+        const renderer = new VueHeaderActionsRenderer(
+            mockComponent,
+            mockParent,
+            groupPanel
+        );
+
+        const mockContainerApi = {} as any;
+
+        renderer.init({
+            api: groupPanel.api,
+            containerApi: mockContainerApi,
+            group: groupPanel as any,
+        });
+
+        (cloneVNode as jest.Mock).mockClear();
+
+        isGroupActive = false;
+        onDidActiveChange.fire(undefined);
+
+        expect(cloneVNode as jest.Mock).toHaveBeenCalledTimes(1);
+        const updatedProps = (cloneVNode as jest.Mock).mock.calls[0][1];
+        expect(updatedProps.params).toEqual(
+            expect.objectContaining({
+                api: groupPanel.api,
+                containerApi: mockContainerApi,
+                panels: panels,
+                activePanel: activePanel,
+                isGroupActive: false,
+                group: groupPanel,
+            })
+        );
+
+        renderer.dispose();
+    });
 });

packages/dockview-vue/src/utils.ts

@@ -210,6 +210,7 @@ export class VueHeaderActionsRenderer
         | { update: (props: any) => void; dispose: () => void }
         | undefined;
     private readonly _mutableDisposable = new DockviewMutableDisposable();
+    private _baseProps: IGroupHeaderProps | undefined;
 
     get element(): HTMLElement {
         return this._element;
@@ -224,35 +225,28 @@ export class VueHeaderActionsRenderer
     }
 
     init(props: IGroupHeaderProps): void {
+        this._baseProps = props;
+
         this._mutableDisposable.value = new DockviewCompositeDisposable(
             this.group.model.onDidAddPanel(() => {
-                this.updatePanels();
+                this.updateProps();
             }),
             this.group.model.onDidRemovePanel(() => {
-                this.updatePanels();
+                this.updateProps();
             }),
             this.group.model.onDidActivePanelChange(() => {
-                this.updateActivePanel();
+                this.updateProps();
             }),
             props.api.onDidActiveChange(() => {
-                this.updateGroupActive();
+                this.updateProps();
             })
         );
 
-        const enrichedProps: IDockviewHeaderActionsProps = {
-            ...props,
-            panels: this.group.model.panels,
-            activePanel: this.group.model.activePanel,
-            isGroupActive: this.group.api.isActive,
-            group: this.group,
-            headerPosition: this.group.model.headerPosition,
-        };
-
         this._renderDisposable?.dispose();
         this._renderDisposable = mountVueComponent(
             this.component,
             this.parent,
-            { params: enrichedProps },
+            { params: this.buildEnrichedProps() },
             this.element
         );
     }
@@ -262,22 +256,19 @@ export class VueHeaderActionsRenderer
         this._renderDisposable?.dispose();
     }
 
-    private updatePanels(): void {
-        this._renderDisposable?.update({
-            params: { panels: this.group.model.panels },
-        });
-    }
-
-    private updateActivePanel(): void {
-        this._renderDisposable?.update({
-            params: { activePanel: this.group.model.activePanel },
-        });
+    private buildEnrichedProps(): IDockviewHeaderActionsProps {
+        return {
+            ...this._baseProps!,
+            panels: this.group.model.panels,
+            activePanel: this.group.model.activePanel,
+            isGroupActive: this.group.api.isActive,
+            group: this.group,
+            headerPosition: this.group.model.headerPosition,
+        };
     }
 
-    private updateGroupActive(): void {
-        this._renderDisposable?.update({
-            params: { isGroupActive: this.group.api.isActive },
-        });
+    private updateProps(): void {
+        this._renderDisposable?.update({ params: this.buildEnrichedProps() });
     }
 }