Fix TypeScript support for update-react-imports (#275)

gaearon · web-flow · commit db3d33971d2a · 2020-09-23T12:51:00.000+01:00
* Add TypeScript tests for update-react-imports

* Fix update-react-imports for TS

* Add more tests
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.input.js
@@ -0,0 +1,5 @@
+import React, { createElement, useState } from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import-react-variable.tsx.output.js
@@ -0,0 +1,6 @@
+import { createElement, useState } from "react";
+import * as React from "react";
+
+React.createElement('div', {});
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.input.js
@@ -0,0 +1,3 @@
+import React, { createElement, useState } from "react";
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/default-and-multiple-specifiers-import.tsx.output.js
@@ -0,0 +1,3 @@
+import { createElement, useState } from "react";
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.input.js
@@ -0,0 +1,3 @@
+import * as React from "react";
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-element.tsx.output.js
@@ -0,0 +1 @@
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.input.js
@@ -0,0 +1,3 @@
+import * as React from "react";
+
+<></>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/jsx-fragment.tsx.output.js
@@ -0,0 +1 @@
+<></>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.input.js
@@ -0,0 +1,7 @@
+/**
+ * Hello world.
+ */
+
+import * as React from "react";
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/leading-comment.tsx.output.js
@@ -0,0 +1,5 @@
+/**
+ * Hello world.
+ */
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.input.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+  <div>{message}</div>
+);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-default.tsx.output.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+  <div>{message}</div>
+);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.input.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
+  <div>{message}</div>
+);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/preserve-types-namespace.tsx.output.js
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.input.js
@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+React.useState(false);
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-already-used-named-export.tsx.output.js
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.input.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+React.createElement('div', {});
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element-react-variable.tsx.output.js
@@ -0,0 +1,5 @@
+import { createElement } from "react";
+
+createElement('div', {});
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.input.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export-jsx-element.tsx.output.js
@@ -0,0 +1 @@
+<div></div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.input.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+React.createElement('div', 'la');
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-basic-default-export.tsx.output.js
@@ -0,0 +1,3 @@
+import { createElement } from "react";
+
+createElement('div', 'la');
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.input.js
@@ -0,0 +1,3 @@
+import React, { useState } from 'react';
+
+<React.Fragment />
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-jsx-member-expression.tsx.output.js
@@ -0,0 +1,3 @@
+import { Fragment, useState } from 'react';
+
+<Fragment />
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.input.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+React.createElement('div', {});
+
+Promise.resolve(React);
+
+<div>Hi</div>
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/react-not-removed.tsx.output.js
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+React.createElement('div', {});
+
+Promise.resolve(React);
+
+<div>Hi</div>
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.input.js b/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.input.js
@@ -0,0 +1,7 @@
+import * as React from "react";
+
+React.createElement('div', {});
+
+createElement('someFunction');
+
+<div>Hi</div>;
diff --git a/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.output.js b/transforms/__testfixtures__/update-react-imports/typescript/variable-already-used.tsx.output.js
diff --git a/transforms/__tests__/update-react-imports-test.js b/transforms/__tests__/update-react-imports-test.js
@@ -8,20 +8,28 @@
 
 'use strict';
 
+const flowOnlyTests = [
+  'flow-default-and-type-specifier-import-react-variable',
+  'flow-default-and-type-specifier-import',
+  'react-type-not-removed',
+  'react-type-default-export',
+];
+
+const tsOnlyTests = [
+  'preserve-types-namespace',
+  'preserve-types-default',
+];
+
 const tests = [
   'default-and-multiple-specifiers-import-react-variable',
   'default-and-multiple-specifiers-import',
-  'flow-default-and-type-specifier-import-react-variable',
-  'flow-default-and-type-specifier-import',
   'jsx-element',
   'jsx-fragment',
   'leading-comment',
   'react-basic-default-export-jsx-element-react-variable',
   'react-basic-default-export-jsx-element',
   'react-basic-default-export',
-  'react-type-default-export',
   'react-not-removed',
-  'react-type-not-removed',
   'variable-already-used',
   'react-jsx-member-expression',
   'react-already-used-named-export',
@@ -35,11 +43,37 @@ jest.mock('../update-react-imports', () => {
 
 const defineTest = require('jscodeshift/dist/testUtils').defineTest;
 
-tests.forEach((test) => {
+[...tests, ...flowOnlyTests].forEach((test) => {
   defineTest(
     __dirname,
     'update-react-imports',
     null,
     `update-react-imports/${test}`
   );
 });
+
+describe('typescript', () => {
+  beforeEach(() => {
+    jest.mock('../update-react-imports', () => {
+      return Object.assign(
+        require.requireActual('../update-react-imports'),
+        {
+          parser: 'tsx'
+        }
+      );
+    });
+  });
+
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  [...tests, ...tsOnlyTests].forEach((test) => {
+    defineTest(
+      __dirname,
+      'update-react-imports',
+      null,
+      `update-react-imports/typescript/${test}.tsx`
+    );
+  });
+});
diff --git a/transforms/update-react-imports.js b/transforms/update-react-imports.js
@@ -40,14 +40,16 @@ module.exports = function(file, api, options) {
   const reactImportPaths = root
     .find(j.ImportDeclaration, {
       type: 'ImportDeclaration',
-      source: {
-        type: 'Literal',
-      },
     })
     .filter(path => {
       return (
-        path.value.source.value === 'React' ||
-        path.value.source.value === 'react'
+        (
+          path.value.source.type === 'Literal' ||
+          path.value.source.type === 'StringLiteral'
+        ) && (
+          path.value.source.value === 'React' ||
+          path.value.source.value === 'react'
+        )
       );
     });
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import React, { createElement, useState } from "react";`
	`2`	`+`
	`3`	`+<div>Hi</div>;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { createElement, useState } from "react";`
	`2`	`+`
	`3`	`+<div>Hi</div>;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import * as React from "react";`
	`2`	`+`
	`3`	`+<div>Hi</div>;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import * as React from "react";`
	`2`	`+`
	`3`	`+<></>;`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +/**
 + * Hello world.
 + */
++
 +<div></div>;