Add support jsx/tsx as attribute inside the <script> tag

README.md

@@ -20,7 +20,19 @@ Sublime Text Syntax highlighting for single-file [Vue.js](http://vuejs.org) comp
 
 ### Enabling JSX Highlighting
 
-The `<script>` block uses the syntax highlighting currently active for you normal `.js` files. To support JSX highlighting inside Vue files:
+The `<script>` block uses the syntax highlighting currently active for you normal `.js` files. To support JSX highlighting inside Vue files, include the lang attribute inside the `<script>` tag. 
+
+```vue
+<script lang="jsx">
+export default {
+  render () {
+    return <div>{ this.foo }</div>
+  }
+}
+</script>
+```
+
+If `lang="jsx"` doesn't work, you can try the alternative.
 
 1. Install and set [Babel javascript highlighting package](https://packagecontrol.io/packages/Babel), which supports JSX, as your default JS highlighting.
 

Vue Component.sublime-syntax

@@ -131,6 +131,48 @@ contexts:
     - include: script-lang-decider
 
   script-lang-decider:
+    - match: (?i)(?=jsx{{unquoted_attribute_break}}|\'jsx\'|"jsx")
+      set:
+        -   - meta_scope: meta.tag.script.begin.html
+            - match: '>'
+              scope: punctuation.definition.tag.end.html
+              set:
+                - match: '{{script_content_begin}}'
+                  embed_scope: source.jsx.embedded.html
+                  escape_captures:
+                    1: source.jsx.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.jsx.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.jsx
+                  escape: '{{script_content_end}}'
+            - include: script-common
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
+    - match: (?i)(?=tsx{{unquoted_attribute_break}}|\'tsx\'|"tsx")
+      set:
+        -   - meta_scope: meta.tag.script.begin.html
+            - match: '>'
+              scope: punctuation.definition.tag.end.html
+              set:
+                - match: '{{script_content_begin}}'
+                  embed_scope: source.tsx.embedded.html
+                  escape_captures:
+                    1: source.tsx.embedded.html
+                    2: comment.block.html punctuation.definition.comment.end.html
+                    3: source.tsx.embedded.html
+                    4: comment.block.html punctuation.definition.comment.end.html
+                  captures:
+                    1: comment.block.html punctuation.definition.comment.begin.html
+                  pop: 1
+                  embed: scope:source.tsx
+                  escape: '{{script_content_end}}'
+            - include: script-common
+        - tag-generic-attribute-meta
+        - tag-generic-attribute-value
     - match: (?i)(?=coffee{{unquoted_attribute_break}}|\'coffee\'|"coffee")
       set:
         -   - meta_scope: meta.tag.script.begin.html

Vue Component.sublime-syntax.yaml-macros

@@ -132,6 +132,8 @@ contexts:
     - include: script-lang-decider
 
   script-lang-decider:
+    - !script_language [ jsx, source.jsx ]
+    - !script_language [ tsx, source.tsx ]
     - !script_language [ coffee, source.coffee ]
     - !script_language [ livescript, source.livescript ]
     - !script_language [ ts, source.ts ]

samples/jsx.vue

@@ -1,6 +1,6 @@
 <!-- See JSX section in README -->
 
-<script>
+<script lang="jsx">
 export default {
   render () {
     return <div>{ this.foo }</div>