Refactor DI for simplicity and type safety

This commit improves the dependency injection mechanism by introducing a
custom `injectKey` function.

Key improvements are:

- Enforced type consistency during dependency registration and
  instantiation.
- Simplified injection process, abstracting away the complexity with a
  uniform API, regardless of the dependency's lifetime.
- Eliminated the possibility of `undefined` returns during dependency
  injection, promoting fail-fast behavior.
- Removed the necessity for type casting to `symbol` for injection keys
  in unit tests by using existing types.
- Consalidated imports, combining keys and injection functions in one
  `import` statement.

src/presentation/components/Code/CodeButtons/CodeCopyButton.vue

@@ -7,10 +7,8 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent, inject,
-} from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 import IconButton from './IconButton.vue';
 
 export default defineComponent({
@@ -18,8 +16,8 @@ export default defineComponent({
     IconButton,
   },
   setup() {
-    const { copyText } = inject(InjectionKeys.useClipboard)();
-    const { currentCode } = inject(InjectionKeys.useCurrentCode)();
+    const { copyText } = injectKey((keys) => keys.useClipboard);
+    const { currentCode } = injectKey((keys) => keys.useCurrentCode);
 
     async function copyCode() {
       await copyText(currentCode.value);

src/presentation/components/Code/CodeButtons/CodeRunButton.vue

@@ -8,10 +8,8 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent, computed, inject,
-} from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent, computed } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { CodeRunner } from '@/infrastructure/CodeRunner';
 import { IReadOnlyApplicationContext } from '@/application/Context/IApplicationContext';
@@ -22,8 +20,8 @@ export default defineComponent({
     IconButton,
   },
   setup() {
-    const { currentState, currentContext } = inject(InjectionKeys.useCollectionState)();
-    const { os, isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
+    const { currentState, currentContext } = injectKey((keys) => keys.useCollectionState);
+    const { os, isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
 
     const canRun = computed<boolean>(() => getCanRunState(currentState.value.os, isDesktop, os));
 

src/presentation/components/Code/CodeButtons/Save/CodeSaveButton.vue

@@ -13,9 +13,9 @@
 
 <script lang="ts">
 import {
-  defineComponent, ref, computed, inject,
+  defineComponent, ref, computed,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { SaveFileDialog, FileType } from '@/infrastructure/SaveFileDialog';
 import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
@@ -34,8 +34,8 @@ export default defineComponent({
     ModalDialog,
   },
   setup() {
-    const { currentState } = inject(InjectionKeys.useCollectionState)();
-    const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
+    const { currentState } = injectKey((keys) => keys.useCollectionState);
+    const { isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
 
     const areInstructionsVisible = ref(false);
     const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));

src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue

@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, shallowRef, inject } from 'vue';
+import { defineComponent, shallowRef } from 'vue';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 
 export default defineComponent({
   components: {
@@ -27,7 +27,7 @@ export default defineComponent({
     AppIcon,
   },
   setup() {
-    const { copyText } = inject(InjectionKeys.useClipboard)();
+    const { copyText } = injectKey((keys) => keys.useClipboard);
 
     const codeElement = shallowRef<HTMLElement | undefined>();
 

src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue

@@ -57,9 +57,8 @@
 <script lang="ts">
 import {
   defineComponent, PropType, computed,
-  inject,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
@@ -79,7 +78,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { info } = inject(InjectionKeys.useApplication);
+    const { info } = injectKey((keys) => keys.useApplication);
 
     const appName = computed<string>(() => info.name);
 

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -8,9 +8,9 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed, inject,
+  defineComponent, computed,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import CodeRunButton from './CodeRunButton.vue';
 import CodeCopyButton from './CodeCopyButton.vue';
 import CodeSaveButton from './Save/CodeSaveButton.vue';
@@ -22,7 +22,7 @@ export default defineComponent({
     CodeSaveButton,
   },
   setup() {
-    const { currentCode } = inject(InjectionKeys.useCurrentCode)();
+    const { currentCode } = injectKey((keys) => keys.useCurrentCode);
 
     const hasCode = computed<boolean>(() => currentCode.value.length > 0);
 

src/presentation/components/Code/TheCodeArea.vue

@@ -11,9 +11,9 @@
 
 <script lang="ts">
 import {
-  defineComponent, onUnmounted, onMounted, inject,
+  defineComponent, onUnmounted, onMounted,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { ICodeChangedEvent } from '@/application/Context/State/Code/Event/ICodeChangedEvent';
 import { IScript } from '@/domain/IScript';
 import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
@@ -37,8 +37,8 @@ export default defineComponent({
     NonCollapsing,
   },
   setup(props) {
-    const { onStateChange, currentState } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    const { onStateChange, currentState } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const editorId = 'codeEditor';
     let editor: ace.Ace.Editor | undefined;

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -65,8 +65,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, inject } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent, ref } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import { ICategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
@@ -81,8 +81,8 @@ export default defineComponent({
     TooltipWrapper,
   },
   setup() {
-    const { modifyCurrentState, onStateChange } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    const { modifyCurrentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const currentSelection = ref(SelectionType.None);
 

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -11,10 +11,8 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent, computed, inject,
-} from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent, computed } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import MenuOptionList from './MenuOptionList.vue';
 import MenuOptionListItem from './MenuOptionListItem.vue';
@@ -30,8 +28,8 @@ export default defineComponent({
     MenuOptionListItem,
   },
   setup() {
-    const { modifyCurrentContext, currentState } = inject(InjectionKeys.useCollectionState)();
-    const { application } = inject(InjectionKeys.useApplication);
+    const { modifyCurrentContext, currentState } = injectKey((keys) => keys.useCollectionState);
+    const { application } = injectKey((keys) => keys.useApplication);
 
     const allOses = computed<ReadonlyArray<IOsViewModel>>(() => (
       application.getSupportedOsList() ?? [])

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -10,10 +10,8 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent, ref, inject,
-} from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent, ref } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 import TheOsChanger from './TheOsChanger.vue';
@@ -27,8 +25,8 @@ export default defineComponent({
     TheViewChanger,
   },
   setup() {
-    const { onStateChange } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    const { onStateChange } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const isSearching = ref(false);
 

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -35,9 +35,8 @@
 <script lang="ts">
 import {
   defineComponent, ref, onMounted, onUnmounted, computed,
-  inject,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import SizeObserver from '@/presentation/components/Shared/SizeObserver.vue';
 import { hasDirective } from './NonCollapsingDirective';
 import CardListItem from './CardListItem.vue';
@@ -48,7 +47,7 @@ export default defineComponent({
     SizeObserver,
   },
   setup() {
-    const { currentState, onStateChange } = inject(InjectionKeys.useCollectionState)();
+    const { currentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
 
     const width = ref<number>(0);
     const categoryIds = computed<ReadonlyArray<number>>(() => currentState

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -49,11 +49,10 @@
 
 <script lang="ts">
 import {
-  defineComponent, ref, watch, computed,
-  inject, shallowRef,
+  defineComponent, ref, watch, computed, shallowRef,
 } from 'vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 
@@ -78,8 +77,8 @@ export default defineComponent({
     /* eslint-enable @typescript-eslint/no-unused-vars */
   },
   setup(props, { emit }) {
-    const { onStateChange, currentState } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    const { onStateChange, currentState } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const isExpanded = computed({
       get: () => {

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -39,10 +39,9 @@
 <script lang="ts">
 import {
   defineComponent, PropType, ref, computed,
-  inject,
 } from 'vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
 import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
@@ -62,9 +61,9 @@ export default defineComponent({
     },
   },
   setup() {
-    const { modifyCurrentState, onStateChange } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
-    const { info } = inject(InjectionKeys.useApplication);
+    const { modifyCurrentState, onStateChange } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
+    const { info } = injectKey((keys) => keys.useApplication);
 
     const repositoryUrl = computed<string>(() => info.repositoryWebUrl);
     const searchQuery = ref<string | undefined>();

src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue

@@ -8,11 +8,10 @@
 
 <script lang="ts">
 import {
-  PropType, defineComponent, ref, watch,
-  computed, inject,
+  PropType, defineComponent, ref, watch, computed,
 } from 'vue';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { NodeMetadata } from '@/presentation/components/Scripts/View/Tree/NodeContent/NodeMetadata';
 import { IReverter } from './Reverter/IReverter';
 import { getReverter } from './Reverter/ReverterFactory';
@@ -31,8 +30,8 @@ export default defineComponent({
   setup(props) {
     const {
       currentState, modifyCurrentState, onStateChange,
-    } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const isReverted = ref(false);
 

src/presentation/components/Scripts/View/Tree/TreeView/Node/UseNodeState.ts

@@ -1,14 +1,14 @@
 import {
-  WatchSource, inject, shallowRef, watch,
+  WatchSource, shallowRef, watch,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { ReadOnlyTreeNode } from './TreeNode';
 import { TreeNodeStateDescriptor } from './State/StateDescriptor';
 
 export function useNodeState(
   nodeWatcher: WatchSource<ReadOnlyTreeNode | undefined>,
 ) {
-  const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+  const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
   const state = shallowRef<TreeNodeStateDescriptor>();
 

src/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes.ts

@@ -1,12 +1,12 @@
 import {
-  WatchSource, watch, inject, shallowReadonly, shallowRef,
+  WatchSource, watch, shallowReadonly, shallowRef,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { TreeRoot } from './TreeRoot/TreeRoot';
 import { QueryableNodes } from './TreeRoot/NodeCollection/Query/QueryableNodes';
 
 export function useCurrentTreeNodes(treeWatcher: WatchSource<TreeRoot>) {
-  const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+  const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
   const tree = shallowRef<TreeRoot | undefined>();
   const nodes = shallowRef<QueryableNodes | undefined>();

src/presentation/components/Scripts/View/Tree/TreeView/UseNodeStateChangeAggregator.ts

@@ -1,7 +1,7 @@
 import {
-  WatchSource, inject, watch, shallowRef,
+  WatchSource, watch, shallowRef,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 import { TreeRoot } from './TreeRoot/TreeRoot';
 import { TreeNode } from './Node/TreeNode';
@@ -15,7 +15,7 @@ export function useNodeStateChangeAggregator(
   useTreeNodes = useCurrentTreeNodes,
 ) {
   const { nodes } = useTreeNodes(treeWatcher);
-  const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+  const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
   const onNodeChangeCallback = shallowRef<NodeStateChangeEventCallback>();
 

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.ts

@@ -1,10 +1,9 @@
-import { inject } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { TreeNodeCheckState } from '../TreeView/Node/State/CheckState';
 import { TreeNodeStateChangedEmittedEvent } from '../TreeView/Bindings/TreeNodeStateChangedEmittedEvent';
 
 export function useCollectionSelectionStateUpdater() {
-  const { modifyCurrentState, currentState } = inject(InjectionKeys.useCollectionState)();
+  const { modifyCurrentState, currentState } = injectKey((keys) => keys.useCollectionState);
 
   function updateNodeSelection(change: TreeNodeStateChangedEmittedEvent) {
     const { node } = change;

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.ts

@@ -1,7 +1,7 @@
 import {
-  computed, inject, shallowReadonly, shallowRef, triggerRef,
+  computed, shallowReadonly, shallowRef, triggerRef,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
 import { getScriptNodeId } from './CategoryNodeMetadataConverter';
 
@@ -20,8 +20,8 @@ export function useSelectedScriptNodeIds(scriptNodeIdParser = getScriptNodeId) {
 }
 
 function useSelectedScripts() {
-  const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
-  const { onStateChange } = inject(InjectionKeys.useCollectionState)();
+  const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
+  const { onStateChange } = injectKey((keys) => keys.useCollectionState);
 
   const selectedScripts = shallowRef<readonly SelectedScript[]>([]);
 

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewFilterEvent.ts

@@ -1,9 +1,9 @@
 import {
-  Ref, inject, shallowReadonly, shallowRef,
+  Ref, shallowReadonly, shallowRef,
 } from 'vue';
 import { IScript } from '@/domain/IScript';
 import { ICategory } from '@/domain/ICategory';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
 import { IFilterResult } from '@/application/Context/State/Filter/IFilterResult';
 import { TreeViewFilterEvent, createFilterRemovedEvent, createFilterTriggeredEvent } from '../TreeView/Bindings/TreeInputFilterEvent';
@@ -18,8 +18,8 @@ type TreeNodeFilterResultPredicate = (
 ) => boolean;
 
 export function useTreeViewFilterEvent() {
-  const { onStateChange } = inject(InjectionKeys.useCollectionState)();
-  const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+  const { onStateChange } = injectKey((keys) => keys.useCollectionState);
+  const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
   const latestFilterEvent = shallowRef<TreeViewFilterEvent | undefined>(undefined);
 

src/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput.ts

@@ -1,9 +1,9 @@
 import {
-  WatchSource, computed, inject,
+  WatchSource, computed,
   ref, watch,
 } from 'vue';
 import { ICategoryCollection } from '@/domain/ICategoryCollection';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { TreeInputNodeData } from '../TreeView/Bindings/TreeInputNodeData';
 import { NodeMetadata } from '../NodeContent/NodeMetadata';
 import { convertToNodeInput } from './TreeNodeMetadataConverter';
@@ -17,7 +17,7 @@ export function useTreeViewNodeInput(
   },
   nodeConverter = convertToNodeInput,
 ) {
-  const { currentState } = inject(InjectionKeys.useCollectionState)();
+  const { currentState } = injectKey((keys) => keys.useCollectionState);
 
   const categoryId = ref<number | undefined>();
 

src/presentation/components/TheFooter/DownloadUrlList.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
+import { defineComponent } from 'vue';
 import { OperatingSystem } from '@/domain/OperatingSystem';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import DownloadUrlListItem from './DownloadUrlListItem.vue';
 
@@ -36,7 +36,7 @@ export default defineComponent({
     AppIcon,
   },
   setup() {
-    const { os: currentOs } = inject(InjectionKeys.useRuntimeEnvironment);
+    const { os: currentOs } = injectKey((keys) => keys.useRuntimeEnvironment);
     const supportedDesktops = [
       ...supportedOperativeSystems,
     ].sort((os) => (os === currentOs ? 0 : 1));

src/presentation/components/TheFooter/DownloadUrlListItem.vue

@@ -12,9 +12,8 @@
 <script lang="ts">
 import {
   defineComponent, PropType, computed,
-  inject,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 
 export default defineComponent({
@@ -25,8 +24,8 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { info } = inject(InjectionKeys.useApplication);
-    const { os: currentOs } = inject(InjectionKeys.useRuntimeEnvironment);
+    const { info } = injectKey((keys) => keys.useApplication);
+    const { os: currentOs } = injectKey((keys) => keys.useRuntimeEnvironment);
 
     const isCurrentOs = computed<boolean>(() => {
       return currentOs === props.operatingSystem;

src/presentation/components/TheFooter/PrivacyPolicy.vue

@@ -41,13 +41,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, inject } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent, computed } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 
 export default defineComponent({
   setup() {
-    const { info } = inject(InjectionKeys.useApplication);
-    const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
+    const { info } = injectKey((keys) => keys.useApplication);
+    const { isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
 
     const repositoryUrl = computed<string>(() => info.repositoryUrl);
     const feedbackUrl = computed<string>(() => info.feedbackUrl);

src/presentation/components/TheFooter/TheFooter.vue

@@ -45,11 +45,11 @@
 
 <script lang="ts">
 import {
-  defineComponent, ref, computed, inject,
+  defineComponent, ref, computed,
 } from 'vue';
 import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import DownloadUrlList from './DownloadUrlList.vue';
 import PrivacyPolicy from './PrivacyPolicy.vue';
 
@@ -61,8 +61,8 @@ export default defineComponent({
     AppIcon,
   },
   setup() {
-    const { info } = inject(InjectionKeys.useApplication);
-    const { isDesktop } = inject(InjectionKeys.useRuntimeEnvironment);
+    const { info } = injectKey((keys) => keys.useApplication);
+    const { isDesktop } = injectKey((keys) => keys.useRuntimeEnvironment);
 
     const isPrivacyDialogVisible = ref(false);
 

src/presentation/components/TheHeader.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, inject } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { defineComponent, computed } from 'vue';
+import { injectKey } from '@/presentation/injectionSymbols';
 
 export default defineComponent({
   setup() {
-    const { info } = inject(InjectionKeys.useApplication);
+    const { info } = injectKey((keys) => keys.useApplication);
 
     const title = computed(() => info.name);
     const subtitle = computed(() => info.slogan);

src/presentation/components/TheSearchBar.vue

@@ -15,9 +15,8 @@
 <script lang="ts">
 import {
   defineComponent, ref, watch, computed,
-  inject,
 } from 'vue';
-import { InjectionKeys } from '@/presentation/injectionSymbols';
+import { injectKey } from '@/presentation/injectionSymbols';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import { IReadOnlyUserFilter } from '@/application/Context/State/Filter/IUserFilter';
@@ -32,8 +31,8 @@ export default defineComponent({
   setup() {
     const {
       modifyCurrentState, onStateChange, currentState,
-    } = inject(InjectionKeys.useCollectionState)();
-    const { events } = inject(InjectionKeys.useAutoUnsubscribedEvents)();
+    } = injectKey((keys) => keys.useCollectionState);
+    const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);
 
     const searchPlaceholder = computed<string>(() => {
       const { totalScripts } = currentState.value.collection;