Svelte 5 Support

[didier]

With Svelte 5 around the corner, it'd be awesome if we could update this to support Svelte versions above 4.X. Currently unable to build my site since sveltekit-og relies on a peer dependency of ^4.0.0.

[11:18:27.838] Installing dependencies...
[11:18:28.689] npm ERR! code ERESOLVE
[11:18:28.691] npm ERR! ERESOLVE unable to resolve dependency tree
[11:18:28.691] npm ERR! 
[11:18:28.691] npm ERR! While resolving: [irrelevant]@0.0.1
[11:18:28.691] npm ERR! Found: [email protected]
[11:18:28.691] npm ERR! node_modules/svelte
[11:18:28.691] npm ERR!   dev svelte@"^5.0.0-next.144" from the root project
[11:18:28.691] npm ERR! 
[11:18:28.692] npm ERR! Could not resolve dependency:
[11:18:28.692] npm ERR! peer svelte@"^4.0.0" from @ethercorps/[email protected]
[11:18:28.692] npm ERR! node_modules/@ethercorps/sveltekit-og
[11:18:28.692] npm ERR!   @ethercorps/sveltekit-og@"^3.0.0" from the root project
[11:18:28.692] npm ERR! 
[11:18:28.692] npm ERR! Fix the upstream dependency conflict, or retry
[11:18:28.692] npm ERR! this command with --force or --legacy-peer-deps
[11:18:28.692] npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
[11:18:28.692] npm ERR! 
[11:18:28.692] npm ERR! 
[11:18:28.692] npm ERR! For a full report see:
[11:18:28.692] npm ERR! [irrelevant]
[11:18:28.693] 
[11:18:28.693] npm ERR! A complete log of this run can be found in: [irrelevant]
[11:18:28.703] Error: Command "npm install" exited with 1
[11:18:28.903] 

[theetherGit]

@didier please open a ticket in svelte-h2j. BTW it's coming soon.... I have a v5 implementation ready, testing pending.

[didier]

Anything I can do to help test? I'm kind of blocked with my v5 migration.

[theetherGit]

@didier You can test it by updating etherCorps/sveltekit-og to next version. It's works on vercel. I did make API changes so please check https://github.com/etherCorps/sveltekit-og/tree/main/src/routes for new examples. I did it kinda and make a mess of merging it into main. But you can now use v5. I'll fix other issues.

[didier]

That seems to work, thanks! Testing prod now.

One thing, an error is thrown if no props object is passed to ImageResponse. Adding an empty object resolves it, but would be nice if the argument is completely optional.

[theetherGit]

I was working on a different implementation based on vue og images but when I saw ur comment i just did a patch work in the last implementation to release for test.

[didier]

So far, prod on Vercel doesn't seem to work, but I don't get any errors in my logs either. Will investigate.

[theetherGit]

Test 1: https://sveltekit-og.ethercorps.io/ - With html string Test 2: https://sveltekit-og.ethercorps.io/sc - With Svelte Component

Vercel Exampes Project - https://github.com/etherCorps/sveltekit-og/tree/main/examples/vercel-build Test 1: https://sveltekit-og-vercel.vercel.app/ - html string Test 2: https://sveltekit-og-vercel.vercel.app/cog - Svelte Component

This lib works in server side only.

[didier]

The two tests look inconsistent. Is that intended?

EDIT: So just to be 100% sure, @resvg-js is no longer a peer dep?

[theetherGit]

@resvg-js is no longer a peer dep? What do you mean by this? The two tests look inconsistent. Is that intended? They might be different but still works. But it also depends on what you are referring as inconsistent

[didier]

Well I get some warnings about @resvg-js possibly not being found on the server:

Warning: The following modules failed to locate dependencies that may (or may not) be required for your app to work:
  node_modules/@resvg/resvg-js/js-binding.js
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.android-arm64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.android-arm-eabi.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.win32-x64-msvc.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.win32-ia32-msvc.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.win32-arm64-msvc.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.darwin-universal.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.darwin-x64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.darwin-arm64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.freebsd-x64.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-x64-musl.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-x64-gnu.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-arm64-musl.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-arm64-gnu.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-arm-gnueabihf.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-riscv64-musl.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-riscv64-gnu.node
    - /vercel/path0/node_modules/@resvg/resvg-js/resvgjs.linux-s390x-gnu.node
    - @resvg/resvg-js-android-arm64
    - @resvg/resvg-js-android-arm-eabi
    - @resvg/resvg-js-win32-x64-msvc
    - @resvg/resvg-js-win32-ia32-msvc
    - @resvg/resvg-js-win32-arm64-msvc
    - @resvg/resvg-js-darwin-universal
    - @resvg/resvg-js-darwin-x64
    - @resvg/resvg-js-darwin-arm64
    - @resvg/resvg-js-freebsd-x64
    - @resvg/resvg-js-linux-arm64-musl
    - @resvg/resvg-js-linux-arm64-gnu
    - @resvg/resvg-js-linux-arm-gnueabihf
    - @resvg/resvg-js-linux-riscv64-musl
    - @resvg/resvg-js-linux-riscv64-gnu
    - @resvg/resvg-js-linux-s390x-gnu
  node_modules/ws/lib/buffer-util.js
    - bufferutil
  node_modules/ws/lib/validation.js
    - utf-8-validate
  Warning: The following modules failed to locate dependencies that may (or may not) be required for your app to work:
  node_modules/ws/lib/buffer-util.js
    - bufferutil
  node_modules/ws/lib/validation.js
    - utf-8-validate

I meant inconsistent as in, they seem to try to render the same image, but the output looks different

[didier]

Either way, I'm not getting any errors (even with debug: true), but it doesn't seem to be working... I'm not doing anything fancy either, just an HTML string passed into ImageResponse.

[theetherGit]

Can you provide me a repro for this anywhere with source? I'll try to help you.

[didier]

https://github.com/didier/sveltekit-og-repro https://sveltekit-og-repro.vercel.app

Here you go. I should say, I'm now getting errors, even in development.

Cannot find module 'estree-walker' imported from '/Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/@ethercorps/svelte-h2j/dist/toReactElement.js'
Error: Cannot find module 'estree-walker' imported from '/Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/@ethercorps/svelte-h2j/dist/toReactElement.js'
    at nodeImport (file:///Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:56268:25)
    at ssrImport (file:///Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:56177:30)
    at eval (/Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/@ethercorps/svelte-h2j/dist/toReactElement.js:4:37)
    at async instantiateModule (file:///Users/didier/Projects/[redacted]/sveltekit-og-repro/node_modules/vite/dist/node/chunks/dep-DEPSZ3SS.js:56237:9

Installing estree-walker as a dependency resolves the error, but does not make the OG image work.

[didier]

Deployment also shouts about peerDependencies

[didier]

I still think the issue is somehow in how resvg-js is used. Every time I build it warns about it not being found, and since it's in Rust, we won't get any errors in JS land. Installing it separately does not resolve the issue either.

[theetherGit]

I still think the issue is somehow in how resvg-js is used

In new implementation that's what i'm trying to handle so i sveltekit-og can be runtime agnostic.

Every time I build it warns about it not being found, and since it's in Rust, we won't get any errors in JS land. Installing it separately does not resolve the issue either.

Ok, I'm testing it now. Give me some time

[theetherGit]

@didier brother you and me missed flex on div. If you remember satori uses yoga which is an implementation of flex box.

[didier]

Does not putting flex on the div completely kill the generation without error? 🤔🤔

[theetherGit]

Yes, you can find something related to this in satori issues.

[theetherGit]

@didier I have decided to drop svelte v4. From now on you can use @ethercorps/sveltekit-og with svelte v5. Currently in beta.

• We support all runtimes please take a look at examples folder for all deployments.
• You may face some issues related to file size on netlify and vercel edge because of 1Mb limit.