"Unexpected block closing tag" when using </input>

[frafra]

Working code:

<table>
  {{#each rows as row}}
    <tr>
      {{#each columns as col}}
        <td>
          {{matrix.get([row, col])}}
        </td>
      {{/each}}
    </tr>
  {{/each}}
</table>

<script>
  export default {
    computed: {
      rows: matrix => [...Array(matrix.size()[0]).keys()],
      columns: matrix => [...Array(matrix.size()[1]).keys()],
    }
  }
</script>

If I replace {{matrix.get([row, col])}} with <input>{{matrix.get([row, col])}}</input> I get this error:

$ node ./node_modules/.bin/svelte compile --format iife components/Matrix.html
svelte version 1.3.0
compiling components/Matrix.html...
Unexpected block closing tag
 6:           <input>{{matrix.get([row, col])}}</input>
 7:         </td>
 8:       {{/each}}
             ^
 9:     </tr>
10:   {{/each}}

[frafra]

I suppose that invalid HTML closing tabs could be problematic.
If I use <input> as usual, I get no error:

<input value='{{matrix.get([row, col])}}' type='number' on:change='change(row, col, event.target.value)' />

[frafra]

Ok, I think that the only problem here could be the misleading position of ^

[Rich-Harris]

There's a couple of things going on here – Svelte doesn't do a very good job of dealing with unexpected tags at all. It needs to figure out which elements are closed by a particular closing tag (elements plural because things like <div><ul><li>one<li>two<li>three</div> are totally valid HTML) and kick up a fuss if it sees something awry, rather than waiting to get confused over a closing block tag.

But in this particular case it's slightly simpler, because </input> is invalid – a void tag can't have children. We can detect that easily and print a more useful error. #225 implements that

[Rich-Harris]

Svelte does a much better job now (particularly as of 1.8.1, just released) of providing useful feedback when HTML isn't formed quite right, so I'll close this issue. Thanks!