Merge branch 'async-requests-svelte'

Author: joetannenbaum

.prettierignore

@@ -1 +1,8 @@
 .github/
+**/.svelte-kit
+**/bootstrap/ssr
+**/composer.json
+**/composer.lock
+**/dist
+**/public/build
+**/vendor

packages/svelte/package.json

@@ -40,7 +40,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^3.20.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.244"
+    "svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.244"
   },
   "dependencies": {
     "@inertiajs/core": "1.2.0",

packages/svelte/src/components/Link.svelte

@@ -24,10 +24,11 @@
   export let cacheFor: CacheForOption | CacheForOption[] = 0
 
   $: asProp = method !== 'get' ? 'button' : as.toLowerCase()
-  $: elProps = {
-    a: { href },
-    button: { type: 'button' },
-  }[asProp] || {}
+  $: elProps =
+    {
+      a: { href },
+      button: { type: 'button' },
+    }[asProp] || {}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

packages/svelte/src/components/WhenVisible.svelte

@@ -6,7 +6,7 @@
   export let params: ReloadOptions = {}
   export let buffer: number = 0
   export let elementTag: keyof HTMLElementTagNameMap = 'div'
-  export let once: boolean = true
+  export let always: boolean = false
 
   let loaded = false
   let fetching = false
@@ -24,7 +24,7 @@
           return
         }
 
-        if (once) {
+        if (!always) {
           observer?.disconnect()
         }
 
@@ -76,7 +76,7 @@
   }
 </script>
 
-{#if !once || !loaded}
+{#if always || !loaded}
   <svelte:element this={elementTag} bind:this={el} />
 {/if}
 

packages/svelte/src/createInertiaApp.ts

@@ -12,7 +12,7 @@ type AppComponent = ComponentType<App> & { render: () => SvelteRenderResult }
 interface CreateInertiaAppProps {
   id?: string
   resolve: ComponentResolver
-  setup: (props: {
+  setup?: (props: {
     el: Element
     App: ComponentType<App>
     props: {

packages/svelte/src/index.ts

@@ -5,8 +5,8 @@ export { default as WhenVisible } from './components/WhenVisible.svelte'
 export { default as createInertiaApp } from './createInertiaApp'
 export { default as inertia } from './link'
 export { default as page } from './page'
-export { default as remember } from './remember'
 export { type ResolvedComponent } from './types'
 export { default as useForm, type InertiaForm, type InertiaFormProps } from './useForm'
 export { default as usePoll } from './usePoll'
 export { default as usePrefetch } from './usePrefetch'
+export { default as useRemember } from './useRemember'

packages/svelte/src/usePrefetch.ts

@@ -1,47 +1,33 @@
 import { router, type VisitOptions } from '@inertiajs/core'
 import { onDestroy, onMount } from 'svelte'
-import { writable, type Readable } from 'svelte/store'
+import { readonly, writable } from 'svelte/store'
 
-interface InertiaPrefetch {
-  isPrefetched: boolean
-  isPrefetching: boolean
-  lastUpdatedAt: number | null
-  flush: () => void
-}
-
-export default function usePrefetch(options: VisitOptions = {}): Readable<InertiaPrefetch> {
-  const { subscribe, update } = writable<InertiaPrefetch>({
-    isPrefetched: false,
-    isPrefetching: false,
-    lastUpdatedAt: null,
-    flush() {
-      router.flush(window.location.pathname, options)
-    },
-  })
+export default function usePrefetch(options: VisitOptions = {}) {
+  const isPrefetched = writable(false)
+  const isPrefetching = writable(false)
+  const lastUpdatedAt = writable<number | null>(null)
 
   const cached = router.getCached(window.location.pathname, options)
   const inFlight = router.getPrefetching(window.location.pathname, options)
 
-  update((state) => ({
-    ...state,
-    isPrefetched: cached !== null,
-    isPrefetching: inFlight !== null,
-    lastUpdatedAt: cached?.staleTimestamp || null,
-  }))
+  isPrefetched.set(cached !== null)
+  isPrefetching.set(inFlight !== null)
+  lastUpdatedAt.set(cached?.staleTimestamp || null)
 
   let removePrefetchedListener: () => void
   let removePrefetchingListener: () => void
 
   onMount(() => {
     removePrefetchingListener = router.on('prefetching', ({ detail }) => {
       if (detail.visit.url.pathname === window.location.pathname) {
-        update((state) => ({ ...state, isPrefetching: true }))
+        isPrefetching.set(true)
       }
     })
 
     removePrefetchedListener = router.on('prefetched', ({ detail }) => {
       if (detail.visit.url.pathname === window.location.pathname) {
-        update((state) => ({ ...state, isPrefetched: true, isPrefetching: false }))
+        isPrefetched.set(true)
+        isPrefetching.set(false)
       }
     })
   })
@@ -51,5 +37,12 @@ export default function usePrefetch(options: VisitOptions = {}): Readable<Inerti
     removePrefetchingListener()
   })
 
-  return { subscribe }
+  return {
+    isPrefetched: readonly(isPrefetched),
+    isPrefetching: readonly(isPrefetching),
+    lastUpdatedAt: readonly(lastUpdatedAt),
+    flush() {
+      router.flush(window.location.pathname, options)
+    },
+  }
 }

packages/svelte/src/remember.ts renamed to packages/svelte/src/useRemember.ts

@@ -2,7 +2,7 @@ import { router } from '@inertiajs/core'
 import { onDestroy } from 'svelte'
 import { writable } from 'svelte/store'
 
-function useRemember<State>(initialState: State, key?: string) {
+export default function useRemember<State>(initialState: State, key?: string) {
   const restored = router.restore(key) as State | undefined
   const store = writable(restored !== undefined ? restored : initialState)
   const unsubscribe = store.subscribe((state) => router.remember(state, key))
@@ -11,5 +11,3 @@ function useRemember<State>(initialState: State, key?: string) {
 
   return store
 }
-
-export default useRemember

packages/svelte/test-app/Pages/Remember/Components/ComponentA.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { remember } from '@inertiajs/svelte'
+  import { useRemember } from '@inertiajs/svelte'
 
   let untracked = ''
 
-  const data = remember(
+  const data = useRemember(
     {
       name: '',
       remember: false,

packages/svelte/test-app/Pages/Remember/Components/ComponentB.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { remember } from '@inertiajs/svelte'
+  import { useRemember } from '@inertiajs/svelte'
 
   let untracked = ''
 
-  const data = remember(
+  const data = useRemember(
     {
       name: '',
       remember: false,