search

etherCorps / sveltekit-og

Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit
https://sveltekit-og.ethercorps.io/
207 stars 12 forks source link

Svelte 5 Support #50

Open didier opened 4 months ago

didier commented 4 months ago

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: svelte@5.0.0-next.144
[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/sveltekit-og@3.0.0
[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 commented 4 months ago

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

didier commented 3 months ago

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

theetherGit commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

theetherGit commented 3 months ago

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 commented 3 months ago

The two tests look inconsistent. Is that intended?

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

theetherGit commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

didier commented 3 months ago

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 commented 3 months ago

CleanShot 2024-06-12 at 12 11 30@2x Deployment also shouts about peerDependencies

didier commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

didier commented 3 months ago

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

theetherGit commented 3 months ago

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