fix: require hosted config before enabling hosted mode

Author: akira69

src/composables/useHostedMode.ts

@@ -13,7 +13,7 @@ type HostedWindow = Window & {
 
 export const getHostedConfig = () => (window as HostedWindow).__SPOOLMAN_HOSTED__ ?? null;
 
-export const isHostedMode = () => Boolean(getHostedConfig() || new URLSearchParams(window.location.search).get("spoolman_hosted"));
+export const isHostedMode = () => Boolean(getHostedConfig());
 
 export const getHostedTheme = () => {
   const hostedTheme = (window as HostedWindow).__SPOOLMAN_HOSTED_THEME__;

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
 import { createI18n } from "vue-i18n";
-import router from "./router";
+import { createAppRouter } from "./router";
 import App from "./App.vue";
 import "./styles.css";
 import de from "./locales/de.json";
@@ -66,6 +66,7 @@ const bootstrap = async () => {
   });
 
   setupTheme();
+  const router = createAppRouter();
 
   // Hosted mode relies on the Spoolman shell for analytics and server discovery.
   if (import.meta.env.MODE !== "development" && !hostedConfig) {

src/router/index.ts

@@ -5,78 +5,79 @@ import ProjectsView from '@/views/ProjectsView.vue';
 import ProjectDetailView from '@/views/ProjectDetailView.vue';
 import { isHostedMode } from '@/composables/useHostedMode';
 
-const hostedMode = isHostedMode();
 const hostedRoot = '/app/swatch';
 const hostedTitle = 'Filament Swatch';
 const standaloneTitle = 'Spool Swatch';
-const titlePrefix = hostedMode ? hostedTitle : standaloneTitle;
+export const createAppRouter = () => {
+  const hostedMode = isHostedMode();
+  const titlePrefix = hostedMode ? hostedTitle : standaloneTitle;
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    hostedMode
-      ? {
-          path: '/',
-          redirect: hostedRoot,
-        }
-      : {
-          path: '/',
-          name: 'landing',
-          component: LandingPage,
-          meta: {
-            title: `${titlePrefix} - Your 3D Printing Filament Color Browser`
+  const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+      hostedMode
+        ? {
+            path: '/',
+            redirect: hostedRoot,
           }
-        },
-    {
-      path: '/app',
-      component: MainApp,
-      redirect: hostedRoot,
-      children: [
-        {
-          path: 'swatch',
-          name: 'swatch',
-          component: () => import('@/views/FilamentsView.vue'),
-          meta: {
-            title: `${titlePrefix} - Browse Your Collection`
+        : {
+            path: '/',
+            name: 'landing',
+            component: LandingPage,
+            meta: {
+              title: `${titlePrefix} - Your 3D Printing Filament Color Browser`
+            }
+          },
+      {
+        path: '/app',
+        component: MainApp,
+        redirect: hostedRoot,
+        children: [
+          {
+            path: 'swatch',
+            name: 'swatch',
+            component: () => import('@/views/FilamentsView.vue'),
+            meta: {
+              title: `${titlePrefix} - Browse Your Collection`
+            }
+          },
+          {
+            path: 'projects',
+            name: 'projects',
+            component: ProjectsView,
+            meta: {
+              title: `${titlePrefix} - Projects`
+            }
+          },
+          {
+            path: 'projects/:id',
+            name: 'project-detail',
+            component: ProjectDetailView,
+            meta: {
+              title: `${titlePrefix} - Project Details`
+            }
           }
-        },
-        {
-          path: 'projects',
-          name: 'projects',
-          component: ProjectsView,
-          meta: {
-            title: `${titlePrefix} - Projects`
-          }
-        },
-        {
-          path: 'projects/:id',
-          name: 'project-detail',
-          component: ProjectDetailView,
-          meta: {
-            title: `${titlePrefix} - Project Details`
-          }
-        }
-      ]
-    },
-    // Catch-all redirect for unknown routes
-    {
-      path: '/:pathMatch(.*)*',
-      redirect: hostedMode ? hostedRoot : '/'
-    }
-  ],
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition;
-    } else {
-      return { top: 0 };
+        ]
+      },
+      // Catch-all redirect for unknown routes
+      {
+        path: '/:pathMatch(.*)*',
+        redirect: hostedMode ? hostedRoot : '/'
+      }
+    ],
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition;
+      } else {
+        return { top: 0 };
+      }
     }
-  }
-});
+  });
 
-// Update document title on route change
-router.beforeEach((to, from, next) => {
-  document.title = (to.meta.title as string) || titlePrefix;
-  next();
-});
+  router.beforeEach((to, from, next) => {
+    document.title = (to.meta.title as string) || titlePrefix;
+    next();
+  });
 
-export default router;
+  return router;
+};