Should support passing object slots via JSX children about babel-plugin-jsx

[yyx990803]

Discussion notes from Discord:

Previous decision to use v-slots due to difficulty in determining the case where a dynamic expression is embedded:

const s = {
  foo: () => <div>foo</div>,
  bar: () => <div>bar</div>
}
<Comp>{s}</Comp>

Current output is

createVNode(resolveComponent("Comp"), null, {
  default: () => [s],
  _: 1
})

The solution is to add a runtime check:

const isSlot = s => isFunction(s) || (isObject(s) && !isVNode(s))

createVNode(resolveComponent("Comp"), null, isSlot(s) ? s : {
  default: () => [s],
  _: 1
})

The runtime check should only be needed in the case where:

• The JSX component has a single children expression
• The children expression is not a literal value (identifier, function call, other non-literal expressions)

Expected Cases

May not be complete.

• JSX children: compile to default slot

  <Comp><div>hi</div></Comp>
  
  createVNode(resolveComponent("Comp"), null, {
    default: () => [createVNode("div", null, [createTextVNode("hi")])],
    _: 1
  })

• Multiple expressions: compile to default slot

  <Comp>{foo} {bar}</Comp>
  
  createVNode(resolveComponent("Comp"), null, {
    default: () => [foo, createTextVNode(" "), bar],
    _: 1
  })

• Single expression, non-literal value: runtime check

  Note: may need to cache the expression in a variable to avoid multiple evaluations

  <Comp>{foo()}</Comp>
  
  let _slot_1
  createVNode(resolveComponent("Comp"), null, isSlot(_slot_1 = foo()) ? _slot_1 : {
    default: () => [_slot_1],
    _: 1
  })

• Single expression, object literal: pass as object slots

  <Comp>{{
    default: () => <div>default</div>,
    foo: () => <div>foo</div>
  }}</Comp>
  
  createVNode(resolveComponent("Comp"), null, {
    default: () => createVNode("div", null, [createTextVNode("default")]),
    foo: () => createVNode("div", null, [createTextVNode("foo")]),
    _: 1
  })

• Single expression, function expression: pass as default slot (no wrapping, no flag)

  <Comp>{() => "foo"}</Comp>
  
  createVNode(resolveComponent("Comp"), null, {
    default: () => "foo"
    // probably should have no flag here
  })

• Single expression, other literals: pass as default slot

  <Comp>{123}</Comp>
  
  createVNode(resolveComponent("Comp"), null, {
    default: () => [normalizeVNode(123)],
    _: 1
  })

[Amour1688]

Is there any news about this new feature? 👀👀👀👀

WIP

[nickmessing]

Would be nice to add children typing support if this is implemented.

[Zcating]

Finally, You found it.

The usage of v-slots is quite react-like, may be provide more radical syntax sugar.

<Compo>
  <VSlot name="default">
      <div>default</div>
  </VSlot>
  <VSlot name="foo">
      <div>bar</div>
  </VSlot>
</Compo>

[0x30]

Is there any news about this new feature? 👀👀👀👀