react-virtualized: Version 10 breaking changes

Just came across this. Was going to file an issue to see if you wanted to consider a ResizeObserver 😆 I’d be willing to help try and push this through. I would suggest using the polyfill direct. It’s a pretty small amount of code to get it setup. As far as measuring goes, we can attach the observer to the parent node if we need to.

Currently I’m using only Table component (didn’t have a chance to use other components) and got lot of custom editable columns like checkboxes, inputs and selects.

To make them reusable i’m using factories like that:

const createCheckboxColumn = props => (
  <Column
    width={56}
    minWidth={56}
    label={props.label}
    dataKey={props.dataKey}
    disableSort={true}
    style={{ minWidth: `${56}px` }}
    headerClassName={cx(props.headerClassName, classes.checkboxColumn)}
    headerRenderer={() => (
      <Checkbox
        disabled={!props.rowCount}
        value={props.allRowsSelected}
        onChange={value => props.onAllRowsSelect(value)}
      />
    )}
    className={cx(props.className, classes.checkboxColumn)}
    cellDataGetter={row => row.rowData}
    cellRenderer={row => (
      <Checkbox
        value={props.rowSelected(row)}
        onChange={selected => props.onRowSelect({ selected, ...row })}
      />
    )}
  />
);

const table = (
  <Table {...props}>
    {createCheckboxColumn(checkboxProps)}
  </Table>
);

Not sure if it’s even a good idea in case of perf, but It would be great to have an option to make it work in “react way”:

const table = (
  <Table {...props}>
    <CheckboxColumn {...checkboxProps} />
  </Table>
);

From what i know there is no difference in named an default exports in terms of tree shakeability. default is just another named export which is treated in a little bit of special manner sometimes.

The problem with default export is that people sometimes use it in slightly wrong manner.

Exhibit A:

const Package = ...
Package.Other = ....
export default Package

Exhibit B

export default {
  foo,
  bar
}

What I think should not be dane is that a default export should not act as a namespace and should not gather other things that are intended to be reexported from the package.

You should be noticed react-measure works different than AutoSizer. AutoSizer measures dimensions outside of container, it helps underlying components, like Grid to calculate visible rows. react-measure measures dimensions inside of container.

@somi92 please follow the https://github.com/bvaughn/react-virtualized/milestone/1 milestone for updates!

Prefer named exports over defaults for better treeshakability.

I assume you mean this about default exports of objects that contain many (non-tree-shakeable) keys?

It wouldn’t actually make a difference in a case like:

export default SomeReactComponent
// vs
export SomeReactComponent

…right?

Want to formulate my ideas

• prefer resize-observer-polyfill to use chrome 64 feature and remove nonce prop
• find a way to not use findDOMNode maybe via ref callbacks in render props
• make WindowScroller universal for any component
• use WindowScroller in MultiGrid implementation and ScrollSync example
• find different examples of using ScrollSync. Freezing colums is bad case because of lagging and wheel blocking.
• remove scrollToRow, scrollToColumn, scrollToIndex in favor of ref public methods, since representing events/commands as state changing introduces a lot of bugs and inconsistences.
• Finish flow types
• remove proptypes babel plugin which generates untreeshakable commonjs

No, @pke. 😄 I definitely didn’t say that it would be deprecated soon.

This issue doesn’t imply that version 10 will be released any time soon.

This is just a placeholder issue for ideas that I don’t have time to work on now, and I don’t know when I will have time to work on them.