From fa2878ddcfdc44315ac1f73fab89d5125c5e59c2 Mon Sep 17 00:00:00 2001 From: Thew Dhanat <26767607+ThewBear@users.noreply.github.com> Date: Sun, 26 Jan 2020 15:05:51 +0700 Subject: [PATCH] Make @typescript-eslint an optional peer dependency --- docusaurus/docs/adding-typescript.md | 4 ++-- packages/cra-template-typescript/template.json | 4 +++- packages/eslint-config-react-app/README.md | 2 +- packages/eslint-config-react-app/package.json | 11 ++++++++++- packages/react-scripts/package.json | 12 +++++++++--- test/fixtures/typescript-advanced/index.test.js | 3 ++- test/fixtures/typescript-advanced/package.json | 4 +++- 7 files changed, 30 insertions(+), 10 deletions(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 40c9c2242a8..057372dce05 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -26,11 +26,11 @@ yarn create react-app my-app --template typescript To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: ```sh -npm install --save typescript @types/node @types/react @types/react-dom @types/jest +npm install --save typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @types/node @types/react @types/react-dom @types/jest # or -yarn add typescript @types/node @types/react @types/react-dom @types/jest +yarn add typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser @types/node @types/react @types/react-dom @types/jest ``` Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json index decd08f1b4e..6a61aa6d333 100644 --- a/packages/cra-template-typescript/template.json +++ b/packages/cra-template-typescript/template.json @@ -8,7 +8,9 @@ "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/jest": "^25.0.0", - "typescript": "^3.8.0" + "typescript": "^3.8.0", + "@typescript-eslint/eslint-plugin": "^2.28.0", + "@typescript-eslint/parser": "^2.28.0" } } } diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index d71c8d31489..011aeb82e6e 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -19,7 +19,7 @@ If you want to use this ESLint configuration in a project not built with Create First, install this package, ESLint and the necessary plugins. ```sh -npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@2.x @typescript-eslint/parser@2.x babel-eslint@10.x eslint@6.x eslint-plugin-flowtype@4.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@2.x +npm install --save-dev eslint-config-react-app babel-eslint@10.x eslint@6.x eslint-plugin-flowtype@4.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@2.x ``` Then create a file named `.eslintrc.json` with following contents in the root folder of your project: diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index bc92bac2c75..62399f6564c 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -25,7 +25,16 @@ "eslint-plugin-react": "7.x", "eslint-plugin-react-hooks": "1.x || 2.x || 3.x || 4.x" }, + "peerDependenciesMeta": { + "@typescript-eslint/eslint-plugin": { + "optional": true + }, + "@typescript-eslint/parser": { + "optional": true + } + }, "dependencies": { - "confusing-browser-globals": "^1.0.9" + "confusing-browser-globals": "^1.0.9", + "resolve": "^1.16.0" } } diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4fc9412323b..2e011190c27 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -31,8 +31,6 @@ "@babel/core": "7.10.1", "@pmmmwh/react-refresh-webpack-plugin": "0.3.2", "@svgr/webpack": "5.4.0", - "@typescript-eslint/eslint-plugin": "^2.10.0", - "@typescript-eslint/parser": "^2.10.0", "babel-eslint": "10.1.0", "babel-jest": "^26.0.1", "babel-loader": "8.1.0", @@ -92,11 +90,19 @@ "fsevents": "^2.1.3" }, "peerDependencies": { - "typescript": "^3.2.1" + "typescript": "^3.2.1", + "@typescript-eslint/eslint-plugin": "^2.28.0", + "@typescript-eslint/parser": "^2.28.0" }, "peerDependenciesMeta": { "typescript": { "optional": true + }, + "@typescript-eslint/eslint-plugin": { + "optional": true + }, + "@typescript-eslint/parser": { + "optional": true } }, "browserslist": { diff --git a/test/fixtures/typescript-advanced/index.test.js b/test/fixtures/typescript-advanced/index.test.js index fe7ff9c2bda..f80faa5201b 100644 --- a/test/fixtures/typescript-advanced/index.test.js +++ b/test/fixtures/typescript-advanced/index.test.js @@ -1,7 +1,8 @@ const testSetup = require('../__shared__/test-setup'); test('builds in development', async () => { - const { fulfilled } = await testSetup.scripts.start({ smoke: true }); + const { fulfilled, stderr } = await testSetup.scripts.start({ smoke: true }); + expect(stderr).toBe("We detected TypeScript in your project (src/App.test.ts) and created a tsconfig.json file for you.\n"); expect(fulfilled).toBe(true); }); test('builds in production', async () => { diff --git a/test/fixtures/typescript-advanced/package.json b/test/fixtures/typescript-advanced/package.json index 04db4453464..ea9ff05bbe9 100644 --- a/test/fixtures/typescript-advanced/package.json +++ b/test/fixtures/typescript-advanced/package.json @@ -5,6 +5,8 @@ "@types/jest": "*", "react": "*", "react-dom": "*", - "typescript": "3.7.2" + "typescript": "3.7.2", + "@typescript-eslint/eslint-plugin": "^2.28.0", + "@typescript-eslint/parser": "^2.28.0" } }