From c2b68b91877bfb5a72100895d770583e019e8e20 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Tue, 23 Jun 2020 09:15:10 -0400
Subject: [PATCH] fix(react): add styled-jsx type definitions for React libs
 (#3221)

---
 e2e/react/src/react-package.test.ts           |  6 --
 e2e/react/src/react.test.ts                   | 85 +++++++++----------
 .../{tsconfig.json => tsconfig.json__tmpl__}  |  1 +
 3 files changed, 43 insertions(+), 49 deletions(-)
 rename packages/react/src/schematics/library/files/lib/{tsconfig.json => tsconfig.json__tmpl__} (78%)

diff --git a/e2e/react/src/react-package.test.ts b/e2e/react/src/react-package.test.ts
index 44e8895338995..b07548902f83f 100644
--- a/e2e/react/src/react-package.test.ts
+++ b/e2e/react/src/react-package.test.ts
@@ -152,9 +152,3 @@ forEachCli('nx', (cli) => {
     }, 1000000);
   });
 });
-
-forEachCli('angular', () => {
-  describe('Build Angular library', () => {
-    it('should work', async () => {}, 1000000);
-  });
-});
diff --git a/e2e/react/src/react.test.ts b/e2e/react/src/react.test.ts
index 3bedcf52c09ea..7e1ab8969c9bb 100644
--- a/e2e/react/src/react.test.ts
+++ b/e2e/react/src/react.test.ts
@@ -4,7 +4,6 @@ import {
   checkFilesExist,
   ensureProject,
   forEachCli,
-  newProject,
   readFile,
   readJson,
   renameFile,
@@ -15,9 +14,7 @@ import {
   workspaceConfigName,
 } from '@nrwl/e2e/utils';
 
-forEachCli((currentCLIName) => {
-  const linter = currentCLIName === 'angular' ? 'tslint' : 'eslint';
-
+forEachCli('nx', () => {
   describe('React Applications', () => {
     it('should be able to generate a react app + lib', async () => {
       ensureProject();
@@ -25,9 +22,11 @@ forEachCli((currentCLIName) => {
       const libName = uniq('lib');
 
       runCLI(
-        `generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
+        `generate @nrwl/react:app ${appName} --style=css --no-interactive`
+      );
+      runCLI(
+        `generate @nrwl/react:lib ${libName} --style=css --no-interactive`
       );
-      runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
 
       // Libs should not include package.json by default
       checkFilesDoNotExist(`libs/${libName}/package.json`);
@@ -42,32 +41,12 @@ forEachCli((currentCLIName) => {
 
       await testGeneratedApp(appName, {
         checkStyles: true,
+        checkProdBuild: true,
         checkLinter: true,
         checkE2E: true,
       });
     }, 120000);
 
-    it('should be able to generate a publishable react lib', async () => {
-      ensureProject();
-      const libName = uniq('lib');
-
-      runCLI(
-        `generate @nrwl/react:lib ${libName} --publishable --no-interactive`
-      );
-
-      const libTestResults = await runCLIAsync(`build ${libName} --extractCss`);
-      expect(libTestResults.stdout).toContain('Bundle complete.');
-
-      checkFilesExist(
-        `dist/libs/${libName}/package.json`,
-        `dist/libs/${libName}/index.d.ts`,
-        `dist/libs/${libName}/${libName}.esm.css`,
-        `dist/libs/${libName}/${libName}.esm.js`,
-        `dist/libs/${libName}/${libName}.umd.css`,
-        `dist/libs/${libName}/${libName}.umd.js`
-      );
-    }, 120000);
-
     it('should be able to generate a publishable react lib', async () => {
       ensureProject();
       const libName = uniq('lib');
@@ -110,9 +89,7 @@ forEachCli((currentCLIName) => {
       const appName = uniq('app');
       const libName = uniq('lib');
 
-      runCLI(
-        `generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
-      );
+      runCLI(`generate @nrwl/react:app ${appName} --no-interactive`);
       runCLI(
         `generate @nrwl/react:lib ${libName} --no-interactive --no-component`
       );
@@ -125,7 +102,8 @@ forEachCli((currentCLIName) => {
 
       await testGeneratedApp(appName, {
         checkStyles: true,
-        checkLinter: true,
+        checkProdBuild: false,
+        checkLinter: false,
         checkE2E: false,
       });
     }, 120000);
@@ -153,13 +131,12 @@ forEachCli((currentCLIName) => {
       ensureProject();
       const appName = uniq('app');
 
-      runCLI(
-        `generate @nrwl/react:app ${appName} --routing --no-interactive --linter=${linter}`
-      );
+      runCLI(`generate @nrwl/react:app ${appName} --routing --no-interactive`);
 
       await testGeneratedApp(appName, {
         checkStyles: true,
-        checkLinter: true,
+        checkProdBuild: false,
+        checkLinter: false,
         checkE2E: false,
       });
     }, 120000);
@@ -169,12 +146,29 @@ forEachCli((currentCLIName) => {
       const appName = uniq('app');
 
       runCLI(
-        `generate @nrwl/react:app ${appName} --style styled-components --no-interactive --linter=${linter}`
+        `generate @nrwl/react:app ${appName} --style styled-components --no-interactive`
       );
 
       await testGeneratedApp(appName, {
         checkStyles: false,
-        checkLinter: true,
+        checkProdBuild: false,
+        checkLinter: false,
+        checkE2E: false,
+      });
+    }, 120000);
+
+    it('should generate app with styled-jsx', async () => {
+      ensureProject();
+      const appName = uniq('app');
+
+      runCLI(
+        `generate @nrwl/react:app ${appName} --style styled-jsx --no-interactive`
+      );
+
+      await testGeneratedApp(appName, {
+        checkStyles: false,
+        checkProdBuild: false,
+        checkLinter: false,
         checkE2E: false,
       });
     }, 120000);
@@ -184,12 +178,13 @@ forEachCli((currentCLIName) => {
       const appName = uniq('app');
 
       runCLI(
-        `generate @nrwl/react:app ${appName} --style none --no-interactive --linter=${linter}`
+        `generate @nrwl/react:app ${appName} --style none --no-interactive`
       );
 
       await testGeneratedApp(appName, {
         checkStyles: false,
-        checkLinter: true,
+        checkProdBuild: false,
+        checkLinter: false,
         checkE2E: false,
       });
 
@@ -227,9 +222,7 @@ forEachCli((currentCLIName) => {
       const appName = uniq('app');
       const libName = uniq('lib');
 
-      runCLI(
-        `generate @nrwl/react:app ${appName} --no-interactive --linter=${linter}`
-      );
+      runCLI(`generate @nrwl/react:app ${appName} --no-interactive`);
       runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
 
       renameFile(
@@ -263,6 +256,7 @@ forEachCli((currentCLIName) => {
 
       await testGeneratedApp(appName, {
         checkStyles: true,
+        checkProdBuild: false,
         checkLinter: false,
         checkE2E: false,
       });
@@ -270,7 +264,12 @@ forEachCli((currentCLIName) => {
 
     async function testGeneratedApp(
       appName,
-      opts: { checkStyles: boolean; checkLinter: boolean; checkE2E: boolean }
+      opts: {
+        checkProdBuild: boolean;
+        checkStyles: boolean;
+        checkLinter: boolean;
+        checkE2E: boolean;
+      }
     ) {
       if (opts.checkLinter) {
         const lintResults = runCLI(`lint ${appName}`);
diff --git a/packages/react/src/schematics/library/files/lib/tsconfig.json b/packages/react/src/schematics/library/files/lib/tsconfig.json__tmpl__
similarity index 78%
rename from packages/react/src/schematics/library/files/lib/tsconfig.json
rename to packages/react/src/schematics/library/files/lib/tsconfig.json__tmpl__
index 98cda60889edc..3ec44ec6dfd78 100644
--- a/packages/react/src/schematics/library/files/lib/tsconfig.json
+++ b/packages/react/src/schematics/library/files/lib/tsconfig.json__tmpl__
@@ -8,6 +8,7 @@
     "types": []
   },
   "files": [
+  <% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nrwl/react/typings/styled-jsx.d.ts",<% } %>
     "<%= offsetFromRoot %>node_modules/@nrwl/react/typings/cssmodule.d.ts",
     "<%= offsetFromRoot %>node_modules/@nrwl/react/typings/image.d.ts"
   ],