From 90bc0a3684c6e2848a09f469040dd1e62368b9ee Mon Sep 17 00:00:00 2001
From: Matt Sykes <Matthew.Sykes@safelite.com>
Date: Mon, 9 Mar 2026 14:19:18 -0400
Subject: [PATCH] Vue module augmentation and Convert main.js to main.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. Vue module augmentation (src/shims-vue.d.ts)
*Added ComponentCustomProperties so this.$store is typed as Store<RootState> in components.
*Extended Window for $ and jQuery so the jQuery global assignment type-checks.
2. Convert main.js to main.ts
*Renamed main.js to main.ts.
*Removed the vue.config.js entry override so the Vue CLI TypeScript plugin uses main.ts.
*Updated jest.config.js to exclude main.ts from coverage.
*Adjusted the error handler to use unknown for err and vm to match Vue’s types.
*Added as unknown to the jQuery require for type safety.
---
 jest.config.js           |  2 +-
 src/{main.js => main.ts} | 13 +++++++++----
 src/shims-vue.d.ts       | 21 +++++++++++++++++++++
 tsconfig.json            |  2 +-
 vue.config.js            |  4 ----
 5 files changed, 32 insertions(+), 10 deletions(-)
 rename src/{main.js => main.ts} (63%)
 create mode 100644 src/shims-vue.d.ts

diff --git a/jest.config.js b/jest.config.js
index a3d4f28c0..d0657dc47 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -13,7 +13,7 @@ module.exports = {
   moduleFileExtensions: ["js", "ts", "vue"],
   collectCoverageFrom: [
     "src/**/*.{js,ts,vue}",
-    "!src/main.js",
+    "!src/main.ts",
     "!src/constants/*.js",
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",
diff --git a/src/main.js b/src/main.ts
similarity index 63%
rename from src/main.js
rename to src/main.ts
index 5d655db85..199d61418 100644
--- a/src/main.js
+++ b/src/main.ts
@@ -10,8 +10,8 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 import "../node_modules/jquery-ui/dist/jquery-ui.min.js";
 
-// Make jQuery avaialble globally
-window.$ = window.jQuery = require("jquery");
+// Make jQuery available globally
+window.$ = window.jQuery = require("jquery") as unknown;
 
 import Logger from "@/helpers/logger";
 // Instantiate global logging object
@@ -29,9 +29,14 @@ vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);
 
 // Vue Error Handling
-vueApp.config.errorHandler = (err, vm, info) => {
+vueApp.config.errorHandler = (err: unknown, vm: unknown, info: string) => {
+    const error = err instanceof Error ? err : new Error(String(err));
+    const pageName =
+        vm && typeof (vm as { getPageName?: () => string }).getPageName === "function"
+            ? (vm as { getPageName: () => string }).getPageName()
+            : "Unknown";
     global.$logger.logError(
-        `Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`
+        `Page Name - ${pageName} - ${info}: ${error.message}\n${error.stack}`
     );
 };
 
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
new file mode 100644
index 000000000..853ab9f28
--- /dev/null
+++ b/src/shims-vue.d.ts
@@ -0,0 +1,21 @@
+/**
+ * Vue module augmentation for typed $store in components.
+ * Enables this.$store to be typed with RootState in Vue components.
+ */
+import type { Store } from "vuex";
+import type { RootState } from "@/store/types";
+
+declare module "@vue/runtime-core" {
+    interface ComponentCustomProperties {
+        $store: Store<RootState>;
+    }
+}
+
+declare global {
+    interface Window {
+        $: unknown;
+        jQuery: unknown;
+    }
+}
+
+export {};
diff --git a/tsconfig.json b/tsconfig.json
index a6a346ba1..7883750b2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,6 +16,6 @@
       "@/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
   "exclude": ["node_modules", "dist", "playwright-tests"]
 }
diff --git a/vue.config.js b/vue.config.js
index 0d8312076..e1e4690c6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -3,10 +3,6 @@ const { environmentVariablesWithDefaults } = require('./environment-variables.js
 
 module.exports = {
     outputDir: "dist/fmg",
-    chainWebpack: (config) => {
-        // Override Vue CLI TypeScript plugin's main.ts entry for gradual migration
-        config.entry("app").clear().add("./src/main.js");
-    },
     publicPath: "/fmg",
     css: {
         loaderOptions: {