Migrate to WXT

aklinker1 · aklinker1 · commit d702c0762e1a · 2025-02-12T01:50:50.000-06:00
diff --git a/.github/workflows/submit.yml b/.github/workflows/submit.yml
diff --git a/.gitignore b/.gitignore
@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-.output
+dist
 artifacts
 *.local
 coverage
diff --git a/.prettierignore b/.prettierignore
@@ -3,6 +3,6 @@ dist-*
 artifacts
 coverage
 .wxt
-.output
+dist
 coverage
 *.lock
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -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"
diff --git a/src/components/CommitDiff.ts b/src/components/CommitDiff.ts
@@ -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)"),
diff --git a/src/components/CompareDiff.ts b/src/components/CompareDiff.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],
diff --git a/src/components/CustomListItem.vue b/src/components/CustomListItem.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { i18n } from "@/utils/i18n";
+
 defineProps<{
   value: string;
 }>();
diff --git a/src/components/CustomListsPref.vue b/src/components/CustomListsPref.vue
@@ -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 });
 
diff --git a/src/components/OptionsForm.vue b/src/components/OptionsForm.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;
diff --git a/src/components/PrDiff.ts b/src/components/PrDiff.ts
@@ -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"),
diff --git a/src/components/ShowGeneratedCountPref.vue b/src/components/ShowGeneratedCountPref.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { i18n } from "@/utils/i18n";
+
 const hideLineCount = defineModel<boolean>("hideGeneratedLineCount", {
   required: true,
 });
diff --git a/src/components/TokenPref.vue b/src/components/TokenPref.vue
@@ -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,
diff --git a/src/components/createDiffComponent.ts b/src/components/createDiffComponent.ts
@@ -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;
diff --git a/src/composables/useForm.ts b/src/composables/useForm.ts
@@ -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,
diff --git a/src/composables/useGithubUserQuery.ts b/src/composables/useGithubUserQuery.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();
diff --git a/src/utils/cache/createKeyValueCache.ts b/src/utils/cache/createKeyValueCache.ts
@@ -1,3 +1,4 @@
+import { storage } from "@wxt-dev/storage";
 import { Mutex } from "async-mutex";
 
 interface CachedValue<TValue> {
diff --git a/src/utils/github/api.ts b/src/utils/github/api.ts
@@ -7,6 +7,8 @@ import type {
   PullRequest,
   User,
 } from "./types";
+import { githubPatStorage } from "../storage";
+import { logger } from "../logger";
 
 export function createGithubApi() {
   /**
diff --git a/src/utils/github/service.ts b/src/utils/github/service.ts
@@ -3,6 +3,10 @@ import type { GithubApi } from "./api";
 import type { DiffEntry } from "./types";
 import { minimatch } from "minimatch";
 import { GitAttributes } from "../gitattributes";
+import { logger } from "../logger";
+import { customListsStorage } from "../storage";
+import { commitHashDiffsCache } from "../global-cache";
+import { HOUR } from "../time";
 
 export const [registerGithubService, getGithubService] = defineProxyService(
   "GithubService",
diff --git a/src/utils/replaceCount.ts b/src/utils/replaceCount.ts
@@ -1,5 +1,7 @@
+import { DIFF_COMPONENT_ID } from "./constants";
 import { getGithubService } from "./github";
 import type { RecalculateOptions, RecalculateResult } from "./github";
+import { logger } from "./logger";
 
 /**
  * Calculate and add the generated count to the page.
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
@@ -1,3 +1,5 @@
+import { storage } from "@wxt-dev/storage";
+
 export interface CustomLists {
   all: string;
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,9 +1,21 @@
 {
-  "extends": "./.wxt/tsconfig.json",
   "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
     "lib": ["ESNext", "DOM"],
     "isolatedModules": true,
-    "types": ["bun", "unplugin-icons/types/vue"],
-    "verbatimModuleSyntax": true
+    "types": ["bun", "unplugin-icons/types/vue", "@types/chrome"],
+    "verbatimModuleSyntax": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["./src/*"]
+    }
   }
 }
diff --git a/wxt.config.ts b/wxt.config.ts
