Merge pull request #15 from fuzzypawzz/Remove-IOC-container

Remove IOC container and Lodash

README.md

@@ -31,12 +31,6 @@ Logic and state handling is written in reactive JavaScript objects (referred to
 
 The UI framework components are kept dumb. They receive their view models from the presenters and are generally only concerned with reactively rendering the DOM and routing DOM events to the presenters.
 
-### Inversion Of Control
-
-Dependencies are managed with an IOC container.
-
-The configuration can be found in the Core layer.
-
 ### Styles
 
 The styles are located inside the assets folder.

package.json

@@ -19,10 +19,7 @@
   },
   "dependencies": {
     "include-media": "^1.4.10",
-    "inversify": "^6.0.1",
     "jest-environment-jsdom": "^29.6.2",
-    "lodash": "^4.17.21",
-    "reflect-metadata": "^0.1.13",
     "vue": "^3.2.41",
     "vue-router": "^4.1.5"
   },

src/JMDK.UI/infrastructure/main.ts

@@ -1,13 +1,9 @@
 import { createApp } from 'vue'
 import App from '@/JMDK.UI/components/app/App.vue'
 import router from '@/JMDK.Core/router'
-import bindFrameworkDependencies from '@/JMDK.Core/ioc/bind-framework-dependencies'
 
 const app = createApp(App)
 
 app.use(router)
-app.use(bindFrameworkDependencies, {
-  router,
-})
 
 app.mount('#app')

src/JMDK.UI/infrastructure/presenter/presenter-base.ts

@@ -1,10 +1,8 @@
-import { injectable } from 'inversify'
 import type { ComputedRef } from 'vue'
 
 /**
  * @author Jannik Maag (fuzzypawzz)
  */
-@injectable()
 export abstract class PresenterBase<TView extends { props: object }> {
   private _view!: TView
 

src/JMDK.UI/views/home-view/home-view.vue

@@ -3,19 +3,19 @@
     <section>
       <div class="home-view__heading-wrapper">
         <h2 class="home-view__heading">
-          <span>{{ viewModel.heading }}</span>
+          <span>{{ viewModel.content.heading }}</span>
 
           <span class="home-view__heading-dot no-select">.</span>
         </h2>
 
-        <p class="home-view__handle">{{ viewModel.handle }}</p>
+        <p class="home-view__handle">{{ viewModel.content.handle }}</p>
       </div>
 
       <!-- XSS risk analysis: Controlled source (content file import in router) -->
-      <p class="home-view__about-me" v-html="viewModel.description" />
+      <p class="home-view__about-me" v-html="viewModel.content.description" />
 
       <j-button
-        v-for="button in viewModel.buttonOptions"
+        v-for="button in viewModel.content.buttonOptions"
         :key="button.text"
         :title="button.title"
         class="home-view__button"
@@ -28,7 +28,7 @@
       <ul class="home-view__hashtag-list">
         <li
           class="home-view__hashtag-list-item"
-          v-for="hashTag in viewModel.hashTags"
+          v-for="hashTag in viewModel.content.hashTags"
           :key="hashTag"
         >
           <span class="home-view__hash no-select">#</span>{{ hashTag }}
@@ -40,11 +40,10 @@
 
 <script setup lang="ts">
 import JButton from '@/JMDK.UI/components/j-button/j-button.vue'
-import { container } from '@/JMDK.Core/ioc'
 import { HomeViewPresenter } from './presenter/home-view-presenter'
 import { onBeforeUnmount } from 'vue'
 
-const presenter = container.get(HomeViewPresenter)
+const presenter = new HomeViewPresenter()
 const viewModel = presenter.viewModel
 
 onBeforeUnmount(() => presenter.destroy())

src/JMDK.UI/views/home-view/presenter/home-view-presenter.ts

@@ -1,4 +1,3 @@
-import { injectable } from 'inversify'
 import { contentModel } from '@/JMDK.UI/views/home-view/content/default-content'
 import { openInNewTab } from '@/JMDK.UI/infrastructure/helpers/browser/open-in-new-tab'
 import { PresenterBase } from '@/JMDK.UI/infrastructure/presenter'
@@ -11,7 +10,6 @@ type View = {
   props: {}
 }
 
-@injectable()
 export class HomeViewPresenter extends PresenterBase<View> {
   constructor() {
     super()
@@ -27,7 +25,7 @@ export class HomeViewPresenter extends PresenterBase<View> {
 
   public viewModel = readonlyComputed<ViewModel>(() => {
     return {
-      ...this.state.content,
+      content: this.state.content,
     }
   })
 

src/JMDK.UI/views/home-view/presenter/view-model.ts

@@ -1,9 +1,11 @@
 import type { Content } from '@/JMDK.UI/types/content'
 
 export type ViewModel = {
-  heading: string
-  handle: string
-  description: string
-  buttonOptions: Content.Button[]
-  hashTags: string[]
+  content: {
+    heading: string
+    handle: string
+    description: string
+    buttonOptions: Content.Button[]
+    hashTags: string[]
+  }
 }