Skip to content

Commit 370bb1c

Browse files
deathaxeprincemaple
deathaxe
authored and
princemaple
committed
Add support for template strings
This commit adds basic support for untagged and tagged template strings. Regular expressions are highlighted using ST's RegExp (Basic) syntax as a dedicated JavaScript specific regexp syntax is far inferior, especially with regards to supporting interpolation.
1 parent 7909b0c commit 370bb1c

File tree

3 files changed

+183
-0
lines changed

3 files changed

+183
-0
lines changed

‎Embeddings/RegExp (for Ngx Template Strings).sublime-syntax

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
%YAML 1.2
2+
---
3+
scope: source.regexp.embedded.ngx.template-string
4+
version: 2
5+
hidden: true
6+
7+
extends: Packages/Regular Expressions/RegExp (Basic).sublime-syntax
8+
9+
contexts:
10+
11+
prototype:
12+
- match: (?=/?`)
13+
pop: 1
14+
- include: NgxHTML.sublime-syntax#ng-template-text-interpolations

‎NgxHTML.sublime-syntax

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,7 @@ contexts:
426426
- include: ng-constants
427427
- include: ng-numbers
428428
- include: ng-strings
429+
- include: ng-templates
429430
- include: ng-variables
430431

431432
###[ ANGULAR ARRAYS ]##########################################################
@@ -669,6 +670,92 @@ contexts:
669670
- match: \\.
670671
scope: constant.character.escape.ngx
671672

673+
ng-templates:
674+
# tagged template strings
675+
- match: ({{ident_name}})(\`)
676+
captures:
677+
1: variable.function.tagged-template.ngx
678+
2: meta.string.template.ngx string.quoted.other.ngx punctuation.definition.string.begin.ngx
679+
push: ng-tagged-template-plain-body
680+
# untagged plain or regexp template strings
681+
- match: \`
682+
scope: string.quoted.other.ngx punctuation.definition.string.begin.ngx
683+
branch_point: template-string
684+
branch:
685+
- ng-template-pattern-begin
686+
- ng-template-plain-body
687+
688+
ng-tagged-template-plain-body:
689+
- meta_content_scope: meta.string.template.ngx string.quoted.other.ngx
690+
- include: ng-tagged-template-plain-end
691+
- include: ng-template-string-interpolations
692+
- include: ng-string-content
693+
694+
ng-tagged-template-plain-end:
695+
- match: \`
696+
scope: meta.string.template.ngx string.quoted.other.ngx punctuation.definition.string.end.ngx
697+
pop: 1
698+
- match: \n
699+
scope: invalid.illegal.newline.ngx
700+
pop: 1
701+
702+
ng-template-pattern-begin:
703+
- meta_scope: meta.string.template.regexp.ngx
704+
- match: /
705+
scope: punctuation.definition.pattern.begin.ngx
706+
push: ng-template-pattern-body
707+
- match: ''
708+
fail: template-string
709+
710+
ng-template-pattern-body:
711+
- match: (/)(\`)
712+
captures:
713+
1: punctuation.definition.pattern.end.ngx
714+
2: string.quoted.other.ngx punctuation.definition.string.end.ngx
715+
pop: 2
716+
- match: (?=\`)
717+
fail: template-string
718+
- match: \n
719+
scope: invalid.illegal.newline.ngx
720+
pop: 2
721+
- include: scope:source.regexp.embedded.ngx.template-string
722+
apply_prototype: true
723+
724+
ng-template-plain-body:
725+
- meta_scope: meta.string.template.ngx
726+
- meta_content_scope: string.quoted.other.ngx
727+
- match: \`
728+
scope: string.quoted.other.ngx punctuation.definition.string.end.ngx
729+
pop: 1
730+
- match: \n
731+
scope: invalid.illegal.newline.ngx
732+
pop: 1
733+
- include: ng-template-string-interpolations
734+
- include: ng-string-content
735+
736+
ng-template-string-interpolations:
737+
- match: \$\{
738+
scope: punctuation.section.interpolation.begin.ngx
739+
push: ng-template-string-interpolation-body
740+
741+
ng-template-string-interpolation-body:
742+
- clear_scopes: 1
743+
- meta_scope: meta.interpolation.ngx
744+
- include: ng-template-text-interpolation-body
745+
746+
ng-template-text-interpolations:
747+
# used by embedded syntaxes (e.g.: CSS or HTML)
748+
- match: \$\{
749+
scope: punctuation.section.interpolation.begin.ngx
750+
push: ng-template-text-interpolation-body
751+
752+
ng-template-text-interpolation-body:
753+
- meta_scope: meta.interpolation.ngx
754+
- match: \}
755+
scope: punctuation.section.interpolation.end.ngx
756+
pop: 1
757+
- include: ng-expressions
758+
672759
###[ ANGULAR VARIABLES ]#######################################################
673760

674761
ng-variables:

‎tests/syntax_test_scopes.component.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -513,6 +513,88 @@
513513
<!-- ^ punctuation.definition.string.begin.ngx -->
514514
<!-- ^ punctuation.definition.string.end.ngx -->
515515

516+
<!-- template strings -->
517+
{{ `Hello ${name + `template ${var}`}` }}
518+
<!-- ^^^^^^^ meta.string.template.ngx - meta.interpolation -->
519+
<!-- ^^^^^^^^^ meta.string.template.ngx meta.interpolation.ngx - meta.string meta.string -->
520+
<!-- ^^^^^^^^^^ meta.string.template.ngx meta.interpolation.ngx meta.string.template.ngx - meta.interpolation meta.interpolation -->
521+
<!-- ^^^^^^ meta.string.template.ngx meta.interpolation.ngx meta.string.template.ngx meta.interpolation.ngx -->
522+
<!-- ^ meta.string.template.ngx meta.interpolation.ngx meta.string.template.ngx - meta.interpolation meta.interpolation -->
523+
<!-- ^ meta.string.template.ngx meta.interpolation.ngx - meta.string meta.string -->
524+
<!-- ^ meta.string.template.ngx - meta.interpolation -->
525+
<!-- ^^^^^^^ string.quoted.other.ngx -->
526+
<!-- ^^^^^^^^^ - string -->
527+
<!-- ^ punctuation.definition.string.begin.ngx -->
528+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
529+
<!-- ^^^^ variable.other.readwrite.ngx -->
530+
<!-- ^ keyword.operator.arithmetic.ngx -->
531+
<!-- ^^^^^^^^^^ string.quoted.other.ngx -->
532+
<!-- ^ punctuation.definition.string.begin.ngx -->
533+
<!-- ^^^^^^ - string -->
534+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
535+
<!-- ^^^ variable.other.readwrite.ngx -->
536+
<!-- ^ punctuation.section.interpolation.end.ngx -->
537+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
538+
<!-- ^ punctuation.section.interpolation.end.ngx - string -->
539+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
540+
541+
<!-- tagged template strings -->
542+
{{ tag`Text \`${var}\`` }}
543+
<!-- ^^^ variable.function.tagged-template.ngx - string -->
544+
<!-- ^^^^^^^^^^^^^^^^^ meta.string.template.ngx -->
545+
<!-- ^^^^^^^^ string.quoted.other.ngx -->
546+
<!-- ^ punctuation.definition.string.begin.ngx -->
547+
<!-- ^^ constant.character.escape.ngx -->
548+
<!-- ^^^^^^ meta.interpolation.ngx - string -->
549+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
550+
<!-- ^^^ variable.other.readwrite.ngx -->
551+
<!-- ^ punctuation.section.interpolation.end.ngx -->
552+
<!-- ^^^ string.quoted.other.ngx -->
553+
<!-- ^^ constant.character.escape.ngx -->
554+
<!-- ^ punctuation.definition.string.end.ngx -->
555+
556+
<!-- regular expressions -->
557+
{{ `/^[a-z]${var + `nest\`ed ${ `/\w+/` + pattern}`}\d+/` }}
558+
<!-- ^^^^^^^^ meta.string.template.regexp.ngx - meta.interpolation -->
559+
<!-- ^^^^^^^^ meta.string.template.regexp.ngx meta.interpolation.ngx - meta.string meta.strin -->
560+
<!-- ^^^^^^^^^^ meta.string.template.regexp.ngx meta.interpolation.ngx meta.string.template.ngx - meta.interpolation meta.interpolation -->
561+
<!-- ^^^ meta.string.template.regexp.ngx meta.interpolation.ngx meta.string.template.ngx meta.interpolation.ngx -->
562+
<!-- ^^^^^^^ meta.string.template.regexp.ngx meta.interpolation.ngx meta.string.template.ngx meta.interpolation.ngx meta.string.template.regexp.ngx -->
563+
<!-- ^^^^^^^^^^^ meta.string.template.regexp.ngx meta.interpolation.ngx meta.string.template.ngx meta.interpolation.ngx -->
564+
<!-- ^ meta.string.template.regexp.ngx meta.interpolation.ngx meta.string.template.ngx - meta.interpolation meta.interpolation -->
565+
<!-- ^ meta.string.template.regexp.ngx meta.interpolation.ngx - meta.string meta.strin -->
566+
<!-- ^^^^^ meta.string.template.regexp.ngx - meta.interpolation -->
567+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.begin.ngx -->
568+
<!-- ^ punctuation.definition.pattern.begin.ngx -->
569+
<!-- ^ keyword.control.anchor.regexp -->
570+
<!-- ^^^^^ meta.set.regexp -->
571+
<!-- ^ punctuation.definition.set.begin.regexp -->
572+
<!-- ^^^ constant.other.range.regexp -->
573+
<!-- ^ punctuation.separator.sequence.regexp -->
574+
<!-- ^ punctuation.definition.set.end.regexp -->
575+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
576+
<!-- ^^^ variable.other.readwrite.ngx -->
577+
<!-- ^ keyword.operator.arithmetic.ngx -->
578+
<!-- ^^^^^^^^^^ string.quoted.other.ngx -->
579+
<!-- ^ punctuation.definition.string.begin.ngx -->
580+
<!-- ^^ constant.character.escape.ngx -->
581+
<!-- ^^ punctuation.section.interpolation.begin.ngx -->
582+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.begin.ngx -->
583+
<!-- ^ punctuation.definition.pattern.begin.ngx -->
584+
<!-- ^^ keyword.control.character-class.regexp -->
585+
<!-- ^ keyword.operator.quantifier.regexp -->
586+
<!-- ^ punctuation.definition.pattern.end.ngx -->
587+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
588+
<!-- ^ keyword.operator.arithmetic.ngx -->
589+
<!-- ^^^^^^^ variable.other.readwrite.ngx -->
590+
<!-- ^ punctuation.section.interpolation.end.ngx -->
591+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
592+
<!-- ^ punctuation.section.interpolation.end.ngx -->
593+
<!-- ^^ keyword.control.character-class.regexp -->
594+
<!-- ^ keyword.operator.quantifier.regexp -->
595+
<!-- ^ punctuation.definition.pattern.end.ngx -->
596+
<!-- ^ string.quoted.other.ngx punctuation.definition.string.end.ngx -->
597+
516598
<!-- escaped chars -->
517599
{{ "\xAF \u2AFF \n \"" }}
518600
<!--^^^^^^^^^^^^^^^^^^^^^^^ meta.embedded.expression.ngx.html -->

0 commit comments

Comments
 (0)