feat(history-sync): add encode interface

Author: XiNiHa

.changeset/orange-kangaroos-camp.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-history-sync": minor
+---
+
+Add `encode` interface

extensions/plugin-history-sync/src/RouteLike.ts

@@ -4,7 +4,12 @@ export type Route<K> = {
   path: string;
   decode?: (
     params: Record<string, string>,
-  ) => K extends ActivityComponentType<infer U> ? U : {};
+  ) => K extends ActivityComponentType<infer U> ? U : Record<string, unknown>;
+  encode?: (
+    params: K extends ActivityComponentType<infer U>
+      ? U
+      : Record<string, unknown>,
+  ) => Record<string, string>;
 };
 
 export type RouteLike<T> = string | string[] | Route<T> | Route<T>[];

extensions/plugin-history-sync/src/makeTemplate.spec.ts

@@ -76,3 +76,37 @@ test("makeTemplate - parse with given decode function", () => {
     articleId: 1234,
   });
 });
+
+test("makeTemplate - fill with given encode function", () => {
+  const template = makeTemplate({
+    path: "/articles/:articleId",
+    encode: ({ id }) => ({
+      articleId: String(id),
+    }),
+  });
+
+  expect(template.fill({ id: 1234 as unknown as string })).toEqual(
+    "/articles/1234/",
+  );
+});
+
+test("makeTemplate - roundtrip with given encode and decode function", () => {
+  const template = makeTemplate({
+    path: "/articles/:articleId",
+    encode: ({ id }) => ({
+      articleId: String(id),
+    }),
+    decode: ({ articleId }) => ({
+      id: Number(articleId),
+    }),
+  });
+
+  expect(template.fill(template.parse("/articles/1234/") ?? {})).toStrictEqual(
+    "/articles/1234/",
+  );
+  expect(
+    template.parse(template.fill({ id: 1234 as unknown as string })),
+  ).toStrictEqual({
+    id: 1234,
+  });
+});

extensions/plugin-history-sync/src/makeTemplate.ts

@@ -46,7 +46,7 @@ export interface UrlPatternOptions {
 }
 
 export function makeTemplate<T>(
-  { path, decode }: Route<T>,
+  { path, decode, encode }: Route<T>,
   urlPatternOptions?: UrlPatternOptions,
 ) {
   const pattern = new UrlPattern(`${path}(/)`, urlPatternOptions);
@@ -59,10 +59,11 @@ export function makeTemplate<T>(
 
   return {
     fill(params: { [key: string]: string | undefined }) {
-      const pathname = pattern.stringify(params);
+      const encodedParams = encode ? encode(params as any) : params;
+      const pathname = pattern.stringify(encodedParams);
       const pathParams = pattern.match(pathname);
 
-      const searchParamsMap = { ...params };
+      const searchParamsMap = { ...encodedParams };
 
       Object.keys(pathParams).forEach((key) => {
         delete searchParamsMap[key];