If you want to use libraries like Alpine.js, it is not possible to add properties with @. In pure Fusion it works:

tag = Neos.Fusion:Tag {
  attributes {
     '@click' = 'Test'
  }
  content = 'Text'
}

This doesn't work:

renderer = afx`
  <div '@click'='Test'>Text</div>
`

It should be possible to use HTML comments, IE conditional comments and CDATA blocks in AFX.

Example:

renderer = afx`
    <!-- My comment -->
    <div>Test</div>

    <!--[if lt IE 7 ]>
        Please update your browser.
    <![endif]-->    

    <script>
        <![CDATA[
            var foo = 'bar';
        ]]>
    </script>
`

As documented AFX strips whitespaces and newlines and this makes a lot of sense usually.

But sometimes it can be useful or even required to keep the whitespaces, for example when using AFX for email templates, code generators or code snippets.

For those it would be nice to have some kind of "keep whitespace" mode, for example:

emailTemplate = afxkws`
Hello {props.name},

foo bar baz
`

When afx throws an error there is another exception as the FusionException does not exist.
Which Exception type should be thrown here?

Hey everybody,

I've been trying AFX recently to build a Backend module, and I have stumbled over a few cases which are unclear to me. I'm writing my questions in a kind of FAQ style, so that we can publish this afterwards, and have more and more AFX best practices documented.

How to render a block conditionally?

In Fluid, one can use the <f:if condition="...">...</if> ViewHelper to render a block conditionally.

In my AFX code, I have done the following:

<Neos.Fusion:Value @if.hasChildren={...} @children="value">
   ...
</Neos.Fusion:Value>

Is this a best practice or would you do it differently? Can I attach the @if to an arbitrary DOM node as it is Fusion in the end?

How do you build If/Else cases in AFX?

I'd love if the syntax {myCondition ? <FirstAfxComponent /> : <SecondAfxComponent />} worked, just like React. However, in my understanding, this won't work because everything in {...} is directly interpreted as Eel.

So what I did instead was using Neos.Fusion:Case:

prototype(Sandstorm.NeosAcl:Presentation.NodeList.NodeRow.Acl) < prototype(Neos.Fusion:Case) {
    @context.acl = ${this.acl}

    moreThanThreeAcls {
        condition = ${Array.length(acl) > 3}
        element = Neos.Fusion:Component {
            acl = ${acl}
            renderer = afx`
             ...
            `
        }
    }

    default {
        condition = true
        element = Neos.Fusion:Component {
            acl = ${acl}
            renderer = afx`
                 ...
            `
        }
    }
}

I dislike the above approach because of the following:

• it's very verbose.
• we need to pass the acl prop from props to Context, then back from context to Props in the inner Components.

How would you write this idiomatically?

How do you handle "computed state" in a Component?

Example:

prototype(Sandstorm.NeosAcl:Presentation.NodeList.NodeRow) < prototype(Neos.Fusion:Component) {
    # public API
    node = null

    # Internal "API"
    @context.node = ${this.node}
    showLinkUri = Neos.Fusion:UriBuilder {
        action = "show"
        arguments.node = ${node.nodePath}
    }
    renderer = afx`...`

in the above example, the node is a public prop; and I want to generate a certain link with this Node as input. The control flow above is IMHO non-obvious:

• we need to put the node into context, using this.... notation
• we need to define a new internal prop, where we use the context value.

I know I could write <...NodeRow showLinkUri.arguments.node={node}> on calling the component, but I feel this exposes too much of the internal behavior of NodeRow to the outside world...

How would you write this idiomatically?
Is there any convention on how to name/build "computed properties"?

Forms

I've tried creating helpers for generating forms, similar to <f:form>. I think this has not been done before, has it? I think it would be super useful as well...

I see one conceptual problem there: For forms to work, we need a "data channel" from the form element to its form fields and back again, to be able to remember the form fields, the bound value, etc etc. Pretty similar to how react's context works.

However, an Neos.Fusion:Component only passes through props and clears all other variables from the Fusion stack (which is generally great of course) -- should we extend it to e.g. keep "private" context variables starting with __?

Menus

How do I build menus in AFX? (Asking because the Menu prototype inherits from Neos.Fusion:Template).

All the best and thanks :)

Sebastian

Needing to name @if and @process in AFX is cumbersome and harms readability. It would be great it the are generated automatically.

Examples:

<h2 
    @if={something == true}
    @if={2dasdasd}
    title.@if={dasds}
    title.@process={asdas}>
    Lala
</h2>

All of these do not work:

// -> literally "Acme.Com:Processor" as result
<a href={props.href} @process.foo="Acme.Com:Processor">

// -> Expression "Acme.Com:Processor" could not be parsed. Error starting at character 18: ":Processor".
<a href={props.href} @process.foo={Acme.Com:Processor}>

// -> Prop-assignment "@process.foo" was not followed by quotes or braces
<a href={props.href} @process.foo=Acme.Com:Processor>

But this would work in "pure" Fusion:

@process.tracking = Acme.Com:Processor

I don't know if this is intended but if not it should be documented I think.

When writing something like:

<span>\o/</span>

It results in

<span>o/</span>

On the other hand

<span>\\o/</span>

results in

<span>\o/</span>

While having separate scripts might in general be the preferable way to load some sprinkles of JavaScript, there are still occasions where an inline script is better to show the actual intent and keep the component coupled with its frontend behavior.

For example, let's say you have a button with a click handler doing a very specific action.
I would like to be able to have a simple fusion component containing the button as well as the script tag with the accompanying event binding.

prototype(Vendor:CookieSettingsButton) < prototype(Neos.Fusion:Component) {
    renderer = afx`
        <button id="klaro-manager">
            Open cookie settings
        </button>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                var button = document.getElementById('klaro-manager');
                button.addEventListener('click', function() {
                    klaro.show();
                });
            });
        </script>
    `
}

prototype(Random.Package:Prototype) < prototype(Random.Package:BasePrototype) {
    renderer = afx`
        <div>
            <div>test</div>
            <div>this should be not red, and there should be no content from the base prototype visible</div>
        </div>
    `
}

prototype(Random.Package:BasePrototype) < prototype(Neos.Fusion:Component) {
    renderer = afx`
        <div style="background: red">
            <div>this is the base prototype content, should not be visible at all</div>
        </div>
    `
}

When we output Random.Package:Prototype we would expect

<div>
    <div>test</div>
    <div>this should be not red, and there should be no content from the base prototype visible</div>
</div>

but instead we get

<div style="background: red">
    divthis is the base prototype content, should not be visible at all
    <div>test</div>
    <div>this should be not red, and there should be no content from the base  prototype visible</div>
</div>

This is most likely because of the auto-generated Neos.Fusion:Tag prototypes in the background and how they are merged, but even completely unsetting the renderer beforehand with renderer > is not helping.

I'm aware of the general "composition over inheritance" stance coming from JSX, but inheritance and overwriting paths should still work like anywhere else in Fusion in combination with AFX.

If this is not considered a bug and if it's completely discouraged to override component render paths in Fusion there should be at least an exception thrown instead of this opaque merging mechanism.

Version 8.3 of fusion-afx introduced PHP8 syntax (yay!). Shouldn't this then also be a constraint in the composer file?

There should be the ability to define the prototype a tag's children a nested into (Neos.Fusion:Array by default).
Currently it's not possible to construct arbitrary data in AFX. For example it is not possible to pass a prop containing a Neos.Fusion:RawArray value like this:

afx`
  <Vendor.Site:Foo @children="bar">
    <Vendor.Site:Foo.Header @key="header" />
    <Vendor.Site:Foo.Body @key="body" />
  </Vendor.Site:Foo @children="bar">
`

Instead Vendor.Site:Foo's bar prop would contain:

bar = Neos.Fusion:Array {
  header = Vendor.Site:Foo.Header
  body = Vendor.Site:Foo.Body
}

I suggest a new meta property like @childrenType to controle the prototype used, which defaults to Neos.Fusion:Array if not set. Also the result should alyways be a value of that type, even if only one child exists, so that the user can always rely on his configuration.

The above example would be written as:

afx`
  <Vendor.Site:Foo @children="bar" @childrenType="Neos.Fusion:RawArray">
    <Vendor.Site:Foo.Header @key="header" />
    <Vendor.Site:Foo.Body @key="body" />
  </Vendor.Site:Foo @children="bar">
`

and would be transpiled to:

bar = Neos.Fusion:RawArray {
  header = Vendor.Site:Foo.Header
  body = Vendor.Site:Foo.Body
}

It would be great to support AFX in expressions, inspired by JSX. Arbitrary AFX could be included in Eel wrapped by some special sequence. The syntactic sugar might not be worth the effort.

Before:

uri = Neos.Fusion:UriBuilder {
    action = 'someMethod'
}
`<a href={props.uri}>Click me</a>

After:

`<a href={afx(<Neos.Fusion:UriBuilder action="someMethod" />)}>Click me</a>

This could then be used with a ternary operator, similar to JSX like this:

Before:

<Button @if.has={something==true}>dasdas</Button>
<Button2 @if.hasNot={something!=true} />

After:

{something==true ? <Button >dasdas</Button> : <Button2 />}

This may result in a structure like this:

Neos.Fusion:Tag {
	_afx_content_afx_child1 = afx`<Button >dasdas</Button>`
	_afx_content_afx_child2 = afx`<Button2 />`
	content = ${something==true ? this._afx_content_afx_child1 : this._afx_content_afx_child2}	
}

Afx isn't in use.

Neos: v3.3.17
Neos/Fusion-Afx: v1.1.0

Given the following fusion code:

root = Neos.Fusion:Renderer {
//    renderer = afx`
//      <p>This should be ignored</p>
//    `
    renderer = Neos.Fusion:Value {
        value = '<p>this should be rendered</p>'
    }
}

Expected

<p>this should be rendered</p>

Actual

Exception (#1181575973):

Unexpected closing confinement without matching opening confinement.
Check the number of your curly braces.

Note:

Using multi line comments works as expected:

root = Neos.Fusion:Renderer {
/*
    renderer = afx`
      <p>This should be ignored</p>
    `
*/
    renderer = Neos.Fusion:Value {
        value = '<p>this should be rendered</p>'
    }
}

-> outputs <p>this should be rendered</p>

Note: This issue has been opened in the wrong tracker first (https://github.com/PackageFactory/atomic-fusion-afx/issues/20)