[Svelte] Upgrade to Svelte 5. Drop Svelte 4 support.

jamesst20 · Jan 6, 2025 · bb1042b · bb1042b
1 parent 0766df1
commit bb1042b
Show file tree

Hide file tree

Showing 34 changed files with 371 additions and 260 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -59,7 +59,7 @@
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@jamesst20/inertia-core": "2.0.0",
+    "@jamesst20/inertia-core": "file:../core",
     "lodash.isequal": "^4.5.0"
   }
 }
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -40,23 +40,23 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.244"
+    "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@jamesst20/inertia-core": "2.0.0",
+    "@jamesst20/inertia-core": "file:../core",
     "html-escape": "^2.0.0",
     "lodash": "^4.5.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.26",
     "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
     "@types/html-escape": "^2.0.2",
     "@types/lodash": "^4.17.7",
     "axios": "^1.7.6",
     "publint": "^0.2.10",
-    "svelte": "^4.2.16",
+    "svelte": "^5.16.2",
     "svelte-check": "^4.0.0",
     "tslib": "^2.7.0",
     "typescript": "^5.5.4",

diff --git a/packages/svelte/src/components/App.svelte b/packages/svelte/src/components/App.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { ComponentResolver, ResolvedComponent } from '../types'
   import { type Page } from '@jamesst20/inertia-core'
 
@@ -13,16 +13,14 @@
   import type { LayoutType, LayoutResolver } from '../types'
   import { router, type PageProps } from '@jamesst20/inertia-core'
   import Render, { h, type RenderProps } from './Render.svelte'
-  import { setPage } from '../page'
+  import { setPage } from '../page.svelte'
 
-  export let initialComponent: InertiaAppProps['initialComponent']
-  export let initialPage: InertiaAppProps['initialPage']
-  export let resolveComponent: InertiaAppProps['resolveComponent']
+  let {initialComponent, initialPage, resolveComponent}: InertiaAppProps = $props()
 
   let component = initialComponent
   let key: number | null = null
   let page = initialPage
-  let renderProps = resolveRenderProps(component, page, key)
+  let renderProps = $state(resolveRenderProps(component, page, key))
 
   setPage(page)
 

diff --git a/packages/svelte/src/components/Deferred.svelte b/packages/svelte/src/components/Deferred.svelte
@@ -1,30 +1,35 @@
+<script module lang="ts">
+  import { Snippet } from 'svelte'
+
+  type DeferedProps =  {
+    data: string | string[]
+    children: Snippet
+    fallback: Snippet
+  }
+</script>
+
 <script lang="ts">
   import { page } from '../index'
-  import { onDestroy } from 'svelte'
 
-  export let data: string | string[]
+  let { data, children, fallback }: DeferedProps = $props()
+  let currentPage = $derived(page.current)
+  let keys = $derived(Array.isArray(data) ? data : [data])
+  let loaded = $state(false)
 
-  const keys = Array.isArray(data) ? data : [data]
-  let loaded = false
-
-  const unsubscribe = page.subscribe(({ props }) => {
+  $effect(() => {
     // Ensures the slot isn't loaded before the deferred props are available
     window.queueMicrotask(() => {
-      loaded = keys.every((key) => typeof props[key] !== 'undefined')
+      loaded = keys.every((key) => typeof currentPage?.props?.[key] !== 'undefined')
     })
   })
 
-  onDestroy(() => {
-    unsubscribe()
-  })
-
-  if (!$$slots.fallback) {
+  if (!fallback) {
     throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot')
   }
 </script>
 
 {#if loaded}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}