investigate the macro-component syntax

[mathieudutour]

there is a new lib (https://github.com/jxnblk/macro-components) that does pretty much what we are doing it but that have a lot more constraints and is more fragile (https://github.com/jxnblk/macro-components/issues/3).

But the API is pretty neat, looks better than seapig. We could do something similar really easily tho:

instead of

import seapig, { OPTIONAL, REQUIRED } from 'seapig'

const Main = props => {
  const {
    sidebarChildren, // array of children with the `sidebar` prop
    contentChildren  // array of children with the `content` prop
  } = seapig(props.children, { // schema object
    sidebar: OPTIONAL, // sidebar is optional
    content: REQUIRED  // content is required
  })

  // rendering order is always the same
  return (
    <div>
      {sidebarChildren.length && <aside>{sidebarChildren}</aside>}
      <section>{content}</section>
    </div>
  )
}

we could have

import seapig from 'seapig'

const Main = seapig(({
    sidebar,
    content
  }) => {
  return (
    <div>
      {sidebar.length && <aside>{sidebar}</aside>}
      <section>{content}</section>
    </div>
  )
})

we lose the schema but maybe it can be an optional second argument to the seapig function

[nem035]

That looks interesting. I wanna mess around with it but def like it at first look

[Downchuck]

Could drop the Children suffix and keep the schema:

import seapig, { OPTIONAL, REQUIRED } from 'seapig'

const MainChildren = seapig({
    sidebar: OPTIONAL,
    content: REQUIRED
}) 

const Main = ({children}, context, {sidebar, content} = MainChildren(children)) => 
    <div>
      {sidebar.length && <aside>{sidebar}</aside>}
      <section>{content}</section>
    </div>;

Without a schema:

const seapig = (a,b,c='rest') =>
 React.Children.toArray(a).reduce(
   (obj, a) => {
     const k = b.find(b => b in a.props)||c;
     if(!obj[k]) obj[k]=[];
     obj[k].push(a);
     return obj
   }, {});

const Main = ({children}, context,
   {sidebar, content} = seapig(children, ['sidebar','content'])) =>
    <div>
      {sidebar.length && <aside>{sidebar}</aside>}
      <section>{content}</section>
    </div>;