Re-work on internals of sveltekit-og for supporting all the runtimes.

[theetherGit]

Overview

I'm planning a internal re-structure of this library and that will introduce some breaking changes (Final breaking changes). This is for the support for all the available runtimes like Vercel, Netlify and Cloudflare Workers.

I have already started to work on the internal like @ethercorps/svelte-h2j library for converting html css and svelte components into JSX syntax for satori. You can use this library standalone with satori no need for @ethercorps/sveltekit-og.

Plan

• Providing ImageResponse function for every runtime based on runtime requirements . This will give provide easy to use and structured way of using it for specific runtime.
• Removing default font support.
• Make it only for backend not client side API's from @ethercorps/sveltekit-og
• Adding preview deployment for all the runtimes in and as working examples.

Note

This is going to take a little bit of time as i have a job too. If you have suggestions and requirements please let me know in this discussion.

Have patience
Thank You

[jasongitmail]

For the sake of time, it might make sense to consider the MVP (minimum viable product) of this. Based on the design you described, it seems to be: svelte-h2j (Svelte -> JSX) + satori (JSX -> SVG) + svg2png-wasm (SVG -> PNG buffer), then we return pngData.buffer as the body and set a 'Content-Type': 'image/png', header and cache control header.

Is svelte-h2j usable currently, in your opinion?

If so, I may just piece these together for my own use in the meantime.

[jasongitmail]

p.s. it seems like it should probably not be necessary to create a function for each runtime (for example, Vercel's Edge runtime is actually powered by Cloudflare workers). Just FYI.

[theetherGit]

@jasongitmail I found a perfect solution but having issue with Svelte h2j. It works with Svelte v3 but not v4, as it's unable to make a build because of css tree. I post this on twitter and discord but no response. Discord Link.

If you find any solution let me know.

We can drop satori in favour of vercel/og as it provides support for all runtimes now and works in sveltekit project. Just need a runtime conversion to jsx. I'm still trying to find svelte v4 to make build.

[theetherGit]

I came up with svelte -> jsx using svelte-h2j (Issues with svelte v4) and then using @vercel/og for Image reponse directly as it works perfectly.

svelte-h2j works in dev but not in production and keeping it to svelte v3 doesn't make a sense.

[jasongitmail]

I came up with svelte -> jsx using svelte-h2j (Issues with svelte v4) and then using @vercel/og for Image reponse directly as it works perfectly.

Cool. Worth trying.

svelte-h2j works in dev but not in production and keeping it to svelte v3 doesn't make a sense.

I'm on v4 svelte. Probably most people are.

Could you update your issue with more details or current status please? I may be able to contribute to help, but there isn't enough info there to understand the current status or issues.

etherCorps/sveltekit-og has been broken for me since July, due to this issue. So I'm hoping to find or build a solution for OG images and would be happy to contribute here if sufficient detail exists to know how to help.

[theetherGit]

Could you update etherCorps/svelte-h2j#2 with more details or current status please? I may be able to contribute to help, but there isn't enough info there to understand the current status or issues.
Just updated the details and mentioned you.

etherCorps/sveltekit-og has been broken for me since July, due to #27. So I'm hoping to find or build a solution for OG images and would be happy to contribute here if sufficient detail exists to know how to help.
I'm really sorry for this, i have trying to find the best solution so we don't have to worry in near future with any of this. I'll still going to try my best. And thank you, i'm looking forward for your support.

[theetherGit]

As of now, We will make this project with satori-html. Which will make this project usable for the time being and when we make svelte-h2j work for v4 we will shift to this. I think this makes sense more than anything.

• I know using svelte compiler make sense but right now we don't have a choice that's why I made this decision.

This change is for time limited period as we will get svelte-h2j working with v4.

This will be providing you a single api for generating images using satori-html and @vercel/og.

[theetherGit]

@jasongitmail please check this https://github.com/kvnang/workers-og/tree/main/packages/workers-og it's a great implementation but without svelte compiler but great.

[jasongitmail]

oh, nice find! Hopefully it runs during npm run dev and npm run preview too. I will give that a try this weekend.

To be honest, that package alone might be sufficient, at least for my needs, because there isn't much need to write the OG image template as a svelte component. Using HTML with TailwindCSS styles would work great too.

[theetherGit]

It might and i also find solution for svelte-h2j so publishing it too. Now everything will be on right place (Hope so).

[theetherGit]

@jasongitmail i tried so many ways to work it on cloudflare workers.

1. Using @vecel/og
2. Using @cloudflare/pages-plugin-vercel-og
3. Also made a new version @ethercorps/[email protected] for testing purpose but not able to make it work with it.

• I tried these approaches got issues related to .wasm and .wasm?module everywhere. We have to see we might need to see sveltekit adapters to because they are making the build and we need to understand that too.

[theetherGit]

I'm also looking in vue implementation but i'm not sure vue developers deployed it on cloudflare page and workers.

[theetherGit]

https://github.com/Zhengqbbb/x-satori

[theetherGit]

We can use svelte-h2j for compiling to React VNode. We need a way which works on every runtime and i don't think so it will be that easy. We use vite and esbuild for cloudflare adapters. First issues comes with wasm import vite uses url or init, cloudflar workers don't accept this syntax, I took worker-og approach still not working but issue is unknown file type .wasm. Vercel OG Mainly works with Vercel Context which is real main right now.