feat(injectAtEnd): add new option

[peerless-hero]

Description

add new option about unimport.

💡Inject the imports at the end of other imports

The default value is true for the current version, which has no effect on upgrades.

Linked Issues

no.

Additional context

My config is

AutoImport({
  imports: [
    'vue',
    'vue/macros',
    'vue-router',
    'vue-i18n',
    '@vueuse/core',
    'pinia',
    {
      vue: ['createVNode'],
      '@/i18n/use-locale': ['dayjs'],
      '@/utils/use-search': [['default', 'useSearch']],
      '@/utils/emitter': [['default', 'emitter']],
      '@/utils/page-tab-util': [
        'finishPageTab',
        'removePageTab',
        'setPageTab'
      ],
      '@/store/modules/theme': ['useThemeStore'],
      '@/store/modules/dict': ['useDictStore'],
      '@/store/modules/user': ['useUserStore'],
      'ant-design-vue': ['message', 'Modal'],
      '@ant-design/icons-vue': ['ExclamationCircleOutlined'],
      'ant-design-vue/es/form': ['useForm'],
      'ele-admin-pro': ['assignObject', 'emailReg', 'phoneReg'],
      'file-saver': ['saveAs'],
      qs: [['stringify', 'qsStringify']],
      '@vueuse/integrations/useCookies': ['useCookies']
    }
  ],
  dts: 'types/auto-imports.d.ts',
  dirs: [...API_DIR],
  vueTemplate: true,
  resolvers: [VueAmapResolver()]
})

In my project has some error,

I tried downgrading many versions and finally determined that 0.12.2 works fine, and 0.13.0 or later doesn't work.

By looking up the git logs, I found that the injectAtEnd: true attribute is the cause of this error.

For better compatibility, so I created this PR.

[antfu]

Thanks. I think we could have this - but to solve the root cause, I think we should fix the bug on unimport side. Can you create a minimal reproduction of how it cause your code to fail?

[peerless-hero]

@antfu

In order to reproduce the problem and find out the reason, I tried many methods.
Finally, I found out if there is a superficial cause of this problem when using unplugin-vue-components in App.vue.

example

<!-- example 1 -->
<template>
  <a-config-provider>
    <router-view />
  </a-config-provider>
</template>

<script lang="ts" setup>
  import { ConfigProvider as AConfigProvider } from 'ant-design-vue/es'
</script>

It works without unplugin-vue-components in App.vue.

<!-- example 2 -->
<template>
  <a-config-provider>
    <router-view />
  </a-config-provider>
</template>

<script lang="ts" setup></script>

It doesn't works with unplugin-vue-components in App.vue.

solutions

There are only the following solutions:

• Downgrade unplugin-auto-import to "<0.13.0" version.

By the way, no matter what version of unplugin-vue-components is used, the same will be true as long as the version of unplugin-auto-import is ">=0.13.0".

• Remove the "Use modularized antd For Vite".
• Use the import method in 'example 1'.

suggestion

While it is currently only found to be a problem in App.vue, I'm not sure of the inherent reasons why it occurs. I can't guarantee whether there will be similar problems in the future.
So I would like the "injectedAtEnd" option to be added as an optional insurance option for a temporary solution to a potential problem that we have not yet discovered.

[antfu]

@peerless-hero Thanks for investing. Can you create a minimal repo that contains the setup?

[peerless-hero]

@antfu

OK!This is my summary of the cause of the error.
auto-import-error-demo

README.md is machine translated, please see the original README_CN.md.

[antfu]

That's quite a weird bug, and I am not sure what is causing that. Probably a bug of esbuild's pre-bundling, as the error does not occur on the build. Where you can fix it by explicit import createApp before importing ./App.vue.

Probably there is nothing we could fix here, so let's expose the option. Thanks