Compile and render string as svelte server-side component

[korywka]

Is there a way to compile string to svelte Component class?

Imagine we have component code in database as string, network fetch or read local file as string:

<div class="container">....svelte code.....</div><style>....</style>

and we need to parse it as AST and render like this comment:

sveltejs/svelte#9377 (comment)

with Component.render();

Is there a solution how to create SSR component from string?

React have similar parsers to JSX from string:
https://github.com/acornjs/acorn-jsx
https://github.com/TroyAlford/react-jsx-parser

[eltigerchino]

Something like this?

import { compile } from 'svelte/compiler';

const result = compile('<div class="container">Hello world</div><style></style>', { generate: 'ssr' }).render();

• https://svelte.dev/docs/svelte-compiler#compile
• https://svelte.dev/docs/svelte-compiler#types-compileoptions

[korywka]

Yes! But 🥹

TypeError: __vite_ssr_import_0__.compile(...).render is not a function

[korywka]

One possible solutions is something like this:

const { js } = compile(string, { generate: 'ssr' });
const blob = new Blob([js.code], { type: 'text/javascript' });
const componentUrl = `${URL.createObjectURL(blob)}`;
const module = import(/* @vite-ignore */ componentUrl);

But Vite can't play with node.js blob data... it works only in browser.

[eltigerchino]

Dug into it a bit more: compiling the JS code for the Svelte component and writing it to disk works. Then, we dynamically import the module on disk, call render, and get the html and css. Hope this helps!

// src/routes/test/+server.js
import { compile } from 'svelte/compiler';
import fs from 'node:fs';

const __dirname = new URL('.', import.meta.url).pathname;
const filename = __dirname + '/component.js';

export async function GET() {
	const result = compile(
		'<div class="container">Hello world</div><style>div { color: red; }</style>',
		{
			generate: 'ssr'
		}
	);

	fs.writeFileSync(filename, result.js.code);

	const { html, css } = (await import(filename)).default.render();

	return new Response(html + `<style>${css.code}</style>`);
}

[korywka]

Thanks! It will not work in Cloudflare and adds a bit overhead with cleanup files. But if you don’t have any other idea, I think there is no other way to do it 🥲 Definitely Svelte do this under the hood but do not exports any methods to do this.