Support `matchImports` in `vueTemplateAddon`

[Sun79]

Background

When I use formily as a form library, rendering form controls involves the following approach:

<script setup lang="ts">
import { createForm } from '@formily/vue'
</script>

<template>
  <FormilyFormProvider :form="createForm()">
    <FormilyField
      name="input"
      title="input"
      :component="[FormilyInput]"
      :decorator="[FormilyFormItem]"
    />
    <FormilyField
      name="select"
      :component="[FormilySelect]"
      :data-source="[
        { value: 0, label: 'Female' },
        { value: 1, label: 'Male' },
      ]"
    />
  </FormilyFormProvider>
</template>

I want to automatically import components like FormilyInput, FormilyFormItem, and FormilySelect along with their styles. Currently, the resolvers configuration of unplugin-auto-import cannot achieve this because vueTemplateAddon does not support matchImports.

My Solution

To solve this issue, I came up with a solution, and the code can be found at https://github.com/Sun79/unimport/tree/feat/match-imports-in-vue-template.
I am not sure if this is the optimal solution, but it works well in my project.

Approach

In the transform hook, I only transform placeholders for Vue context properties that can match imports. Then, in the matchImports hook, I handle these placeholders and re-execute the matchImports hooks of other plugins to collect side effects.

Additional information

• Would you be willing to help implement this feature?

[Sun79]

Hi @antfu ,

Could you take a look at my solution and let me know if it’s feasible? The code is available here: https://github.com/Sun79/unimport/tree/feat/match-imports-in-vue-template.

Thanks in advance!