From 59a2c606f8d2adf98475f25d382f65e5644cb1a0 Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Wed, 10 Jan 2024 05:59:12 -0600
Subject: [PATCH] fix(waku): link props (#360)

* fix(waku): link props

* fix: code

* fix: improve code
---
 e2e/fixtures/rsc-router/src/routes/layout.tsx |  4 +-
 examples/07_router/src/components/Counter.tsx |  2 +-
 .../07_router/src/components/HomeLayout.tsx   | 16 +++---
 .../src/components/Counter.tsx                |  2 +-
 .../10_dynamicroute/src/routes/layout.tsx     | 10 ++--
 packages/waku/src/router/client.ts            | 49 +++++++++++++------
 6 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/e2e/fixtures/rsc-router/src/routes/layout.tsx b/e2e/fixtures/rsc-router/src/routes/layout.tsx
index 8bd393f5c..e75db58f3 100644
--- a/e2e/fixtures/rsc-router/src/routes/layout.tsx
+++ b/e2e/fixtures/rsc-router/src/routes/layout.tsx
@@ -20,7 +20,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
     <ul>
       <li>
         <Link
-          href="/"
+          to="/"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
@@ -29,7 +29,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       </li>
       <li>
         <Link
-          href="/foo"
+          to="/foo"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
diff --git a/examples/07_router/src/components/Counter.tsx b/examples/07_router/src/components/Counter.tsx
index 531a2fd1e..d59db4c1d 100644
--- a/examples/07_router/src/components/Counter.tsx
+++ b/examples/07_router/src/components/Counter.tsx
@@ -11,7 +11,7 @@ export const Counter = () => {
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
       <h3>This is a client component.</h3>
-      <Link href="/">Go to Home</Link>
+      <Link to="/">Go to Home</Link>
     </div>
   );
 };
diff --git a/examples/07_router/src/components/HomeLayout.tsx b/examples/07_router/src/components/HomeLayout.tsx
index ee5fdd0db..048a6e21e 100644
--- a/examples/07_router/src/components/HomeLayout.tsx
+++ b/examples/07_router/src/components/HomeLayout.tsx
@@ -20,7 +20,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
     <ul>
       <li>
         <Link
-          href="/"
+          to="/"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
@@ -29,7 +29,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       </li>
       <li>
         <Link
-          href="/foo"
+          to="/foo"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
@@ -37,24 +37,24 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
         </Link>
       </li>
       <li>
-        <Link href="/bar" unstable_prefetchOnEnter>
+        <Link to="/bar" unstable_prefetchOnEnter>
           Bar
         </Link>
       </li>
       <li>
-        <Link href="/baz">Baz</Link>
+        <Link to="/baz">Baz</Link>
       </li>
       <li>
-        <Link href="/nested/foo">Nested / Foo</Link>
+        <Link to="/nested/foo">Nested / Foo</Link>
       </li>
       <li>
-        <Link href="/nested/bar">Nested / Bar</Link>
+        <Link to="/nested/bar">Nested / Bar</Link>
       </li>
       <li>
-        <Link href="/nested/baz">Nested / Baz</Link>
+        <Link to="/nested/baz">Nested / Baz</Link>
       </li>
       <li>
-        <Link href="/nested/qux">Nested / Qux</Link>
+        <Link to="/nested/qux">Nested / Qux</Link>
       </li>
     </ul>
     {children}
diff --git a/examples/10_dynamicroute/src/components/Counter.tsx b/examples/10_dynamicroute/src/components/Counter.tsx
index 531a2fd1e..d59db4c1d 100644
--- a/examples/10_dynamicroute/src/components/Counter.tsx
+++ b/examples/10_dynamicroute/src/components/Counter.tsx
@@ -11,7 +11,7 @@ export const Counter = () => {
       <p>Count: {count}</p>
       <button onClick={() => setCount((c) => c + 1)}>Increment</button>
       <h3>This is a client component.</h3>
-      <Link href="/">Go to Home</Link>
+      <Link to="/">Go to Home</Link>
     </div>
   );
 };
diff --git a/examples/10_dynamicroute/src/routes/layout.tsx b/examples/10_dynamicroute/src/routes/layout.tsx
index 5a49d0bc4..b5f6a3d48 100644
--- a/examples/10_dynamicroute/src/routes/layout.tsx
+++ b/examples/10_dynamicroute/src/routes/layout.tsx
@@ -20,7 +20,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
     <ul>
       <li>
         <Link
-          href="/"
+          to="/"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
@@ -29,7 +29,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       </li>
       <li>
         <Link
-          href="/foo"
+          to="/foo"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
@@ -38,7 +38,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       </li>
       <li>
         <Link
-          href="/bar"
+          to="/bar"
           unstable_prefetchOnEnter
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
@@ -48,7 +48,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       </li>
       <li>
         <Link
-          href="/nested/baz"
+          to="/nested/baz"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
@@ -57,7 +57,7 @@ const HomeLayout = ({ children }: { children: ReactNode }) => (
       </li>
       <li>
         <Link
-          href="/nested/qux"
+          to="/nested/qux"
           pending={<Pending isPending />}
           notPending={<Pending isPending={false} />}
         >
diff --git a/packages/waku/src/router/client.ts b/packages/waku/src/router/client.ts
index 164c67d29..b0677bf2e 100644
--- a/packages/waku/src/router/client.ts
+++ b/packages/waku/src/router/client.ts
@@ -11,7 +11,14 @@ import {
   useTransition,
   Fragment,
 } from 'react';
-import type { ComponentProps, FunctionComponent, ReactNode } from 'react';
+import type {
+  ComponentProps,
+  FunctionComponent,
+  ReactNode,
+  AnchorHTMLAttributes,
+  ReactElement,
+  MouseEvent,
+} from 'react';
 
 import { prefetchRSC, Root, Slot, useRefetch } from '../client.js';
 import {
@@ -69,19 +76,25 @@ export function useLocation() {
   return value.loc;
 }
 
+export type LinkProps = {
+  to: string;
+  pending?: ReactNode;
+  notPending?: ReactNode;
+  children: ReactNode;
+  unstable_prefetchOnEnter?: boolean;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+
 export function Link({
-  href,
+  to,
   children,
   pending,
   notPending,
   unstable_prefetchOnEnter,
-}: {
-  href: string;
-  children: ReactNode;
-  pending?: ReactNode;
-  notPending?: ReactNode;
-  unstable_prefetchOnEnter?: boolean;
-}) {
+  ...props
+}: LinkProps): ReactElement {
+  if (!to.startsWith('/')) {
+    throw new Error('Link must start with "/"');
+  }
   const value = useContext(RouterContext);
   const changeLocation = value
     ? value.changeLocation
@@ -94,25 +107,31 @@ export function Link({
         throw new Error('Missing Router');
       };
   const [isPending, startTransition] = useTransition();
-  const onClick = (event: MouseEvent) => {
+  const onClick = (event: MouseEvent<HTMLAnchorElement>) => {
     event.preventDefault();
-    const url = new URL(href, window.location.href);
+    const url = new URL(to, window.location.href);
     if (url.href !== window.location.href) {
       prefetchLocation(url.pathname, url.searchParams);
       startTransition(() => {
         changeLocation(url.pathname, url.searchParams);
       });
     }
+    props.onClick?.(event);
   };
   const onMouseEnter = unstable_prefetchOnEnter
-    ? () => {
-        const url = new URL(href, window.location.href);
+    ? (event: MouseEvent<HTMLAnchorElement>) => {
+        const url = new URL(to, window.location.href);
         if (url.href !== window.location.href) {
           prefetchLocation(url.pathname, url.searchParams);
         }
+        props.onMouseEnter?.(event);
       }
-    : undefined;
-  const ele = createElement('a', { href, onClick, onMouseEnter }, children);
+    : props.onMouseEnter;
+  const ele = createElement(
+    'a',
+    { ...props, href: to, onClick, onMouseEnter },
+    children,
+  );
   if (isPending && pending !== undefined) {
     return createElement(Fragment, null, ele, pending);
   }