From 207d53b8653b284ea5bfc5457daad04dc4f928ae Mon Sep 17 00:00:00 2001
From: "Mr.Z" <zrd0921@qq.com>
Date: Thu, 31 Aug 2023 17:59:16 +0800
Subject: [PATCH 1/2] Add support jsx/tsx as attribute inside the `<script>`
 tag

---
 README.md                                | 11 +++++++
 Vue Component.sublime-syntax             | 42 ++++++++++++++++++++++++
 Vue Component.sublime-syntax.yaml-macros |  2 ++
 samples/jsx.vue                          |  2 +-
 4 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index efde56a..fc39cfe 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,17 @@ The `<script>` block uses the syntax highlighting currently active for you norma
 
 2. Explicitly disable Sublime's default `JavaScript` package. This allows the Babel package to be applied the embedded `<script>` in `*.vue` files. You may need to restart Sublime for this to take effect.
 
+you can also include the lang attribute inside the `<script>` tag. 
+```vue
+<script lang="jsx">
+export default {
+  render () {
+    return <div>{ this.foo }</div>
+  }
+}
+</script>
+```
+
 ### Development
 
 - The development of this syntax relies on the [YAML-Macros](https://github.com/Thom1729/YAML-Macros) package. You can install it from Package Control.
diff --git a/Vue Component.sublime-syntax b/Vue Component.sublime-syntax
index abd5245..cfc00b7 100644
--- a/Vue Component.sublime-syntax	
+++ b/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
diff --git a/Vue Component.sublime-syntax.yaml-macros b/Vue Component.sublime-syntax.yaml-macros
index 6daadfb..60de705 100644
--- a/Vue Component.sublime-syntax.yaml-macros	
+++ b/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 ]
diff --git a/samples/jsx.vue b/samples/jsx.vue
index 6a17d73..d7ad626 100644
--- a/samples/jsx.vue
+++ b/samples/jsx.vue
@@ -1,6 +1,6 @@
 <!-- See JSX section in README -->
 
-<script>
+<script lang="jsx">
 export default {
   render () {
     return <div>{ this.foo }</div>

From bc1aeb8c77816a0666ab8ca5bde46fdf80d8fe94 Mon Sep 17 00:00:00 2001
From: "Mr.Z" <zrd0921@qq.com>
Date: Mon, 30 Oct 2023 14:41:47 +0800
Subject: [PATCH 2/2] Update README.md

---
 README.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index fc39cfe..c8e19fd 100644
--- a/README.md
+++ b/README.md
@@ -20,13 +20,8 @@ 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. 
 
-1. Install and set [Babel javascript highlighting package](https://packagecontrol.io/packages/Babel), which supports JSX, as your default JS highlighting.
-
-2. Explicitly disable Sublime's default `JavaScript` package. This allows the Babel package to be applied the embedded `<script>` in `*.vue` files. You may need to restart Sublime for this to take effect.
-
-you can also include the lang attribute inside the `<script>` tag. 
 ```vue
 <script lang="jsx">
 export default {
@@ -37,6 +32,12 @@ export default {
 </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.
+
+2. Explicitly disable Sublime's default `JavaScript` package. This allows the Babel package to be applied the embedded `<script>` in `*.vue` files. You may need to restart Sublime for this to take effect.
+
 ### Development
 
 - The development of this syntax relies on the [YAML-Macros](https://github.com/Thom1729/YAML-Macros) package. You can install it from Package Control.