migrate injection token with a symbol in content scripts

src/content/Application.ts

@@ -4,7 +4,7 @@ import { ContentMessageListener } from "./messaging/ContentMessageListener";
 import { KeyController } from "./controllers/KeyController";
 import { SettingsController } from "./controllers/SettingsController";
 import { InputDriver } from "./InputDriver";
-import type { ReadyStatusPresenter } from "./presenters/ReadyStatusPresenter";
+import { ReadyStatusPresenter } from "./presenters/ReadyStatusPresenter";
 
 @injectable()
 export class Application {
@@ -18,7 +18,7 @@ export class Application {
     private readonly keyController: KeyController,
     @inject(SettingsController)
     private readonly settingsController: SettingsController,
-    @inject("ReadyStatusPresenter")
+    @inject(ReadyStatusPresenter)
     private readonly readyStatusPresenter: ReadyStatusPresenter,
   ) {}
 

src/content/client/BackgroundKeyClient.ts

@@ -1,15 +1,17 @@
 import { injectable, inject } from "inversify";
 import type { Key } from "../../shared/key";
-import type { BackgroundMessageSender } from "./BackgroundMessageSender";
+import { BackgroundMessageSender } from "./BackgroundMessageSender";
 
 export interface BackgroundKeyClient {
   sendKey(key: Key): Promise<void>;
 }
 
+export const BackgroundKeyClient = Symbol("BackgroundKeyClient");
+
 @injectable()
 export class BackgroundKeyClientImpl implements BackgroundKeyClient {
   constructor(
-    @inject("BackgroundMessageSender")
+    @inject(BackgroundMessageSender)
     private readonly sender: BackgroundMessageSender,
   ) {}
 

src/content/client/BackgroundMessageSender.ts

@@ -1,6 +1,8 @@
 import { Sender } from "../../messaging";
 import type { Schema, Key, Request } from "../../messaging/schema/background";
 
+export const BackgroundMessageSender = Symbol("BackgroundMessageSender");
+
 export const newSender = () => {
   const sender = new Sender<Schema>((type: Key, args: Request) => {
     if (process.env.NODE_ENV === "development") {

src/content/client/OperationClient.ts

@@ -1,15 +1,17 @@
 import { injectable, inject } from "inversify";
 import type { Operation } from "../../shared/operation";
-import type { BackgroundMessageSender } from "./BackgroundMessageSender";
+import { BackgroundMessageSender } from "./BackgroundMessageSender";
 
 export interface OperationClient {
   execBackgroundOp(op: Operation, repeat: number): Promise<void>;
 }
 
+export const OperationClient = Symbol("OperationClient");
+
 @injectable()
 export class OperationClientImpl implements OperationClient {
   constructor(
-    @inject("BackgroundMessageSender")
+    @inject(BackgroundMessageSender)
     private readonly sender: BackgroundMessageSender,
   ) {}
 

src/content/client/SettingClient.ts

@@ -1,16 +1,18 @@
 import { injectable, inject } from "inversify";
 import { deserialize } from "../../settings";
 import type { Settings } from "../../shared/settings";
-import type { BackgroundMessageSender } from "./BackgroundMessageSender";
+import { BackgroundMessageSender } from "./BackgroundMessageSender";
 
 export interface SettingClient {
   load(): Promise<Settings>;
 }
 
+export const SettingClient = Symbol("SettingClient");
+
 @injectable()
 export class SettingClientImpl {
   constructor(
-    @inject("BackgroundMessageSender")
+    @inject(BackgroundMessageSender)
     private readonly sender: BackgroundMessageSender,
   ) {}
 

src/content/client/TopFrameClient.ts

@@ -1,14 +1,16 @@
 import { injectable, inject } from "inversify";
-import type { WindowMessageSender } from "./WindowMessageSender";
+import { WindowMessageSender } from "./WindowMessageSender";
 
 export interface TopFrameClient {
   notifyFrameId(frameId: number): Promise<void>;
 }
 
+export const TopFrameClient = Symbol("TopFrameClient");
+
 @injectable()
 export class TopFrameClientImpl implements TopFrameClient {
   constructor(
-    @inject("WindowMessageSender")
+    @inject(WindowMessageSender)
     private readonly sender: WindowMessageSender,
   ) {}
 

src/content/client/WindowMessageSender.ts

@@ -1,6 +1,8 @@
 import { SimplexSender } from "../../messaging";
 import type { Key, Schema, Request } from "../../messaging/schema/window";
 
+export const WindowMessageSender = Symbol("WindowMessageSender");
+
 /**
  * The window.postMessage() is used to identify a frame id of the <iframe>
  * element through the background script.  Only Firefox supports to get the

src/content/controllers/FocusController.ts

@@ -1,10 +1,10 @@
 import { injectable, inject } from "inversify";
-import type { FocusPresenter } from "../presenters/FocusPresenter";
+import { FocusPresenter } from "../presenters/FocusPresenter";
 
 @injectable()
 export class FocusController {
   constructor(
-    @inject("FocusPresenter")
+    @inject(FocusPresenter)
     private readonly focusPresenter: FocusPresenter,
   ) {}
 

src/content/controllers/KeyController.ts

@@ -1,17 +1,17 @@
 import { injectable, inject } from "inversify";
 import type { Key } from "../../shared/key";
 import { Mode } from "../../shared/mode";
-import type { ModeRepository } from "../repositories/ModeRepository";
-import type { BackgroundKeyClient } from "../client/BackgroundKeyClient";
+import { ModeRepository } from "../repositories/ModeRepository";
+import { BackgroundKeyClient } from "../client/BackgroundKeyClient";
 import { KeymapUseCase } from "../usecases/KeymapUseCase";
 import { OperationUseCase } from "../usecases/OperationUseCase";
 
 @injectable()
 export class KeyController {
   constructor(
-    @inject("ModeRepository")
+    @inject(ModeRepository)
     private readonly modeRepository: ModeRepository,
-    @inject("BackgroundKeyClient")
+    @inject(BackgroundKeyClient)
     private readonly backgroundKeyClient: BackgroundKeyClient,
     @inject(KeymapUseCase)
     private readonly keymapUseCase: KeymapUseCase,

src/content/controllers/ModeController.ts

@@ -1,11 +1,11 @@
 import { injectable, inject } from "inversify";
 import type { Mode } from "../../shared/mode";
-import type { ModeRepository } from "../repositories/ModeRepository";
+import { ModeRepository } from "../repositories/ModeRepository";
 
 @injectable()
 export class ModeController {
   constructor(
-    @inject("ModeRepository")
+    @inject(ModeRepository)
     private readonly modeRepository: ModeRepository,
   ) {}
 

src/content/controllers/ScrollController.ts

@@ -1,10 +1,10 @@
 import { injectable, inject } from "inversify";
-import type { ScrollPresenter } from "../presenters/ScrollPresenter";
+import { ScrollPresenter } from "../presenters/ScrollPresenter";
 
 @injectable()
 export class ScrollController {
   constructor(
-    @inject("ScrollPresenter")
+    @inject(ScrollPresenter)
     private readonly scrollPresenter: ScrollPresenter,
   ) {}
 

src/content/controllers/SettingsController.ts

@@ -1,13 +1,13 @@
 import { injectable, inject } from "inversify";
 import { AddonEnabledUseCase } from "../usecases/AddonEnabledUseCase";
-import type { SettingRepository } from "../repositories/SettingRepository";
+import { SettingRepository } from "../repositories/SettingRepository";
 
 @injectable()
 export class SettingsController {
   constructor(
     @inject(AddonEnabledUseCase)
     private readonly addonEnabledUseCase: AddonEnabledUseCase,
-    @inject("SettingRepository")
+    @inject(SettingRepository)
     private readonly settingRepostory: SettingRepository,
   ) {}
 

src/content/di.ts

@@ -1,50 +1,92 @@
 /* eslint-disable max-len */
 
-import { AddonEnabledRepositoryImpl } from "./repositories/AddonEnabledRepository";
-import { AddressRepositoryImpl } from "./repositories/AddressRepository";
-import { ConsoleFramePresenterImpl } from "./presenters/ConsoleFramePresenter";
-import { FocusPresenterImpl } from "./presenters/FocusPresenter";
-import { HintPresenterImpl } from "./presenters/HintPresenter";
-import { KeymapRepositoryImpl } from "./repositories/KeymapRepository";
-import { NavigationPresenterImpl } from "./presenters/NavigationPresenter";
-import { OperationClientImpl } from "./client/OperationClient";
-import { ScrollPresenterImpl } from "./presenters/ScrollPresenter";
-import { SettingClientImpl } from "./client/SettingClient";
-import { SettingRepositoryImpl } from "./repositories/SettingRepository";
-import { FindPresenterImpl } from "./presenters/FindPresenter";
-import { BackgroundKeyClientImpl } from "./client/BackgroundKeyClient";
-import { ModeRepositoryImpl } from "./repositories/ModeRepository";
-import { TopFrameClientImpl } from "./client/TopFrameClient";
-import { FrameIdRepositoryImpl } from "./repositories/FrameIdRepository";
-import { ReadyStatusPresenterImpl } from "./presenters/ReadyStatusPresenter";
+import {
+  AddonEnabledRepository,
+  AddonEnabledRepositoryImpl,
+} from "./repositories/AddonEnabledRepository";
+import {
+  AddressRepository,
+  AddressRepositoryImpl,
+} from "./repositories/AddressRepository";
+import {
+  ConsoleFramePresenter,
+  ConsoleFramePresenterImpl,
+} from "./presenters/ConsoleFramePresenter";
+import {
+  FocusPresenter,
+  FocusPresenterImpl,
+} from "./presenters/FocusPresenter";
+import { HintPresenter, HintPresenterImpl } from "./presenters/HintPresenter";
+import {
+  KeymapRepository,
+  KeymapRepositoryImpl,
+} from "./repositories/KeymapRepository";
+import {
+  NavigationPresenter,
+  NavigationPresenterImpl,
+} from "./presenters/NavigationPresenter";
+import { OperationClient, OperationClientImpl } from "./client/OperationClient";
+import {
+  ScrollPresenter,
+  ScrollPresenterImpl,
+} from "./presenters/ScrollPresenter";
+import { SettingClient, SettingClientImpl } from "./client/SettingClient";
+import {
+  SettingRepository,
+  SettingRepositoryImpl,
+} from "./repositories/SettingRepository";
+import { FindPresenter, FindPresenterImpl } from "./presenters/FindPresenter";
+import {
+  BackgroundKeyClient,
+  BackgroundKeyClientImpl,
+} from "./client/BackgroundKeyClient";
+import {
+  ModeRepository,
+  ModeRepositoryImpl,
+} from "./repositories/ModeRepository";
+import { TopFrameClient, TopFrameClientImpl } from "./client/TopFrameClient";
+import {
+  FrameIdRepository,
+  FrameIdRepositoryImpl,
+} from "./repositories/FrameIdRepository";
+import {
+  ReadyStatusPresenter,
+  ReadyStatusPresenterImpl,
+} from "./presenters/ReadyStatusPresenter";
 import { Container } from "inversify";
-import { newSender as newBackgroundMessageSender } from "./client/BackgroundMessageSender";
-import { newSender as newWindowMessageSender } from "./client/WindowMessageSender";
+import {
+  BackgroundMessageSender,
+  newSender as newBackgroundMessageSender,
+} from "./client/BackgroundMessageSender";
+import {
+  WindowMessageSender,
+  newSender as newWindowMessageSender,
+} from "./client/WindowMessageSender";
 
 const container = new Container({ autoBindInjectable: true });
 
-container.bind("AddonEnabledRepository").to(AddonEnabledRepositoryImpl);
-container.bind("AddressRepository").to(AddressRepositoryImpl);
-container.bind("ConsoleFramePresenter").to(ConsoleFramePresenterImpl);
-container.bind("FocusPresenter").to(FocusPresenterImpl);
-container.bind("HintPresenter").to(HintPresenterImpl);
-container.bind("KeymapRepository").to(KeymapRepositoryImpl);
-container.bind("NavigationPresenter").to(NavigationPresenterImpl);
-container.bind("OperationClient").to(OperationClientImpl);
-container.bind("ScrollPresenter").to(ScrollPresenterImpl);
-container.bind("FindPresenter").to(FindPresenterImpl);
-container.bind("BackgroundKeyClient").to(BackgroundKeyClientImpl);
-container.bind("ModeRepository").to(ModeRepositoryImpl);
-container.bind("TopFrameClient").to(TopFrameClientImpl);
-container.bind("FrameIdRepository").to(FrameIdRepositoryImpl);
-container.bind("ReadyStatusPresenter").to(ReadyStatusPresenterImpl);
-container.bind("SettingClient").to(SettingClientImpl);
-container.bind("SettingRepository").to(SettingRepositoryImpl);
+container.bind(AddonEnabledRepository).to(AddonEnabledRepositoryImpl);
+container.bind(AddressRepository).to(AddressRepositoryImpl);
+container.bind(ConsoleFramePresenter).to(ConsoleFramePresenterImpl);
+container.bind(FocusPresenter).to(FocusPresenterImpl);
+container.bind(HintPresenter).to(HintPresenterImpl);
+container.bind(KeymapRepository).to(KeymapRepositoryImpl);
+container.bind(NavigationPresenter).to(NavigationPresenterImpl);
+container.bind(OperationClient).to(OperationClientImpl);
+container.bind(ScrollPresenter).to(ScrollPresenterImpl);
+container.bind(FindPresenter).to(FindPresenterImpl);
+container.bind(BackgroundKeyClient).to(BackgroundKeyClientImpl);
+container.bind(ModeRepository).to(ModeRepositoryImpl);
+container.bind(TopFrameClient).to(TopFrameClientImpl);
+container.bind(FrameIdRepository).to(FrameIdRepositoryImpl);
+container.bind(ReadyStatusPresenter).to(ReadyStatusPresenterImpl);
+container.bind(SettingClient).to(SettingClientImpl);
+container.bind(SettingRepository).to(SettingRepositoryImpl);
 container
-  .bind("BackgroundMessageSender")
+  .bind(BackgroundMessageSender)
   .toConstantValue(newBackgroundMessageSender());
 container
-  .bind("WindowMessageSender")
+  .bind(WindowMessageSender)
   .toConstantValue(newWindowMessageSender(window.top!));
 
 export { container };

src/content/presenters/ConsoleFramePresenter.ts

@@ -26,6 +26,8 @@ const FRAME_STYLES = {
   "pointer-events": "none",
 } as const;
 
+export const ConsoleFramePresenter = Symbol("ConsoleFramePresenter");
+
 @injectable()
 export class ConsoleFramePresenterImpl implements ConsoleFramePresenter {
   private static readonly IframeId = "vimmatic-console-frame" as const;

src/content/presenters/FindPresenter.ts

@@ -21,6 +21,8 @@ let currentQuery: {
 let finder: Finder | undefined;
 let textGroups: Array<Array<Text>> | undefined;
 
+export const FindPresenter = Symbol("FindPresenter");
+
 @injectable()
 export class FindPresenterImpl implements FindPresenter {
   findNext({ keyword, mode, ignoreCase }: FindQuery): boolean {

src/content/presenters/FocusPresenter.ts

@@ -4,6 +4,8 @@ export interface FocusPresenter {
   focusFirstElement(): boolean;
 }
 
+export const FocusPresenter = Symbol("FocusPresenter");
+
 @injectable()
 export class FocusPresenterImpl implements FocusPresenter {
   focusFirstElement(): boolean {

src/content/presenters/HintPresenter.ts

@@ -1,5 +1,5 @@
 import { inject, injectable } from "inversify";
-import type { SettingRepository } from "../repositories/SettingRepository";
+import { SettingRepository } from "../repositories/SettingRepository";
 import { Hint } from "./Hint";
 import * as doms from "../../shared/utils/dom";
 import { HTMLElementLocator } from "./HTMLElementLocator";
@@ -80,10 +80,12 @@ export interface HintPresenter {
   clickElement(id: string): void;
 }
 
+export const HintPresenter = Symbol("HintPresenter");
+
 @injectable()
 export class HintPresenterImpl implements HintPresenter {
   constructor(
-    @inject("SettingRepository")
+    @inject(SettingRepository)
     private readonly settingRepository: SettingRepository,
   ) {}
 

src/content/presenters/NavigationPresenter.ts

@@ -32,6 +32,8 @@ function selectLast<E extends Element>(
   return nodes.length ? nodes[nodes.length - 1] : null;
 }
 
+export const NavigationPresenter = Symbol("NavigationPresenter");
+
 @injectable()
 export class NavigationPresenterImpl implements NavigationPresenter {
   openHistoryPrev(): void {

src/content/presenters/ReadyStatusPresenter.ts

@@ -6,6 +6,8 @@ export interface ReadyStatusPresenter {
   setConsoleReady(): void;
 }
 
+export const ReadyStatusPresenter = Symbol("ReadyStatusPresenter");
+
 @injectable()
 export class ReadyStatusPresenterImpl {
   constructor(private readonly doc: Document = window.document) {}