fix: replace _services with app in iframe router

Author: scriptcoded

.env.example

@@ -4,5 +4,5 @@ NITRO_PUBLIC_TOLGEE_API_URL=https://j26-tolgee.nihlen.dev
 NITRO_PUBLIC_TOLGEE_API_KEY=<replace-with-your-personal-access-token>
 NITRO_PUBLIC_TOLGEE_PROJECT_ID=2
 
-NITRO_PUBLIC_APP_CONFIGS=/app-config.json,/dummy-page/app-config.json,/another-config.json
+NITRO_PUBLIC_APP_CONFIGS=/app-config.json,/another-config.json,/_services/booking/api/app-config.json
 NITRO_PUBLIC_BOTTOM_NAV_ITEMS=page_my_schedule,page_all_activities,page_map,page_more

public/dummy-page/activities.html public/_services/booking/activities.htmlpublic/dummy-page/activities.html renamed to public/_services/booking/activities.html

@@ -10,14 +10,14 @@
           "id": "page_all_activities",
           "label": "booking.all_activities.label",
           "icon": "campfire",
-          "path": "./activities.html"
+          "path": "../activities.html"
         },
         {
           "type": "page",
           "id": "page_my_schedule",
           "label": "booking.my_schedule.label",
           "icon": "calendar-event",
-          "path": "./my.html"
+          "path": "../my.html"
         }
       ]
     }

public/dummy-page/app-config.json …ic/_services/booking/api/app-config.jsonpublic/dummy-page/app-config.json renamed to public/_services/booking/api/app-config.json public/dummy-page/app-config.json renamed to public/_services/booking/api/app-config.json

@@ -2,12 +2,13 @@ import { useNavigate } from "@tanstack/react-router";
 import type { SyntheticEvent } from "react";
 
 export type Props = {
+  route: string;
   baseUrl: string;
   path: string;
   name: string;
 };
 
-export function IframeRouter({ baseUrl, path, name }: Props) {
+export function IframeRouter({ route, baseUrl, path, name }: Props) {
   const navigate = useNavigate();
 
   const url = new URL(path, new URL(baseUrl, window.location.href)).toString();
@@ -25,7 +26,7 @@ export function IframeRouter({ baseUrl, path, name }: Props) {
     );
 
     navigate({
-      to: "/schedule/$",
+      to: route,
       params: {
         _splat: relativePath,
       },

public/dummy-page/my.html public/_services/booking/my.htmlpublic/dummy-page/my.html renamed to public/_services/booking/my.html

@@ -11,7 +11,9 @@ function remapPageUrl(page: Page, configUrl: string) {
   const absoluteConfigUrl = new URL(configUrl, window.location.href);
   const newUrl = new URL(page.path, absoluteConfigUrl);
 
-  const urlWithoutDomain = newUrl.pathname + newUrl.search + newUrl.hash;
+  let urlWithoutDomain = newUrl.pathname + newUrl.search + newUrl.hash;
+
+  urlWithoutDomain = urlWithoutDomain.replace(/^\/_services\//, "/app/");
 
   return {
     ...page,

src/components/microfrontends/IframeRouter.tsx

@@ -13,8 +13,8 @@ import { Route as MoreRouteImport } from './routes/more'
 import { Route as AboutRouteImport } from './routes/about'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as MoreIndexRouteImport } from './routes/more.index'
-import { Route as ScheduleSplatRouteImport } from './routes/schedule.$'
 import { Route as MoreLanguageRouteImport } from './routes/more.language'
+import { Route as AppSplatRouteImport } from './routes/app.$'
 
 const MoreRoute = MoreRouteImport.update({
   id: '/more',
@@ -36,67 +36,61 @@ const MoreIndexRoute = MoreIndexRouteImport.update({
   path: '/',
   getParentRoute: () => MoreRoute,
 } as any)
-const ScheduleSplatRoute = ScheduleSplatRouteImport.update({
-  id: '/schedule/$',
-  path: '/schedule/$',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const MoreLanguageRoute = MoreLanguageRouteImport.update({
   id: '/language',
   path: '/language',
   getParentRoute: () => MoreRoute,
 } as any)
+const AppSplatRoute = AppSplatRouteImport.update({
+  id: '/app/$',
+  path: '/app/$',
+  getParentRoute: () => rootRouteImport,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
   '/more': typeof MoreRouteWithChildren
+  '/app/$': typeof AppSplatRoute
   '/more/language': typeof MoreLanguageRoute
-  '/schedule/$': typeof ScheduleSplatRoute
   '/more/': typeof MoreIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
+  '/app/$': typeof AppSplatRoute
   '/more/language': typeof MoreLanguageRoute
-  '/schedule/$': typeof ScheduleSplatRoute
   '/more': typeof MoreIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/about': typeof AboutRoute
   '/more': typeof MoreRouteWithChildren
+  '/app/$': typeof AppSplatRoute
   '/more/language': typeof MoreLanguageRoute
-  '/schedule/$': typeof ScheduleSplatRoute
   '/more/': typeof MoreIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths:
-    | '/'
-    | '/about'
-    | '/more'
-    | '/more/language'
-    | '/schedule/$'
-    | '/more/'
+  fullPaths: '/' | '/about' | '/more' | '/app/$' | '/more/language' | '/more/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/about' | '/more/language' | '/schedule/$' | '/more'
+  to: '/' | '/about' | '/app/$' | '/more/language' | '/more'
   id:
     | '__root__'
     | '/'
     | '/about'
     | '/more'
+    | '/app/$'
     | '/more/language'
-    | '/schedule/$'
     | '/more/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   AboutRoute: typeof AboutRoute
   MoreRoute: typeof MoreRouteWithChildren
-  ScheduleSplatRoute: typeof ScheduleSplatRoute
+  AppSplatRoute: typeof AppSplatRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -129,20 +123,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof MoreIndexRouteImport
       parentRoute: typeof MoreRoute
     }
-    '/schedule/$': {
-      id: '/schedule/$'
-      path: '/schedule/$'
-      fullPath: '/schedule/$'
-      preLoaderRoute: typeof ScheduleSplatRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/more/language': {
       id: '/more/language'
       path: '/language'
       fullPath: '/more/language'
       preLoaderRoute: typeof MoreLanguageRouteImport
       parentRoute: typeof MoreRoute
     }
+    '/app/$': {
+      id: '/app/$'
+      path: '/app/$'
+      fullPath: '/app/$'
+      preLoaderRoute: typeof AppSplatRouteImport
+      parentRoute: typeof rootRouteImport
+    }
   }
 }
 
@@ -162,7 +156,7 @@ const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AboutRoute: AboutRoute,
   MoreRoute: MoreRouteWithChildren,
-  ScheduleSplatRoute: ScheduleSplatRoute,
+  AppSplatRoute: AppSplatRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

src/dynamic-routes/dynamic-routes.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { IframeRouter } from "../components/microfrontends/IframeRouter";
 
-export const Route = createFileRoute("/schedule/$")({
+export const Route = createFileRoute("/app/$")({
   component: RouteComponent,
 });
 
@@ -10,9 +10,10 @@ function RouteComponent() {
 
   return (
     <IframeRouter
-      baseUrl="/dummy-page/"
+      route="/app/$"
+      baseUrl="/_services/"
       path={`./${path ?? ""}`}
-      name="Schedule"
+      name="REPLACE ME LOL"
     />
   );
 }