Merge pull request #88 from jsit/ember-angle-brackets

Add Ember angle bracket syntax

Author: jsit

example.mustache

@@ -130,6 +130,20 @@
       {{/if}}
       <!-- end indentation tests -->
 
+      <AngleBracketComponent
+        @mustache={{@bla}}
+        @number=123
+        data-test-id="test"
+        class="my-class" as |test|>
+        Some Text
+        <div>{{test.someValue}}</div>
+        <test.component teste="asdfads"></test.component>
+      </AngleBraketComponent>
+
+      <HelloAngleBrackets @prop={{test}} />
+
+      <MyInput type="text" oninput={{action (mut fooBar) value="target.value"}} />
+
     </div>
 
   </body>

syntax/mustache.vim

@@ -2,8 +2,8 @@
 " Language:	Mustache, Handlebars
 " Maintainer:	Juvenn Woo <[email protected]>
 " Screenshot:   http://imgur.com/6F408
-" Version:	5
-" Last Change:  Nov 23rd 2018
+" Version:	6
+" Last Change:  Jul 16 2019
 " Remark:
 "   It lexically hilights embedded mustaches (exclusively) in html file.
 "   While it was written for Ruby-based Mustache template system, it should
@@ -41,21 +41,34 @@ endif
 
 syntax match mustacheError '}}}\?'
 syntax match mustacheInsideError '{{[{$#<>=!\/]\?'
-syntax region mustacheInside start=/{{[^!][$#^/]\?/ end=/}}}\?/ keepend containedin=TOP,@htmlMustacheContainer
-syntax match mustacheOperators '=\|\.\|/' contained containedin=mustacheInside,mustacheParam
-syntax region mustacheHtmlValue start=/={{[^!][$#^/]\?/rs=s+1,hs=s+1 end=/}}/ oneline keepend contained containedin=htmlTag contains=mustacheInside
-syntax region mustachePartial start=/{{[<>]/lc=2 end=/}}/me=e-2 contained containedin=mustacheInside,@htmlMustacheContainer
-syntax region mustacheMarkerSet start=/{{=/lc=2 end=/=}}/me=e-2 contained containedin=mustacheInside,@htmlMustacheContainer
-syntax match mustacheHandlebars '{{\|}}' contained containedin=mustacheInside,@htmlMustacheContainer
-syntax match mustacheUnescape '{{{\|}}}' contained containedin=mustacheInside,@htmlMustacheContainer
-syntax match mustacheConditionals '\([/#]\?if\|unless\|else\)' contained containedin=mustacheInside
-syntax match mustacheHelpers '[/#]\?\(with\|link\-to\|each\(\-in\)\?\)' contained containedin=mustacheInside
-syntax match mustacheHelpers 'else \(if\|unless\|with\|link\-to\|each\(\-in\)\?\)' contained containedin=mustacheInside
-syntax match mustacheParam /[a-z@_-]\+=/he=e-1 contained containedin=mustacheInside
-syntax region mustacheComment      start=/{{!/rs=s+2   skip=/{{.\{-}}}/ end=/}}/re=e-2   contains=Todo contained containedin=TOP,mustacheInside,@htmlMustacheContainer
-syntax region mustacheBlockComment start=/{{!--/rs=s+2 skip=/{{.\{-}}}/ end=/--}}/re=e-2 contains=Todo contained extend containedin=TOP,mustacheInside,@htmlMustacheContainer
-syntax region mustacheQString start=/'/ skip=/\\'/ end=/'/ contained containedin=mustacheInside
-syntax region mustacheDQString start=/"/ skip=/\\"/ end=/"/ contained containedin=mustacheInside
+
+" Ember angle bracket syntax syntax starts with a capital letter:
+" https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md
+syntax case match
+syntax region mustacheAngleComponent start=/<\/\?[[:upper:]]/ end=/>/ keepend containedin=TOP,@htmlMustacheContainer
+syntax case ignore
+syntax match mustacheAngleBrackets '</\?\|/\?>' contained containedin=mustacheAngleComponent
+syntax match mustacheAngleComponentName '</[[:alnum:]]\+'hs=s+2 contained containedin=mustacheAngleBrackets
+syntax match mustacheAngleComponentName '<[[:alnum:]]\+'hs=s+1 contained containedin=mustacheAngleBrackets
+
+syntax region mustacheHbsComponent start=/{{[^!][$#^/]\?/ end=/}}}\?/ keepend containedin=TOP,@htmlMustacheContainer
+
+syntax cluster mustacheInside add=mustacheHbsComponent,mustacheAngleComponent
+
+syntax match mustacheOperators '=\|\.\|/^>' contained containedin=@mustacheInside,mustacheParam
+syntax region mustacheHtmlValue start=/={{[^!][$#^/]\?/rs=s+1,hs=s+1 end=/}}/ oneline keepend contained containedin=htmlTag contains=@mustacheInside
+syntax region mustachePartial start=/{{[<>]/lc=2 end=/}}/me=e-2 contained containedin=@mustacheInside,@htmlMustacheContainer
+syntax region mustacheMarkerSet start=/{{=/lc=2 end=/=}}/me=e-2 contained containedin=@mustacheInside,@htmlMustacheContainer
+syntax match mustacheHandlebars '{{\|}}' contained containedin=@mustacheInside
+syntax match mustacheUnescape '{{{\|}}}' contained containedin=@mustacheInside
+syntax match mustacheConditionals '\([/#]\?if\|unless\|else\)' contained containedin=@mustacheInside
+syntax match mustacheHelpers '[/#]\?\(with\|link\-to\|each\(\-in\)\?\)' contained containedin=@mustacheInside
+syntax match mustacheHelpers 'else \(if\|unless\|with\|link\-to\|each\(\-in\)\?\)' contained containedin=@mustacheInside
+syntax match mustacheParam /[a-z@_-]\+=/he=e-1 contained containedin=@mustacheInside
+syntax region mustacheComment      start=/{{!/rs=s+2   skip=/{{.\{-}}}/ end=/}}/re=e-2   contains=Todo contained containedin=TOP,@mustacheInside,@htmlMustacheContainer
+syntax region mustacheBlockComment start=/{{!--/rs=s+2 skip=/{{.\{-}}}/ end=/--}}/re=e-2 contains=Todo contained extend containedin=TOP,@mustacheInside,@htmlMustacheContainer
+syntax region mustacheQString start=/'/ skip=/\\'/ end=/'/ contained containedin=@mustacheInside
+syntax region mustacheDQString start=/"/ skip=/\\"/ end=/"/ contained containedin=@mustacheInside
 
 " Clustering
 syntax cluster htmlMustacheContainer add=htmlHead,htmlTitle,htmlString,htmlH1,htmlH2,htmlH3,htmlH4,htmlH5,htmlH6,htmlLink,htmlBold,htmlUnderline,htmlItalic,htmlValue
@@ -69,13 +82,15 @@ HtmlHiLink mustacheVariableUnescape Number
 HtmlHiLink mustachePartial Number
 HtmlHiLink mustacheMarkerSet Number
 HtmlHiLink mustacheParam htmlArg
+HtmlHiLink mustacheAngleComponentName htmlTag
 
 HtmlHiLink mustacheComment Comment
 HtmlHiLink mustacheBlockComment Comment
 HtmlHiLink mustacheError Error
 HtmlHiLink mustacheInsideError Error
 
 HtmlHiLink mustacheHandlebars Special
+HtmlHiLink mustacheAngleBrackets htmlTagName
 HtmlHiLink mustacheUnescape Identifier
 HtmlHiLink mustacheOperators Operator
 HtmlHiLink mustacheConditionals Conditional