Svelte 5 support

[stopyransky]

So I had updated to svelte5 and the setup breaks with following error when parsing .md files with mdsvex

[vite] Error when evaluating SSR module /src/routes/(blog-articles)/+layout.server.ts: failed to import "/src/lib/data/blog-posts.ts"
|- Error: Component.render(...) is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
    at _page_md.render (.../src/routes/(blog-articles)/hello-blogging/+page.md:193:8)
    at Module.importPosts (...src/lib/utils/utils.ts:25:60)
    at .../src/lib/data/blog-posts.ts:3:25
    at async instantiateModule (.../node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:56231:9)

it appears only when i try to visit .md blog post site. Any quick fix possible to make it work under Svelte5 ?

my svelte.config.js:

import adapter from '@sveltejs/adapter-vercel';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';


/** @type {import('@sveltejs/kit').Config} */
const config = {

	extensions: ['.svelte', '.md'],
	preprocess: [
		vitePreprocess(),
		mdsvex({
			extensions: ['.md'],
		
		})
	],
	kit: {

		adapter: adapter()
	},
	vitePlugin:{

    dynamicCompileOptions({filename }){
      if(filename.includes('node_modules')) {
        return {
					customElement: true,
					runes: false
				}
      }
    }
  }

};

export default config;

[matfantinel]

I haven't looked into Svelte 5 yet, so not sure if there's an alternative way of rendering the component.

Will look into this when I'm able!

[matfantinel]

Seems like the link in that error message (https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes) has some alternatives. Feel free to try them out! I'm currently on vacation so won't be able to look into this for a bit

[stopyransky]

Yeah so in order to work for Svelte 5 there is a need to do an adjustment in $lib/utils importPosts function so it uses render from svelte/server, something like (I did not test it):

+ import { render } from 'svelte/server';

//...

// - export const importPosts = (render = false ) => {
export const importPosts = () => {
  const blogImports = import.meta.glob('$routes/*/*/*.md', { eager: true });
  const innerImports = import.meta.glob('$routes/*/*/*/*.md', { eager: true });

  const imports = { ...blogImports, ...innerImports };

  const posts: BlogPost[] = [];
  for (const path in imports) {
    const post = imports[path];
    if (post) {
      posts.push({
        ...post.metadata,
//        html: render && post.default.render ? post.default.render()?.html : undefined,
+        html: render && post.default ? render(post.default)?.html : undefined,
      });
    }
  }

  return posts;
}