From 1ad63b4ea04577db73d3b194eab08d3104600082 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 13:20:11 -0700 Subject: [PATCH 01/18] Specify types in package --- packages/react-scripts/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index dd91e4372fa..69c2ee4b5c4 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -21,6 +21,7 @@ "bin": { "react-scripts": "./bin/react-scripts.js" }, + "types": "./config/react-app.d.ts", "dependencies": { "@babel/core": "7.1.0", "@svgr/webpack": "2.4.1", From e7deb7d14de2625c81b94eae934000f7d2d76097 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 13:25:54 -0700 Subject: [PATCH 02/18] Do not remove types file on eject --- packages/react-scripts/config/react-app.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 8d91473dc5a..5a9e7f30a5f 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -1,4 +1,3 @@ -// @remove-file-on-eject // Do not edit this file. It's replaced every time you launch a toolbox action. // If you need to add additional declarations, please do so in a new file. From 0ebcbbd5b1a47313f8247b78b22af9984b3df67b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 13:30:41 -0700 Subject: [PATCH 03/18] Stop copying types into generated project --- .../scripts/utils/verifyTypeScriptSetup.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index 068fde69591..cf9c59d38e3 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -237,22 +237,6 @@ function verifyTypeScriptSetup() { } writeJson(paths.appTsConfig, appTsConfig); } - - // Copy type declarations associated with this version of `react-scripts` - const declaredTypes = path.resolve( - __dirname, - '..', - '..', - 'config', - 'react-app.d.ts' - ); - const declaredTypesContent = fs - .readFileSync(declaredTypes, 'utf8') - .replace(/\/\/ @remove-file-on-eject\r?\n/, ''); - fs.writeFileSync( - path.resolve(paths.appSrc, 'react-app.d.ts'), - declaredTypesContent - ); } module.exports = verifyTypeScriptSetup; From 59a595e556bfb7825ba5ea10f441a1b0913996e3 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 15:16:56 -0700 Subject: [PATCH 04/18] Reference react and react-dom --- packages/react-scripts/config/react-app.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 5a9e7f30a5f..7cdea23184e 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -1,5 +1,5 @@ -// Do not edit this file. It's replaced every time you launch a toolbox action. -// If you need to add additional declarations, please do so in a new file. +/// +/// declare namespace NodeJS { interface ProcessEnv { From 290e128bbdaa893e26c73a1c2a9dfd541b7f12d5 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 17:45:38 -0700 Subject: [PATCH 05/18] Reference node types --- packages/react-scripts/config/react-app.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 7cdea23184e..31e990dedaf 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -1,3 +1,4 @@ +/// /// /// From 6fc97457128321de1a43c05978559dcb6898cb09 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 18:00:18 -0700 Subject: [PATCH 06/18] Install node types as well --- packages/create-react-app/createReactApp.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 6bc7464689f..b5e821d7b9d 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -373,10 +373,12 @@ function run( const packageToInstall = getInstallPackage(version, originalDirectory); const allDependencies = ['react', 'react-dom', packageToInstall]; if (useTypescript) { + // TODO: get user's node version instead of installing latest allDependencies.push( + '@types/jest', + '@types/node', '@types/react', '@types/react-dom', - '@types/jest', 'typescript' ); } From b19c1409559843c94be2639898d00bd6677fee4f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 18:07:17 -0700 Subject: [PATCH 07/18] Restore copying --- packages/react-scripts/config/react-app.d.ts | 4 ++++ packages/react-scripts/package.json | 1 - .../scripts/utils/verifyTypeScriptSetup.js | 16 ++++++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 31e990dedaf..3d0d54d1f0e 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -1,3 +1,7 @@ +// @remove-file-on-eject +// Do not edit this file. It's replaced every time you launch a toolbox action. +// If you need to add additional declarations, please do so in a new file. + /// /// /// diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 69c2ee4b5c4..dd91e4372fa 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -21,7 +21,6 @@ "bin": { "react-scripts": "./bin/react-scripts.js" }, - "types": "./config/react-app.d.ts", "dependencies": { "@babel/core": "7.1.0", "@svgr/webpack": "2.4.1", diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index cf9c59d38e3..068fde69591 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -237,6 +237,22 @@ function verifyTypeScriptSetup() { } writeJson(paths.appTsConfig, appTsConfig); } + + // Copy type declarations associated with this version of `react-scripts` + const declaredTypes = path.resolve( + __dirname, + '..', + '..', + 'config', + 'react-app.d.ts' + ); + const declaredTypesContent = fs + .readFileSync(declaredTypes, 'utf8') + .replace(/\/\/ @remove-file-on-eject\r?\n/, ''); + fs.writeFileSync( + path.resolve(paths.appSrc, 'react-app.d.ts'), + declaredTypesContent + ); } module.exports = verifyTypeScriptSetup; From 2a2cb5e38b01807a260032952bb8a4d8a5b60959 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 26 Oct 2018 18:09:14 -0700 Subject: [PATCH 08/18] Add Node to the list of installed types --- docusaurus/docs/adding-typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 5dee127ee70..495ac4f2895 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -8,9 +8,9 @@ title: Adding TypeScript To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: ```bash -$ npm install --save typescript @types/react @types/react-dom @types/jest +$ npm install --save typescript @types/jest @types/node @types/react @types/react-dom $ # or -$ yarn add typescript @types/react @types/react-dom @types/jest +$ yarn add typescript @types/jest @types/node @types/react @types/react-dom ``` Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! From 93016920cbddbbec7b65e97817c9c85bc1e6f7ad Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 22:33:36 -0400 Subject: [PATCH 09/18] Reference Jest types --- packages/react-scripts/config/react-app.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 3d0d54d1f0e..347c8dccb85 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -3,6 +3,7 @@ // If you need to add additional declarations, please do so in a new file. /// +/// /// /// From 322280e731b5b6f4c8effc6a2f8671605095cb65 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 22:35:46 -0400 Subject: [PATCH 10/18] Remove jest types from install --- docusaurus/docs/adding-typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 495ac4f2895..8d1d0af96c4 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -8,9 +8,9 @@ title: Adding TypeScript To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: ```bash -$ npm install --save typescript @types/jest @types/node @types/react @types/react-dom +$ npm install --save typescript @types/node @types/react @types/react-dom $ # or -$ yarn add typescript @types/jest @types/node @types/react @types/react-dom +$ yarn add typescript @types/node @types/react @types/react-dom ``` Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! From ca5ba7e1c2da1da1677e7e587c8d015e2fe3cdb4 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 22:38:45 -0400 Subject: [PATCH 11/18] Remove jest from CRA install --- packages/create-react-app/createReactApp.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index b5e821d7b9d..c88735e4592 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -375,7 +375,6 @@ function run( if (useTypescript) { // TODO: get user's node version instead of installing latest allDependencies.push( - '@types/jest', '@types/node', '@types/react', '@types/react-dom', From 39d227ad0919a563ca002c99f774ecb3b2808403 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 22:44:36 -0400 Subject: [PATCH 12/18] Remove Jest reference and let user do this themselves --- packages/react-scripts/config/react-app.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 347c8dccb85..3d0d54d1f0e 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -3,7 +3,6 @@ // If you need to add additional declarations, please do so in a new file. /// -/// /// /// From 468cf092279f873061989ff2b847ad0be7a8ecd5 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 22:49:56 -0400 Subject: [PATCH 13/18] Stop copying types file --- .../scripts/utils/verifyTypeScriptSetup.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index 068fde69591..cf9c59d38e3 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -237,22 +237,6 @@ function verifyTypeScriptSetup() { } writeJson(paths.appTsConfig, appTsConfig); } - - // Copy type declarations associated with this version of `react-scripts` - const declaredTypes = path.resolve( - __dirname, - '..', - '..', - 'config', - 'react-app.d.ts' - ); - const declaredTypesContent = fs - .readFileSync(declaredTypes, 'utf8') - .replace(/\/\/ @remove-file-on-eject\r?\n/, ''); - fs.writeFileSync( - path.resolve(paths.appSrc, 'react-app.d.ts'), - declaredTypesContent - ); } module.exports = verifyTypeScriptSetup; From 0dcb0a4f321198b3e4e9d8cf5f622d1c30f6e03f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 22:56:50 -0400 Subject: [PATCH 14/18] Add types key to package.json --- packages/react-scripts/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index dd91e4372fa..69c2ee4b5c4 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -21,6 +21,7 @@ "bin": { "react-scripts": "./bin/react-scripts.js" }, + "types": "./config/react-app.d.ts", "dependencies": { "@babel/core": "7.1.0", "@svgr/webpack": "2.4.1", From cc483f415c7ae5e23db20a8695170ad8e2f31673 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 23:31:10 -0400 Subject: [PATCH 15/18] Add appTypeDeclarations and create when missing --- packages/react-scripts/config/paths.js | 3 +++ packages/react-scripts/config/react-app.d.ts | 4 ---- .../react-scripts/scripts/utils/verifyTypeScriptSetup.js | 8 ++++++++ 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index f556b4b196f..b87b56fe1d1 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -84,6 +84,7 @@ module.exports = { appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), + appTypeDeclarations: resolveApp('src/react-app.d.ts'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), @@ -106,6 +107,7 @@ module.exports = { appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), + appTypeDeclarations: resolveApp('src/react-app.d.ts'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), @@ -138,6 +140,7 @@ if ( appPackageJson: resolveOwn('package.json'), appSrc: resolveOwn('template/src'), appTsConfig: resolveOwn('template/tsconfig.json'), + appTypeDeclarations: resolveOwn('template/src/react-app.d.ts'), yarnLockFile: resolveOwn('template/yarn.lock'), testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'), proxySetup: resolveOwn('template/src/setupProxy.js'), diff --git a/packages/react-scripts/config/react-app.d.ts b/packages/react-scripts/config/react-app.d.ts index 3d0d54d1f0e..31e990dedaf 100644 --- a/packages/react-scripts/config/react-app.d.ts +++ b/packages/react-scripts/config/react-app.d.ts @@ -1,7 +1,3 @@ -// @remove-file-on-eject -// Do not edit this file. It's replaced every time you launch a toolbox action. -// If you need to add additional declarations, please do so in a new file. - /// /// /// diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js index cf9c59d38e3..eb592deced0 100644 --- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js +++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js @@ -237,6 +237,14 @@ function verifyTypeScriptSetup() { } writeJson(paths.appTsConfig, appTsConfig); } + + // Reference `react-scripts` types + if (!fs.existsSync(paths.appTypeDeclarations)) { + fs.writeFileSync( + paths.appTypeDeclarations, + `/// ${os.EOL}` + ); + } } module.exports = verifyTypeScriptSetup; From 2f8ad10d3e74e56b1031f47613798a7e893351d3 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 23:32:27 -0400 Subject: [PATCH 16/18] Rename declarations file --- packages/react-scripts/config/paths.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index b87b56fe1d1..70fc76a0140 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -84,7 +84,7 @@ module.exports = { appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), - appTypeDeclarations: resolveApp('src/react-app.d.ts'), + appTypeDeclarations: resolveApp('src/react-app-env.d.ts'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), @@ -107,7 +107,7 @@ module.exports = { appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), - appTypeDeclarations: resolveApp('src/react-app.d.ts'), + appTypeDeclarations: resolveApp('src/react-app-env.d.ts'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), @@ -140,7 +140,7 @@ if ( appPackageJson: resolveOwn('package.json'), appSrc: resolveOwn('template/src'), appTsConfig: resolveOwn('template/tsconfig.json'), - appTypeDeclarations: resolveOwn('template/src/react-app.d.ts'), + appTypeDeclarations: resolveOwn('template/src/react-app-env.d.ts'), yarnLockFile: resolveOwn('template/yarn.lock'), testsSetup: resolveModule(resolveOwn, 'template/src/setupTests'), proxySetup: resolveOwn('template/src/setupProxy.js'), From 5ee0a1165b6b09b3cc1a2bcec59b742017075777 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 27 Oct 2018 23:57:43 -0400 Subject: [PATCH 17/18] Add Jest back to install instructions --- docusaurus/docs/adding-typescript.md | 4 ++-- packages/create-react-app/createReactApp.js | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 8d1d0af96c4..b06c01b5147 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -8,9 +8,9 @@ title: Adding TypeScript To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: ```bash -$ npm install --save typescript @types/node @types/react @types/react-dom +$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest $ # or -$ yarn add typescript @types/node @types/react @types/react-dom +$ yarn add typescript @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/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index c88735e4592..6c0937215e9 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -376,6 +376,7 @@ function run( // TODO: get user's node version instead of installing latest allDependencies.push( '@types/node', + '@types/jest', '@types/react', '@types/react-dom', 'typescript' From 174c3869d62de89b097891617745de5fe0f07c0f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 28 Oct 2018 00:01:48 -0400 Subject: [PATCH 18/18] Minimize diff --- packages/create-react-app/createReactApp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 6c0937215e9..f0a2d23aba3 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -376,9 +376,9 @@ function run( // TODO: get user's node version instead of installing latest allDependencies.push( '@types/node', - '@types/jest', '@types/react', '@types/react-dom', + '@types/jest', 'typescript' ); }