diff --git a/packages/vue/src/composables/useContextFactory/index.test.ts b/packages/vue/src/composables/useContextFactory/index.test.ts index b71a494..441a30f 100644 --- a/packages/vue/src/composables/useContextFactory/index.test.ts +++ b/packages/vue/src/composables/useContextFactory/index.test.ts @@ -6,15 +6,14 @@ import { VueToolsError } from '../../utils'; function testFactory( data: Data, - options?: { contextName?: string, fallback?: Data }, + context: ReturnType>, + 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( 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'); + }); }); \ No newline at end of file diff --git a/packages/vue/src/composables/useContextFactory/index.ts b/packages/vue/src/composables/useContextFactory/index.ts index 71d9120..e3fec0f 100644 --- a/packages/vue/src/composables/useContextFactory/index.ts +++ b/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 '../..'; /** @@ -12,7 +12,23 @@ 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(name: string) { @@ -27,10 +43,10 @@ export function useContextFactory(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; - } \ No newline at end of file +} \ No newline at end of file