fix(react): add styled-jsx type definitions for React libs (#3221)

nrwl · Jun 25, 2020 · c2b68b9 · c2b68b9
1 parent f98b4e5
commit c2b68b9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 49 deletions.
diff --git 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
@@ -4,7 +4,6 @@ import {
   checkFilesExist,
   ensureProject,
   forEachCli,
-  newProject,
   readFile,
   readJson,
   renameFile,
@@ -15,19 +14,19 @@ 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();
       const appName = uniq('app');
       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,14 +256,20 @@ forEachCli((currentCLIName) => {
 
       await testGeneratedApp(appName, {
         checkStyles: true,
+        checkProdBuild: false,
         checkLinter: false,
         checkE2E: false,
       });
     }, 30000);
 
     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/...chematics/library/files/lib/tsconfig.json → ...s/library/files/lib/tsconfig.json__tmpl__ b/...chematics/library/files/lib/tsconfig.json → ...s/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"
   ],