Update

2025-11-16 15:33:49 -05:00 · 2019-11-12 21:56:06 +01:00
parent 4e95df7c7e
commit 0c79dd3e73
18 changed files with 770 additions and 292 deletions
--- a/after/indent/javascript.vim
+++ b/after/indent/javascript.vim
@@ -21,7 +21,7 @@ if exists('s:did_indent')
 endif

 setlocal indentexpr=GetJsxIndent()
-setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,*<Return>,<>>,<<>,/
+setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,<>>,=*/

 function! GetJsxIndent()
  return jsx_pretty#indent#get(function('GetJavascriptIndent'))
--- a/after/syntax/javascript.vim
+++ b/after/syntax/javascript.vim
@@ -22,34 +22,31 @@ if exists('s:current_syntax')
  let b:current_syntax = s:current_syntax
 endif

-if hlexists("jsNoise")    " pangloss/vim-javascript
+if hlexists("jsDebugger") || hlexists("jsNoise")    " yuezk/vim-js or 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
+
+  " refine the template string syntax
+  syntax region javaScriptEmbed matchgroup=javaScriptEmbedBraces start=+\${+ end=+}+ contained contains=@javaScriptEmbededExpr
+
  " add a javaScriptBlock group for build-in syntax
-  syntax region javaScriptBlockBuildIn
-        \ contained
+  syntax region javaScriptBlock
        \ matchgroup=javaScriptBraces
        \ start="{"
        \ end="}"
+        \ contained
        \ extend
-        \ contains=javaScriptBlockBuildIn,@javaScriptEmbededExpr,javaScript.*
+        \ contains=javaScriptBlock,@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.*
+  syntax cluster javaScriptEmbededExpr add=jsxRegion,javaScript.*
 endif

 runtime syntax/jsx_pretty.vim
--- a/after/syntax/jsx_pretty.vim
+++ b/after/syntax/jsx_pretty.vim
@@ -2,6 +2,12 @@ if !exists('g:polyglot_disabled') || !(index(g:polyglot_disabled, 'typescript')

 let s:highlight_close_tag = get(g:, 'vim_jsx_pretty_highlight_close_tag', 0)

+" detect jsx region
+syntax region jsxRegion
+      \ start=+\%(\%(\_[([,?:=+\-*/>{}]\|<\s\+\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\%(>\|\z(\%(script\|T\s*>\s*(\)\@!\<[_$A-Za-z][-:._$A-Za-z0-9]*\>\)\%(\_s*\%([-+*)\]}&|?,]\|/\%([/*]\|\_s*>\)\@!\)\)\@!\)+
+      \ end=++
+      \ contains=jsxElement
+
 " <tag id="sample">
 " ~~~~~~~~~~~~~~~~~
 " and self close tag
@@ -12,11 +18,14 @@ syntax region jsxTag
      \ matchgroup=jsxOpenPunct
      \ end=+>+
      \ matchgroup=NONE
-      \ end=+\(/\_s*>\)\@=+
+      \ end=+\%(/\_s*>\)\@=+
      \ contained
-      \ contains=jsxOpenTag,jsxEscapeJs,jsxAttrib,jsComment,@javascriptComments,javaScriptLineComment,javaScriptComment,typescriptLineComment,typescriptComment,jsxSpreadOperator
+      \ contains=jsxOpenTag,jsxAttrib,jsxEscapeJs,jsxSpreadOperator,jsComment,@javascriptComments,javaScriptLineComment,javaScriptComment,typescriptLineComment,typescriptComment
      \ keepend
      \ extend
+      \ skipwhite
+      \ skipempty
+      \ nextgroup=jsxCloseString

 " <tag></tag>
 " ~~~~~~~~~~~
@@ -27,30 +36,15 @@ syntax region jsxTag
 " <tag />
 " ~~~~~~~
 syntax region jsxElement
-      \ start=+<\_s*\(>\|\${\|\z(\<[-:_\.\$0-9A-Za-z]\+\>\)\)+
+      \ start=+<\_s*\%(>\|\${\|\z(\<[-:._$A-Za-z0-9]\+\>\)\)+
      \ end=+/\_s*>+
      \ end=+<\_s*/\_s*\z1\_s*>+
-      \ contains=jsxElement,jsxEscapeJs,jsxTag,jsxComment,jsxCloseString,jsxCloseTag,@Spell
+      \ contains=jsxElement,jsxTag,jsxEscapeJs,jsxComment,jsxCloseTag,@Spell
      \ keepend
      \ extend
      \ contained
      \ fold

-" detect jsx region
-syntax region jsxRegion
-      \ start=+\(\(\_[([,?:=+\-*/>{}]\|<\s\+\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\(>\|\z(\(script\|T\s*>\s*(\)\@!\<[_\$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
@@ -66,19 +60,31 @@ exe 'syntax region jsxOpenTag
      \ contains=jsxTagName
      \ nextgroup=jsxAttrib
      \ skipwhite
-      \ skipempty ' .(s:highlight_close_tag ? 'transparent' : '')
+      \ skipempty
+      \ ' .(s:highlight_close_tag ? 'transparent' : '')
+
+
+" <tag key={this.props.key}>
+"          ~~~~~~~~~~~~~~~~
+syntax region jsxEscapeJs
+      \ matchgroup=jsxBraces
+      \ start=+{+
+      \ end=+}+
+      \ contained
+      \ extend
+      \ contains=@jsExpression,jsSpreadExpression,@javascriptExpression,javascriptSpreadOp,@javaScriptEmbededExpr,@typescriptExpression,typescriptObjectSpread

 " <foo.bar>
 "     ~
-syntax match jsxDot +\.+ contained display
+syntax match jsxDot +\.+ contained

 " <foo:bar>
 "     ~
-syntax match jsxNamespace +:+ contained display
+syntax match jsxNamespace +:+ contained

 " <tag id="sample">
 "        ~
-syntax match jsxEqual +=+ contained display nextgroup=jsxString,jsxEscapeJs,jsxRegion skipwhite
+syntax match jsxEqual +=+ contained skipwhite skipempty nextgroup=jsxString,jsxEscapeJs,jsxRegion

 " <tag />
 "      ~~
@@ -99,13 +105,12 @@ syntax region jsxCloseTag
 " <tag key={this.props.key}>
 "      ~~~
 syntax match jsxAttrib
-      \ +\<[-A-Za-z_][-:_\$0-9A-Za-z]*\>+
+      \ +\<[_$A-Za-z][-:_$A-Za-z0-9]*\>+
      \ contained
      \ nextgroup=jsxEqual
      \ skipwhite
      \ skipempty
-      \ contains=jsxAttribKeyword
-      \ display
+      \ contains=jsxAttribKeyword,jsxNamespace

 " <MyComponent ...>
 "  ~~~~~~~~~~~
@@ -113,67 +118,71 @@ syntax match jsxAttrib
 " <someCamel ...>
 "      ~~~~~
 exe 'syntax match jsxComponentName
-      \ +\<[A-Z][\$0-9A-Za-z]\+\>+
+      \ +\<[_$]\?[A-Z][-_$A-Za-z0-9]*\>+
      \ contained
-      \ display ' .(s:highlight_close_tag ? 'transparent' : '')
+      \ ' .(s:highlight_close_tag ? 'transparent' : '')

 " <tag key={this.props.key}>
 "  ~~~
 exe 'syntax match jsxTagName
-      \ +\<[-:_\.\$0-9A-Za-z]\+\>+
+      \ +\<[-:._$A-Za-z0-9]\+\>+
      \ contained
      \ contains=jsxComponentName,jsxDot,jsxNamespace
      \ nextgroup=jsxAttrib
      \ skipempty
      \ skipwhite
-      \ display ' .(s:highlight_close_tag ? 'transparent' : '')
+      \ ' .(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
+syntax region jsxString start=+\z(["']\)+  skip=+\\\\\|\\\z1\|\\\n+  end=+\z1+ contained contains=@Spell

-let s:tags = get(g:, 'vim_jsx_pretty_template_tags', ['html', 'raw'])
+let s:tags = get(g:, 'vim_jsx_pretty_template_tags', ['html', 'jsx'])
 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
+  exe 'syntax match jsxRegion +\%(' . join(s:tags, '\|') . '\)\%(\_s*`\)\@=+ contains=jsTemplateStringTag,jsTaggedTemplate,javascriptTagRef skipwhite skipempty nextgroup=jsxTaggedRegion'
+
+  syntax region jsxTaggedRegion
+        \ matchgroup=jsxBackticks
+        \ start=+`+
+        \ end=+`+
        \ extend
        \ contained
-        \ containedin=jsTemplateString,javascriptTemplate,javaScriptStringT,typescriptStringB
-        \ contains=jsxElement'
+        \ contains=jsxElement,jsxEscapeJs
+        \ transparent

  syntax region jsxEscapeJs
+        \ matchgroup=jsxBraces
        \ start=+\${+
-        \ end=++
+        \ end=+}+
        \ extend
        \ contained
-        \ contains=jsTemplateExpression,javascriptTemplateSubstitution,javaScriptEmbed,typescriptInterpolation
+        \ contains=@jsExpression,jsSpreadExpression,@javascriptExpression,javascriptSpreadOp,@javaScriptEmbededExpr,@typescriptExpression,typescriptObjectSpread

  syntax region jsxOpenTag
        \ matchgroup=jsxOpenPunct
        \ start=+<\%(\${\)\@=+
        \ matchgroup=NONE
-        \ end=++
+        \ end=+}\@1<=+
        \ contained
        \ contains=jsxEscapeJs
-        \ nextgroup=jsxAttrib,jsxSpreadOperator
        \ skipwhite
        \ skipempty
+        \ nextgroup=jsxAttrib,jsxSpreadOperator

-  syntax keyword jsxAttribKeyword class contained display
+  syntax keyword jsxAttribKeyword class contained

-  syntax match jsxSpreadOperator +\.\.\.+ contained display nextgroup=jsxEscapeJs skipwhite
+  syntax match jsxSpreadOperator +\.\.\.+ contained nextgroup=jsxEscapeJs skipwhite

-  syntax match jsxCloseTag +<//>+ display
+  syntax match jsxCloseTag +<//>+ contained

-  syntax match jsxComment +<!--\_.\{-}-->+ display
+  syntax match jsxComment +<!--\_.\{-}-->+
 endif

 " Highlight the tag name
@@ -183,10 +192,14 @@ 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 jsxComment Comment
+
 highlight def link jsxDot Operator
 highlight def link jsxNamespace Operator
+highlight def link jsxEqual Operator
+highlight def link jsxSpreadOperator Operator
+highlight def link jsxBraces Special

 if s:highlight_close_tag
  highlight def link jsxCloseString Identifier
@@ -201,9 +214,6 @@ highlight def link jsxPunct jsxCloseString
 highlight def link jsxClosePunct jsxPunct
 highlight def link jsxCloseTag jsxCloseString

-highlight def link jsxComment Comment
-highlight def link jsxSpreadOperator Operator
-
 let s:vim_jsx_pretty_colorful_config = get(g:, 'vim_jsx_pretty_colorful_config', 0)

 if s:vim_jsx_pretty_colorful_config == 1
@@ -212,5 +222,4 @@ if s:vim_jsx_pretty_colorful_config == 1
  highlight def link jsFuncArgs Type
 endif

-
 endif