refactor(web/vue): reuse inject context composable in context state

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<ContextValue>(name: string) {
     const injectionKey: InjectionKey<ContextValue> = Symbol(name);
 
-    const injectContext = <Fallback extends ContextValue = ContextValue>(fallback?: Fallback) => {
-        const context = inject(injectionKey, fallback);
+    const inject = <Fallback extends ContextValue = ContextValue>(fallback?: Fallback) => {
+        const context = vueInject(injectionKey, fallback);
 
         if (context !== undefined)
             return context;
@@ -43,8 +43,8 @@ export function useContextFactory<ContextValue>(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<ContextValue>(name: string) {
     };
 
     return {
-        inject: injectContext,
-        provide: provideContext,
+        inject,
+        provide,
         appProvide,
         key: injectionKey,
     }

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<Return> {
-  injectionKey: string | InjectionKey<Return>;
+  injectionName?: string;
   defaultValue?: Return;
 }
 
@@ -9,28 +10,28 @@ export interface useInjectionStoreOptions<Return> {
  * @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<Return> {
  *   state.value = 'Hello World';
  *  }
  * }
- * 
+ *
  * // In a component
  * const state = useInjectedState();
- * 
+ *
  * @since 0.0.5
  */
 export function useInjectionStore<Args extends any[], Return>(
   stateFactory: (...args: Args) => Return,
-  options?: useInjectionStoreOptions<Return>,
+  options?: useInjectionStoreOptions<Return>
 ) {
-  const key = options?.injectionKey ?? Symbol(stateFactory.name ?? 'InjectionStore');
+  const ctx = useContextFactory<Return>(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,