migrate to Svelte 5

BREAKING CHANGE: Svelte 5 is now required.

packages/render-svelte/package.json

@@ -39,7 +39,7 @@
     "svelte"
   ],
   "peerDependencies": {
-    "svelte": "^4",
+    "svelte": "^5",
     "vite-plugin-minissg": "^1 || ^3 || ^4"
   }
 }

packages/render-svelte/src/index.ts

@@ -5,15 +5,16 @@ import { js } from '../../vite-plugin-minissg/src/util'
 const renderer: Renderer = {
   render: {
     server: () => js`
+      import { render as svelteRender } from 'svelte/server'
       export default function render(Component) {
-        const { html, head } = Component.render()
+        const { html, head } = svelteRender(Component)
         const i = /\s*<\/head\s*>/.exec(html)?.index ?? 0
         return html.slice(0, i) + head + html.slice(i)
       }`
   },
   hydrate: {
     server: ({ id, moduleId, parameter: div }) => js`
-      <script>
+      <script module>
         import Component from ${moduleId}
         export * from ${moduleId}
       </script>
@@ -24,11 +25,12 @@ const renderer: Renderer = {
         <Component {...$$props} />
       </svelte:element>`,
     client: ({ id, moduleId, parameter: div }) => js`
+      import { hydrate } from 'svelte'
       import Component from ${moduleId}
       const selector = ${`${div || 'div'}[data-hydrate=${JSON.stringify(id)}]`}
       Array.from(document.querySelectorAll(selector), elem => {
         const props = JSON.parse(elem.dataset.hydrateArgs)
-        new Component({ target: elem, hydrate: true, props })
+        hydrate(Component, { target: elem, hydrate: true, props })
       })`
   }
 }

template/svelte/src/App.svelte

@@ -3,7 +3,7 @@
   import MinissgLogo from './minissg.svg'
   import SvelteLogo from './svelte.svg'
 
-  let count = 0
+  let count = $state(0)
   const increment = () => {
     count += 1
   }
@@ -23,7 +23,7 @@
   </div>
   <h1>Vite + Minissg + Svelte</h1>
   <div>
-    <button class="counter" on:click={increment}>
+    <button class="counter" onclick={increment}>
       count is {count}
     </button>
   </div>

template/svelte/src/browser.js

@@ -1,3 +1,4 @@
+import { mount } from 'svelte'
 import App from './App.svelte'
 
-export default new App({ target: document.getElementById('app') })
+mount(App, { target: document.getElementById('app') })