breaking(router): string query

README.md

@@ -24,7 +24,7 @@ We recommend other frameworks for heavy ecommerce or enterprise applications. Wa
 Start a new Waku project with the `create` command for your preferred package manager. It will scaffold a new project with our default [Waku starter](https://github.com/dai-shi/waku/tree/main/examples/01_template).
 
 ```
-npm create waku@latest
+npm create waku@next
 ```
 
 **Node.js version requirement:** `^20.8.0` or `^18.17.0`
@@ -215,7 +215,7 @@ export const getConfig = async () => {
 
 ### Pages
 
-Pages render a single route, segment route, or catch-all route based on the file system path (conventions below). All page components automatically receive two props related to the rendered route: `path` (string) and `searchParams` ([URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)).
+Pages render a single route, segment route, or catch-all route based on the file system path (conventions below). All page components automatically receive two props related to the rendered route: `path` (string) and `query` (string).
 
 #### Single routes
 
@@ -493,20 +493,20 @@ The `useRouter` hook can be used to inspect the current route or perform program
 
 #### router properties
 
-The `router` object has two properties related to the current route: `path` (string) and `searchParams` ([URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)).
+The `router` object has two properties related to the current route: `path` (string) and `query` (string).
 
 ```tsx
 'use client';
 
 import { useRouter_UNSTABLE as useRouter } from 'waku';
 
 export const Component = () => {
-  const { path, searchParams } = useRouter();
+  const { path, query } = useRouter();
 
   return (
     <>
       <div>current path: {path}</div>
-      <div>current searchParams: {searchParams.toString()}</div>
+      <div>current query: {query}</div>
     </>
   );
 };

packages/waku/src/router/client.ts

@@ -50,13 +50,13 @@ const normalizeRoutePath = (path: string) => {
 
 const parseRoute = (url: URL): RouteProps => {
   if ((globalThis as any).__WAKU_ROUTER_404__) {
-    return { path: '/404', searchParams: new URLSearchParams() };
+    return { path: '/404', query: '' };
   }
   const { pathname, searchParams } = url;
   if (searchParams.has(PARAM_KEY_SKIP)) {
     console.warn(`The search param "${PARAM_KEY_SKIP}" is reserved`);
   }
-  return { path: normalizeRoutePath(pathname), searchParams };
+  return { path: normalizeRoutePath(pathname), query: searchParams.toString() };
 };
 
 type ChangeRoute = (
@@ -124,12 +124,6 @@ export function useRouter_UNSTABLE() {
     [prefetchRoute],
   );
   return {
-    get value() {
-      console.warn(
-        'router.value is deprecated. Use router.path and router.searchParams instead.',
-      );
-      return route;
-    },
     ...route,
     push,
     replace,
@@ -259,12 +253,7 @@ const getSkipList = (
     if (shouldCheck[0] && route.path !== prevProps.path) {
       return false;
     }
-    if (
-      shouldCheck[1]?.some(
-        (key) =>
-          route.searchParams.get(key) !== prevProps.searchParams.get(key),
-      )
-    ) {
+    if (shouldCheck[0] && route.query !== prevProps.query) {
       return false;
     }
     return true;
@@ -275,14 +264,7 @@ const equalRouteProps = (a: RouteProps, b: RouteProps) => {
   if (a.path !== b.path) {
     return false;
   }
-  if (a.searchParams.size !== b.searchParams.size) {
-    return false;
-  }
-  if (
-    Array.from(a.searchParams.entries()).some(
-      ([key, val]) => val !== b.searchParams.get(key),
-    )
-  ) {
+  if (a.query !== b.query) {
     return false;
   }
   return true;
@@ -362,7 +344,7 @@ const InnerRouter = ({ routerData }: { routerData: RouterData }) => {
         refetch(
           input,
           new URLSearchParams([
-            ...Array.from(route.searchParams.entries()),
+            ...Array.from(new URLSearchParams(route.query).entries()),
             ...skip.map((id) => [PARAM_KEY_SKIP, id]),
           ]),
         );
@@ -396,7 +378,7 @@ const InnerRouter = ({ routerData }: { routerData: RouterData }) => {
       }
       const input = getInputString(route.path);
       const searchParamsString = new URLSearchParams([
-        ...Array.from(route.searchParams.entries()),
+        ...Array.from(new URLSearchParams(route.query).entries()),
         ...skip.map((id) => [PARAM_KEY_SKIP, id]),
       ]).toString();
       prefetchRSC(input, searchParamsString);
@@ -470,17 +452,15 @@ const InnerRouter = ({ routerData }: { routerData: RouterData }) => {
 // Note: The router data must be a stable mutable object (array).
 type RouterData = [
   shouldSkip?: ShouldSkip,
-  locationListners?: Set<
-    (pathname: string, searchParamsString: string) => void
-  >,
+  locationListners?: Set<(path: string, query: string) => void>,
 ];
 
 const DEFAULT_ROUTER_DATA: RouterData = [];
 
 export function Router({ routerData = DEFAULT_ROUTER_DATA }) {
   const route = parseRoute(new URL(window.location.href));
   const initialInput = getInputString(route.path);
-  const initialSearchParamsString = route.searchParams.toString();
+  const initialSearchParamsString = route.query;
   const unstable_onFetchData = (data: unknown) => {
     Promise.resolve(data)
       .then((data) => {

packages/waku/src/router/common.ts

@@ -1,6 +1,6 @@
 export type RouteProps = {
   path: string;
-  searchParams: URLSearchParams;
+  query: string;
 };
 
 export function getComponentIds(path: string): readonly string[] {

packages/waku/src/router/define-router.ts

@@ -22,7 +22,7 @@ import { getPathMapping } from '../lib/utils/path.js';
 import type { PathSpec } from '../lib/utils/path.js';
 import { ServerRouter } from './client.js';
 
-type RoutePropsForLayout = Omit<RouteProps, 'searchParams'> & {
+type RoutePropsForLayout = Omit<RouteProps, 'query'> & {
   children: ReactNode;
 };
 
@@ -219,7 +219,7 @@ globalThis.__WAKU_ROUTER_PREFETCH__ = (path) => {
       ServerRouter as FunctionComponent<
         Omit<ComponentProps<typeof ServerRouter>, 'children'>
       >,
-      { route: { path: pathname, searchParams } },
+      { route: { path: pathname, query: searchParams.toString() } },
       componentIds.reduceRight(
         (acc: ReactNode, id) => createElement(Slot, { id, fallback: acc }, acc),
         null,