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!

[eltigerchino]

@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

[eltigerchino]

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?

[eltigerchino]

I don't think we can get Vercel to fix it but I have been trying myself to get something working on their edge runtime. I'll let you know if I find a solution.

[jdgamble555]

@eltigerchino - I think this may be a problem with SvelteKit the way it compiles wasm files with the cloudflare or vercel adapter?

If it works on NextJS I don't understand why it couldn't work here...

[eltigerchino]

There are a couple of issues:

Cloudflare

1. @vercel/og uses instantiateStreaming. However, Cloudflare Workers only support instantiating static modules https://developers.cloudflare.com/workers/runtime-apis/webassembly/
2. Cloudflare Wrangler does not automatically bundle non-JavaScript modules https://developers.cloudflare.com/workers/wrangler/bundling/#including-non-javascript-modules . We would need to automatically configure the user's Wrangler config to get this working smoothly so that the wasm module @vercel/og uses is deployed with the rest of the Worker code.

Cloudflare and Vercel

1. The Cloudflare and Vercel SvelteKit adapters use esbuild to bundle the code into an edge function. However esbuild does not currently support bundling assets referenced by a URL constructor URL assets bundling evanw/esbuild#795 . This is an issue because @vercel/og fetches things by constructing a URL to it and calling fetch since edge runtimes don't have filesystem access. Therefore, esbuild does not include the wasm module or the fallback font @vercel/og uses in the bundle.

These are the only ones I can remember at the moment. I've no idea how Vercel gets it to work for NextJS but I'm guessing it's a webpack configuration that correctly includes the wasm and font files or some other solution.

[jdgamble555]

Couldn't you manually bundle the wasm file somehow?

You can use satori with resvg to get the same results as @vercel/og with little code. I just can't seem to figure out how to get resvg to import in Vercel or Cloudflare.

J