Incorrect representation of a table

[Iban Eguia Moraza]

Hello, I'm trying to use arrow-js (1.0.0 alpha 1) to display a table with the tagged templates, and I'm having some trouble on getting it to work, not sure if it's a bug or it's a wrong interpretation of the docs from my side. I have the following code:

import { t } from "https://cdn.jsdelivr.net/npm/@arrow-js/core";
import table from "./js/components/table.js";

let table_header = ["Name", "State"];
let table_data = [
    ["John", "Subscribed"],
    ["Ashley", "Unsubscribed"],
];

console.log(table(table_header, table_data)());

And then, in table.js:

import { t } from "https://cdn.jsdelivr.net/npm/@arrow-js/core";

export default function table(header, rows) {
	return t`
    <table class="table table-hover">
        <thead><tr>${header.map(column => t`<th>${column}</th>`)}</tr></thead>
        <tbody>
            ${rows.map(columns => t`<tr>${columns.map(column => t`<td>${column}</td>`)}</tr>`)}
        </tbody>
    </table>`;
}

I would expect this to generate the following HTML:

<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Subscribed</td>
    </tr>
    <tr>
      <td>Ashley</td>
      <td>Unsubscribed</td>
    </tr>
  </tbody>
</table>

Instead, I'm getting the following, which is not correct. As you can see, the <th> and <td> elements show outside, and before the <table> element:

<th>Name</th>
<th>State</th>
<td>John</td>
<td>Subscribed</td>
<td>Ashley</td>
<td>Unsubscribed</td>
<table class="table table-hover">
  <thead>
    <tr></tr>
  </thead>
  <tbody></tbody>
</table>

Is this a known issue? Am I doing something wrong?

[Justin Schroeder]

Youre not doing anything wrong — this should work, but I get why it doesn't. When the template is initially parsed it parses it with replacements for the sub-templates, meaning it has malformed html so it tries to "fix" it (the wayrowsers do) — and then when Arrow performs the dynamic binding the structure is out of wack.

Interesting problem....very much part of the "experimental" nature of this tool. So the crux of this issue is how can we get a proper "parse" from something like:

<table>
  <thead>
    🎉
    🎉
  </thead>
</table>

Obviously if the template parser was context aware it could use <tr> or similar, but it would be nice to not be context aware for size/performance reasons.

[Justin Schroeder]

So — probably talking to an echo chamber of my own thoughts here — but it strikes me that if our placeholder tokens were comments they would not be shifted in position. 🤔

[Justin Schroeder]

This should be fixed now in alpha.2!

[Nick Graham]

Nice, I had a similar issue and this fixed it!
But I think it broke the click handlers #25