Fusion partial in AFX

Creating Neos & Flow Code
1

I want to reuse a fusion element in AFX to add icons from a sprite file

<My.App:Partial.Icon icon="checkbox" />

my fusion code looks like this:

prototype(My.App:Partial.Icon) < prototype(Neos.Neos:ContentComponent) {

    href = Neos.Fusion:Array {
        o1 = '/media/sprite.svg#'
        o2 = ${props.icon}
    }

    renderer = afx`
        <svg class="icon ">
            <use href={props.href}></use>
            {props.icon}
        </svg>
    `
}

now I can output the value “checkbox” in the afx template with ```{props.icon}, but how can I access this value in the fusion code above? ${props.icon} does not work…
or is there a better way to concatenate values in afx than using a Neos.Fusion:Array property?

2

props are only available in the renderer so other props cannot be calculated based on props.

A solution is the WrapperComponent pattern here: https://gist.github.com/mficzel/5c9c8e54f5a327123f07d762b34e2053

3

Hi @mficzel, thank you for this information and the workaround hint. :slightly_smiling_face:

but it is still a workaround… basically I just want to concatenate two values here to use it as attribute to another element… but I guess I have to wait for nested parsing in AFX…

4

I would not consider nested components beeing a workaround. The props cannot be used inside other props to avoid circular dependencies.

BTW why do’nt you simply:

renderer = afx`
    <svg class="icon ">
        <use href={'/media/sprite.svg#' + props.icon}></use>
        {props.icon}
    </svg>
`
1 Like
5

Yes! This is what I needed! Thank you!

I write custom eel helpers, but I don’t know how to concatenate strings… :see_no_evil: :wink:

1 Like