Auto-imports for known vue symbols

[phoenix-ru]

Writing SFCs using the default JS compiler and https://github.com/unplugin/unplugin-auto-import produces not-so-optimal code.

Take this for example (playground):

<script setup>
const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

Correct binding type of msg cannot be properly inferred, which leads to compiler generating unref(msg), which in turn has runtime cost.
In addition to that, extra build step is needed to properly auto-import the ref.

A better approach would be to add a ref/computed/etc. vue-specific imports whenever their usage is detected. It is much cheaper and more beneficial to do so in the SFC compiler than in any other tool.

Steps:

• Detect stray known symbols usage. This can happen during regular transform pass;
• Inject non-prefixed imports (e.g. import { ref } from 'vue' instead of ref as _ref);
• Respect user-defined imports (e.g. import { ref } from './custom-path' should not auto-import).