Update to Svelte 5

[m2rtv]

Would be nice if we could use Svelte 5 at some point as well.
Enjoying Plugma so far, thanks!

[gavinmcfarland]

Hi @m2rtv 👋 .

You should be able to get it working with Svelte 5 by doing the following steps:

Update Svelte dependencies

npm install svelte@latest @sveltejs/vite-plugin-svelte@next

Svelte recommends you use the next version of vite-plugin-svelte:

[vite-plugin-svelte] You are using Svelte 5.1.2 with vite-plugin-svelte@3. Active Svelte 5 support has moved to vite-plugin-svelte@4.
        To receive bug fixes and new features update your devDependencies to "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6" and install.
        For framework integrations that depend on it, you might have to add an override:
        "overrides": {"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"}

Update vite.config.js

Then in your vite.config.js file, include the following compiler options.

/** @type {import('vite').UserConfig} */

import { svelte } from "@sveltejs/vite-plugin-svelte";
import baseConfig from 'plugma/lib/vite.config.js';
import { defineConfig, mergeConfig } from "vite";

export default defineConfig(mergeConfig(baseConfig, {
	plugins: [svelte({
	        // ...
		compilerOptions: {
			compatibility: {
				componentApi: 4
			}
		}
	})]
}));

You might have some migration to do on top of this. More details on Svelte's website:
https://svelte.dev/docs/svelte/v5-migration-guide

Next release of Plugma

While you're here, you may want to try the next release of Plugma. It's relatively stable and will be released shortly. There is one breaking change in the vite.config.js file. It should walk you through the changes, but if not, you can read the migration guide.

You can try using:

npm install plugma@next

[m2rtv]

That works, thanks!

[gavinmcfarland]

Sorry that should have said npm install plugma@next.

[gavinmcfarland]

Hi @m2rtv,

Having played with Svelte 5 some more, you can actually update your ui.js file to use the following:

import { mount } from 'svelte'
import "./styles.css";
import App from './App.svelte'

const app = mount(App, {
	target: document.getElementById('app'),
})

export default app

This means you can remove the compiler options.

Also, the next major release of Plugma is now available.

Just install it using:

npm install plugma@latest

[m2rtv]

Thanks and congrats on the v1 release!

[gavinmcfarland]

Thank you. Hope you enjoy using it. As always, I really appreciate your feedback.