wikiwi / reassemble

Fast Library for the Composition of React Higher-Order-Components
MIT License
65 stars 2 forks source link

aliasing `assemble` as `compose` is misleading #4

Open atomanyih opened 7 years ago

atomanyih commented 7 years ago

recompose's compose allows you to compose any HoC (or function for that matter)

Transitioning from recompose to reassemble is actually more complicated because of this

If you have code that looks like this in recompose

import {withProps, compose} from 'recompose';
const enhance = compose(
  withProps(whatever),
  customHOC,
);

It's reasonable to expect this to work in reassemble

import {withProps, compose} from 'reassemble';

const enhance = compose(
  withProps(whatever),
  customHOC,
);

Instead you have write this:

import {compose} from 'recompose'; // or lodash or whatever
import {withProps, assemble} from 'reassemble';

const enhance = compose(
  assemble(
    withProps(whatever)
  ),
  customHOC
);

I think that assemble shouldn't be aliased as compose — it's nice in theory but is problematic if you're transitioning from a codebase with recompose and a lot of custom HoC

It's also not clear at first glance why it is failing; in our case it throws up some propType errors and doesn't render properly. It would be easier to understand if it could throw an error or print a warning if you pass a non-composable to assemble


btw thanks for making this library! I love recompose, but the devtool ballooning problem has kept me from using it more extensively. I've already converted a number of HoC in our codebase to use reassemble

smeijer commented 7 years ago

True for this. Converting code is not as simple as replace compose with assemble

This doesn't work for example:

assemble(
  connect(), // react-redux/connect
  withHandlers({
    requestSubmit: ({ form, dispatch }) => () => {
      dispatch(submit(form)); // ERR: dispatch is `undefined`
    },
  }),
),

The correct working way would be:

compose(     // recompose/compose
  connect(), // react-redux/connect
  assemble(  // reassemble/assemble
    withHandlers({
      requestSubmit: ({ form, dispatch }) => () => {
        dispatch(submit(form));
      },
    }),
  ),
);