Skip to content

Commit

Permalink
feat: drop support for Vue.js
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@piotr-oles
piotr-oles committed Feb 25, 2023
1 parent 2183502 commit 81b3414
Show file tree
Hide file tree
Showing 32 changed files with 6 additions and 1,170 deletions.
127 changes: 1 addition & 126 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

* Speeds up [TypeScript](https://github.com/Microsoft/TypeScript) type checking (by moving it to a separate process) 🏎
* 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) ✨
* Supports [Vue Single File Component](https://vuejs.org/v2/guide/single-file-components.html) ✅ 
* Displays nice error messages with the [code frame](https://babeljs.io/docs/en/next/babel-code-frame.html) formatter 🌈

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

* 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.
* 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.
* If you need Vue.js support (even though it's buggy), please use [version 7](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v7.3.0) of ths plugin

```sh
# with npm
Expand Down Expand Up @@ -115,20 +115,9 @@ Options for the TypeScript checker (`typescript` option object).
| `build` | `boolean` | `false` | The equivalent of the `--build` flag for the `tsc` command. |
| `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`). |
| `diagnosticOptions` | `object` | `{ syntactic: false, semantic: true, declaration: false, global: false }` | Settings to select which diagnostics do we want to perform. |
| `extensions` | `object` | `{}` | See [TypeScript extensions options](#typescript-extensions-options). |
| `profile` | `boolean` | `false` | Measures and prints timings related to the TypeScript performance. |
| `typescriptPath` | `string` | `require.resolve('typescript')` | If supplied this is a custom path where TypeScript can be found. |

#### TypeScript extensions options

Options for the TypeScript checker extensions (`typescript.extensions` option object).

| Name | Type | Default value | Description |
|----------------|-----------------------|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `vue` | `object` or `boolean` | `false` | If `true`, it enables Vue [Single File Component](https://vuejs.org/v2/guide/single-file-components.html) support. |
| `vue.enabled` | `boolean` | `false` | Same as the `vue` option |
| `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) |

### Issues options

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

</details>

## Vue.js

⚠️ There are additional **constraints** regarding Vue.js Single File Component support: ⚠️
* It requires **TypeScript >= 3.8.0** (it's a limitation of the `transpileOnly` mode from `ts-loader`)
* It doesn't work with the `build` mode (project references)

To enable Vue.js support, follow these steps:

<details>
<summary>Expand Vue.js set up instruction</summary>

1. Ensure you have all required packages installed:
```sh
# with npm
npm install --save vue vue-class-component
npm install --save-dev vue-loader ts-loader css-loader vue-template-compiler

# with yarn
yarn add vue vue-class-component
yarn add --dev vue-loader ts-loader css-loader vue-template-compiler
```

2. Add `tsconfig.json` configuration:
```json
{
"compilerOptions": {
"experimentalDecorators": true,
"jsx": "preserve",
"target": "ES5",
"lib": ["ES6", "DOM"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
"~/*": ["src/*"]
},
"sourceMap": true,
"importsNotUsedAsValues": "preserve"
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
```

3. Add `webpack.config.js` configuration:
```js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
entry: './src/index.ts',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
// add transpileOnly option if you use ts-loader < 9.3.0
// transpileOnly: true
}
},
{
test: /\.css$/,
loader: 'css-loader'
},
],
},
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'@': path.resolve(__dirname, './src'),
'~': path.resolve(__dirname, './src'),
}
},
plugins: [
new VueLoaderPlugin(),
new ForkTsCheckerWebpackPlugin({
typescript: {
extensions: {
vue: true
}
}
})
]
};
```

4. Add `src/types/vue.d.ts` file to shim `.vue` modules:
```typescript
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
```

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.

</details>

## Plugin hooks

This plugin provides some custom webpack hooks:
Expand Down
6 changes: 0 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,8 @@
},
"peerDependencies": {
"typescript": ">3.6.0",
"vue-template-compiler": "*",
"webpack": "^5.11.0"
},
"peerDependenciesMeta": {
"vue-template-compiler": {
"optional": true
}
},
"devDependencies": {
"@commitlint/config-conventional": "^16.0.0",
"@semantic-release/commit-analyzer": "^8.0.1",
Expand Down
29 changes: 0 additions & 29 deletions src/plugin-options.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,14 +159,6 @@
}
}
},
"extensions": {
"type": "object",
"properties": {
"vue": {
"$ref": "#/definitions/TypeScriptVueExtensionOptions"
}
}
},
"profile": {
"type": "boolean",
"description": "Measures and prints timings related to the TypeScript performance."
Expand All @@ -177,27 +169,6 @@
}
}
},
"TypeScriptVueExtensionOptions": {
"oneOf": [
{
"type": "boolean",
"description": "Enable TypeScript Vue extension."
},
{
"type": "object",
"properties": {
"enabled": {
"type": "boolean",
"description": "Enable TypeScript Vue extension."
},
"compiler": {
"type": "string",
"description": "Custom vue-template-compiler package"
}
}
}
]
},
"FormatterOptions": {
"oneOf": [
{
Expand Down
Loading

0 comments on commit 81b3414

Please sign in to comment.