Merge pull request #588 from ueokande/tsyringe

Use tsyringe for DI container

.eslintrc

@@ -36,7 +36,7 @@
     "jsx-quotes": ["error", "prefer-single"],
     "max-classes-per-file": "off",
     "max-lines": "off",
-    "max-params": ["error", 5],
+    "max-params": ["error", 10],
     "max-statements": ["error", 15],
     "multiline-comment-style": "off",
     "multiline-ternary": "off",
@@ -57,6 +57,7 @@
     "no-undef-init": "off",
     "no-unused-vars": "off",
     "no-use-before-define": "off",
+    "no-useless-constructor": "off",
     "no-warning-comments": "off",
     "object-curly-newline": ["error", { "consistent": true }],
     "object-curly-spacing": ["error", "always", { "arraysInObjects": false, "objectsInObjects": false }],

package.json

@@ -6,7 +6,7 @@
     "build": "NODE_ENV=production webpack --mode production --progress --display-error-details",
     "package": "npm run build && script/package",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
-    "type-checks": "tsc",
+    "type-checks": "tsc --noEmit",
     "test": "karma start",
     "test:e2e": "mocha --timeout 8000 e2e"
   },
@@ -21,11 +21,6 @@
   },
   "homepage": "https://github.com/ueokande/vim-vixen",
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
     "@types/chai": "^4.1.7",
     "@types/mocha": "^5.2.6",
     "@types/prop-types": "^15.7.1",
@@ -34,8 +29,6 @@
     "@types/react-redux": "^7.0.8",
     "@types/redux-promise": "^0.5.28",
     "@typescript-eslint/eslint-plugin": "^1.7.0",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.5",
     "chai": "^4.2.0",
     "css-loader": "^2.1.1",
     "eslint": "^5.16.0",
@@ -43,7 +36,6 @@
     "html-webpack-plugin": "^3.2.0",
     "jszip": "^3.2.1",
     "karma": "^4.1.0",
-    "karma-babel-preprocessor": "^8.0.0-beta.0",
     "karma-firefox-launcher": "^1.1.0",
     "karma-html2js-preprocessor": "^1.1.0",
     "karma-mocha": "^1.3.0",
@@ -60,9 +52,12 @@
     "react-test-renderer": "^16.8.6",
     "redux": "^4.0.1",
     "redux-promise": "^0.6.0",
+    "reflect-metadata": "^0.1.13",
     "sass-loader": "^7.1.0",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^0.23.1",
+    "ts-loader": "^6.0.1",
+    "tsyringe": "^3.2.0",
     "typescript": "^3.4.5",
     "web-ext-types": "^3.1.0",
     "webextensions-api-fake": "^0.7.4",

src/background/Application.ts

@@ -0,0 +1,35 @@
+import { injectable } from 'tsyringe';
+import ContentMessageListener from './infrastructures/ContentMessageListener';
+import SettingController from './controllers/SettingController';
+import VersionController from './controllers/VersionController';
+
+@injectable()
+export default class Application {
+  constructor(
+    private contentMessageListener: ContentMessageListener,
+    private settingController: SettingController,
+    private versionController: VersionController,
+  ) {
+  }
+
+  run() {
+    this.settingController.reload();
+
+    browser.runtime.onInstalled.addListener((details) => {
+      if (details.reason !== 'install' && details.reason !== 'update') {
+        return;
+      }
+      this.versionController.notify();
+    });
+
+    this.contentMessageListener.run();
+    browser.storage.onChanged.addListener((changes, area) => {
+      if (area !== 'local') {
+        return;
+      }
+      if (changes.settings) {
+        this.settingController.reload();
+      }
+    });
+  }
+}

src/background/controllers/AddonEnabledController.ts

@@ -1,10 +1,12 @@
+import { injectable } from 'tsyringe';
 import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase';
 
+@injectable()
 export default class AddonEnabledController {
-  private addonEnabledUseCase: AddonEnabledUseCase;
 
-  constructor() {
-    this.addonEnabledUseCase = new AddonEnabledUseCase();
+  constructor(
+    private addonEnabledUseCase: AddonEnabledUseCase,
+  ) {
   }
 
   indicate(enabled: boolean): Promise<any> {

src/background/controllers/CommandController.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import CompletionsUseCase from '../usecases/CompletionsUseCase';
 import CommandUseCase from '../usecases/CommandUseCase';
 import CompletionGroup from '../domains/CompletionGroup';
@@ -7,14 +8,12 @@ const trimStart = (str: string): string => {
   return str.replace(/^\s+/, '');
 };
 
+@injectable()
 export default class CommandController {
-  private completionsUseCase: CompletionsUseCase;
-
-  private commandIndicator: CommandUseCase;
-
-  constructor() {
-    this.completionsUseCase = new CompletionsUseCase();
-    this.commandIndicator = new CommandUseCase();
+  constructor(
+    private completionsUseCase: CompletionsUseCase,
+    private commandIndicator: CommandUseCase,
+  ) {
   }
 
   getCompletions(line: string): Promise<CompletionGroup[]> {

src/background/controllers/FindController.ts

@@ -1,10 +1,11 @@
+import { injectable } from 'tsyringe';
 import FindUseCase from '../usecases/FindUseCase';
 
+@injectable()
 export default class FindController {
-  private findUseCase: FindUseCase;
-
-  constructor() {
-    this.findUseCase = new FindUseCase();
+  constructor(
+    private findUseCase: FindUseCase,
+  ) {
   }
 
   getKeyword(): Promise<string> {

src/background/controllers/LinkController.ts

@@ -1,10 +1,11 @@
+import { injectable } from 'tsyringe';
 import LinkUseCase from '../usecases/LinkUseCase';
 
+@injectable()
 export default class LinkController {
-  private linkUseCase: LinkUseCase;
-
-  constructor() {
-    this.linkUseCase = new LinkUseCase();
+  constructor(
+    private linkUseCase: LinkUseCase,
+  ) {
   }
 
   openToTab(url: string, tabId: number): Promise<void> {

src/background/controllers/MarkController.ts

@@ -1,10 +1,11 @@
+import { injectable } from 'tsyringe';
 import MarkUseCase from '../usecases/MarkUseCase';
 
+@injectable()
 export default class MarkController {
-  private markUseCase: MarkUseCase;
-
-  constructor() {
-    this.markUseCase = new MarkUseCase();
+  constructor(
+    private markUseCase: MarkUseCase,
+  ) {
   }
 
   setGlobal(key: string, x: number, y: number): Promise<any> {

src/background/controllers/OperationController.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import * as operations from '../../shared/operations';
 import FindUseCase from '../usecases/FindUseCase';
 import ConsoleUseCase from '../usecases/ConsoleUseCase';
@@ -5,23 +6,15 @@ import TabUseCase from '../usecases/TabUseCase';
 import TabSelectUseCase from '../usecases/TabSelectUseCase';
 import ZoomUseCase from '../usecases/ZoomUseCase';
 
+@injectable()
 export default class OperationController {
-  private findUseCase: FindUseCase;
-
-  private consoleUseCase: ConsoleUseCase;
-
-  private tabUseCase: TabUseCase;
-
-  private tabSelectUseCase: TabSelectUseCase;
-
-  private zoomUseCase: ZoomUseCase;
-
-  constructor() {
-    this.findUseCase = new FindUseCase();
-    this.consoleUseCase = new ConsoleUseCase();
-    this.tabUseCase = new TabUseCase();
-    this.tabSelectUseCase = new TabSelectUseCase();
-    this.zoomUseCase = new ZoomUseCase();
+  constructor(
+    private findUseCase: FindUseCase,
+    private consoleUseCase: ConsoleUseCase,
+    private tabUseCase: TabUseCase,
+    private tabSelectUseCase: TabSelectUseCase,
+    private zoomUseCase: ZoomUseCase,
+  ) {
   }
 
   // eslint-disable-next-line complexity, max-lines-per-function

src/background/controllers/SettingController.ts

@@ -1,15 +1,14 @@
+import { injectable } from 'tsyringe';
 import SettingUseCase from '../usecases/SettingUseCase';
 import ContentMessageClient from '../infrastructures/ContentMessageClient';
 import Settings from '../../shared/Settings';
 
+@injectable()
 export default class SettingController {
-  private settingUseCase: SettingUseCase;
-
-  private contentMessageClient: ContentMessageClient;
-
-  constructor() {
-    this.settingUseCase = new SettingUseCase();
-    this.contentMessageClient = new ContentMessageClient();
+  constructor(
+    private settingUseCase: SettingUseCase,
+    private contentMessageClient: ContentMessageClient,
+  ) {
   }
 
   getSetting(): Promise<Settings> {

src/background/controllers/VersionController.ts

@@ -1,10 +1,11 @@
+import { injectable } from 'tsyringe';
 import VersionUseCase from '../usecases/VersionUseCase';
 
+@injectable()
 export default class VersionController {
-  private versionUseCase: VersionUseCase;
-
-  constructor() {
-    this.versionUseCase = new VersionUseCase();
+  constructor(
+    private versionUseCase: VersionUseCase,
+  ) {
   }
 
   notify(): Promise<void> {

src/background/index.ts

@@ -1,23 +1,6 @@
-import ContentMessageListener from './infrastructures/ContentMessageListener';
-import SettingController from './controllers/SettingController';
-import VersionController from './controllers/VersionController';
+import 'reflect-metadata';
+import { container } from 'tsyringe';
+import Application from './Application';
 
-let settingController = new SettingController();
-settingController.reload();
-
-browser.runtime.onInstalled.addListener((details) => {
-  if (details.reason !== 'install' && details.reason !== 'update') {
-    return;
-  }
-  new VersionController().notify();
-});
-
-new ContentMessageListener().run();
-browser.storage.onChanged.addListener((changes, area) => {
-  if (area !== 'local') {
-    return;
-  }
-  if (changes.settings) {
-    settingController.reload();
-  }
-});
+let app = container.resolve(Application);
+app.run();

src/background/infrastructures/ConsoleClient.ts

@@ -1,5 +1,7 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 
+@injectable()
 export default class ConsoleClient {
   showCommand(tabId: number, command: string): Promise<any> {
     return browser.tabs.sendMessage(tabId, {

src/background/infrastructures/ContentMessageClient.ts

@@ -1,5 +1,7 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 
+@injectable()
 export default class ContentMessageClient {
   async broadcastSettingsChanged(): Promise<void> {
     let tabs = await browser.tabs.query({});

src/background/infrastructures/ContentMessageListener.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 import CompletionGroup from '../domains/CompletionGroup';
 import CommandController from '../controllers/CommandController';
@@ -8,32 +9,19 @@ import LinkController from '../controllers/LinkController';
 import OperationController from '../controllers/OperationController';
 import MarkController from '../controllers/MarkController';
 
+@injectable()
 export default class ContentMessageListener {
-  private settingController: SettingController;
-
-  private commandController: CommandController;
-
-  private findController: FindController;
-
-  private addonEnabledController: AddonEnabledController;
-
-  private linkController: LinkController;
-
-  private backgroundOperationController: OperationController;
-
-  private markController: MarkController;
-
   private consolePorts: {[tabId: number]: browser.runtime.Port};
 
-  constructor() {
-    this.settingController = new SettingController();
-    this.commandController = new CommandController();
-    this.findController = new FindController();
-    this.addonEnabledController = new AddonEnabledController();
-    this.linkController = new LinkController();
-    this.backgroundOperationController = new OperationController();
-    this.markController = new MarkController();
-
+  constructor(
+    private settingController: SettingController,
+    private commandController: CommandController,
+    private findController: FindController,
+    private addonEnabledController: AddonEnabledController,
+    private linkController: LinkController,
+    private backgroundOperationController: OperationController,
+    private markController: MarkController,
+  ) {
     this.consolePorts = {};
   }
 

src/background/presenters/IndicatorPresenter.ts

@@ -1,3 +1,6 @@
+import { injectable } from 'tsyringe';
+
+@injectable()
 export default class IndicatorPresenter {
   indicate(enabled: boolean): Promise<void> {
     let path = enabled

src/background/presenters/NotifyPresenter.ts

@@ -1,5 +1,8 @@
+import { injectable } from 'tsyringe';
+
 const NOTIFICATION_ID = 'vimvixen-update';
 
+@injectable()
 export default class NotifyPresenter {
   async notify(
     title: string,

src/background/presenters/TabPresenter.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import MemoryStorage from '../infrastructures/MemoryStorage';
 
 const CURRENT_SELECTED_KEY = 'tabs.current.selected';
@@ -5,6 +6,7 @@ const LAST_SELECTED_KEY = 'tabs.last.selected';
 
 type Tab = browser.tabs.Tab;
 
+@injectable()
 export default class TabPresenter {
   open(url: string, tabId?: number): Promise<Tab> {
     return browser.tabs.update(tabId, { url });

src/background/presenters/WindowPresenter.ts

@@ -1,3 +1,6 @@
+import { injectable } from 'tsyringe';
+
+@injectable()
 export default class WindowPresenter {
   create(url: string): Promise<browser.windows.Window> {
     return browser.windows.create({ url });

src/background/repositories/BookmarkRepository.ts

@@ -1,3 +1,6 @@
+import { injectable } from 'tsyringe';
+
+@injectable()
 export default class BookmarkRepository {
   async create(
     title: string, url: string

src/background/repositories/BrowserSettingRepository.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import * as urls from '../../shared/urls';
 
 declare namespace browser.browserSettings.homepageOverride {
@@ -16,6 +17,7 @@ declare namespace browser.browserSettings.homepageOverride {
   function get(param: object): Promise<BrowserSettings>;
 }
 
+@injectable()
 export default class BrowserSettingRepository {
   async getHomepageUrls(): Promise<string[]> {
     let { value } = await browser.browserSettings.homepageOverride.get({});

src/background/repositories/CompletionsRepository.ts

@@ -1,6 +1,9 @@
+import { injectable } from 'tsyringe';
+
 type Tab = browser.tabs.Tab;
 type BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 
+@injectable()
 export default class CompletionsRepository {
   async queryBookmarks(keywords: string): Promise<BookmarkTreeNode[]> {
     let items = await browser.bookmarks.search({ query: keywords });

src/background/repositories/FindRepository.ts

@@ -1,7 +1,9 @@
+import { injectable } from 'tsyringe';
 import MemoryStorage from '../infrastructures/MemoryStorage';
 
 const FIND_KEYWORD_KEY = 'find-keyword';
 
+@injectable()
 export default class FindRepository {
   private cache: MemoryStorage;
 

src/background/repositories/MarkRepository.ts

@@ -1,8 +1,10 @@
+import { injectable } from 'tsyringe';
 import MemoryStorage from '../infrastructures/MemoryStorage';
 import GlobalMark from '../domains/GlobalMark';
 
 const MARK_KEY = 'mark';
 
+@injectable()
 export default class MarkRepository {
   private cache: MemoryStorage;
 

src/background/repositories/PersistentSettingRepository.ts

@@ -1,5 +1,7 @@
+import { injectable } from 'tsyringe';
 import SettingData from '../../shared/SettingData';
 
+@injectable()
 export default class SettingRepository {
   async load(): Promise<SettingData | null> {
     let { settings } = await browser.storage.local.get('settings');

src/background/repositories/SettingRepository.ts

@@ -1,9 +1,11 @@
+import { injectable } from 'tsyringe';
 import MemoryStorage from '../infrastructures/MemoryStorage';
 import Settings from '../../shared/Settings';
 import * as PropertyDefs from '../../shared/property-defs';
 
 const CACHED_SETTING_KEY = 'setting';
 
+@injectable()
 export default class SettingRepository {
   private cache: MemoryStorage;
 

src/background/usecases/AddonEnabledUseCase.ts

@@ -1,27 +1,21 @@
+import { injectable } from 'tsyringe';
 import IndicatorPresenter from '../presenters/IndicatorPresenter';
 import TabPresenter from '../presenters/TabPresenter';
 import ContentMessageClient from '../infrastructures/ContentMessageClient';
 
+@injectable()
 export default class AddonEnabledUseCase {
-  private indicatorPresentor: IndicatorPresenter;
-
-  private tabPresenter: TabPresenter;
-
-  private contentMessageClient: ContentMessageClient;
-
-  constructor() {
-    this.indicatorPresentor = new IndicatorPresenter();
-
+  constructor(
+    private indicatorPresentor: IndicatorPresenter,
+    private tabPresenter: TabPresenter,
+    private contentMessageClient: ContentMessageClient,
+  ) {
     this.indicatorPresentor.onClick((tab) => {
       if (tab.id) {
         this.onIndicatorClick(tab.id);
       }
     });
-
-    this.tabPresenter = new TabPresenter();
     this.tabPresenter.onSelected(info => this.onTabSelected(info.tabId));
-
-    this.contentMessageClient = new ContentMessageClient();
   }
 
   indicate(enabled: boolean): Promise<void> {

src/background/usecases/CommandUseCase.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import * as parsers from './parsers';
 import * as urls from '../../shared/urls';
 import TabPresenter from '../presenters/TabPresenter';
@@ -7,27 +8,16 @@ import BookmarkRepository from '../repositories/BookmarkRepository';
 import ConsoleClient from '../infrastructures/ConsoleClient';
 import ContentMessageClient from '../infrastructures/ContentMessageClient';
 
+@injectable()
 export default class CommandIndicator {
-  private tabPresenter: TabPresenter;
-
-  private windowPresenter: WindowPresenter;
-
-  private settingRepository: SettingRepository;
-
-  private bookmarkRepository: BookmarkRepository;
-
-  private consoleClient: ConsoleClient;
-
-  private contentMessageClient: ContentMessageClient;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.windowPresenter = new WindowPresenter();
-    this.settingRepository = new SettingRepository();
-    this.bookmarkRepository = new BookmarkRepository();
-    this.consoleClient = new ConsoleClient();
-
-    this.contentMessageClient = new ContentMessageClient();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private windowPresenter: WindowPresenter,
+    private settingRepository: SettingRepository,
+    private bookmarkRepository: BookmarkRepository,
+    private consoleClient: ConsoleClient,
+    private contentMessageClient: ContentMessageClient,
+  ) {
   }
 
   async open(keywords: string): Promise<browser.tabs.Tab> {

src/background/usecases/CompletionsUseCase.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import CompletionGroup from '../domains/CompletionGroup';
 import CommandDocs from '../domains/CommandDocs';
 import CompletionsRepository from '../repositories/CompletionsRepository';
@@ -11,17 +12,13 @@ const COMPLETION_ITEM_LIMIT = 10;
 type Tab = browser.tabs.Tab;
 type HistoryItem = browser.history.HistoryItem;
 
+@injectable()
 export default class CompletionsUseCase {
-  private tabPresenter: TabPresenter;
-
-  private completionsRepository: CompletionsRepository;
-
-  private settingRepository: SettingRepository;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.completionsRepository = new CompletionsRepository();
-    this.settingRepository = new SettingRepository();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private completionsRepository: CompletionsRepository,
+    private settingRepository: SettingRepository,
+  ) {
   }
 
   queryConsoleCommand(prefix: string): Promise<CompletionGroup[]> {

src/background/usecases/ConsoleUseCase.ts

@@ -1,14 +1,14 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 import ConsoleClient from '../infrastructures/ConsoleClient';
 
+@injectable()
 export default class ConsoleUseCase {
-  private tabPresenter: TabPresenter;
 
-  private consoleClient: ConsoleClient;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.consoleClient = new ConsoleClient();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private consoleClient: ConsoleClient,
+  ) {
   }
 
   async showCommand(): Promise<any> {

src/background/usecases/FindUseCase.ts

@@ -1,18 +1,15 @@
+import { injectable } from 'tsyringe';
 import FindRepository from '../repositories/FindRepository';
 import TabPresenter from '../presenters/TabPresenter';
 import ConsoleClient from '../infrastructures/ConsoleClient';
 
+@injectable()
 export default class FindUseCase {
-  private tabPresenter: TabPresenter;
-
-  private findRepository: FindRepository;
-
-  private consoleClient: ConsoleClient;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.findRepository = new FindRepository();
-    this.consoleClient = new ConsoleClient();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private findRepository: FindRepository,
+    private consoleClient: ConsoleClient,
+  ) {
   }
 
   getKeyword(): Promise<string> {

src/background/usecases/LinkUseCase.ts

@@ -1,10 +1,11 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 
+@injectable()
 export default class LinkUseCase {
-  private tabPresenter: TabPresenter;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
+  constructor(
+    private tabPresenter: TabPresenter,
+  ) {
   }
 
   openToTab(url: string, tabId: number): Promise<any> {

src/background/usecases/MarkUseCase.ts

@@ -1,22 +1,17 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 import MarkRepository from '../repositories/MarkRepository';
 import ConsoleClient from '../infrastructures/ConsoleClient';
 import ContentMessageClient from '../infrastructures/ContentMessageClient';
 
+@injectable()
 export default class MarkUseCase {
-  private tabPresenter: TabPresenter;
-
-  private markRepository: MarkRepository;
-
-  private consoleClient: ConsoleClient;
-
-  private contentMessageClient: ContentMessageClient;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.markRepository = new MarkRepository();
-    this.consoleClient = new ConsoleClient();
-    this.contentMessageClient = new ContentMessageClient();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private markRepository: MarkRepository,
+    private consoleClient: ConsoleClient,
+    private contentMessageClient: ContentMessageClient,
+  ) {
   }
 
   async setGlobal(key: string, x: number, y: number): Promise<any> {

src/background/usecases/SettingUseCase.ts

@@ -1,17 +1,17 @@
-// eslint-disable-next-line max-len
-import PersistentSettingRepository from '../repositories/PersistentSettingRepository';
+import { injectable } from 'tsyringe';
+import PersistentSettingRepository
+  from '../repositories/PersistentSettingRepository';
 import SettingRepository from '../repositories/SettingRepository';
 import { DefaultSettingData } from '../../shared/SettingData';
 import Settings from '../../shared/Settings';
 
+@injectable()
 export default class SettingUseCase {
-  private persistentSettingRepository: PersistentSettingRepository;
 
-  private settingRepository: SettingRepository;
-
-  constructor() {
-    this.persistentSettingRepository = new PersistentSettingRepository();
-    this.settingRepository = new SettingRepository();
+  constructor(
+    private persistentSettingRepository: PersistentSettingRepository,
+    private settingRepository: SettingRepository,
+  ) {
   }
 
   get(): Promise<Settings> {

src/background/usecases/TabSelectUseCase.ts

@@ -1,10 +1,11 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 
+@injectable()
 export default class TabSelectUseCase {
-  private tabPresenter: TabPresenter;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
+  constructor(
+    private tabPresenter: TabPresenter,
+  ) {
   }
 
   async selectPrev(count: number): Promise<any> {

src/background/usecases/TabUseCase.ts

@@ -1,14 +1,13 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 import BrowserSettingRepository from '../repositories/BrowserSettingRepository';
 
+@injectable()
 export default class TabUseCase {
-  private tabPresenter: TabPresenter;
-
-  private browserSettingRepository: BrowserSettingRepository;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.browserSettingRepository = new BrowserSettingRepository();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private browserSettingRepository: BrowserSettingRepository,
+  ) {
   }
 
   async close(force: boolean): Promise<any> {

src/background/usecases/VersionUseCase.ts

@@ -1,14 +1,13 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 import NotifyPresenter from '../presenters/NotifyPresenter';
 
+@injectable()
 export default class VersionUseCase {
-  private tabPresenter: TabPresenter;
-
-  private notifyPresenter: NotifyPresenter;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
-    this.notifyPresenter = new NotifyPresenter();
+  constructor(
+    private tabPresenter: TabPresenter,
+    private notifyPresenter: NotifyPresenter,
+  ) {
   }
 
   notify(): Promise<void> {

src/background/usecases/ZoomUseCase.ts

@@ -1,3 +1,4 @@
+import { injectable } from 'tsyringe';
 import TabPresenter from '../presenters/TabPresenter';
 
 const ZOOM_SETTINGS: number[] = [
@@ -5,11 +6,11 @@ const ZOOM_SETTINGS: number[] = [
   1.10, 1.25, 1.50, 1.75, 2.00, 2.50, 3.00
 ];
 
+@injectable()
 export default class ZoomUseCase {
-  private tabPresenter: TabPresenter;
-
-  constructor() {
-    this.tabPresenter = new TabPresenter();
+  constructor(
+    private tabPresenter: TabPresenter,
+  ) {
   }
 
   async zoomIn(): Promise<any> {

src/content/Application.ts

@@ -0,0 +1,111 @@
+import { injectable } from 'tsyringe';
+import MessageListener from './MessageListener';
+import FindController from './controllers/FindController';
+import MarkController from './controllers/MarkController';
+import FollowMasterController from './controllers/FollowMasterController';
+import FollowSlaveController from './controllers/FollowSlaveController';
+import FollowKeyController from './controllers/FollowKeyController';
+import InputDriver from './InputDriver';
+import KeymapController from './controllers/KeymapController';
+import AddonEnabledUseCase from './usecases/AddonEnabledUseCase';
+import MarkKeyController from './controllers/MarkKeyController';
+import AddonEnabledController from './controllers/AddonEnabledController';
+import SettingController from './controllers/SettingController';
+import ConsoleFrameController from './controllers/ConsoleFrameController';
+import * as messages from '../shared/messages';
+
+type Message = messages.Message;
+
+@injectable()
+export default class Application {
+
+  // eslint-disable-next-line max-params
+  constructor(
+    private messageListener: MessageListener,
+    private findController: FindController,
+    private markController: MarkController,
+    private followMasterController: FollowMasterController,
+    private followSlaveController: FollowSlaveController,
+    private followKeyController: FollowKeyController,
+    private keymapController: KeymapController,
+    private addonEnabledUseCase: AddonEnabledUseCase,
+    private markKeyController: MarkKeyController,
+    private addonEnabledController: AddonEnabledController,
+    private settingController: SettingController,
+    private consoleFrameController: ConsoleFrameController,
+  ) {
+  }
+
+  run() {
+    this.routeCommonComponents();
+    if (window.self === window.top) {
+      this.routeMasterComponents();
+    }
+  }
+
+  private routeMasterComponents() {
+    this.messageListener.onWebMessage((msg: Message, sender: Window) => {
+      switch (msg.type) {
+      case messages.CONSOLE_ENTER_FIND:
+        return this.findController.start(msg);
+      case messages.FIND_NEXT:
+        return this.findController.next(msg);
+      case messages.FIND_PREV:
+        return this.findController.prev(msg);
+      case messages.CONSOLE_UNFOCUS:
+        return this.consoleFrameController.unfocus(msg);
+      case messages.FOLLOW_START:
+        return this.followMasterController.followStart(msg);
+      case messages.FOLLOW_RESPONSE_COUNT_TARGETS:
+        return this.followMasterController.responseCountTargets(msg, sender);
+      case messages.FOLLOW_KEY_PRESS:
+        return this.followMasterController.keyPress(msg);
+      }
+      return undefined;
+    });
+
+    this.messageListener.onBackgroundMessage((msg: Message) => {
+      switch (msg.type) {
+      case messages.ADDON_ENABLED_QUERY:
+        return this.addonEnabledController.getAddonEnabled(msg);
+      case messages.TAB_SCROLL_TO:
+        return this.markController.scrollTo(msg);
+      }
+      return undefined;
+    });
+  }
+
+  private routeCommonComponents() {
+    this.messageListener.onWebMessage((msg: Message) => {
+      switch (msg.type) {
+      case messages.FOLLOW_REQUEST_COUNT_TARGETS:
+        return this.followSlaveController.countTargets(msg);
+      case messages.FOLLOW_CREATE_HINTS:
+        return this.followSlaveController.createHints(msg);
+      case messages.FOLLOW_SHOW_HINTS:
+        return this.followSlaveController.showHints(msg);
+      case messages.FOLLOW_ACTIVATE:
+        return this.followSlaveController.activate(msg);
+      case messages.FOLLOW_REMOVE_HINTS:
+        return this.followSlaveController.clear(msg);
+      }
+      return undefined;
+    });
+
+    this.messageListener.onBackgroundMessage((msg: Message): any => {
+      switch (msg.type) {
+      case messages.SETTINGS_CHANGED:
+        return this.settingController.reloadSettings(msg);
+      case messages.ADDON_TOGGLE_ENABLED:
+        return this.addonEnabledUseCase.toggle();
+      }
+    });
+
+    let inputDriver = new InputDriver(window.document.body);
+    inputDriver.onKey(key => this.followKeyController.press(key));
+    inputDriver.onKey(key => this.markKeyController.press(key));
+    inputDriver.onKey(key => this.keymapController.press(key));
+
+    this.settingController.initSettings();
+  }
+}

src/content/MessageListener.ts

@@ -1,7 +1,9 @@
+import { injectable } from 'tsyringe';
 import { Message, valueOf } from '../shared/messages';
 
 export type WebExtMessageSender = browser.runtime.MessageSender;
 
+@injectable()
 export default class MessageListener {
   onWebMessage(
     listener: (msg: Message, sender: Window) => void,

src/content/client/BackgroundClient.ts

@@ -1,6 +1,8 @@
+import { injectable } from 'tsyringe';
 import * as operations from '../../shared/operations';
 import * as messages from '../../shared/messages';
 
+@injectable()
 export default class BackgroundClient {
   execBackgroundOp(op: operations.Operation): Promise<void> {
     return browser.runtime.sendMessage({

src/content/client/FollowSlaveClientFactory.ts

@@ -0,0 +1,13 @@
+import FollowSlaveClient, { FollowSlaveClientImpl } from './FollowSlaveClient';
+
+export default interface FollowSlaveClientFactory {
+  create(window: Window): FollowSlaveClient;
+
+  // eslint-disable-next-line semi
+}
+
+export class FollowSlaveClientFactoryImpl implements FollowSlaveClientFactory {
+  create(window: Window): FollowSlaveClient {
+    return new FollowSlaveClientImpl(window);
+  }
+}

src/content/controllers/AddonEnabledController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase';
 
+@injectable()
 export default class AddonEnabledController {
-  private addonEnabledUseCase: AddonEnabledUseCase;
-
-  constructor({
-    addonEnabledUseCase = new AddonEnabledUseCase(),
-  } = {}) {
-    this.addonEnabledUseCase = addonEnabledUseCase;
+  constructor(
+    private addonEnabledUseCase: AddonEnabledUseCase,
+  ) {
   }
 
   getAddonEnabled(

src/content/controllers/ConsoleFrameController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import ConsoleFrameUseCase from '../usecases/ConsoleFrameUseCase';
 import * as messages from '../../shared/messages';
 
+@injectable()
 export default class ConsoleFrameController {
-  private consoleFrameUseCase: ConsoleFrameUseCase;
-
-  constructor({
-    consoleFrameUseCase = new ConsoleFrameUseCase(),
-  } = {}) {
-    this.consoleFrameUseCase = consoleFrameUseCase;
+  constructor(
+    private consoleFrameUseCase: ConsoleFrameUseCase,
+  ) {
   }
 
   unfocus(_message: messages.Message) {

src/content/controllers/FindController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 import FindUseCase from '../usecases/FindUseCase';
 
+@injectable()
 export default class FindController {
-  private findUseCase: FindUseCase;
-
-  constructor({
-    findUseCase = new FindUseCase(),
-  } = {}) {
-    this.findUseCase = findUseCase;
+  constructor(
+    private findUseCase: FindUseCase,
+  ) {
   }
 
   async start(m: messages.ConsoleEnterFindMessage): Promise<void> {

src/content/controllers/FollowKeyController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import FollowSlaveUseCase from '../usecases/FollowSlaveUseCase';
 import Key from '../domains/Key';
 
+@injectable()
 export default class FollowKeyController {
-  private followSlaveUseCase: FollowSlaveUseCase;
-
-  constructor({
-    followSlaveUseCase = new FollowSlaveUseCase(),
-  } = {}) {
-    this.followSlaveUseCase = followSlaveUseCase;
+  constructor(
+    private followSlaveUseCase: FollowSlaveUseCase,
+  ) {
   }
 
   press(key: Key): boolean {

src/content/controllers/FollowMasterController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import FollowMasterUseCase from '../usecases/FollowMasterUseCase';
 import * as messages from '../../shared/messages';
 
+@injectable()
 export default class FollowMasterController {
-  private followMasterUseCase: FollowMasterUseCase;
-
-  constructor({
-    followMasterUseCase = new FollowMasterUseCase(),
-  } = {}) {
-    this.followMasterUseCase = followMasterUseCase;
+  constructor(
+    private followMasterUseCase: FollowMasterUseCase,
+  ) {
   }
 
   followStart(m: messages.FollowStartMessage): void {

src/content/controllers/FollowSlaveController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 import FollowSlaveUseCase from '../usecases/FollowSlaveUseCase';
 
+@injectable()
 export default class FollowSlaveController {
-  private usecase: FollowSlaveUseCase;
-
-  constructor({
-    usecase = new FollowSlaveUseCase(),
-  } = {}) {
-    this.usecase = usecase;
+  constructor(
+    private usecase: FollowSlaveUseCase,
+  ) {
   }
 
   countTargets(m: messages.FollowRequestCountTargetsMessage): void {

src/content/controllers/KeymapController.ts

@@ -1,3 +1,4 @@
+import { injectable, inject } from 'tsyringe';
 import * as operations from '../../shared/operations';
 import KeymapUseCase from '../usecases/KeymapUseCase';
 import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase';
@@ -8,53 +9,25 @@ import FocusUseCase from '../usecases/FocusUseCase';
 import ClipboardUseCase from '../usecases/ClipboardUseCase';
 import BackgroundClient from '../client/BackgroundClient';
 import MarkKeyyUseCase from '../usecases/MarkKeyUseCase';
-import FollowMasterClient, { FollowMasterClientImpl }
-  from '../client/FollowMasterClient';
+import FollowMasterClient from '../client/FollowMasterClient';
 import Key from '../domains/Key';
 
+@injectable()
 export default class KeymapController {
-  private keymapUseCase: KeymapUseCase;
+  constructor(
+    private keymapUseCase: KeymapUseCase,
+    private addonEnabledUseCase: AddonEnabledUseCase,
+    private findSlaveUseCase: FindSlaveUseCase,
+    private scrollUseCase: ScrollUseCase,
+    private navigateUseCase: NavigateUseCase,
+    private focusUseCase: FocusUseCase,
+    private clipbaordUseCase: ClipboardUseCase,
+    private backgroundClient: BackgroundClient,
+    private markKeyUseCase: MarkKeyyUseCase,
 
-  private addonEnabledUseCase: AddonEnabledUseCase;
-
-  private findSlaveUseCase: FindSlaveUseCase;
-
-  private scrollUseCase: ScrollUseCase;
-
-  private navigateUseCase: NavigateUseCase;
-
-  private focusUseCase: FocusUseCase;
-
-  private clipbaordUseCase: ClipboardUseCase;
-
-  private backgroundClient: BackgroundClient;
-
-  private markKeyUseCase: MarkKeyyUseCase;
-
-  private followMasterClient: FollowMasterClient;
-
-  constructor({
-    keymapUseCase = new KeymapUseCase(),
-    addonEnabledUseCase = new AddonEnabledUseCase(),
-    findSlaveUseCase = new FindSlaveUseCase(),
-    scrollUseCase = new ScrollUseCase(),
-    navigateUseCase = new NavigateUseCase(),
-    focusUseCase = new FocusUseCase(),
-    clipbaordUseCase = new ClipboardUseCase(),
-    backgroundClient = new BackgroundClient(),
-    markKeyUseCase = new MarkKeyyUseCase(),
-    followMasterClient = new FollowMasterClientImpl(window.top),
-  } = {}) {
-    this.keymapUseCase = keymapUseCase;
-    this.addonEnabledUseCase = addonEnabledUseCase;
-    this.findSlaveUseCase = findSlaveUseCase;
-    this.scrollUseCase = scrollUseCase;
-    this.navigateUseCase = navigateUseCase;
-    this.focusUseCase = focusUseCase;
-    this.clipbaordUseCase = clipbaordUseCase;
-    this.backgroundClient = backgroundClient;
-    this.markKeyUseCase = markKeyUseCase;
-    this.followMasterClient = followMasterClient;
+    @inject('FollowMasterClient')
+    private followMasterClient: FollowMasterClient,
+  ) {
   }
 
   // eslint-disable-next-line complexity, max-lines-per-function

src/content/controllers/MarkController.ts

@@ -1,13 +1,12 @@
+import { injectable } from 'tsyringe';
 import * as messages from '../../shared/messages';
 import MarkUseCase from '../usecases/MarkUseCase';
 
+@injectable()
 export default class MarkController {
-  private markUseCase: MarkUseCase;
-
-  constructor({
-    markUseCase = new MarkUseCase(),
-  } = {}) {
-    this.markUseCase = markUseCase;
+  constructor(
+    private markUseCase: MarkUseCase,
+  ) {
   }
 
   scrollTo(message: messages.TabScrollToMessage) {

src/content/controllers/MarkKeyController.ts

@@ -1,18 +1,14 @@
+import { injectable } from 'tsyringe';
 import MarkUseCase from '../usecases/MarkUseCase';
 import MarkKeyyUseCase from '../usecases/MarkKeyUseCase';
 import Key from '../domains/Key';
 
+@injectable()
 export default class MarkKeyController {
-  private markUseCase: MarkUseCase;
-
-  private markKeyUseCase: MarkKeyyUseCase;
-
-  constructor({
-    markUseCase = new MarkUseCase(),
-    markKeyUseCase = new MarkKeyyUseCase(),
-  } = {}) {
-    this.markUseCase = markUseCase;
-    this.markKeyUseCase = markKeyUseCase;
+  constructor(
+    private markUseCase: MarkUseCase,
+    private markKeyUseCase: MarkKeyyUseCase,
+  ) {
   }
 
   press(key: Key): boolean {

src/content/controllers/SettingController.ts

@@ -1,20 +1,17 @@
+import { injectable } from 'tsyringe';
 import AddonEnabledUseCase from '../usecases/AddonEnabledUseCase';
 import SettingUseCase from '../usecases/SettingUseCase';
 import * as blacklists from '../../shared/blacklists';
 
 import * as messages from '../../shared/messages';
 
+@injectable()
 export default class SettingController {
-  private addonEnabledUseCase: AddonEnabledUseCase;
 
-  private settingUseCase: SettingUseCase;
-
-  constructor({
-    addonEnabledUseCase = new AddonEnabledUseCase(),
-    settingUseCase = new SettingUseCase(),
-  } = {}) {
-    this.addonEnabledUseCase = addonEnabledUseCase;
-    this.settingUseCase = settingUseCase;
+  constructor(
+    private addonEnabledUseCase: AddonEnabledUseCase,
+    private settingUseCase: SettingUseCase,
+  ) {
   }
 
   async initSettings(): Promise<void> {

src/content/di.ts

@@ -0,0 +1,54 @@
+/* eslint-disable max-len */
+
+import { AddonEnabledRepositoryImpl } from './repositories/AddonEnabledRepository';
+import { AddonIndicatorClientImpl } from './client/AddonIndicatorClient';
+import { ClipboardRepositoryImpl } from './repositories/ClipboardRepository';
+import { ConsoleClientImpl } from './client/ConsoleClient';
+import { ConsoleFramePresenterImpl } from './presenters/ConsoleFramePresenter';
+import { FindClientImpl } from './client/FindClient';
+import { FindMasterClientImpl } from './client/FindMasterClient';
+import { FindPresenterImpl } from './presenters/FindPresenter';
+import { FindRepositoryImpl } from './repositories/FindRepository';
+import { FocusPresenterImpl } from './presenters/FocusPresenter';
+import { FollowKeyRepositoryImpl } from './repositories/FollowKeyRepository';
+import { FollowMasterClientImpl } from './client/FollowMasterClient';
+import { FollowMasterRepositoryImpl } from './repositories/FollowMasterRepository';
+import { FollowPresenterImpl } from './presenters/FollowPresenter';
+import { FollowSlaveClientFactoryImpl } from './client/FollowSlaveClientFactory';
+import { FollowSlaveRepositoryImpl } from './repositories/FollowSlaveRepository';
+import { KeymapRepositoryImpl } from './repositories/KeymapRepository';
+import { MarkClientImpl } from './client/MarkClient';
+import { MarkKeyRepositoryImpl } from './repositories/MarkKeyRepository';
+import { MarkRepositoryImpl } from './repositories/MarkRepository';
+import { NavigationPresenterImpl } from './presenters/NavigationPresenter';
+import { ScrollPresenterImpl } from './presenters/ScrollPresenter';
+import { SettingClientImpl } from './client/SettingClient';
+import { SettingRepositoryImpl } from './repositories/SettingRepository';
+import { TabsClientImpl } from './client/TabsClient';
+import { container } from 'tsyringe';
+
+container.register('FollowMasterClient', { useValue: new FollowMasterClientImpl(window.top) });
+container.register('AddonEnabledRepository', { useClass: AddonEnabledRepositoryImpl });
+container.register('AddonIndicatorClient', { useClass: AddonIndicatorClientImpl });
+container.register('ClipboardRepository', { useClass: ClipboardRepositoryImpl });
+container.register('ConsoleClient', { useClass: ConsoleClientImpl });
+container.register('ConsoleFramePresenter', { useClass: ConsoleFramePresenterImpl });
+container.register('FindClient', { useClass: FindClientImpl });
+container.register('FindMasterClient', { useClass: FindMasterClientImpl });
+container.register('FindPresenter', { useClass: FindPresenterImpl });
+container.register('FindRepository', { useClass: FindRepositoryImpl });
+container.register('FocusPresenter', { useClass: FocusPresenterImpl });
+container.register('FollowKeyRepository', { useClass: FollowKeyRepositoryImpl });
+container.register('FollowMasterRepository', { useClass: FollowMasterRepositoryImpl });
+container.register('FollowPresenter', { useClass: FollowPresenterImpl });
+container.register('FollowSlaveClientFactory', { useClass: FollowSlaveClientFactoryImpl });
+container.register('FollowSlaveRepository', { useClass: FollowSlaveRepositoryImpl });
+container.register('KeymapRepository', { useClass: KeymapRepositoryImpl });
+container.register('MarkClient', { useClass: MarkClientImpl });
+container.register('MarkKeyRepository', { useClass: MarkKeyRepositoryImpl });
+container.register('MarkRepository', { useClass: MarkRepositoryImpl });
+container.register('NavigationPresenter', { useClass: NavigationPresenterImpl });
+container.register('ScrollPresenter', { useClass: ScrollPresenterImpl });
+container.register('SettingClient', { useClass: SettingClientImpl });
+container.register('SettingRepository', { useClass: SettingRepositoryImpl });
+container.register('TabsClient', { useClass: TabsClientImpl });

src/content/index.ts

@@ -1,15 +1,19 @@
-import { ConsoleFramePresenterImpl } from './presenters/ConsoleFramePresenter';
+import 'reflect-metadata';
+
+import Application from './Application';
 import consoleFrameStyle from './site-style';
-import * as routes from './routes';
+import { ConsoleFramePresenterImpl } from './presenters/ConsoleFramePresenter';
+import { container } from 'tsyringe';
+import './di';
 
 if (window.self === window.top) {
-  routes.routeMasterComponents();
-
   new ConsoleFramePresenterImpl().initialize();
 }
 
-routes.routeComponents();
-
+try {
+  let app = container.resolve(Application);
+  app.run();
+} catch (e) { console.error(e); }
 
 let style = window.document.createElement('style');
 style.textContent = consoleFrameStyle;

src/content/routes.ts

@@ -1,97 +0,0 @@
-import MessageListener from './MessageListener';
-import FindController from './controllers/FindController';
-import MarkController from './controllers/MarkController';
-import FollowMasterController from './controllers/FollowMasterController';
-import FollowSlaveController from './controllers/FollowSlaveController';
-import FollowKeyController from './controllers/FollowKeyController';
-import InputDriver from './InputDriver';
-import KeymapController from './controllers/KeymapController';
-import AddonEnabledUseCase from './usecases/AddonEnabledUseCase';
-import MarkKeyController from './controllers/MarkKeyController';
-import AddonEnabledController from './controllers/AddonEnabledController';
-import SettingController from './controllers/SettingController';
-import ConsoleFrameController from './controllers/ConsoleFrameController';
-import * as messages from '../shared/messages';
-
-export const routeComponents = () => {
-  let listener = new MessageListener();
-
-  let followSlaveController = new FollowSlaveController();
-  listener.onWebMessage((message: messages.Message) => {
-    switch (message.type) {
-    case messages.FOLLOW_REQUEST_COUNT_TARGETS:
-      return followSlaveController.countTargets(message);
-    case messages.FOLLOW_CREATE_HINTS:
-      return followSlaveController.createHints(message);
-    case messages.FOLLOW_SHOW_HINTS:
-      return followSlaveController.showHints(message);
-    case messages.FOLLOW_ACTIVATE:
-      return followSlaveController.activate(message);
-    case messages.FOLLOW_REMOVE_HINTS:
-      return followSlaveController.clear(message);
-    }
-    return undefined;
-  });
-
-  let keymapController = new KeymapController();
-  let markKeyController = new MarkKeyController();
-  let followKeyController = new FollowKeyController();
-  let inputDriver = new InputDriver(document.body);
-  inputDriver.onKey(key => followKeyController.press(key));
-  inputDriver.onKey(key => markKeyController.press(key));
-  inputDriver.onKey(key => keymapController.press(key));
-
-  let settingController = new SettingController();
-  settingController.initSettings();
-
-  listener.onBackgroundMessage((message: messages.Message): any => {
-    let addonEnabledUseCase = new AddonEnabledUseCase();
-
-    switch (message.type) {
-    case messages.SETTINGS_CHANGED:
-      return settingController.reloadSettings(message);
-    case messages.ADDON_TOGGLE_ENABLED:
-      return addonEnabledUseCase.toggle();
-    }
-  });
-};
-
-export const routeMasterComponents = () => {
-  let listener = new MessageListener();
-
-  let findController = new FindController();
-  let followMasterController = new FollowMasterController();
-  let markController = new MarkController();
-  let addonEnabledController = new AddonEnabledController();
-  let consoleFrameController = new ConsoleFrameController();
-
-  listener.onWebMessage((message: messages.Message, sender: Window) => {
-    switch (message.type) {
-    case messages.CONSOLE_ENTER_FIND:
-      return findController.start(message);
-    case messages.FIND_NEXT:
-      return findController.next(message);
-    case messages.FIND_PREV:
-      return findController.prev(message);
-    case messages.CONSOLE_UNFOCUS:
-      return consoleFrameController.unfocus(message);
-    case messages.FOLLOW_START:
-      return followMasterController.followStart(message);
-    case messages.FOLLOW_RESPONSE_COUNT_TARGETS:
-      return followMasterController.responseCountTargets(message, sender);
-    case messages.FOLLOW_KEY_PRESS:
-      return followMasterController.keyPress(message);
-    }
-    return undefined;
-  });
-
-  listener.onBackgroundMessage((message: messages.Message) => {
-    switch (message.type) {
-    case messages.ADDON_ENABLED_QUERY:
-      return addonEnabledController.getAddonEnabled(message);
-    case messages.TAB_SCROLL_TO:
-      return markController.scrollTo(message);
-    }
-    return undefined;
-  });
-};

src/content/usecases/AddonEnabledUseCase.ts

@@ -1,19 +1,17 @@
-import AddonIndicatorClient, { AddonIndicatorClientImpl }
-  from '../client/AddonIndicatorClient';
-import AddonEnabledRepository, { AddonEnabledRepositoryImpl }
-  from '../repositories/AddonEnabledRepository';
+import { injectable, inject } from 'tsyringe';
+import AddonIndicatorClient from '../client/AddonIndicatorClient';
+import AddonEnabledRepository from '../repositories/AddonEnabledRepository';
 
+@injectable()
 export default class AddonEnabledUseCase {
-  private indicator: AddonIndicatorClient;
 
-  private repository: AddonEnabledRepository;
+  constructor(
+    @inject('AddonIndicatorClient')
+    private indicator: AddonIndicatorClient,
 
-  constructor({
-    indicator = new AddonIndicatorClientImpl(),
-    repository = new AddonEnabledRepositoryImpl(),
-  } = {}) {
-    this.indicator = indicator;
-    this.repository = repository;
+    @inject('AddonEnabledRepository')
+    private repository: AddonEnabledRepository,
+  ) {
   }
 
   async enable(): Promise<void> {

src/content/usecases/ClipboardUseCase.ts

@@ -1,31 +1,18 @@
+import { injectable, inject } from 'tsyringe';
 import * as urls from '../../shared/urls';
-import ClipboardRepository, { ClipboardRepositoryImpl }
-  from '../repositories/ClipboardRepository';
-import SettingRepository, { SettingRepositoryImpl }
-  from '../repositories/SettingRepository';
-import TabsClient, { TabsClientImpl }
-  from '../client/TabsClient';
-import ConsoleClient, { ConsoleClientImpl } from '../client/ConsoleClient';
+import ClipboardRepository from '../repositories/ClipboardRepository';
+import SettingRepository from '../repositories/SettingRepository';
+import TabsClient from '../client/TabsClient';
+import ConsoleClient from '../client/ConsoleClient';
 
+@injectable()
 export default class ClipboardUseCase {
-  private repository: ClipboardRepository;
-
-  private settingRepository: SettingRepository;
-
-  private client: TabsClient;
-
-  private consoleClient: ConsoleClient;
-
-  constructor({
-    repository = new ClipboardRepositoryImpl(),
-    settingRepository = new SettingRepositoryImpl(),
-    client = new TabsClientImpl(),
-    consoleClient = new ConsoleClientImpl(),
-  } = {}) {
-    this.repository = repository;
-    this.settingRepository = settingRepository;
-    this.client = client;
-    this.consoleClient = consoleClient;
+  constructor(
+    @inject('ClipboardRepository') private repository: ClipboardRepository,
+    @inject('SettingRepository') private settingRepository: SettingRepository,
+    @inject('TabsClient') private client: TabsClient,
+    @inject('ConsoleClient') private consoleClient: ConsoleClient,
+  ) {
   }
 
   async yankCurrentURL(): Promise<string> {

src/content/usecases/ConsoleFrameUseCase.ts

@@ -1,13 +1,12 @@
-import ConsoleFramePresenter, { ConsoleFramePresenterImpl }
-  from '../presenters/ConsoleFramePresenter';
+import { injectable, inject } from 'tsyringe';
+import ConsoleFramePresenter from '../presenters/ConsoleFramePresenter';
 
+@injectable()
 export default class ConsoleFrameUseCase {
-  private consoleFramePresenter: ConsoleFramePresenter;
-
-  constructor({
-    consoleFramePresenter = new ConsoleFramePresenterImpl(),
-  } = {}) {
-    this.consoleFramePresenter = consoleFramePresenter;
+  constructor(
+    @inject('ConsoleFramePresenter')
+    private consoleFramePresenter: ConsoleFramePresenter,
+  ) {
   }
 
   unfocus() {

src/content/usecases/FindSlaveUseCase.ts

@@ -1,13 +1,11 @@
-import FindMasterClient, { FindMasterClientImpl }
-  from '../client/FindMasterClient';
+import { injectable, inject } from 'tsyringe';
+import FindMasterClient from '../client/FindMasterClient';
 
+@injectable()
 export default class FindSlaveUseCase {
-  private findMasterClient: FindMasterClient;
-
-  constructor({
-    findMasterClient = new FindMasterClientImpl(),
-  } = {}) {
-    this.findMasterClient = findMasterClient;
+  constructor(
+    @inject('FindMasterClient') private findMasterClient: FindMasterClient,
+  ) {
   }
 
   findNext() {

src/content/usecases/FindUseCase.ts

@@ -1,28 +1,17 @@
-import FindPresenter, { FindPresenterImpl } from '../presenters/FindPresenter';
-import FindRepository, { FindRepositoryImpl }
-  from '../repositories/FindRepository';
-import FindClient, { FindClientImpl } from '../client/FindClient';
-import ConsoleClient, { ConsoleClientImpl } from '../client/ConsoleClient';
+import { injectable, inject } from 'tsyringe';
+import FindPresenter from '../presenters/FindPresenter';
+import FindRepository from '../repositories/FindRepository';
+import FindClient from '../client/FindClient';
+import ConsoleClient from '../client/ConsoleClient';
 
+@injectable()
 export default class FindUseCase {
-  private presenter: FindPresenter;
-
-  private repository: FindRepository;
-
-  private client: FindClient;
-
-  private consoleClient: ConsoleClient;
-
-  constructor({
-    presenter = new FindPresenterImpl() as FindPresenter,
-    repository = new FindRepositoryImpl(),
-    client = new FindClientImpl(),
-    consoleClient = new ConsoleClientImpl(),
-  } = {}) {
-    this.presenter = presenter;
-    this.repository = repository;
-    this.client = client;
-    this.consoleClient = consoleClient;
+  constructor(
+    @inject('FindPresenter') private presenter: FindPresenter,
+    @inject('FindRepository') private repository: FindRepository,
+    @inject('FindClient') private client: FindClient,
+    @inject('ConsoleClient') private consoleClient: ConsoleClient,
+  ) {
   }
 
   async startFind(keyword?: string): Promise<void> {

src/content/usecases/FocusUseCase.ts

@@ -1,13 +1,11 @@
-import FocusPresenter, { FocusPresenterImpl }
-  from '../presenters/FocusPresenter';
+import { injectable, inject } from 'tsyringe';
+import FocusPresenter from '../presenters/FocusPresenter';
 
+@injectable()
 export default class FocusUseCases {
-  private presenter: FocusPresenter;
-
-  constructor({
-    presenter = new FocusPresenterImpl(),
-  } = {}) {
-    this.presenter = presenter;
+  constructor(
+    @inject('FocusPresenter') private presenter: FocusPresenter,
+  ) {
   }
 
   focusFirstInput() {

src/content/usecases/FollowMasterUseCase.ts

@@ -1,31 +1,29 @@
-import FollowKeyRepository, { FollowKeyRepositoryImpl }
-  from '../repositories/FollowKeyRepository';
-import FollowMasterRepository, { FollowMasterRepositoryImpl }
-  from '../repositories/FollowMasterRepository';
-import FollowSlaveClient, { FollowSlaveClientImpl }
-  from '../client/FollowSlaveClient';
+import { injectable, inject } from 'tsyringe';
+import FollowKeyRepository from '../repositories/FollowKeyRepository';
+import FollowMasterRepository from '../repositories/FollowMasterRepository';
+import FollowSlaveClient from '../client/FollowSlaveClient';
+import FollowSlaveClientFactory from '../client/FollowSlaveClientFactory';
+import SettingRepository from '../repositories/SettingRepository';
 import HintKeyProducer from './HintKeyProducer';
-import SettingRepository, { SettingRepositoryImpl }
-  from '../repositories/SettingRepository';
 
+@injectable()
 export default class FollowMasterUseCase {
-  private followKeyRepository: FollowKeyRepository;
-
-  private followMasterRepository: FollowMasterRepository;
-
-  private settingRepository: SettingRepository;
-
   // TODO Make repository
   private producer: HintKeyProducer | null;
 
-  constructor({
-    followKeyRepository = new FollowKeyRepositoryImpl(),
-    followMasterRepository = new FollowMasterRepositoryImpl(),
-    settingRepository = new SettingRepositoryImpl(),
-  } = {}) {
-    this.followKeyRepository = followKeyRepository;
-    this.followMasterRepository = followMasterRepository;
-    this.settingRepository = settingRepository;
+  constructor(
+    @inject('FollowKeyRepository')
+    private followKeyRepository: FollowKeyRepository,
+
+    @inject('FollowMasterRepository')
+    private followMasterRepository: FollowMasterRepository,
+
+    @inject('SettingRepository')
+    private settingRepository: SettingRepository,
+
+    @inject('FollowSlaveClientFactory')
+    private followSlaveClientFactory: FollowSlaveClientFactory,
+  ) {
     this.producer = null;
   }
 
@@ -38,7 +36,7 @@ export default class FollowMasterUseCase {
 
     let viewWidth = window.top.innerWidth;
     let viewHeight = window.top.innerHeight;
-    new FollowSlaveClientImpl(window.top).requestHintCount(
+    this.followSlaveClientFactory.create(window.top).requestHintCount(
       { width: viewWidth, height: viewHeight },
       { x: 0, y: 0 },
     );
@@ -47,7 +45,8 @@ export default class FollowMasterUseCase {
     for (let i = 0; i < frameElements.length; ++i) {
       let ele = frameElements[i] as HTMLFrameElement | HTMLIFrameElement;
       let { left: frameX, top: frameY } = ele.getBoundingClientRect();
-      new FollowSlaveClientImpl(ele.contentWindow!!).requestHintCount(
+      let client = this.followSlaveClientFactory.create(ele.contentWindow!!);
+      client.requestHintCount(
         { width: viewWidth, height: viewHeight },
         { x: frameX, y: frameY },
       );
@@ -77,7 +76,8 @@ export default class FollowMasterUseCase {
       let { left: frameX, top: frameY } = ele.getBoundingClientRect();
       pos = { x: frameX, y: frameY };
     }
-    new FollowSlaveClientImpl(sender).createHints(
+    let client = this.followSlaveClientFactory.create(sender);
+    client.createHints(
       { width: viewWidth, height: viewHeight },
       pos,
       produced,
@@ -138,7 +138,7 @@ export default class FollowMasterUseCase {
 
   private broadcastToSlaves(handler: (client: FollowSlaveClient) => void) {
     let allFrames = [window.self].concat(Array.from(window.frames as any));
-    let clients = allFrames.map(frame => new FollowSlaveClientImpl(frame));
+    let clients = allFrames.map(w => this.followSlaveClientFactory.create(w));
     for (let client of clients) {
       handler(client);
     }

src/content/usecases/FollowSlaveUseCase.ts

@@ -1,11 +1,9 @@
-import FollowSlaveRepository, { FollowSlaveRepositoryImpl }
-  from '../repositories/FollowSlaveRepository';
-import FollowPresenter, { FollowPresenterImpl }
-  from '../presenters/FollowPresenter';
-import TabsClient, { TabsClientImpl } from '../client/TabsClient';
+import { injectable, inject } from 'tsyringe';
+import FollowSlaveRepository from '../repositories/FollowSlaveRepository';
+import FollowPresenter from '../presenters/FollowPresenter';
+import TabsClient from '../client/TabsClient';
+import FollowMasterClient from '../client/FollowMasterClient';
 import { LinkHint, InputHint } from '../presenters/Hint';
-import FollowMasterClient, { FollowMasterClientImpl }
-  from '../client/FollowMasterClient';
 import Key from '../domains/Key';
 
 interface Size {
@@ -18,25 +16,21 @@ interface Point {
   y: number;
 }
 
+@injectable()
 export default class FollowSlaveUseCase {
-  private presenter: FollowPresenter;
+  constructor(
+    @inject('FollowPresenter')
+    private presenter: FollowPresenter,
 
-  private tabsClient: TabsClient;
+    @inject('TabsClient')
+    private tabsClient: TabsClient,
 
-  private followMasterClient: FollowMasterClient;
+    @inject('FollowMasterClient')
+    private followMasterClient: FollowMasterClient,
 
-  private followSlaveRepository: FollowSlaveRepository;
-
-  constructor({
-    presenter = new FollowPresenterImpl(),
-    tabsClient = new TabsClientImpl(),
-    followMasterClient = new FollowMasterClientImpl(window.top),
-    followSlaveRepository = new FollowSlaveRepositoryImpl(),
-  } = {}) {
-    this.presenter = presenter;
-    this.tabsClient = tabsClient;
-    this.followMasterClient = followMasterClient;
-    this.followSlaveRepository = followSlaveRepository;
+    @inject('FollowSlaveRepository')
+    private followSlaveRepository: FollowSlaveRepository,
+  ) {
   }
 
   countTargets(viewSize: Size, framePosition: Point): void {

src/content/usecases/KeymapUseCase.ts

@@ -1,10 +1,7 @@
-import KeymapRepository, { KeymapRepositoryImpl }
-  from '../repositories/KeymapRepository';
-import SettingRepository, { SettingRepositoryImpl }
-  from '../repositories/SettingRepository';
-import AddonEnabledRepository, { AddonEnabledRepositoryImpl }
-  from '../repositories/AddonEnabledRepository';
-
+import { injectable, inject } from 'tsyringe';
+import KeymapRepository from '../repositories/KeymapRepository';
+import SettingRepository from '../repositories/SettingRepository';
+import AddonEnabledRepository from '../repositories/AddonEnabledRepository';
 import * as operations from '../../shared/operations';
 import { Keymaps } from '../../shared/Settings';
 import Key from '../domains/Key';
@@ -17,22 +14,18 @@ const reservedKeymaps: Keymaps = {
   '<C-[>': { type: operations.CANCEL },
 };
 
-
+@injectable()
 export default class KeymapUseCase {
-  private repository: KeymapRepository;
+  constructor(
+    @inject('KeymapRepository')
+    private repository: KeymapRepository,
 
-  private settingRepository: SettingRepository;
+    @inject('SettingRepository')
+    private settingRepository: SettingRepository,
 
-  private addonEnabledRepository: AddonEnabledRepository;
-
-  constructor({
-    repository = new KeymapRepositoryImpl(),
-    settingRepository = new SettingRepositoryImpl(),
-    addonEnabledRepository = new AddonEnabledRepositoryImpl(),
-  } = {}) {
-    this.repository = repository;
-    this.settingRepository = settingRepository;
-    this.addonEnabledRepository = addonEnabledRepository;
+    @inject('AddonEnabledRepository')
+    private addonEnabledRepository: AddonEnabledRepository,
+  ) {
   }
 
   nextOp(key: Key): operations.Operation | null {

src/content/usecases/MarkKeyUseCase.ts

@@ -1,13 +1,11 @@
-import MarkKeyRepository, { MarkKeyRepositoryImpl }
-  from '../repositories/MarkKeyRepository';
+import { injectable, inject } from 'tsyringe';
+import MarkKeyRepository from '../repositories/MarkKeyRepository';
 
+@injectable()
 export default class MarkKeyUseCase {
-  private repository: MarkKeyRepository;
-
-  constructor({
-    repository = new MarkKeyRepositoryImpl()
-  } = {}) {
-    this.repository = repository;
+  constructor(
+    @inject('MarkKeyRepository') private repository: MarkKeyRepository,
+  ) {
   }
 
   isSetMode(): boolean {

src/content/usecases/MarkUseCase.ts

@@ -1,35 +1,19 @@
-import ScrollPresenter, { ScrollPresenterImpl }
-  from '../presenters/ScrollPresenter';
-import MarkClient, { MarkClientImpl } from '../client/MarkClient';
-import MarkRepository, { MarkRepositoryImpl }
-  from '../repositories/MarkRepository';
-import SettingRepository, { SettingRepositoryImpl }
-  from '../repositories/SettingRepository';
-import ConsoleClient, { ConsoleClientImpl } from '../client/ConsoleClient';
+import { injectable, inject } from 'tsyringe';
+import ScrollPresenter from '../presenters/ScrollPresenter';
+import MarkClient from '../client/MarkClient';
+import MarkRepository from '../repositories/MarkRepository';
+import SettingRepository from '../repositories/SettingRepository';
+import ConsoleClient from '../client/ConsoleClient';
 
+@injectable()
 export default class MarkUseCase {
-  private scrollPresenter: ScrollPresenter;
-
-  private client: MarkClient;
-
-  private repository: MarkRepository;
-
-  private settingRepository: SettingRepository;
-
-  private consoleClient: ConsoleClient;
-
-  constructor({
-    scrollPresenter = new ScrollPresenterImpl(),
-    client = new MarkClientImpl(),
-    repository = new MarkRepositoryImpl(),
-    settingRepository = new SettingRepositoryImpl(),
-    consoleClient = new ConsoleClientImpl(),
-  } = {}) {
-    this.scrollPresenter = scrollPresenter;
-    this.client = client;
-    this.repository = repository;
-    this.settingRepository = settingRepository;
-    this.consoleClient = consoleClient;
+  constructor(
+    @inject('ScrollPresenter') private scrollPresenter: ScrollPresenter,
+    @inject('MarkClient') private client: MarkClient,
+    @inject('MarkRepository') private repository: MarkRepository,
+    @inject('SettingRepository') private settingRepository: SettingRepository,
+    @inject('ConsoleClient') private consoleClient: ConsoleClient,
+  ) {
   }
 
   async set(key: string): Promise<void> {

src/content/usecases/NavigateUseCase.ts

@@ -1,13 +1,12 @@
-import NavigationPresenter, { NavigationPresenterImpl }
-  from '../presenters/NavigationPresenter';
+import { injectable, inject } from 'tsyringe';
+import NavigationPresenter from '../presenters/NavigationPresenter';
 
+@injectable()
 export default class NavigateUseCase {
-  private navigationPresenter: NavigationPresenter;
-
-  constructor({
-    navigationPresenter = new NavigationPresenterImpl(),
-  } = {}) {
-    this.navigationPresenter = navigationPresenter;
+  constructor(
+    @inject('NavigationPresenter')
+    private navigationPresenter: NavigationPresenter,
+  ) {
   }
 
   openHistoryPrev(): void {

src/content/usecases/ScrollUseCase.ts

@@ -1,19 +1,13 @@
-import ScrollPresenter, { ScrollPresenterImpl }
-  from '../presenters/ScrollPresenter';
-import SettingRepository, { SettingRepositoryImpl }
-  from '../repositories/SettingRepository';
+import { injectable, inject } from 'tsyringe';
+import ScrollPresenter from '../presenters/ScrollPresenter';
+import SettingRepository from '../repositories/SettingRepository';
 
+@injectable()
 export default class ScrollUseCase {
-  private presenter: ScrollPresenter;
-
-  private settingRepository: SettingRepository;
-
-  constructor({
-    presenter = new ScrollPresenterImpl(),
-    settingRepository = new SettingRepositoryImpl(),
-  } = {}) {
-    this.presenter = presenter;
-    this.settingRepository = settingRepository;
+  constructor(
+    @inject('ScrollPresenter') private presenter: ScrollPresenter,
+    @inject('SettingRepository') private settingRepository: SettingRepository,
+  ) {
   }
 
   scrollVertically(count: number): void {

src/content/usecases/SettingUseCase.ts

@@ -1,19 +1,14 @@
-import SettingRepository, { SettingRepositoryImpl }
-  from '../repositories/SettingRepository';
-import SettingClient, { SettingClientImpl } from '../client/SettingClient';
+import { injectable, inject } from 'tsyringe';
+import SettingRepository from '../repositories/SettingRepository';
+import SettingClient from '../client/SettingClient';
 import Settings from '../../shared/Settings';
 
+@injectable()
 export default class SettingUseCase {
-  private repository: SettingRepository;
-
-  private client: SettingClient;
-
-  constructor({
-    repository = new SettingRepositoryImpl(),
-    client = new SettingClientImpl(),
-  } = {}) {
-    this.repository = repository;
-    this.client = client;
+  constructor(
+    @inject('SettingRepository') private repository: SettingRepository,
+    @inject('SettingClient') private client: SettingClient,
+  ) {
   }
 
   async reload(): Promise<Settings> {

test/content/usecases/AddonEnabledUseCase.test.ts

@@ -40,7 +40,7 @@ describe('AddonEnabledUseCase', () => {
   beforeEach(() => {
     repository = new MockAddonEnabledRepository(true);
     indicator = new MockAddonIndicatorClient(false);
-    sut = new AddonEnabledUseCase({ repository, indicator });
+    sut = new AddonEnabledUseCase(indicator, repository);
   });
 
   describe('#enable', () => {

test/content/usecases/ClipboardUseCase.test.ts

@@ -1,4 +1,5 @@
 import ClipboardRepository from '../../../src/content/repositories/ClipboardRepository';
+import { SettingRepositoryImpl } from '../../../src/content/repositories/SettingRepository';
 import TabsClient from '../../../src/content/client/TabsClient';
 import MockConsoleClient from '../mock/MockConsoleClient';
 import ClipboardUseCase from '../../../src/content/usecases/ClipboardUseCase';
@@ -43,7 +44,12 @@ describe('ClipboardUseCase', () => {
     repository = new MockClipboardRepository();
     client = new MockTabsClient();
     consoleClient = new MockConsoleClient();
-    sut = new ClipboardUseCase({ repository, client: client, consoleClient });
+    sut = new ClipboardUseCase(
+      repository,
+      new SettingRepositoryImpl(),
+      client,
+      consoleClient
+   );
   });
 
   describe('#yankCurrentURL', () => {

test/content/usecases/FindUseCase.test.ts

@@ -71,7 +71,7 @@ describe('FindUseCase', () => {
     presenter = new MockFindPresenter();
     client = new MockFindClient();
     consoleClient = new MockConsoleClient();
-    sut = new FindUseCase({ repository, presenter, client, consoleClient });
+    sut = new FindUseCase(presenter, repository, client, consoleClient);
   });
 
   describe('#startFind', () => {

test/content/usecases/MarkUseCase.test.ts

@@ -1,4 +1,5 @@
 import MarkRepository from '../../../src/content/repositories/MarkRepository';
+import { SettingRepositoryImpl } from '../../../src/content/repositories/SettingRepository';
 import MarkUseCase from '../../../src/content/usecases/MarkUseCase';
 import MarkClient from '../../../src/content/client/MarkClient';
 import MockConsoleClient from '../mock/MockConsoleClient';
@@ -54,9 +55,13 @@ describe('MarkUseCase', () => {
     client = new MockMarkClient();
     consoleClient = new MockConsoleClient();
     scrollPresenter = new MockScrollPresenter();
-    sut = new MarkUseCase({
-      repository, client, consoleClient, scrollPresenter,
-    });
+    sut = new MarkUseCase(
+      scrollPresenter,
+      client,
+      repository,
+      new SettingRepositoryImpl(),
+      consoleClient,
+    );
   });
 
   describe('#set', () => {

test/content/usecases/SettingUseCaase.test.ts

@@ -56,7 +56,7 @@ describe('AddonEnabledUseCase', () => {
 
     repository = new MockSettingRepository();
     client = new MockSettingClient(testSettings);
-    sut = new SettingUseCase({ repository, client });
+    sut = new SettingUseCase(repository, client);
   });
 
   describe('#reload', () => {

test/main.ts

@@ -1,6 +1,8 @@
-import chai from 'chai';
+import 'reflect-metadata';
+import { expect } from 'chai';
+
 const browserFake = require('webextensions-api-fake');
 const browser = browserFake();
 
-global.expect = chai.expect;
+global.expect = expect;
 global.browser = browser;

tsconfig.json

@@ -5,7 +5,6 @@
     "lib": ["es6", "dom", "es2017"],
     "allowJs": true,
     "checkJs": true,
-    "noEmit": true,
     "jsx": "react",
     "sourceMap": true,
     "outDir": "./build",
@@ -28,7 +27,10 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
 
-    "typeRoots": ["node_modules/@types", "node_modules/web-ext-types"]
+    "typeRoots": ["node_modules/@types", "node_modules/web-ext-types"],
+
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   },
   "include": [
     "src"

webpack.config.js

@@ -17,19 +17,20 @@ config = {
     filename: '[name].js'
   },
 
+  optimization: {
+    minimize: false
+  },
+
+  performance: {
+    hints: false
+  },
+
   module: {
     rules: [
       {
-        test: [ /\.js$/,  /\.jsx$/, /\.ts$/, /\.tsx$/],
+        test: [ /\.ts$/, /\.tsx$/],
         exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            { plugins: ['@babel/plugin-proposal-class-properties'] },
-            '@babel/react',
-            '@babel/preset-typescript'
-          ]
-        },
+        loader: 'ts-loader'
       },
       {
         test: /\.css$/,