fix(html): table elements with attribute expressions

hybridsjs · Sep 13, 2023 · 07c7a21 · 07c7a21
1 parent 5ee2fcc
commit 07c7a21
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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", () => {