feat: introduce dtsTsx for TSX support

README.md

@@ -423,6 +423,10 @@ Components({
   // default: `true` if package typescript is installed
   dts: false,
 
+  // generate dts with TSX support
+  // default: `true` if `@vitejs/plugin-vue-jsx` is installed
+  dtsTsx: false,
+
   // Allow subdirectories as namespace prefix for components.
   directoryAsNamespace: false,
 

src/core/declaration.ts

@@ -116,10 +116,12 @@ export function getDeclaration(ctx: Context, filepath: string, originalImports?:
 
   let code = `/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+${ctx.options.dtsTsx ? `import { GlobalComponents } from 'vue'\n` : ''}
 export {}
 
 /* prettier-ignore */
@@ -138,6 +140,17 @@ declare module 'vue' {`
   }`
   }
   code += '\n}\n'
+
+  // for TSX support
+  if (ctx.options.dtsTsx) {
+    if (Object.keys(declarations.component).length > 0) {
+      code += `
+// For TSX support
+declare global {
+  ${declarations.component.map(d => d.replace(/(.+):/, 'const $1:')).join('\n  ')}
+}`
+    }
+  }
   return code
 }
 

src/core/options.ts

@@ -10,6 +10,7 @@ export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'ex
   extensions: 'vue',
   deep: true,
   dts: isPackageExists('typescript'),
+  dtsTsx: isPackageExists('@vitejs/plugin-vue-jsx'),
 
   directoryAsNamespace: false,
   collapseSamePrefixes: false,

src/types.ts

@@ -176,6 +176,14 @@ export interface Options {
    */
   dts?: boolean | string
 
+  /**
+   * Generate TypeScript declaration for global components
+   * For TSX support
+   *
+   * @default true if `@vitejs/plugin-vue-jsx` is installed
+   */
+  dtsTsx?: boolean
+
   /**
    * Do not emit warning on component overriding
    *
@@ -243,6 +251,7 @@ export type ResolvedOptions = Omit<
   globs: string[]
   globsExclude: string[]
   dts: string | false
+  dtsTsx: boolean
   root: string
 }
 

test/__snapshots__/dts.test.ts.snap

@@ -3,10 +3,12 @@
 exports[`dts > components only 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -23,10 +25,12 @@ declare module 'vue' {
 exports[`dts > directive only 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -41,10 +45,12 @@ declare module 'vue' {
 exports[`dts > generate components with prefix 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -78,10 +84,12 @@ declare module 'vue' {
 exports[`dts > getDeclaration 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -135,13 +143,47 @@ exports[`dts > parseDeclaration 1`] = `
 }
 `;
 
-exports[`dts > vue 2.7 components only 1`] = `
+exports[`dts > tsx 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import { GlobalComponents } from 'vue'
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TestComp: typeof import('test/component/TestComp')['default']
+  }
+  export interface GlobalDirectives {
+    vLoading: typeof import('test/directive/Loading')['default']
+  }
+}
+
+// For TSX support
+declare global {
+  const RouterLink: typeof import('vue-router')['RouterLink']
+  const RouterView: typeof import('vue-router')['RouterView']
+  const TestComp: typeof import('test/component/TestComp')['default']
+}"
+`;
+
+exports[`dts > vue 2.7 components only 1`] = `
+"/* eslint-disable */
+// @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -158,10 +200,12 @@ declare module 'vue' {
 exports[`dts > writeDeclaration - append 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -184,10 +228,12 @@ declare module 'vue' {
 exports[`dts > writeDeclaration - overwrite 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */
@@ -207,10 +253,12 @@ declare module 'vue' {
 exports[`dts > writeDeclaration 1`] = `
 "/* eslint-disable */
 // @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
 // oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
 /* prettier-ignore */

test/dts.test.ts

@@ -32,6 +32,22 @@ const _directive_loading = _resolveDirective("loading")`
     expect(declarations).toMatchSnapshot()
   })
 
+  it('tsx', async () => {
+    const ctx = new Context({
+      resolvers: resolver,
+      directives: true,
+      dts: true,
+      dtsTsx: true,
+    })
+    const code = `
+const _component_test_comp = _resolveComponent("test-comp")
+const _directive_loading = _resolveDirective("loading")`
+    await ctx.transform(code, '')
+
+    const declarations = getDeclaration(ctx, 'test.d.ts')
+    expect(declarations).toMatchSnapshot()
+  })
+
   it('writeDeclaration', async () => {
     const filepath = path.resolve(__dirname, 'tmp/dts-test.d.ts')
     const ctx = new Context({