fix: qwik-city dev server, improve tests

packages/qwik-city/buildtime/build-layout.unit.ts

@@ -8,9 +8,9 @@ test('total layouts', ({ layouts }) => {
 });
 
 test('nested named layout', ({ assertLayout }) => {
-  const l = assertLayout('ApiLayoutfoo');
+  const l = assertLayout('ApiLayoutapi');
   equal(l.layoutType, 'nested');
-  equal(l.layoutName, 'foo');
+  equal(l.layoutName, 'api');
 });
 
 test('nested layout', ({ assertLayout }) => {
@@ -19,16 +19,10 @@ test('nested layout', ({ assertLayout }) => {
   equal(l.layoutName, '');
 });
 
-test('named nested layout', ({ assertLayout }) => {
-  const l = assertLayout('DashboardLayoutdashboard');
-  equal(l.layoutType, 'nested');
-  equal(l.layoutName, 'dashboard');
-});
-
-test('named nested layout', ({ assertLayout }) => {
-  const l = assertLayout('DashboardLayoutdashboard');
-  equal(l.layoutType, 'nested');
-  equal(l.layoutName, 'dashboard');
+test('top layout', ({ assertLayout }) => {
+  const l = assertLayout('DashboardLayout');
+  equal(l.layoutType, 'top');
+  equal(l.layoutName, '');
 });
 
 test('top layout', ({ assertLayout }) => {

packages/qwik-city/buildtime/build-pages.unit.ts

@@ -25,14 +25,14 @@ test('index file w/ nested named layout, in directory w/ nested named layout', (
   assertRoute,
 }) => {
   const r = assertRoute('/api');
-  assert.equal(r.id, 'ApiIndexfoo');
+  assert.equal(r.id, 'ApiIndexapi');
   assert.equal(r.pattern, /^\/api\/?$/);
   assert.equal(r.paramNames.length, 0);
   assert.equal(r.layouts[0].id, 'Layout');
   assert.equal(r.layouts[0].layoutName, '');
   assert.equal(r.layouts[0].layoutType, 'nested');
-  assert.equal(r.layouts[1].id, 'ApiLayoutfoo');
-  assert.equal(r.layouts[1].layoutName, 'foo');
+  assert.equal(r.layouts[1].id, 'ApiLayoutapi');
+  assert.equal(r.layouts[1].layoutName, 'api');
   assert.equal(r.layouts[1].layoutType, 'nested');
   assert.equal(r.layouts.length, 2);
 });
@@ -42,33 +42,29 @@ test('index file w/out named layout, in directory w/ named layout', ({ assertRou
   assert.equal(r.id, 'Dashboard');
   assert.equal(r.pattern, /^\/dashboard\/?$/);
   assert.equal(r.paramNames.length, 0);
-  assert.equal(r.layouts[0].id, 'Layout');
-  assert.equal(r.layouts[0].layoutType, 'nested');
+  assert.equal(r.layouts[0].id, 'DashboardLayout');
+  assert.equal(r.layouts[0].layoutType, 'top');
   assert.equal(r.layouts.length, 1);
 });
 
-test('file w/ named layout, in directory w/ nested named layout file', ({ assertRoute }) => {
+test('index file in directory w/ nested named layout file', ({ assertRoute }) => {
   const r = assertRoute('/dashboard/profile');
-  assert.equal(r.id, 'DashboardProfileIndexdashboard');
+  assert.equal(r.id, 'DashboardProfile');
   assert.equal(r.pattern, /^\/dashboard\/profile\/?$/);
   assert.equal(r.paramNames.length, 0);
-  assert.equal(r.layouts[0].id, 'Layout');
-  assert.equal(r.layouts[0].layoutType, 'nested');
-  assert.equal(r.layouts[1].id, 'DashboardLayoutdashboard');
-  assert.equal(r.layouts[1].layoutType, 'nested');
-  assert.equal(r.layouts.length, 2);
+  assert.equal(r.layouts[0].id, 'DashboardLayout');
+  assert.equal(r.layouts[0].layoutType, 'top');
+  assert.equal(r.layouts.length, 1);
 });
 
-test('index file w/ named layout, in directory w/ nested named layout file', ({ assertRoute }) => {
+test('index file in directory w/ top named layout file', ({ assertRoute }) => {
   const r = assertRoute('/dashboard/settings');
-  assert.equal(r.id, 'DashboardSettingsIndexdashboard');
+  assert.equal(r.id, 'DashboardSettings');
   assert.equal(r.pattern, /^\/dashboard\/settings\/?$/);
   assert.equal(r.paramNames.length, 0);
-  assert.equal(r.layouts[0].id, 'Layout');
-  assert.equal(r.layouts[0].layoutType, 'nested');
-  assert.equal(r.layouts[1].id, 'DashboardLayoutdashboard');
-  assert.equal(r.layouts[1].layoutType, 'nested');
-  assert.equal(r.layouts.length, 2);
+  assert.equal(r.layouts[0].id, 'DashboardLayout');
+  assert.equal(r.layouts[0].layoutType, 'top');
+  assert.equal(r.layouts.length, 1);
 });
 
 test('params route, index file w/out named layout, in directory w/ top layout directory', ({

packages/qwik-city/buildtime/vite/dev-server.ts

@@ -10,8 +10,16 @@ import { loadUserResponse } from '../../middleware/request-handler/user-response
 import { getQwikCityEnvData } from '../../middleware/request-handler/page-handler';
 import { buildFromUrlPathname } from '../build';
 import { endpointHandler } from '../../middleware/request-handler/endpoint-handler';
-import { notFoundHandler } from '../../middleware/request-handler/error-handler';
+import {
+  errorResponse,
+  ErrorResponse,
+  notFoundHandler,
+} from '../../middleware/request-handler/error-handler';
 import type { QwikCityRequestContext } from '../../middleware/request-handler/types';
+import {
+  redirectResponse,
+  RedirectResponse,
+} from '../../middleware/request-handler/redirect-handler';
 
 export function configureDevServer(ctx: BuildContext, server: ViteDevServer) {
   server.middlewares.use(async (req, res, next) => {
@@ -49,40 +57,51 @@ export function configureDevServer(ctx: BuildContext, server: ViteDevServer) {
         });
         routeModules.push(endpointModule);
 
-        const userResponse = await loadUserResponse(
-          requestCtx,
-          params,
-          routeModules,
-          ctx.opts.trailingSlash
-        );
-
-        if (userResponse.type === 'endpoint') {
-          // dev server endpoint handler
-          await endpointHandler(requestCtx, userResponse);
+        try {
+          const userResponse = await loadUserResponse(
+            requestCtx,
+            params,
+            routeModules,
+            ctx.opts.trailingSlash
+          );
+
+          if (userResponse.type === 'endpoint') {
+            // dev server endpoint handler
+            await endpointHandler(requestCtx, userResponse);
+            return;
+          }
+
+          // qwik city vite plugin should handle dev ssr rendering
+          // but add the qwik city user context to the response object
+          const envData = getQwikCityEnvData(userResponse);
+          if (ctx.isDevServerClientOnly) {
+            // because we stringify this content for the client only
+            // dev server, there's some potential stringify issues
+            // client only dev server will re-fetch anyways, so reset
+            envData.qwikcity.response.body = undefined;
+          }
+
+          (res as QwikViteDevResponse)._qwikEnvData = {
+            ...(res as QwikViteDevResponse)._qwikEnvData,
+            ...envData,
+          };
+
+          // update node response with status and headers
+          // but do not end() it, call next() so qwik plugin handles rendering
+          res.statusCode = userResponse.status;
+          userResponse.headers.forEach((value, key) => res.setHeader(key, value));
+          next();
+          return;
+        } catch (e: any) {
+          if (e instanceof RedirectResponse) {
+            redirectResponse(requestCtx, e);
+          } else if (e instanceof ErrorResponse) {
+            errorResponse(requestCtx, e);
+          } else {
+            next(e);
+          }
           return;
         }
-
-        // qwik city vite plugin should handle dev ssr rendering
-        // but add the qwik city user context to the response object
-        const envData = getQwikCityEnvData(userResponse);
-        if (ctx.isDevServerClientOnly) {
-          // because we stringify this content for the client only
-          // dev server, there's some potential stringify issues
-          // client only dev server will re-fetch anyways, so reset
-          envData.qwikcity.response.body = undefined;
-        }
-
-        (res as QwikViteDevResponse)._qwikEnvData = {
-          ...(res as QwikViteDevResponse)._qwikEnvData,
-          ...envData,
-        };
-
-        // update node response with status and headers
-        // but do not end() it, call next() so qwik plugin handles rendering
-        res.statusCode = userResponse.status;
-        userResponse.headers.forEach((value, key) => res.setHeader(key, value));
-        next();
-        return;
       }
 
       // static file does not exist, 404

packages/qwik-city/middleware/request-handler/endpoint-handler.unit.ts

@@ -2,8 +2,9 @@ import type { PageModule, RouteModule } from '../../runtime/src/library/types';
 import { test } from 'uvu';
 import { equal, instance } from 'uvu/assert';
 import { mockRequestContext, wait } from './test-utils';
-import { ErrorResponse, loadUserResponse } from './user-response';
+import { loadUserResponse } from './user-response';
 import { endpointHandler } from './endpoint-handler';
+import { ErrorResponse } from './error-handler';
 
 test('onRequest, async return callback, async callback data', async () => {
   const requestCtx = mockRequestContext();

packages/qwik-city/middleware/request-handler/error-handler.ts

@@ -1,7 +1,12 @@
 import { createHeaders } from './headers';
 import { HttpStatus } from './http-status-codes';
 import type { QwikCityRequestContext } from './types';
-import type { ErrorResponse } from './user-response';
+
+export class ErrorResponse extends Error {
+  constructor(public status: number, message?: string) {
+    super(message);
+  }
+}
 
 export function notFoundHandler<T = any>(requestCtx: QwikCityRequestContext): Promise<T> {
   const status = HttpStatus.NotFound;
@@ -30,8 +35,13 @@ export function errorHandler(requestCtx: QwikCityRequestContext, e: any) {
   return minimalHtmlResponse(requestCtx, status, message, stack);
 }
 
-export function errorResponse(requestCtx: QwikCityRequestContext, err: ErrorResponse) {
-  return minimalHtmlResponse(requestCtx, err.status, err.message, err.stack);
+export function errorResponse(requestCtx: QwikCityRequestContext, errorResponse: ErrorResponse) {
+  return minimalHtmlResponse(
+    requestCtx,
+    errorResponse.status,
+    errorResponse.message,
+    errorResponse.stack
+  );
 }
 
 function minimalHtmlResponse(

packages/qwik-city/middleware/request-handler/redirect-handler.ts

@@ -1,24 +1,25 @@
 import { createHeaders } from './headers';
 import { HttpStatus } from './http-status-codes';
 import type { QwikCityRequestContext } from './types';
-import type { RedirectResponse } from './user-response';
+
+export class RedirectResponse {
+  public status: number;
+  public headers: Headers;
+  public location: string;
+
+  constructor(public url: string, status?: number, headers?: Headers) {
+    this.location = url;
+    this.status = isRedirectStatus(status) ? status : HttpStatus.TemporaryRedirect;
+    this.headers = headers || createHeaders();
+    this.headers.set('Location', this.location);
+  }
+}
 
 export function redirectResponse(
   requestCtx: QwikCityRequestContext,
   responseRedirect: RedirectResponse
 ) {
-  const { response } = requestCtx;
-
-  const status = getRedirectStatus(responseRedirect.status);
-
-  const headers = responseRedirect.headers || createHeaders();
-  headers.set('Location', responseRedirect.location);
-
-  return response(status, headers, async () => {});
-}
-
-export function getRedirectStatus(status: number | undefined | null) {
-  return isRedirectStatus(status) ? status : HttpStatus.TemporaryRedirect;
+  return requestCtx.response(responseRedirect.status, responseRedirect.headers, async () => {});
 }
 
 export function isRedirectStatus(status: number | undefined | null): status is number {

packages/qwik-city/middleware/request-handler/request-handler.ts

@@ -1,12 +1,12 @@
 import { loadRoute } from '../../runtime/src/library/routing';
-import { loadUserResponse, ErrorResponse, RedirectResponse } from './user-response';
+import { loadUserResponse } from './user-response';
 import type { QwikCityRequestContext, QwikCityRequestOptions } from './types';
 import type { Render } from '@builder.io/qwik/server';
-import { errorHandler, errorResponse } from './error-handler';
+import { errorHandler, ErrorResponse, errorResponse } from './error-handler';
 import cityPlan from '@qwik-city-plan';
 import { endpointHandler } from './endpoint-handler';
 import { pageHandler } from './page-handler';
-import { redirectResponse } from './redirect-handler';
+import { RedirectResponse, redirectResponse } from './redirect-handler';
 
 /**
  * @public

packages/qwik-city/middleware/request-handler/user-response.ts

@@ -9,7 +9,8 @@ import type {
 } from '../../runtime/src/library/types';
 import type { QwikCityRequestContext, UserResponseContext } from './types';
 import { HttpStatus } from './http-status-codes';
-import { getRedirectStatus, isRedirectStatus } from './redirect-handler';
+import { isRedirectStatus, RedirectResponse } from './redirect-handler';
+import { ErrorResponse } from './error-handler';
 
 export async function loadUserResponse(
   requestCtx: QwikCityRequestContext,
@@ -59,8 +60,7 @@ export async function loadUserResponse(
   };
 
   const redirect = (url: string, status?: number) => {
-    userResponse.headers.set('Location', url);
-    return new RedirectResponse(url, getRedirectStatus(status), userResponse.headers);
+    return new RedirectResponse(url, status, userResponse.headers);
   };
 
   const error = (status: number, message?: string) => {
@@ -217,13 +217,3 @@ function isLastModulePageRoute(routeModules: RouteModule[]) {
 }
 
 const ABORT_INDEX = 999999999;
-
-export class ErrorResponse extends Error {
-  constructor(public status: number, message?: string) {
-    super(message);
-  }
-}
-
-export class RedirectResponse {
-  constructor(public location: string, public status?: number, public headers?: Headers) {}
-}

packages/qwik-city/middleware/request-handler/user-response.unit.ts

@@ -2,7 +2,9 @@ import { test } from 'uvu';
 import { equal, instance } from 'uvu/assert';
 import { mockRequestContext, wait } from './test-utils';
 import type { PageModule, RouteModule } from '../../runtime/src/library/types';
-import { ErrorResponse, loadUserResponse, RedirectResponse } from './user-response';
+import { loadUserResponse } from './user-response';
+import { RedirectResponse } from './redirect-handler';
+import { ErrorResponse } from './error-handler';
 
 test('sync endpoint, undefined body', async () => {
   const requestCtx = mockRequestContext();

packages/qwik-city/runtime/src/app/routes/__auth/sign-in/index.tsx

@@ -27,10 +27,14 @@ export default component$(() => {
   );
 });
 
+export const head: DocumentHead = {
+  title: 'Sign In',
+};
+
 export const onGet: RequestHandler = async ({ request, response }) => {
   const isAuthenticated = await isUserAuthenticated(request.headers.get('cookie'));
   if (isAuthenticated) {
-    response.redirect('/dashboard');
+    throw response.redirect('/dashboard');
   }
 };
 
@@ -40,12 +44,8 @@ export const onPost: RequestHandler = async ({ request, response }) => {
 
   if (result.status === 'signed-in') {
     response.headers.set('Set-Cookie', result.cookie);
-    response.redirect('/dashboard');
-  } else {
-    response.status = 403;
+    throw response.redirect('/dashboard');
   }
-};
 
-export const head: DocumentHead = {
-  title: 'Sign In',
+  response.status = 403;
 };

packages/qwik-city/runtime/src/app/routes/__auth/sign-out/index.tsx

@@ -8,5 +8,5 @@ import { signOut } from '../../../auth/auth';
 export const onGet: RequestHandler = async ({ response }) => {
   const result = await signOut();
   response.headers.set('Set-Cookie', result.cookie);
-  response.redirect('/sign-in');
+  throw response.redirect('/sign-in');
 };

packages/qwik-city/runtime/src/app/routes/api/layout-foo.tsx → packages/qwik-city/runtime/src/app/routes/api/layout-api.tsx

@@ -1,6 +1,6 @@
 import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
 import type { DocumentHead } from '~qwik-city-runtime';
-import styles from './layout-foo.css?inline';
+import styles from './layout-api.css?inline';
 
 export default component$(() => {
   useStyles$(styles);