client side only visits

Author: joetannenbaum

packages/core/src/router.ts

@@ -11,6 +11,9 @@ import { RequestStream } from './requestStream'
 import { Scroll } from './scroll'
 import {
   ActiveVisit,
+  ClientSidePushOptions,
+  ClientSideReplaceOptions,
+  ClientSideVisitOptions,
   GlobalEvent,
   GlobalEventNames,
   GlobalEventResult,
@@ -255,6 +258,31 @@ export class Router {
     return history.decrypt()
   }
 
+  public replace(params: ClientSideReplaceOptions): void {
+    const current = currentPage.get()
+
+    this.clientVisit(
+      {
+        ...current,
+        ...params,
+        props: params.props ? params.props(current.props) : current.props,
+      },
+      { replace: true },
+    )
+  }
+
+  public push(params: ClientSidePushOptions): void {
+    this.clientVisit(params)
+  }
+
+  protected clientVisit(params: ClientSideVisitOptions, { replace = false }: { replace?: boolean } = {}): void {
+    currentPage.set(params, {
+      replace,
+      preserveScroll: params.preserveScroll,
+      preserveState: params.preserveState,
+    })
+  }
+
   protected getPrefetchParams(href: string | URL, options: VisitOptions): ActiveVisit {
     return {
       ...this.getPendingVisit(href, {

packages/core/src/types.ts

@@ -49,6 +49,23 @@ export interface Page<SharedProps extends PageProps = PageProps> {
   rememberedState: Record<string, unknown>
 }
 
+interface ClientSideVisitOptions {
+  component?: Page['component']
+  url?: Page['url']
+  clearHistory?: Page['clearHistory']
+  encryptHistory?: Page['encryptHistory']
+  preserveScroll?: VisitOptions['preserveScroll']
+  preserveState?: VisitOptions['preserveState']
+}
+
+export interface ClientSideReplaceOptions extends ClientSideVisitOptions {
+  props?: (props: Page['props']) => Page['props']
+}
+
+export interface ClientSidePushOptions extends ClientSideVisitOptions {
+  props?: Page['props']
+}
+
 export type PageResolver = (name: string) => Component
 
 export type PageHandler = ({

packages/react/test-app/Pages/ClientSideVisit/Page1.jsx

@@ -0,0 +1,26 @@
+import { router } from '@inertiajs/vue3'
+
+export default ({ foo, bar }) => {
+  const replace = () => {
+    router.replace({
+      props: (props) => ({ ...props, foo: 'foo from client' }),
+    })
+  }
+
+  const push = () => {
+    router.push({
+      url: '/client-side-visit-2',
+      component: 'ClientSideVisit/Page2',
+      props: { baz: 'baz from client' },
+    })
+  }
+
+  return (
+    <div>
+      <div>{foo}</div>
+      <div>{bar}</div>
+      <button onClick={replace}>Replace</button>
+      <button onClick={push}>Push</button>
+    </div>
+  )
+}

packages/react/test-app/Pages/ClientSideVisit/Page2.jsx

@@ -0,0 +1,3 @@
+export default ({ baz }) => {
+  return <div>{baz}</div>
+}

packages/svelte/test-app/Pages/ClientSideVisit/Page1.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { router } from '@inertiajs/svelte'
+
+  export let foo;
+  export let bar;
+
+  const replace = () => {
+    router.replace({
+      props: (props) => ({ ...props, foo: 'foo from client' }),
+    });
+  };
+
+  const push = () => {
+    router.push({
+      url: '/client-side-visit-2',
+      component: 'ClientSideVisit/Page2',
+      props: { baz: 'baz from client' },
+    });
+  };
+</script>
+
+<div>
+  <div>{foo}</div>
+  <div>{bar}</div>
+  <button on:click={replace}>Replace</button>
+  <button on:click={push}>Push</button>
+</div>

packages/svelte/test-app/Pages/ClientSideVisit/Page2.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let baz;
+</script>
+
+<div>{baz}</div>

packages/vue3/test-app/Pages/ClientSideVisit/Page1.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3'
+
+defineProps<{
+  foo: string
+  bar: string
+}>()
+
+const replace = () => {
+  router.replace({
+    props: (props) => ({ ...props, foo: 'foo from client' }),
+  })
+}
+
+const push = () => {
+  router.push({
+    url: '/client-side-visit-2',
+    component: 'ClientSideVisit/Page2',
+    props: {
+      baz: 'baz from client',
+    },
+  })
+}
+</script>
+
+<template>
+  <div>{{ foo }}</div>
+  <div>{{ bar }}</div>
+  <button @click="replace">Replace</button>
+  <button @click="push">Push</button>
+</template>

packages/vue3/test-app/Pages/ClientSideVisit/Page2.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  baz: string
+}>()
+</script>
+
+<template>
+  <div>{{ baz }}</div>
+</template>

tests/app/server.js

@@ -74,6 +74,13 @@ app.get('/links/headers/version', (req, res) =>
 app.get('/links/data-loading', (req, res) => inertia.render(req, res, { component: 'Links/DataLoading' }))
 app.get('/links/prop-update', (req, res) => inertia.render(req, res, { component: 'Links/PropUpdate' }))
 
+app.get('/client-side-visit', (req, res) =>
+  inertia.render(req, res, {
+    component: 'ClientSideVisit/Page1',
+    props: { foo: 'foo from server', bar: 'bar from server' },
+  }),
+)
+
 app.get('/visits/partial-reloads', (req, res) =>
   inertia.render(req, res, {
     component: 'Visits/PartialReloads',

tests/client-side-visits.spec.ts

@@ -0,0 +1,52 @@
+import test, { expect } from '@playwright/test'
+import { pageLoads, requests } from './support'
+
+test('replaces the page client side', async ({ page }) => {
+  pageLoads.watch(page)
+
+  await page.goto('/client-side-visit')
+
+  requests.listen(page)
+
+  await expect(page.getByText('foo from server')).toBeVisible()
+  await expect(page.getByText('bar from server')).toBeVisible()
+  await expect(page.getByText('foo from client')).not.toBeVisible()
+
+  await page.getByRole('button', { name: 'Replace' }).click()
+
+  await expect(page).toHaveURL('/client-side-visit')
+  await expect(page.getByText('foo from server')).not.toBeVisible()
+  await expect(page.getByText('foo from client')).toBeVisible()
+  await expect(page.getByText('bar from server')).toBeVisible()
+
+  await expect(requests.requests.length).toBe(0)
+
+  const historyLength = await page.evaluate(() => window.history.length)
+
+  await expect(historyLength).toBe(2)
+})
+
+test('pushes the page client side', async ({ page }) => {
+  pageLoads.watch(page)
+
+  await page.goto('/client-side-visit')
+
+  requests.listen(page)
+
+  await expect(page.getByText('foo from server')).toBeVisible()
+  await expect(page.getByText('bar from server')).toBeVisible()
+  await expect(page.getByText('baz from client')).not.toBeVisible()
+
+  await page.getByRole('button', { name: 'Push' }).click()
+
+  await expect(page).toHaveURL('/client-side-visit-2')
+  await expect(page.getByText('foo from server')).not.toBeVisible()
+  await expect(page.getByText('bar from server')).not.toBeVisible()
+  await expect(page.getByText('baz from client')).toBeVisible()
+
+  await expect(requests.requests.length).toBe(0)
+
+  const historyLength = await page.evaluate(() => window.history.length)
+
+  await expect(historyLength).toBe(3)
+})