Pug can't generate this Svelte HTML

[geoidesic]

Pug Version: your version number here 3.0.2 Node Version: your version number here 16.2.0

Input Pug

button(size='small', on:click='{()=>rotateZ(0.1)}')
  icon(name='ant-design:rotate-left-outlined')

Expected HTML

<div class="content">
  <Button size="small" on:click={()=>rotateZ(0.1)}><Icon name="ant-design:rotate-left-outlined"></Icon></Button>
</div>

Actual HTML

Isn't able to generate any HTML output... it crashes.

Additional Comments

This is for using PUG with Svelte. Svelte uses handlebar placeholders for server-aide hydration. Pug is not easily able to handle this. You can kinda fudge it by putting the moustache inside single-quotes but it falls over dead in this edge-case where there's a function inside the moustaches.

[aakoch]

With the given input, it worked for me locally and at https://pughtml.com/

Here is the output I got: <button size="small" on:click="{()=&gt;rotateZ(0.1)}"><icon name="ant-design:rotate-left-outlined"></icon></button>

It's not perfect, with the ">" in there, but it didn't crash.

Can you provide more context? Perhaps use https://pughtml.com/ to test?

[dami-i]

According to Pug documentation (https://pugjs.org/language/attributes.html), just add an exclamation mark before the equal sign to unescape special characters:

button(size='small', on:click!='{()=>rotateZ(0.1)}') icon(name='ant-design:rotate-left-outlined')

On PugHTML (https://pughtml.com/) it renders as expected.