Skip to content

Commit d7190da

Browse files
antfuantfu
committed
feat: introduce flag for it
1 parent 35697b0 commit d7190da

File tree

6 files changed

+106
-89
lines changed

6 files changed

+106
-89
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,10 @@ Components({
423423
// default: `true` if package typescript is installed
424424
dts: false,
425425

426+
// generate dts with TSX support
427+
// default: `true` if `@vitejs/plugin-vue-jsx` is installed
428+
dtsTsx: false,
429+
426430
// Allow subdirectories as namespace prefix for components.
427431
directoryAsNamespace: false,
428432

‎src/core/declaration.ts‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,14 +116,14 @@ export function getDeclaration(ctx: Context, filepath: string, originalImports?:
116116

117117
let code = `/* eslint-disable */
118118
// @ts-nocheck
119-
// Generated by unplugin-vue-components
120-
// Read more: https://github.com/vuejs/core/pull/3399
121119
// biome-ignore lint: disable
122120
// oxlint-disable
121+
// ------
122+
// Generated by unplugin-vue-components
123+
// Read more: https://github.com/vuejs/core/pull/3399
124+
${ctx.options.dtsTsx ? `import { GlobalComponents } from 'vue'\n` : ''}
123125
export {}
124126
125-
import { GlobalComponents } from 'vue'
126-
127127
/* prettier-ignore */
128128
declare module 'vue' {`
129129

@@ -140,11 +140,16 @@ declare module 'vue' {`
140140
}`
141141
}
142142
code += '\n}\n'
143-
if (Object.keys(declarations.component).length > 0) {
144-
code += `
143+
144+
// for TSX support
145+
if (ctx.options.dtsTsx) {
146+
if (Object.keys(declarations.component).length > 0) {
147+
code += `
148+
// For TSX support
145149
declare global {
146150
${declarations.component.map(d => d.replace(/(.+):/, 'const $1:')).join('\n ')}
147151
}`
152+
}
148153
}
149154
return code
150155
}

‎src/core/options.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const defaultOptions: Omit<Required<Options>, 'include' | 'exclude' | 'ex
1010
extensions: 'vue',
1111
deep: true,
1212
dts: isPackageExists('typescript'),
13+
dtsTsx: isPackageExists('@vitejs/plugin-vue-jsx'),
1314

1415
directoryAsNamespace: false,
1516
collapseSamePrefixes: false,

‎src/types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,14 @@ export interface Options {
176176
*/
177177
dts?: boolean | string
178178

179+
/**
180+
* Generate TypeScript declaration for global components
181+
* For TSX support
182+
*
183+
* @default true if `@vitejs/plugin-vue-jsx` is installed
184+
*/
185+
dtsTsx?: boolean
186+
179187
/**
180188
* Do not emit warning on component overriding
181189
*
@@ -243,6 +251,7 @@ export type ResolvedOptions = Omit<
243251
globs: string[]
244252
globsExclude: string[]
245253
dts: string | false
254+
dtsTsx: boolean
246255
root: string
247256
}
248257

‎test/__snapshots__/dts.test.ts.snap‎

Lines changed: 65 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
exports[`dts > components only 1`] = `
44
"/* eslint-disable */
55
// @ts-nocheck
6-
// Generated by unplugin-vue-components
7-
// Read more: https://github.com/vuejs/core/pull/3399
86
// biome-ignore lint: disable
97
// oxlint-disable
10-
export {}
8+
// ------
9+
// Generated by unplugin-vue-components
10+
// Read more: https://github.com/vuejs/core/pull/3399
1111
12-
import { GlobalComponents } from 'vue'
12+
export {}
1313
1414
/* prettier-ignore */
1515
declare module 'vue' {
@@ -19,24 +19,19 @@ declare module 'vue' {
1919
TestComp: typeof import('test/component/TestComp')['default']
2020
}
2121
}
22-
23-
declare global {
24-
const RouterLink: typeof import('vue-router')['RouterLink']
25-
const RouterView: typeof import('vue-router')['RouterView']
26-
const TestComp: typeof import('test/component/TestComp')['default']
27-
}"
22+
"
2823
`;
2924

3025
exports[`dts > directive only 1`] = `
3126
"/* eslint-disable */
3227
// @ts-nocheck
33-
// Generated by unplugin-vue-components
34-
// Read more: https://github.com/vuejs/core/pull/3399
3528
// biome-ignore lint: disable
3629
// oxlint-disable
37-
export {}
30+
// ------
31+
// Generated by unplugin-vue-components
32+
// Read more: https://github.com/vuejs/core/pull/3399
3833
39-
import { GlobalComponents } from 'vue'
34+
export {}
4035
4136
/* prettier-ignore */
4237
declare module 'vue' {
@@ -50,13 +45,13 @@ declare module 'vue' {
5045
exports[`dts > generate components with prefix 1`] = `
5146
"/* eslint-disable */
5247
// @ts-nocheck
53-
// Generated by unplugin-vue-components
54-
// Read more: https://github.com/vuejs/core/pull/3399
5548
// biome-ignore lint: disable
5649
// oxlint-disable
57-
export {}
50+
// ------
51+
// Generated by unplugin-vue-components
52+
// Read more: https://github.com/vuejs/core/pull/3399
5853
59-
import { GlobalComponents } from 'vue'
54+
export {}
6055
6156
/* prettier-ignore */
6257
declare module 'vue' {
@@ -83,38 +78,19 @@ declare module 'vue' {
8378
vLoading: typeof import('test/directive/Loading')['default']
8479
}
8580
}
86-
87-
declare global {
88-
const CustomPrefixAvatar: typeof import('./examples/vite-vue3/src/components/global/avatar.vue')['default']
89-
const CustomPrefixBook: typeof import('./examples/vite-vue3/src/components/book/index.vue')['default']
90-
const CustomPrefixButton: typeof import('./examples/vite-vue3/src/components/ui/button.vue')['default']
91-
const CustomPrefixCheckbox: typeof import('./examples/vite-vue3/src/components/ui/nested/checkbox.vue')['default']
92-
const CustomPrefixCollapseFolderAndComponentFromRoot: typeof import('./examples/vite-vue3/src/components/collapse/collapseFolder/CollapseFolderAndComponentFromRoot.vue')['default']
93-
const CustomPrefixComponentA: typeof import('./examples/vite-vue3/src/components/ComponentA.vue')['default']
94-
const CustomPrefixComponentAsync: typeof import('./examples/vite-vue3/src/components/ComponentAsync.vue')['default']
95-
const CustomPrefixComponentB: typeof import('./examples/vite-vue3/src/components/ComponentB.vue')['default']
96-
const CustomPrefixComponentC: typeof import('./examples/vite-vue3/src/components/component-c.vue')['default']
97-
const CustomPrefixComponentD: typeof import('./examples/vite-vue3/src/components/ComponentD.vue')['default']
98-
const CustomPrefixFolderAndComponentPartially: typeof import('./examples/vite-vue3/src/components/collapse/collapseFolder/FolderAndComponentPartially.vue')['default']
99-
const CustomPrefixKebabCaseCollapseFile: typeof import('./examples/vite-vue3/src/components/kebab-case/kebab-case-collapse/KebabCaseCollapseFile.vue')['default']
100-
const CustomPrefixKebabCaseFile: typeof import('./examples/vite-vue3/src/components/kebab-case/KebabCaseFile.vue')['default']
101-
const CustomPrefixRecursive: typeof import('./examples/vite-vue3/src/components/Recursive.vue')['default']
102-
const RouterLink: typeof import('vue-router')['RouterLink']
103-
const RouterView: typeof import('vue-router')['RouterView']
104-
const TestComp: typeof import('test/component/TestComp')['default']
105-
}"
81+
"
10682
`;
10783

10884
exports[`dts > getDeclaration 1`] = `
10985
"/* eslint-disable */
11086
// @ts-nocheck
111-
// Generated by unplugin-vue-components
112-
// Read more: https://github.com/vuejs/core/pull/3399
11387
// biome-ignore lint: disable
11488
// oxlint-disable
115-
export {}
89+
// ------
90+
// Generated by unplugin-vue-components
91+
// Read more: https://github.com/vuejs/core/pull/3399
11692
117-
import { GlobalComponents } from 'vue'
93+
export {}
11894
11995
/* prettier-ignore */
12096
declare module 'vue' {
@@ -127,12 +103,7 @@ declare module 'vue' {
127103
vLoading: typeof import('test/directive/Loading')['default']
128104
}
129105
}
130-
131-
declare global {
132-
const RouterLink: typeof import('vue-router')['RouterLink']
133-
const RouterView: typeof import('vue-router')['RouterView']
134-
const TestComp: typeof import('test/component/TestComp')['default']
135-
}"
106+
"
136107
`;
137108

138109
exports[`dts > parseDeclaration - has icon component like <IMdi:diceD12> 1`] = `
@@ -172,43 +143,70 @@ exports[`dts > parseDeclaration 1`] = `
172143
}
173144
`;
174145

175-
exports[`dts > vue 2.7 components only 1`] = `
146+
exports[`dts > tsx 1`] = `
176147
"/* eslint-disable */
177148
// @ts-nocheck
178-
// Generated by unplugin-vue-components
179-
// Read more: https://github.com/vuejs/core/pull/3399
180149
// biome-ignore lint: disable
181150
// oxlint-disable
182-
export {}
183-
151+
// ------
152+
// Generated by unplugin-vue-components
153+
// Read more: https://github.com/vuejs/core/pull/3399
184154
import { GlobalComponents } from 'vue'
185155
156+
export {}
157+
186158
/* prettier-ignore */
187159
declare module 'vue' {
188160
export interface GlobalComponents {
189161
RouterLink: typeof import('vue-router')['RouterLink']
190162
RouterView: typeof import('vue-router')['RouterView']
191163
TestComp: typeof import('test/component/TestComp')['default']
192164
}
165+
export interface GlobalDirectives {
166+
vLoading: typeof import('test/directive/Loading')['default']
167+
}
193168
}
194169
170+
// For TSX support
195171
declare global {
196172
const RouterLink: typeof import('vue-router')['RouterLink']
197173
const RouterView: typeof import('vue-router')['RouterView']
198174
const TestComp: typeof import('test/component/TestComp')['default']
199175
}"
200176
`;
201177

202-
exports[`dts > writeDeclaration - append 1`] = `
178+
exports[`dts > vue 2.7 components only 1`] = `
203179
"/* eslint-disable */
204180
// @ts-nocheck
181+
// biome-ignore lint: disable
182+
// oxlint-disable
183+
// ------
205184
// Generated by unplugin-vue-components
206185
// Read more: https://github.com/vuejs/core/pull/3399
186+
187+
export {}
188+
189+
/* prettier-ignore */
190+
declare module 'vue' {
191+
export interface GlobalComponents {
192+
RouterLink: typeof import('vue-router')['RouterLink']
193+
RouterView: typeof import('vue-router')['RouterView']
194+
TestComp: typeof import('test/component/TestComp')['default']
195+
}
196+
}
197+
"
198+
`;
199+
200+
exports[`dts > writeDeclaration - append 1`] = `
201+
"/* eslint-disable */
202+
// @ts-nocheck
207203
// biome-ignore lint: disable
208204
// oxlint-disable
209-
export {}
205+
// ------
206+
// Generated by unplugin-vue-components
207+
// Read more: https://github.com/vuejs/core/pull/3399
210208
211-
import { GlobalComponents } from 'vue'
209+
export {}
212210
213211
/* prettier-ignore */
214212
declare module 'vue' {
@@ -224,25 +222,19 @@ declare module 'vue' {
224222
vSome: typeof import('test/directive/Some')['default']
225223
}
226224
}
227-
228-
declare global {
229-
const RouterLink: typeof import('vue-router')['RouterLink']
230-
const RouterView: typeof import('vue-router')['RouterView']
231-
const SomeComp: typeof import('test/component/SomeComp')['default']
232-
const TestComp: typeof import('test/component/TestComp')['default']
233-
}"
225+
"
234226
`;
235227

236228
exports[`dts > writeDeclaration - overwrite 1`] = `
237229
"/* eslint-disable */
238230
// @ts-nocheck
239-
// Generated by unplugin-vue-components
240-
// Read more: https://github.com/vuejs/core/pull/3399
241231
// biome-ignore lint: disable
242232
// oxlint-disable
243-
export {}
233+
// ------
234+
// Generated by unplugin-vue-components
235+
// Read more: https://github.com/vuejs/core/pull/3399
244236
245-
import { GlobalComponents } from 'vue'
237+
export {}
246238
247239
/* prettier-ignore */
248240
declare module 'vue' {
@@ -255,24 +247,19 @@ declare module 'vue' {
255247
vLoading: typeof import('test/directive/Loading')['default']
256248
}
257249
}
258-
259-
declare global {
260-
const RouterLink: typeof import('vue-router')['RouterLink']
261-
const RouterView: typeof import('vue-router')['RouterView']
262-
const TestComp: typeof import('test/component/TestComp')['default']
263-
}"
250+
"
264251
`;
265252

266253
exports[`dts > writeDeclaration 1`] = `
267254
"/* eslint-disable */
268255
// @ts-nocheck
269-
// Generated by unplugin-vue-components
270-
// Read more: https://github.com/vuejs/core/pull/3399
271256
// biome-ignore lint: disable
272257
// oxlint-disable
273-
export {}
258+
// ------
259+
// Generated by unplugin-vue-components
260+
// Read more: https://github.com/vuejs/core/pull/3399
274261
275-
import { GlobalComponents } from 'vue'
262+
export {}
276263
277264
/* prettier-ignore */
278265
declare module 'vue' {
@@ -285,10 +272,5 @@ declare module 'vue' {
285272
vLoading: typeof import('test/directive/Loading')['default']
286273
}
287274
}
288-
289-
declare global {
290-
const RouterLink: typeof import('vue-router')['RouterLink']
291-
const RouterView: typeof import('vue-router')['RouterView']
292-
const TestComp: typeof import('test/component/TestComp')['default']
293-
}"
275+
"
294276
`;

‎test/dts.test.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@ const _directive_loading = _resolveDirective("loading")`
3232
expect(declarations).toMatchSnapshot()
3333
})
3434

35+
it('tsx', async () => {
36+
const ctx = new Context({
37+
resolvers: resolver,
38+
directives: true,
39+
dts: true,
40+
dtsTsx: true,
41+
})
42+
const code = `
43+
const _component_test_comp = _resolveComponent("test-comp")
44+
const _directive_loading = _resolveDirective("loading")`
45+
await ctx.transform(code, '')
46+
47+
const declarations = getDeclaration(ctx, 'test.d.ts')
48+
expect(declarations).toMatchSnapshot()
49+
})
50+
3551
it('writeDeclaration', async () => {
3652
const filepath = path.resolve(__dirname, 'tmp/dts-test.d.ts')
3753
const ctx = new Context({

0 commit comments

Comments
 (0)