From 07c7a21a032063e57f6a610ae554a5fd3a402a66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Luba=C5=84ski?= <dominik.lubanski@gmail.com>
Date: Wed, 13 Sep 2023 10:11:58 +0200
Subject: [PATCH] fix(html): table elements with attribute expressions

---
 src/template/core.js |  8 +++++---
 test/spec/html.js    | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/template/core.js b/src/template/core.js
index 2587c3b8..2ca75c59 100644
--- a/src/template/core.js
+++ b/src/template/core.js
@@ -23,8 +23,8 @@ function createSignature(parts) {
   for (let index = 1; index < parts.length; index += 1) {
     tableMode =
       tableMode ||
-      parts[index - 1].match(
-        /<\s*(table|tr|thead|tbody|tfoot|colgroup)([^<>]|"[^"]*"|'[^']*')*>\s*$/,
+      signature.match(
+        /<\s*(table|th|tr|td|thead|tbody|tfoot|caption|colgroup)([^<>]|"[^"]*"|'[^']*')*>\s*$/,
       );
 
     signature +=
@@ -34,7 +34,9 @@ function createSignature(parts) {
 
     tableMode =
       tableMode &&
-      !parts[index].match(/<\/\s*(table|tr|thead|tbody|tfoot|colgroup)\s*>/);
+      !signature.match(
+        /<\/\s*(table|th|tr|td|thead|tbody|tfoot|caption|colgroup)\s*>/,
+      );
   }
 
   return signature;
diff --git a/test/spec/html.js b/test/spec/html.js
index 5339a5f7..20bf3597 100644
--- a/test/spec/html.js
+++ b/test/spec/html.js
@@ -696,10 +696,34 @@ describe("html:", () => {
             ${[3, 4].map((v) => renderRow(v))}
           </tbody>
         </table>
+        <div class="${"test"}">${"text"}</div>
       `;
 
       renderTable({}, fragment);
       expect(fragment.children[0].querySelectorAll("td").length).toBe(4);
+      expect(fragment.children[1].outerHTML).toBe(
+        '<div class="test">text</div>',
+      );
+    });
+
+    it("should render table with rows with attribute expression", () => {
+      const renderRow = (v) =>
+        html`
+          <tr class="${{ test: true }}">
+            ${html`<td>${v}</td>`}
+          </tr>
+        `.key(v);
+      const renderTable = html`
+        <table>
+          <tbody>
+            ${[1, 2].map((v) => renderRow(v))}
+            ${[3, 4].map((v) => renderRow(v))}
+          </tbody>
+        </table>
+      `;
+
+      renderTable({}, fragment);
+      expect(fragment.children[0].querySelectorAll("tr > td").length).toBe(4);
     });
 
     it("should render tbody inside of the table with class attribute", () => {