Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5: Minimalest upgrade #1872

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

jamesst20
Copy link

@jamesst20 jamesst20 commented May 10, 2024

  • Upgraded playground to Svelte 5
  • Fixed SSR breaking changes
  • packages.json: Allow Svelte 5 installation
  • Improvements: Render CSS properly for Svelte 3 & 4 include component CSS in head #1761
  • Svelte 5 conventions used: None

Breaking change

Svelte 5 changed how SSR rendering works. Under Svelte 3&4, you can call MyComponent.render.
Under Svelte 5 you must import the render method from a package that doesn't exist under Svelte 3 & 4 making impossible to have compatibility for both unless we extract the component rendering outside.

We must now pass an extra parameter function that will handle the rendering outside Inertia giving the user the opportunity to use any Svelte version.

// ssr.js
createInertiaApp({
    ....
    ssr: (AppSSR, props) => {
      // Svelte 4: return AppSSR.render(props)
      // Svelte 5: return render(AppSSR, { props })
      return render(AppSSR, { props })
    },
})

I have added a warning

if (!ssr) {
      throw new Error(`createInertiaApp must provide ssr(...) for server-side rendering.`)
    }

Warning to Svelte 5 users

  • You still need to use $ syntax when importing reactive state from Inertia such as $page
  • Super reactive state will not work! Meaning $form.something.push({...}) will not trigger state refresh. This is likely a really huge bummer so you may consider using my fork adapter instead @jamesst20/inertia-svelte5. Hopefully Inertia maintainers change their about having a separate Svelte 5 adapter.
  • You still need to do stuff like $form.something = $form.something to trigger state refresh on updated object without creating a full copy before updating even if you use Svelte 5

jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 12, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 12, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 12, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 12, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 13, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 13, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 13, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 16, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 28, 2024
jamesst20 added a commit to jamesst20/inertia that referenced this pull request May 28, 2024
Extract rendering outside createInertiaApp to allow Svelte 4 & 5 compatibility
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant