fix(router): fix routing

Author: dvcol

package.json

@@ -31,10 +31,10 @@
     "dist": "pnpm run clear && esno scripts/prepare.ts",
     "serve": "vite",
     "serve:static": "http-server dist --cors",
-    "serve:web": "run-p build:web serve:static",
+    "serve:web": "VITE_SOURCEMAP=true VITE_WEB=true run-p build serve:static",
     "dev": "cross-env NODE_ENV=development run-p dist serve",
     "build": "cross-env NODE_ENV=production pnpm run dist && vue-tsc --noEmit && vite build",
-    "build:web": "VITE_WEB=true pnpm run build",
+    "build:web": "VITE_WEB=true VITE_BASE=/trakt-extension/ pnpm run build",
     "test:unit": "vitest run --environment jsdom --coverage",
     "test:watch": "vitest --environment jsdom",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",

src/components/AppView.vue

@@ -2,11 +2,13 @@
 import { RouterLink, RouterView } from 'vue-router';
 
 import HelloWorld from '~/components/HelloWorld.vue';
+import { useRouterStore } from '~/stores/router.store';
 import { useI18n } from '~/utils';
 
 const test = 'test Value';
 
 const i18n = useI18n('global');
+const { baseName } = useRouterStore();
 </script>
 
 <template>
@@ -21,8 +23,8 @@ const i18n = useI18n('global');
             <HelloWorld :msg="test" />
 
             <nav>
-              <RouterLink to="/">Home</RouterLink>
-              <RouterLink to="/about">About</RouterLink>
+              <RouterLink :to="`${baseName}/`">Home</RouterLink>
+              <RouterLink :to="`${baseName}/about`">About</RouterLink>
             </nav>
           </div>
         </header>

src/main.ts

@@ -1,3 +1,3 @@
 import { defineComponent } from '~/views/web';
 
-defineComponent();
+defineComponent({ baseUrl: import.meta.env.VITE_BASE });

src/router/index.ts

@@ -1,18 +1,13 @@
 import { createRouter as createVueRouter, createWebHashHistory } from 'vue-router';
 
-export const createRouter = (basename: string = import.meta.env.BASE_URL) =>
-  createVueRouter({
-    history: createWebHashHistory(basename),
-    routes: [
-      {
-        path: '/',
-        name: 'home',
-        component: () => import('../components/HomeView.vue'),
-      },
-      {
-        path: '/about',
-        name: 'about',
-        component: () => import('../components/AboutView.vue'),
-      },
-    ],
+import { routes } from '~/router/routes';
+import { useRouterStore } from '~/stores/router.store';
+
+export type RouterOptions = { baseName?: string; baseUrl?: string };
+export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL }: RouterOptions) => {
+  useRouterStore().setBaseName(baseName);
+  return createVueRouter({
+    history: createWebHashHistory(baseUrl),
+    routes: routes.map(r => ({ ...r, path: `${baseName}${r.path}` })),
   });
+};

src/router/routes.ts

@@ -0,0 +1,14 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: `/`,
+    name: 'home',
+    component: () => import('../components/HomeView.vue'),
+  },
+  {
+    path: `/about`,
+    name: 'about',
+    component: () => import('../components/AboutView.vue'),
+  },
+];

src/stores/router.store.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useRouterStore = defineStore('router', () => {
+  const baseName = ref('');
+  const setBaseName = (name: string) => {
+    baseName.value = name;
+  };
+
+  return { baseName, setBaseName };
+});

src/views/common/init-vue-app.ts

@@ -6,6 +6,8 @@ import { createVuetify } from 'vuetify';
 
 import type { App, Component } from 'vue';
 
+import type { RouterOptions } from '~/router';
+
 import AppView from '~/components/AppView.vue';
 import { createRouter } from '~/router';
 
@@ -14,19 +16,21 @@ import { isDarkTheme } from '~/utils';
 import 'vuetify/styles';
 import '~/styles/base.css';
 
-export type InitVueAppOption = { basename?: string };
-export const initVueApp = (component: Component = AppView, { basename }: InitVueAppOption = {}) => {
+export type InitVueAppOption = RouterOptions;
+export const initVueApp = (component: Component = AppView, options: InitVueAppOption = {}) => {
   const app = createApp(component);
+
   const pinia = createPinia();
+  app.use(pinia);
+
   const vuetify = createVuetify({
     theme: {
       defaultTheme: isDarkTheme() ? 'dark' : 'light',
     },
   });
-  const router = createRouter(basename);
-
-  app.use(pinia);
   app.use(vuetify);
+
+  const router = createRouter(options);
   app.use(router);
 
   return app;

src/views/web/define-component.ts

@@ -1,14 +1,14 @@
 import AppWeb from '~/components/web/AppWeb.ce.vue';
-
 import { createElementInstance } from '~/views/common';
 
 export enum WebComponents {
   TraktExtension = 'wc-trakt-extension',
 }
 
-export type DefineComponent = (component?: WebComponents) => void;
+export type DefineOption = { baseName?: string; baseUrl?: string };
+export type DefineComponent = (options?: DefineOption, component?: WebComponents) => void;
 
-export function defineComponent(options: { basename?: string } = {}, component: WebComponents = WebComponents.TraktExtension): void {
+export function defineComponent(options: DefineOption = {}, component: WebComponents = WebComponents.TraktExtension): void {
   if (customElements.get(component)) {
     console.warn(`Custom element '${component}' is already defined.`);
   } else {

vite.config.ts

@@ -11,6 +11,7 @@ import { isDev, port, resolveParent } from './scripts/utils';
 import type { InputOption } from 'rollup';
 
 const isWeb = !!process.env.VITE_WEB;
+const sourcemap = !!process.env.VITE_SOURCEMAP;
 
 const getInput = (hmr: boolean): InputOption => {
   if (hmr) return { background: resolveParent('src/scripts/background/index.ts') };
@@ -69,7 +70,7 @@ export default defineConfig(({ command }) => ({
   },
   build: {
     outDir: resolveParent('dist'),
-    sourcemap: isDev ? 'inline' : false,
+    sourcemap: isDev || sourcemap ? 'inline' : false,
     rollupOptions: {
       input: getInput(isDev),
       output: {