zanettin/incompose

A inferno utility belt for function components and higher-order components

incompose's Issues

missing componentFromStream helper

The componentFromStream helper is the main reason I use recompose, and I noticed it was absent here.

withLifecycle crashes inferno-devtools

Hi dear compatriot (quick guess) ;)

Very first day with Inferno 🔥 here (I'm even impressed with how smooth things are going so far).

I'm just facing an issue when I try to use withLifecycle. inferno-devtools is crashing on me:

Uncaught TypeError: Cannot read property 'bind' of undefined
    at createReactCompositeComponent (inferno-devtools.js:332)
    at updateReactComponent (inferno-devtools.js:249)
    at createReactCompositeComponent (inferno-devtools.js:336)
    at updateReactComponent (inferno-devtools.js:249)
    at Object.componentAdded (inferno-devtools.js:163)
    at inferno.options.afterMount (inferno-devtools.js:441)
    at Array.<anonymous> (inferno.node.js:2215)
    at Lifecycle.trigger (inferno.node.js:77)
    at Object.render (inferno.node.js:2507)
    at Object.<anonymous> (index.js:21)

Inferno v4 is launching soon

Hi

We are about to launch inferno v4. I believe this library needs to be updated.
For breaking changes see: https://github.com/infernojs/inferno/tree/docs-v4

Error when withState is composed

Deps:

"@babel/core": "^7.4.4",
"incompose": "^4.0.0-alpha.1",
"inferno": "^7.1.12",

To reproduce:

import { compose, withProps } from 'incompose';

export default compose(
  withProps({ foo: 'bar '}),
  withState('state', 'setState', null),
)(() => <span>Dummy template</span>);

In this case withProps hoc will try to call returned class from withState as a function.

Babel will throw error: TypeError: Cannot call a class as a function

Error when trying to import shouldUpdate

Hey,

I'm getting the following error when trying to import shouldUpdate:

Failed to compile.

Error in ./~/incompose/dist/withLifecycle.js
Module not found: 'inferno-create-element' in /Users/.../node_modules/incompose/dist

 @ ./~/incompose/dist/withLifecycle.js 14:28-61

Any ideas?

Thanks

Update:
I also get it if I try to use named imports:

import {
  compose,
  withState
} from 'incompose';

But default imports work:

import compose from 'incompose/dist/compose';
import withState from 'incompose/dist/withState';

Clarification

Can you please explain how incompose adds to recompose?

typescript types?

Noticed that infernojs was written in typescript and this project was referenced in the docs for infernojs, but when I searched I couldn't find any types for this project. Would be nice to have given the good support in the main library.

withLifecycle method doesn't have access to domNode

domNode is acccessiable when using onComponentDidMount passed from parent. But it isn't accessible when using compose > withLifecycle method.

withState can only be used once

I'm trying to use withState to set several setFoo functions but only one is ever applied. The others are ignored and throw undefined errors when used. My Example:

const withStates = [
  withState('result', 'setResult', 0),
  withState('a', 'setA', 0),
  withState('b', 'setB', 0)
];

Only setB is set. This worked early march but now seems to be broken.

TypeError: Cannot add property, object is not extensible

Versions:

{
  "incompose": "^4.0.0-alpha.1",
  "inferno": "^6.1.4"
}

I am attempting to use incompose like this:

import { compose, withState, withHandlers } from 'incompose'
import NavLink from 'inferno-bootstrap/lib/Navigation/NavLink'
import Button from 'inferno-bootstrap/lib/Button'
import Modal from 'inferno-bootstrap/lib/Modal/Modal'
import ModalHeader from 'inferno-bootstrap/lib/Modal/ModalHeader'
import ModalFooter from 'inferno-bootstrap/lib/Modal/ModalFooter'
import ModalBody from 'inferno-bootstrap/lib/Modal/ModalBody'

const LoginButton = ({ modal, toggle }) => (
  <NavLink onClick={toggle}>LOGIN
    <Modal isOpen={modal} toggle={toggle}>
      <ModalHeader toggle={toggle}>Login</ModalHeader>
      <ModalBody>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </ModalBody>
      <ModalFooter>
        <Button color='primary' onClick={toggle}>LOGIN</Button>{' '}
        <Button color='secondary' onClick={toggle}>CANCEL</Button>
      </ModalFooter>
    </Modal>
  </NavLink>
)

export default compose(
  withState('modal', 'setModal', false),
  withHandlers({
    toggle: ({ modal, setModal }) => e => {
      e.preventDefault()
      setModal(!modal)
    }
  })
)(LoginButton)

Immediately, on mount, I get this error:

×
TypeError: Cannot add property modal, object is not extensible
_class2.render
node_modules/incompose/dist/withState.js:176
  173 |   value: function render() {
  174 |     var _Object$assign;
  175 | 
> 176 |     return (0, _inferno.normalizeProps)((0, _inferno.createComponentVNode)(2, BaseComponent, _objectSpread({}, Object.assign(this.props, (_Object$assign = {}, _defineProperty(_Object$assign, stateName, this.state.stateValue), _defineProperty(_Object$assign, stateUpdaterName, this.updateStateValue), _Object$assign)))));
      | ^  177 |   }
  178 | }]);
  179 | 

If I remove withState('modal', 'setModal', false), it removes the error (but doesn't have the modal state.)

composability issue with class based hocs

This issue aligns with #23

I've been using the library in production for a pretty decent amount of time (big thanks for this 👍🏻). But I've ran into composability issues occasionally.

Such issues occur when consumer tries to compose multiple hocs one of which has "class" as a return value while other ones attempt to use it as a function.

For clarity here are some hocs that return "classes": withReducer, withPropsOnChange, withLifecycle

If you'll try to compose those with other hocs such as withProps or withHandlers you'll run into issue.

An example bellow will fail as #23

const Composed = compose(
  withProps({ foo: 'bar'  }),
  withPropsOnChange(() => true, props => props),
)(() => <span>Template</span>);

Next one will fail Uncaught TypeError: Cannot set property 'state' of undefined

const Composed = compose(
  withProps({ foo: 'bar'  }),
  withLifecycle({ componentDidMount: () => console.log('Hello') }),
)(() => <span>Template</span>);

I've expected those functions to works nicely together.
Please, correct me if I am wrong or missing the point behind this library design.

I think there are two way we can approach this issue.

1. Either by updating first set of hocs in the same manner as in #23

With this solution we kinda set a convention that every input component in composition should be functional. The drawback - we have to care about it manually

2. update another set of hocs replacing component function expressions into jsx (Component({ ...config, ...props }) into <Component {...config} {...props} />) or by using createElement Inferno API

With this solution we delegate the issues to Inferno layer

Let me know which solution you think is more preferable?