Support import.meta.glob

[yamiteru]

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>.

[JonasKruckenberg]

I'll try to see if this is possible once #17 is properly working, at least on next.
I don't know how Vite behaves when glob importing so I can make no promises but I definitely doesn't seem complicated

[JonasKruckenberg]

Alright, I've been digging around a bit in the vitejs source code and it seems that they are passing the full url to fast-glob, so importing your example ./images/*.jpg?width=200;400&format=webp;jpg&meta Vite will try to match files in the asset directory with the pattern *.jpg?width=200;400&format=webp;jpg&meta which will obviously not match anything.

So it seems like for now glob imports unfortunately don't work, no. :/

[yamiteru]

Thanks for investigating the issue.

That sucks.. because in several occasions dynamic import(${url}.jpg?webp) could not be resolved which means I have to import every image manually meaning having for example 10 image import statements at the beginning of one file.

[JonasKruckenberg]

Yeah that's very annoying yeah.
Can you share a situation in which the glob import doesn't resolve?
Maybe we can work around that somehow!
Maybe it'd be worth it to raise it as an issue over at the vite repo. I'll try to to this tomorrow if I have the time 👍🏻

[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.

[benmccann]

@palle-k I think you'd want to use query for that: https://vitejs.dev/guide/features.html#custom-queries

[alphacornutum]

This I find is also a very good template: sveltejs/kit#241 (comment)

[benmccann]

I've added import.meta.glob to the docs and example to show how to use it