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