feat: standardize params/query api (QwikDev#2385)

Co-Authored-By: Tran Thien Khiem <20198928+tuoitrevohoc@users.noreply.github.com>
Juyeong-Byeon · Dec 7, 2022 · 22ff901 · 22ff901
1 parent b503d46
commit 22ff901
Showing 21 changed files with 262 additions and 84 deletions.
diff --git a/packages/qwik-city/buildtime/vite/dev-server.ts b/packages/qwik-city/buildtime/vite/dev-server.ts
@@ -23,7 +23,7 @@ import {
   RedirectResponse,
 } from '../../middleware/request-handler/redirect-handler';
 import { getExtension, normalizePath } from '../../utils/fs';
-import { getRouteParams } from '../../runtime/src/routing';
+import { getPathParams } from '../../runtime/src/routing';
 import { fromNodeHttp } from '../../middleware/node/http';
 import { generateCodeFrame } from '../../../qwik/src/optimizer/src/plugins/vite-utils';
 
@@ -34,7 +34,7 @@ export function ssrDevMiddleware(ctx: BuildContext, server: ViteDevServer) {
       if (match) {
         return {
           route,
-          params: getRouteParams(route.paramNames, match),
+          params: getPathParams(route.paramNames, match),
         };
       }
     }
@@ -46,7 +46,7 @@ export function ssrDevMiddleware(ctx: BuildContext, server: ViteDevServer) {
         if (match) {
           return {
             route,
-            params: getRouteParams(route.paramNames, match),
+            params: getPathParams(route.paramNames, match),
           };
         }
       }

diff --git a/packages/qwik-city/middleware/request-handler/types.ts b/packages/qwik-city/middleware/request-handler/types.ts
@@ -5,7 +5,7 @@ import type {
   QwikCityMode,
   QwikCityPlan,
   RequestContext,
-  RouteParams,
+  PathParams,
 } from '../../runtime/src/types';
 
 export interface QwikCityRequestContext<T = any> {
@@ -36,7 +36,7 @@ export type ResponseHandler<T = any> = (
 export interface UserResponseContext {
   type: 'endpoint' | 'pagehtml' | 'pagedata';
   url: URL;
-  params: RouteParams;
+  params: PathParams;
   status: number;
   headers: Headers;
   cookie: Cookie;

diff --git a/packages/qwik-city/middleware/request-handler/user-response.ts b/packages/qwik-city/middleware/request-handler/user-response.ts
@@ -5,7 +5,7 @@ import type {
   RequestEvent,
   ResponseContext as ResponseContextInterface,
   RouteModule,
-  RouteParams,
+  PathParams,
 } from '../../runtime/src/types';
 import type { QwikCityRequestContext, UserResponseContext } from './types';
 import { HttpStatus } from './http-status-codes';
@@ -16,7 +16,7 @@ import { validateSerializable } from '../../utils/format';
 
 export async function loadUserResponse(
   requestCtx: QwikCityRequestContext,
-  params: RouteParams,
+  params: PathParams,
   routeModules: RouteModule[],
   trailingSlash?: boolean,
   basePathname: string = '/'
@@ -124,6 +124,7 @@ export async function loadUserResponse(
         const requestEv: RequestEvent = {
           request,
           url: new URL(url),
+          query: new URLSearchParams(url.search),
           params: { ...params },
           response,
           platform,

diff --git a/packages/qwik-city/runtime/src/api.md b/packages/qwik-city/runtime/src/api.md
@@ -171,6 +171,9 @@ export interface LinkProps extends AnchorAttributes {
     prefetch?: boolean;
 }
 
+// @alpha (undocumented)
+export type PathParams = Record<string, string>;
+
 // @alpha @deprecated (undocumented)
 export const QwikCity: Component<QwikCityProps>;
 
@@ -222,8 +225,9 @@ export interface RequestEvent<PLATFORM = unknown> {
     cookie: Cookie;
     // (undocumented)
     next: () => Promise<void>;
-    params: RouteParams;
+    params: PathParams;
     platform: PLATFORM;
+    query: URLSearchParams;
     // (undocumented)
     request: RequestContext;
     // (undocumented)
@@ -267,14 +271,14 @@ export interface RouteLocation {
     // (undocumented)
     readonly href: string;
     // (undocumented)
-    readonly params: RouteParams;
+    readonly params: Record<string, string>;
     // (undocumented)
     readonly pathname: string;
     // (undocumented)
-    readonly query: Record<string, string>;
+    readonly query: URLSearchParams;
 }
 
-// @alpha (undocumented)
+// @alpha @deprecated (undocumented)
 export type RouteParams = Record<string, string>;
 
 // @alpha (undocumented)

diff --git a/packages/qwik-city/runtime/src/index.ts b/packages/qwik-city/runtime/src/index.ts
@@ -10,6 +10,7 @@ export type {
   DocumentLink,
   DocumentMeta,
   DocumentStyle,
+  PathParams,
   RequestHandler,
   RequestEvent,
   RouteParams,

diff --git a/packages/qwik-city/runtime/src/qwik-city-component.tsx b/packages/qwik-city/runtime/src/qwik-city-component.tsx
@@ -70,7 +70,7 @@ export const QwikCityProvider = component$<QwikCityProps>(() => {
   const routeLocation = useStore<MutableRouteLocation>({
     href: url.href,
     pathname: url.pathname,
-    query: Object.fromEntries(url.searchParams.entries()),
+    query: url.searchParams,
     params: env.params,
   });
 
@@ -129,7 +129,7 @@ export const QwikCityProvider = component$<QwikCityProps>(() => {
       routeLocation.href = url.href;
       routeLocation.pathname = pathname;
       routeLocation.params = { ...params };
-      routeLocation.query = Object.fromEntries(url.searchParams.entries());
+      routeLocation.query = url.searchParams;
 
       // Update content
       content.headings = pageModule.headings;
@@ -186,7 +186,7 @@ export const QwikCityMockProvider = component$<QwikCityMockProps>((props) => {
   const routeLocation = useStore<MutableRouteLocation>({
     href: url.href,
     pathname: url.pathname,
-    query: Object.fromEntries(url.searchParams.entries()),
+    query: url.searchParams,
     params: props.params ?? {},
   });
 

diff --git a/packages/qwik-city/runtime/src/routing.ts b/packages/qwik-city/runtime/src/routing.ts
@@ -7,9 +7,12 @@ import type {
   ModuleLoader,
   RouteData,
   RouteModule,
-  RouteParams,
+  PathParams,
 } from './types';
 
+/**
+ * loadRoute() runs in both client and server.
+ */
 export const loadRoute = async (
   routes: RouteData[] | undefined,
   menus: MenuData[] | undefined,
@@ -21,7 +24,7 @@ export const loadRoute = async (
       const match = route[0].exec(pathname);
       if (match) {
         const loaders = route[1];
-        const params = getRouteParams(route[2], match);
+        const params = getPathParams(route[2], match);
         const routeBundleNames = route[4];
         const mods: RouteModule[] = new Array(loaders.length);
         const pendingLoads: Promise<any>[] = [];
@@ -95,12 +98,15 @@ export const getMenuLoader = (menus: MenuData[] | undefined, pathname: string) =
   }
 };
 
-export const getRouteParams = (paramNames: string[] | undefined, match: RegExpExecArray | null) => {
-  const params: RouteParams = {};
+export const getPathParams = (paramNames: string[] | undefined, match: RegExpExecArray | null) => {
+  const params: PathParams = {};
+  let i: number;
+  let param: string;
 
   if (paramNames) {
-    for (let i = 0; i < paramNames.length; i++) {
-      params[paramNames[i]] = match ? match[i + 1] : '';
+    for (i = 0; i < paramNames.length; i++) {
+      param = match ? match[i + 1] : '';
+      params[paramNames[i]] = param.endsWith('/') ? param.slice(0, -1) : param;
     }
   }
 

diff --git a/packages/qwik-city/runtime/src/routing.unit.ts b/packages/qwik-city/runtime/src/routing.unit.ts
@@ -1,7 +1,7 @@
 import { parseRoutePathname } from '../../buildtime/routing/parse-pathname';
 import { suite, test } from 'uvu';
 import { equal } from 'uvu/assert';
-import { getRouteParams, getMenuLoader } from './routing';
+import { getPathParams, getMenuLoader } from './routing';
 import type { MenuData } from './types';
 
 const routingTest = suite('routing');
@@ -27,9 +27,33 @@ routingTest('matches paths with patterns', () => {
     {
       basenamePath: '/',
       pattern: '/stuff/[...param]',
-      path: '/stuff/thing/',
+      path: '/stuff/a/b/c/',
+      result: {
+        param: 'a/b/c',
+      },
+    },
+    {
+      basenamePath: '/',
+      pattern: '/stuff/[...param]',
+      path: '/stuff/a/b/c',
       result: {
-        param: 'thing/',
+        param: 'a/b/c',
+      },
+    },
+    {
+      basenamePath: '/',
+      pattern: '/[...param]',
+      path: '/thing/',
+      result: {
+        param: 'thing',
+      },
+    },
+    {
+      basenamePath: '/',
+      pattern: '/[...param]',
+      path: '/thing',
+      result: {
+        param: 'thing',
       },
     },
   ];
@@ -50,7 +74,7 @@ const testMatch = (
   if (matched === null) {
     equal(result, null);
   } else {
-    equal(getRouteParams(actual.paramNames, matched), result);
+    equal(getPathParams(actual.paramNames, matched), result);
   }
 };
 

diff --git a/packages/qwik-city/runtime/src/types.ts b/packages/qwik-city/runtime/src/types.ts
@@ -34,10 +34,10 @@ export interface MenuModule {
  * @alpha
  */
 export interface RouteLocation {
-  readonly params: RouteParams;
+  readonly params: Record<string, string>;
   readonly href: string;
   readonly pathname: string;
-  readonly query: Record<string, string>;
+  readonly query: URLSearchParams;
 }
 
 export interface RouteNavigate {
@@ -204,15 +204,21 @@ export interface QwikCityPlan {
 
 /**
  * @alpha
+ * @deprecated Please update to `PathParams` instead
  */
-export type RouteParams = Record<string, string>;
+export declare type RouteParams = Record<string, string>;
+
+/**
+ * @alpha
+ */
+export declare type PathParams = Record<string, string>;
 
 export type ContentModule = PageModule | LayoutModule;
 
 export type ContentModuleHead = DocumentHead | ResolvedDocumentHead;
 
 export type LoadedRoute = [
-  params: RouteParams,
+  params: PathParams,
   mods: (RouteModule | ContentModule)[],
   menu: ContentMenu | undefined,
   routeBundleNames: string[] | undefined
@@ -287,8 +293,17 @@ export interface RequestEvent<PLATFORM = unknown> {
   response: ResponseContext;
   url: URL;
 
-  /** URL Route params which have been parsed from the current url pathname. */
-  params: RouteParams;
+  /**
+   * URL path params which have been parsed from the current url pathname.
+   * Use `query` to instead retrieve the query string search params.
+   */
+  params: PathParams;
+
+  /**
+   * URL Query Strings (URL Search Params).
+   * Use `params` to instead retrieve the route params found in the url pathname.
+   */
+  query: URLSearchParams;
 
   /** Platform specific data and functions */
   platform: PLATFORM;
@@ -348,14 +363,14 @@ export type StaticGenerateHandler = () => Promise<StaticGenerate> | StaticGenera
  * @alpha
  */
 export interface StaticGenerate {
-  params?: RouteParams[];
+  params?: PathParams[];
 }
 
 export interface QwikCityRenderDocument extends Document {}
 
 export interface QwikCityEnvData {
   mode: QwikCityMode;
-  params: RouteParams;
+  params: PathParams;
   response: EndpointResponse;
 }
 

diff --git a/packages/qwik-city/static/main-thread.ts b/packages/qwik-city/static/main-thread.ts
@@ -1,4 +1,4 @@
-import type { PageModule, QwikCityPlan, RouteData, RouteParams } from '../runtime/src/types';
+import type { PageModule, QwikCityPlan, RouteData, PathParams } from '../runtime/src/types';
 import type { StaticGenerateOptions, StaticGenerateResult, StaticRoute, System } from './types';
 import { msToString } from '../utils/format';
 import { generateNotFoundPages } from './not-found';
@@ -122,7 +122,7 @@ export async function mainThread(sys: System) {
         }
       };
 
-      const addToQueue = (pathname: string | undefined | null, params: RouteParams | undefined) => {
+      const addToQueue = (pathname: string | undefined | null, params: PathParams | undefined) => {
         if (pathname) {
           pathname = new URL(pathname, `https://qwik.builder.io`).pathname;
 

diff --git a/packages/qwik-city/static/types.ts b/packages/qwik-city/static/types.ts
@@ -1,5 +1,4 @@
 import type { StreamWriter } from '@builder.io/qwik';
-import type { RouteParams } from '../runtime/src';
 import type { RenderOptions } from '../../qwik/src/server';
 import type { QwikCityHandlerOptions } from '../middleware/request-handler/types';
 
@@ -128,7 +127,7 @@ export interface StaticRenderInput extends StaticRoute {
 
 export interface StaticRoute {
   pathname: string;
-  params: RouteParams | undefined;
+  params: Record<string, string> | undefined;
 }
 
 export interface WorkerCloseMessage {

diff --git a/packages/qwik-city/utils/pathname.ts b/packages/qwik-city/utils/pathname.ts
@@ -1,4 +1,4 @@
-import type { RouteParams } from '../runtime/src';
+import type { PathParams } from '../runtime/src';
 
 export function normalizePathname(
   pathname: string | undefined | null,
@@ -50,7 +50,7 @@ export function normalizePathname(
 export function getPathnameForDynamicRoute(
   originalPathname: string,
   paramNames: string[] | undefined,
-  params: RouteParams | undefined
+  params: PathParams | undefined
 ) {
   let pathname = originalPathname;
 

diff --git a/packages/qwik-city/utils/pathname.unit.ts b/packages/qwik-city/utils/pathname.unit.ts
@@ -1,7 +1,7 @@
+import type { PathParams } from '../runtime/src/types';
 import { test } from 'uvu';
 import { equal } from 'uvu/assert';
 import { getPathnameForDynamicRoute, isSameOriginUrl, normalizePathname } from './pathname';
-import type { RouteParams } from '../runtime/src/types';
 import { parseRoutePathname } from '../buildtime/routing/parse-pathname';
 
 test('isSameOriginUrl', () => {
@@ -177,7 +177,7 @@ test('dynamic pathname', () => {
   equal(p, '/docs/introduction/basics');
 });
 
-function getPathname(t: { originalPathname: string; basePathname: string; params?: RouteParams }) {
+function getPathname(t: { originalPathname: string; basePathname: string; params?: PathParams }) {
   const p = parseRoutePathname(t.basePathname, t.originalPathname);
   const d = getPathnameForDynamicRoute(t.originalPathname, p.paramNames, t.params);
   return normalizePathname(d, '/', false);

diff --git a/...city-test/src/routes/[catchall]/index.tsx → ...y-test/src/routes/[...catchall]/index.tsx b/...city-test/src/routes/[catchall]/index.tsx → ...y-test/src/routes/[...catchall]/index.tsx
@@ -1,10 +1,16 @@
 import { component$ } from '@builder.io/qwik';
-import type { DocumentHead, RequestHandler } from '@builder.io/qwik-city';
+import { DocumentHead, RequestHandler, useLocation } from '@builder.io/qwik-city';
 
 export default component$(() => {
+  const loc = useLocation();
+
   return (
     <div>
       <h1>Catch All</h1>
+      <p>
+        <span>loc.params.catchall: </span>
+        <code data-test-params="catchall">{loc.params.catchall}</code>
+      </p>
       <p>
         <a href="/qwikcity-test/">Home</a>
       </p>