Merge pull request #2021 from szeck87/typescript-formatter-update

Update typescript-formatter and add tsx support

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Next
 - Fix [#1862](https://github.com/Glavin001/atom-beautify/issues/1862) Add support for ocp-indent as an executable
+- See [#601](https://github.com/Glavin001/atom-beautify/issues/1862) Add support for tsx files
 
 # v0.30.9 (2017-11-22)
 - Fix [#1949](https://github.com/Glavin001/atom-beautify/issues/1949): Fix beautify on save when text has not changed.

README.md

@@ -199,6 +199,7 @@ See [all supported options in the documentation at  `docs/options.md`](docs/opti
 | Swig | `HTML (Swig)`, `SWIG` |`.swig` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
 | Terraform | `Terraform` |`.tf` | **[`terraformfmt`](https://www.terraform.io/docs/commands/fmt.html)** |
 | TSS | `TSS` |`.tss` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
+| TSX | `TypeScriptReact` |`.tsx` | **[`TypeScript Formatter`](https://github.com/vvakame/typescript-formatter)** |
 | Twig | `HTML (Twig)` |`.twig` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |
 | TypeScript | `TypeScript` |`.ts` | **[`TypeScript Formatter`](https://github.com/vvakame/typescript-formatter)** |
 | UX Markup | `UX` |`.ux` | **[`Pretty Diff`](https://github.com/prettydiff/prettydiff)** |

docs/options.md

@@ -12622,6 +12622,75 @@ Maximum amount of characters per line (0 = disable) (Supported by Pretty Diff)
 }
 ```
 
+####  [TSX](#tsx) 
+
+**Supported Beautifiers**:  [`TypeScript Formatter`](#typescript-formatter) 
+
+| Option | TypeScript Formatter |
+| --- | --- |
+| `disabled` | :white_check_mark: |
+| `default_beautifier` | :white_check_mark: |
+| `beautify_on_save` | :white_check_mark: |
+
+**Description**:
+
+Options for language TSX
+
+#####  [Disable Beautifying Language](#disable-beautifying-language) 
+
+**Important**: This option is only configurable from within Atom Beautify's setting panel.
+
+**Type**: `boolean`
+
+**Description**:
+
+Disable TSX Beautification
+
+**How to Configure**
+
+1. You can open the [Settings View](https://github.com/atom/settings-view) by navigating to
+*Edit > Preferences (Linux)*, *Atom > Preferences (OS X)*, or *File > Preferences (Windows)*.
+2. Go into *Packages* and search for "*Atom Beautify*" package.
+3. Find the option "*Disable Beautifying Language*" and change it to your desired configuration.
+
+#####  [Default Beautifier](#default-beautifier) 
+
+**Important**: This option is only configurable from within Atom Beautify's setting panel.
+
+**Default**: `TypeScript Formatter`
+
+**Type**: `string`
+
+**Enum**:  `TypeScript Formatter` 
+
+**Description**:
+
+Default Beautifier to be used for TSX
+
+**How to Configure**
+
+1. You can open the [Settings View](https://github.com/atom/settings-view) by navigating to
+*Edit > Preferences (Linux)*, *Atom > Preferences (OS X)*, or *File > Preferences (Windows)*.
+2. Go into *Packages* and search for "*Atom Beautify*" package.
+3. Find the option "*Default Beautifier*" and change it to your desired configuration.
+
+#####  [Beautify On Save](#beautify-on-save) 
+
+**Important**: This option is only configurable from within Atom Beautify's setting panel.
+
+**Type**: `boolean`
+
+**Description**:
+
+Automatically beautify TSX files on save
+
+**How to Configure**
+
+1. You can open the [Settings View](https://github.com/atom/settings-view) by navigating to
+*Edit > Preferences (Linux)*, *Atom > Preferences (OS X)*, or *File > Preferences (Windows)*.
+2. Go into *Packages* and search for "*Atom Beautify*" package.
+3. Find the option "*Beautify On Save*" and change it to your desired configuration.
+
 ####  [Twig](#twig) 
 
 **Supported Beautifiers**:  [`Pretty Diff`](#pretty-diff) 

examples/simple-jsbeautifyrc/tsx/expected/test.tsx

@@ -0,0 +1,12 @@
+class Test extends React.Component<Foo> {
+  render() {
+    return (
+      <div className="class" >
+      <h2 className="anotherClass" >
+        { this.foo.bar }
+        < /h2>
+    { this.foo.bar.children }
+    </div>
+    );
+  }
+}

examples/simple-jsbeautifyrc/tsx/original/test.tsx

@@ -0,0 +1,12 @@
+class Test extends React.Component<Foo> {
+  render() {
+    return (
+      <div className="class">
+    <h2 className="anotherClass">
+          {this.foo.bar}
+        </h2>
+        {this.foo.bar.children}
+                </div>
+    );
+  }
+}

package.json

@@ -194,7 +194,7 @@
     "temp": "^0.8.3",
     "tidy-markdown": "2.0.3",
     "typescript": "2.4.1",
-    "typescript-formatter": "5.2.0",
+    "typescript-formatter": "^7.0.0",
     "underscore-plus": "^1.6.6",
     "universal-analytics": "0.4.13",
     "which": "1.2.14",
@@ -277,7 +277,8 @@
       "atom-beautify:beautify-language-xml",
       "atom-beautify:beautify-language-xtemplate",
       "atom-beautify:beautify-language-yaml",
-      "atom-beautify:beautify-language-terraform"
+      "atom-beautify:beautify-language-terraform",
+      "atom-beautify:beautify-language-tsx"
     ],
     ".tree-view .file .name": [
       "atom-beautify:beautify-file"
@@ -412,7 +413,8 @@
     "align-yaml",
     "goimports",
     "terraform",
-    "terraformfmt"
+    "terraformfmt",
+    "tsx"
   ],
   "devDependencies": {
     "coffeelint": "1.16.0"
@@ -449,4 +451,4 @@
       "prettydiff2"
     ]
   }
-}
+}

src/beautifiers/typescript-formatter.coffee

@@ -6,13 +6,14 @@ module.exports = class TypeScriptFormatter extends Beautifier
   link: "https://github.com/vvakame/typescript-formatter"
   options: {
     TypeScript: true
+    TSX: true
   }
 
   beautify: (text, language, options) ->
     return new @Promise((resolve, reject) =>
 
       try
-        format = require("typescript-formatter/lib/formatter").default
+        format = require("typescript-formatter/lib/formatter").format
         formatterUtils = require("typescript-formatter/lib/utils")
         # @verbose('format', format, formatterUtils)
 

src/languages/index.coffee

@@ -68,6 +68,7 @@ module.exports = class Languages
     "svg"
     "swig"
     "tss"
+    "tsx"
     "twig"
     "typescript"
     "ux_markup"

src/languages/tsx.coffee

@@ -0,0 +1,21 @@
+module.exports = {
+
+  name: "TSX"
+  namespace: "tsx"
+  fallback: ['ts']
+
+  ###
+  Supported Grammars
+  ###
+  grammars: [
+    "TypeScriptReact"
+  ]
+
+  ###
+  Supported extensions
+  ###
+  extensions: [
+    "tsx"
+  ]
+
+}

src/options.json

@@ -7365,6 +7365,47 @@
       }
     }
   },
+  "tsx": {
+    "title": "TSX",
+    "type": "object",
+    "description": "Options for language TSX",
+    "collapsed": true,
+    "beautifiers": [
+      "TypeScript Formatter"
+    ],
+    "grammars": [
+      "TypeScriptReact"
+    ],
+    "extensions": [
+      "tsx"
+    ],
+    "properties": {
+      "disabled": {
+        "title": "Disable Beautifying Language",
+        "order": -3,
+        "type": "boolean",
+        "default": false,
+        "description": "Disable TSX Beautification"
+      },
+      "default_beautifier": {
+        "title": "Default Beautifier",
+        "order": -2,
+        "type": "string",
+        "default": "TypeScript Formatter",
+        "description": "Default Beautifier to be used for TSX",
+        "enum": [
+          "TypeScript Formatter"
+        ]
+      },
+      "beautify_on_save": {
+        "title": "Beautify On Save",
+        "order": -1,
+        "type": "boolean",
+        "default": false,
+        "description": "Automatically beautify TSX files on save"
+      }
+    }
+  },
   "twig": {
     "title": "Twig",
     "type": "object",