Attempt at supporting shorter syntax

[benadamstyles]

Fixes #1

This is just an exploration, to test the limitations of what could be achieved. The problem with the JSX syntax is that using JSX calls ReasonReact.element, which means bs-epitath doesn't get the opportunity to pass in the render prop function, hence why currently the user must declare a function.

In this attempt, I assumed 2 limitations:

1. The user shouldn't need to use a function declaration in the let%Epitath binding (i.e. we are aiming at a shorter syntax).
2. We can only use the let-anything ppx, we musn't require a further ppx.

The only solution I could think of was this PR, where the user simply passes the component's make function and it's up to bs-epitath to call ReasonReact.element with that make function and also pass in the render prop function. (NB I switched round the meaning of children in this PR because it didn't make sense to me that children referred to the render prop component and render referred to the children function!).

This is the diff of usage:

// before
let%Epitath {pageX, pageY} = children => <OnLayout> ...children </OnLayout>;

// after this PR
let%Epitath {pageX, pageY} = OnLayout.make;

There are 2 issues with this solution, however:

1. It doesn't use JSX syntax, which means it's not as intuitive. As I say above, I can't see a way around this.
2. It doesn't currently offer a way to pass props to the render prop component other than the children prop. There might be a way around this!

[benadamstyles]

Ah! 🤦‍♂️ I've just worked out that problem 2 above is nonexistent! This already works:

// before
let%Epitath {pageX, pageY} = children => <OnLayout callback=Js.log> ...children </OnLayout>;

// after this PR
let%Epitath {pageX, pageY} = OnLayout.make(~callback=Js.log);

So the only downside remaining is the lack of JSX syntax.

[fakenickels]

amazing @benadamstyles , sorry the delay to comment.
About 2 I was about to say about it indeed your conclusion.
Looks a nice concession to kill verbosity this for me.
Not thinking in any corner case that would be problematic with this implementation

[benadamstyles]

Cool 🙂 the only thing is the inability to pass ref or key, but I don’t think I’ve ever seen that with a render prop component?

[fakenickels]

Me neither @benadamstyles

[hew]

I like this.

[fakenickels]

Well, so it's a go!

[fakenickels]

Thanks for your contribution @benadamstyles, will release soon to npm

[fakenickels]

@benadamstyles we are thinking in keep both syntaxes and call this one other let%Zombie just to keep in the vibe of Epitath haha

[benadamstyles]

Hey, yep seems like a good idea to keep both syntaxes, for those who prefer JSX visually.

Does zombie have a meaning in programming already? Thinking of “zombie processes”. Just wondering about choosing a term with fewer existing connotations!

[benadamstyles]

What about just let%Epi (because it’s shorter, like this new syntax)

[guilhermedecampo]

Makes sense also! we could even go furthe let%E

[benadamstyles]

Yep! Although as module names are global, maybe that’s a little risky?

[fakenickels]

Epi looks good!