Merge branch 'main' into main

Author: orionmiz

.changeset/purple-chefs-greet.md

@@ -0,0 +1,5 @@
+---
+"@stackflow/plugin-history-sync": minor
+---
+
+Add encode option to Route interface for converting activity params to URL string params

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

@@ -9,6 +9,11 @@ export type Route<ComponentType> = {
   decode?: (
     params: Record<string, string>,
   ) => ComponentType extends ActivityComponentType<infer U> ? U : {};
+  encode?: (
+    params: ComponentType extends ActivityComponentType<infer U>
+      ? U
+      : Record<string, any>,
+  ) => Record<string, string | undefined>;
   defaultHistory?: (
     params: Record<string, string>,
   ) => HistoryEntry[] | DefaultHistoryDescriptor;

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

@@ -76,3 +76,20 @@ test("makeTemplate - parse with given decode function", () => {
     articleId: 1234,
   });
 });
+
+test("makeTemplate - fill with encode function using JSON.stringify for object params", () => {
+  const template = makeTemplate({
+    path: "/search",
+    encode: (params) => ({
+      filter: JSON.stringify(params.filter),
+    }),
+  });
+
+  expect(
+    template.fill({
+      filter: { category: "tech", tags: ["javascript", "react"] },
+    }),
+  ).toEqual(
+    "/search/?filter=%7B%22category%22%3A%22tech%22%2C%22tags%22%3A%5B%22javascript%22%2C%22react%22%5D%7D",
+  );
+});

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);
@@ -58,11 +58,14 @@ export function makeTemplate<T>(
     : (pattern as any).names.length;
 
   return {
-    fill(params: { [key: string]: string | undefined }) {
-      const pathname = pattern.stringify(params);
+    fill(params: { [key: string]: any }) {
+      const encodedParams: { [key: string]: string | undefined } = encode
+        ? encode(params as Parameters<typeof encode>[0])
+        : 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];