fix: decode path params in builder (#5382)

User got encoded Cyrillic slugs when tested in builder. Now decoded the
result of URLPattern parsing.

Author: TrySound

apps/builder/app/builder/shared/url-pattern.test.ts

@@ -2,10 +2,25 @@ import { expect, test } from "vitest";
 import {
   compilePathnamePattern,
   isPathnamePattern,
+  matchPathnamePattern,
   tokenizePathnamePattern,
   validatePathnamePattern,
 } from "./url-pattern";
 
+test("decode matched params", () => {
+  expect(matchPathnamePattern("/blog/:slug", "/blog/привет")).toEqual({
+    slug: "привет",
+  });
+  expect(
+    matchPathnamePattern(
+      "/blog/:slug",
+      "/blog/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82"
+    )
+  ).toEqual({
+    slug: "привет",
+  });
+});
+
 test("check pathname is pattern", () => {
   expect(isPathnamePattern("/:name")).toEqual(true);
   expect(isPathnamePattern("/:slug*")).toEqual(true);

apps/builder/app/builder/shared/url-pattern.ts

@@ -1,13 +1,31 @@
 import { matchPathnameParams } from "@webstudio-is/sdk";
 import { URLPattern } from "urlpattern-polyfill";
+
 export { isPathnamePattern } from "@webstudio-is/sdk";
 
 const baseUrl = "http://url";
 
+const tryDecode = (encoded: string) => {
+  try {
+    return decodeURIComponent(encoded);
+  } catch {
+    return encoded;
+  }
+};
+
 export const matchPathnamePattern = (pattern: string, pathname: string) => {
   try {
-    return new URLPattern({ pathname: pattern }).exec({ pathname })?.pathname
-      .groups;
+    const groups = new URLPattern({ pathname: pattern }).exec({ pathname })
+      ?.pathname.groups;
+    if (groups) {
+      const decodedGroups: Record<string, undefined | string> = {};
+      for (const [name, value] of Object.entries(groups)) {
+        if (value) {
+          decodedGroups[name] = tryDecode(value);
+        }
+      }
+      return decodedGroups;
+    }
   } catch {
     // empty block
   }

apps/builder/package.json

@@ -119,7 +119,7 @@
     "strip-indent": "^4.0.0",
     "tiny-invariant": "^1.3.3",
     "title-case": "^4.3.2",
-    "urlpattern-polyfill": "^10.0.0",
+    "urlpattern-polyfill": "^10.1.0",
     "use-debounce": "^10.0.4",
     "valid-filename": "^4.0.0",
     "warn-once": "^0.1.1",