[feat] improve parser errors (#6612)

Author: tanhauhau

src/compiler/parse/errors.ts

@@ -157,6 +157,10 @@ export default {
 code: 'missing-component-definition',
 message: '<svelte:component> must have a \'this\' attribute'
 },
+missing_attribute_value: {
+code: 'missing-attribute-value',
+message: 'Expected value for the attribute'
+},
 unclosed_script: {
 code: 'unclosed-script',
 message: '<script> must have a closing tag'
@@ -169,6 +173,10 @@ export default {
 code: 'unclosed-comment',
 message: 'comment was left open, expected -->'
 },
+unclosed_attribute_value: (token: string) => ({
+code: 'unclosed-attribute-value',
+message: `Expected to close the attribute value with ${token}`
+}),
 unexpected_block_close: {
 code: 'unexpected-block-close',
 message: 'Unexpected block closing tag'

src/compiler/parse/state/tag.ts

@@ -438,7 +438,25 @@ function read_attribute_value(parser: Parser) {
 /(\/>|[\s"'=<>`])/
 );
 
-const value = read_sequence(parser, () => !!parser.match_regex(regex));
+let value;
+try {
+value = read_sequence(parser, () => !!parser.match_regex(regex));
+} catch (error) {
+if (error.code === 'parse-error') {
+// if the attribute value didn't close + self-closing tag
+// eg: `<Component test={{a:1} />`
+// acorn may throw a `Unterminated regular expression` because of `/>`
+if (parser.template.slice(error.pos - 1, error.pos + 1) === '/>') {
+parser.index = error.pos;
+parser.error(parser_errors.unclosed_attribute_value(quote_mark || '}'));
+}
+}
+throw error;
+}
+
+if (value.length === 0 && !quote_mark) {
+parser.error(parser_errors.missing_attribute_value);
+}
 
 if (quote_mark) parser.index += 1;
 return value;

test/parser/samples/attribute-empty-error/error.json

@@ -0,0 +1,10 @@
+{
+ "code": "missing-attribute-value",
+ "message": "Expected value for the attribute",
+ "pos": 12,
+ "start": {
+ "character": 12,
+ "column": 12,
+ "line": 1
+ }
+}

test/parser/samples/attribute-empty-error/input.svelte

@@ -0,0 +1 @@
+<div class= ></div>

test/parser/samples/attribute-empty/input.svelte

@@ -0,0 +1 @@
+<div a="" b={''} c='' d="{''}" ></div>

test/parser/samples/attribute-empty/output.json

@@ -0,0 +1,108 @@
+{
+"html": {
+"start": 0,
+"end": 38,
+"type": "Fragment",
+"children": [
+{
+"start": 0,
+"end": 38,
+"type": "Element",
+"name": "div",
+"attributes": [
+{
+"start": 5,
+"end": 9,
+"type": "Attribute",
+"name": "a",
+"value": [
+{
+"start": 8,
+"end": 8,
+"type": "Text",
+"raw": "",
+"data": ""
+}
+]
+},
+{
+"start": 10,
+"end": 16,
+"type": "Attribute",
+"name": "b",
+"value": [
+{
+"start": 12,
+"end": 16,
+"type": "MustacheTag",
+"expression": {
+"type": "Literal",
+"start": 13,
+"end": 15,
+"loc": {
+"start": {
+"line": 1,
+"column": 13
+},
+"end": {
+"line": 1,
+"column": 15
+}
+},
+"value": "",
+"raw": "''"
+}
+}
+]
+},
+{
+"start": 17,
+"end": 21,
+"type": "Attribute",
+"name": "c",
+"value": [
+{
+"start": 20,
+"end": 20,
+"type": "Text",
+"raw": "",
+"data": ""
+}
+]
+},
+{
+"start": 22,
+"end": 30,
+"type": "Attribute",
+"name": "d",
+"value": [
+{
+"start": 25,
+"end": 29,
+"type": "MustacheTag",
+"expression": {
+"type": "Literal",
+"start": 26,
+"end": 28,
+"loc": {
+"start": {
+"line": 1,
+"column": 26
+},
+"end": {
+"line": 1,
+"column": 28
+}
+},
+"value": "",
+"raw": "''"
+}
+}
+]
+}
+],
+"children": []
+}
+]
+}
+}

test/parser/samples/error-unclosed-attribute-self-close-tag/error.json

@@ -0,0 +1,10 @@
+{
+"code": "unclosed-attribute-value",
+"message": "Expected to close the attribute value with }",
+"pos": 25,
+"start": {
+"character": 25,
+"column": 25,
+"line": 1
+}
+}

test/parser/samples/error-unclosed-attribute-self-close-tag/input.svelte

@@ -0,0 +1 @@
+<Component test={{a: 1} />