enkidevs / seapig Goto Github PK

I see in package.json React was moved to a peerDependency. Can you please publish this change?

4e5ff6b

I just searched 30 minutes for exactly this library but I just couldn't find it because I was not using the right keyword. However, I expected to find this library related to the topic of slots, or placeholder or even tunnel, like https://github.com/dschnare/react-slot or https://www.npmjs.com/package/react-tunnel

Please add these related keywords :) !

Thank you for this project!

Should we update the API section to include all 4 schema constants?

The current documentation only references OPTIONAL and REQUIREDS, and makes no distinction that plural counterparts exist.

I know that the documentation makes reference to it somewhere in the middle of the docs, but it might be confusing for new developers who jump straight to the API section.

I love this library, it does one things and does it well.

I did notice however on bundlephobia that the bundle size is about 7kb which seems pretty large to me since the file size itself is only 2-3kb (comments included).

Would making React a peer Dependency help reduce the bundle size further?

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 (jxnblk/macro-components#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

When using seapig and passing on an attribute like so...

<SomeSeapigComponent>
  <h1 foo>Hello World</h1>
</SomeSeapigComponent>

React throws a warning.

I believe this is because React is trying to render an actual <h1 /> tag with an empty foo attribute.

Should seapig remove the designated props from the component?

We could do this by using React.createElement to clone the child and remove the designated props. It could look something like this:

// https://github.com/enkidevs/seapig/blob/master/src/index.js#L80
Children.toArray(children).forEach(child => {
    if (!child) {
      return;
    }

    const propName = propNames.find(p => child.props[p]) || REST;

    // clone the child and remove the designated prop from it
    const childType = child.type;
    const newProps = { ...child.props };
    delete newProps[propName];
    const newChild = createElement(childType, newProps);

    result[propName === REST ? propName : convertPropname(propName)].push(
      newChild
    );
  });