fix(router): add support for server-side data fetching with catch-all…

… routes (#602)

apps/analog-app-e2e-cypress/src/e2e/app.cy.ts

@@ -1,10 +1,19 @@
 import * as app from '../support/app.po';
 
 describe('My Store', () => {
-  beforeEach(() => cy.visit('/'));
-
   it(`Given the user has navigated to the home page
     Then the app title is visible`, () => {
+    cy.visit('/');
     app.getTitle().contains(/my store/i);
   });
+
+  it(`Given the user has navigated an invalid page then the page not found title is visible`, () => {
+    cy.visit('/bad');
+    app.get404Title().contains(/page not found/i);
+  });
+
+  it(`Given the user has navigated an invalid nested page then the page not found title is visible`, () => {
+    cy.visit('/shipping/bad');
+    app.getNested404Title().contains(/shipping page not found/i);
+  });
 });

apps/analog-app-e2e-cypress/src/support/app.po.ts

@@ -1 +1,6 @@
 export const getTitle = () => cy.contains('h1', /my store/i);
+
+export const get404Title = () => cy.contains('h2', /page not found/i);
+
+export const getNested404Title = () =>
+  cy.contains('h2', /shipping page not found/i);

apps/analog-app/src/app/cart.service.ts

@@ -7,6 +7,7 @@ import { Product } from './products';
 })
 export class CartService {
   items: Product[] = [];
+  private readonly apiURL = import.meta.env.VITE_ANALOG_PUBLIC_BASE_URL;
 
   constructor(private http: HttpClient) {}
 
@@ -25,7 +26,7 @@ export class CartService {
 
   getShippingPrices() {
     return this.http.get<{ type: string; price: number }[]>(
-      '/assets/shipping.json'
+      `${this.apiURL}/assets/shipping.json`
     );
   }
 }

apps/analog-app/src/app/pages/[...slug].page.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  standalone: true,
+  template: ` <h2>Page Not Found</h2> `,
+})
+export default class PageNotFoundComponent {}

apps/analog-app/src/app/pages/[...slug].server.ts

@@ -0,0 +1,9 @@
+import { PageServerLoad } from '@analogjs/router';
+
+export function load({ params }: PageServerLoad) {
+  console.log('params', params);
+
+  return {
+    loaded: true,
+  };
+}

apps/analog-app/src/app/pages/shipping/[...slug].page.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-shipping-page-not-found',
+  standalone: true,
+  template: ` <h2>Shipping Page Not Found</h2> `,
+})
+export default class ShippingPageNotFoundComponent {}

apps/analog-app/src/app/pages/shipping/[...slug].server.ts

@@ -0,0 +1,9 @@
+import { PageServerLoad } from '@analogjs/router';
+
+export function load({ params }: PageServerLoad) {
+  console.log('slug', params?.['slug']);
+
+  return {
+    loaded: true,
+  };
+}

apps/analog-app/src/public/assets/shipping.json

@@ -1 +1,14 @@
-[]
+[
+  {
+    "type": "Overnight",
+    "price": 25.99
+  },
+  {
+    "type": "2-Day",
+    "price": 9.99
+  },
+  {
+    "type": "Postal",
+    "price": 2.99
+  }
+]

apps/analog-app/src/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ANALOG_PUBLIC_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/router/src/lib/route-config.ts

@@ -35,7 +35,9 @@ export function toRouteConfig(routeMeta: RouteMeta | undefined): RouteConfig {
       };
 
       if (PAGE_ENDPOINTS[routeConfig[ANALOG_META_KEY].endpointKey]) {
-        const { queryParams, fragment: hash, params } = route;
+        const { queryParams, fragment: hash, params, parent } = route;
+        const segment =
+          parent?.url.map((segment) => segment.path).join('/') || '';
         const url = new URL('', import.meta.env['VITE_ANALOG_PUBLIC_BASE_URL']);
         url.pathname = `/api/_analog${routeConfig[ANALOG_META_KEY].endpoint}`;
         url.search = `${new URLSearchParams(queryParams).toString()}`;
@@ -44,6 +46,7 @@ export function toRouteConfig(routeMeta: RouteMeta | undefined): RouteConfig {
         Object.keys(params).forEach((param) => {
           url.pathname = url.pathname.replace(`[${param}]`, params[param]);
         });
+        url.pathname = url.pathname.replace('**', segment);
 
         if ((globalThis as any).$fetch) {
           return (globalThis as any).$fetch(url.pathname);

packages/router/src/lib/routes.ts

@@ -163,6 +163,7 @@ function toRoutes(rawRoutes: RawRoute[], files: Files): Route[] {
       // get endpoint path
       const rawEndpoint = rawRoute.filename
         .replace(/\.page\.ts$/, '')
+        .replace(/\[\.{3}.+\]/, '**') // [...not-found] => **
         .split(APP_DIR)[1];
 
       // replace periods, remove (index) paths

packages/vite-plugin-nitro/src/lib/utils/get-page-handlers.ts

@@ -19,10 +19,10 @@ export function getPageHandlers({ workspaceRoot, rootDir }: GetHandlersArgs) {
     const route = endpointFile
       .replace(path.resolve(workspaceRoot, rootDir, 'src/app'), '')
       .replace(/\.server\.ts$/, '')
-      .replace(/\[\.{3}]/g, '**')
-      .replace(/\[\.{3}(\w+)]/g, '**:$1')
+      .replace(/\[\.{3}(.+)\]/g, '**:$1')
+      .replace(/\[\.{3}(\w+)\]/g, '**:$1')
       .replace(/\/\((.*?)\)$/, '/-$1-')
-      .replace(/\[(\w+)]/g, ':$1')
+      .replace(/\[(\w+)\]/g, ':$1')
       .replace(/\./g, '/');
 
     return {