Alternative to renderer.@context.private?

Using Neos & Flow Frontend & Integration
1

Hi,
i’m creating private variables in my components like this:

prototype(My.Site:Component.Molecule.ArticleResultCard) < prototype(Neos.Fusion:Component) {
    prop1 = ''
    prop2 = ''

    renderer.@context.private = Neos.Fusion:DataStructure {
        myVar = ${props.prop1 + ' - ' + props.prop2}
    }

    renderer = afx`
        <div>
            {private.myVar}
        </div>
    `
}

The problem with this solution for separating private variables from props is that private.myVar overwrites variables with the same name in child components.

Is there a better practice? :slight_smile:

2

I use this pattern to separate calculated props from the api https://gist.github.com/mficzel/5c9c8e54f5a327123f07d762b34e2053

1 Like
3

Thank you Martin. :slight_smile:

That helped me a lot.

I put this in a new Fusion Object to keep the code more clean and understandable.

prototype(My.Fusion:ExtendedRenderer) < prototype(Neos.Fusion:Component) {
    @apply.props = ${props}
    renderer = ''
}

prototype(My.Site:Component.Atom.Button) < prototype(Neos.Fusion:Component) {

    @propTypes {
        // ...
    }

   apiProp = 'Hallo'
   class = 'myClass'

    renderer = My.Fusion:ExtendedRenderer {
        privateProp = 'a private string'
        combinedProp = ${props.apiProp + ' ' + 'Neos'}

        renderer = afx`
            <div class={props.class}>
                {props.combinedProp}, {props.privateProp}
            </div>
        `
    }
}
4

see my idea at WIP FEATURE: `Neos.Fusion:Component` easy `@computed` props by mhsdesign · Pull Request #3943 · neos/neos-development-collection · GitHub
maybe it will prove worthy

1 Like