Skip to content

Commit d3322e4

Browse files
deathaxedeathaxe
committed
Remove Mustache from attribute values
Mustache text interpolation 1. is not supported within tag attribute values see: https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings 2. supports expressions only see: https://vuejs.org/guide/essentials/template-syntax.html#expressions-only Note, JavaScript provides an `expression` context, but embedding it causes `meta.interpolation` scope to be cleared, if mustache content is not a valid expression. Hence keeping `embed: scope:source.js` for now. A possible alternative context `expressions` requires ST4180+.
1 parent 5ee92d9 commit d3322e4

File tree

2 files changed

+109
-24
lines changed

2 files changed

+109
-24
lines changed

‎Vue Component.sublime-syntax‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -693,10 +693,6 @@ contexts:
693693
- meta_prepend: true
694694
- meta_include_prototype: false
695695

696-
tag-attribute-value-content:
697-
- meta_prepend: true
698-
- include: mustache-interpolations
699-
700696
tag-lang-attribute-meta:
701697
# required until ST4184 (PR #4061)
702698
- meta_include_prototype: false

‎tests/syntax_test_mustage.vue‎

Lines changed: 109 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
// SYNTAX TEST "Vue Component.sublime-syntax"
22

3+
<!--
4+
Text Interpolation
5+
6+
The most basic form of data binding is text interpolation
7+
using the "Mustache" syntax (double curly braces):
8+
9+
see: https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation
10+
-->
11+
312
<h1> {{ foo.text }} </h1>
413
// ^^^^^^^^^^^^^^ meta.interpolation.vue
514
// ^^ punctuation.section.interpolation.begin.html
@@ -12,31 +21,111 @@
1221
// ^^^^^^^^^^ source.js.embedded.vue
1322
// ^^ punctuation.section.interpolation.end.html
1423

24+
<!--
25+
Mustache tags may only contain expressions!
26+
27+
see: https://vuejs.org/guide/essentials/template-syntax.html#expressions-only
28+
-->
29+
30+
{{ number + 1 }}
31+
// ^^^^^^^^^^^^^^^^ meta.interpolation.vue
32+
// ^^ punctuation.section.interpolation.begin.html
33+
// ^^^^^^^^^^^^ source.js.embedded.vue
34+
// ^^^^^^ variable.other.readwrite.js
35+
// ^ keyword.operator.arithmetic.js
36+
// ^ meta.number.integer.decimal.js constant.numeric.value.js
37+
// ^^ punctuation.section.interpolation.end.html
38+
39+
{{ ok ? 'YES' : 'NO' }}
40+
// ^^^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue
41+
// ^^ punctuation.section.interpolation.begin.html
42+
// ^^^^^^^^^^^^^^^^^^^ source.js.embedded.vue
43+
// ^^ variable.other.readwrite.js
44+
// ^ keyword.operator.ternary.js
45+
// ^^^^^ meta.string.js string.quoted.single.js
46+
// ^ punctuation.definition.string.begin.js
47+
// ^ punctuation.definition.string.end.js
48+
// ^ keyword.operator.ternary.js
49+
// ^^^^ meta.string.js string.quoted.single.js
50+
// ^ punctuation.definition.string.begin.js
51+
// ^ punctuation.definition.string.end.js
52+
// ^^ punctuation.section.interpolation.end.html
53+
54+
{{ message.split('').reverse().join('') }}
55+
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue
56+
// ^^ punctuation.section.interpolation.begin.html
57+
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.js.embedded.vue
58+
// ^^^^^^^ variable.other.readwrite.js
59+
// ^ punctuation.accessor.js
60+
// ^^^^^ meta.function-call variable.function.js
61+
// ^^^^ meta.function-call meta.group.js
62+
// ^ punctuation.section.group.begin.js
63+
// ^^ meta.string.js string.quoted.single.js
64+
// ^ punctuation.definition.string.begin.js
65+
// ^ punctuation.definition.string.end.js
66+
// ^ punctuation.section.group.end.js
67+
// ^ punctuation.accessor.js
68+
// ^^^^^^^ meta.function-call variable.function.js
69+
// ^^ meta.function-call meta.group.js
70+
// ^ punctuation.section.group.begin.js
71+
// ^ punctuation.section.group.end.js
72+
// ^ punctuation.accessor.js
73+
// ^^^^ meta.function-call variable.function.js
74+
// ^^^^ meta.function-call meta.group.js
75+
// ^ punctuation.section.group.begin.js
76+
// ^^ meta.string.js string.quoted.single.js
77+
// ^ punctuation.definition.string.begin.js
78+
// ^ punctuation.definition.string.end.js
79+
// ^ punctuation.section.group.end.js
80+
// ^^ punctuation.section.interpolation.end.html
81+
82+
<div :id="`list-${id}`"></div>
83+
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.tag
84+
// ^^^^^^^^^^^^^ meta.string.html
85+
// ^ string.quoted.double.html punctuation.definition.string.begin.html - meta.interpolation
86+
// ^^^^^^ meta.interpolation.vue source.js.embedded.vue meta.string string
87+
// ^^^^^ meta.interpolation.vue source.js.embedded.vue meta.string meta.interpolation.js
88+
// ^ meta.interpolation.vue source.js.embedded.vue meta.string string
89+
// ^ string.quoted.double.html punctuation.definition.string.end.html - meta.interpolation
90+
91+
<!-- this is a statement, not an expression: -->
92+
{{ var a = 1 }}
93+
// ^^^^^^^^^^^^^^^ meta.interpolation.vue
94+
// ^^ punctuation.section.interpolation.begin.html
95+
// ^^^^^^^^^^^ source.js.embedded.vue
96+
// ^^ punctuation.section.interpolation.end.html
97+
98+
<!-- flow control won't work either, use ternary expressions -->
99+
{{ if (ok) { return message } }}
100+
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ meta.interpolation.vue
101+
// ^^ punctuation.section.interpolation.begin.html
102+
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ source.js.embedded.vue
103+
// ^^ punctuation.section.interpolation.end.html
104+
105+
106+
<!--
107+
Attribute Bindings
108+
109+
Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:
110+
111+
see: https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings
112+
-->
113+
15114
<p attrib="{{ foo.value }}" >
16-
// ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
17-
// ^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html meta.interpolation.vue
18-
// ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
19-
// ^ string.quoted.double.html punctuation.definition.string.begin.html
20-
// ^^ punctuation.section.interpolation.begin.html - source.js
21-
// ^^^^^^^^^^^ source.js.embedded.vue
22-
// ^^ punctuation.section.interpolation.end.html - source.js
23-
// ^ string.quoted.double.html punctuation.definition.string.end.html
115+
// ^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
24116

25117
<p attrib='{{ foo.value }}' >
26-
// ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
27-
// ^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html meta.interpolation.vue
28-
// ^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
29-
// ^ string.quoted.single.html punctuation.definition.string.begin.html
30-
// ^^ punctuation.section.interpolation.begin.html - source.js
31-
// ^^^^^^^^^^^ source.js.embedded.vue
32-
// ^^ punctuation.section.interpolation.end.html - source.js
33-
// ^ string.quoted.single.html punctuation.definition.string.end.html
118+
// ^^^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html - meta.interpolation
34119

35120
<p attrib={{ foo.value }} >
36-
// ^^^^^^^^^^^^^^^ meta.tag meta.attribute-with-value.html meta.string.html meta.interpolation.vue
37-
// ^^ punctuation.section.interpolation.begin.html - source.js
38-
// ^^^^^^^^^^^ source.js.embedded.vue
39-
// ^^ punctuation.section.interpolation.end.html - source.js
121+
// ^^ meta.tag meta.attribute-with-value.html meta.string.html string.unquoted.html - meta.interpolation
122+
// ^^^^^^^^^ meta.attribute-with-value.html entity.other.attribute-name.html
123+
// ^^ meta.attribute-with-value.html entity.other.attribute-name.html
124+
125+
126+
<!--
127+
Vue Directives
128+
-->
40129

41130
<p v-attrib="{'key': 'value'}">
42131
// ^^^ meta.tag - meta.attribute-with-value

0 commit comments

Comments
 (0)