Svelte 5: Errors are unclear

[baseplate-admin]

Hi,

This is a very nice project. Does it support svelte 5?

I have the following component

<script lang="ts">
	interface Props {
		title?: string;
		subtitle?: string;
		accentColor?: string;
	}

	let {
		title = 'Chithi',
		subtitle = 'Send up to 50 GB of files with end-to-end encryption',
		accentColor = '#3b82f6'
	}: Props = $props();

	// Style Constants for cleaner TS markup
	const cardStyle = `
		display: flex;
		width: 950px;
		height: 500px;
		background-color: #0f0f0f;
		border: 1px solid #222;
		border-radius: 40px;
		overflow: hidden;
		box-shadow: 0 30px 60px rgba(0,0,0,0.8);
	`;
</script>

<div
	style="
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #050505;
		position: relative;
	"
>
	<div
		style="
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		display: flex;
		background-image: 
			linear-gradient(to right, #121212 1px, transparent 1px),
			linear-gradient(to bottom, #121212 1px, transparent 1px);
		background-size: 50px 50px;
	"
	></div>

	<div
		style="
		position: absolute;
		top: 25%; left: 25%;
		width: 500px; height: 500px;
		background-color: {accentColor};
		filter: blur(140px);
		opacity: 0.12;
		border-radius: 100%;
	"
	></div>

	<div style={cardStyle}>
		<div
			style="
			flex: 1.2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 50px;
			background-color: #111111;
			border-right: 1px solid #222;
		"
		>
			<div
				style="
				width: 100px;
				height: 100px;
				border-radius: 30px;
				background-color: #1a1a1a;
				border: 2px dashed #444;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 24px;
			"
			>
				<div style="font-size: 50px; color: {accentColor};">+</div>
			</div>

			<div style="font-size: 36px; font-weight: 800; color: white; margin-bottom: 12px;">
				Share Files
			</div>

			<p style="font-size: 18px; color: #888; text-align: center; line-height: 1.5; margin: 0;">
				{subtitle}
			</p>

			<div
				style="
				margin-top: 40px;
				background-color: white;
				color: black;
				padding: 16px 36px;
				border-radius: 14px;
				font-weight: 700;
				font-size: 20px;
				display: flex;
			"
			>
				Select Files
			</div>
		</div>

		<div
			style="
			flex: 0.8;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 60px 40px;
			background-color: #0a0a0a;
		"
		>
			<div style="display: flex; flex-direction: column;">
				<span
					style="font-size: 14px; color: {accentColor}; font-weight: 700; letter-spacing: 3px; margin-bottom: 10px;"
				>
					PLATFORM
				</span>
				<h1
					style="font-size: 60px; font-weight: 900; color: white; margin: 0; letter-spacing: -2px;"
				>
					{title}
				</h1>
			</div>

			<div style="display: flex; align-items: center;">
				<div
					style="width: 40px; height: 2px; background-color: {accentColor}; margin-right: 15px;"
				></div>
				<span style="color: #555; font-size: 16px; font-weight: 500;"> End-to-end Encrypted </span>
			</div>
		</div>
	</div>
</div>

And i am rendering it like this:

import { ImageResponse } from '@ethercorps/sveltekit-og';
import type { RequestHandler } from '@sveltejs/kit';
import OpenGraphComponent from './OpenGraph.svelte';
// The static HTML content

export const GET: RequestHandler = async () => {
	return new ImageResponse(OpenGraphComponent, {
		width: 1200,
		height: 630,
	});
};

And it seems to generate zero logs and not rendering?

It would be great if i somehow can render svelte 5 components.

Thank you very much.

[theetherGit]

Hey @baseplate-admin
sveltekit-og v4 only supports svelte v5 and sveltekit v2. Please refer to docs sveltekit-og v4 introduced few breaking changes and there might be runtime plugin requirements.

[baseplate-admin]

@theetherGit, hi, it seems that even some Small JS operations are not working?

<script lang="ts">
	const description = `
		Welcome to Public Chithi instance. It allows you to share file with a link that
					automatically expires. So you know what you are sharing is always private and doesn't stay
					on internet forever.`;
	let el: HTMLElement;
</script>

<div class="flex h-full w-full flex-col justify-between bg-[#030303] font-sans text-white">
	<div class="relative flex w-full items-center justify-between px-16 py-10">
		<div class="flex items-center text-2xl font-semibold">
			<div class="mr-3 flex">
				<svg
					width="24"
					height="24"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					stroke-width="2"
				>
					<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
				</svg>
			</div>
			Chithi
		</div>
	</div>

	<div class="relative flex w-full grow items-center justify-center">
		<div class="flex h-125 w-225 overflow-hidden rounded-2xl border border-[#222] bg-[#0f0f0f]">
			<div class="flex flex-1 p-6">
				<div
					class="flex h-full w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-[#333] text-center"
				>
					<div
						class="mb-5 flex h-12 w-12 items-center justify-center rounded-full border border-[#444] text-2xl text-white"
					>
						+
					</div>
					<div class="mb-2 text-lg font-medium">Drag and drop files</div>
					<div class="mb-6 max-w-50 text-xs text-[#666]">
						or click to send up to 10 GB of files with end-to-end encryption
					</div>
					<div class="flex rounded-md bg-white px-5 py-2.5 text-sm font-bold text-black">
						Select files to upload
					</div>
				</div>
			</div>

			<div class="flex flex-1 flex-col justify-center p-16">
				<div class="mb-5 text-3xl font-bold">Configurable File Sharing</div>
				<div class="text-base leading-relaxed text-[#999]" bind:this={el}></div>
			</div>
		</div>
	</div>

	<div class="relative flex w-full p-5"></div>
</div>

Fails to compile.

Same for {@html ...}

It would be better if you can somehow show stacktrace or logs

[baseplate-admin]

I think in this case, the library should execute all the JS in the Page, compile it back to HTML and then pass it to satori?

[baseplate-admin]

I think at least supporting the HTML tag is a must :)

[baseplate-admin]

My man, there should be some logs from this plugin, without logs its near impossible to debug anything here

[theetherGit]

@baseplate-admin

I think in this case, the library should execute all the JS in the Page, compile it back to HTML and then pass it to satori?

JS part should be handled in +server.ts or only on server side. sveltekit-og currently only works on server not on client side (browser). We can't compile JS, we use svelte component as template only.

I think at least supporting the HTML tag is a must :)

This will be hard to approach but i think we can provide a client only implementation too, where we don't rely on sveltekit specific imports for server only approach.

My man, there should be some logs from this plugin, without logs its near impossible to debug anything here

Yes, I should now work on this.

[DarthGigi]

The lack of logs makes it impossible to debug what's going wrong. Any small change I do while building a new component for the OG image generation results in a generic browser error

This page isn’t working
localhost didn’t send any data.
ERR_EMPTY_RESPONSE

Nothing gets shown in the server console to understand what I'm doing wrong.

[theetherGit]

@DarthGigi i have related a next version to be exact https://npmx.dev/package/@ethercorps/sveltekit-og/v/4.3.0-next.1 let me know if it helps you.

[DarthGigi]

@theetherGit Thank you for your fast reply!

I'm trying it out now and it looks like it solves a lot of ERR_EMPTY_RESPONSE's. I think I can continue designing my components now, thanks!

However, it would still be nice to know why an ERR_EMPTY_RESPONSE is thrown / if my component causes an invalid satori generation and how I could fix that (e.g. invalid css / tailwind class, invalid HTML element hierarchy, etc)

[theetherGit]

@DarthGigi Sure, I'll take a look and more information related to this before next release.

[theetherGit]

@DarthGigi @baseplate-admin Can you please test with new next version: v4.3.0-next.2

• Added better error handling
• Added logs with tag where generation failed as well as generated svg/png size in debug mode

[DarthGigi]

I started using https://github.com/kane50613/takumi instead as it skips the satori/SVG rendering and that way has more support for different CSS features and doesn't break so easily.

[theetherGit]

@DarthGigi yes, it's a pretty good option. I have been thinking to add support for takumi too.

How I plan to integrate

Option 1

Import {ImageResponse} from @ethercorps/sveltekit-og/takumi

It will come with same option with extended formats like jpeg, webp etc.

It will we easy to switch between takumi and satori.

Second option

Import {ImageResponse} from @ethercorps/sveltekit-og

Return ImageResponse({
render: satori | takumi
})

I have to finalize the api for this.