From d55e3989f3b632d3981e450f34b49861af535e9c Mon Sep 17 00:00:00 2001 From: robonen Date: Thu, 7 Aug 2025 05:25:04 +0700 Subject: [PATCH 1/2] refactor(web/vue): reuse inject context composable in context state --- .../composables/useContextFactory/index.ts | 14 ++++----- .../composables/useInjectionStore/index.ts | 31 ++++++++++--------- 2 files changed, 23 insertions(+), 22 deletions(-) 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, From 04aa9e47218ca1280f90b7fc18ae6ecd738b0b6d Mon Sep 17 00:00:00 2001 From: robonen Date: Thu, 7 Aug 2025 05:26:02 +0700 Subject: [PATCH 2/2] build(web/vue): bump version to 0.0.10 --- web/vue/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/vue/package.json b/web/vue/package.json index 7c0a468..f6da998 100644 --- a/web/vue/package.json +++ b/web/vue/package.json @@ -1,6 +1,6 @@ { "name": "@robonen/vue", - "version": "0.0.9", + "version": "0.0.10", "license": "Apache-2.0", "description": "Collection of powerful tools for Vue", "keywords": [