[ { "path": ".gitignore", "content": ".DS_Store\n" }, { "path": "LICENSE", "content": "This is free and unencumbered software released into the public domain.\n\nAnyone is free to copy, modify, publish, use, compile, sell, or\ndistribute this software, either in source code form or as a compiled\nbinary, for any purpose, commercial or non-commercial, and by any\nmeans.\n\nIn jurisdictions that recognize copyright laws, the author or authors\nof this software dedicate any and all copyright interest in the\nsoftware to the public domain. We make this dedication for the benefit\nof the public at large and to the detriment of our heirs and\nsuccessors. We intend this dedication to be an overt act of\nrelinquishment in perpetuity of all present and future rights to this\nsoftware under copyright law.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\nOTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\nOTHER DEALINGS IN THE SOFTWARE.\n\nFor more information, please refer to \n" }, { "path": "README.md", "content": "# vim-jsx-typescript\n\nSyntax highlighting and indentation for JSX in Typescript (`typescriptreact` filetypes).\n\n`vim-jsx-typescript` works with the built-in typescript syntax highlighter and indentation engine for recent versions of Vim/Neovim.\n\n**Changelog: filetypes were updated from typescript.tsx to typescriptreact**\n**Please set filetypes as typescriptreact, not typescript.tsx as in prior versions in your .vimrc if you have any issues**\n```\n\" set filetypes as typescriptreact\nautocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescriptreact\n```\n\n![alt tag](./screen1.jpg)\n![alt tag](./screen2.jpg)\n\n## Installation\n\nYou need to install [Vundle] or [vim-plug]: `https://github.com/junegunn/vim-plug` --- just add the following lines to your `~/.vimrc`:\n\n### Vundle:\n\n```\nPlugin 'leafgarland/typescript-vim'\nPlugin 'peitalin/vim-jsx-typescript'\n```\n\n### Vim-plug:\n\n```\nPlug 'leafgarland/typescript-vim'\nPlug 'peitalin/vim-jsx-typescript'\n```\n\nTo install from within vim, use the commands below.\n\n```\n:so ~/.vimrc\n:PluginInstall\n\n\" OR for vim-plug:\n:so ~/.vimrc\n:PlugInstall\n\n```\n\nNote you can include .jsx files as typescriptreact files for syntax highlighting.\n\n```\n\" set filetypes as typescriptreact\nautocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescriptreact\n```\n\nSet jsx-tag colors in vimrc, for example:\n\n```\n\" dark red\nhi tsxTagName guifg=#E06C75\nhi tsxComponentName guifg=#E06C75\nhi tsxCloseComponentName guifg=#E06C75\n\n\" orange\nhi tsxCloseString guifg=#F99575\nhi tsxCloseTag guifg=#F99575\nhi tsxCloseTagName guifg=#F99575\nhi tsxAttributeBraces guifg=#F99575\nhi tsxEqual guifg=#F99575\n\n\" yellow\nhi tsxAttrib guifg=#F8BD7F cterm=italic\n```\n\n![alt tag](./screen4.jpg)\n\nThere is support for JSX Generics (Typescript 2.9). You can set the colors by adding this to your .vimrc settings\n\n```\n\" light-grey\nhi tsxTypeBraces guifg=#999999\n\" dark-grey\nhi tsxTypes guifg=#666666\n\n```\n\n![alt tag](./screen5.jpg)\n![alt tag](./screen9.jpg)\n\nOther keywords you can change coloring:\n\n```\nhi ReactState guifg=#C176A7\nhi ReactProps guifg=#D19A66\nhi ApolloGraphQL guifg=#CB886B\nhi Events ctermfg=204 guifg=#56B6C2\nhi ReduxKeywords ctermfg=204 guifg=#C678DD\nhi ReduxHooksKeywords ctermfg=204 guifg=#C176A7\nhi WebBrowser ctermfg=204 guifg=#56B6C2\nhi ReactLifeCycleMethods ctermfg=204 guifg=#D19A66\n```\n" }, { "path": "after/ftplugin/typescriptreact.vim", "content": "\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\" Vim ftplugin file\n\"\n\" Language: TSX (TypeScript)\n\"\n\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\n\" modified from html.vim\nif exists(\"loaded_matchit\")\n let b:match_ignorecase = 0\n let b:match_words = '(:),\\[:\\],{:},<:>,' .\n \\ '<\\@<=\\([^/][^ \\t>]*\\)[^>]*\\%(>\\|$\\):<\\@<=/\\1>'\nendif\n\nsetlocal suffixesadd+=.tsx\n" }, { "path": "after/indent/typescriptreact.vim", "content": "\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\" \" Vim indent file\n\"\n\" Language: typescriptreact (TypeScript)\n\" from:\n\" https://github.com/peitalin/vim-jsx-typescript/issues/4#issuecomment-564519091\n\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\nruntime! indent/typescript.vim\n\nlet b:did_indent = 1\n\nif !exists('*GetTypescriptIndent') | finish | endif\n\nsetlocal indentexpr=GetTsxIndent()\nsetlocal indentkeys=0{,0},0),0],0\\,,!^F,o,O,e,*,<>>,<<>,/\n\nif exists('*shiftwidth')\n function! s:sw()\n return shiftwidth()\n endfunction\nelse\n function! s:sw()\n return &sw\n endfunction\nendif\n\nlet s:real_endtag = '\\s*<\\/\\+[A-Za-z]*>'\nlet s:return_block = '\\s*return\\s\\+('\nfunction! s:SynSOL(lnum)\n return map(synstack(a:lnum, 1), 'synIDattr(v:val, \"name\")')\nendfunction\n\nfunction! s:SynEOL(lnum)\n let lnum = prevnonblank(a:lnum)\n let col = strlen(getline(lnum))\n return map(synstack(lnum, col), 'synIDattr(v:val, \"name\")')\nendfunction\n\nfunction! s:SynAttrJSX(synattr)\n return a:synattr =~ \"^tsx\"\nendfunction\n\nfunction! s:SynXMLish(syns)\n return s:SynAttrJSX(get(a:syns, -1))\nendfunction\n\nfunction! s:SynJSXDepth(syns)\n return len(filter(copy(a:syns), 'v:val ==# \"tsxRegion\"'))\nendfunction\n\nfunction! s:SynJSXCloseTag(syns)\n return len(filter(copy(a:syns), 'v:val ==# \"tsxCloseTag\"'))\nendfunction\n\nfunction! s:SynJsxEscapeJs(syns)\n return len(filter(copy(a:syns), 'v:val ==# \"tsxJsBlock\"'))\nendfunction\n\nfunction! s:SynJSXContinues(cursyn, prevsyn)\n let curdepth = s:SynJSXDepth(a:cursyn)\n let prevdepth = s:SynJSXDepth(a:prevsyn)\n\n return prevdepth == curdepth ||\n \\ (prevdepth == curdepth + 1 && get(a:cursyn, -1) ==# 'tsxRegion')\nendfunction\n\nfunction! GetTsxIndent()\n let cursyn = s:SynSOL(v:lnum)\n let prevsyn = s:SynEOL(v:lnum - 1)\n let nextsyn = s:SynEOL(v:lnum + 1)\n let currline = getline(v:lnum)\n\n if ((s:SynXMLish(prevsyn) && s:SynJSXContinues(cursyn, prevsyn)) || currline =~# '\\v^\\s*\\<')\n let preline = getline(v:lnum - 1)\n\n if currline =~# '\\v^\\s*\\/?\\>' \" /> >\n return preline =~# '\\v^\\s*\\<' ? indent(v:lnum - 1) : indent(v:lnum - 1) - s:sw()\n endif\n\n if preline =~# '\\v\\{\\s*$' && preline !~# '\\v^\\s*\\<'\n return currline =~# '\\v^\\s*\\}' ? indent(v:lnum - 1) : indent(v:lnum - 1) + s:sw()\n endif\n\n \" return ( | return ( | return (\n \"
|
| } | }\n \" ) | foo=\"bar\"| >\n if preline =~# '\\v\\}\\s*$'\n if currline =~# '\\v^\\s*\\<\\/'\n return indent(v:lnum - 1) - s:sw()\n endif\n let ind = indent(v:lnum - 1)\n if preline =~# '\\v^\\s*\\<'\n let ind = ind + s:sw()\n endif\n if currline =~# '\\v^\\s*\\/?\\>'\n let ind = ind - s:sw()\n endif\n return ind\n endif\n\n \" return ( | return (\n \"
|
\n \"
|
\n \" ##); | );\n if preline =~# '\\v(\\s?|\\k?)\\($' || preline =~# '\\v^\\s*\\<\\>'\n return indent(v:lnum - 1) + s:sw()\n endif\n\n let ind = s:XmlIndentGet(v:lnum)\n\n \"
| ##
\n if s:SynJsxEscapeJs(prevsyn) && preline =~# '\\v\\{\\s*$'\n let ind = ind + s:sw()\n endif\n\n \" />\n if preline =~# '\\v^\\s*\\/?\\>$' || currline =~# '\\v^\\s*\\<\\/\\>'\n \"let ind = currline =~# '\\v^\\s*\\<\\/' ? ind : ind + s:sw()\n let ind = ind + s:sw()\n \" }> or }}\\> or }}>\n elseif preline =~# '\\v^\\s*\\}?\\}\\s*\\/?\\>$'\n let ind = ind + s:sw()\n \" >\\<\\/\\a'\n let ind = ind + s:sw()\n elseif preline =~# '\\v^\\s*}}.+\\<\\/\\k+\\>$'\n let ind = ind + s:sw()\n endif\n\n \"
|
\n \" } | }##\n if currline =~# '}$' && !(currline =~# '\\v\\{')\n let ind = ind - s:sw()\n endif\n\n if currline =~# '^\\s*)' && s:SynJSXCloseTag(prevsyn)\n let ind = ind - s:sw()\n endif\n else\n let ind = GetTypescriptIndent()\n endif\n return ind\nendfunction\n\nlet b:xml_indent_open = '.\\{-}<\\a'\nlet b:xml_indent_close = '.\\{-}'))) + a:add\n else\n return a:add\n endif\nendfunction\n\nfunction! s:XmlIndentGet(lnum)\n \" Find a non-empty line above the current line.\n let lnum = prevnonblank(a:lnum - 1)\n\n \" Hit the start of the file, use zero indent.\n if lnum == 0 | return 0 | endif\n\n let ind = s:XmlIndentSum(lnum, -1, indent(lnum))\n let ind = s:XmlIndentSum(a:lnum, 0, ind)\n return ind\nendfunction\n\n" }, { "path": "after/syntax/typescriptreact.vim", "content": "\n\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\" Vim syntax file\n\"\n\" Language: TSX (TypeScript)\n\"\n\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\n\" These are the plugin-to-syntax-element correspondences:\n\" - leafgarland/typescript-vim: typescriptFuncBlock\n\n\nlet s:tsx_cpo = &cpo\nset cpo&vim\n\nsyntax case match\n\nif exists('b:current_syntax')\n let s:current_syntax = b:current_syntax\n unlet b:current_syntax\nendif\n\nsyn include @HTMLSyntax syntax/html.vim\nif exists('s:current_syntax')\n let b:current_syntax = s:current_syntax\nendif\n\n\"\"\"\"\"\" Vim Syntax Help \"\"\"\"\"\"\n\" `keepend` and `extend` docs:\n\" https://github.com/othree/til/blob/master/vim/syntax-keepend-extend.md\n\n\" \\@<= positive lookbehind\n\" \\@\n\" s~~~~~~~~~~~e\nsyntax region tsxRegion\n \\ start=+\\(\\([a-zA-Z]\\)\\@\\|\\(\\s\\|[(]\\s*\\)\\@<=\\z(<[/a-zA-Z],\\@!\\([a-zA-Z0-9:\\-],\\@!\\)*\\)\\)+\n \\ skip=++\n \\ end=++\n \\ end=+[a-zA-Z0-9.]*[/]*>\\s*\\n*\\s*\\n*\\s*[});,]\\@=+\n \\ contains=tsxTag,tsxCloseTag,tsxComment,Comment,@Spell,tsxColon,tsxIfOperator,tsxElseOperator,jsBlock\n \\ extend\n \\ keepend\n\n\n\n\" Negative lookbacks for:\n\" <> preceeded by [a-zA-Z]\n\" <\n\" end 2): handle \\s*\\n*\\s*\\n*\\s*)\n\" \\s => spaces/tabs\n\" \\n => end-of-line => \\n only match end of line in the buffer.\n\" \\s*\\n*\\s*\\n*\\s* => handles arbitrary spacing between closing tsxTag \n\" and the ending brace for the scope: `}` or `)`\n\"\n\" \\z( pattern \\) Braces can be used to make a pattern into an atom.\n\n\" {content}\n\" s~~~~~~~e\nsyn region jsBlock\n \\ start=+{+\n \\ end=+}+\n \\ contained\n \\ contains=TOP\n\n\" \\@<= positive lookbehind\n\" \\@\n\" s~~~~~~~~~~~~~~e\nsyntax region tsxJsBlock\n \\ matchgroup=tsxAttributeBraces start=+\\([=]\\|\\s\\)\\@<={+\n \\ matchgroup=tsxAttributeBraces end=+}\\(\\s*}\\|)\\)\\@!+\n \\ contained\n \\ keepend\n \\ extend\n \\ contains=TOP\n\n\" \n\" s~~~~~~~~~~~~~~~e\nsyntax region tsxTag\n \\ start=+<[^ /!?<\"'=:]\\@=+\n \\ end=+[/]\\{0,1}>+\n \\ contained\n \\ contains=tsxTagName,tsxAttrib,tsxEqual,tsxString,tsxJsBlock,tsxAttributeComment,tsxGenerics\n\nsyntax region tsxGenerics\n \\ matchgroup=tsxTypeBraces start=+\\([<][_\\-\\.:a-zA-Z0-9]*\\|[<][_\\-\\.:a-zA-Z0-9]*\\)\\@<=\\s*[<]+\n \\ matchgroup=tsxTypeBraces end=+>+\n \\ contains=tsxTypes,tsxGenerics\n \\ contained\n \\ extend\n\nsyntax match tsxTypes /[_\\.a-zA-Z0-9]/\n \\ contained\n\n\" \\@\n\" s~~~~~~~e\n\" For Generics outside of tsxRegion\n\" Must come after tsxRegion in this file\nsyntax region tsGenerics\n \\ start=+<\\([\\[A-Z]\\|typeof\\)\\([a-zA-Z0-9,{}\\[\\]'\".=>():]\\|\\s\\)*>\\(\\s*\\n*\\s*[()]\\|\\s*[=]\\)+\n \\ end=+\\([=]\\)\\@+\n \\ contains=tsxTypes,tsxGenerics\n \\ extend\n\n\" \n\" ~~~~~~\nsyntax region tsxCloseTag\n \\ start=++\n\n\n\" matches tsx Comments: {/* ..... /*}\nsyn region Comment contained start=+{/\\*+ end=+\\*/}+ contains=Comment\n \\ extend\n\nsyn region tsxAttributeComment contained start=+//+ end=+\\n+ contains=Comment\n \\ extend\n\nsyntax match tsxCloseString\n \\ +\\w\\++\n \\ contained\n\nsyntax match tsxColon\n \\ +[;]+\n \\ contained\n\n\" \n\" ~~~~~~~~\nsyntax match tsxComment // display\nsyntax match tsxEntity \"&[^; \\t]*;\" contains=tsxEntityPunct\nsyntax match tsxEntityPunct contained \"[&.;]\"\n\n\" \n\" ~~~~~~~~~~~\n\" NOT\n\" \n\" ~~~~~\nsyntax match tsxComponentName\n \\ +\\<[_$]\\?[A-Z][-_$A-Za-z0-9]*\\>+\n \\ contained\n \\ display\n\nsyntax match tsxCloseComponentName\n \\ +[+\n \\ contained\n \\ display\n\n\" \n\" ~~~\nsyntax match tsxTagName\n \\ +[<]\\@<=[^ /!?<>\"']\\++\n \\ contained\n \\ contains=tsxComponentName\n \\ display\n\n\" \n\" ~~~\nsyntax match tsxCloseTagName\n \\ +[\"']\\++\n \\ containedin=tsxCloseTag\n \\ contains=tsxCloseComponentName\n \\ display\n\n\" \n\" ~~~\nsyntax match tsxAttrib\n \\ +[-'\"<]\\@\\(['\"]\\@!\\|$\\)+\n \\ contained\n \\ keepend\n \\ contains=tsxAttribPunct,tsxAttribHook\n \\ display\n\nsyntax match tsxAttribPunct +[:.]+ contained display\n\n\" \n\" ~\nsyntax match tsxEqual +=+ contained display\n\n\" \n\" s~~~~~~e\nsyntax region tsxString contained start=+\"+ end=+\"+ contains=tsxEntity,@Spell display\n\n\" \nsyntax region tsxString contained start=+`+ end=+`+ contains=tsxEntity,@Spell display\n\n\" \n\" s~~~~~~e\nsyntax region tsxString contained start=+'+ end=+'+ contains=tsxEntity,@Spell display\n\nsyntax match tsxIfOperator +?+\nsyntax match tsxNotOperator +!+\nsyntax match tsxElseOperator +:+\n\n\" highlight def link tsxTagName htmlTagName\nhighlight def link tsxTagName xmlTagName\nhighlight def link tsxComponentName xmlTagName\nhighlight def link tsxCloseComponentName xmlTagName\nhighlight def link tsxTag htmlTag\nhighlight def link tsxCloseTag xmlEndTag\nhighlight def link tsxCloseTagName xmlTagName\nhighlight def link tsxRegionEnd xmlEndTag\nhighlight def link tsxEqual htmlTag\nhighlight def link tsxString String\nhighlight def link tsxNameSpace Function\nhighlight def link tsxComment Error\nhighlight def link tsxAttrib htmlArg\nhighlight def link tsxCloseString htmlTagName\nhighlight def link tsxAttributeBraces htmlTag\nhighlight def link tsxAttributeComment Comment\nhighlight def link tsxColon typescriptEndColons\n\nhighlight def link tsxGenerics typescriptEndColons\nhighlight def link tsGenerics tsxTypeBraces\n\nhighlight def link tsxIfOperator typescriptEndColons\nhighlight def link tsxNotOperator typescriptEndColons\nhighlight def link tsxElseOperator typescriptEndColons\nhighlight def link tsxTypeBraces htmlTag\nhighlight def link tsxTypes typescriptEndColons\n\n\" Custom React Highlights\nsyn keyword ReactState state nextState prevState setState\n\" Then EITHER (define your own colour scheme):\n\" OR (make the colour scheme match an existing one):\n\" hi link ReactKeywords typescriptRComponent\nsyn keyword ReactProps props defaultProps ownProps nextProps prevProps\nsyn keyword Events e event target value\nsyn keyword ReduxKeywords dispatch payload\nsyn keyword ReduxHooksKeywords useState useEffect useMemo useCallback\nsyn keyword WebBrowser window localStorage\nsyn keyword ReactLifeCycleMethods componentWillMount shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillReceiveProps componentWillUnmount componentDidMount\n\nlet b:current_syntax = 'typescriptreact'\n\nlet &cpo = s:tsx_cpo\nunlet s:tsx_cpo\n\n" }, { "path": "ftdetect/typescript.vim", "content": "\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\" Vim ftdetect file\n\" Language: TSX (Typescript)\n\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\n\nautocmd FileType typescriptreact setlocal commentstring={/*\\ %s\\ */}\nautocmd BufNewFile,BufRead *.tsx set filetype=typescriptreact\n" } ]