IOC

package.json

@@ -7,8 +7,8 @@
     "clean": "rm -rf ./dist && mkdir dist",
     "build:client": "webpack",
     "build:server": "tsc --build tsconfig.es5.json",
-    "dev:server": "yarn clean && yarn build:server && nodemon --watch dist dist/server/index.js",
-    "start": "concurrently \"yarn build:client\" \"yarn dev:server\""
+    "dev:server": "pnpm clean && pnpm build:server && nodemon --watch dist dist/server/index.js",
+    "start": "concurrently \"pnpm build:client\" \"pnpm dev:server\""
   },
   "keywords": [],
   "author": "",

src/index.ts

@@ -1,10 +1,12 @@
-import { Users } from './services/users';
 import { Logger } from './services/logger';
 
-import type { User, ApiConfig } from './types';
+import type { User } from './types';
+import { createIoCContainer } from './ioc';
 
-const renderUsers = async (config: ApiConfig) => {
-  const usersService = new Users(config);
+const iocContainer = createIoCContainer()
+
+const renderUsers = async () => {
+  const usersService = iocContainer.resolve('users')
   const users = await usersService.getUsers();
 
   const listNode = document.getElementById('users-list');
@@ -18,16 +20,16 @@ const renderUsers = async (config: ApiConfig) => {
 };
 
 const app = () => {
-  const config = (window as any).__CONFIG__;
+  iocContainer.register('config', (window as any).__CONFIG__);
   delete (window as any).__CONFIG__;
 
-  renderUsers(config.api);
+  renderUsers();
 };
 
-window.onload = (event: Event) => {
-  const logger = new Logger();
+window.onload = () => {
+  const logger = iocContainer.resolve('logger');
 
   logger.info('Page is loaded.');
 
   app();
-};
+};

src/ioc/index.ts

@@ -1,12 +1,22 @@
 import IoCContainer from 'ioc-lite';
+import { HTTP } from '../../src/services/http';
+import { Logger } from '../../src/services/logger';
+import { Users } from '../../src/services/users';
+import { ApiConfig } from '../../src/types';
 
-// import { Logger } from '../services/logger';
-// import { HTTP } from '../services/http';
-// import { Users } from '../services/users';
+export type IoCResources = {
+  config: ApiConfig;
+  logger: typeof Logger;
+  http: typeof HTTP;
+  users: typeof Users;
+}
 
 export const createIoCContainer = () =>  {
-  const ioc = new IoCContainer();
-  // you can register some resources right now below...
+  const ioc = new IoCContainer<IoCResources>();
+
+  ioc.registerClass('logger', Logger)
+  ioc.registerClass('http', HTTP)
+  ioc.registerClass('users', Users)
 
   return ioc;
 };

src/services/http.ts

@@ -2,16 +2,13 @@ import { Logger } from './logger';
 
 import type { ApiConfig } from '../types';
 export class HTTP {
-  logger: Logger;
-  apiConfig: ApiConfig;
+  constructor(private readonly logger: Logger, private readonly config: ApiConfig) {}
 
-  constructor(apiConfig: ApiConfig) {
-    this.apiConfig = apiConfig;
-    this.logger = new Logger();
-  }
+  static $singleton = true
+  static $inject = ['logger', 'config']
 
   async get(url: string) {
-    const response = await fetch(`${this.apiConfig.path}${url}`);
+    const response = await fetch(`${this.config.path}${url}`);
 
     if (response.ok) {
       const responseData = await response.json();

src/services/logger.ts

@@ -1,4 +1,6 @@
 export class Logger {
+  static $singleton = true
+
   info(message: string) {
     const date = new Date().toISOString();
 

src/services/users.ts

@@ -2,15 +2,12 @@ import { HTTP } from './http';
 
 import type { ApiConfig, User } from '../types';
 export class Users {
-  http: HTTP;
-  apiConfig: ApiConfig;
+  constructor(private readonly http: HTTP, private readonly config: ApiConfig) {}
 
-  constructor(apiConfig: ApiConfig) {
-    this.http = new HTTP(apiConfig);
-    this.apiConfig = apiConfig;
-  }
+  static $singleton = true
+  static $inject = ['http', 'config']
 
   getUsers() {
-    return this.http.get(this.apiConfig.resources.users) as unknown as User[];
+    return this.http.get(this.config.resources.users) as unknown as Promise<User[]>;
   }
 }