moroccanoss / react-stoon Goto Github PK

it will be nice to add a willUnmount prop to LifeCycleAware component, I already did it in my fork.
edit:
here's my pull request #18

add a flag that flattens the prop that gets passed to Repeat's children

const MyList = (items) => {
   <Repeat foreach={items} flatten>
      <MyListItem />
   </Repeat>
}

const MyListItem = ({value}) => <Text>{value}</Text>

allow creating new component using this syntax:

const MyComponent = Show.of(Text);

and applying it as follows:

<MyComponent showIf={true}>Hey</MyComponent>

Hi @Amine-H I like the new release, the helpers look clean 👍

There is a little issue, Show supports only returning one element.

This will not work:

<Show if={true}>
  <ProjectItem />
  <p>Other element</p>
</Show>

React 16 supports this with Fragments, not sure if it will create compatibility issues with projects using older versions.

export default (props) => {
  const { if: visible, children } = props;
  if(visible){
    return <React.Fragment> {children} </React.Fragment>
  }

  return null;
}

Let me know if you have some solutions in mind.

Hi! nice idea 👍 🥇

I tried the Show helper and here are some thoughts:

Show only work for React components, For example, this will not work:

<Show $={"img"} if={imageLink != ""}>
  <img src={imageLink} />
</Show>

And while it works well for Components, the Show syntax mixes with the application logic 😢
For example, JS conditional:

{ 
  project && <ProjectItem onDelete={this.deleteProject} project={project} />
}

After applying Show helper:

<Show
  $={ProjectItem}
  if={project}
  onDelete={this.deleteProject}
  project={project}
/>

In the code above Show dominated the component & it's props 😈
instead, we could have this:

<Show if={project} />
  <ProjectItem onDelete={this.deleteProject} project={project} />
</Show>

In the last syntaxe Show will only decide if or not to render, without taking care of props or other stuff.

It would be cool if Show works only as a conditional helper & for both React and Dom elements.

Let me know what you think.

We know generalized imports blow bundle sizes and increase the script evaluation and compilation time. So, In this issue I am requesting a new feature which helps you specify only the components you need to import.

import Show from "react-stoon/Show";
import Repeat from "react-stoon/Repeat";

I think we still end up loading some useless code even with module bundlers like Webpack's best optimization tricks like taking down dead code using tree shaking before we load our code to the browser. But because most of EcmaScript latest features are now available natively in the some browsers. Some people may not even bother bundling up their code and directly start importing their modules.

<script type="module" src="./script.js"></script>

I thought I would issue this before I start working on it.