Escape quotes in client events

[Lgt2x]

from trame.app import get_server
from trame_client.widgets import html
from trame_client.ui.html import DivLayout

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

with DivLayout(server) as layout:
    Button("Exec", click="console.log(\"test\");", classes="alertMsg")

server.start()

This code is failing, because the generated Vue template for the button is invalid:

<button class="alertMsg" @click="console.log("test");">

The callback contains double quotes, and is interpolated within a double-quoted string. The Javascript console error message is cryptic to the non-initiated Uncaught (in promise) SyntaxError: 17.

This is also a problem for the JSEval exec function, that also uses VueJS events to execute code on the client.

There are multiple ways to prevent this error, including escaping quotes as HTML console.log("test");. I suggest we perform this escaping in the AbstractElement.events function, or at least warn the user and prevent generating invalid template code.

[jourdain]

You can not use " inside a JS expression or event. You always have to use ' or `

[jourdain]

It would be nice to at least warn the user. If the escape works, then maybe we can automate it.