From f6bdc6b87e49cfdf5f7fee10d5d5ee08e1485b66 Mon Sep 17 00:00:00 2001
From: Alexander Medvednikov <alexander@vlang.io>
Date: Tue, 21 Sep 2021 07:53:42 +0300
Subject: [PATCH] tmpl: fix <div> inside <div>

---
 examples/vweb/index.html               |  8 ++++++++
 vlib/v/parser/tmpl.v                   |  8 ++++++--
 vlib/v/tests/inout/embedded.html       |  5 +++++
 vlib/v/tests/inout/file.html           |  7 ++++++-
 vlib/v/tests/inout/tmpl_parse_html.out | 11 ++++++++++-
 5 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 vlib/v/tests/inout/embedded.html

diff --git a/examples/vweb/index.html b/examples/vweb/index.html
index d69ff7873..736f8d643 100644
--- a/examples/vweb/index.html
+++ b/examples/vweb/index.html
@@ -1,11 +1,19 @@
+@include 'header.html'
+
 Test <b>app</b>
 <br>
 <h1>@hello</h1>
 <hr>
+
+If demo: <br>
 @if show
 	show = true
 @end
 
+<br><br>
+
+For loop demo: <br>
+
 @for number in numbers
 	@number <br>
 @end
diff --git a/vlib/v/parser/tmpl.v b/vlib/v/parser/tmpl.v
index 796da60e4..8bb8cda75 100644
--- a/vlib/v/parser/tmpl.v
+++ b/vlib/v/parser/tmpl.v
@@ -198,15 +198,19 @@ mut sb := strings.new_builder($lstartlength)\n
 			class := line.find_between('span.', '{').trim_space()
 			source.writeln('<span class="$class">')
 			in_span = true
-		} else if state == .html && line.starts_with('.') && line.ends_with('{') {
+		} else if state == .html && line.trim_space().starts_with('.') && line.ends_with('{') {
 			// `.header {` => `<div class='header'>`
 			class := line.find_between('.', '{').trim_space()
+			trimmed := line.trim_space()
+			source.write_string(strings.repeat(`\t`, line.len - trimmed.len)) // add the necessary indent to keep <div><div><div> code clean
 			source.writeln('<div class="$class">')
 		} else if state == .html && line.starts_with('#') && line.ends_with('{') {
 			// `#header {` => `<div id='header'>`
 			class := line.find_between('#', '{').trim_space()
 			source.writeln('<div id="$class">')
-		} else if state == .html && line == '}' {
+		} else if state == .html && line.trim_space() == '}' {
+			trimmed := line.trim_space()
+			source.write_string(strings.repeat(`\t`, line.len - trimmed.len)) // add the necessary indent to keep <div><div><div> code clean
 			if in_span {
 				source.writeln('</span>')
 				in_span = false
diff --git a/vlib/v/tests/inout/embedded.html b/vlib/v/tests/inout/embedded.html
new file mode 100644
index 000000000..d4fd0ee7b
--- /dev/null
+++ b/vlib/v/tests/inout/embedded.html
@@ -0,0 +1,5 @@
+<b>embedded</b>
+
+.embedded {
+	hello
+}
diff --git a/vlib/v/tests/inout/file.html b/vlib/v/tests/inout/file.html
index d6be077e6..ead45d24b 100644
--- a/vlib/v/tests/inout/file.html
+++ b/vlib/v/tests/inout/file.html
@@ -35,8 +35,13 @@ const classes = `header ${ isLargeScreen() ? '' :
 <h1>@{title}</h1>
 <p>@title</p>
 .hello {
-	<b>hi</b><br>
+	.hello2 {
+		<b>hi</b><br>
+	}
 }
+
+@include 'embedded.html'
+
 <a href="@website.link">@website.link</a>
 <a href="mailto:example@@@website.link">Email</a>
 </header>
diff --git a/vlib/v/tests/inout/tmpl_parse_html.out b/vlib/v/tests/inout/tmpl_parse_html.out
index df98a690f..23cfd0a1d 100644
--- a/vlib/v/tests/inout/tmpl_parse_html.out
+++ b/vlib/v/tests/inout/tmpl_parse_html.out
@@ -35,8 +35,17 @@ const classes = `header ${ isLargeScreen() ? '' :
 <h1>TEST</h1>
 <p>TEST</p>
 <div class="hello">
-	<b>hi</b><br>
+	<div class="hello2">
+		<b>hi</b><br>
+	</div>
 </div>
+
+<b>embedded</b>
+
+<div class="embedded">
+	hello
+</div>
+
 <a href="example.com">example.com</a>
 <a href="mailto:example@example.com">Email</a>
 </header>
-- 
2.30.2