I don't want to 'pollute' my Fusion with ${Editable.attributes(...)}

[mhsdesign]

jup - but i didn't found a better way to handle this than using an explicit Eel helper. I took a similar approach like the Neos.Neos:Editable Fusion object, which will also render some extra markup into your HTML.

The issue is, that you need to insert something into the markup of the HTML element to make the frontend understand what to change and how to change it.

One can't simply search the server rendered HTML for the value of the node property, since the value could be transformed.
For example this - the client will only now that newVal is false or true but not what to change. With a clientEval or a custom changer, this becomes possible:

// boolean border
border = ${q(node).property('border')}

borderChange = ${Editable.attributes(node, 'border', 'clientEval', '
    if (newVal === true) {
        el.classList.add('border-2', 'border-red')
    } else {
        el.classList.remove('border-2', 'border-red')
    }
')}

renderer = afx`
    <div {...props.borderChange} class={props.border ? 'border-2 border-red' : null}></div>
`