Skip to content

Commit

Permalink
[inertiajs#1872] Merge pull request #5 from jamesst20/svelte5-minimal…
Browse files Browse the repository at this point in the history
…-main

[inertiajs#1872] Svelte 5: Minimalest upgrade
  • Loading branch information
jamesst20 committed May 16, 2024
1 parent c8d2d86 commit 4ee2b96
Show file tree
Hide file tree
Showing 7 changed files with 2,194 additions and 866 deletions.
3,014 changes: 2,160 additions & 854 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/svelte/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
},
"main": "src/index.js",
"peerDependencies": {
"svelte": "^3.20.0 || ^4.0.0"
"svelte": "^3.20.0 || ^4.0.0 || ^5.0.0 || 5.0.0-next.1"
},
"dependencies": {
"@inertiajs/core": "1.0.16",
Expand Down
14 changes: 11 additions & 3 deletions packages/svelte/src/createInertiaApp.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import App from './App.svelte'
import SSR from './SSR.svelte'
import store from './store'

export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page }) {
export default async function createInertiaApp({ id = 'app', resolve, setup, progress = {}, page, ssr }) {
const isServer = typeof window === 'undefined'
const el = isServer ? null : document.getElementById(id)
const initialPage = page || JSON.parse(el.dataset.page)
Expand Down Expand Up @@ -44,11 +44,19 @@ export default async function createInertiaApp({ id = 'app', resolve, setup, pro
}

if (isServer) {
const { html, head } = SSR.render({ id, initialPage })
if (!ssr) {
throw new Error(`createInertiaApp must provide ssr(...) for server-side rendering.`)
}

const { html, head, css } = ssr(SSR, { id, initialPage })

return {
body: html,
head: [head],
head: [
head,
// Note: Svelte 5 no longer output CSS
...(css?.code ? [`<style data-vite-css>${css?.code}</style>`] : []),
],
}
}
}
2 changes: 1 addition & 1 deletion playgrounds/svelte/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"laravel-vite-plugin": "^1.0.2",
"lodash": "^4.17.21",
"postcss": "^8.4.38",
"svelte": "^4.2.16",
"svelte": "^5.0.0-next.1",
"svelte-check": "^3.7.1",
"tailwindcss": "^3.4.3",
"tslib": "^2.6.2",
Expand Down
10 changes: 9 additions & 1 deletion playgrounds/svelte/resources/js/app.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import { createInertiaApp } from '@inertiajs/svelte'
import { hydrate, mount } from 'svelte'

createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
return pages[`./Pages/${name}.svelte`]
},
setup({ el, App }) {
new App({ target: el, hydrate: true })
// Svelte 4: new App({ target: el, hydrate: true })

// Svelte 5
if (el.dataset.serverRendered === 'true') {
hydrate(App, { target: el })
} else {
mount(App, { target: el })
}
},
})
7 changes: 6 additions & 1 deletion playgrounds/svelte/resources/js/ssr.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import { createInertiaApp } from '@inertiajs/svelte'
import createServer from '@inertiajs/svelte/server'

import { render } from 'svelte/server'
createServer((page) =>
createInertiaApp({
page,
resolve: (name) => {
const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
return pages[`./Pages/${name}.svelte`]
},
ssr: (AppSSR, props) => {
// Svelte 4: return AppSSR.render(props)
// Svelte 5: return render(AppSSR, { props })
return render(AppSSR, { props })
},
}),
)
11 changes: 6 additions & 5 deletions playgrounds/svelte/vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ export default defineConfig({
ssr: 'resources/js/ssr.js',
refresh: true,
}),
svelte({
compilerOptions: {
hydratable: true,
},
}),
svelte({
compilerOptions: {
// Svelte 4 only
// hydratable: true
}
}),
],
})

0 comments on commit 4ee2b96

Please sign in to comment.