Merge branch 'async-requests-svelte'

.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 → 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,

packages/svelte/test-app/Pages/Remember/MultipleComponents.svelte

@@ -1,11 +1,11 @@
 <script>
   import ComponentA from '@/Pages/Remember/Components/ComponentA.svelte'
   import ComponentB from '@/Pages/Remember/Components/ComponentB.svelte'
-  import { inertia, remember } from '@inertiajs/svelte'
+  import { inertia, useRemember } from '@inertiajs/svelte'
 
   let untracked = ''
 
-  const form = remember({
+  const form = useRemember({
     name: '',
     remember: false,
   })

packages/svelte/test-app/Pages/Remember/Object.svelte

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

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

@@ -23,7 +23,7 @@
 </div>
 
 <div style="margin-top: 5000px">
-  <WhenVisible data="foo" once={false}>
+  <WhenVisible data="foo" always>
     <svelte:fragment slot="fallback">
       <div>Loading third one...</div>
     </svelte:fragment>

packages/svelte/test-app/app.js → packages/svelte/test-app/app.ts

@@ -1,11 +1,11 @@
-import { createInertiaApp, router } from '@inertiajs/svelte'
+import { createInertiaApp, ResolvedComponent, router } from '@inertiajs/svelte'
 
 window.testing = { Inertia: router }
 
 createInertiaApp({
   page: window.initialPage,
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+    const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {

packages/svelte/test-app/index.html

@@ -6,7 +6,7 @@
     <script>
       window.initialPage = '{{ placeholder }}'
     </script>
-    <script type="module" src="app.js"></script>
+    <script type="module" src="app.ts"></script>
   </head>
   <body>
     <div id="app"></div>

packages/svelte/test-app/package.json

@@ -2,11 +2,15 @@
   "type": "module",
   "scripts": {
     "server:run": "vite build .",
-    "watch": "vite build . --watch"
+    "watch": "vite build . --watch",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@tsconfig/svelte": "^5.0.4",
     "svelte": "^4.2.14",
+    "typescript": "^5.6.2",
     "vite": "^5.4.8"
   },
   "dependencies": {

packages/svelte/test-app/svelte.config.js

@@ -1,6 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors

packages/svelte/test-app/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
+  "include": ["*.d.ts", "*.ts", "*.js", "**/*.d.ts", "**/*.ts", "**/*.js", "**/*.svelte", "*.config.js", "*.config.cjs"]
+}

packages/svelte/test-app/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

playgrounds/svelte4/composer.json

@@ -66,7 +66,7 @@
     "repositories": [
         {
             "type": "path",
-            "url": "./../../../inertia-laravel-v2/",
+            "url": "./../../../inertia-laravel/",
             "options": {
                 "symlink": true
             }

playgrounds/svelte4/package.json

@@ -4,7 +4,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vite build --ssr"
+    "build": "vite build && vite build --ssr",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "devDependencies": {
     "@inertiajs/svelte": "^1.0.0",
@@ -16,6 +18,7 @@
     "lodash": "^4.17.19",
     "postcss": "^8.4.31",
     "svelte": "^4.2.14",
+    "svelte-check": "^4.0.0",
     "tailwindcss": "^3.2.4",
     "typescript": "^5.6.2",
     "vite": "^5.4.8"

playgrounds/svelte4/resources/js/Components/Layout.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { inertia } from '@inertiajs/svelte'
 
   export let appName

playgrounds/svelte4/resources/js/Pages/Users.svelte

@@ -8,7 +8,7 @@
   export let appName
   export let users = []
 
-  const prefetch = usePrefetch()
+  const { lastUpdatedAt, isPrefetched, isPrefetching } = usePrefetch()
 </script>
 
 <svelte:head>
@@ -19,15 +19,15 @@
 
 <div class="my-6">
   Data last refreshed at:
-  {#if $prefetch.lastUpdatedAt}
-    <span>{new Date($prefetch.lastUpdatedAt)}</span>
+  {#if $lastUpdatedAt}
+    <span>{new Date($lastUpdatedAt)}</span>
   {:else}
     <span>N/A</span>
   {/if}
-  {#if $prefetch.isPrefetched}
+  {#if $isPrefetched}
     <span> (Page is prefetched!)</span>
   {/if}
-  {#if $prefetch.isPrefetching}
+  {#if $isPrefetching}
     <span class="text-red-500">refreshing...</span>
   {/if}
 </div>

playgrounds/svelte4/resources/js/app.js → playgrounds/svelte4/resources/js/app.ts

@@ -1,8 +1,9 @@
 import { createInertiaApp } from '@inertiajs/svelte'
+import type { ResolvedComponent } from '@inertiajs/svelte'
 
 createInertiaApp({
   resolve: (name) => {
-    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+    const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
   setup({ el, App }) {

playgrounds/svelte5/resources/js/ssr.js → playgrounds/svelte4/resources/js/ssr.ts

@@ -1,11 +1,12 @@
 import { createInertiaApp } from '@inertiajs/svelte'
 import createServer from '@inertiajs/svelte/server'
+import { ResolvedComponent } from '@inertiajs/svelte'
 
 createServer((page) =>
   createInertiaApp({
     page,
     resolve: (name) => {
-      const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+      const pages = import.meta.glob<ResolvedComponent>('./Pages/**/*.svelte', { eager: true })
       return pages[`./Pages/${name}.svelte`]
     },
   }),

playgrounds/svelte4/resources/views/app.blade.php

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    @vite(['resources/css/app.css', 'resources/js/app.ts'])
     @inertiaHead
   </head>
   <body>

playgrounds/svelte4/svelte.config.js

@@ -1,6 +1,5 @@
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
-/** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors