unplugin / unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Values in vue templates don't trigger auto-import

josh-hemphill opened this issue · comments

commented

If looking at the template itself isn't a good idea, perhaps some dev-facing comment directives or config options to set more limited matching for specific use cases could be helpful.

To give an example. I can do the following, but I have to add the variable names to something in the script block for it to work, which kind of defeats the purpose.

AutoImport({
	imports: [
		'vue',
                {
                	'@mdi/js': Object.keys(await import('@mdi/js')).filter(v=>v.startsWith('mdi')),
                }
	],
}),
<script setup lang="ts">
// Ideally I wouldn't end up with having to write out import statements with 12+ different variables
// but to get them to auto-import, I've got to do something like this:
const i = {mdiInformationOutline}

// And I can't just do `import * as i from '@mdi/js'` because then it doesn't get tree shook, and I end up with 2MB+ file
</script>
<template>
  <main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
    <div>
      <p class="text-4xl">
        <v-icon :icon="i.mdiInformationOutline" class="inline-block" />
      </p>
    </div>
    <router-view />
  </main>
</template>

A bit unrelated, but how about giving a try to https://github.com/antfu/unocss/tree/main/packages/preset-icons ? 👀

commented

A bit unrelated, but how about giving a try to https://github.com/antfu/unocss/tree/main/packages/preset-icons ? 👀

Sorry, I should have clarified, I'm importing SVG paths (not SVGs themselves) and passing it onto Vuetify icon components so that the icons inherit their properties from the Vuetify instance. I don't think unocss preset-icons would work for that.

commented

If you have any suggestions for being able to treeshake unused properties of a global value, that would also be a means to accomplish what I'm trying to do. I'm using vite-ssg, so most of these icon paths get inlined anyways, so having the whole of @mdi/js added to the bundle is really frustrating.

commented

Would adding the ability to detect variables within templates be in scope for this project?
Perhaps the way to go would be to add another set of resolver/preset options (disabled by default for compatibility) that can provide the regexes for framework specific template variable detection? Looking at the code everything looks pretty straight forward, I'd be happy to open a PR.

Shipped in v0.8.0

commented

I am trying to achieve the same goal.
What kind of autoImport config do you have?
@josh-hemphill

commented

It's listed in the Readme.md, just set vueTemplate to true.
link to line where it's specified

commented

I already have this parameter but still can't use mdi icons
image

I expect to have something like this but with autoImport

image

commented

You're missing the await before the import()

commented

Thanks.