refactor(packages/vue): add app.provide() support for useContextFactory

packages/vue/src/composables/useContextFactory/index.test.ts

@@ -6,15 +6,14 @@ import { VueToolsError } from '../../utils';
 
 function testFactory<Data>(
   data: Data,
-  options?: { contextName?: string, fallback?: Data },
+  context: ReturnType<typeof useContextFactory<Data>>,
+  fallback?: Data,
 ) {
-  const contextName = options?.contextName ?? 'TestContext';
-
-  const [inject, provide] = useContextFactory(contextName);
+  const [inject, provide] = context;
 
   const Child = defineComponent({
     setup() {
-      const value = inject(options?.fallback);
+      const value = inject(fallback);
       return { value };
     },
     template: `{{ value }}`,
@@ -38,7 +37,7 @@ function testFactory<Data>(
 
 describe('useContextFactory', () => {
   it('provide and inject context correctly', () => {
-    const { Parent } = testFactory('test');
+    const { Parent } = testFactory('test', useContextFactory('TestContext'));
 
     const component = mount(Parent);
 
@@ -46,13 +45,13 @@ describe('useContextFactory', () => {
   });
 
   it('throw an error when context is not provided', () => {
-    const { Child } = testFactory('test');
+    const { Child } = testFactory('test', useContextFactory('TestContext'));
 
     expect(() => mount(Child)).toThrow(VueToolsError);
   });
 
   it('inject a fallback value when context is not provided', () => {
-    const { Child } = testFactory('test', { fallback: 'fallback' });
+    const { Child } = testFactory('test', useContextFactory('TestContext'), 'fallback');
 
     const component = mount(Child);
 
@@ -60,10 +59,23 @@ describe('useContextFactory', () => {
   });
 
   it('correctly handle null values', () => {
-    const { Parent } = testFactory(null);
+    const { Parent } = testFactory(null, useContextFactory('TestContext'));
 
     const component = mount(Parent);
 
     expect(component.text()).toBe('');
   });
+
+  it('provide context globally with app', () => {
+    const context = useContextFactory('TestContext');
+    const { Child } = testFactory(null, context);
+
+    const childComponent = mount(Child, {
+      global: {
+        plugins: [app => context[1]('test', app)],
+      },
+    });
+
+    expect(childComponent.text()).toBe('test');
+  });
 });

packages/vue/src/composables/useContextFactory/index.ts

@@ -1,4 +1,4 @@
-import { inject, provide, type InjectionKey } from 'vue';
+import {inject, provide, type InjectionKey, type App} from 'vue';
 import { VueToolsError } from '../..';
 
 /**
@@ -13,6 +13,22 @@ import { VueToolsError } from '../..';
  * @example
  * const [injectContext, provideContext] = useContextFactory('MyContext');
  *
+ * const context = provideContext('Hello World');
+ * const value = injectContext();
+ *
+ * @example
+ * const [injectContext, provideContext] = useContextFactory('MyContext');
+ *
+ * // In a plugin
+ * {
+ *   install(app) {
+ *      provideContext('Hello World', app);
+ *   }
+ * }
+ *
+ * // In a component
+ * const value = injectContext();
+ *
  * @since 0.0.1
  */
 export function useContextFactory<ContextValue>(name: string) {  
@@ -27,10 +43,10 @@ export function useContextFactory<ContextValue>(name: string) {
         throw new VueToolsError(`useContextFactory: '${name}' context is not provided`);
     };
 
-    const provideContext = (context: ContextValue) => {
-        provide(injectionKey, context);
+    const provideContext = (context: ContextValue, app?: App) => {
+        (app ? app.provide : provide)(injectionKey, context);
         return context;
     };
 
     return [injectContext, provideContext] as const;
-  }
+}