Maintenance: March 24

.github/workflows/push.yml

@@ -7,18 +7,27 @@ jobs:
       run:
         working-directory: Web
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
-      - name: Cache .pnpm-store
-        uses: actions/cache@v1
+          node-version: "20"
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
         with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-node${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6
-      - name: pnpm Build
+          version: 8
+          run_install: false
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install
         run: pnpm install
       - name: Format
         run: pnpm -r format
@@ -34,17 +43,13 @@ jobs:
       run:
         working-directory: Web
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
-      - name: Cache .pnpm-store
-        uses: actions/cache@v1
+          node-version: "20"
+      - uses: pnpm/action-setup@v3
         with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-node${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6
+          version: 8
       - name: pnpm Build
         run: pnpm install
       - name: Build Checker
@@ -65,17 +70,13 @@ jobs:
       run:
         working-directory: Web
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
-      - name: Cache .pnpm-store
-        uses: actions/cache@v1
+          node-version: "20"
+      - uses: pnpm/action-setup@v3
         with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-node${{ matrix.node-version }}-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@6
+          version: 8
       - name: pnpm Build
         run: pnpm install
       - name: Build

Web/package.json

@@ -4,11 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build:extension": "pnpm -r build --filter 'background' --filter 'content' --filter 'popup' --filter 'native-helper'"
+    "build:extension": "pnpm run --recursive --filter 'background' --filter 'content' --filter 'popup' --filter 'native-helper' build"
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "pnpm": "^6.15.1"
-  }
-}
+  "packageManager": "[email protected]+sha256.355a8ab8dbb6ad41befbef39bc4fd6b5df85e12761d2724bd01f13e878de4b13"
+}

Web/packages/background/build.mjs

@@ -0,0 +1,9 @@
+/* eslint-env node */
+import { join } from "path";
+
+import { buildWebExtension, getExtensionRoot } from "webextension-toolkit";
+
+buildWebExtension({
+  entryPoint: "./src/index.ts",
+  outfile: join(getExtensionRoot(), "Resources/background.js"),
+});

Web/packages/background/jest.config.js

@@ -1,5 +1,5 @@
-/*eslint-env node */
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+/* eslint-env node */
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: "ts-jest",
   testEnvironment: "node",

Web/packages/background/package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "node build.js --watch",
-    "build": "node build.js --minify",
+    "dev": "node build.mjs --watch",
+    "build": "node build.mjs --minify",
     "test": "jest",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
@@ -21,12 +21,13 @@
     "ts-assert-unreachable": "^0.0.9"
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
+    "@types/jest": "^29.5.12",
+    "eslint": "^8.57.0",
     "eslint-config-svadilfari": "workspace:^1.0.0",
-    "jest": "^27.2.2",
-    "prettier": "^2.4.1",
-    "ts-jest": "^27.0.5",
-    "typescript": "^4.3.2",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.3.3",
     "webextension-toolkit": "workspace:*",
     "webextension-typedef": "workspace:*"
   }

Web/packages/background/src/background.test.ts

@@ -41,15 +41,16 @@ describe("Background", () => {
             | GestureReleaseMessage
             | ExecuteActionMessage,
           sender: Browser.Runtime.MessageSender,
-          sendResponse: (...response: any[]) => void
-        ) => void
+          sendResponse: (...response: any[]) => void,
+        ) => void,
       ): () => void {
-        sendMockMessage = (msg) =>
+        sendMockMessage = (msg) => {
           handler(
             msg,
             { tab: { id: TAB_ID } } as Browser.Runtime.MessageSender,
-            sendResponseMock
+            sendResponseMock,
           );
+        };
         return () => {
           // noop
         };
@@ -64,37 +65,7 @@ describe("Background", () => {
       executeAction: executeAction,
     });
   });
-  test("GetGestureRequest", () => {
-    const msg: GetGestureRequestMessage = { _tag: "GET_GESTURE_REQUEST" };
-    sendMockMessage(msg);
-    expect(sendMessageToNative).toHaveBeenLastCalledWith(
-      Convert.messageRequestToJson({ getGestures: true })
-    );
-  });
-  test("AddExclusionEntryRequest", () => {
-    const msg: AddExclusionEntryRequestMessage = {
-      _tag: "ADD_EXCLUSION_ENTRY_REQUEST",
-      domain: "example.com",
-    };
-    sendMockMessage(msg);
-    expect(sendMessageToNative).toHaveBeenLastCalledWith(
-      Convert.messageRequestToJson({
-        addExclusionEntry: { domain: "example.com" },
-      })
-    );
-  });
-  test("RemoveExclusionEntryRequest", () => {
-    const msg: RemoveExclusionEntryRequestMessage = {
-      _tag: "REMOVE_EXCLUSION_ENTRY_REQUEST",
-      id: "entry-id",
-    };
-    sendMockMessage(msg);
-    expect(sendMessageToNative).toHaveBeenLastCalledWith(
-      Convert.messageRequestToJson({
-        removeExclusionEntry: { id: "entry-id" },
-      })
-    );
-  });
+
   // TODO: Figure out a way to mock browser.tabs.getCurrent and add test for GetExclusionEntryRequest
   test("GestureChangeMessage", () => {
     const msg: GestureChangeMessage = {
@@ -120,7 +91,7 @@ describe("Background", () => {
     sendMockMessage(msg);
     expect(executeAction).toHaveBeenLastCalledWith(
       msg.action,
-      expect.anything()
+      expect.anything(),
     );
   });
 });

Web/packages/background/src/background.ts

@@ -31,10 +31,10 @@ export function startBackground({
      */
     async function handleMessageToNative(
       msgReq: MessageRequest,
-      decode: (rawResponse: string) => unknown = id
-    ) {
+      decode: (rawResponse: string) => unknown = id,
+    ): Promise<void> {
       const rawResponse = await channel.sendNativeMessage(
-        Convert.messageRequestToJson(msgReq)
+        Convert.messageRequestToJson(msgReq),
       );
       const response = decode(rawResponse);
       sendResponse(response);
@@ -72,7 +72,7 @@ export function startBackground({
               path: msg.path,
             },
           },
-          (rawResponse) => Convert.toGetExclusionEntryResponse(rawResponse)
+          (rawResponse) => Convert.toGetExclusionEntryResponse(rawResponse),
         );
         break;
       }
@@ -93,7 +93,7 @@ export function startBackground({
                   path: currentTabEntry.path,
                 },
               },
-              (rawResponse) => Convert.toGetExclusionEntryResponse(rawResponse)
+              (rawResponse) => Convert.toGetExclusionEntryResponse(rawResponse),
             );
           })
           .catch(() => {
@@ -103,7 +103,7 @@ export function startBackground({
       }
       case "GET_GESTURE_REQUEST": {
         handleMessageToNative({ getGestures: true }, (rawResponse) =>
-          Convert.toGetGestureResponse(rawResponse)
+          Convert.toGetGestureResponse(rawResponse),
         );
         break;
       }

Web/packages/background/src/channel.ts

@@ -7,7 +7,7 @@ export interface Channel {
   sendMessage(
     tabId: number,
     message: any,
-    options?: Browser.Tabs.SendMessageOptionsType
+    options?: Browser.Tabs.SendMessageOptionsType,
   ): Promise<any>;
 }
 
@@ -19,7 +19,7 @@ export class ChannelImpl implements Channel {
   sendMessage(
     tabId: number,
     message: any,
-    options?: Browser.Tabs.SendMessageOptionsType
+    options?: Browser.Tabs.SendMessageOptionsType,
   ): Promise<any> {
     console.log("send message", tabId, message);
     return browser.tabs.sendMessage(tabId, message, options);

Web/packages/background/src/executeAction.ts

@@ -6,12 +6,12 @@ import { findNext, findPrevious } from "./utils/find";
 
 export type ExecuteAction = (
   action: Action,
-  sender: Browser.Runtime.MessageSender
+  sender: Browser.Runtime.MessageSender,
 ) => Promise<void>;
 
 export async function executeAction(
   action: Action,
-  sender: Browser.Runtime.MessageSender
+  sender: Browser.Runtime.MessageSender,
 ): Promise<void> {
   const code = getActionCode(action);
   switch (code) {

Web/packages/background/src/messenger.ts

@@ -23,8 +23,8 @@ export class BackgroundMessengerImpl implements BackgroundMessenger {
         | ExecuteActionMessage,
       sender: Browser.Runtime.MessageSender,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      sendResponse: (...response: any[]) => void
-    ) => void
+      sendResponse: (...response: any[]) => void,
+    ) => void,
   ): () => void {
     browser.runtime.onMessage.addListener(handler);
     return () => {

Web/packages/check/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: "svadilfari",
+  extends: ["svadilfari", "plugin:storybook/recommended"],
   parserOptions: {
     project: "./tsconfig.json",
   },

Web/packages/check/.storybook/main.js

@@ -1,19 +1,8 @@
-const path = require("path");
-
-const toPath = (_path) => path.join(process.cwd(), _path);
-
 module.exports = {
-  core: {
-    builder: "webpack5",
-  },
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
-  webpackFinal: async (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@emotion/core": toPath("node_modules/@emotion/react"),
-      "emotion-theming": toPath("node_modules/@emotion/react"),
-    };
-    return config;
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
   },
 };

Web/packages/check/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

Web/packages/check/index.js

@@ -20,7 +20,7 @@ addEventListener("fetch", (event) => {
       return event.respondWith(
         new Response(e.message || e.toString(), {
           status: 500,
-        })
+        }),
       );
     }
     event.respondWith(new Response("Internal Error", { status: 500 }));