fix: remove .map function that doesn't work in SSR support #94

AlaskaAirlines · Oct 31, 2024 · 5cdb374 · 5cdb374
1 parent cf3ae3e
commit 5cdb374
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 7 deletions.
diff --git a/demo/api.html b/demo/api.html
@@ -40,7 +40,7 @@
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../index.js" data-demo-script="true"></script>
+    <script type="module" src="./api.min.js" data-demo-script="true"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>

diff --git a/demo/api.js b/demo/api.js
@@ -0,0 +1 @@
+import '../index.js';
diff --git a/demo/api.min.js b/demo/api.min.js
diff --git a/demo/index.min.js b/demo/index.min.js
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -31,4 +31,14 @@ const indexExamplesConfig = {
   }
 };
 
-export default [modernConfig, indexExamplesConfig];
+const apExamplesConfig = {
+  input: {
+    ['api.min']: './demo/api.js',
+  },
+  output: {
+    format: 'esm',
+    dir: 'demo/'
+  }
+};
+
+export default [modernConfig, indexExamplesConfig, apExamplesConfig];
diff --git a/src/auro-table.js b/src/auro-table.js
@@ -90,7 +90,7 @@ export class AuroTable extends LitElement {
         <table>
           <thead>
             <tr>
-              ${this.columnHeaders.map((header) => html`
+              ${this.columnHeaders.forEach((header) => html`
                 <th>${header}</th>
               `)}
             </tr>

diff --git a/test/auro-table.test.js b/test/auro-table.test.js
@@ -16,8 +16,8 @@ describe('auro-table', () => {
     `);
 
     const table = el.shadowRoot.querySelector('table');
-    const columns = table.querySelectorAll('th');
     const rows = table.querySelectorAll('tr');
+    const columns = rows[1].querySelectorAll('td');
 
     expect(columns.length).to.equal(3);
     expect(rows.length).to.equal(3);
@@ -33,7 +33,8 @@ describe('auro-table', () => {
     `);
 
     const table = el.shadowRoot.querySelector('table');
-    const columns = table.querySelectorAll('th');
+    const rows = table.querySelectorAll('tr');
+    const columns = rows[1].querySelectorAll('td');
     const details = table.querySelectorAll('td');
 
     expect(columns.length).to.equal(3);
@@ -50,7 +51,8 @@ describe('auro-table', () => {
     `);
 
     const table = el.shadowRoot.querySelector('table');
-    const columns = table.querySelectorAll('th');
+    const rows = table.querySelectorAll('tr');
+    const columns = rows[1].querySelectorAll('td');
     const details = table.querySelectorAll('td');
 
     expect(columns.length).to.equal(3);