Merge pull request #71 from bathos/html-recovery-tweaks

better handling of interpolated spans in html (addresses #70)

Author: blake-regalia

nested/build/base-packages/HTML/HTML.sublime-syntax

@@ -203,6 +203,15 @@ contexts:
           scope: punctuation.definition.tag.end.html
           pop: true
         - include: tag-attributes
+    - match: '(</?)(?=\${)'
+      captures:
+        '1': punctuation.definition.tag.begin.html
+      push:
+        - meta_scope: meta.tag.other.html
+        - match: '(?: ?/)?>'
+          scope: punctuation.definition.tag.end.html
+          pop: true
+        - include: tag-attributes
     - include: entities
     - match: <>
       scope: invalid.illegal.incomplete.html
@@ -259,6 +268,9 @@ contexts:
       scope: meta.attribute-with-value.html entity.other.attribute-name.html
       set:
         - meta_content_scope: meta.tag.style.begin.html meta.attribute-with-value.html
+        - match: '=(?=\$\{)'
+          scope: punctuation.separator.key-value.html
+          pop: true
         - match: =
           scope: punctuation.separator.key-value.html
           set:
@@ -331,6 +343,9 @@ contexts:
       scope: meta.attribute-with-value.html entity.other.attribute-name.html
       set:
         - meta_content_scope: meta.tag.script.begin.html meta.attribute-with-value.html
+        - match: '=(?=\$\{)'
+          scope: punctuation.separator.key-value.html
+          pop: true
         - match: =
           scope: punctuation.separator.key-value.html
           set:
@@ -399,6 +414,9 @@ contexts:
     - meta_scope: meta.attribute-with-value.html
     - include: immediately-pop
   tag-generic-attribute-equals:
+    - match: '=(?=\$\{)'
+      scope: punctuation.separator.key-value.html
+      pop: true
     - match: =
       scope: punctuation.separator.key-value.html
       set: tag-generic-attribute-value
@@ -435,6 +453,9 @@ contexts:
     - meta_scope: meta.attribute-with-value.class.html
     - include: immediately-pop
   tag-class-attribute-equals:
+    - match: '=(?=\$\{)'
+      scope: punctuation.separator.key-value.html
+      pop: true
     - match: =
       scope: punctuation.separator.key-value.html
       set: tag-class-attribute-value
@@ -473,6 +494,9 @@ contexts:
     - meta_scope: meta.attribute-with-value.id.html
     - include: immediately-pop
   tag-id-attribute-equals:
+    - match: '=(?=\$\{)'
+      scope: punctuation.separator.key-value.html
+      pop: true
     - match: =
       scope: punctuation.separator.key-value.html
       set: tag-id-attribute-value
@@ -511,6 +535,9 @@ contexts:
     - meta_scope: meta.attribute-with-value.style.html
     - include: immediately-pop
   tag-style-attribute-equals:
+    - match: '=(?=\$\{)'
+      scope: punctuation.separator.key-value.html
+      pop: true
     - match: =
       scope: punctuation.separator.key-value.html
       set: tag-style-attribute-value
@@ -553,6 +580,9 @@ contexts:
     - meta_scope: meta.attribute-with-value.event.html
     - include: immediately-pop
   tag-event-attribute-equals:
+    - match: '=(?=\$\{)'
+      scope: punctuation.separator.key-value.html
+      pop: true
     - match: =
       scope: punctuation.separator.key-value.html
       set: tag-event-attribute-value

nested/src/syntax.js

@@ -2,6 +2,22 @@ const fs = require('fs');
 const yaml = require('js-yaml');
 const jp = require('jsonpath');
 
+// -- rule for escaping interpolation element --
+const interp_escape_lookahead = () => ({
+	// The first match here captures cases like this in ES tagged templates:
+	//
+	//   <foo bar=${expression} baz=${expression}>
+	//
+	// If we did not treat this as a special case, ‘baz=’ would end up being seen
+	// as an unquoted attribute value.
+	//
+	// Because there are various places where = is matched with special handling
+	// for well-known attributes, this repeats a few times elsewhere.
+	match: String.raw /* syntax: sublime-syntax.regex */ `=(?=\$\{)`,
+	scope: 'punctuation.separator.key-value.html',
+	pop: true,
+});
+
 // transforms for select syntaxes
 const h_syntax_transforms = {
 	// the default markdown syntax embeds LOTS of contexts recursively.
@@ -19,6 +35,59 @@ const h_syntax_transforms = {
 		},
 	},
 
+	'text.html.basic': {
+		'$.variables': (h_vars) => {
+			h_vars.unquoted_attribute_value = String.raw /* syntax: sublime-syntax.regexp */ `(?:[^\s<>/''"]|/(?!>))+`;
+		},
+
+		'$.contexts["style-type-attribute"][0].set': (a_rules) => {
+			a_rules.splice(1, 0, interp_escape_lookahead());
+		},
+
+		'$.contexts["script-type-attribute"][0].set': (a_rules) => {
+			a_rules.splice(1, 0, interp_escape_lookahead());
+		},
+
+		'$.contexts': (h_contexts) => {
+			// each context
+			for(let [si_context, a_rules] of Object.entries(h_contexts)) {
+				// an attribute equals context
+				if(si_context.endsWith('-attribute-equals')) {
+					a_rules.unshift(interp_escape_lookahead());
+				}
+			}
+		},
+
+		'$.contexts.main': (a_rules) => {
+			a_rules.splice(-2, 0, {
+				// Special case for handling ES tagged template where interpolation occurs in
+				// tag name position:
+
+				// <${expression} attr=val>
+
+				// If we did not include this case, the ‘<’ would be scoped as ordinary
+				// chardata.
+				match: String.raw /* syntax: sublime-syntax.regexp */ `(</?)(?=\$\{)`,
+				captures: {
+					1: 'punctuation.definition.tag.begin.html',
+				},
+				push: [
+					{
+						meta_scope: 'meta.tag.other.html',
+					},
+					{
+						match: `(?: ?/)?>`,
+						scope: 'punctuation.definition.tag.end.html',
+						pop: true,
+					},
+					{
+						include: 'tag-attributes',
+					},
+				],
+			});
+		},
+	},
+
 	// makes it nice and easy to code custom syntax injections
 	'source.yaml.sublime.syntax': {
 		'$.contexts.context_definition': (a_rules) => {