feat: decode option for getRouterParam (#556)

* feat: decode param

* docs: new opt

* chore: best commit ever

permalink: http://whatthecommit.com/fd1e76a61e8173b57334cb93c79300f3

* feat: use func from `ufo`

* support for getValidatedRouterParams

* avoid muating original context

---------

Co-authored-by: Pooya Parsa <[email protected]>

Author: HigherOrderLogic

README.md

@@ -214,9 +214,9 @@ H3 has a concept of composable utilities that accept `event` (from `eventHandler
 
 - `getQuery(event)`
 - `getValidatedQuery(event, validate)`
-- `getRouterParams(event)`
-- `getValidatedRouterParams(event, validate)`
-- `getRouterParam(event, name)`
+- `getRouterParams(event, { decode? })`
+- `getRouterParam(event, name, { decode? })`
+- `getValidatedRouterParams(event, validate, { decode? })`
 - `getMethod(event, default?)`
 - `isMethod(event, expected, allowHead?)`
 - `assertMethod(event, expected, allowHead?)`

src/utils/request.ts

@@ -1,4 +1,4 @@
-import { getQuery as _getQuery } from "ufo";
+import { getQuery as _getQuery, decode as decodeURI } from "ufo";
 import { createError } from "../error";
 import type {
   HTTPHeaderName,
@@ -29,26 +29,40 @@ export function getValidatedQuery<
 
 export function getRouterParams(
   event: H3Event,
+  opts: { decode?: boolean } = {},
 ): NonNullable<H3Event["context"]["params"]> {
   // Fallback object needs to be returned in case router is not used (#149)
-  return event.context.params || {};
+  let params = event.context.params || {};
+  if (opts.decode) {
+    params = { ...params };
+    for (const key in params) {
+      params[key] = decodeURI(params[key]);
+    }
+  }
+
+  return params;
 }
 
 export function getValidatedRouterParams<
   T,
   Event extends H3Event = H3Event,
   _T = InferEventInput<"routerParams", Event, T>,
->(event: Event, validate: ValidateFunction<_T>): Promise<_T> {
-  const routerParams = getRouterParams(event);
+>(
+  event: Event,
+  validate: ValidateFunction<_T>,
+  opts: { decode?: boolean } = {},
+): Promise<_T> {
+  const routerParams = getRouterParams(event, opts);
 
   return validateData(routerParams, validate);
 }
 
 export function getRouterParam(
   event: H3Event,
   name: string,
+  opts: { decode?: boolean } = {},
 ): string | undefined {
-  const params = getRouterParams(event);
+  const params = getRouterParams(event, opts);
 
   return params[name];
 }

test/router.test.ts

@@ -189,6 +189,22 @@ describe("getRouterParams", () => {
 
       expect(result.text).toBe("200");
     });
+
+    it("can decode router params", async () => {
+      const router = createRouter().get(
+        "/test/params/:name",
+        eventHandler((event) => {
+          expect(getRouterParams(event, { decode: true })).toMatchObject({
+            name: "string with space",
+          });
+          return "200";
+        }),
+      );
+      app.use(router);
+      const result = await request.get("/test/params/string with space");
+
+      expect(result.text).toBe("200");
+    });
   });
 
   describe("without router", () => {
@@ -230,6 +246,22 @@ describe("getRouterParam", () => {
 
       expect(result.text).toBe("200");
     });
+
+    it("can decode a value of router params corresponding to the given name", async () => {
+      const router = createRouter().get(
+        "/test/params/:name",
+        eventHandler((event) => {
+          expect(getRouterParam(event, "name", { decode: true })).toEqual(
+            "string with space",
+          );
+          return "200";
+        }),
+      );
+      app.use(router);
+      const result = await request.get("/test/params/string with space");
+
+      expect(result.text).toBe("200");
+    });
   });
 
   describe("without router", () => {