Upgrade path to React 16

[lukebarnard1]

This afternoon, I took a random detour to get Riot working with React 16, for the sake of investigating how difficult this would be. I succeeded, but obviously the diff is huge, so we might not want to do this "right now".

I did not manage to get the react-sdk tests working, primarily because matrix-react-test-utils needs similar treatment (being made compatible with React 16).

Steps to upgrade riot-web, matrix-react-sdk and matrix-react-test-utils:

• Update various npm dependencies to most recent versions:
  • draft-js-export-html
  • draft-js-export-markdown
  • react
  • react-dom
  • react-gemini-scrollbar
• Apply react-codemod JSCodeshifts on /src and /test
  • React-PropTypes-to-prop-types
    • will fail on trailing commas at the end of prop types
    • and where there is more than one "React.PropTypes" on a single line
  • class
    • Might render the box it's running on totally useless for a few minutes...
• s/react-addons-test-utils/react-dom\/test-utils/
• Fix cases where the React context API has changed(?)

[lampholder]

OOI was there an inspiration for this detour other than generally keeping framework use up to date?

[lukebarnard1]

My inspiration was primarily the number of times I've stared blankly at the logs when there's a bug that cause React to go wibbly and useless, requiring a refresh. This has been fixed in 16.

[akihikodaki]

I managed Riot work on React 16:
https://github.com/akihikodaki/riot-web/tree/react-16

Pull requests of dependent changes are open.

[lukebarnard1]

Assigning myself just to remind me that I want this to happen 😄 thanks @akihikodaki for doing all of this

[Half-Shot]

Assuming that since the move to Slate, the work required to do this has changed?

[t3chguy]

Current split of work:

• Stop using React.PropTypes: Replace React.PropTypes with usage of the prop-types package matrix-org/matrix-react-sdk#3263
• Update react-gemini-scrollbar to do the same: Merge branch 'master' of https://github.com/noeldelgado/react-gemini-scrollbar.git matrix-org/react-gemini-scrollbar#1 (or get rid of react-gemini-scrollbar)
• Either use the polyfill for createClass or transition to using ES classes Progress towards React 16 compatibility matrix-org/matrix-react-sdk#3276
• Make matrix-react-test-utils React 16 compatible (use peerDependencies)
• Upgrade to React 16
  • Migrate Context API this is not required

[turt2live]

react-gemini-scrollbar

We actually want to kill this with fire, if it makes it easier.

[t3chguy]

Is there any plan for this :D?

[turt2live]

There is the plan of "kill it with fire" but the implications haven't been thought out I don't think. I have opened #10474 to track it though.

[turt2live]

I've blocked this pending a release (see #10480 (review))

After that release, we should be good to go. Huge thanks to @t3chguy for taking this on!

[t3chguy]

In that case I'd really appreciate not letting it rot. Not letting things like React.createClass would be swell.

[turt2live]

Yup, it should be only a week or so - if it starts to get longer than that I already have reminders set to start screaming about the problem.

[turt2live]

see https://matrix.to/#/!DdJkzRliezrwpNebLk:matrix.org/$1568219990249171GhfVS:matrix.org?via=matrix.org&via=openintents.modular.im&via=vector.modular.im

We've decided to merge it to avoid delaying it, however to mitigate risk we're not merging react 16 features until after release (just in case there's some weird internal change in react 16 that breaks things). Should prevent it from bitrotting too much, and help make it possible for us to move forward.