├── README.md └── after ├── ftdetect └── javascript.vim ├── ftplugin └── javascript.vim ├── indent └── javascript.vim ├── jsx-config.vim └── syntax └── javascript.vim /README.md: -------------------------------------------------------------------------------- 1 | vim-jsx-riot.js 2 | ======= 3 | 4 | This is modified vim plugin for [React JSX][0] to work with [Riot.js][1]. 5 | 6 | Add to your .vimrc file: 7 | 8 | ```viml 9 | au BufNewFile,BufRead *.tag setlocal ft=javascript 10 | ``` 11 | 12 | [0]: https://github.com/mxw/vim-jsx "React JSX" 13 | [1]: https://muut.com/riotjs/ "Riot" 14 | -------------------------------------------------------------------------------- /after/ftdetect/javascript.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim ftdetect file 3 | " 4 | " Language: JSX (JavaScript) 5 | " Maintainer: Max Wang 6 | " 7 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 8 | 9 | autocmd BufNewFile,BufRead *.jsx let b:jsx_ext_found = 1 10 | autocmd BufNewFile,BufRead *.jsx set filetype=javascript 11 | autocmd BufNewFile,BufRead *.tag let b:jsx_ext_found = 1 12 | autocmd BufNewFile,BufRead *.tag set filetype=javascript 13 | -------------------------------------------------------------------------------- /after/ftplugin/javascript.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim ftplugin file 3 | " 4 | " Language: JSX (JavaScript) 5 | " Maintainer: Max Wang 6 | " Depends: pangloss/vim-javascript 7 | " 8 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 9 | 10 | " modified from html.vim 11 | if exists("loaded_matchit") 12 | let b:match_ignorecase = 0 13 | let b:match_words = '(:),\[:\],{:},<:>,' . 14 | \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>' 15 | endif 16 | -------------------------------------------------------------------------------- /after/indent/javascript.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim indent file 3 | " 4 | " Language: JSX (JavaScript) 5 | " Maintainer: Max Wang 6 | " Depends: pangloss/vim-javascript 7 | " 8 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 9 | 10 | " Do nothing if we don't find the @jsx pragma (and we care). 11 | exec 'source '.fnameescape(expand(':p:h:h').'/jsx-config.vim') 12 | if g:jsx_pragma_required && !b:jsx_pragma_found | finish | endif 13 | 14 | " Do nothing if we don't have the .jsx extension (and we care). 15 | if g:jsx_ext_required && !exists('b:jsx_ext_found') | finish | endif 16 | 17 | " Prologue; load in XML indentation. 18 | if exists('b:did_indent') 19 | let s:did_indent=b:did_indent 20 | unlet b:did_indent 21 | endif 22 | exe 'runtime! indent/xml.vim' 23 | if exists('s:did_indent') 24 | let b:did_indent=s:did_indent 25 | endif 26 | 27 | setlocal indentexpr=GetJsxIndent() 28 | 29 | " JS indentkeys 30 | setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e 31 | " XML indentkeys 32 | setlocal indentkeys+=*,<>>,<<>,/ 33 | 34 | " Self-closing tag regex. 35 | let s:sctag = '^\s*\/>\s*;\=' 36 | 37 | " Get all syntax types at the beginning of a given line. 38 | fu! SynSOL(lnum) 39 | return map(synstack(a:lnum, 1), 'synIDattr(v:val, "name")') 40 | endfu 41 | 42 | " Get all syntax types at the end of a given line. 43 | fu! SynEOL(lnum) 44 | let lnum = prevnonblank(a:lnum) 45 | let col = strlen(getline(lnum)) 46 | return map(synstack(lnum, col), 'synIDattr(v:val, "name")') 47 | endfu 48 | 49 | " Check if a syntax attribute is XMLish. 50 | fu! SynAttrXMLish(synattr) 51 | return a:synattr =~ "^xml" || a:synattr =~ "^jsx" 52 | endfu 53 | 54 | " Check if a synstack is XMLish (i.e., has an XMLish last attribute). 55 | fu! SynXMLish(syns) 56 | return SynAttrXMLish(get(a:syns, -1)) 57 | endfu 58 | 59 | " Check if a synstack has any XMLish attribute. 60 | fu! SynXMLishAny(syns) 61 | for synattr in a:syns 62 | if SynAttrXMLish(synattr) 63 | return 1 64 | endif 65 | endfor 66 | return 0 67 | endfu 68 | 69 | " Check if a synstack denotes the end of a JSX block. 70 | fu! SynJSXBlockEnd(syns) 71 | return get(a:syns, -1) == 'jsBraces' && SynAttrXMLish(get(a:syns, -2)) 72 | endfu 73 | 74 | " Cleverly mix JS and XML indentation. 75 | fu! GetJsxIndent() 76 | let cursyn = SynSOL(v:lnum) 77 | let prevsyn = SynEOL(v:lnum - 1) 78 | 79 | " Use XML indenting if the syntax at the end of the previous line was either 80 | " JSX or was the closing brace of a jsBlock whose parent syntax was JSX. 81 | if (SynXMLish(prevsyn) || SynJSXBlockEnd(prevsyn)) && SynXMLishAny(cursyn) 82 | let ind = XmlIndentGet(v:lnum, 0) 83 | 84 | " Align '/>' with '<' for multiline self-closing tags. 85 | if getline(v:lnum) =~? s:sctag 86 | let ind = ind - &sw 87 | endif 88 | 89 | " Then correct the indentation of any JSX following '/>'. 90 | if getline(v:lnum - 1) =~? s:sctag 91 | let ind = ind + &sw 92 | endif 93 | else 94 | let ind = GetJavascriptIndent() 95 | endif 96 | 97 | return ind 98 | endfu 99 | -------------------------------------------------------------------------------- /after/jsx-config.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vimscript file 3 | " 4 | " Set up a bunch of configuration variables. 5 | " 6 | " Also check (if desired) whether or not the @jsx pragma is correctly included 7 | " in '%'. Set the result in b:jsx_pragma_found. 8 | " 9 | " Language: JSX (JavaScript) 10 | " Maintainer: Max Wang 11 | " 12 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 13 | 14 | " Only check once. 15 | if exists('b:jsx_pragma_found') 16 | finish 17 | endif 18 | 19 | " Whether the .jsx extension is required to enable JSX syntax/indent. 20 | if !exists('g:jsx_ext_required') 21 | let g:jsx_ext_required = 1 22 | endif 23 | 24 | " Whether the @jsx pragma is required to enable JSX syntax/indent. 25 | if !exists('g:jsx_pragma_required') 26 | let g:jsx_pragma_required = 0 27 | endif 28 | if !g:jsx_pragma_required | finish | endif 29 | 30 | " Look for the @jsx pragma. It must be included in a docblock comment before 31 | " anything else in the file (except whitespace). 32 | let s:jsx_pragma_pattern = '\%^\_s*\/\*\*\%(\_.\%(\*\/\)\@!\)*@jsx\_.\{-}\*\/' 33 | let b:jsx_pragma_found = search(s:jsx_pragma_pattern, 'npw') 34 | -------------------------------------------------------------------------------- /after/syntax/javascript.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim syntax file 3 | " 4 | " Language: JSX (JavaScript) 5 | " Maintainer: Max Wang 6 | " Depends: pangloss/vim-javascript 7 | " 8 | " CREDITS: Inspired by Facebook. 9 | " 10 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 11 | 12 | " Do nothing if we don't find the @jsx pragma (and we care). 13 | exec 'source '.fnameescape(expand(':p:h:h').'/jsx-config.vim') 14 | if g:jsx_pragma_required && !b:jsx_pragma_found | finish | endif 15 | 16 | " Do nothing if we don't have the .jsx extension (and we care). 17 | if g:jsx_ext_required && !exists('b:jsx_ext_found') | finish | endif 18 | 19 | " Prologue; load in XML syntax. 20 | if exists('b:current_syntax') 21 | let s:current_syntax=b:current_syntax 22 | unlet b:current_syntax 23 | endif 24 | syn include @XMLSyntax syntax/xml.vim 25 | if exists('s:current_syntax') 26 | let b:current_syntax=s:current_syntax 27 | endif 28 | 29 | " Highlight JSX regions as XML; recursively match. 30 | syn region jsxRegion contains=@XMLSyntax,jsxRegion,jsBlock,jsStringD,jsStringS 31 | \ start=+<\@+ 33 | \ end=++ 34 | \ end=+/>+ 35 | \ keepend 36 | \ extend 37 | 38 | " JSX attributes should color as JS. Note the trivial end pattern; we let 39 | " jsBlock take care of ending the region. 40 | syn region xmlString contained start=+{+ end=++ contains=jsBlock 41 | 42 | " Add jsxRegion to the lowest-level JS syntax cluster. 43 | syn cluster jsExpression add=jsxRegion 44 | --------------------------------------------------------------------------------