chore: Migrate to CRXJS completed

Author: aklinker1

.github/workflows/submit.yml

@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-.output
+dist
 artifacts
 *.local
 coverage

.gitignore

@@ -3,6 +3,6 @@ dist-*
 artifacts
 coverage
 .wxt
-.output
+dist
 coverage
 *.lock

.prettierignore

@@ -0,0 +1,22 @@
+{
+  "name": "__MSG_name__",
+  "description": "__MSG_description__",
+  "version": "1.7.1",
+  "manifest_version": 3,
+  "default_locale": "en",
+  "permissions": ["storage"],
+  "options_ui": {
+    "page": "src/options.html",
+    "open_in_tab": false
+  },
+  "background": {
+    "service_worker": "src/background.ts",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*.github.com/*"],
+      "js": ["src/content.ts"]
+    }
+  ]
+}

bun.lock

@@ -6,38 +6,34 @@
   "type": "module",
   "scripts": {
     "check": "check",
-    "dev": "wxt",
-    "dev:firefox": "wxt --browser firefox",
-    "build": "wxt build",
-    "build:firefox": "wxt build --browser firefox",
+    "dev": "vite",
+    "build": "vite build",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "zip": "wxt zip",
-    "zip:firefox": "wxt zip -b firefox",
-    "prepare": "simple-git-hooks",
-    "postinstall": "wxt prepare"
+    "prepare": "simple-git-hooks"
   },
   "dependencies": {
     "@aklinker1/check": "^1.4.5",
     "@tanstack/vue-query": "^5.59.13",
     "@webext-core/messaging": "^2.0.2",
     "@webext-core/proxy-service": "^1.2.0",
+    "@wxt-dev/storage": "^1.1.0",
     "async-mutex": "^0.5.0",
     "fast-deep-equal": "^3.1.3",
     "minimatch": "^10.0.1",
     "ofetch": "^1.4.1"
   },
   "devDependencies": {
     "@aklinker1/generate-changelog": "^1.1.2",
+    "@crxjs/vite-plugin": "^2.0.0-beta.31",
     "@iconify/json": "^2.2.261",
     "@tailwindcss/vite": "^4.0.6",
     "@types/bun": "^1.1.11",
-    "@types/chrome": "^0.0.278",
+    "@types/chrome": "^0.0.304",
     "@types/jsdom": "^21.1.7",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.3",
-    "@wxt-dev/auto-icons": "^1.0.2",
     "@wxt-dev/i18n": "^0.2.1",
-    "@wxt-dev/module-vue": "^1.0.1",
     "daisyui": "^5.0.0-beta.7",
     "env-cmd": "^10.1.0",
     "fast-glob": "^3.3.2",
@@ -49,10 +45,10 @@
     "tailwindcss": "^4.0.6",
     "typescript": "^5.6.3",
     "unplugin-icons": "^0.19.3",
+    "vite": "6.0.8",
     "vitest": "^2.1.3",
     "vue": "^3.5.12",
-    "vue-tsc": "^2.1.6",
-    "wxt": "^0.19.11"
+    "vue-tsc": "^2.1.6"
   },
   "simple-git-hooks": {
     "pre-commit": "bun lint-staged"

manifest.json

@@ -0,0 +1,10 @@
+import { registerGithubService, createGithubApi } from "@/utils/github";
+
+const api = createGithubApi();
+registerGithubService(api);
+
+chrome.runtime.onInstalled.addListener(async ({ reason }) => {
+  if (reason === "install") {
+    void chrome.runtime.openOptionsPage();
+  }
+});

package.json

@@ -1,3 +1,6 @@
+import { i18n } from "@/utils/i18n";
+import { createDiffComponent } from "./createDiffComponent";
+
 export const CommitDiff = createDiffComponent({
   getAdditionsElement: () =>
     document.querySelector<HTMLElement>("#toc>*>strong:nth-child(2)"),

src/background.ts

@@ -1,3 +1,6 @@
+import { i18n } from "@/utils/i18n";
+import { createDiffComponent } from "./createDiffComponent";
+
 export const CompareDiff = createDiffComponent({
   getAdditionsElement: () =>
     document.querySelectorAll<HTMLElement>(".toc-diff-stats>strong")[0],

src/components/CommitDiff.ts

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { i18n } from "@/utils/i18n";
+
 defineProps<{
   value: string;
 }>();

src/components/CompareDiff.ts

@@ -2,6 +2,7 @@
 import { computed } from "vue";
 import type { CustomLists } from "@/utils/storage";
 import CustomListItem from "./CustomListItem.vue";
+import { i18n } from "@/utils/i18n";
 
 const customLists = defineModel<CustomLists>("customLists", { required: true });
 

src/components/CustomListItem.vue

@@ -8,6 +8,9 @@ import {
   githubPatStorage,
   customListsStorage,
 } from "@/utils/storage";
+import { useForm } from "@/composables/useForm";
+import { commitHashDiffsCache } from "@/utils/global-cache";
+import { i18n } from "@/utils/i18n";
 
 const { state, hasChanges, reset, saveChanges } = useForm<{
   hideGeneratedLineCount: boolean;

src/components/CustomListsPref.vue

@@ -1,3 +1,6 @@
+import { i18n } from "@/utils/i18n";
+import { createDiffComponent } from "./createDiffComponent";
+
 export const PrDiff = createDiffComponent({
   getAdditionsElement: () =>
     document.querySelector<HTMLElement>("#diffstat .color-fg-success"),

src/components/OptionsForm.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { i18n } from "@/utils/i18n";
+
 const hideLineCount = defineModel<boolean>("hideGeneratedLineCount", {
   required: true,
 });

src/components/PrDiff.ts

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import IMdiEye from "~icons/mdi/eye";
 import IMdiEyeOffOutline from "~icons/mdi/eye-off-outline";
+import { ref } from "vue";
+import { i18n } from "@/utils/i18n";
+import useGithubUserQuery from "@/composables/useGithubUserQuery";
 
 const token = defineModel<string>("githubPat", {
   required: true,

src/components/ShowGeneratedCountPref.vue

@@ -1,4 +1,9 @@
+import { DIFF_COMPONENT_ID, GREY_COLOR } from "@/utils/constants";
 import type { RecalculateResult } from "@/utils/github";
+import { hideGeneratedLineCountStorage } from "@/utils/storage";
+import { Spinner } from "./Spinner";
+import { i18n } from "@/utils/i18n";
+import { logger } from "@/utils/logger";
 
 export function createDiffComponent(options: {
   getAdditionsElement: () => HTMLElement | null | undefined;

src/components/TokenPref.vue

@@ -1,4 +1,5 @@
 import isDeepEqual from "fast-deep-equal";
+import { computed, reactive } from "vue";
 
 export function useForm<T extends Record<string, any>>(
   initialState: T,

src/components/createDiffComponent.ts

@@ -1,4 +1,6 @@
 import { getGithubService, Github } from "@/utils/github";
+import { QueryKeys } from "@/utils/QueryKeys";
+import { useQuery } from "@tanstack/vue-query";
 
 export default function (token: { value: string | undefined }) {
   const github = getGithubService();

src/composables/useForm.ts

@@ -0,0 +1,38 @@
+import { CommitDiff } from "./components/CommitDiff";
+import { CompareDiff } from "./components/CompareDiff";
+import { PrDiff } from "./components/PrDiff";
+import { getCurrentCompare } from "./utils/getCurrentCompare";
+import { getCurrentOwner } from "./utils/getCurrentOwner";
+import { getCurrentPr } from "./utils/getCurrentPr";
+import { getCurrentRef } from "./utils/getCurrentRef";
+import { getCurrentRepo } from "./utils/getCurrentRepo";
+import { replaceCount } from "./utils/replaceCount";
+import { SECOND } from "./utils/time";
+
+main();
+// TODO: schedule next interval for 1 second AFTER the main function finishes. If the main
+// function takes more than 1 second, it might cause problems.
+setInterval(main, SECOND);
+
+function main() {
+  const repo = getCurrentRepo();
+  const owner = getCurrentOwner();
+  if (!repo || !owner) return;
+
+  const pr = getCurrentPr();
+  if (pr) return replaceCount({ type: "pr", repo, owner, pr }, PrDiff);
+
+  const commitHash = getCurrentRef();
+  if (commitHash)
+    return replaceCount(
+      { type: "commit", repo, owner, ref: commitHash },
+      CommitDiff,
+    );
+
+  const commitRefs = getCurrentCompare();
+  if (commitRefs)
+    return replaceCount(
+      { type: "compare", repo, owner, commitRefs },
+      CompareDiff,
+    );
+}

src/composables/useGithubUserQuery.ts

@@ -4,9 +4,8 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="./main.ts" type="module"></script>
+    <script src="./options.ts" type="module"></script>
     <link rel="stylesheet" href="~/assets/tailwind.css" />
-    <meta name="manifest.open_in_tab" content="false" />
   </head>
   <body class="p-4 gap-4 flex flex-col"></body>
 </html>

src/content.ts

@@ -1,5 +1,7 @@
 import Options from "@/pages/Options.vue";
 import { VueQueryPlugin } from "@tanstack/vue-query";
+import { i18n } from "./utils/i18n";
+import { createApp } from "vue";
 
 document.title = i18n.t("options.title");
 

src/entrypoints/background.ts

@@ -1,3 +1,4 @@
+import { storage } from "@wxt-dev/storage";
 import { Mutex } from "async-mutex";
 
 interface CachedValue<TValue> {