Support import.meta.glob

It’d be awesome if we could leverage glob import to for example import all images in a directory AND apply transformations on all of them.

I image it’d be used just like this:

const images = import.meta.glob("./images/*.jpg?width=200;400&format=webp;jpg&meta");

The exported object might look like this:

{
  "./images/01.jpg": {
    "width=200&format=webp&meta": () => Promise<metadata>,
    "width=200&format=jpg&meta": () => Promise<metadata>,
    "width=400&format=webp&meta": () => Promise<metadata>,
    "width=400&format=jpg&meta": () => Promise<metadata>
  }
}

If we use globEager instead of glob we would get the metadata object instead of () => Promise<metadata>.

[yamiteru]

I’ve already deleted my prototype using dynamic imports. Tomorrow I’ll try to put together repo with imports that don’t resolve so we can eventually raise it as an issue at Vite.

[palle-k]

@JonasKruckenberg I had a look at the Vite source code and found that when using the as parameter in the import options, this should theoretically be forwarded to the import statement, e.g.:

const images = import.meta.globEager("./*.jpg", {as: "w=250"});

Link to Vite source

However, this does not seem to work in practice, transforms are not applied.