bug: maintain inject/provide context

mathuo · Aug 1, 2024 · ea5b94a · ea5b94a
1 parent e5e9603
commit ea5b94a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/packages/dockview-vue/src/utils.ts b/packages/dockview-vue/src/utils.ts
@@ -72,6 +72,10 @@ export function mountVueComponent<T extends Record<string, any>>(
     let vNode = createVNode(component, Object.freeze(props));
 
     vNode.appContext = parent.appContext;
+    vNode.appContext.provides = {
+        ...(vNode.appContext.provides ? vNode.appContext.provides : {}),
+        ...((parent as any).provides ? (parent as any).provides : {}),
+    };
 
     render(vNode, element);
 

diff --git a/packages/docs/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts
@@ -7,21 +7,35 @@ import {
 } from 'dockview-vue';
 
 const Panel = defineComponent({
+    inject: ['vu3ProvideInjectEvidenceTestMessage'],
     name: 'Panel',
     props: {
         params: {
             type: Object as PropType<IDockviewPanelProps>,
             required: true,
         },
     },
-    setup(props) {
+    data() {
         return {
-            title: props.params.api.title,
+            title: '',
+            message: this.vu3ProvideInjectEvidenceTestMessage ?? 'not found',
+        };
+    },
+    mounted() {
+        const disposable = this.params.api.onDidTitleChange(() => {
+            this.title = this.params.api.title;
+        });
+        this.title = this.params.api.title;
+
+        return () => {
+            disposable.dispose();
         };
     },
     template: `
     <div style="height:100%; color:red;">
       Hello World
+      <div>{{title}}</div>
+      <div>{{message}}</div>
     </div>`,
 });
 
@@ -40,6 +54,11 @@ const App = defineComponent({
             });
         },
     },
+    provide() {
+        return {
+            vu3ProvideInjectEvidenceTestMessage: 'Hello from the provider',
+        };
+    },
     template: `
       <dockview-vue
         style="width:100%; height:100%"