Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: drop support for Vue.js #801

Merged
merged 2 commits into from
Mar 5, 2023
Merged

feat: drop support for Vue.js #801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d8beb0
feat: drop support for Vue.js
piotr-oles Feb 25, 2023
539de88
docs: update README.md
piotr-oles Mar 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 1 addition & 126 deletions README.md
View file
Open in desktop
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, please use [version 6](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v6.5.2) 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
Open in desktop
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
Open in desktop
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