Fusion scope (alternative to @context)

Hej,

I have a somewhat basic question about fusion and variable scopes.

Example:

prototype(Some.Package:Content.Example) < prototype(Neos.Neos:ContentComponent) {
    myColor = 'red'

    someClasses = Neos.Fusion:Join {
        something = 'some-class'
        
        // How to access myColor here?
        color = ${myColor}

        @glue = ' '
    }
}

If i defined a variable (“myColor” in this case). How can I access it from objects defined below the current object (“someClasses” in this case)?

The only solution I found was using @context like this:

prototype(Some.Package:Content.Example) < prototype(Neos.Neos:ContentComponent) {
    myColor = 'red'
    @context.myColor = ${this.myColor}

    someClasses = Neos.Fusion:Join {
        something = 'some-class'
        color = ${myColor}

        @glue = ' '
    }
}

Is there another to access “myColor” way without “polluting” @context?

Regards
Leif

Hi,

the “Nested Components” pattern could help here:

prototype(Some.Package:Content.Example) < prototype(Neos.Neos:ContentComponent) {
    myColor = 'red'
    
    renderer = Neos.Fusion:Component {
        // Forward props
        @apply.props = ${props}

        someClasses = Neos.Fusion:Join {
            something = 'some-class'
            color = ${props.myColor}

            @glue = ' '
        }

        renderer = ...
    }
}

This basically allows you to add a layer in between your public component API and the props that the final renderer is going to receive.

2 Likes