Hi, I just started with Phoenix/Elixir last month.
I hit a weird problem recently, which I eventually solved, but it took quite some time. In my app, somehow no events (like phx-submit, phx-click) were emitted at all. After a long search, it appeared I had an extra </div> in a template header somewhere. Removing that </div>solved the problem of the events.
I was quite puzzled because I fail to see why one would lead to the other. But I also wondered why this syntax issue was nowhere visible, at least I did not see the compiler complain about it.
Are such syntax errors reported somewhere or can I enable that somehow?
Looks like you are missing a word. If you wanted to add code, surround it in backticks: `<foo>`= <foo>.
An errant </div> in a template is not a syntax error. EEx does not parse the generated output and as such, you can create all the invalid HTML/XML/etc you want. I don’t know if there is a linter / IDE tool that can parse EEx HTML templates and warn about such issues.
We’ve run into this as well. Basically, if the HTML is invalid, the browser does its best to “fix” the html in the DOM, but the result often breaks liveview. We run our markup against a linter in the browser to make sure we aren’t generating invalid HTML.
EEx stands for embedded elixir. So all it cares for is that it can execute elixir code within otherwise opaque text content. It doesn’t care at all what the text is. Same should apply for leex, which should by my understanding only add change tracking and separation of dynamic vs static template parts. But it’s still agnostic to what the actual text is.
Not a linter or IDE, but Surface while compiling its templates also parses them and would have thrown a compile error on such an issue. It’s pretty neat if you want to take LiveView even further.
