[SOLVED] What can I transform to afx?

Community Newcomer's Corner
1

I have a valid code, which runs fine.
Since hours I try to transform this to afx, with zero success.

prototype(V.S:Menupoint.LatestListGesundheit) < prototype(Neos.Fusion:Loop) {
        items = ${q(site).children('[instanceof V.S:Document.Folder]').filter('[title *= "' + q(node).property('title') + '"]').children() }
        itemName = 'node'
        itemRenderer = V.S:Menupoint.Short
}


prototype(V.S:Menupoint.Short) < prototype(Neos.Fusion:Tag) {
    preview = Neos.Fusion:DataStructure {
        headline = Neos.Fusion:Tag {
            @process.tmpl = ${'<div class="newsheadline"><h2>' + value + '</h2></div>'}
            tagName = 'a'
            attributes.href = Neos.Neos:NodeUri {
                node = ${node}
            }
            content = ${node.properties.title}
        }
        teaser = Neos.Fusion:Tag {
            @process.tmpl = ${'<div class="newsteaser">' + value + '</div>'}
            tagName = 'p'
            content = ${node.properties.teaser + '...'}
        }
    }
    content = ${Array.join(this.preview, ' ')}

}

I don’t know, if I understand afx right.

I thought the example:

afx`
  <h1 @if.has={props.title}>{props.title}</h1>
`

for my headline = Neos.Fusion:Tag`

And the example:

afx`
<Neos.Fusion:Collection collection={['one','two','three']} @children="itemRender">
  <p>{item}</p>
</Neos.Fusion:Collection>
`

for my prototype(Neos.Fusion:Loop)

Maybe I don’t understand the limitation or range of afx.
How should I code with afx?

Best regards.

2

I would use afx together with Neos.Fusion:Component as a replacement for your @process.tmpl pattern. The props you are trying to use are a feature of the Fusion Component and not of afx.

example = Neos.Fusion:Component {
    href = Neos.Neos:NodeUri {
        node = ${documentNode}
    }
    content = ${node.properties.title}
    renderer = afx`
        <div class="newsheadline">
            <h2>
                <a href={props.href}>{props.title}</a>
            </h2>
        </div>
    `
}

To separate presentation and integration you can further do this

// integration ... fetch data
example = Vendor.Site:NewsHeadline {
    href = Neos.Neos:NodeUri {
        node = ${documentNode}
    }
    content = ${node.properties.title}
}

// presentation ... just render stuff
prototype(Vendor.Site:NewsHeadline) < prototype(Neos.Fusion:Component) {
    href = null
    content = null
    renderer = afx`
        <div class="newsheadline">
            <h2>
                <a href={props.href}>{props.title}</a>
            </h2>
        </div>
    `
 }

Afx is Fusion Syntax sugar that allows to write Fusion more compact especially when html shall be generated. The transpilation of afx to vanilla fusion is documented here GitHub - neos/fusion-afx: [READ-ONLY] JSX inspired compact syntax for Neos.Fusion