diff --git a/web/vue/src/composables/useContextFactory/index.ts b/web/vue/src/composables/useContextFactory/index.ts index 4428423..3bd6749 100644 --- a/web/vue/src/composables/useContextFactory/index.ts +++ b/web/vue/src/composables/useContextFactory/index.ts @@ -1,4 +1,4 @@ -import { inject, provide, type InjectionKey, type App } from 'vue'; +import { inject as vueInject, provide as vueProvide, type InjectionKey, type App } from 'vue'; import { VueToolsError } from '../..'; /** @@ -34,8 +34,8 @@ import { VueToolsError } from '../..'; export function useContextFactory(name: string) { const injectionKey: InjectionKey = Symbol(name); - const injectContext = (fallback?: Fallback) => { - const context = inject(injectionKey, fallback); + const inject = (fallback?: Fallback) => { + const context = vueInject(injectionKey, fallback); if (context !== undefined) return context; @@ -43,8 +43,8 @@ export function useContextFactory(name: string) { throw new VueToolsError(`useContextFactory: '${name}' context is not provided`); }; - const provideContext = (context: ContextValue) => { - provide(injectionKey, context); + const provide = (context: ContextValue) => { + vueProvide(injectionKey, context); return context; }; @@ -54,8 +54,8 @@ export function useContextFactory(name: string) { }; return { - inject: injectContext, - provide: provideContext, + inject, + provide, appProvide, key: injectionKey, } diff --git a/web/vue/src/composables/useInjectionStore/index.ts b/web/vue/src/composables/useInjectionStore/index.ts index 5134f82..851cbce 100644 --- a/web/vue/src/composables/useInjectionStore/index.ts +++ b/web/vue/src/composables/useInjectionStore/index.ts @@ -1,7 +1,8 @@ -import { inject, provide, type App, type InjectionKey } from 'vue'; +import { useContextFactory } from '../useContextFactory'; +import type { App, InjectionKey } from 'vue'; export interface useInjectionStoreOptions { - injectionKey: string | InjectionKey; + injectionName?: string; defaultValue?: Return; } @@ -9,28 +10,28 @@ export interface useInjectionStoreOptions { * @name useInjectionStore * @category State * @description Create a global state that can be injected into components - * + * * @param {Function} stateFactory A factory function that creates the state * @param {useInjectionStoreOptions} options An object with the following properties * @param {string | InjectionKey} options.injectionKey The key to use for the injection * @param {any} options.defaultValue The default value to use when the state is not provided * @returns {Object} An object with `useProvidingState`, `useAppProvidingState`, and `useInjectedState` functions - * + * * @example * const { useProvidingState, useInjectedState } = useInjectionStore(() => ref('Hello World')); - * + * * // In a parent component * const state = useProvidingState(); - * + * * // In a child component * const state = useInjectedState(); - * + * * @example * const { useProvidingState, useInjectedState } = useInjectionStore(() => ref('Hello World'), { * injectionKey: 'MyState', * defaultValue: 'Default Value' * }); - * + * * // In a plugin * { * install(app) { @@ -38,31 +39,31 @@ export interface useInjectionStoreOptions { * state.value = 'Hello World'; * } * } - * + * * // In a component * const state = useInjectedState(); - * + * * @since 0.0.5 */ export function useInjectionStore( stateFactory: (...args: Args) => Return, - options?: useInjectionStoreOptions, + options?: useInjectionStoreOptions ) { - const key = options?.injectionKey ?? Symbol(stateFactory.name ?? 'InjectionStore'); + const ctx = useContextFactory(options?.injectionName ?? stateFactory.name ?? 'InjectionStore'); const useProvidingState = (...args: Args) => { const state = stateFactory(...args); - provide(key, state); + ctx.provide(state); return state; }; const useAppProvidingState = (app: App) => (...args: Args) => { const state = stateFactory(...args); - app.provide(key, state); + ctx.appProvide(app)(state); return state; }; - const useInjectedState = () => inject(key, options?.defaultValue); + const useInjectedState = () => ctx.inject(options?.defaultValue); return { useProvidingState,