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;
 }
 
@@ -46,23 +47,23 @@ export interface useInjectionStoreOptions<Return> {
  */
 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,