inertiajs · Verox001 · Jan 29, 2025 · Jan 29, 2025
diff --git a/playgrounds/react/resources/js/Components/TestGrid.tsx b/playgrounds/react/resources/js/Components/TestGrid.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const TestGrid = ({ children }) => {
+    return (
+        <div className="mt-6 grid grid-cols-3 gap-4">
+            {children}
+        </div>
+    )
+}
+
+export default TestGrid
diff --git a/playgrounds/react/resources/js/Components/TestGridItem.tsx b/playgrounds/react/resources/js/Components/TestGridItem.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const TestGridItem = ({ children, title }) => {
+    return (
+        <div className="rounded border border-gray-300 p-4 text-sm text-gray-500">
+            {title && (
+                <div className="mb-2 font-bold">
+                    {title}
+                </div>
+            )}
+            {children}
+        </div>
+    )
+}
+
+export default TestGridItem
diff --git a/playgrounds/react/resources/js/Pages/Async.tsx b/playgrounds/react/resources/js/Pages/Async.tsx
@@ -0,0 +1,46 @@
+import { Head } from '@inertiajs/react'
+import Layout from '../Components/Layout'
+
+const Async = ({
+                   sleep,
+                   jonathan,
+                   taylor,
+                   joe,
+               }: {
+    sleep?: boolean
+    jonathan?: boolean
+    taylor?: boolean
+    joe?: boolean
+}) => {
+    return (
+        <>
+            <Head title="Async" />
+            <h1 className="text-3xl">Async</h1>
+            <div className="mt-6 rounded border border-yellow-500 bg-yellow-200 p-4">
+                <p>Page is loaded!</p>
+            </div>
+
+            <div className="mt-6 flex space-x-6">
+                <div className="w-1/2 rounded border border-black p-4">
+                    <p>Sleep: {sleep ? 'Yes' : 'No'}</p>
+                </div>
+
+                <div className="w-1/2 rounded border border-black p-4">
+                    <p>Jonathan: {jonathan ? 'Yes' : 'No'}</p>
+                </div>
+
+                <div className="w-1/2 rounded border border-black p-4">
+                    <p>Taylor: {taylor ? 'Yes' : 'No'}</p>
+                </div>
+
+                <div className="w-1/2 rounded border border-black p-4">
+                    <p>Joe: {joe ? 'Yes' : 'No'}</p>
+                </div>
+            </div>
+        </>
+    )
+}
+
+Async.layout = (page) => <Layout children={page} />
+
+export default Async
diff --git a/playgrounds/react/resources/js/Pages/Poll.tsx b/playgrounds/react/resources/js/Pages/Poll.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { Head, router } from '@inertiajs/react'
+import Layout from '../Components/Layout'
+import TestGrid from '../Components/TestGrid'
+import TestGridItem from '../Components/TestGridItem'
+
+const Poll = ({ users, companies }) => {
+    const [userPollCount, setUserPollCount] = useState(0)
+    const [hookPollCount, setHookPollCount] = useState(0)
+    const [companyPollCount, setCompanyPollCount] = useState(0)
+
+    const triggerAsyncRedirect = () => {
+        router.get('/elsewhere', {}, {
+            only: ['something'],
+            async: true,
+        })
+    }
+
+    useEffect(() => {
+        const startHookPolling = () => {
+            const interval = setInterval(() => {
+                setHookPollCount(prev => prev + 1)
+            }, 2000)
+            return () => clearInterval(interval)
+        }
+
+        const stopUserPolling = () => {
+            const interval = setInterval(() => {
+                setUserPollCount(prev => prev + 1)
+            }, 1000)
+            setTimeout(() => {
+                clearInterval(interval)
+                console.log('stopping user polling')
+            }, 3000)
+        }
+
+        setTimeout(() => {
+            startHookPolling()
+        }, 2000)
+
+        stopUserPolling()
+    }, [])
+
+    return (
+        <>
+            <Head title="Async Request" />
+            <h1 className="text-3xl">Poll</h1>
+            <TestGrid>
+                <TestGridItem>
+                    <div>User Poll Request Count: {userPollCount}</div>
+                    {users.map((user, index) => (
+                        <div key={index}>{user}</div>
+                    ))}
+                </TestGridItem>
+                <TestGridItem>
+                    <div>Companies Poll Request Count: {companyPollCount}</div>
+                    {companies.map((company, index) => (
+                        <div key={index}>{company}</div>
+                    ))}
+                </TestGridItem>
+                <TestGridItem>
+                    <div>Hook Poll Request Count: {hookPollCount}</div>
+                </TestGridItem>
+                <TestGridItem>
+                    <button onClick={triggerAsyncRedirect}>Trigger Async Redirect</button>
+                </TestGridItem>
+            </TestGrid>
+        </>
+    )
+}
+
+Poll.layout = page => <Layout children={page} />
+
+export default Poll
diff --git a/playgrounds/svelte5/resources/js/Components/TestGrid.svelte b/playgrounds/svelte5/resources/js/Components/TestGrid.svelte
@@ -0,0 +1,8 @@
+<script>
+  let className = ''
+  export { className as class }
+</script>
+
+<div {...$$restProps} class="mt-6 grid grid-cols-3 gap-4 {className}">
+  <slot />
+</div>
diff --git a/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte b/playgrounds/svelte5/resources/js/Components/TestGridItem.svelte
@@ -0,0 +1,14 @@
+<script>
+  let className
+  export { className as class }
+</script>
+
+<div {...$$restProps} class="rounded border border-gray-300 p-4 text-sm text-gray-500 {className}">
+  {#if $$slots.title}
+    <div class="mb-2 font-bold">
+      <slot name="title" />
+    </div>
+  {/if}
+
+  <slot />
+</div>
diff --git a/playgrounds/svelte5/resources/js/Pages/Async.svelte b/playgrounds/svelte5/resources/js/Pages/Async.svelte
@@ -0,0 +1,154 @@
+<script context="module">
+  export { default as layout } from '../Components/Layout.svelte'
+</script>
+
+<script lang="ts">
+  import { router, useForm } from '@inertiajs/svelte'
+  import TestGrid from '../Components/TestGrid.svelte'
+  import TestGridItem from '../Components/TestGridItem.svelte'
+
+  export let appName
+  export let jonathan: boolean
+  export let taylor: boolean
+  export let joe: boolean
+
+  let reloadCount = 0
+  const form = useForm({ jonathan, taylor, joe })
+
+  $: console.log('watched reload count value', reloadCount)
+
+  function submit() {
+    router.post(
+      '/async/checkbox',
+      {
+        jonathan: $form.jonathan,
+        taylor: $form.taylor,
+        joe: $form.joe,
+      },
+      {
+        async: true,
+      },
+    )
+  }
+
+  function simulateConflict() {
+    router.reload({
+      only: ['sleep'],
+    })
+    router.visit('/sleepy/2')
+  }
+
+  function triggerVisitThenReload() {
+    router.visit('/sleepy/1')
+    router.reload({
+      only: ['sleep'],
+    })
+  }
+
+  function triggerLongReload() {
+    router.reload({
+      only: ['sleep'],
+      onFinish() {
+        console.log('finished reload')
+        reloadCount++
+        console.log('incremented reload count')
+      },
+    })
+  }
+
+  function triggerCancel() {
+    router.post(
+      '/sleepy/3',
+      {},
+      {
+        onCancelToken: (token) => {
+          console.log('onCancelToken')
+
+          setTimeout(() => {
+            console.log('CANCELLING!')
+            token.cancel()
+          }, 1000)
+        },
+      },
+    )
+  }
+
+  function triggerCancelAfterFinish() {
+    let cancelToken
+
+    router.post(
+      '/sleepy/1',
+      {},
+      {
+        onCancelToken: (token) => {
+          console.log('onCancelToken')
+
+          cancelToken = token
+        },
+        onFinish: () => {
+          console.log('onFinish')
+          console.log('CANCELLING!')
+          cancelToken.cancel()
+        },
+      },
+    )
+  }
+</script>
+
+<svelte:head>
+  <title>Async Request - {appName}</title>
+</svelte:head>
+
+<h1 class="text-3xl">Async Request</h1>
+<p class="mt-6">Reload Count: {reloadCount}</p>
+
+<TestGrid>
+  <TestGridItem class="space-y-4">
+    <p>Trigger an async reload that takes a moment and immediately programmatically visit another page</p>
+    <button class="rounded bg-green-600 px-4 py-2 text-white" on:click={simulateConflict}>Reload → Visit</button>
+  </TestGridItem>
+
+  <TestGridItem class="space-y-4">
+    <form on:change={submit}>
+      <label class="block">
+        <input bind:checked={$form.jonathan} type="checkbox" class="mr-2" />
+        Jonathan
+      </label>
+      <label class="block">
+        <input bind:checked={$form.taylor} type="checkbox" class="mr-2" />
+        Taylor
+      </label>
+      <label class="block">
+        <input bind:checked={$form.joe} type="checkbox" class="mr-2" />
+        Joe
+      </label>
+    </form>
+    <p>You can check these on and off and then navigate to another page and the requests should still complete.</p>
+    <p>Toggling "Joe" on will cause a redirect to "Article", simulating an authorized action e.g.</p>
+  </TestGridItem>
+
+  <TestGridItem class="space-y-4">
+    <p>Trigger programmatic visit and an async reload one after another</p>
+
+    <p>Reload should still happen but won't re-direct back to the reloaded component, we should respect the visit</p>
+
+    <button on:click={triggerVisitThenReload} class="rounded bg-green-600 px-4 py-2 text-white">Visit → Reload</button>
+  </TestGridItem>
+
+  <TestGridItem class="space-y-4">
+    <p>Simply trigger a 4 second reload so you can navigate or do whatever you'd like during it.</p>
+    <button on:click={triggerLongReload} class="rounded bg-green-600 px-4 py-2 text-white">Trigger Long Reload</button>
+  </TestGridItem>
+
+  <TestGridItem class="space-y-4">
+    <p>Trigger an automatic cancellation from the token.</p>
+    <button on:click={triggerCancel} class="rounded bg-green-600 px-4 py-2 text-white">Trigger Cancel</button>
+  </TestGridItem>
+
+  <TestGridItem class="space-y-4">
+    <p>Trigger an automatic cancellation from the token after finishing request.</p>
+    <button on:click={triggerCancelAfterFinish} class="rounded bg-green-600 px-4 py-2 text-white">
+      Trigger Cancel After Finish
+    </button>
+  </TestGridItem>
+</TestGrid>