0
# Built-in Resolvers
1

2
Pre-configured resolvers for common file types including JSON data files, Vue Single File Components, and Svelte components. These resolvers are automatically included with the plugin and handle specialized file types during TypeScript declaration generation.
3

4
## Capabilities
5

6
### JSON File Resolution
7

8
Automatically handles JSON data files by generating appropriate TypeScript declarations for imported JSON modules.
9

10
```typescript { .api }
11
// JSON files are automatically processed - no configuration needed
12
// The plugin generates declarations for .json imports
13
```
14

15
**Usage Examples:**
16

17
```typescript
18
import dts from "vite-plugin-dts";
19

20
// JSON resolver works automatically
21
export default defineConfig({
22
  plugins: [
23
    dts({
24
      // JSON files are automatically handled
25
      include: ["src/**/*.ts", "src/**/*.json"]
26
    })
27
  ]
28
});
29

30
// Example JSON file: config.json
31
// {
32
//   "apiUrl": "https://api.example.com",
33
//   "timeout": 5000,
34
//   "features": ["auth", "analytics"]
35
// }
36

37
// When imported: import config from './config.json'  
38
// Generated declaration: config.json.d.ts
39
// declare const _default: {
40
//   "apiUrl": "https://api.example.com",
41
//   "timeout": 5000,
42
//   "features": ["auth", "analytics"]
43
// };
44
// 
45
// export default _default;
46
```
47

48
### Vue Single File Component Resolution
49

50
Automatically processes Vue Single File Components (.vue files) to generate TypeScript declarations using Vue language tools integration.
51

52
```typescript { .api }
53
// Vue SFC files are automatically processed when included
54
// Uses @vue/language-core and @volar/typescript internally
55
```
56

57
**Usage Examples:**
58

59
```typescript
60
import dts from "vite-plugin-dts";
61

62
// Vue resolver works automatically
63
export default defineConfig({
64
  plugins: [
65
    dts({
66
      // Vue SFC files are automatically handled
67
      include: ["src/**/*.ts", "src/**/*.vue"],
68
      cleanVueFileName: true // Optional: transform .vue.d.ts to .d.ts
69
    })
70
  ]
71
});
72

73
// Example Vue component: Button.vue
74
// <template>
75
//   <button :class="buttonClass" @click="handleClick">
76
//     <slot />
77
//   </button>
78
// </template>
79
//
80
// <script setup lang="ts">
81
// interface Props {
82
//   variant?: 'primary' | 'secondary';
83
//   disabled?: boolean;
84
// }
85
//
86
// const props = withDefaults(defineProps<Props>(), {
87
//   variant: 'primary',
88
//   disabled: false
89
// });
90
//
91
// const emit = defineEmits<{
92
//   click: [event: MouseEvent];
93
// }>();
94
//
95
// const buttonClass = computed(() => `btn btn-${props.variant}`);
96
// const handleClick = (event: MouseEvent) => emit('click', event);
97
// </script>
98

99
// Generated declaration: Button.vue.d.ts (or Button.d.ts with cleanVueFileName)
100
// The exact output depends on Vue language tools processing
101
```
102

103
### Svelte Component Resolution
104

105
Automatically handles Svelte component files (.svelte) to generate appropriate TypeScript declarations. The resolver detects the Svelte version and exports the correct component type.
106

107
```typescript { .api }
108
// Svelte component files are automatically processed when included
109
// For Svelte < 4.0: exports SvelteComponentTyped
110
// For Svelte >= 4.0: exports SvelteComponent
111
```
112

113
**Usage Examples:**
114

115
```typescript
116
import dts from "vite-plugin-dts";
117

118
// Svelte resolver works automatically
119
export default defineConfig({
120
  plugins: [
121
    dts({
122
      // Svelte component files are automatically handled
123
      include: ["src/**/*.ts", "src/**/*.svelte"]
124
    })
125
  ]
126
});
127

128
// Example Svelte component: Card.svelte
129
// <script lang="ts">
130
//   export let title: string;
131
//   export let description: string = '';
132
//   export let variant: 'default' | 'highlighted' = 'default';
133
// </script>
134
//
135
// <div class="card {variant}">
136
//   <h3>{title}</h3>
137
//   {#if description}
138
//     <p>{description}</p>
139
//   {/if}
140
//   <slot />
141
// </div>
142

143
// Generated declaration: Card.svelte.d.ts
144
// export { SvelteComponent as default } from 'svelte';
145
// (or SvelteComponentTyped for Svelte < 4.0)
146
```
147

148
### Resolver Integration
149

150
Built-in resolvers are automatically integrated into the plugin's processing pipeline alongside any custom resolvers.
151

152
```typescript { .api }
153
/**
154
 * Built-in resolvers are automatically included:
155
 * - JSON resolver (name: 'json') for .json files
156
 * - Vue resolver (name: 'vue') for .vue files  
157
 * - Svelte resolver (name: 'svelte') for .svelte files
158
 */
159
```
160

161
**Usage Examples:**
162

163
```typescript
164
// Built-in resolvers work alongside custom ones
165
dts({
166
  resolvers: [
167
    // Custom resolver for additional file types
168
    {
169
      name: "yaml",
170
      supports: (id) => id.endsWith(".yaml"),
171
      transform: async ({ id }) => {
172
        return [{
173
          path: id.replace(/\.yaml$/, ".d.ts"),
174
          content: "export declare const config: Record<string, any>;"
175
        }];
176
      }
177
    }
178
    // Built-in JSON, Vue, and Svelte resolvers remain active
179
  ]
180
});
181

182
// Override built-in resolver with custom implementation
183
dts({
184
  resolvers: [
185
    {
186
      name: "json", // Same name as built-in resolver - overrides it
187
      supports: (id) => id.endsWith(".json"),
188
      transform: async ({ id }) => {
189
        return [{
190
          path: id.replace(/\.json$/, ".d.ts"),
191
          content: `declare const data: any;\nexport default data;`
192
        }];
193
      }
194
    }
195
  ]
196
});
197
```
198

199
### Framework-Specific Configuration
200

201
Optimizing built-in resolver behavior for specific frontend framework setups.
202

203
```typescript { .api }
204
// Vue 3 + TypeScript project configuration
205
const vueConfig = {
206
  include: ["src/**/*.ts", "src/**/*.vue"],
207
  exclude: ["src/**/*.test.ts"],
208
  cleanVueFileName: true, // Transform .vue.d.ts -> .d.ts
209
  compilerOptions: {
210
    jsx: "preserve",
211
    jsxImportSource: "vue"
212
  }
213
};
214

215
// Svelte + TypeScript project configuration  
216
const svelteConfig = {
217
  include: ["src/**/*.ts", "src/**/*.svelte"],
218
  exclude: ["src/**/*.test.ts", "src/**/*.spec.ts"],
219
  compilerOptions: {
220
    moduleResolution: "node",
221
    target: "ESNext"
222
  }
223
};
224
```
225

226
**Complete Configuration Examples:**
227

228
```typescript
229
// Vue 3 library with built-in resolver
230
export default defineConfig({
231
  build: {
232
    lib: {
233
      entry: "src/index.ts",
234
      formats: ["es", "cjs"]
235
    }
236
  },
237
  plugins: [
238
    vue(),
239
    dts({
240
      include: ["src/**/*.ts", "src/**/*.vue"],
241
      cleanVueFileName: true,
242
      rollupTypes: true
243
    })
244
  ]
245
});
246

247
// Svelte component library with built-in resolver
248
export default defineConfig({
249
  build: {
250
    lib: {
251
      entry: "src/index.ts",
252
      formats: ["es"]
253
    }
254
  },
255
  plugins: [
256
    svelte(),
257
    dts({
258
      include: ["src/**/*.ts", "src/**/*.svelte"],
259
      outDir: "dist/types"
260
    })
261
  ]
262
});
263

264
// Multi-framework project with all built-in resolvers
265
export default defineConfig({
266
  plugins: [
267
    vue(),
268
    svelte(),
269
    dts({
270
      include: ["src/**/*.ts", "src/**/*.vue", "src/**/*.svelte", "src/**/*.json"],
271
      outDir: ["dist/types", "lib/types"]
272
    })
273
  ]
274
});
275
```
276

277
### Internal Resolver Implementation
278

279
The built-in resolvers are implemented internally using the plugin's resolver system:
280

281
```typescript { .api }
282
// Internal resolver structure (not directly accessible)
283
interface InternalResolver {
284
  name: string; // 'json', 'vue', or 'svelte'
285
  supports: (id: string) => boolean;
286
  transform: (payload: ResolverPayload) => ResolverResult;
287
}
288

289
// These are automatically instantiated and included by the plugin
290
// Users cannot directly import or configure these specific instances
291
```