v3: link with as child pattern

package.json

@@ -135,6 +135,7 @@
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "@size-limit/preset-small-lib": "^10.0.1",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/babel__core": "^7.20.2",
     "@types/react": "^18.2.0",
@@ -158,6 +159,6 @@
     "rollup": "^3.7.4",
     "size-limit": "^10.0.1",
     "typescript": "5.0.4",
-    "vitest": "^0.34.3"
+    "vitest": "^0.34.6"
   }
 }

packages/wouter-preact/test/preact.test.tsx

@@ -24,7 +24,8 @@ describe("Preact support", () => {
           <Link href="/albums/all" onClick={fn} data-testid="index-link">
             The Best Albums Ever
           </Link>
-          <Link to="/albums/london-calling">
+          {/* @ts-ignore */}
+          <Link to="/albums/london-calling" asChild>
             <a data-testid="featured-link">
               Featured Now: London Calling, Clash
             </a>

packages/wouter/setup-vitest.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

packages/wouter/src/index.js

@@ -183,7 +183,7 @@ export const Link = forwardRef((props, ref) => {
   const router = useRouter();
   const [, navigate] = useLocationFromRouter(router);
 
-  const { to, href = to, children, onClick } = props;
+  const { to, href = to, children, asChild, onClick } = props;
 
   const handleClick = useEvent((event) => {
     // ignores the navigation when clicked using right mouse button or
@@ -204,17 +204,26 @@ export const Link = forwardRef((props, ref) => {
     }
   });
 
-  // wraps children in `a` if needed
-  const extraProps = {
-    // handle nested routers and absolute paths
-    href: href[0] === "~" ? href.slice(1) : router.base + href,
+  const link = href[0] === "~" ? href.slice(1) : router.base + href;
+
+  if (asChild) {
+    const jsx = isValidElement(children) ? children : null;
+    return cloneElement(jsx, {
+      // handle nested routers and absolute paths
+      href: link,
+      onClick: handleClick,
+    });
+  }
+
+  return h("a", {
+    ...props,
+    href: link,
     onClick: handleClick,
     to: null,
+    replace: null,
+    state: null,
     ref,
-  };
-  const jsx = isValidElement(children) ? children : h("a", props);
-
-  return cloneElement(jsx, extraProps);
+  });
 });
 
 const flattenChildren = (children) => {