fix(qwik-city): strip internal parameters for compare

.changeset/lucky-dolphins-grab.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+During dev mode, qwik-city will no longer serve files from `dist/`, which are very likely to be stale/incorrect. Furthermore, query parameters are taken into account when serving files (like production servers would do).

.changeset/rich-hairs-worry.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+strip internal search parameters in canonical URLs

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

@@ -412,7 +412,7 @@ export function staticDistMiddleware({ config }: ViteDevServer) {
       return;
     }
 
-    const relPath = url.pathname.slice(1);
+    const relPath = `${url.pathname.slice(1)}${url.search}`;
 
     const ext = getExtension(relPath);
     const contentType = STATIC_CONTENT_TYPES[ext];

packages/qwik-city/buildtime/vite/plugin.ts

@@ -84,7 +84,7 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
 
       ctx = createBuildContext(rootDir!, config.base, userOpts, target);
 
-      ctx.isDevServer = config.command === 'serve';
+      ctx.isDevServer = config.command === 'serve' && config.mode !== 'production';
       ctx.isDevServerClientOnly = ctx.isDevServer && config.mode !== 'ssr';
 
       await validatePlugin(ctx.opts);
@@ -105,14 +105,17 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
 
     configureServer(server) {
       return () => {
-        // handles static files physically found in the dist directory
-        server.middlewares.use(staticDistMiddleware(server));
-        if (ctx) {
-          // qwik city middleware injected BEFORE vite internal middlewares
-          // and BEFORE @builder.io/qwik/optimizer/vite middlewares
-          // handles only known user defined routes
-          server.middlewares.use(ssrDevMiddleware(ctx, server));
+        if (!ctx) {
+          throw new Error('configureServer: Missing ctx from configResolved');
         }
+        if (!ctx.isDevServer) {
+          // preview server: serve static files from the dist directory
+          server.middlewares.use(staticDistMiddleware(server));
+        }
+        // qwik city middleware injected BEFORE vite internal middlewares
+        // and BEFORE @builder.io/qwik/optimizer/vite middlewares
+        // handles only known user defined routes
+        server.middlewares.use(ssrDevMiddleware(ctx, server));
       };
     },
 

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

@@ -144,15 +144,15 @@ const _resolveRequestHandlers = (
     }
 
     if (collectActions) {
-      const loaders = Object.values(routeModule).filter((e) =>
-        checkBrand(e, 'server_loader')
-      ) as LoaderInternal[];
-      routeLoaders.push(...loaders);
-
-      const actions = Object.values(routeModule).filter((e) =>
-        checkBrand(e, 'server_action')
-      ) as ActionInternal[];
-      routeActions.push(...actions);
+      for (const module of Object.values(routeModule)) {
+        if (typeof module === 'function') {
+          if (module.__brand === 'server_loader') {
+            routeLoaders.push(module as LoaderInternal);
+          } else if (module.__brand === 'server_action') {
+            routeActions.push(module as ActionInternal);
+          }
+        }
+      }
     }
   }
 };
@@ -407,7 +407,9 @@ export function getPathname(url: URL, trailingSlash: boolean | undefined) {
       url.pathname = url.pathname.slice(0, -1);
     }
   }
-  return url.toString().substring(url.origin.length);
+  // strip internal search params
+  const search = url.search.slice(1).replaceAll(/&?q(action|data|func)=[^&]+/g, '');
+  return `${url.pathname}${search ? `?${search}` : ''}${url.hash}`;
 }
 
 export const encoder = /*#__PURE__*/ new TextEncoder();

packages/qwik-city/middleware/request-handler/resolve-request-handlers.unit.ts

@@ -20,5 +20,14 @@ describe('resolve-request-handler', () => {
         '/path?foo=bar#hash'
       );
     });
+
+    it('should remove internal search params', () => {
+      expect(getPathname(new URL('http://server/path?qaction=123&qdata=data'), true)).toBe(
+        '/path/'
+      );
+      expect(getPathname(new URL('http://server/path?foo=1&qfunc=f&bar=2'), false)).toBe(
+        '/path?foo=1&bar=2'
+      );
+    });
   });
 });

packages/qwik-city/runtime/src/qwik-city-component.tsx

@@ -264,6 +264,7 @@ export const QwikCityProvider = component$<QwikCityProps>((props) => {
         const newHref = pageData.href;
         const newURL = new URL(newHref, trackUrl);
         if (!isSamePath(newURL, trackUrl)) {
+          // Change our path to the canonical path in the response.
           trackUrl = newURL;
           loadRoutePromise = loadRoute(
             qwikCity.routes,

scripts/build.ts

@@ -110,15 +110,15 @@ export async function build(config: BuildConfig) {
       await buildWasmBinding(config);
     }
 
-    if (config.tsc) {
+    if (config.tsc || (!config.dev && config.qwikcity)) {
       await tscQwikCity(config);
     }
 
     if (config.qwikcity) {
       await buildQwikCity(config);
     }
 
-    if (config.api || (config.tsc && config.qwikcity)) {
+    if (config.api || ((!config.dev || config.tsc) && config.qwikcity)) {
       await apiExtractorQwikCity(config);
     }
 

starters/apps/qwikcity-test/src/routes/issue6660/index.tsx

@@ -0,0 +1,18 @@
+import { routeAction$, Form } from "@builder.io/qwik-city";
+import { component$ } from "@builder.io/qwik";
+
+export const useAction = routeAction$(() => ({ ok: true }));
+
+export default component$(() => {
+  const action = useAction();
+
+  return (
+    <Form action={action}>
+      <button name="test" value="test">
+        Submit
+      </button>
+
+      {action.value?.ok && <span id="status">Submitted</span>}
+    </Form>
+  );
+});

starters/e2e/qwikcity/nav.spec.ts

@@ -154,6 +154,35 @@ test.describe("actions", () => {
         await expect(count).toHaveText("Count: 1");
       });
     });
+
+    test("issue 6660 internal params should not trigger navigation", async ({
+      page,
+    }) => {
+      await page.goto("/qwikcity-test/issue6660/");
+      await expect(page.locator("#status")).toBeHidden();
+
+      {
+        const startUrl = page.url();
+
+        await page.getByText("Submit").click();
+        await page.waitForSelector("#status");
+
+        expect(page.url()).toBe(startUrl);
+      }
+
+      await page.goto("/qwikcity-test/issue6660/?var=1&hello");
+      await expect(page.locator("#status")).toBeHidden();
+
+      {
+        const startUrl = page.url();
+        expect(startUrl).toContain("var=1&hello");
+
+        await page.getByText("Submit").click();
+        await page.waitForSelector("#status");
+
+        expect(page.url()).toBe(startUrl);
+      }
+    });
   }
 
   function tests() {