-
-
Notifications
You must be signed in to change notification settings - Fork 445
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2130 from inertiajs/client-only-visits
[2.x] Client side visits
- Loading branch information
Showing
10 changed files
with
198 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
import { router } from '@inertiajs/react' | ||
|
||
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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export default ({ baz }) => { | ||
return <div>{baz}</div> | ||
} |
27 changes: 27 additions & 0 deletions
27
packages/svelte/test-app/Pages/ClientSideVisit/Page1.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<script> | ||
export let baz; | ||
</script> | ||
|
||
<div>{baz}</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script setup lang="ts"> | ||
defineProps<{ | ||
baz: string | ||
}>() | ||
</script> | ||
|
||
<template> | ||
<div>{{ baz }}</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
}) |