unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue
https://www.npmjs.com/package/unplugin-vue-components
MIT License
3.66k stars 341 forks source link

Proposal regarding the component #694

Closed voyageh closed 9 months ago

voyageh commented 9 months ago

Clear and concise description of the problem

<template>
  <component :is="ElInput"/>
</template>

<script setup lang="ts">
import { resolveComponent as _resolveComponent } from "vue";
const ElInput = _resolveComponent('el-input')
</script>

since I have read the source code, I have found that writing this way can meet my expectations, but I need to rename the resolveComponent to _ resolveComponent.

Suggested solution

function resolveVue3(code: string, s: MagicString) {
  const results: ResolveResult[] = []

  /**
   * when using some plugin like plugin-vue-jsx, resolveComponent will be imported as resolveComponent1 to avoid duplicate import
   */
  for (const match of code.matchAll(/_resolveComponent[0-9]*\("(.+?)"\)/g)) {
    const matchedName = match[1]
    if (match.index != null && matchedName && !matchedName.startsWith('_')) {
      const start = match.index
      const end = start + match[0].length
      results.push({
        rawName: matchedName,
        replace: resolved => s.overwrite(start, end, resolved),
      })
    }
  }

  return results
}

I hope this rule is Match 0 or 1 times_, such as /_?resolveComponent[0-9]*\("(.+?)"\)/g

Alternative

No response

Additional context

No response

Validations

voyageh commented 9 months ago

Also, it can only match component names within double quotes

antfu commented 9 months ago

https://github.com/unplugin/unplugin-vue-components/pull/696#issuecomment-1720829173