Support import.meta.glob without parent path

[otomad]

Description

When using import.meta.glob:

const getIcon = (name) =>
    import.meta.glob('/src/assets/icons/*.svg', {
        eager: true,
    })[`/src/assets/icons/${name}.svg`]

Did you see that, you have to write "/src/assets/icons/" twice. When this path is longer, it becomes more troublesome.

We known that we can't use variable in it, like this won't work:

const PATH = '/src/assets/icons/'
const getIcon = (name) =>
    import.meta.glob(`${PATH}*.svg`, {
        eager: true,
    })[`${PATH}${name}.svg`]

Suggested solution

How about add a new option, to match the asterisk in the result object key. For example:

const icons = import.meta.glob('/src/assets/icons/*.svg', {
    withoutParentPath: true, // or some key else
})

This will compile to:

const icons = {
    'foo': () => import('/src/assets/icons/foo.svg'),
    'bar': () => import('/src/assets/icons/bar.svg'),
}

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[jophy-ye]

Personally, I come across the same issue when I have to import over 10 images. Personally, besides withoutParentPath which only returns the filename, I think we might also augment the glob syntax (e.g. with any brackets) to match but not include part of the path. This is already doable with regular expressions, but seems to be uncommon in the glob world.

Meanwhile, a work-around is to use ${PATH} for all except the initial import, where we write the full path. You still need to write it twice, but in a case like mine (over 10 imgs) it’s much better.

[sapphi-red]

I'll close this as a duplicate of #17453 as that proposal is more generic than this one.