Support async component registration

[Demivan]

This does not work:

<script setup lang="ts">
const HelloWorld = () => import('./HelloWorld.vue')
</script>

unplugin-vue2-script-setup does not hoist async import up and you get runtime error Uncaught ReferenceError: HelloWorld is not defined.

Possible solutions:

1. Ignore it 🙂
   Pros: don't need to implement it
   Cons: need to use separate script
2. Hoist async component imports
   Pros: easy to implement - just hoist const Component = () => import()
   Cons: different API from Vue 3
3. Add global defineAsyncComponent macro
   Pros: API similar to Vue 3
   Cons: When the app is migrated to Vue 3 will need to add missing imports. (Could be a pro with unplugin-auto-import)
4. Add virtual package (script-setup for example) that exports defineAsyncComponent
   Pros: API similar to Vue 3, easy search and replace imports when the app is migrated to Vue 3
   Cons: Need to add virtual package

@antfu, what solution do you prefer? I'm not sure if 3 or 4 is better.

https://github.com/Demivan/unplugin-vue2-script-setup here I created basic implementation of solution 4.

[antfu]

What's your usage in the template? Did Vue 2 support async components?

[Demivan]

Here is example Vue 2 source:

<template>
  <div>
    <hello-world name="Vue 2" />
  </div>
</template>

<script lang="ts">
const HelloWorld = () => import('./HelloWorld.vue')

export default {
  components: {
    HelloWorld,
  },
}
</script>

Vue 2 does not have defineAsyncComponent and just needs a function that returns a Promise.

[Demivan]

My bad, I was wrong about the need to create defineAsyncComponent. I just found that @vue/composition-api has defineAsyncComponent already, somehow missed it. So unplugin-vue2-script-setup should just hoist it up.