refactor: replace injection tokens with symbols and use provider module (#488)

This PR includes two concepts of refactoring.
- Migrate tokens at `@inject()` of inversify with the Symbol instead of
using a string. Using symbols is more robust than string.
- Use
[inversify-binding-decorators](https://github.com/inversify/inversify-binding-decorators)
to bind class instead of binding manually.

Author: ueokande

package.json

@@ -27,7 +27,8 @@
   "homepage": "https://github.com/ueokande/vimmatic",
   "dependencies": {
     "@abraham/reflection": "^0.12.0",
-    "inversify": "^6.0.1",
+    "inversify": "^6.0.2",
+    "inversify-binding-decorators": "^4.0.0",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pnpm-lock.yaml

@@ -2,12 +2,12 @@ import { injectable, inject } from "inversify";
 import { BackgroundMessageListener } from "./messaging/BackgroundMessageListener";
 import { FindPortListener } from "./messaging/FindPortListener";
 import { VersionUseCase } from "./usecases/VersionUseCase";
-import type { FindRepository } from "./repositories/FindRepository";
-import type { ReadyFrameRepository } from "./repositories/ReadyFrameRepository";
+import { FindRepository } from "./repositories/FindRepository";
+import { ReadyFrameRepository } from "./repositories/ReadyFrameRepository";
 import { SettingsEventUseCase } from "./usecases/SettingsEventUseCase";
-import type { FrameClient } from "./clients/FrameClient";
+import { FrameClient } from "./clients/FrameClient";
 import { AddonEnabledEventUseCase } from "./usecases/AddonEnabledEventUseCase";
-import type { LastSelectedTabRepository } from "./repositories/LastSelectedTabRepository";
+import { LastSelectedTabRepository } from "./repositories/LastSelectedTabRepository";
 import { ModeUseCase } from "./usecases/ModeUseCase";
 import { HintModeUseCase } from "./usecases/HintModeUseCase";
 
@@ -18,15 +18,15 @@ export class Application {
     private readonly backgroundMessageListener: BackgroundMessageListener,
     @inject(VersionUseCase)
     private readonly versionUseCase: VersionUseCase,
-    @inject("FindRepository")
+    @inject(FindRepository)
     private readonly findRepository: FindRepository,
-    @inject("ReadyFrameRepository")
+    @inject(ReadyFrameRepository)
     private readonly frameRepository: ReadyFrameRepository,
-    @inject("LastSelectedTabRepository")
+    @inject(LastSelectedTabRepository)
     private readonly lastSelectedTabRepository: LastSelectedTabRepository,
     @inject(SettingsEventUseCase)
     private readonly settingsEventUseCase: SettingsEventUseCase,
-    @inject("FrameClient")
+    @inject(FrameClient)
     private readonly frameClient: FrameClient,
     @inject(AddonEnabledEventUseCase)
     private readonly addonEnabledEventUseCase: AddonEnabledEventUseCase,

src/background/Application.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 
 export interface AddonEnabledClient {
@@ -7,7 +7,9 @@ export interface AddonEnabledClient {
   disable(tabId: number): Promise<void>;
 }
 
-@injectable()
+export const AddonEnabledClient = Symbol("AddonEnabledClient");
+
+@provide(AddonEnabledClient)
 export class AddonEnabledClientImpl implements AddonEnabledClient {
   async enable(tabId: number): Promise<void> {
     const sender = newSender(tabId);

src/background/clients/AddonEnabledClient.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ConsoleMessageSender";
 
 export interface ConsoleClient {
@@ -13,7 +13,9 @@ export interface ConsoleClient {
   hide(tabId: number): Promise<void>;
 }
 
-@injectable()
+export const ConsoleClient = Symbol("ConsoleClient");
+
+@provide(ConsoleClient)
 export class ConsoleClientImpl implements ConsoleClient {
   async showCommand(tabId: number, command: string): Promise<void> {
     const sender = newSender(tabId);

src/background/clients/ConsoleClient.ts

@@ -1,11 +1,13 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 
 export interface ConsoleFrameClient {
   resize(tabId: number, width: number, height: number): Promise<void>;
 }
 
-@injectable()
+export const ConsoleFrameClient = Symbol("ConsoleFrameClient");
+
+@provide(ConsoleFrameClient)
 export class ConsoleFrameClientImpl implements ConsoleFrameClient {
   async resize(tabId: number, width: number, height: number): Promise<void> {
     const sender = newSender(tabId);

src/background/clients/ConsoleFrameClient.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 
 export interface ContentMessageClient {
@@ -40,7 +40,9 @@ export interface ContentMessageClient {
   focusFirstInput(tabId: number): Promise<void>;
 }
 
-@injectable()
+export const ContentMessageClient = Symbol("ContentMessageClient");
+
+@provide(ContentMessageClient)
 export class ContentMessageClientImpl implements ContentMessageClient {
   async scrollTo(
     tabId: number,

src/background/clients/ContentMessageClient.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 import type { FindQuery } from "../../shared/findQuery";
 
@@ -10,7 +10,9 @@ export interface FindClient {
   clearSelection(tabId: number, frameId: number): Promise<void>;
 }
 
-@injectable()
+export const FindClient = Symbol("FindClient");
+
+@provide(FindClient)
 export class FindClientImpl implements FindClient {
   async findNext(
     tabId: number,

src/background/clients/FindClient.ts

@@ -1,11 +1,13 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 
 export interface FrameClient {
   notifyFrameId(tabId: number, frameId: number): Promise<void>;
 }
 
-@injectable()
+export const FrameClient = Symbol("FrameClient");
+
+@provide(FrameClient)
 export class FrameClientImpl implements FrameClient {
   async notifyFrameId(tabId: number, frameId: number): Promise<void> {
     const sender = newSender(tabId, frameId);

src/background/clients/FrameClient.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 import type { HTMLElementType } from "../../shared/HTMLElementType";
 
@@ -42,7 +42,9 @@ export interface HintClient {
   clickElement(tabId: number, frameId: number, element: string): Promise<void>;
 }
 
-@injectable()
+export const HintClient = Symbol("HintClient");
+
+@provide(HintClient)
 export class HintClientImpl implements HintClient {
   async lookupTargets(
     tabId: number,

src/background/clients/HintClient.ts

@@ -1,12 +1,14 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 import type { Mode } from "../../shared/mode";
 
 export interface ModeClient {
   setMode(tabid: number, mode: Mode): Promise<void>;
 }
 
-@injectable()
+export const ModeClient = Symbol("ModeClient");
+
+@provide(ModeClient)
 export class ModeClientImpl implements ModeClient {
   async setMode(tabId: number, mode: Mode): Promise<void> {
     const sender = newSender(tabId);

src/background/clients/ModeClient.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 
 export interface NavigateClient {
@@ -11,7 +11,9 @@ export interface NavigateClient {
   linkPrev(tabId: number): Promise<void>;
 }
 
-@injectable()
+export const NavigateClient = Symbol("NavigateClient");
+
+@provide(NavigateClient)
 export class NavigateClientImpl implements NavigateClient {
   async historyNext(tabId: number): Promise<void> {
     const sender = newSender(tabId);

src/background/clients/NavigateClient.ts

@@ -1,4 +1,4 @@
-import { injectable } from "inversify";
+import { provide } from "inversify-binding-decorators";
 import { newSender } from "./ContentMessageSender";
 
 export type Rect = {
@@ -17,7 +17,9 @@ export interface TopFrameClient {
   getFramePosition(tabId: number, frameId: number): Promise<Point | undefined>;
 }
 
-@injectable()
+export const TopFrameClient = Symbol("TopFrameClient");
+
+@provide(TopFrameClient)
 export class TopFrameClientImpl implements TopFrameClient {
   getWindowViewport(tabId: number): Promise<Rect> {
     const sender = newSender(tabId, 0);

src/background/clients/TopFrameClient.ts

@@ -8,6 +8,8 @@ export interface CommandRegistry {
   getCommands(): Command[];
 }
 
+export const CommandRegistry = Symbol("CommandRegistry");
+
 export class CommandRegistryImpl implements CommandRegistry {
   private readonly commands: Command[] = [];
   private readonly commandNames: Map<string, Command> = new Map();

src/background/command/CommandRegistry.ts

@@ -11,32 +11,29 @@ import { SetCommand } from "./SetCommand";
 import { TabOpenCommand } from "./TabOpenCommand";
 import { WindowOpenCommand } from "./WindowOpenCommand";
 import { BufferCommandHelper } from "./BufferCommandHelper";
-import type { PropertyRegistry } from "../property/PropertyRegistry";
-import type { PropertySettings } from "../settings/PropertySettings";
-import type { SearchEngineSettings } from "../settings/SearchEngineSettings";
+import { PropertyRegistry } from "../property/PropertyRegistry";
+import { PropertySettings } from "../settings/PropertySettings";
+import { SearchEngineSettings } from "../settings/SearchEngineSettings";
 import { type CommandRegistry, CommandRegistryImpl } from "./CommandRegistry";
-import type { LastSelectedTabRepository } from "../repositories/LastSelectedTabRepository";
-import type { ConsoleClient } from "../clients/ConsoleClient";
+import { LastSelectedTabRepository } from "../repositories/LastSelectedTabRepository";
+import { ConsoleClient } from "../clients/ConsoleClient";
 
 @injectable()
 export class CommandRegistryFactory {
-  private readonly propertyRegistry: PropertyRegistry;
-
   private readonly bufferCommandHelper: BufferCommandHelper;
 
   constructor(
-    @inject("PropertyRegistry")
-    propertyRegistry: PropertyRegistry,
-    @inject("ConsoleClient")
+    @inject(PropertyRegistry)
+    private readonly propertyRegistry: PropertyRegistry,
+    @inject(ConsoleClient)
     private readonly consoleClient: ConsoleClient,
-    @inject("PropertySettings")
+    @inject(PropertySettings)
     private readonly propertySettings: PropertySettings,
-    @inject("SearchEngineSettings")
+    @inject(SearchEngineSettings)
     private readonly searchEngineSettings: SearchEngineSettings,
-    @inject("LastSelectedTabRepository")
+    @inject(LastSelectedTabRepository)
     private readonly lastSelectedTabRepository: LastSelectedTabRepository,
   ) {
-    this.propertyRegistry = propertyRegistry;
     this.bufferCommandHelper = new BufferCommandHelper(
       this.lastSelectedTabRepository,
     );