Change jsx/tsx provider, closes #400

18 files changed, 709 insertions, 509 deletions

diff --git a/README.md b/README.md
index 07c3182d..597a4b03 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ A collection of language packs for Vim.
 > One to rule them all, one to find them, one to bring them all and in the darkness bind them.
 
 - It **won't affect your startup time**, as scripts are loaded only on demand\*.
-- It **installs and updates 120+ times faster** than the <!--Package Count-->138<!--/Package Count--> packages it consists of.
+- It **installs and updates 120+ times faster** than the <!--Package Count-->137<!--/Package Count--> packages it consists of.
 - Solid syntax and indentation support (other features skipped). Only the best language packs.
 - All unnecessary files are ignored (like enormous documentation from php support).
 - No support for esoteric languages, only most popular ones (modern too, like `slim`).
@@ -102,7 +102,7 @@ If you need full functionality of any plugin, please use it directly with your p
 - [json5](https://github.com/GutenYe/json5.vim) (syntax)
 - [json](https://github.com/elzr/vim-json) (syntax, indent, ftplugin)
 - [jst](https://github.com/briancollins/vim-jst) (syntax, indent)
-- [jsx](https://github.com/amadeus/vim-jsx) (syntax, indent, ftplugin)
+- [jsx](https://github.com/MaxMEllon/vim-jsx-pretty) (autoload, syntax, indent, ftplugin)
 - [julia](https://github.com/JuliaEditorSupport/julia-vim) (syntax, indent, autoload, ftplugin)
 - [kotlin](https://github.com/udalov/kotlin-vim) (syntax, indent, ftplugin)
 - [latex](https://github.com/LaTeX-Box-Team/LaTeX-Box) (syntax, indent, ftplugin)
@@ -169,7 +169,6 @@ If you need full functionality of any plugin, please use it directly with your p
 - [tomdoc](https://github.com/wellbredgrapefruit/tomdoc.vim) (syntax)
 - [toml](https://github.com/cespare/vim-toml) (syntax, ftplugin)
 - [tptp](https://github.com/c-cube/vim-tptp) (syntax)
-- [tsx](https://github.com/ianks/vim-tsx) (syntax, indent, ftplugin)
 - [twig](https://github.com/lumiliet/vim-twig) (syntax, indent, ftplugin)
 - [typescript](https://github.com/leafgarland/typescript-vim) (syntax, indent, compiler, ftplugin)
 - [vala](https://github.com/arrufat/vala.vim) (syntax, indent)
diff --git a/after/ftplugin/javascript.vim b/after/ftplugin/javascript.vim
index 9efbb8d9..26d00bf2 100644
--- a/after/ftplugin/javascript.vim
+++ b/after/ftplugin/javascript.vim
@@ -14,3 +14,38 @@ if exists('b:undo_ftplugin')
 else
   let b:undo_ftplugin = 'setlocal iskeyword< suffixesadd<'
 endif
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Vim ftplugin file
+"
+" Language: javascript.jsx
+" Maintainer: MaxMEllon <maxmellon1994@gmail.com>
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+" modified from html.vim
+" For matchit plugin
+if exists("loaded_matchit")
+  let b:match_ignorecase = 0
+  let b:match_words = '(:),\[:\],{:},<:>,' .
+        \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
+endif
+
+" For andymass/vim-matchup plugin
+if exists("loaded_matchup")
+  setlocal matchpairs=(:),{:},[:],<:>
+  let b:match_words = '<\@<=\([^/][^ \t>]*\)\g{hlend}[^>]*\%(/\@<!>\|$\):<\@<=/\1>'
+  let b:match_skip = 's:comment\|string'
+endif
+
+let b:original_commentstring = &l:commentstring
+
+augroup jsx_comment
+  autocmd! CursorMoved <buffer>
+  autocmd CursorMoved <buffer> call jsx_pretty#comment#update_commentstring(b:original_commentstring)
+augroup end
+
+setlocal suffixesadd+=.jsx
diff --git a/after/ftplugin/jsx.vim b/after/ftplugin/jsx.vim
deleted file mode 100644
index e1d689aa..00000000
--- a/after/ftplugin/jsx.vim
+++ /dev/null
@@ -1,31 +0,0 @@
-if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
-  finish
-endif
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim ftplugin file
-"
-" Language: JSX (JavaScript)
-" Maintainer: Max Wang <mxawng@gmail.com>
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-" modified from html.vim
-if exists("loaded_matchit")
-  let b:match_ignorecase = 0
-  let s:jsx_match_words = '<\([a-zA-Z0-9.]\+\)\(>\|$\|\s\):<\/\1>'
-
-  if !exists('b:loaded_jsx_match_words')
-    let b:loaded_jsx_match_words = 0
-  endif
-
-  if b:loaded_jsx_match_words == 0
-    let b:match_words = exists('b:match_words')
-      \ ? b:match_words . ',' . s:jsx_match_words
-      \ : s:jsx_match_words
-  endif
-
-  let b:loaded_jsx_match_words = 1
-endif
-
-setlocal suffixesadd+=.jsx
diff --git a/after/ftplugin/tsx.vim b/after/ftplugin/tsx.vim
deleted file mode 100644
index 62112bba..00000000
--- a/after/ftplugin/tsx.vim
+++ /dev/null
@@ -1,21 +0,0 @@
-if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'tsx') != -1
-  finish
-endif
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim ftplugin file
-"
-" Language: TSX (JavaScript)
-" Maintainer: Ian Ker-Seymer <i.kerseymer@gmail.com>
-" Depends: leafgarland/typescript-vim
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-" modified from html.vim
-if exists("loaded_matchit")
-  let b:match_ignorecase = 0
-  let b:match_words = '(:),\[:\],{:},<:>,' .
-        \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
-endif
-
-setlocal suffixesadd+=.tsx
diff --git a/after/ftplugin/typescript.vim b/after/ftplugin/typescript.vim
new file mode 100644
index 00000000..29ac50a6
--- /dev/null
+++ b/after/ftplugin/typescript.vim
@@ -0,0 +1,27 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+" modified from html.vim
+" For matchit plugin
+if exists("loaded_matchit")
+  let b:match_ignorecase = 0
+  let b:match_words = '(:),\[:\],{:},<:>,' .
+        \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
+endif
+
+" For andymass/vim-matchup plugin
+if exists("loaded_matchup")
+  setlocal matchpairs=(:),{:},[:],<:>
+  let b:match_words = '<\@<=\([^/][^ \t>]*\)\g{hlend}[^>]*\%(/\@<!>\|$\):<\@<=/\1>'
+  let b:match_skip = 's:comment\|string'
+endif
+
+let b:original_commentstring = &l:commentstring
+
+augroup jsx_comment
+  autocmd! CursorMoved <buffer>
+  autocmd CursorMoved <buffer> call jsx_pretty#comment#update_commentstring(b:original_commentstring)
+augroup end
+
+setlocal suffixesadd+=.tsx
diff --git a/after/indent/javascript.vim b/after/indent/javascript.vim
new file mode 100644
index 00000000..1825446e
--- /dev/null
+++ b/after/indent/javascript.vim
@@ -0,0 +1,33 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Vim indent file
+"
+" Language: javascript.jsx
+" Maintainer: MaxMellon <maxmellon1994@gmail.com>
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+if exists('b:did_indent')
+  let s:did_indent = b:did_indent
+  unlet b:did_indent
+endif
+
+let s:keepcpo = &cpo
+set cpo&vim
+
+if exists('s:did_indent')
+  let b:did_indent = s:did_indent
+endif
+
+setlocal indentexpr=GetJsxIndent()
+setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,*<Return>,<>>,<<>,/
+
+function! GetJsxIndent()
+  return jsx_pretty#indent#get(function('GetJavascriptIndent'))
+endfunction
+
+let &cpo = s:keepcpo
+unlet s:keepcpo
diff --git a/after/indent/jsx.vim b/after/indent/jsx.vim
deleted file mode 100644
index 35df1f5f..00000000
--- a/after/indent/jsx.vim
+++ /dev/null
@@ -1,118 +0,0 @@
-if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
-  finish
-endif
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim indent file
-"
-" Language: JSX (JavaScript)
-" Maintainer: Max Wang <mxawng@gmail.com>
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-" Save the current JavaScript indentexpr.
-let b:jsx_js_indentexpr = &indentexpr
-
-" Prologue; load in XML indentation.
-if exists('b:did_indent')
-  let s:did_indent=b:did_indent
-  unlet b:did_indent
-endif
-exe 'runtime! indent/xml.vim'
-if exists('s:did_indent')
-  let b:did_indent=s:did_indent
-endif
-
-setlocal indentexpr=GetJsxIndent()
-
-" JS indentkeys
-setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
-" XML indentkeys
-setlocal indentkeys+=*<Return>,<>>,<<>,/
-
-" Multiline end tag regex (line beginning with '>' or '/>')
-let s:endtag = '^\s*\/\?>\s*;\='
-
-" Get all syntax types at the beginning of a given line.
-fu! SynSOL(lnum)
-  return map(synstack(a:lnum, 1), 'synIDattr(v:val, "name")')
-endfu
-
-" Get all syntax types at the end of a given line.
-fu! SynEOL(lnum)
-  let lnum = prevnonblank(a:lnum)
-  let col = strlen(getline(lnum))
-  return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
-endfu
-
-" Check if a syntax attribute is XMLish.
-fu! SynAttrXMLish(synattr)
-  return a:synattr =~ "^xml" || a:synattr =~ "^jsx"
-endfu
-
-" Check if a synstack is XMLish (i.e., has an XMLish last attribute).
-fu! SynXMLish(syns)
-  return SynAttrXMLish(get(a:syns, -1))
-endfu
-
-" Check if a synstack denotes the end of a JSX block.
-fu! SynJSXBlockEnd(syns)
-  return get(a:syns, -1) =~ '\%(js\|javascript\)Braces' &&
-       \ SynAttrXMLish(get(a:syns, -2))
-endfu
-
-" Determine how many jsxRegions deep a synstack is.
-fu! SynJSXDepth(syns)
-  return len(filter(copy(a:syns), 'v:val ==# "jsxRegion"'))
-endfu
-
-" Check whether `cursyn' continues the same jsxRegion as `prevsyn'.
-fu! SynJSXContinues(cursyn, prevsyn)
-  let curdepth = SynJSXDepth(a:cursyn)
-  let prevdepth = SynJSXDepth(a:prevsyn)
-
-  " In most places, we expect the nesting depths to be the same between any
-  " two consecutive positions within a jsxRegion (e.g., between a parent and
-  " child node, between two JSX attributes, etc.).  The exception is between
-  " sibling nodes, where after a completed element (with depth N), we return
-  " to the parent's nesting (depth N - 1).  This case is easily detected,
-  " since it is the only time when the top syntax element in the synstack is
-  " jsxRegion---specifically, the jsxRegion corresponding to the parent.
-  return prevdepth == curdepth ||
-      \ (prevdepth == curdepth + 1 && get(a:cursyn, -1) ==# 'jsxRegion')
-endfu
-
-" Cleverly mix JS and XML indentation.
-fu! GetJsxIndent()
-  let cursyn  = SynSOL(v:lnum)
-  let prevsyn = SynEOL(v:lnum - 1)
-
-  " Use XML indenting iff:
-  "   - the syntax at the end of the previous line was either JSX or was the
-  "     closing brace of a jsBlock whose parent syntax was JSX; and
-  "   - the current line continues the same jsxRegion as the previous line.
-  if (SynXMLish(prevsyn) || SynJSXBlockEnd(prevsyn)) &&
-        \ SynJSXContinues(cursyn, prevsyn)
-    let ind = XmlIndentGet(v:lnum, 0)
-
-    " Align '/>' and '>' with '<' for multiline tags.
-    if getline(v:lnum) =~? s:endtag
-      let ind = ind - &sw
-    endif
-
-    " Then correct the indentation of any JSX following '/>' or '>'.
-    if getline(v:lnum - 1) =~? s:endtag
-      let ind = ind + &sw
-    endif
-  else
-    if len(b:jsx_js_indentexpr)
-      " Invoke the base JS package's custom indenter.  (For vim-javascript,
-      " e.g., this will be GetJavascriptIndent().)
-      let ind = eval(b:jsx_js_indentexpr)
-    else
-      let ind = cindent(v:lnum)
-    endif
-  endif
-
-  return ind
-endfu
diff --git a/after/indent/tsx.vim b/after/indent/tsx.vim
deleted file mode 100644
index a74c7bef..00000000
--- a/after/indent/tsx.vim
+++ /dev/null
@@ -1,95 +0,0 @@
-if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'tsx') != -1
-  finish
-endif
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim indent file
-"
-" Language: TSX (JavaScript)
-" Maintainer: Ian Ker-Seymer <i.kerseymer@gmail.com>
-" Depends: pangloss/vim-typescript
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-" Prologue; load in XML indentation.
-if exists('b:did_indent')
-  let s:did_indent=b:did_indent
-  unlet b:did_indent
-endif
-exe 'runtime! indent/xml.vim'
-if exists('s:did_indent')
-  let b:did_indent=s:did_indent
-endif
-
-setlocal indentexpr=GetTsxIndent()
-
-" TS indentkeys
-setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
-" XML indentkeys
-setlocal indentkeys+=*<Return>,<>>,<<>,/
-
-" Self-closing tag regex.
-let s:sctag = '^\s*\/>\s*;\='
-
-" Get all syntax types at the beginning of a given line.
-fu! SynSOL(lnum)
-  return map(synstack(a:lnum, 1), 'synIDattr(v:val, "name")')
-endfu
-
-" Get all syntax types at the end of a given line.
-fu! SynEOL(lnum)
-  let lnum = prevnonblank(a:lnum)
-  let col = strlen(getline(lnum))
-  return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
-endfu
-
-" Check if a syntax attribute is XMLish.
-fu! SynAttrXMLish(synattr)
-  return a:synattr =~ "^xml" || a:synattr =~ "^tsx"
-endfu
-
-" Check if a synstack is XMLish (i.e., has an XMLish last attribute).
-fu! SynXMLish(syns)
-  return SynAttrXMLish(get(a:syns, -1))
-endfu
-
-" Check if a synstack has any XMLish attribute.
-fu! SynXMLishAny(syns)
-  for synattr in a:syns
-    if SynAttrXMLish(synattr)
-      return 1
-    endif
-  endfor
-  return 0
-endfu
-
-" Check if a synstack denotes the end of a TSX block.
-fu! SynTSXBlockEnd(syns)
-  return get(a:syns, -1) == 'tsBraces' && SynAttrXMLish(get(a:syns, -2))
-endfu
-
-" Cleverly mix TS and XML indentation.
-fu! GetTsxIndent()
-  let cursyn  = SynSOL(v:lnum)
-  let prevsyn = SynEOL(v:lnum - 1)
-
-  " Use XML indenting if the syntax at the end of the previous line was either
-  " TSX or was the closing brace of a tsBlock whose parent syntax was TSX.
-  if (SynXMLish(prevsyn) || SynTSXBlockEnd(prevsyn)) && SynXMLishAny(cursyn)
-    let ind = XmlIndentGet(v:lnum, 0)
-
-    " Align '/>' with '<' for multiline self-closing tags.
-    if getline(v:lnum) =~? s:sctag
-      let ind = ind - &sw
-    endif
-
-    " Then correct the indentation of any TSX following '/>'.
-    if getline(v:lnum - 1) =~? s:sctag
-      let ind = ind + &sw
-    endif
-  else
-    let ind = GetTypescriptIndent()
-  endif
-
-  return ind
-endfu
diff --git a/after/indent/typescript.vim b/after/indent/typescript.vim
new file mode 100644
index 00000000..dc8a5845
--- /dev/null
+++ b/after/indent/typescript.vim
@@ -0,0 +1,34 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Vim indent file
+"
+" Language: typescript.jsx
+" Maintainer: MaxMellon <maxmellon1994@gmail.com>
+" Depends: leafgarland/typescript-vim
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+if exists('b:did_indent')
+  let s:did_indent = b:did_indent
+  unlet b:did_indent
+endif
+
+let s:keepcpo = &cpo
+set cpo&vim
+
+if exists('s:did_indent')
+  let b:did_indent = s:did_indent
+endif
+
+setlocal indentexpr=GetJsxIndent()
+setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,*<Return>,<>>,<<>,/
+
+function! GetJsxIndent()
+  return jsx_pretty#indent#get(function('GetTypescriptIndent'))
+endfunction
+
+let &cpo = s:keepcpo
+unlet s:keepcpo
diff --git a/after/syntax/javascript.vim b/after/syntax/javascript.vim
new file mode 100644
index 00000000..7b92ecbd
--- /dev/null
+++ b/after/syntax/javascript.vim
@@ -0,0 +1,64 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Vim syntax file
+"
+" Language: javascript.jsx
+" Maintainer: MaxMellon <maxmellon1994@gmail.com>
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+let s:jsx_cpo = &cpo
+set cpo&vim
+
+syntax case match
+
+if exists('b:current_syntax')
+  let s:current_syntax = b:current_syntax
+  unlet b:current_syntax
+endif
+
+if exists('s:current_syntax')
+  let b:current_syntax = s:current_syntax
+endif
+
+if hlexists("jsNoise")    " pangloss/vim-javascript
+  syntax cluster jsExpression add=jsxRegion
+elseif hlexists("javascriptOpSymbols")    " othree/yajs.vim
+  " refine the javascript line comment
+  syntax region javascriptLineComment start=+//+ end=/$/ contains=@Spell,javascriptCommentTodo extend keepend
+  syntax cluster javascriptValue add=jsxRegion
+  syntax cluster javascriptNoReserved add=jsxElement,jsxTag
+
+  " add support to arrow function which returns a tagged template string, e.g.
+  " () => html`<div></div>`
+  syntax cluster afterArrowFunc add=javascriptTagRef
+else    " build-in javascript syntax
+  " refine the javascript line comment
+  syntax region javaScriptLineComment start=+//+ end=/$/ contains=@Spell,javascriptCommentTodo extend keepend
+  " add a javaScriptBlock group for build-in syntax
+  syntax region javaScriptBlockBuildIn
+        \ contained
+        \ matchgroup=javaScriptBraces
+        \ start="{"
+        \ end="}"
+        \ extend
+        \ contains=javaScriptBlockBuildIn,@javaScriptEmbededExpr,javaScript.*
+        \ fold
+  syntax cluster javaScriptEmbededExpr add=jsxRegion
+
+  " refine the template string syntax
+  syntax region javaScriptStringT start=+`+ skip=+\\\\\|\\`+ end=+`+ contains=javaScriptSpecial,javaScriptEmbed,@htmlPreproc extend
+  syntax region javaScriptEmbed matchgroup=javaScriptEmbedBraces start=+\${+ end=+}+ contained contains=@javaScriptEmbededExpr,javaScript.*
+endif
+
+" because this is autoloaded, when developing you're going to need to source
+" the autoload/jsx_pretty/*.vim file manually, or restart vim
+call jsx_pretty#syntax#highlight()
+
+let b:current_syntax = 'javascript.jsx'
+
+let &cpo = s:jsx_cpo
+unlet s:jsx_cpo
diff --git a/after/syntax/jsx.vim b/after/syntax/jsx.vim
deleted file mode 100644
index ac4dd616..00000000
--- a/after/syntax/jsx.vim
+++ /dev/null
@@ -1,83 +0,0 @@
-if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
-  finish
-endif
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim syntax file
-"
-" Language: JSX (JavaScript)
-" Maintainer: Max Wang <mxawng@gmail.com>
-" Depends: pangloss/vim-javascript
-"
-" CREDITS: Inspired by Facebook.
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-" Prologue; load in XML syntax.
-if exists('b:current_syntax')
-  let s:current_syntax=b:current_syntax
-  unlet b:current_syntax
-endif
-syn include @XMLSyntax syntax/xml.vim
-if exists('s:current_syntax')
-  let b:current_syntax=s:current_syntax
-endif
-
-" Officially, vim-jsx depends on the pangloss/vim-javascript syntax package
-" (and is tested against it exclusively).  However, in practice, we make some
-" effort towards compatibility with other packages.
-"
-" These are the plugin-to-syntax-element correspondences:
-"
-"   - pangloss/vim-javascript:      jsBlock, jsExpression
-"   - jelera/vim-javascript-syntax: javascriptBlock
-"   - othree/yajs.vim:              javascriptNoReserved
-
-
-" JSX attributes should color as JS.  Note the trivial end pattern; we let
-" jsBlock take care of ending the region.
-syn region xmlString contained start=+{+ end=++ contains=jsBlock,javascriptBlock
-
-" JSX comments inside XML tag should color as comment.  Note the trivial end pattern; we let
-" jsComment take care of ending the region.
-syn region xmlString contained start=+//+ end=++ contains=jsComment
-
-" JSX child blocks behave just like JSX attributes, except that (a) they are
-" syntactically distinct, and (b) they need the syn-extend argument, or else
-" nested XML end-tag patterns may end the outer jsxRegion.
-syn region jsxChild contained start=+{+ end=++ contains=jsBlock,javascriptBlock
-  \ extend
-
-" Highlight JSX regions as XML; recursively match.
-"
-" Note that we prohibit JSX tags from having a < or word character immediately
-" preceding it, to avoid conflicts with, respectively, the left shift operator
-" and generic Flow type annotations (http://flowtype.org/).
-syn region jsxRegion
-  \ contains=@Spell,@XMLSyntax,jsxRegion,jsxChild,jsBlock,javascriptBlock
-  \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z_][a-zA-Z0-9:\-.]*\>[:,]\@!\)\([^>]*>(\)\@!+
-  \ skip=+<!--\_.\{-}-->+
-  \ end=+</\z1\_\s\{-}>+
-  \ end=+/>+
-  \ keepend
-  \ extend
-
-" Shorthand fragment support
-"
-" Note that since the main jsxRegion contains @XMLSyntax, we cannot simply
-" adjust the regex above since @XMLSyntax will highlight the opening `<` as an
-" XMLError. Instead we create a new group with the same name that does not
-" include @XMLSyntax and instead uses matchgroup to get the same highlighting.
-syn region jsxRegion
-  \ contains=@Spell,jsxRegion,jsxChild,jsBlock,javascriptBlock
-  \ matchgroup=xmlTag
-  \ start=/<>/
-  \ end=/<\/>/
-  \ keepend
-  \ extend
-
-" Add jsxRegion to the lowest-level JS syntax cluster.
-syn cluster jsExpression add=jsxRegion
-
-" Allow jsxRegion to contain reserved words.
-syn cluster javascriptNoReserved add=jsxRegion
diff --git a/after/syntax/tsx.vim b/after/syntax/tsx.vim
deleted file mode 100644
index 05bfc9ea..00000000
--- a/after/syntax/tsx.vim
+++ /dev/null
@@ -1,87 +0,0 @@
-if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'tsx') != -1
-  finish
-endif
-
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim syntax file
-"
-" Language: TSX (JavaScript)
-" Maintainer: Ian Ker-Seymer <i.kerseymer@gmail.com>
-" Depends: leafgarland/typescript-vim
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-if exists('b:current_syntax')
-  let s:current_syntax=b:current_syntax
-  unlet b:current_syntax
-endif
-
-syn include @XMLSyntax syntax/xml.vim
-
-if exists('s:current_syntax')
-  let b:current_syntax=s:current_syntax
-endif
-
-syn region embeddedTs
-      \ matchgroup=NONE
-      \ start=+{+
-      \ end=+}+
-      \ contains=@Spell,@typescriptAll,xmlEntity,tsxRegion
-      \ contained
-
-" Add embeddedTs to everything where xmlString is used to allow for
-" both string highlighting and @typescriptAll highlighting
-syn region   xmlTag
-      \ matchgroup=xmlTag start=+<[^ /!?<>"']\@=+
-      \ matchgroup=xmlTag end=+>+
-      \ contained
-      \ contains=xmlError,xmlTagName,xmlAttrib,xmlEqual,xmlString,@xmlStartTagHook,embeddedTs
-
-syn region xmlProcessing
-      \ matchgroup=xmlProcessingDelim
-      \ start="<?"
-      \ end="?>"
-      \ contains=xmlAttrib,xmlEqual,xmlString,embeddedTs
-
-
-if exists('g:xml_syntax_folding')
-  " DTD -- we use dtd.vim here
-  syn region  xmlDocType matchgroup=xmlDocTypeDecl
-        \ start="<!DOCTYPE"he=s+2,rs=s+2
-        \ end=">"
-        \ fold
-        \ contains=xmlDocTypeKeyword,xmlInlineDTD,xmlString,embeddedTs
-else
-  syn region  xmlDocType matchgroup=xmlDocTypeDecl
-        \ start="<!DOCTYPE"he=s+2,rs=s+2
-        \ end=">"
-        \ contains=xmlDocTypeKeyword,xmlInlineDTD,xmlString,embeddedTs
-endif
-
-
-if exists('g:xml_syntax_folding')
-  syn region xmlTag
-        \ matchgroup=xmlTag start=+<[^ /!?<>"']\@=+
-        \ matchgroup=xmlTag end=+>+
-        \ contained
-        \ contains=xmlError,xmlTagName,xmlAttrib,xmlEqual,xmlString,@xmlStartTagHook,embeddedTs
-else
-  syn region xmlTag
-        \ matchgroup=xmlTag start=+<[^ /!?<>"']\@=+
-        \ matchgroup=xmlTag end=+>+
-        \ contains=xmlError,xmlTagName,xmlAttrib,xmlEqual,xmlString,@xmlStartTagHook,embeddedTs
-endif
-
-
-syn region tsxRegion
-      \ contains=@Spell,@XMLSyntax,tsxRegion,@typescriptAll
-      \ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
-      \ skip=+<!--\_.\{-}-->+
-      \ end=+</\z1\_\s\{-}>+
-      \ end=+/>+
-      \ keepend
-      \ extend
-
-hi def link embeddedTs NONE
-
-syn cluster @typescriptAll add=tsxRegion
diff --git a/after/syntax/typescript.vim b/after/syntax/typescript.vim
new file mode 100644
index 00000000..e4aab79f
--- /dev/null
+++ b/after/syntax/typescript.vim
@@ -0,0 +1,50 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+" Vim syntax file
+"
+" Language: javascript.jsx
+" Maintainer: MaxMellon <maxmellon1994@gmail.com>
+" Depends:  leafgarland/typescript-vim
+"
+"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
+
+let s:jsx_cpo = &cpo
+set cpo&vim
+
+syntax case match
+
+if exists('b:current_syntax')
+  let s:current_syntax = b:current_syntax
+  unlet b:current_syntax
+endif
+
+if exists('s:current_syntax')
+  let b:current_syntax = s:current_syntax
+endif
+
+" refine the typescript line comment
+syntax region typescriptLineComment start=+//+ end=/$/ contains=@Spell,typescriptCommentTodo,typescriptRef extend keepend
+
+" add a typescriptBlock group for typescript
+syntax region typescriptBlock
+      \ contained
+      \ matchgroup=typescriptBraces
+      \ start="{"
+      \ end="}"
+      \ extend
+      \ contains=@typescriptAll,@typescriptExpression,typescriptBlock
+      \ fold
+
+" because this is autoloaded, when developing you're going to need to source
+" the autoload/jsx_pretty/*.vim file manually, or restart vim
+call jsx_pretty#syntax#highlight()
+
+syntax cluster typescriptExpression add=jsxRegion
+
+let b:current_syntax = 'typescript.tsx'
+
+let &cpo = s:jsx_cpo
+unlet s:jsx_cpo
diff --git a/autoload/jsx_pretty/comment.vim b/autoload/jsx_pretty/comment.vim
new file mode 100644
index 00000000..d5d58f5d
--- /dev/null
+++ b/autoload/jsx_pretty/comment.vim
@@ -0,0 +1,41 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+function! jsx_pretty#comment#update_commentstring(original)
+  let syn_current = s:syn_name(line('.'), col('.'))
+  let syn_start = s:syn_name(line('.'), 1)
+  let save_cursor = getcurpos()
+
+  if syn_start =~ '^jsx'
+    let line = getline(".")
+    let start = len(matchstr(line, '^\s*'))
+    let syn_name = s:syn_name(line('.'), start + 1)
+
+    if line =~ '^\s*//'
+      let &l:commentstring = '// %s'
+    elseif s:syn_contains(line('.'), col('.'), 'jsxTaggedRegion')
+      let &l:commentstring = '<!-- %s -->'
+    elseif syn_name =~ '^jsxAttrib'
+      let &l:commentstring = '// %s'
+    else
+      let &l:commentstring = '{/* %s */}'
+    endif
+  else
+    let &l:commentstring = a:original
+  endif
+
+  " Restore the cursor position
+  call setpos('.', save_cursor)
+endfunction
+
+function! s:syn_name(lnum, cnum)
+  let syn_id = get(synstack(a:lnum, a:cnum), -1)
+  return synIDattr(syn_id, "name")
+endfunction
+
+function! s:syn_contains(lnum, cnum, syn_name)
+  let stack = synstack(a:lnum, a:cnum)
+  let syn_names = map(stack, 'synIDattr(v:val, "name")')
+  return index(syn_names, a:syn_name) >= 0
+endfunction
diff --git a/autoload/jsx_pretty/indent.vim b/autoload/jsx_pretty/indent.vim
new file mode 100644
index 00000000..a4e7a839
--- /dev/null
+++ b/autoload/jsx_pretty/indent.vim
@@ -0,0 +1,204 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+if exists('*shiftwidth')
+  function! s:sw()
+    return shiftwidth()
+  endfunction
+else
+  function! s:sw()
+    return &sw
+  endfunction
+endif
+
+" Get the syntax group of start of line
+function! s:syn_sol(lnum)
+  let line = getline(a:lnum)
+  let sol = matchstr(line, '^\s*')
+  return map(synstack(a:lnum, len(sol) + 1), 'synIDattr(v:val, "name")')
+endfunction
+
+" Get the syntax group of end of line
+function! s:syn_eol(lnum)
+  let lnum = prevnonblank(a:lnum)
+  let col = strlen(getline(lnum))
+  return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
+endfunction
+
+function! s:prev_indent(lnum)
+  let lnum = prevnonblank(a:lnum - 1)
+  return indent(lnum)
+endfunction
+
+function! s:prev_line(lnum)
+  let lnum = prevnonblank(a:lnum - 1)
+  return substitute(getline(lnum), '^\s*\|\s*$', '', 'g')
+endfunction
+
+function! s:syn_attr_jsx(synattr)
+  return a:synattr =~ "^jsx"
+endfunction
+
+function! s:syn_xmlish(syns)
+  return s:syn_attr_jsx(get(a:syns, -1))
+endfunction
+
+function! s:syn_jsx_element(syns)
+  return get(a:syns, -1) =~ 'jsxElement'
+endfunction
+
+function! s:syn_js_comment(syns)
+  return get(a:syns, -1) =~ 'Comment$'
+endfunction
+
+function! s:syn_jsx_escapejs(syns)
+  return get(a:syns, -1) =~ '\(\(js\(Template\)\?\|javaScript\(Embed\)\?\|typescript\)Braces\|javascriptTemplateSB\|typescriptInterpolationDelimiter\)' &&
+        \ (get(a:syns, -2) =~ 'jsxEscapeJs' ||
+        \ get(a:syns, -3) =~ 'jsxEscapeJs')
+endfunction
+
+function! s:syn_jsx_attrib(syns)
+  return len(filter(copy(a:syns), 'v:val =~ "jsxAttrib"'))
+endfunction
+
+let s:start_tag = '<\s*\([-:_\.\$0-9A-Za-z]\+\|>\)'
+" match `/end_tag>` and `//>`
+let s:end_tag = '/\%(\s*[-:_\.\$0-9A-Za-z]*\s*\|/\)>'
+let s:opfirst = '^' . get(g:,'javascript_opfirst',
+      \ '\C\%([<>=,.?^%|/&]\|\([-:+]\)\1\@!\|\*\+\|!=\|in\%(stanceof\)\=\>\)')
+
+function! jsx_pretty#indent#get(js_indent)
+  let lnum = v:lnum
+  let line = substitute(getline(lnum), '^\s*\|\s*$', '', 'g')
+  let current_syn = s:syn_sol(lnum)
+  let current_syn_eol = s:syn_eol(lnum)
+  let prev_syn_sol = s:syn_sol(lnum - 1)
+  let prev_syn_eol = s:syn_eol(lnum - 1)
+  let prev_line = s:prev_line(lnum)
+  let prev_ind = s:prev_indent(lnum)
+
+  if s:syn_xmlish(current_syn)
+
+    " {
+    "   <div></div>
+    " ##} <--
+    if s:syn_jsx_element(current_syn) && line =~ '}$'
+      let pair_line = searchpair('{', '', '}', 'b')
+      return indent(pair_line)
+    elseif line =~ '^-->$'
+      if prev_line =~ '^<!--'
+        return prev_ind
+      else
+        return prev_ind - s:sw()
+      endif
+    elseif prev_line =~ '-->$'
+      return prev_ind
+    " close tag </tag> or /> including </>
+    elseif prev_line =~ s:end_tag . '$'
+      if line =~ '^<\s*' . s:end_tag
+        return prev_ind - s:sw()
+      elseif s:syn_jsx_attrib(prev_syn_sol)
+        return prev_ind - s:sw()
+      else
+        return prev_ind
+      endif
+    elseif line =~ '^\(>\|/\s*>\)'
+      if prev_line =~ '^<'
+        return prev_ind
+      else
+        return prev_ind - s:sw()
+      endif
+    elseif prev_line =~ '^\(<\|>\)' &&
+          \ (s:syn_xmlish(prev_syn_eol) || s:syn_js_comment(prev_syn_eol))
+      if line =~ '^<\s*' . s:end_tag
+        return prev_ind
+      else
+        return prev_ind + s:sw()
+      endif
+    elseif line =~ '^<\s*' . s:end_tag
+      if !s:syn_xmlish(prev_syn_sol) 
+        if s:syn_jsx_escapejs(prev_syn_eol)
+              \ || s:syn_jsx_escapejs(prev_syn_sol)
+          return prev_ind - s:sw()
+        else
+          return prev_ind
+        endif
+      else
+        return prev_ind - s:sw()
+      endif
+    elseif !s:syn_xmlish(prev_syn_eol)
+      if prev_line =~ '\(&&\|||\|=>\|[([{]\|`\)$'
+        " <div>
+        "   {
+        "   }
+        " </div>
+        if line =~ '^[)\]}]'
+          return prev_ind
+        else
+          return prev_ind + s:sw()
+        endif
+      else
+        return prev_ind
+      endif
+    elseif !s:syn_xmlish(prev_syn_sol)
+      if prev_line =~ '^\<\(return\|default\|await\|yield\)'
+        if line !~ '^/\s*>' || line !~ '^<\s*' . s:end_tag
+          return prev_ind + s:sw()
+        else
+          return prev_ind
+        endif
+      else
+        return prev_ind
+      endif
+    else
+      return prev_ind
+    endif
+  elseif s:syn_jsx_escapejs(current_syn)
+    if line =~ '^}'
+      let char = getline('.')[col('.') - 1]
+      " When pressing enter after the }, keep the indent
+      if char != '}' && search('}', 'b', lnum)
+        return indent(lnum)
+      else
+        let pair_line = searchpair('{', '', '}', 'bW')
+        return indent(pair_line)
+      endif
+    elseif line =~ '^{' || line =~ '^\${'
+      if s:syn_jsx_escapejs(prev_syn_eol)
+            \ || s:syn_jsx_attrib(prev_syn_sol)
+        return prev_ind
+      elseif s:syn_xmlish(prev_syn_eol) && (prev_line =~ s:end_tag || prev_line =~ '-->$')
+        return prev_ind
+      else
+        return prev_ind + s:sw()
+      endif
+    endif
+  elseif s:syn_jsx_escapejs(current_syn_eol)
+    let pair_line = searchpair('{', '', '}', 'bW')
+    return indent(pair_line)
+  elseif line =~ '^/[/*]' " js comment in jsx tag
+    if get(prev_syn_sol, -1) =~ 'Punct'
+      return prev_ind + s:sw()
+    elseif synIDattr(synID(lnum - 1, 1, 1), 'name') =~ 'jsxTag'
+      return prev_ind
+    else
+      return a:js_indent()
+    endif
+  else
+    let ind = a:js_indent()
+
+    " If current syntax is not a jsx syntax group
+    if s:syn_xmlish(prev_syn_eol) && line !~ '^[)\]}]'
+      let sol = matchstr(line, s:opfirst)
+      if sol is ''
+        " Fix javascript continue indent
+        return ind - s:sw()
+      else
+        return ind
+      endif
+    endif
+    return ind
+  endif
+
+endfunction
diff --git a/autoload/jsx_pretty/syntax.vim b/autoload/jsx_pretty/syntax.vim
new file mode 100644
index 00000000..eac1f92a
--- /dev/null
+++ b/autoload/jsx_pretty/syntax.vim
@@ -0,0 +1,218 @@
+if exists('g:polyglot_disabled') && index(g:polyglot_disabled, 'jsx') != -1
+  finish
+endif
+
+function! jsx_pretty#syntax#highlight()
+
+  let s:highlight_close_tag = get(g:, 'vim_jsx_pretty_highlight_close_tag', 0)
+
+  " <tag id="sample">
+  " ~~~~~~~~~~~~~~~~~
+  " and self close tag
+  " <tag id="sample"   />
+  " ~~~~~~~~~~~~~~~~~~~
+  syntax region jsxTag
+        \ start=+<+
+        \ matchgroup=jsxOpenPunct
+        \ end=+>+
+        \ matchgroup=NONE
+        \ end=+\(/\_s*>\)\@=+
+        \ contained
+        \ contains=jsxOpenTag,jsxEscapeJs,jsxAttrib,jsComment,@javascriptComments,javaScriptLineComment,javaScriptComment,typescriptLineComment,typescriptComment,jsxSpreadOperator
+        \ keepend
+        \ extend
+
+  " <tag></tag>
+  " ~~~~~~~~~~~
+  " and fragment
+  " <></>
+  " ~~~~~
+  " and self close tag
+  " <tag />
+  " ~~~~~~~
+  syntax region jsxElement
+        \ start=+<\_s*\(>\|\${\|\z(\<[-:_\.\$0-9A-Za-z]\+\>\)\)+
+        \ end=+/\_s*>+
+        \ end=+<\_s*/\_s*\z1\_s*>+
+        \ contains=jsxElement,jsxEscapeJs,jsxTag,jsxComment,jsxCloseString,jsxCloseTag,@Spell
+        \ keepend
+        \ extend
+        \ contained
+        \ fold
+
+  " detect jsx region
+  syntax region jsxRegion
+        \ start=+\(\(\_[([,?:=+\-*/<>{}]\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\(>\|\z(\(script\)\@!\<[_\$A-Za-z][-:_\.\$0-9A-Za-z]*\>\)\(\_s*\([-+*)\]}&|?]\|/\([/*]\|\_s*>\)\@!\)\)\@!\)+
+        \ end=++
+        \ contains=jsxElement
+
+  " <tag key={this.props.key}>
+  "          ~~~~~~~~~~~~~~~~
+  syntax region jsxEscapeJs
+        \ start=+{+
+        \ end=++
+        \ extend
+        \ contained
+        \ contains=jsBlock,javascriptBlock,javaScriptBlockBuildIn,typescriptBlock
+
+  " <tag key={this.props.key}>
+  " ~~~~
+  " and fragment start tag
+  " <>
+  " ~~
+  exe 'syntax region jsxOpenTag
+        \ matchgroup=jsxOpenPunct
+        \ start=+<+
+        \ end=+>+
+        \ matchgroup=NONE
+        \ end=+\>+
+        \ contained
+        \ contains=jsxTagName
+        \ nextgroup=jsxAttrib
+        \ skipwhite
+        \ skipempty ' .(s:highlight_close_tag ? 'transparent' : '')
+ 
+  " <foo.bar>
+  "     ~
+  syntax match jsxDot +\.+ contained display
+
+  " <foo:bar>
+  "     ~
+  syntax match jsxNamespace +:+ contained display
+
+  " <tag id="sample">
+  "        ~
+  syntax match jsxEqual +=+ contained display nextgroup=jsxString,jsxEscapeJs,jsxRegion skipwhite
+
+  " <tag />
+  "      ~~
+  syntax match jsxCloseString +/\_s*>+ contained 
+
+  " </tag>
+  " ~~~~~~
+  " and fragment close tag
+  " </>
+  " ~~~
+  syntax region jsxCloseTag
+        \ matchgroup=jsxClosePunct
+        \ start=+<\_s*/+
+        \ end=+>+
+        \ contained
+        \ contains=jsxTagName
+
+  " <tag key={this.props.key}>
+  "      ~~~
+  syntax match jsxAttrib
+        \ +\<[-A-Za-z_][-:_\$0-9A-Za-z]*\>+
+        \ contained
+        \ nextgroup=jsxEqual
+        \ skipwhite
+        \ skipempty
+        \ contains=jsxAttribKeyword
+        \ display
+
+  " <MyComponent ...>
+  "  ~~~~~~~~~~~
+  " NOT
+  " <someCamel ...>
+  "      ~~~~~
+  exe 'syntax match jsxComponentName
+        \ +\<[A-Z][\$0-9A-Za-z]\+\>+
+        \ contained
+        \ display ' .(s:highlight_close_tag ? 'transparent' : '')
+
+  " <tag key={this.props.key}>
+  "  ~~~
+  exe 'syntax match jsxTagName
+        \ +\<[-:_\.\$0-9A-Za-z]\+\>+
+        \ contained
+        \ contains=jsxComponentName,jsxDot,jsxNamespace
+        \ nextgroup=jsxAttrib
+        \ skipempty
+        \ skipwhite
+        \ display ' .(s:highlight_close_tag ? 'transparent' : '')
+
+  " <tag id="sample">
+  "         ~~~~~~~~
+  " and 
+  " <tag id='sample'>
+  "         ~~~~~~~~
+  syntax region jsxString start=+\z(["']\)+  skip=+\\\%(\z1\|$\)+  end=+\z1+ contained contains=@Spell display
+
+  let s:tags = get(g:, 'vim_jsx_pretty_template_tags', ['html', 'raw'])
+  let s:enable_tagged_jsx = !empty(s:tags)
+
+  " add support to JSX inside the tagged template string
+  " https://github.com/developit/htm
+  if s:enable_tagged_jsx
+    exe 'syntax region jsxTaggedRegion
+          \ start=+\%('. join(s:tags, '\|') .'\)\@<=`+ms=s+1
+          \ end=+`+me=e-1
+          \ extend
+          \ contained
+          \ containedin=jsTemplateString,javascriptTemplate,javaScriptStringT,typescriptStringB
+          \ contains=jsxElement'
+
+    syntax region jsxEscapeJs
+          \ start=+\${+
+          \ end=++
+          \ extend
+          \ contained
+          \ contains=jsTemplateExpression,javascriptTemplateSubstitution,javaScriptEmbed,typescriptInterpolation
+
+    syntax region jsxOpenTag
+          \ matchgroup=jsxOpenPunct
+          \ start=+<\%(\${\)\@=+
+          \ matchgroup=NONE
+          \ end=++
+          \ contained
+          \ contains=jsxEscapeJs
+          \ nextgroup=jsxAttrib,jsxSpreadOperator
+          \ skipwhite
+          \ skipempty
+
+    syntax keyword jsxAttribKeyword class contained display
+
+    syntax match jsxSpreadOperator +\.\.\.+ contained display nextgroup=jsxEscapeJs skipwhite
+
+    syntax match jsxCloseTag +<//>+ display
+
+    syntax match jsxComment +<!--\_.\{-}-->+ display
+  endif
+
+  " Highlight the tag name
+  highlight def link jsxTag Function
+  highlight def link jsxTagName Identifier
+  highlight def link jsxComponentName Function
+
+  highlight def link jsxAttrib Type
+  highlight def link jsxAttribKeyword jsxAttrib
+  highlight def link jsxEqual Operator
+  highlight def link jsxString String
+  highlight def link jsxDot Operator
+  highlight def link jsxNamespace Operator
+
+  " Highlight the jsxCloseString (i.e. />), jsxPunct (i.e. <,>) and jsxCloseTag (i.e. <//>)
+  highlight def link jsxCloseString Comment
+  highlight def link jsxPunct jsxCloseString
+  highlight def link jsxOpenPunct jsxPunct
+  highlight def link jsxClosePunct jsxPunct
+  highlight def link jsxCloseTag jsxCloseString
+
+  highlight def link jsxComment Comment
+  highlight def link jsxSpreadOperator Operator
+
+  if s:highlight_close_tag
+    highlight! def link jsxOpenPunct jsxTag
+    highlight! def link jsxCloseString Identifier
+  endif
+
+  let s:vim_jsx_pretty_colorful_config = get(g:, 'vim_jsx_pretty_colorful_config', 0)
+
+  if s:vim_jsx_pretty_colorful_config == 1
+    highlight def link jsObjectKey Label
+    highlight def link jsArrowFuncArgs Type
+    highlight def link jsFuncArgs Type
+  endif
+
+endfunction
diff --git a/build b/build
index 21bb5252..d719d8ae 100755
--- a/build
+++ b/build
@@ -210,7 +210,7 @@ PACKS="
   json5:GutenYe/json5.vim
   json:elzr/vim-json
   jst:briancollins/vim-jst
-  jsx:amadeus/vim-jsx
+  jsx:MaxMEllon/vim-jsx-pretty
   julia:JuliaEditorSupport/julia-vim
   kotlin:udalov/kotlin-vim
   latex:LaTeX-Box-Team/LaTeX-Box
@@ -277,7 +277,6 @@ PACKS="
   tomdoc:wellbredgrapefruit/tomdoc.vim
   toml:cespare/vim-toml
   tptp:c-cube/vim-tptp
-  tsx:ianks/vim-tsx
   twig:lumiliet/vim-twig
   typescript:leafgarland/typescript-vim
   vala:arrufat/vala.vim
diff --git a/ftdetect/polyglot.vim b/ftdetect/polyglot.vim
index 830b1fb7..15eea891 100644
--- a/ftdetect/polyglot.vim
+++ b/ftdetect/polyglot.vim
@@ -606,59 +606,6 @@ au BufNewFile,BufRead *.ect set filetype=jst
   augroup end
 endif
 
-if !exists('g:polyglot_disabled') || index(g:polyglot_disabled, 'jsx') == -1
-  augroup filetypedetect
-  " jsx, from javascript.vim in amadeus/vim-jsx
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim ftdetect file
-"
-" Language: JSX (JavaScript)
-" Maintainer: Max Wang <mxawng@gmail.com>
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-let s:jsx_pragma_pattern = '\%^\_s*\/\*\*\%(\_.\%(\*\/\)\@!\)*@jsx\_.\{-}\*\/'
-
-" if g:jsx_check_react_import == 1
-"   parse the first line of js file (skipping comments). When it has a 'react'
-"   importation, we guess the user writes jsx
-" endif
-let s:jsx_prevalent_pattern =
-      \ '\v\C%^\_s*%(%(//.*\_$|/\*\_.{-}\*/)@>\_s*)*%(import\s+\k+\s+from\s+|%(\l+\s+)=\k+\s*\=\s*require\s*\(\s*)[`"'']react>'
-
-" Whether to set the JSX filetype on *.js files.
-fu! <SID>EnableJSX()
-  " Whether the .jsx extension is required.
-  if !exists('g:jsx_ext_required')
-    let g:jsx_ext_required = 0
-  endif
-
-  " Whether the @jsx pragma is required.
-  if !exists('g:jsx_pragma_required')
-    let g:jsx_pragma_required = 0
-  endif
-
-  if g:jsx_pragma_required && !exists('b:jsx_ext_found')
-    " Look for the @jsx pragma.  It must be included in a docblock comment
-    " before anything else in the file (except whitespace).
-    let b:jsx_pragma_found = search(s:jsx_pragma_pattern, 'npw')
-  endif
-
-  if g:jsx_pragma_required && !b:jsx_pragma_found | return 0 | endif
-  if g:jsx_ext_required && !exists('b:jsx_ext_found') &&
-        \ !(get(g:,'jsx_check_react_import') && search(s:jsx_prevalent_pattern, 'nw'))
-    return 0
-  endif
-  return 1
-endfu
-
-autocmd BufNewFile,BufRead *.jsx let b:jsx_ext_found = 1
-autocmd BufNewFile,BufRead *.jsx set filetype=javascript.jsx
-autocmd BufNewFile,BufRead *.js
-  \ if <SID>EnableJSX() | set filetype=javascript.jsx | endif
-  augroup end
-endif
-
 if !exists('g:polyglot_disabled') || index(g:polyglot_disabled, 'kotlin') == -1
   augroup filetypedetect
   " kotlin, from kotlin.vim in udalov/kotlin-vim
@@ -1377,22 +1324,6 @@ au BufRead,BufNewFile *.ax set syntax=tptp
   augroup end
 endif
 
-if !exists('g:polyglot_disabled') || index(g:polyglot_disabled, 'tsx') == -1
-  augroup filetypedetect
-  " tsx, from typescript.vim in ianks/vim-tsx
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-" Vim ftdetect file
-"
-" Language: TSX (JavaScript)
-" Maintainer: Ian Ker-Seymer <i.kerseymer@gmail.com>
-"
-"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
-
-autocmd BufNewFile,BufRead *.tsx let b:tsx_ext_found = 1
-autocmd BufNewFile,BufRead *.tsx set filetype=typescript.tsx
-  augroup end
-endif
-
 if !exists('g:polyglot_disabled') || index(g:polyglot_disabled, 'twig') == -1
   augroup filetypedetect
   " twig, from twig.vim in lumiliet/vim-twig