Skip to content

Commit 3496538

Browse files
KazariEXKazariEX
authored
refactor: drop Vue 2 support (#5365)
1 parent 31f64a4 commit 3496538

File tree

31 files changed

+25
-616
lines changed

31 files changed

+25
-616
lines changed

‎extensions/vscode/README.md

Lines changed: 0 additions & 227 deletions
Original file line numberDiff line numberDiff line change
@@ -11,233 +11,6 @@
1111

1212
This project is community-driven. If you would like to support this project, consider joining the [Insiders Program](https://github.com/vuejs/language-tools/wiki/Get-Insiders-Edition) to improve the sustainability of this project and unlock more features.
1313

14-
<!--
15-
16-
## Usage
17-
18-
<details>
19-
<summary>Setup for Vue 2</summary>
20-
21-
1. Add `@vue/runtime-dom`
22-
23-
This extension requires Vue 3 types from the `@vue/runtime-dom`.
24-
25-
Vue 3 and Vue 2.7 has built-in JSX types. For Vue version \<= 2.6.14 you need to add JSX types by install `@vue/runtime-dom`:
26-
27-
```jsonc
28-
// package.json
29-
{
30-
"devDependencies": {
31-
"@vue/runtime-dom": "latest"
32-
}
33-
}
34-
```
35-
36-
2. Remove `Vue.extend`
37-
38-
Template type-checking is not supported with `Vue.extend`. You can use [composition-api](https://github.com/vuejs/composition-api), [vue-class-component](https://github.com/vuejs/vue-class-component), or `export default { ... }` instead of `export default Vue.extend`.
39-
40-
Here is a compatibility table for different ways of writing the script blocks:
41-
42-
| | Component options type-checking in `<script>` | Interpolation type-checking in `<template>` | Cross-component props type-checking |
43-
|:-----------------------------------------|:----------------------------------------------|:--------------------------------------------|:------------------------------------|
44-
| `export default { ... }` with JS | Not supported | Not supported | Not supported |
45-
| `export default { ... }` with TS | Not supported | Supported but deprecated | Supported but deprecated |
46-
| `export default Vue.extend({ ... })` with JS | Not supported | Not supported | Not supported |
47-
| `export default Vue.extend({ ... })` with TS | Limited (supports `data` types but not `props` types) | Limited | Not supported |
48-
| `export default defineComponent({ ... })` | Supported | Supported | Supported |
49-
| Class component | Supported | Supported with additional code ([#21](https://github.com/vuejs/language-tools/issues/21)) | Supported with [additional code](https://github.com/vuejs/language-tools/pull/750#issuecomment-1023947885) |
50-
51-
Note that you can use `defineComponent` even for components that are using the `Options API`.
52-
53-
3. Support for Vue 2 template
54-
55-
Volar preferentially supports Vue 3. Vue 3 and Vue 2 templates have some differences. You need to set the `target` option to support the Vue 2 templates.
56-
57-
```jsonc
58-
// tsconfig.json
59-
{
60-
"compilerOptions": {
61-
// ...
62-
},
63-
"vueCompilerOptions": {
64-
"target": 2.7,
65-
// "target": 2, // For Vue version <= 2.6.14
66-
}
67-
}
68-
```
69-
70-
4. remove `.d.ts` files if they exist.
71-
72-
For projects generated by the [Vue CLI](https://cli.vuejs.org/), `.d.ts` files are included. Remove these files.
73-
74-
```
75-
rm src/shims-tsx.d.ts src/shims-vue.d.ts
76-
```
77-
78-
</details>
79-
80-
<details>
81-
<summary>Define Global Components</summary>
82-
83-
PR: https://github.com/vuejs/vue-next/pull/3399
84-
85-
Local components, Built-in components, native HTML elements Type-Checking is available with no configuration.
86-
87-
For Global components, you need to define `GlobalComponents` interface, for example:
88-
89-
```typescript
90-
// components.d.ts
91-
declare module 'vue' { // Vue >= 2.7
92-
// declare module '@vue/runtime-dom' { // Vue <= 2.6.14
93-
export interface GlobalComponents {
94-
RouterLink: typeof import('vue-router')['RouterLink']
95-
RouterView: typeof import('vue-router')['RouterView']
96-
}
97-
}
98-
99-
export {}
100-
```
101-
102-
</details>
103-
104-
## Notes
105-
106-
### Vetur
107-
108-
You need to disable Vetur to avoid conflicts.
109-
110-
Recommended use css / less / scss as `<style>` language, because these base on [vscode-css-languageservice](https://github.com/microsoft/vscode-css-languageservice) to provide reliable language support.
111-
112-
If use postcss / stylus / sass, you need to install additional extension for syntax highlighting. I tried these and it works, you can also choose others.
113-
114-
- postcss: [language-postcss](https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss).
115-
- stylus: [language-stylus](https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus)
116-
- sass: [Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)
117-
118-
Volar does not include ESLint and Prettier, but the official [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions support Vue, so you could install these yourself if needed.
119-
120-
If using Vetur's [Customizable Scaffold Snippets](https://vuejs.github.io/vetur/guide/snippet.html#customizable-scaffold-snippets), recommend use [Snippet Generator](https://marketplace.visualstudio.com/items?itemName=wenfangdu.snippet-generator) convert to VSCode Snippets. There are also snippets on the VSCode Marketplace, such as Sarah Drasner's [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets), if you prefer ready-made snippets without customization.
121-
122-
If VSCode gives an error for `class` and `slot` like this:
123-
124-
<kbd><img width="483" src="https://user-images.githubusercontent.com/3253920/145134536-7bb090e9-9dcd-4a61-8096-3c47d6c1a699.png" /></kbd>
125-
126-
This is because one of the packages installed in your project uses `@types/react` which breaks some parts of Volar.
127-
128-
Please see the following solutions:
129-
- https://github.com/vuejs/language-tools/discussions/592
130-
- https://github.com/vuejs/language-tools/discussions/592#discussioncomment-1763880
131-
132-
### Recursive components
133-
134-
Volar can't typecheck recursive components out of the box due to TS limitation.
135-
But there's a workaround, you can explicitly specify component's props like so:
136-
137-
`Bar.vue`
138-
139-
```vue
140-
<template>
141-
<Bar :a="'wrong'" />
142-
</template>
143-
144-
<script setup lang="ts">
145-
import { defineAsyncComponent, type DefineComponent } from 'vue'
146-
147-
interface Props {
148-
a: number
149-
}
150-
151-
const Bar = defineAsyncComponent<DefineComponent<Props>>(
152-
() => import('./Bar.vue') as any
153-
)
154-
defineProps<Props>()
155-
</script>
156-
```
157-
158-
### Custom File Extensions
159-
160-
Syntax highlighting and intellisense can be applied to additional file extensions beyond just `vue`. This will need to be configured in three different places for full support.
161-
162-
In VS Code settings for the Volar extension add any additional extensions you need to `Additional Extensions`. Such as `ext`.
163-
164-
In your tsconfig.json file you will need to make sure your custom extension is included by TypeScript. If you have an include value for `./src/*.vue` then you would want to add an include for `./src/*.ext` as well.
165-
166-
```json
167-
"include": [
168-
"./src/*.ts",
169-
"./src/*.vue",
170-
"./src/*.ext",
171-
]
172-
```
173-
174-
Finally you need to make VS Code recognize your new extension and automatically associate it with the Vue language format. To do this you need to configure your File Associations setting to map `*.ext` to the language value `vue`. This can be done under Text Editor &gt; Files, or with the key `files.associations`.
175-
176-
-->
177-
178-
## Sponsors
179-
180-
<!-- <table>
181-
<tbody>
182-
<tr>
183-
<td align="center" valign="middle" colspan="2">
184-
<b>Special Sponsor</b>
185-
</td>
186-
</tr>
187-
<tr>
188-
<td align="center" valign="middle" colspan="2">
189-
<a href="https://stackblitz.com/">
190-
<img src="https://raw.githubusercontent.com/johnsoncodehk/sponsors/master/logos/StackBlitz.svg" height="80" />
191-
</a>
192-
<p>Stay in the flow with instant dev experiences.<br>No more hours stashing/pulling/installing locally</p>
193-
<p><b> — just click, and start coding.</b></p>
194-
</td>
195-
</tr>
196-
<tr>
197-
<td align="center" valign="middle" colspan="2">
198-
<b>Platinum Sponsors</b>
199-
</td>
200-
</tr>
201-
<tr>
202-
<td align="center" valign="middle" width="50%">
203-
<a href="https://vuejs.org/">
204-
<img src="https://raw.githubusercontent.com/johnsoncodehk/sponsors/master/logos/Vue.svg" height="80" />
205-
</a>
206-
<p>An approachable, performant and versatile framework for building web user interfaces.</p>
207-
</td>
208-
<td align="center" valign="middle" width="50%">
209-
<a href="https://astro.build/">
210-
<img src="https://raw.githubusercontent.com/johnsoncodehk/sponsors/master/logos/Astro.svg" height="80" />
211-
</a>
212-
<p>Astro powers the world's fastest websites, client-side web apps, dynamic API endpoints, and everything in-between.</p>
213-
</td>
214-
</tr>
215-
<tr>
216-
<td align="center" valign="middle">
217-
<a href="https://www.jetbrains.com/">
218-
<img src="https://raw.githubusercontent.com/johnsoncodehk/sponsors/master/logos/JetBrains.svg" height="80" />
219-
</a>
220-
<p>Essential tools for software developers and teams.</p>
221-
</td>
222-
<td align="center" valign="middle">
223-
</td>
224-
</tr>
225-
<tr>
226-
<td align="center" valign="middle" colspan="2">
227-
<b>Silver Sponsors</b>
228-
</td>
229-
</tr>
230-
<tr>
231-
<td align="center" valign="middle">
232-
<a href="https://www.prefect.io/"><img src="https://raw.githubusercontent.com/johnsoncodehk/sponsors/master/logos/Prefect.svg" height="50" /></a>
233-
</td>
234-
<td align="center" valign="middle">
235-
<a href="https://www.techjobasia.com/"><img src="https://raw.githubusercontent.com/johnsoncodehk/sponsors/master/logos/TechJobAsia.svg" height="50" /></a>
236-
</td>
237-
</tr>
238-
</tbody>
239-
</table> -->
240-
24114
<p align="center">
24215
<a href="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.svg">
24316
<img src="https://cdn.jsdelivr.net/gh/johnsoncodehk/sponsors/sponsors.png"/>

‎packages/component-meta/lib/base.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import * as vue from '@vue/language-core';
33
import { posix as path } from 'path-browserify';
44
import type * as ts from 'typescript';
55
import { code as typeHelpersCode } from 'vue-component-type-helpers';
6-
import { code as vue2TypeHelpersCode } from 'vue-component-type-helpers/vue2';
76

87
import type {
98
ComponentMeta,
@@ -236,7 +235,7 @@ interface ComponentMeta<T> {
236235
exposed: ComponentExposed<T>;
237236
};
238237
239-
${commandLine.vueOptions.target < 3 ? vue2TypeHelpersCode : typeHelpersCode}
238+
${typeHelpersCode}
240239
`.trim();
241240
return code;
242241
}
@@ -894,7 +893,6 @@ function readTsComponentDefaultProps(
894893
return component;
895894
}
896895
// export default defineComponent({ ... })
897-
// export default Vue.extend({ ... })
898896
else if (ts.isCallExpression(component)) {
899897
if (component.arguments.length) {
900898
const arg = component.arguments[0];

‎packages/component-type-helpers/vue2.ts

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎packages/language-core/lib/codegen/globalTypes.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { VueCompilerOptions } from '../types';
2-
import { getSlotsPropertyName } from '../utils/shared';
32

43
export function getGlobalTypesFileName({
54
lib,
@@ -79,7 +78,7 @@ export function generateGlobalTypes({
7978
type __VLS_FunctionalComponent<T> = (props: ${fnPropsType}, ctx?: any) => __VLS_Element & {
8079
__ctx?: {
8180
attrs?: any,
82-
slots?: T extends { ${getSlotsPropertyName(target)}: infer Slots } ? Slots : Record<string, any>,
81+
slots?: T extends { $slots: infer Slots } ? Slots : Record<string, any>,
8382
emit?: T extends { $emit: infer Emit } ? Emit : {},
8483
props?: ${fnPropsType},
8584
expose?: (exposed: T) => void,
@@ -167,10 +166,7 @@ export function generateGlobalTypes({
167166
function __VLS_makeOptional<T>(t: T): { [K in keyof T]?: T[K] };
168167
function __VLS_asFunctionalComponent<T, K = T extends new (...args: any) => any ? InstanceType<T> : unknown>(t: T, instance?: K):
169168
T extends new (...args: any) => any ? __VLS_FunctionalComponent<K>
170-
: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>${(
171-
target === 2.7
172-
? `: T extends import('${lib}').AsyncComponent ? (props: {}, ctx?: any) => any`
173-
: ``)}
169+
: T extends () => any ? (props: {}, ctx?: any) => ReturnType<T>
174170
: T extends (...args: any) => any ? T
175171
: __VLS_FunctionalComponent<{}>;
176172
function __VLS_functionalComponentArgsRest<T extends (...args: any) => any>(t: T): 2 extends Parameters<T>['length'] ? [any] : [];

‎packages/language-core/lib/codegen/localTypes.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { VueCompilerOptions } from '../types';
2-
import { getSlotsPropertyName } from '../utils/shared';
32
import { endOfLine } from './utils';
43

54
export function getLocalTypesGenerator(vueCompilerOptions: VueCompilerOptions) {
@@ -32,7 +31,7 @@ type __VLS_WithDefaults<P, D> = {
3231
() => `
3332
type __VLS_WithSlots<T, S> = T & {
3433
new(): {
35-
${getSlotsPropertyName(vueCompilerOptions.target)}: S;
34+
$slots: S;
3635
${vueCompilerOptions.jsxSlots ? `$props: ${PropsChildren.name}<S>;` : ''}
3736
}
3837
};

‎packages/language-core/lib/codegen/script/index.ts

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { Code, Sfc, VueCompilerOptions } from '../../types';
66
import { codeFeatures } from '../codeFeatures';
77
import { generateGlobalTypes, getGlobalTypesFileName } from '../globalTypes';
88
import type { TemplateCodegenContext } from '../template/context';
9-
import { endOfLine, generateSfcBlockSection, newLine } from '../utils';
9+
import { generateSfcBlockSection, newLine } from '../utils';
1010
import { generateComponentSelf } from './componentSelf';
1111
import { createScriptCodegenContext, type ScriptCodegenContext } from './context';
1212
import { generateScriptSetup, generateScriptSetupImports } from './scriptSetup';
@@ -55,7 +55,7 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
5555
yield* generateScriptSetupImports(options.sfc.scriptSetup, options.scriptSetupRanges);
5656
}
5757
if (options.sfc.script && options.scriptRanges) {
58-
const { exportDefault, classBlockEnd } = options.scriptRanges;
58+
const { exportDefault } = options.scriptRanges;
5959
const isExportRawObject = exportDefault
6060
&& options.sfc.script.content[exportDefault.expression.start] === '{';
6161
if (options.sfc.scriptSetup && options.scriptSetupRanges) {
@@ -96,19 +96,6 @@ export function* generateScript(options: ScriptCodegenOptions): Generator<Code,
9696
yield options.vueCompilerOptions.optionsWrapper[1];
9797
yield generateSfcBlockSection(options.sfc.script, exportDefault.expression.end, options.sfc.script.content.length, codeFeatures.all);
9898
}
99-
else if (classBlockEnd !== undefined) {
100-
if (options.vueCompilerOptions.skipTemplateCodegen) {
101-
yield generateSfcBlockSection(options.sfc.script, 0, options.sfc.script.content.length, codeFeatures.all);
102-
}
103-
else {
104-
yield generateSfcBlockSection(options.sfc.script, 0, classBlockEnd, codeFeatures.all);
105-
yield `__VLS_template = () => {${newLine}`;
106-
const templateCodegenCtx = yield* generateTemplate(options, ctx);
107-
yield* generateComponentSelf(options, ctx, templateCodegenCtx);
108-
yield `}${endOfLine}`;
109-
yield generateSfcBlockSection(options.sfc.script, classBlockEnd, options.sfc.script.content.length, codeFeatures.all);
110-
}
111-
}
11299
else {
113100
yield generateSfcBlockSection(options.sfc.script, 0, options.sfc.script.content.length, codeFeatures.all);
114101
yield* generateScriptSectionPartiallyEnding(options.sfc.script.name, options.sfc.script.content.length, '#3632/script.vue');

‎packages/language-core/lib/codegen/script/scriptSetup.ts

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -433,11 +433,9 @@ function* generateComponentProps(
433433

434434
yield `type __VLS_BuiltInPublicProps = ${options.vueCompilerOptions.target >= 3.4
435435
? `import('${options.vueCompilerOptions.lib}').PublicProps`
436-
: options.vueCompilerOptions.target >= 3.0
437-
? `import('${options.vueCompilerOptions.lib}').VNodeProps`
438-
+ ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
439-
+ ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
440-
: `globalThis.JSX.IntrinsicAttributes`
436+
: `import('${options.vueCompilerOptions.lib}').VNodeProps`
437+
+ ` & import('${options.vueCompilerOptions.lib}').AllowedComponentProps`
438+
+ ` & import('${options.vueCompilerOptions.lib}').ComponentCustomProps`
441439
}`;
442440
yield endOfLine;
443441

‎packages/language-core/lib/codegen/template/element.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as CompilerDOM from '@vue/compiler-dom';
22
import { camelize, capitalize } from '@vue/shared';
33
import type { Code, VueCodeInformation } from '../../types';
4-
import { getSlotsPropertyName, hyphenateTag } from '../../utils/shared';
4+
import { hyphenateTag } from '../../utils/shared';
55
import { codeFeatures } from '../codeFeatures';
66
import { createVBindShorthandInlayHintInfo } from '../inlayHints';
77
import { endOfLine, identifierRegex, newLine, normalizeAttributeValue } from '../utils';
@@ -143,9 +143,7 @@ export function* generateComponent(
143143
else if (!isComponentTag) {
144144
yield `const ${componentOriginalVar} = ({} as __VLS_WithComponent<'${getCanonicalComponentName(node.tag)}', __VLS_LocalComponents, `;
145145
if (options.selfComponentName && possibleOriginalNames.includes(options.selfComponentName)) {
146-
yield `typeof __VLS_self & (new () => { `
147-
+ getSlotsPropertyName(options.vueCompilerOptions.target)
148-
+ `: __VLS_Slots }), `;
146+
yield `typeof __VLS_self & (new () => { $slots: __VLS_Slots }), `;
149147
}
150148
else {
151149
yield `void, `;

0 commit comments

Comments
 (0)