single function as children should keep it

[Jokcy]

When we write this code:

<Comp>{() => 'foo'}</Comp>

we should not wrapper the expressionContainer into another functionExpression, this PR implement it.

I PR this for a preview of implementation.

There is still a TODO left, because I'm not very familiar with babel APi, I am requiring a early preview for my code.

Please give me some feed back

[Amour1688]

Thanks for your pull request.

I'm not sure under what circumstances would you use <Comp>{() => 'foo'}</Comp>.

const renderA = () => 'foo';

const wrapper = mount({
  setup() {
    return () => <A>{renderA}</A>;
   },
});

Also In React, functions are not valid as child. This may happen if you return a Component instead of <Component />. Or maybe you meant to call this function rather then return it.

[Jokcy]

A lot of circumstances I think. For example if I want to pass some args when I render default slot.

<div>{slot.default(arg1)}</div>

this is quite like scoped slot, I did not find a way to use it in jsx now, I guess my solution is ok since we already pass slot as function everywhere.

In fact function in react this is more common, the Context.Consumer use function as children

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

and alot of libs like Apollo(a graphql lib) use function as children to pass its data context.

So I think this will be a necessary and nice feature when writting vue in jsx.

[Amour1688]

I guess you might meant to use slots. I implement in v1.0.0-beta.1

const A = (_, { slots }) => (
  <div>{slots.b('xxx')}</div>
)

const App = {
  setup() {
    const slots = {
      a: () => <div>A</div>,
      b: (x) => <span>{x}</span>
    }
    return () => <A vSlots={slots} />
  }
}

[Jokcy]

@Amour1688 Is that mean default slot should like this:

const slots = {
  default: () => <div>default</div>
}

[Amour1688]

@Jokcy In Vue, I'd like to use slots or prop instead of children as function, as the underlying implementation of Vue is different from React.

So maybe you can use default slot like this

const App = {
  setup() {
    return () => <A vSlots={{ default: (x) => <div>{x}</div> } />
  }
}

or

const slots = {
  default: (x) => <div>{x}</div>
}

[Jokcy]

I can understand your consideration, but default slot is different, since we commonly do it like this:

<Comp><default-slot-content /></Comp>

it's very natural and also it's common jsx syntax.

It may be better if we can keep this.

[Amour1688]

Of course you can use a default slot like this:

<Comp><default-slot-content /></Comp>

But in this circumstance:

const A = (_, { slots }) => slots.default('with param'); 

We recommend to use vSlots which I mentioned above.

[Jokcy]

Fine, it's a pity that we have to use some vue style jsx syntax but not common jsx syntax