fix(web): ensure only one instance of globals are used & fix router

Author: dvcol

src/router/create-router.ts

@@ -18,16 +18,17 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
   setBaseUrl(baseUrl);
 
   const _routes = routes.map(r => ({ ...r, path: `${baseName}${r.path}` }));
+  const _routesWithBase = [
+    {
+      path: `${baseName}/:pathMatch(.*)`,
+      redirect: { name: Route.Calendar },
+    },
+    ..._routes,
+  ];
 
   const router = createVueRouter({
     history: createWebHashHistory(baseUrl),
-    routes: [
-      {
-        path: `${baseName}/:pathMatch(.*)`,
-        redirect: { name: Route.Calendar },
-      },
-      ..._routes,
-    ],
+    routes: _routesWithBase,
   });
 
   const { waitAppReady } = useAppStateStoreRefs();
@@ -63,7 +64,8 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
   });
 
   restoreLastRoute().then(async _route => {
-    await router.push(_route?.name !== Route.Login ? _route : { name: Route.Calendar });
+    const isNotLogin = _route?.name && _route?.name !== Route.Login;
+    await router.push(isNotLogin ? _route : { name: Route.Calendar });
   });
 
   return router;

src/stores/data/activity.store.ts

@@ -4,6 +4,8 @@ import { ref, watch } from 'vue';
 
 import type { TraktSyncActivities } from '~/models/trakt/trakt-sync.model';
 
+import type { RecursiveType } from '~/utils/typescript.utils';
+
 import { NotificationService } from '~/services/notification.service';
 import { TraktService } from '~/services/trakt.service';
 import { logger } from '~/stores/settings/log.store';
@@ -47,7 +49,8 @@ export const useActivityStore = defineStore('data.activity', () => {
     await restoreState();
 
     watch(activity, (next, prev) => {
-      const changed = compareDateObject(toDateObject(prev), toDateObject(next));
+      if (!prev) return;
+      const changed: RecursiveType<RecursiveType<TraktSyncActivities, Date>, boolean> = compareDateObject(toDateObject(prev), toDateObject(next));
 
       if (changed?.episodes?.watched_at || changed?.shows?.hidden_at || changed?.seasons?.hidden_at) {
         TraktService.evict.progress.show();

src/web/init-vue-app.ts

@@ -1,6 +1,6 @@
 import { createPinia } from 'pinia';
 
-import { createApp } from 'vue';
+import { createApp, getCurrentInstance } from 'vue';
 
 import type { App, Component } from 'vue';
 
@@ -13,10 +13,13 @@ export type InitVueAppOption = RouterOptions;
 export const initVueApp = (component: Component, options: InitVueAppOption = {}) => {
   const app = createApp(component);
 
-  const pinia = createPinia();
+  // check if an instance already exist, if not, create one
+  let pinia = getCurrentInstance()?.appContext?.config?.globalProperties?.$pinia;
+  if (!pinia) pinia = createPinia();
   app.use(pinia);
 
-  const router = createRouter(options);
+  let router = getCurrentInstance()?.appContext?.config?.globalProperties?.$router;
+  if (!router) router = createRouter(options);
   app.use(router);
 
   initServices().then(() => console.info('Services initialized.'));