From 46151eb7c7bcfb12905488e23f81c0cb19a2d666 Mon Sep 17 00:00:00 2001
From: Urata Daiki <7nohe@users.noreply.github.com>
Date: Wed, 19 Feb 2025 10:00:32 +0900
Subject: [PATCH 1/3] feat: add useRouter hook for manual route visits in React
 and Vue

---
 docs/content/docs/inertia.md                  | 30 +++++++++++++++++++
 packages/inertia/src/react/index.tsx          | 24 ++++++++++++++-
 packages/inertia/src/vue/index.tsx            | 24 ++++++++++++++-
 .../inertia/pages/posts/create.tsx            | 14 +++++++--
 .../inertia/pages/posts/create.vue            | 15 ++++++++--
 5 files changed, 101 insertions(+), 6 deletions(-)

diff --git a/docs/content/docs/inertia.md b/docs/content/docs/inertia.md
index 96560bc..a1e3291 100644
--- a/docs/content/docs/inertia.md
+++ b/docs/content/docs/inertia.md
@@ -48,6 +48,19 @@ import { Link } from '@tuyau/inertia/react'
 <Link route="users.posts.show" params={{ id: 1, postId: 2 }}>Go to post</Link>
 ```
 
+### Manual visits
+
+The `useRouter` hook is useful to manually visit a route in your application. It returns an object with a `visit` method that you can use to visit a route.
+
+```tsx
+import { useRouter } from '@tuyau/inertia/react'
+
+const router = useRouter()
+
+router.visit('users.posts.show', { id: 1, postId: 2 })
+```
+
+
 ## Vue usage
 
 To use the Inertia helpers in your Vue x Inertia project, you must install the Tuyau plugin :
@@ -85,3 +98,20 @@ import { Link } from '@tuyau/inertia/vue'
   <Link route="users.posts.show" :params="{ id: 1, postId: 2 }">Go to post</Link>
 </template>
 ```
+
+### Manual visits
+
+The `useRouter` hook is useful to manually visit a route in your application. It returns an object with a `visit` method that you can use to visit a route.
+
+
+```vue
+<script setup lang="ts">
+import { useRouter } from '@tuyau/inertia/vue'
+
+const router = useRouter()
+</script>
+
+<template>
+  <button @click="router.visit('users.posts.show', { id: 1, postId: 2 })">Go to post</button>
+</template>
+```
\ No newline at end of file
diff --git a/packages/inertia/src/react/index.tsx b/packages/inertia/src/react/index.tsx
index cbbef05..995265e 100644
--- a/packages/inertia/src/react/index.tsx
+++ b/packages/inertia/src/react/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Link as InertiaLink } from '@inertiajs/react'
 import type { TuyauClient, RouteName, GeneratedRoutes } from '@tuyau/client'
+import { Link as InertiaLink, router as InertiaRouter } from '@inertiajs/react'
 
 import type { ValidatedApi, LinkParams } from '../types.js'
 
@@ -50,3 +50,25 @@ export const Link: <Route extends RouteName<ValidatedApi['routes']>>(
   },
   // @ts-expect-error TODO: fix this
 ) => ReturnType<typeof LinkInner> = React.forwardRef(LinkInner) as any
+
+export function useRouter() {
+  const tuyau = useTuyau()
+  if (!tuyau) throw new Error('You must wrap your app in a TuyauProvider')
+
+  const router = {
+    visit: <Route extends RouteName<ValidatedApi['routes']>>(
+      props: LinkProps<Route>,
+      options?: Parameters<typeof InertiaRouter.visit>[1],
+    ) => {
+      const route = tuyau.$route(props.route, (props as any).params)
+      const url = tuyau.$url(props.route, { params: props.params } as any)
+
+      return InertiaRouter.visit(url, {
+        ...options,
+        method: route.method[0],
+      })
+    },
+  }
+
+  return router
+}
diff --git a/packages/inertia/src/vue/index.tsx b/packages/inertia/src/vue/index.tsx
index 1af3f10..6b697d9 100644
--- a/packages/inertia/src/vue/index.tsx
+++ b/packages/inertia/src/vue/index.tsx
@@ -1,8 +1,8 @@
 import { defineComponent, h, inject } from 'vue'
 import type { DefineSetupFnComponent } from 'vue'
-import { Link as InertiaLink } from '@inertiajs/vue3'
 import type { InertiaLinkProps } from '@inertiajs/vue3'
 import type { RouteName, TuyauClient } from '@tuyau/client'
+import { Link as InertiaLink, router as InertiaRouter } from '@inertiajs/vue3'
 
 import type { ValidatedApi, LinkParams } from '../types.js'
 
@@ -54,3 +54,25 @@ export const Link: <Route extends RouteName<ValidatedApi['routes']>>(
   },
   { props: ['route', 'params'] },
 )
+
+export function useRouter() {
+  const tuyau = inject<TuyauClient<any, any> | null>(getClientKey())
+  if (!tuyau) throw new Error('You must install the TuyauPlugin before using useRouter')
+
+  const router = {
+    visit: <Route extends RouteName<ValidatedApi['routes']>>(
+      props: LinkParams<Route> & Omit<InertiaLinkProps, 'href' | 'method'>,
+      options?: Parameters<typeof InertiaRouter.visit>[1],
+    ) => {
+      const route = tuyau.$route(props.route, (props as any).params)
+      const url = tuyau.$url(props.route, { params: props.params } as any)
+
+      return InertiaRouter.visit(url, {
+        ...options,
+        method: route.method[0],
+      })
+    },
+  }
+
+  return router
+}
diff --git a/playgrounds/inertia-react/inertia/pages/posts/create.tsx b/playgrounds/inertia-react/inertia/pages/posts/create.tsx
index fe46cd5..ced4a0c 100644
--- a/playgrounds/inertia-react/inertia/pages/posts/create.tsx
+++ b/playgrounds/inertia-react/inertia/pages/posts/create.tsx
@@ -1,12 +1,22 @@
 import { Head } from '@inertiajs/react'
-import { Link } from '@tuyau/inertia/react'
+import { Link, useRouter } from '@tuyau/inertia/react'
 
 export default function Home() {
+  const router = useRouter()
+
   return (
     <>
       <Head title="Create post" />
-
       <div className="container">
+        <button
+          onClick={() =>
+            router.visit({
+              route: 'home',
+            })
+          }
+        >
+          Go to home
+        </button>
         <p>Create post</p>
         <Link route="home"></Link>
       </div>
diff --git a/playgrounds/inertia-vue/inertia/pages/posts/create.vue b/playgrounds/inertia-vue/inertia/pages/posts/create.vue
index f2dfb69..ca6b9ed 100644
--- a/playgrounds/inertia-vue/inertia/pages/posts/create.vue
+++ b/playgrounds/inertia-vue/inertia/pages/posts/create.vue
@@ -1,17 +1,28 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3'
-import { Link } from '@tuyau/inertia/vue'
+import { useRouter } from '@tuyau/inertia/vue'
 
 defineProps<{ version: number }>()
+
+
+const router = useRouter()
+
+const backToHome = () => {
+  router.visit({
+    route: 'home'
+  })
+}
+
 </script>
 
 <template>
+
   <Head title="Homepage" />
 
   <div class="container">
     <div class="title">AdonisJS {{ version }} x Inertia x Vue.js</div>
 
-    <Link route="home" :params="[]"> Go to Home </Link>
+    <button @click="backToHome">Go to home</button>
     <span>
       Learn more about AdonisJS and Inertia.js by visiting the
       <a href="https://docs.adonisjs.com/guides/inertia">AdonisJS documentation</a>.

From c1ce5970b64a781665eae95531121e4e316715c4 Mon Sep 17 00:00:00 2001
From: Julien <julien@ripouteau.com>
Date: Thu, 20 Feb 2025 23:28:21 +0100
Subject: [PATCH 2/3] chore: add changeset

---
 .changeset/ninety-jeans-clean.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 .changeset/ninety-jeans-clean.md

diff --git a/.changeset/ninety-jeans-clean.md b/.changeset/ninety-jeans-clean.md
new file mode 100644
index 0000000..53b59ba
--- /dev/null
+++ b/.changeset/ninety-jeans-clean.md
@@ -0,0 +1,18 @@
+---
+'@tuyau/inertia': patch
+---
+
+Add `useRouter` hook/composable that expose a typesafe `visit` method to manually visit a route. 
+
+```tsx
+import { useRouter } from '@tuyau/inertia/vue'
+
+const router = useRouter()
+
+router.visit({
+  name: 'users.posts.show',
+  params: { id: 1, postId: 2 }
+}, { preserveState: true })
+```
+
+Also available for React.

From e2083db185b7f73e77a4fa7f9fc60f755ac94947 Mon Sep 17 00:00:00 2001
From: Julien <julien@ripouteau.com>
Date: Thu, 20 Feb 2025 23:28:44 +0100
Subject: [PATCH 3/3] test: add typing tests for useRouter

---
 packages/inertia/tests/react.spec.ts | 15 ++++++++++++++-
 packages/inertia/tests/vue.spec.ts   | 16 +++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/inertia/tests/react.spec.ts b/packages/inertia/tests/react.spec.ts
index c1af97d..5897d32 100644
--- a/packages/inertia/tests/react.spec.ts
+++ b/packages/inertia/tests/react.spec.ts
@@ -2,7 +2,7 @@ import { test } from '@japa/runner'
 import { createTuyau } from '@tuyau/client'
 import type { ApiDefinition } from '@tuyau/client'
 
-import { Link, TuyauProvider } from '../src/react/index.js'
+import { Link, TuyauProvider, useRouter } from '../src/react/index.js'
 
 const routes = [
   {
@@ -68,4 +68,17 @@ test.group('React | Typings', () => {
     const client = createTuyau({ api, baseUrl: 'http://localhost' })
     TuyauProvider({ client, children: null })
   })
+
+  test('useRouter typing', () => {
+    const router = useRouter()
+
+    router.visit({ route: 'users.index' })
+    router.visit({ route: 'users.comments.edit', params: ['1', '2'] })
+
+    // @ts-expect-error inexistent route
+    router.visit({ route: 'foo' })
+
+    // @ts-expect-error missing params
+    router.visit({ route: 'users.comments.edit' })
+  }).fails()
 })
diff --git a/packages/inertia/tests/vue.spec.ts b/packages/inertia/tests/vue.spec.ts
index a69668f..ec01f7e 100644
--- a/packages/inertia/tests/vue.spec.ts
+++ b/packages/inertia/tests/vue.spec.ts
@@ -2,7 +2,7 @@ import { test } from '@japa/runner'
 import { createTuyau } from '@tuyau/client'
 import type { ApiDefinition } from '@tuyau/client'
 
-import { Link, TuyauPlugin } from '../src/vue/index.js'
+import { useRouter, Link, TuyauPlugin } from '../src/vue/index.js'
 
 const routes = [
   {
@@ -70,4 +70,18 @@ test.group('Vue | Typings', () => {
       client: createTuyau({ baseUrl: 'http://localhost', api }),
     })
   }).fails()
+
+  test('useRouter typing', () => {
+    const router = useRouter()
+
+    router.visit({ route: 'users.index' })
+    router.visit({ route: 'users.comments.edit', params: ['1', '2'] })
+    router.visit({ route: 'users.comments.edit', params: ['1', '2'] }, { preserveScroll: true })
+
+    // @ts-expect-error inexistent route
+    router.visit({ route: 'foo' })
+
+    // @ts-expect-error missing params
+    router.visit({ route: 'users.comments.edit' })
+  }).fails()
 })