Componentes dentro de funções ou variáveis

class User {
  render() {
    return (
      const { loading, user } = this.props;
      const Loader = loading && <div>Loading...</div>;
      
      <div>
        <Loader />
        {!loading && this.renderUser()}
      </div>
    );
  }
  
  renderUser() {
    const { user } = this.props;
    
    if (!user) {
      return null;
    }
    
    return (
      <div>
        {user.name}
      </div>
    );
  }
}

O problema é que o plugin extractJSXElements anda por cada elemento JSX, verifica se é um componente e se já foi importado, caso contrário o element é ignorado. No caso <Loader /> será lido porém ignorado, pois não é um componente que foi importado. No caso this.renderUser() os elementes dentro da função serão interpretados, mas é preciso verificar se a ordem da estrutura será correta.

Componentes com children definidas no código

const UserModal = props => (
  <Modal>
    <div>Does it work?</div>
  </Modal>
);

Problema semelhante ao DEV-199, é necessário verificar se quando a estrutura foi recebida do Megan o children do Modal será reescrito.

Props

Pensei em problemas com props sendo reescritas pelo Megan quando não queremos... Existe esse cara DEV-179, mas talvez seja necessário ignorar prop vinda do Megan se ela foi definida no código. Pensei nesse caso:

const Form = props => (
  <form>
    // ...fields
    <Button label={ props.loading ? 'Loading...' : 'Save' }/>
  </form>
)

A prop label não teria mais essa lógico, pois sempre seria reescrita pelo Megan, mas ela não pode ser uma prop privada, pois poderá ser definida pelo Megan em outros casos:

const Page = props => (
  <div>
    // ...
    <Button />
  </div>
)

Nesse caso 'queremos' que as props do <Button> venham do Megan.