Mitosis <Slot> support

Mitosis needs content projection and we can support this by adding this to the jsx parser

<Layout>
  <Slot top={<NavBar/>} />
  <Slot left={<Sidebar/>} />
  <Slot center={<Content/>} />
  anything else
</Layout>

function Layout(props) {
  return (
    <div className="layout">
      <div className="top">
        <Slot name={props.top} />
      </div>
      <div className="left">
        <Slot name={props.left} />
      </div>
      <div className="center">
        <Slot name={props.center} />
      </div>
      <Slot />
    </div>
  );
}

When we see child slots without name we will just extend <Layout> props (the parent node). Inside Layout component when we see any <Slot> with name attribute we can replace that slow node with the reference to the prop. I think we should require slot in the name just as we do with on keywords

we can also provide a slot attributes

<Layout
  slot={
    {
      top: <NavBar/>,
      left: <Sidebar/>,
      center: <Content/>
    }
  }
/>
  anything else
</Layout>

or just like how we use on keyword we can do the same with slot

<Layout
  slotTop={<NavBar/>}
  slotLeft={<Sidebar/>}
  slotCenter={<Content/>}
/>
  anything else
</Layout>

In React we would write it as

<Layout
  left={<Sidebar/>}
  top={<NavBar/>}
  center={<Content/>}
>
  anything else
</Layout>

function Layout(props) {
  return (
    <div className="layout">
      <div className="top">
        {props.top}
      </div>
      <div className="left">
        {props.left}
      </div>
      <div className="center">
        {props.center}
      </div>
      {props.children}
    </div>
  );
}

we can also create a react convention for slots requiring slot to be in the name

<Layout
  slotLeft={<Sidebar/>}
  slotTop={<NavBar/>}
  slotCenter={<Content/>}
>
  anything else
</Layout>

function Layout(props) {
  return (
    <div className="layout">
      <div className="top">
        {props.slotTop}
      </div>
      <div className="left">
        {props.slotLeft}
      </div>
      <div className="center">
        {props.slotCenter}
      </div>
      {props.children}
    </div>
  );
}

angular we can use the attribute names and props var names to determine the correct selectors. Even if the names have slot prepended we can remove it to determine what the real name is.

<layout>
  <sidebar left></sidebar>
  <nav-bar top></nav-bar>
  <content center></content>
  anything else
</layout>

template: /*html*/`
    <div class="layout">
      <div class="top">
        <ng-content select="[top]"></ng-content>
      </div>
      <div class="left">
        <ng-content select="[left]"></ng-content>
      </div>
      <div class="center">
        <ng-content select="[center]"></ng-content>
      </div>
      <ng-content></ng-content>
    </div>
`

[steve8708]

This is exactly in line with what I’ve wanted to do for this, looks great to me 👍🏼

[PatrickJS]

I’m going to close this since the jsx-way is done. We can the html-way later if others prefer like vue/angular users