Migrate to WXT

This reverts commit 006763e.

.github/workflows/submit.yml

@@ -0,0 +1,91 @@
+name: Submit for Review
+on:
+  workflow_dispatch:
+    inputs:
+      dryRun:
+        default: false
+        type: boolean
+        description: Skip submission and perform a dry run
+
+jobs:
+  validate:
+    name: Validate
+    uses: ./.github/workflows/validate.yml
+    secrets: inherit
+
+  submit:
+    name: Submit
+    runs-on: ubuntu-22.04
+    needs: [validate]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: oven-sh/setup-bun@v2
+
+      - name: Configure Git
+        run: |
+          git config user.email "github-actions@users.noreply.github.com"
+          git config user.name "GitHub Actions"
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Bump Version
+        id: version
+        run: |
+          bunx changelogen@latest --bump
+          NEW_VERSION=$(bun --print 'require("./package.json").version')
+          echo "newVersion=$NEW_VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Build and Zip
+        run: |
+          bun run zip
+          bun run zip:firefox
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          path: .output/*.zip
+          if-no-files-found: error
+          include-hidden-files: true
+
+      - name: Submit
+        run: |
+          bun wxt submit \
+            --chrome-zip .output/*-chrome.zip \
+            --firefox-zip .output/*-firefox.zip --firefox-sources-zip .output/*-sources.zip
+        env:
+          DRY_RUN: ${{ inputs.dryRun }}
+          CHROME_EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
+          CHROME_CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
+          CHROME_CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
+          CHROME_REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+          FIREFOX_EXTENSION_ID: ${{ secrets.FIREFOX_EXTENSION_ID }}
+          FIREFOX_JWT_ISSUER: ${{ secrets.FIREFOX_JWT_ISSUER }}
+          FIREFOX_JWT_SECRET: ${{ secrets.FIREFOX_JWT_SECRET }}
+          EDGE_PRODUCT_ID: ${{ secrets.EDGE_PRODUCT_ID }}
+          EDGE_CLIENT_ID: ${{ secrets.EDGE_CLIENT_ID }}
+          EDGE_CLIENT_SECRET: ${{ secrets.EDGE_CLIENT_SECRET }}
+          EDGE_ACCESS_TOKEN_URL: ${{ secrets.EDGE_ACCESS_TOKEN_URL }}
+
+      - name: Commit and Push
+        if: ${{ !inputs.dryRun }}
+        run: |
+          git add package.json CHANGELOG.md
+          git commit -am "chore(release): v$NEW_VERSION"
+          git tag v$NEW_VERSION
+          git push
+          git push --tags
+        env:
+          NEW_VERSION: ${{ steps.version.outputs.newVersion }}
+
+      - name: Release
+        if: ${{ !inputs.dryRun }}
+        run: pnpx changelogen@latest gh release ${{ steps.version.outputs.newVersion }} --token ${{ github.token }}
+
+      # Don't upload sources zip - it can contain .env files, which may include secrets
+      - name: Upload ZIPs
+        if: ${{ !inputs.dryRun }}
+        run: gh release upload ${{ steps.version.outputs.newVersion }} .output/*-chrome.zip .output/*-firefox.zip

.gitignore

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

.prettierignore

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

package.json

@@ -6,34 +6,38 @@
   "type": "module",
   "scripts": {
     "check": "check",
-    "dev": "vite",
-    "build": "vite build",
+    "dev": "wxt",
+    "dev:firefox": "wxt --browser firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build --browser firefox",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "prepare": "simple-git-hooks"
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "prepare": "simple-git-hooks",
+    "postinstall": "wxt prepare"
   },
   "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.304",
+    "@types/chrome": "^0.0.278",
     "@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",
@@ -45,10 +49,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"
+    "vue-tsc": "^2.1.6",
+    "wxt": "^0.19.11"
   },
   "simple-git-hooks": {
     "pre-commit": "bun lint-staged"

src/components/CommitDiff.ts

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

src/components/CompareDiff.ts

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

src/components/CustomListItem.vue

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

src/components/CustomListsPref.vue

@@ -2,7 +2,6 @@
 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/OptionsForm.vue

@@ -8,9 +8,6 @@ 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/PrDiff.ts

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

src/components/ShowGeneratedCountPref.vue

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

src/components/TokenPref.vue

@@ -1,9 +1,6 @@
 <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/createDiffComponent.ts

@@ -1,9 +1,4 @@
-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/composables/useForm.ts

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

src/composables/useGithubUserQuery.ts

@@ -1,6 +1,4 @@
 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/entrypoints/background.ts

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

src/entrypoints/content.ts

@@ -0,0 +1,34 @@
+export default defineContentScript({
+  matches: ["*://*.github.com/*"],
+  runAt: "document_end",
+
+  main() {
+    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/options.html → src/entrypoints/options/index.html

@@ -4,8 +4,9 @@
     <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="./options.ts" type="module"></script>
+    <script src="./main.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/options.ts → src/entrypoints/options/main.ts

@@ -1,7 +1,5 @@
 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/utils/cache/createKeyValueCache.ts

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