From 8de7931c64b46d22fc303adce14eb3f680c8ca66 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 7 Oct 2022 08:23:12 +0800
Subject: [PATCH] [feat] better error message for invalid logic block placement
 (#7862)

* better error message for invalid logic block placement

* include checking for {@html} tags in invalid location
---
 src/compiler/parse/errors.ts                  |  8 ++++++++
 src/compiler/parse/state/tag.ts               | 19 ++++++++++++++++---
 .../html-block-in-attribute/errors.json       |  9 +++++++++
 .../html-block-in-attribute/input.svelte      |  1 +
 .../html-block-in-textarea/errors.json        |  9 +++++++++
 .../html-block-in-textarea/input.svelte       |  3 +++
 .../logic-block-in-attribute/errors.json      |  9 +++++++++
 .../logic-block-in-attribute/input.svelte     |  1 +
 .../logic-block-in-textarea/errors.json       |  9 +++++++++
 .../logic-block-in-textarea/input.svelte      |  5 +++++
 10 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 test/validator/samples/html-block-in-attribute/errors.json
 create mode 100644 test/validator/samples/html-block-in-attribute/input.svelte
 create mode 100644 test/validator/samples/html-block-in-textarea/errors.json
 create mode 100644 test/validator/samples/html-block-in-textarea/input.svelte
 create mode 100644 test/validator/samples/logic-block-in-attribute/errors.json
 create mode 100644 test/validator/samples/logic-block-in-attribute/input.svelte
 create mode 100644 test/validator/samples/logic-block-in-textarea/errors.json
 create mode 100644 test/validator/samples/logic-block-in-textarea/input.svelte

diff --git a/src/compiler/parse/errors.ts b/src/compiler/parse/errors.ts
index 63bd5b0919..26f03c0cb1 100644
--- a/src/compiler/parse/errors.ts
+++ b/src/compiler/parse/errors.ts
@@ -107,6 +107,14 @@ export default {
 		code: `invalid-${slug}-placement`,
 		message: `<${name}> tags cannot be inside elements or blocks`
 	}),
+	invalid_logic_block_placement: (location: string, name: string) => ({
+		code: 'invalid-logic-block-placement',
+		message: `{#${name}} logic block cannot be ${location}`
+	}),
+	invalid_tag_placement: (location: string, name: string) => ({
+		code: 'invalid-tag-placement',
+		message: `{@${name}} tag cannot be ${location}`
+	}),
 	invalid_ref_directive: (name: string) => ({
 		code: 'invalid-ref-directive',
 		message: `The ref directive is no longer supported — use \`bind:this={${name}}\` instead`
diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts
index efce375b7e..4be47f25b0 100644
--- a/src/compiler/parse/state/tag.ts
+++ b/src/compiler/parse/state/tag.ts
@@ -219,7 +219,8 @@ export default function tag(parser: Parser) {
 		element.children = read_sequence(
 			parser,
 			() =>
-				/^<\/textarea(\s[^>]*)?>/i.test(parser.template.slice(parser.index))
+				/^<\/textarea(\s[^>]*)?>/i.test(parser.template.slice(parser.index)),
+			'inside <textarea>'
 		);
 		parser.read(/^<\/textarea(\s[^>]*)?>/i);
 		element.end = parser.index;
@@ -473,7 +474,7 @@ function read_attribute_value(parser: Parser) {
 
 	let value;
 	try {
-		value = read_sequence(parser, () => !!parser.match_regex(regex));
+		value = read_sequence(parser, () => !!parser.match_regex(regex), 'in attribute value');
 	} catch (error) {
 		if (error.code === 'parse-error') {
 			// if the attribute value didn't close + self-closing tag
@@ -495,7 +496,7 @@ function read_attribute_value(parser: Parser) {
 	return value;
 }
 
-function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
+function read_sequence(parser: Parser, done: () => boolean, location: string): TemplateNode[] {
 	let current_chunk: Text = {
 		start: parser.index,
 		end: null,
@@ -521,6 +522,18 @@ function read_sequence(parser: Parser, done: () => boolean): TemplateNode[] {
 			flush(parser.index);
 			return chunks;
 		} else if (parser.eat('{')) {
+			if (parser.match('#')) {
+				const index = parser.index - 1;
+				parser.eat('#');
+				const name = parser.read_until(/[^a-z]/);
+				parser.error(parser_errors.invalid_logic_block_placement(location, name), index);
+			} else if (parser.match('@')) {
+				const index = parser.index - 1;
+				parser.eat('@');
+				const name = parser.read_until(/[^a-z]/);
+				parser.error(parser_errors.invalid_tag_placement(location, name), index);
+			}
+
 			flush(parser.index - 1);
 
 			parser.allow_whitespace();
diff --git a/test/validator/samples/html-block-in-attribute/errors.json b/test/validator/samples/html-block-in-attribute/errors.json
new file mode 100644
index 0000000000..7cfe43dc0b
--- /dev/null
+++ b/test/validator/samples/html-block-in-attribute/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-tag-placement",
+		"message": "{@html} tag cannot be in attribute value",
+		"start": { "line": 1, "column": 12, "character": 12 },
+		"end": { "line": 1, "column": 12, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/html-block-in-attribute/input.svelte b/test/validator/samples/html-block-in-attribute/input.svelte
new file mode 100644
index 0000000000..46b8ca5b7e
--- /dev/null
+++ b/test/validator/samples/html-block-in-attribute/input.svelte
@@ -0,0 +1 @@
+<div style="{@html text}" />
\ No newline at end of file
diff --git a/test/validator/samples/html-block-in-textarea/errors.json b/test/validator/samples/html-block-in-textarea/errors.json
new file mode 100644
index 0000000000..756fa5ad3e
--- /dev/null
+++ b/test/validator/samples/html-block-in-textarea/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-tag-placement",
+		"message": "{@html} tag cannot be inside <textarea>",
+		"start": { "line": 2, "column": 1, "character": 12 },
+		"end": { "line": 2, "column": 1, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/html-block-in-textarea/input.svelte b/test/validator/samples/html-block-in-textarea/input.svelte
new file mode 100644
index 0000000000..5da8dbf75a
--- /dev/null
+++ b/test/validator/samples/html-block-in-textarea/input.svelte
@@ -0,0 +1,3 @@
+<textarea>
+	{@html fruit}
+</textarea>
\ No newline at end of file
diff --git a/test/validator/samples/logic-block-in-attribute/errors.json b/test/validator/samples/logic-block-in-attribute/errors.json
new file mode 100644
index 0000000000..ebf68938e7
--- /dev/null
+++ b/test/validator/samples/logic-block-in-attribute/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-logic-block-placement",
+		"message": "{#if} logic block cannot be in attribute value",
+		"start": { "line": 1, "column": 12, "character": 12 },
+		"end": { "line": 1, "column": 12, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/logic-block-in-attribute/input.svelte b/test/validator/samples/logic-block-in-attribute/input.svelte
new file mode 100644
index 0000000000..241529527c
--- /dev/null
+++ b/test/validator/samples/logic-block-in-attribute/input.svelte
@@ -0,0 +1 @@
+<div style="{#if condition}a{/if}" />
\ No newline at end of file
diff --git a/test/validator/samples/logic-block-in-textarea/errors.json b/test/validator/samples/logic-block-in-textarea/errors.json
new file mode 100644
index 0000000000..b1d73d4903
--- /dev/null
+++ b/test/validator/samples/logic-block-in-textarea/errors.json
@@ -0,0 +1,9 @@
+[
+	{
+		"code": "invalid-logic-block-placement",
+		"message": "{#each} logic block cannot be inside <textarea>",
+		"start": { "line": 2, "column": 1, "character": 12 },
+		"end": { "line": 2, "column": 1, "character": 12 },
+		"pos": 12
+	}
+]
diff --git a/test/validator/samples/logic-block-in-textarea/input.svelte b/test/validator/samples/logic-block-in-textarea/input.svelte
new file mode 100644
index 0000000000..63fdd9fbaa
--- /dev/null
+++ b/test/validator/samples/logic-block-in-textarea/input.svelte
@@ -0,0 +1,5 @@
+<textarea>
+	{#each fruits as fruit}
+		{fruit}
+	{/each}
+</textarea>
\ No newline at end of file