chore: revert Vite workaround

[dummdidumm]

This is supposed to fix #64, but it doesn't work yet. For some reason now the webp images don't show up anymore. I have no idea what one change has to do with another, just that we can't merge this in its current form. Maybe @Rich-Harris remembers what else was needed for the workaround, and so maybe I didn't revert everything correctly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
omnisite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 4, 2024 7:53pm

[benmccann]

I don't see vitejs/vite#17484 in the Vite changelog, so perhaps you'll need to wait for Vite 6 for this

[dummdidumm]

It's there, just referenced by its PR though (released in 5.3.4)

[Rich-Harris]

I can't access /tutorial/svelte-head locally anyway, I get this error:

Error: Asset does not exist: @imagetools/637c4ce4b7c1ff5d924ab9c08f58912888c29d77

Haven't yet figured out why

[Rich-Harris]

Haven't yet figured out why

I figured out why. It's because of enhancedImages — it creates an imagetools instance that then intercepts and rewrites all asset imports.

Possible fixes:

1. Make SvelteKit's read work with URLs like /@imagestools/xyz123 during development. Not really sure what this looks like
2. Allow options to be passed to enhancedImages (at the bare minimum, exclude)
3. Use an existing imagetools instance if such exists in the plugins array. Not sure if that's possible, given how the config works

I think ideally we'd do both 1 and 2.

[Rich-Harris]

Hmm, I thought we could identify transformed URLs via the /@ prefix, since imagetools generates /@imagetools/<id> URLs, but I don't think that's enforced anywhere — not sure it's even a convention. Not sure what a general solution to this could look like.

[benmccann]

Can you explain more about the issue? How is read involved here?

It's because of enhancedImages — it creates an imagetools instance that then intercepts and rewrites all asset imports

It should only do that if there's an ?enhanced query parameter

I don't think that's enforced anywhere — not sure it's even a convention

Yeah, it's just a random string: https://github.com/JonasKruckenberg/imagetools/blob/074f9f7a2a69e8a480270f44e820587026773bbc/packages/vite/src/utils.ts#L5

[Rich-Harris]

read is involved because we need to send the data for any assets to the web container.

It should only do that if there's an ?enhanced query parameter

No, it doesn't. enhancedImages is creating an imagetools instance that applies to everything indiscriminately, in addition to the imagetools instance that's already present, and which has exclude configured to prevent exactly this issue from occurring:

svelte.dev/apps/svelte.dev/vite.config.ts

Line 28 in 671baf0

exclude: 'content/**',

[benmccann]

imagetools has an include option we can use for this: https://github.com/JonasKruckenberg/imagetools/tree/main/packages/vite#include

We should replace this line: https://github.com/sveltejs/kit/blob/b74d79691bb85a25cb560fb1d15edc632c7ac0b4/packages/enhanced-img/src/index.js#L68

And instead use include. Should be an easy enough fix in enhanced-img. PRs welcome 😄 I'm afraid I've had very limited time as of late to keep up with things

[Rich-Harris]

It looks like it's using the standard createFilter logic from @rollup/pluginutils. To be honest I wasn't aware that you could use query params in this context, if so then that solves our issue nicely

[Rich-Harris]

This all works with the new Rollup-powered tutorial. We might run into more issues with imagetools stuff later, but I think we know how to fix it now so I'll merge this and close the associated issue