Skip to content

Commit 22eb695

Browse files
piotr-olespiotr-oles
authored
feat: drop support for Vue.js (#801)
This commit drops support for Vue.js in the plugin. For the last few years, support for Vue.js has been broken, and the implementation of Vue.js support was a hacky work-around. Unfortunately, TypeScript doesn't expose an API to do that properly, and while I created a feature proposal API on the TypeScript repository, the TypeScript team has other priorities. As I won't have time to support this feature and am receiving justified bug reports, I believe it's better to make it clear that Vue.js is not supported by the plugin instead of pretending that it is. BREAKING CHANGE: 🧨 Drop support for Vue.js
1 parent 5243592 commit 22eb695

32 files changed

+6
-1170
lines changed

‎README.md

+1-126
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919

2020
* Speeds up [TypeScript](https://github.com/Microsoft/TypeScript) type checking (by moving it to a separate process) 🏎
2121
* Supports modern TypeScript features like [project references](https://www.typescriptlang.org/docs/handbook/project-references.html) and [incremental mode](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#faster-subsequent-builds-with-the---incremental-flag) ✨
22-
* Supports [Vue Single File Component](https://vuejs.org/v2/guide/single-file-components.html) ✅ 
2322
* Displays nice error messages with the [code frame](https://babeljs.io/docs/en/next/babel-code-frame.html) formatter 🌈
2423

2524
## Installation
@@ -28,6 +27,7 @@ This plugin requires **Node.js >=12.13.0+**, **Webpack ^5.11.0**, **TypeScript ^
2827

2928
* If you depend on **TypeScript 2.1 - 2.6.2**, please use [version 4](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v4.1.4) of the plugin.
3029
* If you depend on **Webpack 4**, **TypeScript 2.7 - 3.5.3** or **ESLint** feature, please use [version 6](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v6.2.6) of the plugin.
30+
* If you need Vue.js support, please use [version 6](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v6.5.2) of ths plugin
3131

3232
```sh
3333
# with npm
@@ -115,20 +115,9 @@ Options for the TypeScript checker (`typescript` option object).
115115
| `build` | `boolean` | `false` | The equivalent of the `--build` flag for the `tsc` command. |
116116
| `mode` | `'readonly'` or `'write-dts'` or `'write-tsbuildinfo'` or `'write-references'` | `build === true ? 'write-tsbuildinfo' ? 'readonly'` | Use `readonly` if you don't want to write anything on the disk, `write-dts` to write only `.d.ts` files, `write-tsbuildinfo` to write only `.tsbuildinfo` files, `write-references` to write both `.js` and `.d.ts` files of project references (last 2 modes requires `build: true`). |
117117
| `diagnosticOptions` | `object` | `{ syntactic: false, semantic: true, declaration: false, global: false }` | Settings to select which diagnostics do we want to perform. |
118-
| `extensions` | `object` | `{}` | See [TypeScript extensions options](#typescript-extensions-options). |
119118
| `profile` | `boolean` | `false` | Measures and prints timings related to the TypeScript performance. |
120119
| `typescriptPath` | `string` | `require.resolve('typescript')` | If supplied this is a custom path where TypeScript can be found. |
121120

122-
#### TypeScript extensions options
123-
124-
Options for the TypeScript checker extensions (`typescript.extensions` option object).
125-
126-
| Name | Type | Default value | Description |
127-
|----------------|-----------------------|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
128-
| `vue` | `object` or `boolean` | `false` | If `true`, it enables Vue [Single File Component](https://vuejs.org/v2/guide/single-file-components.html) support. |
129-
| `vue.enabled` | `boolean` | `false` | Same as the `vue` option |
130-
| `vue.compiler` | `string` | `'vue-template-compiler'` | The package name of the compiler that will be used to parse `.vue` files. You can use `'nativescript-vue-template-compiler'` if you use [nativescript-vue](https://github.com/nativescript-vue/nativescript-vue) |
131-
132121
### Issues options
133122

134123
Options for the issues filtering (`issue` option object).
@@ -176,120 +165,6 @@ module.exports = {
176165

177166
</details>
178167

179-
## Vue.js
180-
181-
⚠️ There are additional **constraints** regarding Vue.js Single File Component support: ⚠️
182-
* It requires **TypeScript >= 3.8.0** (it's a limitation of the `transpileOnly` mode from `ts-loader`)
183-
* It doesn't work with the `build` mode (project references)
184-
185-
To enable Vue.js support, follow these steps:
186-
187-
<details>
188-
<summary>Expand Vue.js set up instruction</summary>
189-
190-
1. Ensure you have all required packages installed:
191-
```sh
192-
# with npm
193-
npm install --save vue vue-class-component
194-
npm install --save-dev vue-loader ts-loader css-loader vue-template-compiler
195-
196-
# with yarn
197-
yarn add vue vue-class-component
198-
yarn add --dev vue-loader ts-loader css-loader vue-template-compiler
199-
```
200-
201-
2. Add `tsconfig.json` configuration:
202-
```json
203-
{
204-
"compilerOptions": {
205-
"experimentalDecorators": true,
206-
"jsx": "preserve",
207-
"target": "ES5",
208-
"lib": ["ES6", "DOM"],
209-
"baseUrl": ".",
210-
"paths": {
211-
"@/*": ["src/*"],
212-
"~/*": ["src/*"]
213-
},
214-
"sourceMap": true,
215-
"importsNotUsedAsValues": "preserve"
216-
},
217-
"include": [
218-
"src/**/*.ts",
219-
"src/**/*.vue"
220-
],
221-
"exclude": [
222-
"node_modules"
223-
]
224-
}
225-
```
226-
227-
3. Add `webpack.config.js` configuration:
228-
```js
229-
const path = require('path');
230-
const VueLoaderPlugin = require('vue-loader/lib/plugin');
231-
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
232-
233-
module.exports = {
234-
entry: './src/index.ts',
235-
output: {
236-
filename: 'index.js',
237-
path: path.resolve(__dirname, 'dist'),
238-
},
239-
module: {
240-
rules: [
241-
{
242-
test: /\.vue$/,
243-
loader: 'vue-loader'
244-
},
245-
{
246-
test: /\.ts$/,
247-
loader: 'ts-loader',
248-
exclude: /node_modules/,
249-
options: {
250-
appendTsSuffixTo: [/\.vue$/],
251-
// add transpileOnly option if you use ts-loader < 9.3.0
252-
// transpileOnly: true
253-
}
254-
},
255-
{
256-
test: /\.css$/,
257-
loader: 'css-loader'
258-
},
259-
],
260-
},
261-
resolve: {
262-
extensions: ['.ts', '.js', '.vue', '.json'],
263-
alias: {
264-
'@': path.resolve(__dirname, './src'),
265-
'~': path.resolve(__dirname, './src'),
266-
}
267-
},
268-
plugins: [
269-
new VueLoaderPlugin(),
270-
new ForkTsCheckerWebpackPlugin({
271-
typescript: {
272-
extensions: {
273-
vue: true
274-
}
275-
}
276-
})
277-
]
278-
};
279-
```
280-
281-
4. Add `src/types/vue.d.ts` file to shim `.vue` modules:
282-
```typescript
283-
declare module "*.vue" {
284-
import Vue from "vue";
285-
export default Vue;
286-
}
287-
```
288-
289-
5. If you are working in VSCode, you can get the [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) extension to complete the developer workflow.
290-
291-
</details>
292-
293168
## Plugin hooks
294169

295170
This plugin provides some custom webpack hooks:

‎package.json

-6
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,8 @@
7070
},
7171
"peerDependencies": {
7272
"typescript": ">3.6.0",
73-
"vue-template-compiler": "*",
7473
"webpack": "^5.11.0"
7574
},
76-
"peerDependenciesMeta": {
77-
"vue-template-compiler": {
78-
"optional": true
79-
}
80-
},
8175
"devDependencies": {
8276
"@commitlint/config-conventional": "^16.0.0",
8377
"@semantic-release/commit-analyzer": "^8.0.1",

‎src/plugin-options.json

-29
Original file line numberDiff line numberDiff line change
@@ -159,14 +159,6 @@
159159
}
160160
}
161161
},
162-
"extensions": {
163-
"type": "object",
164-
"properties": {
165-
"vue": {
166-
"$ref": "#/definitions/TypeScriptVueExtensionOptions"
167-
}
168-
}
169-
},
170162
"profile": {
171163
"type": "boolean",
172164
"description": "Measures and prints timings related to the TypeScript performance."
@@ -177,27 +169,6 @@
177169
}
178170
}
179171
},
180-
"TypeScriptVueExtensionOptions": {
181-
"oneOf": [
182-
{
183-
"type": "boolean",
184-
"description": "Enable TypeScript Vue extension."
185-
},
186-
{
187-
"type": "object",
188-
"properties": {
189-
"enabled": {
190-
"type": "boolean",
191-
"description": "Enable TypeScript Vue extension."
192-
},
193-
"compiler": {
194-
"type": "string",
195-
"description": "Custom vue-template-compiler package"
196-
}
197-
}
198-
}
199-
]
200-
},
201172
"FormatterOptions": {
202173
"oneOf": [
203174
{

0 commit comments

Comments
 (0)