Support for dots in HTML attributes in AFX

Using Neos & Flow Frontend & Integration
1

Hi,

in my new Neos project I would like to use Alpine.js.

Unfortunately AFX seems not to support dots in HTML attributes.
In my Fusion code I have something similar to this:

renderer = afx`
    <div x-on:click.away="openMenu = false">
		<p>text</p>
    </div>
`

The HTML output looks like this:

<div x-on:click="openMenu = false">
	<p>text</p>
</div>

The .away is cut away.
Is there a solution or workaround to make this work in AFX so that the output is correct?

2

Perhaps this solution from a issue describing the reason, can help you

1 Like
3

Thank you @sorenmalling for your answer.

I have found a solution, that works for me:

renderer = afx`
	<div x-on:click_DOT_away="openMenu = false">
		<p>text</p>
	</div>
`

@process.replaceDot = ${String.replace(value, '_DOT_', '.')}

In AFX I replace the dot in the HTML attribute with _DOT_: x-on:click_DOT_away="openMenu = false"

And after the AFX section, I have the following line: @process.replaceDot = ${String.replace(value, '_DOT_', '.')} to replace the custom string with a dot. The HTML output in the frontend is now correct.

I don’t know if this is a good practice, but for now it’s fine for me.
Would be nice if it would work in the future without the little workaround.

2 Likes
4

That is a creative approach, i like it. Adding attribute quoting to afx will not happen soon (unless someone implements it) so this is basically the only way to do this now.