feat: support type only global components

Author: antfu

README.md

@@ -238,6 +238,33 @@ Components({
 
 If you successfully configured other UI libraries, please feel free to contribute and help others using them out-of-box. Thanks!
 
+## Types for global registered components
+
+Some libraries might register some global components for you to use anywhere (e.g. Vue Router provides `<RouterLink>` and `<RouterView>`). Since they are global available, there is no need for this plugin to import them. However, those are commonly not TypeScript friendly, and you might need to register their types manually.
+
+Thus `unplugin-vue-components` provided a way to only register types for global components.
+
+```ts
+Components({
+  dts: true,
+  types: [{
+    from: 'vue-router',
+    names: ['RouterLink', 'RouterView'],
+  }],
+})
+```
+
+So the `RouterLink` and `RouterView` will be presented in `components.d.ts`.
+
+By default, `unplugin-vue-components` detects supported libraries automatically (e.g. `vue-router`) when their are installed in the workspace. If you want to disable it completely, you can pass an empty array to it:
+
+```ts
+Components({
+  // Disable type only registration
+  types: [],
+})
+```
+
 ## Migrate from `vite-plugin-components`
 
 `package.json`

examples/vite-vue3/components.d.ts

@@ -2,11 +2,10 @@
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Avatar: typeof import('./src/components/global/avatar.vue')['default']
     Book: typeof import('./src/components/book/index.vue')['default']
-    CarbonSvg: typeof import('./src/components/CarbonSvg.svg?component')['default']
     ComponentA: typeof import('./src/components/ComponentA.vue')['default']
     ComponentAsync: typeof import('./src/components/ComponentAsync.vue')['default']
     ComponentB: typeof import('./src/components/ComponentB.vue')['default']
@@ -21,6 +20,8 @@ declare module 'vue' {
     MarkdownB: typeof import('./src/components/MarkdownB.md')['default']
     MyCustom: typeof import('./../../../../../../src/CustomResolved.vue')['default']
     Recursive: typeof import('./src/components/Recursive.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     UiButton: typeof import('./src/components/ui/button.vue')['default']
     UiNestedCheckbox: typeof import('./src/components/ui/nested/checkbox.vue')['default']
     VanRadio: typeof import('vant/es')['Radio']

examples/vite-vue3/package.json

@@ -21,6 +21,6 @@
     "vite": "^2.9.1",
     "vite-plugin-inspect": "^0.4.3",
     "vite-plugin-md": "^0.12.4",
-    "vite-plugin-vue-svg": "^0.1.0"
+    "vue-router": "^4.0.14"
   }
 }

examples/vite-vue3/src/App.vue

@@ -50,7 +50,6 @@ const radio = ref('1')
   <div class="block">
     <h1>Custom Resolvers (1)</h1>
     <MyCustom />
-    <CarbonSvg />
   </div>
 
   <div class="block">

examples/vite-vue3/src/components/CarbonSvg.svg

@@ -1,3 +1,6 @@
 {
-  "extends": "../../tsconfig"
+  "extends": "../../tsconfig",
+  "compilerOptions": {
+    "types": ["unplugin-icons/types/vue"]
+  }
 }

examples/vite-vue3/tsconfig.json

@@ -6,8 +6,6 @@ import { VantResolver } from 'unplugin-vue-components/resolvers'
 import Markdown from 'vite-plugin-md'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
-// @ts-expect-error missing types
-import SVG from 'vite-plugin-vue-svg'
 import Inspect from 'vite-plugin-inspect'
 
 const config: UserConfig = {
@@ -21,15 +19,13 @@ const config: UserConfig = {
       include: [/\.vue$/, /\.md$/],
     }),
     Markdown(),
-    SVG(),
     Icons(),
     Inspect(),
     Components({
       extensions: ['vue', 'md', 'svg'],
       directoryAsNamespace: true,
       dts: true,
       globalNamespaces: ['global'],
-      importPathTransform: path => path.endsWith('.svg') ? `${path}?component` : undefined,
       include: [/\.vue$/, /\.md$/],
       resolvers: [
         (name) => {

examples/vite-vue3/vite.config.ts

@@ -3,6 +3,7 @@ import { existsSync, promises as fs } from 'fs'
 import { notNullish, slash } from '@antfu/utils'
 import type { Context } from './context'
 import { getTransformedPath } from './utils'
+import { resolveTypeImports } from './type-imports/detect'
 
 export function parseDeclaration(code: string): Record<string, string> {
   if (!code)
@@ -12,10 +13,13 @@ export function parseDeclaration(code: string): Record<string, string> {
 
 export async function generateDeclaration(ctx: Context, root: string, filepath: string, removeUnused = false): Promise<void> {
   const imports: Record<string, string> = Object.fromEntries(
-    Object.values({
-      ...ctx.componentNameMap,
-      ...ctx.componentCustomMap,
-    })
+    [
+      ...Object.values({
+        ...ctx.componentNameMap,
+        ...ctx.componentCustomMap,
+      }),
+      ...resolveTypeImports(ctx.options.types),
+    ]
       .map(({ path, name, importName }) => {
         if (!name)
           return undefined

pnpm-lock.yaml

@@ -2,8 +2,9 @@ import { join, resolve } from 'path'
 import { slash, toArray } from '@antfu/utils'
 import { isPackageExists } from 'local-pkg'
 import type { ComponentResolver, ComponentResolverObject, Options, ResolvedOptions } from '../types'
+import { detectTypeImports } from './type-imports/detect'
 
-export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs' |'directives'> = {
+export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'transformer' | 'globs' | 'directives' | 'types'> = {
   dirs: 'src/components',
   extensions: 'vue',
   deep: true,
@@ -28,6 +29,10 @@ export function resolveOptions(options: Options, root: string): ResolvedOptions
   resolved.resolvers = normalizeResolvers(resolved.resolvers)
   resolved.extensions = toArray(resolved.extensions)
 
+  if (!resolved.types)
+    resolved.types = detectTypeImports()
+  resolved.types = resolved.types || []
+
   if (resolved.globs) {
     resolved.globs = toArray(resolved.globs).map((glob: string) => slash(resolve(root, glob)))
     resolved.resolvedDirs = []