fix: debugging messaging

package.json

@@ -3,8 +3,11 @@
   "description": "vimmatic",
   "version": "0.0.1",
   "scripts": {
-    "start": "nodemon --watch ./src --ext js,jsx,ts,tsx,css,html,json script/build",
+    "start": "NODE_ENV=development nodemon --watch ./src --ext js,jsx,ts,tsx,css,html,json script/build",
+    "clean": "rm -rf ./dist",
+    "prebuild": "yarn clean",
     "build": "script/build",
+    "prepackage": "yarn build",
     "package": "yarn build && script/package",
     "lint": "eslint --ext .ts,.tsx .",
     "lint:fix": "eslint --ext .ts,.tsx . --fix",

script/build

@@ -10,6 +10,9 @@ const targets = {
 
 const buildScripts = async (browser) => {
   await build({
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    },
     entryPoints: {
       console: "src/console/index.tsx",
       content: "src/content/index.ts",

src/background/Application.ts

@@ -1,6 +1,6 @@
 import { injectable, inject } from "inversify";
-import BackgroundMessageListener from "./infrastructures/BackgroundMessageListener";
-import FindPortListener from "./infrastructures/FindPortListener";
+import BackgroundMessageListener from "./messaging/BackgroundMessageListener";
+import FindPortListener from "./messaging/FindPortListener";
 import VersionUseCase from "./usecases/VersionUseCase";
 import FindRepositoryImpl from "./repositories/FindRepository";
 import ReadyFrameRepository from "./repositories/ReadyFrameRepository";

src/background/clients/ConsoleMessageSender.ts

@@ -5,6 +5,11 @@ type ConsoleMessageSender = Sender<Schema>;
 
 export const newSender = (tabId: number, frameId?: number) => {
   const sender = new Sender<Schema>((type: Key, args: Request) => {
+    if (process.env.NODE_ENV === "development") {
+      const style = "background-color: green; color: white; padding: 4px;";
+      console.debug("%cSEND%c %s %o", style, "", type, args);
+    }
+
     const msg = { type, args: args ?? {} };
     return chrome.tabs.sendMessage(tabId, msg, { frameId });
   });

src/background/clients/ContentMessageSender.ts

@@ -5,6 +5,12 @@ type ContentMessageSender = Sender<Schema>;
 
 export const newSender = (tabId: number, frameId?: number) => {
   const sender = new Sender<Schema>((type: Key, args: Request) => {
+    if (process.env.NODE_ENV === "development") {
+      const style = "background-color: green; color: white; padding: 4px;";
+      const reset = "background-color: unset; color: unset; padding: unset;";
+      console.debug("%cSEND%c %s %o", style, reset, type, args);
+    }
+
     const msg = { type, args: args ?? {} };
     return chrome.tabs.sendMessage(tabId, msg, { frameId });
   });

src/background/controllers/CommandController.ts

@@ -1,7 +1,7 @@
 import { injectable, inject } from "inversify";
 import { Completions } from "../../shared/Completions";
 import CommandUseCase from "../usecases/CommandUseCase";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class CommandController {

src/background/controllers/ConsoleController.ts

@@ -1,6 +1,6 @@
 import { injectable, inject } from "inversify";
 import ConsoleUseCase from "../usecases/ConsoleUseCase";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class ConsoleController {

src/background/controllers/FindController.ts

@@ -1,6 +1,6 @@
 import { injectable, inject } from "inversify";
 import StartFindUseCase from "../usecases/StartFindUseCase";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class FindController {

src/background/controllers/KeyController.ts

@@ -1,5 +1,5 @@
 import { injectable, inject } from "inversify";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 import MarkJumpUseCase from "../usecases/MarkJumpUseCase";
 import MarkSetUseCase from "../usecases/MarkSetUseCase";
 import MarkModeUseCase from "../usecases/MarkModeUseCase";

src/background/controllers/LinkController.ts

@@ -1,6 +1,6 @@
 import { injectable, inject } from "inversify";
 import LinkUseCase from "../usecases/LinkUseCase";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class LinkController {

src/background/controllers/OperationController.ts

@@ -1,6 +1,6 @@
 import { inject, injectable } from "inversify";
 import OperationUseCase from "../usecases/OperationUseCase";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class OperationController {

src/background/controllers/SettingsController.ts

@@ -1,6 +1,6 @@
 import { injectable, inject } from "inversify";
 import SettingsUseCase from "../usecases/SettingsUseCase";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class SettingsController {

src/background/infrastructures/BackgroundMessageListener.ts → src/background/messaging/BackgroundMessageListener.ts

@@ -89,6 +89,10 @@ export default class BackgroundMessageListener {
           return;
         }
 
+        if (process.env.NODE_ENV === "development") {
+          const style = "background-color: purple; color: white; padding: 4px;";
+          console.debug("%cRECEIVE%c %s %o", style, "", type, args);
+        }
         const ret = this.receiver.receive(ctx, type, args);
         Promise.resolve(ret)
           .then(sendResponse)

src/background/repositories/AddonEnabledRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 
 export default interface AddonEnabledRepository {
   enable(): void;

src/background/repositories/FindRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 
 export type FindState = {
   keyword: string;

src/background/repositories/FollowRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 
 export default interface FollowRepository {
   startFollowMode(

src/background/repositories/MarkModeRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 
 export default interface MarkModeRepository {
   enableSetMode(): void;

src/background/repositories/MarkRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 import GlobalMark from "../domains/GlobalMark";
 import LocalMark from "../domains/LocalMark";
 

src/background/repositories/ReadyFrameRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 
 type State = { [tabId: number]: { [frameId: number]: number } };
 

src/background/repositories/RepeatRepository.ts

@@ -1,5 +1,5 @@
 import { injectable } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 import { Operation } from "../../shared/operations2";
 
 export default interface RepeatRepository {

src/background/settings/SettingsRepository.ts

@@ -1,5 +1,5 @@
 import { injectable, inject } from "inversify";
-import MemoryStorage from "../infrastructures/MemoryStorage";
+import MemoryStorage from "../db/MemoryStorage";
 import { defaultSettings, serialize, deserialize } from "../../settings";
 import Settings from "../../shared/Settings";
 import { SerializedSettings } from "../../settings/schema";

src/background/usecases/CommandUseCase.ts

@@ -2,7 +2,7 @@ import { Completions } from "../../shared/Completions";
 import { injectable, inject } from "inversify";
 import CommandRegistry from "../command/CommandRegistry";
 import { parseCommand, onCommandInputting } from "./parser";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 import { CommandContext } from "../command/Command";
 
 @injectable()

src/background/usecases/OperationUseCase.ts

@@ -2,7 +2,7 @@ import { inject, injectable } from "inversify";
 import type { Props, OperatorContext } from "../operators/Operator";
 import OperatorRegistory from "../operators/OperatorRegistory";
 import RepeatRepository from "../repositories/RepeatRepository";
-import RequestContext from "../infrastructures/RequestContext";
+import RequestContext from "../messaging/RequestContext";
 
 @injectable()
 export default class OperationUseCase {

src/content/client/BackgroundMessageSender.ts

@@ -5,6 +5,11 @@ type BackgroundMessageSender = Sender<Schema>;
 
 export const newSender = () => {
   const sender = new Sender<Schema>((type: Key, args: Request) => {
+    if (process.env.NODE_ENV === "development") {
+      const style = "background-color: green; color: white; padding: 4px;";
+      console.debug("%cSEND%c %s %o", style, "", type, args);
+    }
+
     return chrome.runtime.sendMessage({
       type,
       args: args ?? {},

src/content/messaging/ContentMessageListener.ts

@@ -155,6 +155,11 @@ export default class ContentMessageListener {
           return;
         }
 
+        if (process.env.NODE_ENV === "development") {
+          const style = "background-color: purple; color: white; padding: 4px;";
+          console.debug("%cRECEIVE%c %s %o", style, "", type, args);
+        }
+
         const ret = this.receiver.receive(type, args);
         Promise.resolve(ret)
           .then(sendResponse)

test/background/infrastructures/MemoryStorage.test.ts → test/background/db/MemoryStorage.test.ts

@@ -1,4 +1,4 @@
-import MemoryStorage from "../../../src/background/infrastructures/MemoryStorage";
+import MemoryStorage from "../../../src/background/db/MemoryStorage";
 
 describe("MemoryStorage", () => {
   it("stores string value", () => {

test/background/mock/MockConsoleClient.ts

@@ -1,4 +1,4 @@
-import ConsoleClient from "../../../src/background/infrastructures/ConsoleClient";
+import ConsoleClient from "../../../src/background/clients/ConsoleClient";
 
 export default class MockConsoleClient implements ConsoleClient {
   hide(_tabId: number): Promise<any> {