Remove react-scripts type reference on eject (#5611)

* Remove react-scripts type reference on eject

* Check for env file

* Check eject for typescript

* Shuffle appTypeDeclarations

* Append internal types on eject

* Ensure lib is published for types

* Adjust comment

* Don't add a bunch of new lines

* File should exist and not be deleted

* Add debug

* Set file explicitly

* Revert "Set file explicitly"

This reverts commit bcd58a36cbd08a71af50b037d8f1fae6c595fb4e.

* Copy file before destroying ourselves

* Revert "Add debug"

This reverts commit 0068ba81c6d79d99788877c9e1b618acd7412dce.

packages/react-scripts/config/paths.js

@@ -84,7 +84,6 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
-  appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -107,7 +106,6 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appTsConfig: resolveApp('tsconfig.json'),
-  appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
@@ -117,6 +115,8 @@ module.exports = {
   // These properties only exist before ejecting:
   ownPath: resolveOwn('.'),
   ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
+  appTypeDeclarations: resolveApp('src/react-app-env.d.ts'),
+  ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
 };
 
 const ownPackageJson = require('../package.json');
@@ -140,7 +140,6 @@ if (
     appPackageJson: resolveOwn('package.json'),
     appSrc: resolveOwn('template/src'),
     appTsConfig: resolveOwn('template/tsconfig.json'),
-    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'),
@@ -150,6 +149,8 @@ if (
     // These properties only exist before ejecting:
     ownPath: resolveOwn('.'),
     ownNodeModules: resolveOwn('node_modules'),
+    appTypeDeclarations: resolveOwn('template/src/react-app-env.d.ts'),
+    ownTypeDeclarations: resolveOwn('lib/react-app.d.ts'),
   };
 }
 // @remove-on-eject-end

packages/react-scripts/package.json

@@ -13,6 +13,7 @@
   "files": [
     "bin",
     "config",
+    "lib",
     "scripts",
     "template",
     "template-typescript",
@@ -21,7 +22,7 @@
   "bin": {
     "react-scripts": "./bin/react-scripts.js"
   },
-  "types": "./config/react-app.d.ts",
+  "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.1.0",
     "@svgr/webpack": "2.4.1",

packages/react-scripts/scripts/eject.js

@@ -223,6 +223,33 @@ inquirer
     );
     console.log();
 
+    if (fs.existsSync(paths.appTypeDeclarations)) {
+      try {
+        // Read app declarations file
+        let content = fs.readFileSync(paths.appTypeDeclarations, 'utf8');
+        const ownContent =
+          fs.readFileSync(paths.ownTypeDeclarations, 'utf8').trim() + os.EOL;
+
+        // Remove react-scripts reference since they're getting a copy of the types in their project
+        content =
+          content
+            // Remove react-scripts types
+            .replace(
+              /^\s*\/\/\/\s*<reference\s+types.+?"react-scripts".*\/>.*(?:\n|$)/gm,
+              ''
+            )
+            .trim() + os.EOL;
+
+        fs.writeFileSync(
+          paths.appTypeDeclarations,
+          (ownContent + os.EOL + content).trim() + os.EOL
+        );
+      } catch (e) {
+        // It's not essential that this succeeds, the TypeScript user should
+        // be able to re-create these types with ease.
+      }
+    }
+
     // "Don't destroy what isn't ours"
     if (ownPath.indexOf(appPath) === 0) {
       try {

tasks/e2e-installs.sh

@@ -170,6 +170,7 @@ exists node_modules/react-scripts
 exists node_modules/typescript
 exists src/index.tsx
 exists tsconfig.json
+exists src/react-app-env.d.ts
 checkTypeScriptDependencies
 
 # Check that the TypeScript template passes smoke tests, build, and normal tests
@@ -177,6 +178,19 @@ yarn start --smoke-test
 yarn build
 CI=true yarn test
 
+# Check eject behaves and works
+
+# Eject...
+echo yes | npm run eject
+
+# Ensure env file still exists
+exists src/react-app-env.d.ts
+
+# Check that the TypeScript template passes ejected smoke tests, build, and normal tests
+yarn start --smoke-test
+yarn build
+CI=true yarn test
+
 # ******************************************************************************
 # Test --scripts-version with a tarball url
 # ******************************************************************************