From 2b0206472303c43cb6341a59eb9c383bd96c47d2 Mon Sep 17 00:00:00 2001
From: Rafal Chlodnicki <rchl2k@gmail.com>
Date: Tue, 30 Nov 2021 22:49:36 +0100
Subject: [PATCH 1/2] fix(docs): extend vue 2 info regarding types

Related #741
---
 .../vscode-vue-language-features/README.md    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/extensions/vscode-vue-language-features/README.md b/extensions/vscode-vue-language-features/README.md
index 93ba2cec67..db9f1457c8 100644
--- a/extensions/vscode-vue-language-features/README.md
+++ b/extensions/vscode-vue-language-features/README.md
@@ -30,9 +30,9 @@ This company is [sponsoring this project](https://github.com/sponsors/johnsoncod
 
 1. Add `@vue/runtime-dom`
 
-This extension required Vue 3 types from the `@vue/runtime-dom`.
+This extension requires Vue 3 types from the `@vue/runtime-dom`.
 
-Vue 3 in itself includes the package `@vue/runtime-dom`. For Vue 2 you will have to install this package yourself:
+Vue 3 itself includes the `@vue/runtime-dom` package. For Vue 2 you will have to install it yourself:
 
 ```jsonc
 // package.json
@@ -43,19 +43,35 @@ Vue 3 in itself includes the package `@vue/runtime-dom`. For Vue 2 you will have
 }
 ```
 
-2. Remove `Vue.extend`
+2. Wrap components with `Vue.extend`
 
-Template type-checking do not support 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`.
+When using the Options API, for the types to be inferred properly, you need to explicitly wrap the exported component with `Vue.extend`, for example:
+
+```vue
+<script>
+import Vue from 'vue'
+
+export default Vue.extend({
+  data() {
+    return {
+      foo: 'abc'
+    }
+  }
+})
+</script>
+```
+
+When using the [composition-api](https://github.com/vuejs/composition-api) or [vue-class-component](https://github.com/vuejs/vue-class-component) this issue doesn't apply.
 
 3. Support Vue 2 template
 
-Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set the `experimentalCompatMode` option to support Vue 2 template.
+Volar preferentially supports Vue 3. Vue 3 and Vue 2 templates have some differences. You need to set the `experimentalCompatMode` option to support the Vue 2 templates.
 
 ```jsonc
 // tsconfig.json
 {
   "compilerOptions": {
-    ...
+    // ...
   },
   "vueCompilerOptions": {
     "experimentalCompatMode": 2,
@@ -128,4 +144,4 @@ export {}
 >     "types": ["vite/client", ...]
 >   }
 > }
-> ```
\ No newline at end of file
+> ```

From a49a15379e64906ac604e3a7d2eecd5b3d5ff544 Mon Sep 17 00:00:00 2001
From: Rafal Chlodnicki <rchl2k@gmail.com>
Date: Sat, 5 Mar 2022 23:32:32 +0100
Subject: [PATCH 2/2] update instructions as suggested

---
 .../vscode-vue-language-features/README.md    | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/extensions/vscode-vue-language-features/README.md b/extensions/vscode-vue-language-features/README.md
index 1ff0dd670a..8e4cbceebf 100644
--- a/extensions/vscode-vue-language-features/README.md
+++ b/extensions/vscode-vue-language-features/README.md
@@ -43,27 +43,24 @@ Vue 3 itself includes the `@vue/runtime-dom` package. For Vue 2 you will have to
 }
 ```
 
-2. Wrap components with `Vue.extend`
+2. Remove `Vue.extend`
 
-When using the Options API, for the types to be inferred properly, you need to explicitly wrap the exported component with `Vue.extend`, for example:
+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`.
 
-```vue
-<script>
-import Vue from 'vue'
+Here is a compatibility table for different ways of writing the script blocks:
 
-export default Vue.extend({
-  data() {
-    return {
-      foo: 'abc'
-    }
-  }
-})
-</script>
-```
+|                                          | Component options type-checking in `<script>` | Interpolation type-checking in `<template>` | Cross-component props type-checking |
+|:-----------------------------------------|:----------------------------------------------|:--------------------------------------------|:------------------------------------|
+| `export default { ... }` with JS         | Not supported                                 | Not supported                               | Not supported                       |
+| `export default { ... }` with TS         | Not supported                                 | Supported but deprecated                    | Supported but deprecated            |
+| `export default Vue.extend({ ... })` with JS | Not supported                             | Not supported                               | Not supported                       |
+| `export default Vue.extend({ ... })` with TS | Limited (supports `data` types but not `props` types) | Limited                         | Not supported                       |
+| `export default defineComponent({ ... })` | Supported                                    | Supported                                   | Supported                           |
+| Class component                          | Supported                                     | Supported with additional code ([#21](https://github.com/johnsoncodehk/volar/issues/21)) |  Supported with additional code     |
 
-When using the [composition-api](https://github.com/vuejs/composition-api) or [vue-class-component](https://github.com/vuejs/vue-class-component) this issue doesn't apply.
+Note that you can use `defineComponent` even for components that are using the `Options API`.
 
-3. Support Vue 2 template
+3. Support for Vue 2 template
 
 Volar preferentially supports Vue 3. Vue 3 and Vue 2 templates have some differences. You need to set the `experimentalCompatMode` option to support the Vue 2 templates.
 
@@ -81,11 +78,11 @@ Volar preferentially supports Vue 3. Vue 3 and Vue 2 templates have some differe
   }
 }
 ```
-  
-4. remove `.d.ts` files if it exists.
 
-For projects generated by the [Vue CLI](https://cli.vuejs.org/), `.d.ts` files are included. remove these files.
-  
+4. remove `.d.ts` files if they exist.
+
+For projects generated by the [Vue CLI](https://cli.vuejs.org/), `.d.ts` files are included. Remove these files.
+
 ```
 rm src/shims-tsx.d.ts src/shims-vue.d.ts
 ```