AFX Syntax

Draft

This page is not yet fully completed - we are still working on the content here. Expect some rough edges 🙃

#Basics

AFX is inspired by JSX. This means you can mostly write HTML and JSX. It also has decorators like Fusion.

#Fusion decorators / meta properties

All Fusion decorators can be used in AFX as well. This list denotes a few special cases and aliases:

#@apply / {...spread}

In AFX you are allowed to so called spreads. But those are just syntactic sugar and will be transpiled to Fusion's @apply meta property.

Is the same as @apply

Neos.Fusion:Tag {
    tagName = 'a'
    [email protected]_1 = ${props}
    content = 'Is the same as @apply'
}

attributes = Neos.Fusion:DataStructure {
	class = 'my-button'
	id = 'bestButton'
}

#@if / @process

These meta properties translate directly to Fusion. But in AFX one is allowed to omit the describing subkey as short notation:

Is a shorthand for @if.*

Neos.Fusion:Tag {
    tagName = 'a'
    @if.if_1 = ${true}
    content = 'Is a shorthand for @if.*'
}

#AFX specific decorators / meta properties

#@key

@key overrides the default generated key for the object.

Heading


This is just flow content

Neos.Fusion:Array {
    item_1 = Neos.Fusion:Tag {
        tagName = 'h2'
        content = 'Heading'
    }
    breakline = Neos.Fusion:Tag {
        tagName = 'br'
        selfClosingTag = true
    }
    item_3 = 'This is just flow content'
}

Heading

This is just flow content

#@children

Content between the object tags gets written per default to the content prop of the object. To change this you can define @children


  I do nothing

MySite:Button {
    text = 'I do nothing'
}

prototype(Docs:Button) < prototype(Neos.Fusion:Component) {
	renderer = afx``
}

#@path

Move an object to the prop of a parent with @path


  This should move to the heading
  This is default content

Docs:Article {
    heading = Neos.Fusion:Tag {
        tagName = 'h2'
        content = 'This should move to the heading'
    }
    content = Neos.Fusion:Tag {
        tagName = 'p'
        content = 'This is default content'
    }
}

prototype(Docs:Article) < prototype(Neos.Fusion:Component) {
	renderer = Neos.Fusion:Tag {
		tagName = 'article'

		attributes.class = 'my_article'

		content = Neos.Fusion:Join {
			item_0 = Neos.Fusion:Tag {
				tagName = 'div'
				attributes.class = 'my_article_heading'
				content = ${props.heading}
			}
			item_1 = ${props.content}
		}
	}
}

This should move to heading

This should just flow.

#Syntax Examples

#Simple

AFX gets transpiled to Fusion. See the transpiled output inside "Generated Fusion".


  This is strong

  This is just flow content

Neos.Fusion:Tag {
    tagName = 'p'
    attributes.class = 'hello'
    content = Neos.Fusion:Join {
        item_1 = Neos.Fusion:Tag {
            tagName = 'strong'
            content = 'This is strong'
        }
        item_2 = Neos.Fusion:Tag {
            tagName = 'br'
        }
        item_3 = 'This is just flow content'
    }
}

This is strong
This is just flow content

#Complex

This example contains all common syntax patterns.


  
  AFX Preview
  
	{item}
  
  
	
	  Read more

Neos.Fusion:Tag {
    tagName = 'article'
    attributes.class = 'hello'
    attributes.id = My.Site:IdGenerator {
    }
    content = Neos.Fusion:Join {
        heading = Neos.Fusion:Tag {
            tagName = 'h2'
            @if.if_1 = ${!props.heading}
            content = 'AFX Preview'
        }
        item_2 = Neos.Fusion:Loop {
            items = 'props.items'
            itemName = 'item'
            content = Neos.Fusion:Tag {
                tagName = 'p'
                content = ${item}
            }
        }
        item_3 = Neos.Fusion:Augmenter {
            class = ${props.link == '#title' ? 'int' : 'ext'}
		    content = Neos.Fusion:Tag {
			  	attributes.href = ${props.link}
			 	@apply.spread_1 = ${props.linkProps}
			  	tagName = 'a'
			  	attributes.rel = 'bookmark'
			  	content = 'Read more'
		    }
        }
    }
}

heading = null
linkProps = Neos.Fusion:DataStructure {
	attributes.title = 'Click me'
	attributes.href = '#top'
	attributes.class = 'default-link'
	attributes.rel = 'help'
}
items = Neos.Fusion:DataStructure {
	first = 'First paragraph'
	second = 'Second paragraph'
}
link = "https://www.neos.io/"

AFX Preview

First paragraph

Second paragraph