Merge branch 'precognition-useform' into precognition-merge

Author: pascalbaljet

packages/core/package.json

@@ -69,4 +69,4 @@
     "esbuild-node-externals": "^1.19.1",
     "typescript": "^5.9.3"
   }
-}
+}

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/src/useForm.ts

@@ -92,7 +92,7 @@ export interface InertiaFormValidationProps<TForm extends object> {
   validateFiles(): InertiaPrecognitiveFormProps<TForm>
   validating: boolean
   validator: () => Validator
-  withFullErrors(): InertiaPrecognitiveFormProps<TForm>
+  withArrayErrors(): InertiaPrecognitiveFormProps<TForm>
   withoutFileValidation(): InertiaPrecognitiveFormProps<TForm>
   // Backward compatibility for easy migration from the original Precognition libraries
   setErrors(errors: FormDataErrors<TForm>): InertiaPrecognitiveFormProps<TForm>
@@ -148,8 +148,8 @@ export default function useForm<TForm extends FormDataType<TForm>>(
   const [validating, setValidating] = useState(false)
   const [touchedFields, setTouchedFields] = useState<string[]>([])
   const [validFields, setValidFields] = useState<string[]>([])
-  const simpleValidationErrors = useRef(true)
   const validatorDefaults = cloneDeep(defaults)
+  const arrayErrors = useRef(false)
 
   useEffect(() => {
     isMounted.current = true
@@ -524,9 +524,9 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           setTouchedFields(validator.touched())
         })
         .on('errorsChanged', () => {
-          const validationErrors = simpleValidationErrors.current
-            ? toSimpleValidationErrors(validator.errors())
-            : validator.errors()
+          const validationErrors = arrayErrors.current
+            ? validator.errors()
+            : toSimpleValidationErrors(validator.errors())
 
           setErrors(validationErrors as FormDataErrors<TForm>)
           setHasErrors(Object.keys(validationErrors).length > 0)
@@ -557,7 +557,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
 
         return precognitiveForm
       },
-      withFullErrors: () => tap(precognitiveForm, () => (simpleValidationErrors.current = false)),
+      withArrayErrors: () => tap(precognitiveForm, () => (arrayErrors.current = true)),
       setValidationTimeout: (duration: number) =>
         tap(precognitiveForm, () => validatorRef.current?.setTimeout(duration)),
       validateFiles: () => tap(precognitiveForm, () => validatorRef.current?.validateFiles()),

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/FormHelper/Precognition/AllErrors.tsx

@@ -7,7 +7,7 @@ export default () => {
   })
     .withPrecognition('post', '/precognition/array-errors')
     .setValidationTimeout(100)
-    .withFullErrors()
+    .withArrayErrors()
 
   return (
     <div>

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/src/useForm.ts

@@ -81,7 +81,7 @@ export interface InertiaFormValidationProps<TForm extends object> {
   validateFiles(): this
   validating: boolean
   validator: () => Validator
-  withFullErrors(): this
+  withArrayErrors(): this
   withoutFileValidation(): this
   // Backward compatibility for easy migration from the original Precognition libraries
   setErrors(errors: FormDataErrors<TForm> | Record<string, string | string[]>): this
@@ -145,7 +145,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
     const formWithPrecognition = () =>
       getStore(store) as any as InertiaPrecognitiveForm<TForm> & InternalPrecognitionState
 
-    let simpleValidationErrors = true
+    let arrayErrors = false
 
     if (!validatorRef) {
       const validator = createValidator((client) => {
@@ -168,9 +168,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
           setFormState('__touched', validator.touched())
         })
         .on('errorsChanged', () => {
-          const validationErrors = simpleValidationErrors
-            ? toSimpleValidationErrors(validator.errors())
-            : validator.errors()
+          const validationErrors = arrayErrors ? validator.errors() : toSimpleValidationErrors(validator.errors())
 
           setFormState('errors', {} as FormDataErrors<TForm>)
           formWithPrecognition().setError(validationErrors as FormDataErrors<TForm>)
@@ -235,7 +233,7 @@ export default function useForm<TForm extends FormDataType<TForm>>(
         validateFiles: () => tap(formWithPrecognition(), () => validatorRef?.validateFiles()),
         setValidationTimeout: (duration: number) =>
           tap(formWithPrecognition(), () => validatorRef!.setTimeout(duration)),
-        withFullErrors: () => tap(formWithPrecognition(), () => (simpleValidationErrors = false)),
+        withArrayErrors: () => tap(formWithPrecognition(), () => (arrayErrors = true)),
         // @ts-expect-error - Not released yet...
         withoutFileValidation: () => tap(formWithPrecognition(), () => validatorRef?.withoutFileValidation()),
         valid: (field: string) => formWithPrecognition().__valid.includes(field),