Add support for "dynamic arguments"

FichteFoll · skyronic · commit 6a7241ce5c94 · 2023-02-01T15:13:55.000-05:00
diff --git a/Vue Component.sublime-syntax b/Vue Component.sublime-syntax
@@ -614,3 +614,20 @@ contexts:
         0: meta.attribute-with-value.directive.html meta.string.html string.quoted.single.html
           punctuation.definition.string.end.html
     - include: else-pop
+
+  tag-generic-attribute-name:
+    - meta_prepend: true
+    # https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments
+    - match: (?=\[)
+      push: vue-dynamic-attribute-name
+
+  vue-dynamic-attribute-name:
+    - clear_scopes: 1  # clear `entity.other.attribute-name`
+    - match: \[
+      scope: punctuation.section.interpolation.begin.vue
+      embed: scope:source.js#expression-statement
+      embed_scope: meta.interpolation.vue source.js.embedded.vue
+      escape: \]
+      escape_captures:
+        0: punctuation.definition.string.end.html
+    - include: else-pop
diff --git a/Vue Component.sublime-syntax.yaml-macros b/Vue Component.sublime-syntax.yaml-macros
@@ -387,3 +387,20 @@ contexts:
           meta.string.html string.quoted.single.html
           punctuation.definition.string.end.html
     - include: else-pop
+
+  tag-generic-attribute-name:
+    - meta_prepend: true
+    # https://vuejs.org/guide/essentials/template-syntax.html#dynamic-arguments
+    - match: (?=\[)
+      push: vue-dynamic-attribute-name
+
+  vue-dynamic-attribute-name:
+    - clear_scopes: 1  # clear `entity.other.attribute-name`
+    - match: \[
+      scope: punctuation.section.interpolation.begin.vue
+      embed: scope:source.js#expression-statement
+      embed_scope: meta.interpolation.vue source.js.embedded.vue
+      escape: \]
+      escape_captures:
+        0: punctuation.definition.string.end.html
+    - include: else-pop
diff --git a/tests/syntax_tests_mustage.vue b/tests/syntax_tests_mustage.vue
@@ -125,4 +125,22 @@
 //                          ^ meta.tag - meta.attribute-with-value
 //                           ^ - meta.tag
 
+    <template #[`content-${variable}`]>
+//            ^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html
+//            ^ entity.other.attribute-name.html
+//             ^ punctuation.section.interpolation.begin.vue
+//              ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue source.js.embedded.vue - entity.other.attribute-name.html
+//                                   ^ punctuation.definition.string.end.html
+//                                    ^ meta.tag - meta.attribute-with-value
+//                                     ^ - meta.tag
+
+    <template v-slot:[`content-${variable}`]>
+//            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.directive.html
+//            ^^^^^^^ entity.other.attribute-name.html
+//                   ^ punctuation.section.interpolation.begin.vue
+//                    ^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue source.js.embedded.vue - entity.other.attribute-name.html
+//                                         ^ punctuation.definition.string.end.html
+//                                          ^ meta.tag - meta.attribute-with-value
+//                                           ^ - meta.tag
+
 </html>
