mikemai2awesome, 6 months ago

@matthiasott nice. I need to play with this

khalidabuhakmeh, 6 months ago

@matthiasott @eleventy @vite Have you thought about tackling image optimization yet with Vite and 11ty? It’s still a sore sport for my use of 11ty and Vite together and was curious if you’d thought about it.

matthiasott, 6 months ago

@khalidabuhakmeh Not yet, but I’ll add that to my list! 🙌

khalidabuhakmeh, 6 months ago

@matthiasott It’s a tough problem. I really like how 11ty’s Image plugin works, and there are roll-up plugins as well (but they were made for a SPA model, not a static model).

The issue with 11ty’s image plugin is it processes images asynchronously but there is no async/await happening, so your HTML templating processing can finish before the images have had a chance to process completely.

That’s when Vite starts to look for images, but then doesn’t find them, thus blowing up.

zachleat, 6 months ago (edited 6 months ago)

@khalidabuhakmeh @matthiasott hmm I think passthrough copy operates like this, but not the image plugin.

const Image = require("@11ty/eleventy-img");  
await Image(url);  
// the files are done writing to the file system  

You’re probably thinking of the workaround for synchronous usage: https://www.11ty.dev/docs/plugins/image/#synchronous-shortcode (which was originally added for Vue 2)

khalidabuhakmeh, 6 months ago

@zachleat @matthiasott Oh wait… I forgot a part. We are using vhtml and JSX syntax. So it’s less an 11ty/Vite issue and a JSX with 11ty issue (mostly on the JSX part).

zachleat, 6 months ago

@khalidabuhakmeh @matthiasott narrows eyes at JSX

khalidabuhakmeh, 6 months ago

@zachleat @matthiasott
@pauleveritt made me do it! 🫣

matthiasott, 6 months ago

@eleventy @vite My plan is to soon update it to Vite 5, which has just been released: https://vitejs.dev/blog/announcing-vite5
But I first need to check whether there are any breaking changes that could cause problems…