feat(typescript): support generic JSX element (#4268)

* feat(typescript): support generic JSX element

* fix(playground): `buffer is not defined` in `--parser typescript`

* chore(deps): update typescript-eslint-parser

src/language-js/printer-estree.js

@@ -1845,7 +1845,12 @@ function printPathNoParens(path, options, print, args) {
 
       // Don't break self-closing elements with no attributes and no comments
       if (n.selfClosing && !n.attributes.length && !nameHasComments) {
-        return concat(["<", path.call(print, "name"), " />"]);
+        return concat([
+          "<",
+          path.call(print, "name"),
+          path.call(print, "typeParameters"),
+          " />"
+        ]);
       }
 
       // don't break up opening elements with a single long text attribute
@@ -1871,6 +1876,7 @@ function printPathNoParens(path, options, print, args) {
           concat([
             "<",
             path.call(print, "name"),
+            path.call(print, "typeParameters"),
             " ",
             concat(path.map(print, "attributes")),
             n.selfClosing ? " />" : ">"
@@ -1909,6 +1915,7 @@ function printPathNoParens(path, options, print, args) {
         concat([
           "<",
           path.call(print, "name"),
+          path.call(print, "typeParameters"),
           concat([
             indent(
               concat(

tests/typescript_tsx/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`generic-component.tsx 1`] = `
+const c1 = <MyComponent<number> data={12} />
+
+const c2 = <MyComponent<number> />
+
+const c3 = <MyComponent<number> attr="value" />
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const c1 = <MyComponent<number> data={12} />;
+
+const c2 = <MyComponent<number> />;
+
+const c3 = <MyComponent<number> attr="value" />;
+
+`;
+
 exports[`keyword.tsx 1`] = `
 <try />;
 <object />

tests/typescript_tsx/generic-component.tsx

@@ -0,0 +1,5 @@
+const c1 = <MyComponent<number> data={12} />
+
+const c2 = <MyComponent<number> />
+
+const c3 = <MyComponent<number> attr="value" />