Add the ability to do @vercel/og for image generation

[jdgamble555]

Describe the problem

I would like to be able to generate og images on Vercel edge. Unfortunately, it uses JSX. Vercel / SvelteKit needs to make a version that works for SvelteKit.

https://vercel.com/docs/functions/edge-functions/og-image-generation
https://github.com/vercel/og-image

Describe the proposed solution

Create an official SvelteKit Version.

Alternatives considered

There is an unofficial version that translates a string into JSX, but it is buggy, and adds unnecessary translation. I personally couldn't not get SVG images to work correctly. - https://github.com/etherCorps/sveltekit-og

Importance

would make my life easier

Additional Information

This may would need to be added to the Vercel adapter, I'm not sure the best place for this.

[benmccann]

Here's a post from a Svelte maintainer about how to accomplish this: https://geoffrich.net/posts/svelte-social-image/

[jdgamble555]

@benmccann - Unfortunately the SvelteKit guys don't believe in TS, and this also is extremely complicated and doesn't use the latest SvelteKit. I can't seem to get it to work.

There needs to be an official package for this.

J

[ghostdevv]

Unfortunately the SvelteKit guys don't believe in TS

This isn't the case! You can read more about it here

There needs to be an official package for this.

Your best bet is to take a look at how Geoff re-created the @vercel/og behaviour as ben shared. I'll close this for now as I don't believe that we plan to solve this in SvelteKit, I'll also refer to #8299 for further discussion!

[teemingc]

@jdgamble555 Re this issue, I've made https://github.com/eltigerchino/svelte-og-image based on Geoff's blog post if you need an updated example. We don't need an official package as mentioned above. There are plenty of implementations out there such as https://github.com/etherCorps/sveltekit-og and https://www.npmjs.com/package/svelte-component-to-image

[jdgamble555]

@ghostdevv - This is the case. Notice I did not say the SvelteKit guys don't believe in "types." Do you know how many hours I spend trying to translate REPL's to TypeScript. Statistically MOST people use TS over JS. When you make REPL's support TypeScript, the default option of SvelteKit is NOT JSDoc, and Rich Harris and Geoff start using TS in their example repos, I will agree with you. The argument that Svelte's core code is better off written in JS with JSDoc has nothing to do with all the things I just mentioned. I also don't see anyone using REPL's with JSDoc, but that is neither here nor there.

---

Side Node: @ghostdevv - Geoff's repo will NOT work on Edge functions from my testing. @vercel/og uses a WASM version of Satori ( or @resvg/resvg-js?) from what I can see so it can work on the Edge.

---

Thanks @eltigerchino. This is awesome, however, I cannot get it to work! I edited your code for simpler typing. FWI, we don't need slots or context because we're not building a full svelte app. You can extract the rest of the types. I also added an unescape function for dealing with text that is escaped.

image-response.ts

// Thanks to https://geoffrich.net/posts/svelte-social-image/

import { ImageResponse as VercelOGImageResponse } from '@vercel/og';
import { html } from 'satori-html';
import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';

function unescapeHtml(html: string) {
    return html
      .replace(/&/g, '&')
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&quot;/g, '"')
      .replace(/&#039;/g, "'");
}

// https://svelte.dev/docs/typescript#types

export interface SvelteComponentSSR<T extends SvelteComponent> {
    render: (
        props: ComponentProps<T>
    ) => SvelteRenderResult;
}

export interface SvelteRenderResult {
    html: string;
    css: {
        code: string;
        map: null;
    };
    head: string;
}

export class ImageResponse<T extends SvelteComponent> extends VercelOGImageResponse {
    constructor(
        component: ComponentType<T>,
        props: ComponentProps<T>,
        options?: ConstructorParameters<typeof VercelOGImageResponse>['1']
    ) {
        const result = (component as unknown as SvelteComponentSSR<T>).render(props);
        const element = html(unescapeHtml(`${result.html}<style>${result.css.code}</style>`));
        super(element, options);
    }
}

I'm getting this error when I deploy to Vercel Edge:

Error: The Edge Function "fn" is referencing unsupported modules:
--
17:34:56.892 | - index.js: vc-blob-asset:./noto-sans-v27-latin-regular.ttf

There seems to be something wrong with @vercel/og maybe?

Here is my repo: https://github.com/jdgamble555/sveltekit-vercel-og

I'm not sure I could make a simpler example :)

Please let me know if you see anything,

J

[jdgamble555]

The serverless function can't seem to find the noto-sans-v27-latin-regular.ttf file. This seems to be a known issue, but is fixed:

https://github.com/orgs/vercel/discussions/5250

I suspect it was fixed for NextJS, but here we need a way to add the file?

J

[DipandaAser]

@jdgamble555 You can use this: https://github.com/etherCorps/sveltekit-og
Here is a blog post about it: https://dev.to/theether0/dynamic-og-image-with-sveltekit-and-satori-4438

[teemingc]

Unfortunately, @vercel/og doesn't work on edge functions at the moment.

Error: The Edge Function "fn-0" is referencing unsupported modules:
	- __vc__ns__/1/index.js: vc-blob-asset:./noto-sans-v27-latin-regular.ttf

[jdgamble555]

@DipandaAser - This won't work on the edge because Vercel won't make a simple fix. Maybe if you guys add to the conversation, it will help.

vercel/satori#582

J

[jdgamble555]

Hey guys, any update on this? Could we possibly get Vercel to fix the error?

[teemingc]

1. Bundling the required files manually
   This might be possible if you have a custom esbuild config but I'm wondering if we can find a more generic solution rather than a package-specific solution so it future proofs this issue.
   Another solution I tried that worked for a while was patching @vercel/og to remove the dependency on the fallback font that doesn't get bundled when we build the SvelteKit app https://github.com/eltigerchino/svelte-og-image/blob/e6af42ee07f73c12f1c98c9d328c1b521113a10b/patches/%40vercel__og.patch this works but pnpm patches won't work for non-pnpm users so this type of patch probably means the solution needs to bundle the code first before publishing the package.

2. Using satori and resvg directly
   That's what I was trying to do in https://github.com/eltigerchino/svelte-og-image/issues/2 but turns out you have to use the wasm version of resvg for it to work outside of Node environments. Haven't got that working yet but you can probably get it working if you check how @vercel/og does it in their bundled code.

[jdgamble555]

Trust me when I tell you I have spent days trying to get resvg working, and spent 1000 stackover flow points to no avail. I use npm instead of pnpm due to it not being compatible with a lot of things, so not an option for me either.

@vercel/og is not open source anyway.

I have tried workers-og as well to no avail.

If I can get resvg wasm version to work in SvelteKit, I can get everything else working... that is the problem for me. If you can solve this, I can solve the rest.

[teemingc]

workers-og looks great. I wish I could spend time on this but it's pretty low on the priority list at the moment (also note that Vercel has deprecated its edge functions https://vercel.com/docs/functions/runtimes/edge/edge-functions.rsc so we would mainly be trying to get this working on Cloudflare Workers or Netlify?). I'll update you if I have any new findings

[jdgamble555]

Edge Runtime will still exists, just getting rid of standalone edge functions... vercel functions with edge runtime is the same thing from my understanding.

Anything you can do to help is greatly appreciated!

[teemingc]

Oh yup, you're right. The warning I remembered was actually the one on https://vercel.com/docs/functions/runtimes/edge . It's pretty weird that they have a big yellow banner asking people to use non-edge runtime functions instead.

[teemingc]

Please see https://sveltekit-og.dev/docs and their platform-specific guide to get it working. They're brilliantly using a vite plugin to solve the wasm issue on Cloudflare Workers