AFX in Eel Expressions

[rolandschuetz]

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}	
}

[mhsdesign]

Little late to the party ^^ ... btw should i even comment here since the repo is read only?

However ....

I stumbled on a similar thing but lately i found out about fusions afx path @path function:

<a>
    <Neos.Fusion:UriBuilder @path="attributes.href" action="someMethod"/>
    Click me
</a>

Demo:
https://fusionpen.punkt.de/fusionpen/49f5be853eefda0cd90c3dcab3afd75606db1156.html

[rolandschuetz]

Yeah, a different feature though.

[mhsdesign]

I just some thoughts about this again:

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

... it will be kind of confusing why such magic is allowed in eel in AFX blocks but not in normal fusion code ... maybe eel could implement this on its own? - This would be more the JSX way. The big advantage of JSX is, that it is actually always JavaScript just with syntax sugar: writing <p>hello</p> will result after JSX to JavaScript transpilation in something like React.createElement("p", { className: "a" }, "hello"); which is JavaScript and can be used in a ternary expression, in a .map(()=>) or literally everywhere. This is not how Fusion and eel and AFX work together. For this the rendering would need to take place in eel which implements a JSX sugar for prototypes. I think what can done is mimiking the syntax of jsx and javascript and transform this to fusion and eel to archive similar results (what you have shown above) but that is kind of complex and a cat and mouse game.

[kitsunet]

I am not super in love with the idea just yet but find it intriguing for sure. Will be tricky to implement in a clean way as EEL and Fusion are separate worlds, but I think it could be done, although will probably require a lot of under the hood changes to how the whole parsing happens because so far the inside of an expression is basically ignored by the fusion parser and then parsed later on by the EEL parser when that expression result is actually needed, but for the above to work we would have to preparse them while parsing fusoin. Not impossible for sure and maybe that path of thought enables other things if we have early insights into used expressions. Things like analysis of used context variables for example.... Mmmm, I am starting to like the direction.

[mhsdesign]

some idea to solve #7 would be:

it could maybe be solved with <a href={props.href} @process.foo={afx:<Acme.Com:Processor/>} >...</a> as mficzel pointed out in slack

but a recursive afx wouldnt solve ternary expressions - as afx would still be transpiled first.

[mhsdesign]

i made a working prototype ^^

So i tried to implement the idea once and failed while hacking a bit around in the AFX parser

But a few days ago it just came to me that it is super easy to implement on the fusion site (when afx is transpiled, and eel expression are in paths.) That not only makes it possible to use afx() in plain eel like: foo = ${afx(<p>bar</p>)} but also makes recursion/nested things easy.

MhsDesign.FusionAfxInEel

This is the experimental working and tested Fusion Preprocessor and Runtime extension to handle AFX inside of Eel.
https://github.com/mhsdesign/MhsDesign.FusionAfxInEel

some examples:

(more here https://github.com/mhsdesign/MhsDesign.FusionAfxInEel or https://github.com/mhsdesign/MhsDesign.FusionAfxInEel/blob/main/Tests/Experiments/MoreJsxLikeAfxTest.php or https://github.com/mhsdesign/MhsDesign.FusionAfxInEel/blob/main/Tests/Functional/EelAfxRuntimeTest.php)

root = afx`
  Hello <del>JSX</del> AFX!
  {something
    ? afx(<Button>true</Button>)
    : afx(<Button2/>)}
`

or this:

root = afx`
  <p>
      {Array.loop([1, 2, 3], item => afx(
          <a>{item}</a>
      ))}
  </p>
`

or

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

let me know what you think ;)

prototype using this

btw i also made an prototype using this https://github.com/mhsdesign/MhsDesign.FusionAfxInEel/tree/usingThis
but in short - as a user sometimes doesnt know where, what and how this is, my package knows less and so there are lots of failing tests ... https://github.com/mhsdesign/MhsDesign.FusionAfxInEel/blob/usingThis/Tests/Functional/EelAfxRuntimeTest.php#L13