feat(history-sync): add encode interface

.changeset/orange-kangaroos-camp.md

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

docs/middleware.js

@@ -1,2 +1 @@
 export { locales as middleware } from "nextra/locales";
-

docs/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

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

@@ -1,10 +1,13 @@
 import type { ActivityComponentType } from "@stackflow/react";
 
+type Params<K> = K extends ActivityComponentType<infer U>
+  ? U
+  : Record<string, unknown>;
+
 export type Route<K> = {
   path: string;
-  decode?: (
-    params: Record<string, string>,
-  ) => K extends ActivityComponentType<infer U> ? U : {};
+  decode?: (params: Record<string, string>) => Params<K> | null;
+  encode?: (params: Params<K>) => 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];