Merge branch 'master' into precognition-useform

Author: pascalbaljet

packages/react/src/WhenVisible.ts

@@ -1,5 +1,6 @@
 import { ReloadOptions, router } from '@inertiajs/core'
 import { createElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import usePage from './usePage'
 
 interface WhenVisibleProps {
   children: ReactNode | (() => ReactNode)
@@ -17,9 +18,25 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
   fallback = fallback ?? null
 
   const [loaded, setLoaded] = useState(false)
-  const hasFetched = useRef<boolean>(false)
   const fetching = useRef<boolean>(false)
   const ref = useRef<HTMLDivElement>(null)
+  const observer = useRef<IntersectionObserver | null>(null)
+
+  const page = usePage()
+
+  useEffect(() => {
+    if (Array.isArray(data)) {
+      // For arrays, reset loaded if any prop becomes undefined
+      if (data.some((key) => page.props[key] === undefined)) {
+        setLoaded(false)
+      }
+    } else if (data) {
+      // For single prop, reset loaded if prop becomes undefined
+      if (page.props[data] === undefined) {
+        setLoaded(false)
+      }
+    }
+  }, [data, ...(Array.isArray(data) ? data.map((key) => page.props[key]) : [page.props[data!]])])
 
   const getReloadParams = useCallback<() => Partial<ReloadOptions>>(() => {
     if (data) {
@@ -35,26 +52,23 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
     return params
   }, [params, data])
 
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
+  const registerObserver = () => {
+    observer.current?.disconnect()
 
-    const observer = new IntersectionObserver(
+    observer.current = new IntersectionObserver(
       (entries) => {
         if (!entries[0].isIntersecting) {
           return
         }
 
-        if (!always && hasFetched.current) {
-          observer.disconnect()
+        if (fetching.current) {
+          return
         }
 
-        if (fetching.current) {
+        if (!always && loaded) {
           return
         }
 
-        hasFetched.current = true
         fetching.current = true
 
         const reloadParams = getReloadParams()
@@ -71,7 +85,7 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
             reloadParams.onFinish?.(e)
 
             if (!always) {
-              observer.disconnect()
+              observer.current?.disconnect()
             }
           },
         })
@@ -81,12 +95,20 @@ const WhenVisible = ({ children, data, params, buffer, as, always, fallback }: W
       },
     )
 
-    observer.observe(ref.current)
+    observer.current.observe(ref.current!)
+  }
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    registerObserver()
 
     return () => {
-      observer.disconnect()
+      observer.current?.disconnect()
     }
-  }, [ref, getReloadParams, buffer])
+  }, [loaded, ref, getReloadParams, buffer])
 
   const resolveChildren = () => (typeof children === 'function' ? children() : children)
   const resolveFallback = () => (typeof fallback === 'function' ? fallback() : fallback)

packages/react/test-app/Pages/DeferredProps/PartialReloads.tsx

@@ -0,0 +1,51 @@
+import { Deferred, router, usePage } from '@inertiajs/react'
+
+const FooTimestamp = () => {
+  const { foo } = usePage<{ foo?: { timestamp: string } }>().props
+
+  return <div id="foo-timestamp">{foo?.timestamp}</div>
+}
+
+const BarTimestamp = () => {
+  const { bar } = usePage<{ bar?: { timestamp: string } }>().props
+
+  return <div id="bar-timestamp">{bar?.timestamp}</div>
+}
+
+const PartialReloads = () => {
+  const reloadOnlyFoo = () => {
+    router.reload({
+      only: ['foo'],
+    })
+  }
+
+  const reloadOnlyBar = () => {
+    router.reload({
+      only: ['bar'],
+    })
+  }
+
+  const reloadBoth = () => {
+    router.reload({
+      only: ['foo', 'bar'],
+    })
+  }
+
+  return (
+    <>
+      <Deferred data="foo" fallback={<div>Loading foo...</div>}>
+        <FooTimestamp />
+      </Deferred>
+
+      <Deferred data="bar" fallback={<div>Loading bar...</div>}>
+        <BarTimestamp />
+      </Deferred>
+
+      <button onClick={reloadOnlyFoo}>Reload foo only</button>
+      <button onClick={reloadOnlyBar}>Reload bar only</button>
+      <button onClick={reloadBoth}>Reload both</button>
+    </>
+  )
+}
+
+export default PartialReloads

packages/react/test-app/Pages/WhenVisibleArrayReload.tsx

@@ -0,0 +1,33 @@
+import { router, WhenVisible } from '@inertiajs/react'
+
+interface Props {
+  firstData?: {
+    text: string
+  }
+  secondData?: {
+    text: string
+  }
+}
+
+export default ({ firstData, secondData }: Props) => {
+  const handleReload = () => {
+    router.reload()
+  }
+
+  return (
+    <div>
+      <h1>WhenVisible + Array Props + Reload</h1>
+
+      <button onClick={handleReload}>Reload Page</button>
+
+      <div style={{ marginTop: '2000px', padding: '20px', border: '1px solid #ccc' }}>
+        <WhenVisible data={['firstData', 'secondData']} fallback={<p>Loading array data...</p>}>
+          <div>
+            <p>{firstData?.text}</p>
+            <p>{secondData?.text}</p>
+          </div>
+        </WhenVisible>
+      </div>
+    </div>
+  )
+}

packages/react/test-app/Pages/WhenVisibleReload.tsx

@@ -0,0 +1,27 @@
+import { router, WhenVisible } from '@inertiajs/react'
+
+interface Props {
+  lazyData?: {
+    text: string
+  }
+}
+
+export default ({ lazyData }: Props) => {
+  const handleReload = () => {
+    router.reload()
+  }
+
+  return (
+    <div>
+      <h1>WhenVisible + Reload</h1>
+
+      <button onClick={handleReload}>Reload Page</button>
+
+      <div style={{ marginTop: '2000px', padding: '20px', border: '1px solid #ccc' }}>
+        <WhenVisible data="lazyData" fallback={<p>Loading lazy data...</p>}>
+          {lazyData?.text}
+        </WhenVisible>
+      </div>
+    </div>
+  )
+}

packages/svelte/src/components/WhenVisible.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { router, type ReloadOptions } from '@inertiajs/core'
-  import { onDestroy, onMount } from 'svelte'
+  import { onDestroy } from 'svelte'
+  import { usePage } from '../page'
 
   export let data: string | string[] = ''
   export let params: ReloadOptions = {}
@@ -13,22 +14,38 @@
   let el: HTMLElement
   let observer: IntersectionObserver | null = null
 
-  onMount(() => {
-    if (!el) {
-      return
+  const page = usePage()
+
+  // Watch for page prop changes and reset loaded state when data becomes undefined
+  $: {
+    if (Array.isArray(data)) {
+      // For arrays, reset loaded if any prop becomes undefined
+      if (data.some((key) => $page.props[key] === undefined)) {
+        loaded = false
+      }
+    } else if ($page.props[data as string] === undefined) {
+      loaded = false
     }
+  }
+
+  $: if (el) {
+    registerObserver()
+  }
+
+  function registerObserver() {
+    observer?.disconnect()
 
     observer = new IntersectionObserver(
       (entries) => {
         if (!entries[0].isIntersecting) {
           return
         }
 
-        if (!always) {
-          observer?.disconnect()
+        if (fetching) {
+          return
         }
 
-        if (fetching) {
+        if (!always && loaded) {
           return
         }
 
@@ -46,6 +63,10 @@
             loaded = true
             fetching = false
             reloadParams.onFinish?.(event)
+
+            if (!always) {
+              observer?.disconnect()
+            }
           },
         })
       },
@@ -55,7 +76,7 @@
     )
 
     observer.observe(el)
-  })
+  }
 
   onDestroy(() => {
     observer?.disconnect()

packages/svelte/test-app/Pages/DeferredProps/PartialReloads.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { Deferred, router } from '@inertiajs/svelte'
+
+  export let foo: { timestamp: string } | undefined
+  export let bar: { timestamp: string } | undefined
+
+  const reloadOnlyFoo = () => {
+    router.reload({
+      only: ['foo'],
+    })
+  }
+
+  const reloadOnlyBar = () => {
+    router.reload({
+      only: ['bar'],
+    })
+  }
+
+  const reloadBoth = () => {
+    router.reload({
+      only: ['foo', 'bar'],
+    })
+  }
+</script>
+
+<Deferred data="foo">
+  <svelte:fragment slot="fallback">
+    <div>Loading foo...</div>
+  </svelte:fragment>
+  <div id="foo-timestamp">{foo?.timestamp}</div>
+</Deferred>
+
+<Deferred data="bar">
+  <svelte:fragment slot="fallback">
+    <div>Loading bar...</div>
+  </svelte:fragment>
+  <div id="bar-timestamp">{bar?.timestamp}</div>
+</Deferred>
+
+<button on:click={reloadOnlyFoo}>Reload foo only</button>
+<button on:click={reloadOnlyBar}>Reload bar only</button>
+<button on:click={reloadBoth}>Reload both</button>

packages/svelte/test-app/Pages/WhenVisibleArrayReload.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { router, WhenVisible } from '@inertiajs/svelte'
+
+  export let firstData:
+    | {
+        text: string
+      }
+    | undefined = undefined
+
+  export let secondData:
+    | {
+        text: string
+      }
+    | undefined = undefined
+
+  const handleReload = () => {
+    router.reload()
+  }
+</script>
+
+<div>
+  <h1>WhenVisible + Array Props + Reload</h1>
+
+  <button on:click={handleReload}>Reload Page</button>
+
+  <div style="margin-top: 2000px; padding: 20px; border: 1px solid #ccc">
+    <WhenVisible data={['firstData', 'secondData']}>
+      <svelte:fragment slot="fallback">
+        <p>Loading array data...</p>
+      </svelte:fragment>
+
+      <div>
+        <p>{firstData?.text}</p>
+        <p>{secondData?.text}</p>
+      </div>
+    </WhenVisible>
+  </div>
+</div>

packages/svelte/test-app/Pages/WhenVisibleReload.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { router, WhenVisible } from '@inertiajs/svelte'
+
+  export let lazyData:
+    | {
+        text: string
+      }
+    | undefined = undefined
+
+  const handleReload = () => {
+    router.reload()
+  }
+</script>
+
+<div>
+  <h1>WhenVisible + Reload</h1>
+
+  <button on:click={handleReload}>Reload Page</button>
+
+  <div style="margin-top: 2000px; padding: 20px; border: 1px solid #ccc">
+    <WhenVisible data="lazyData">
+      <svelte:fragment slot="fallback">
+        <p>Loading lazy data...</p>
+      </svelte:fragment>
+
+      {lazyData?.text}
+    </WhenVisible>
+  </div>
+</div>