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;