diff --git a/vim/bundle/jsx/README.md b/vim/bundle/jsx/README.md new file mode 100644 index 0000000..82ec053 --- /dev/null +++ b/vim/bundle/jsx/README.md @@ -0,0 +1,59 @@ +vim-jsx +======= + +Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax +transformer which translates inline XML document fragments into JavaScript +objects. It was developed by Facebook alongside [React][1]. + +This bundle requires pangloss's [vim-javascript][2] syntax highlighting. + +Vim support for inline XML in JS is remarkably similar to the same for PHP, +which you can find [here][3]. + +Usage +----- + +By default, JSX syntax highlighting and indenting will be enabled only for +files with the `.jsx` extension. If you would like JSX in `.js` files, add + + let g:jsx_ext_required = 0 + +to your .vimrc or somewhere in your include path. If you wish to restrict JSX +to files with the pre-v0.12 `@jsx React.DOM` pragma, add + + let g:jsx_pragma_required = 1 + +to your .vimrc or somewhere in your include path. + +Please note that this package does not support syntax folding, and has not been +tested with either JavaScript or XML folding enabled. + +Installation +------------ + +### Pathogen + +The recommended installation method is via [Pathogen][4]. Then simply execute + + cd ~/.vim/bundle + git clone https://github.com/mxw/vim-jsx.git + +### Manual Installation + +If you have no `~/.vim/after` directory, you can download the tarball or zip +and copy the contents to `~/.vim`. + +If you have existing `~/.vim/after` files, copy the syntax and indent files +directly into their respective destinations. If you have existing after syntax +or indent files for Javascript, you'll probably want to do something like + + mkdir -p ~/.vim/after/syntax/javascript + cp path/to/vim-jsx/after/syntax/javascript.vim ~/.vim/after/syntax/javascript/javascript.vim + mkdir -p ~/.vim/after/indent/javascript + cp path/to/vim-jsx/after/indent/javascript.vim ~/.vim/after/indent/javascript/javascript.vim + + +[1]: http://facebook.github.io/react/ "React" +[2]: https://github.com/pangloss/vim-javascript "pangloss: vim-javascript" +[3]: https://github.com/mxw/vim-xhp "mxw: vim-xhp" +[4]: https://github.com/tpope/vim-pathogen "tpope: vim-pathogen" diff --git a/vim/bundle/jsx/after/ftdetect/javascript.vim b/vim/bundle/jsx/after/ftdetect/javascript.vim new file mode 100644 index 0000000..900fce1 --- /dev/null +++ b/vim/bundle/jsx/after/ftdetect/javascript.vim @@ -0,0 +1,20 @@ +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Vim ftdetect file +" +" Language: JSX (JavaScript) +" Maintainer: Max Wang +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +exec 'source '.fnameescape(expand(':p:h:h').'/jsx-config.vim') + +fu! EnableJSX() + if g:jsx_pragma_required && !b:jsx_pragma_found | return 0 | endif + if g:jsx_ext_required && !exists('b:jsx_ext_found') | 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 EnableJSX() | set filetype=javascript.jsx | endif diff --git a/vim/bundle/jsx/after/ftplugin/jsx.vim b/vim/bundle/jsx/after/ftplugin/jsx.vim new file mode 100644 index 0000000..ee64209 --- /dev/null +++ b/vim/bundle/jsx/after/ftplugin/jsx.vim @@ -0,0 +1,17 @@ +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Vim ftplugin file +" +" Language: JSX (JavaScript) +" Maintainer: Max Wang +" Depends: pangloss/vim-javascript +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +" modified from html.vim +if exists("loaded_matchit") + let b:match_ignorecase = 0 + let b:match_words = '(:),\[:\],{:},<:>,' . + \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>' +endif + +setlocal suffixesadd+=.jsx diff --git a/vim/bundle/jsx/after/indent/jsx.vim b/vim/bundle/jsx/after/indent/jsx.vim new file mode 100644 index 0000000..d0b4d4e --- /dev/null +++ b/vim/bundle/jsx/after/indent/jsx.vim @@ -0,0 +1,98 @@ +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Vim indent file +" +" Language: JSX (JavaScript) +" Maintainer: Max Wang +" Depends: pangloss/vim-javascript +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +" Do nothing if we don't find the @jsx pragma (and we care). +exec 'source '.fnameescape(expand(':p:h:h').'/jsx-config.vim') +if g:jsx_pragma_required && !b:jsx_pragma_found | finish | endif + +" Do nothing if we don't have the .jsx extension (and we care). +if g:jsx_ext_required && !exists('b:jsx_ext_found') | finish | endif + +" 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+=*,<>>,<<>,/ + +" 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 =~ "^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 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 JSX block. +fu! SynJSXBlockEnd(syns) + return get(a:syns, -1) == 'jsBraces' && SynAttrXMLish(get(a:syns, -2)) +endfu + +" Cleverly mix JS and XML indentation. +fu! GetJsxIndent() + 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 + " JSX or was the closing brace of a jsBlock whose parent syntax was JSX. + if (SynXMLish(prevsyn) || SynJSXBlockEnd(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 JSX following '/>'. + if getline(v:lnum - 1) =~? s:sctag + let ind = ind + &sw + endif + else + let ind = GetJavascriptIndent() + endif + + return ind +endfu diff --git a/vim/bundle/jsx/after/jsx-config.vim b/vim/bundle/jsx/after/jsx-config.vim new file mode 100644 index 0000000..a1d4cbe --- /dev/null +++ b/vim/bundle/jsx/after/jsx-config.vim @@ -0,0 +1,33 @@ +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Vimscript file +" +" Set up a bunch of configuration variables. +" +" Also check (if desired) whether or not the @jsx pragma is correctly included +" in '%'. Set the result in b:jsx_pragma_found. +" +" Language: JSX (JavaScript) +" Maintainer: Max Wang +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +" Only check once. +if exists('b:jsx_pragma_found') + finish +endif + +" Whether the .jsx extension is required to enable JSX syntax/indent. +if !exists('g:jsx_ext_required') + let g:jsx_ext_required = 1 +endif + +" Whether the @jsx pragma is required to enable JSX syntax/indent. +if !exists('g:jsx_pragma_required') + let g:jsx_pragma_required = 0 +endif +if !g:jsx_pragma_required | finish | endif + +" Look for the @jsx pragma. It must be included in a docblock comment before +" anything else in the file (except whitespace). +let s:jsx_pragma_pattern = '\%^\_s*\/\*\*\%(\_.\%(\*\/\)\@!\)*@jsx\_.\{-}\*\/' +let b:jsx_pragma_found = search(s:jsx_pragma_pattern, 'npw') diff --git a/vim/bundle/jsx/after/syntax/jsx.vim b/vim/bundle/jsx/after/syntax/jsx.vim new file mode 100644 index 0000000..63a1248 --- /dev/null +++ b/vim/bundle/jsx/after/syntax/jsx.vim @@ -0,0 +1,43 @@ +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" +" Vim syntax file +" +" Language: JSX (JavaScript) +" Maintainer: Max Wang +" Depends: pangloss/vim-javascript +" +" CREDITS: Inspired by Facebook. +" +""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" + +" Do nothing if we don't find the @jsx pragma (and we care). +exec 'source '.fnameescape(expand(':p:h:h').'/jsx-config.vim') +if g:jsx_pragma_required && !b:jsx_pragma_found | finish | endif + +" Do nothing if we don't have the .jsx extension (and we care). +if g:jsx_ext_required && !exists('b:jsx_ext_found') | finish | endif + +" 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 + +" Highlight JSX regions as XML; recursively match. +syn region jsxRegion contains=@XMLSyntax,jsxRegion,jsBlock,javascriptBlock + \ start=+<\@+ + \ end=++ + \ end=+/>+ + \ keepend + \ extend + +" 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 + +" Add jsxRegion to the lowest-level JS syntax cluster. +syn cluster jsExpression add=jsxRegion