Framework: Upgrade to React 15.1.0 #5116

ockham · 2016-04-29T11:57:15Z

Upgrade Calypso to React 15.1.0, and its peer dependencies to compatible versions (qrcode.react to 0.6.1, and react-tap-event-plugin to 1.0.0).

React blog entry with Changelog at https://facebook.github.io/react/blog/2016/04/07/react-v15.html
qrcode.react 0.6.1 Changelog: https://github.com/zpao/qrcode.react/blob/master/CHANGELOG.md#061---2016-04-13
(No changelog available for react-tap-event-plugin)

This is described as an upgrade with less impact than previous ones (like 0.13 -> 0.14). However, it's quite possible that I've missed subtle bugs, so please be sure to thorougly test the sections you're familiar with.

Most notably, React 15 removes implicit <span>s previously inserted around text nodes (considering them an implementation detail). Unfortunately, some of our styling relied on those <span>s. I tried to track them down (aided by visual regressions thanks to Flow Patrol, see p6jOYE-sc-p2). However, it is quite likely that I missed some of them, so I'd ask reviewers to watch out for styling oddities in those sections you're familiar with.

Furthermore, React 15 enables all SVG attributes -- but as with all things React, they're camelCased. We do have some inline <svg>s, but some of them have been using attributes like fill-rule that have been ignored. We should change those to camelCase. This will be more complicated with generated code (Gridicons, SocialLogos). Fortunately, AFAICS this doesn't seem to break any existing functionality, so we tackle this separately (#5950).

Deprecations:

LinkedStateMixin and valueLink are now deprecated due to very low popularity, so we should change our components to no longer rely on them (Framework: Don't use LinkedStateMixin and valueLink #5951).
React 15 warns you on a <input value={ null }> and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass undefined to make the input uncontrolled.

Note that the gruntwork for this PR was actually done in a number of separate, preparatory PRs (see linked merged PRs below). Some internal (undocumented) features our tests were relying on (__reactAutoBindMap!) were removed, so I fixed them beforehand to no longer rely on those features but only on documented ones.

Verified Working

Importer (@dmsnell)
SEO settings (@dmsnell)

Test live: https://calypso.live/?branch=update/react-15-0-1

aduth · 2016-05-02T17:13:54Z

If SVG changes are an optional enhancement, should we wait and make those changes after bumping the version, so as to reduce the likelihood of breakage?

ockham · 2016-05-02T21:06:14Z

If SVG changes are an optional enhancement, should we wait and make those changes after bumping the version, so as to reduce the likelihood of breakage?

Yeah, good idea. I branched off #5164 with the SVG inlining.

ockham · 2016-06-13T14:46:54Z

Potentially unreached/unused style block (cc @jancavan @blowery ):

wp-calypso/client/reader/_style.scss

Lines 134 to 151 in de5eba6

p.reblog-source {

position: relative;

top: 16px;

font-family: $sans;

font-size: 15px;

padding-top: 5px;

border-top: 1px solid lighten( $gray, 30% );

a {

padding: 5px 10px;

display: block;

text-align: center;

}

span {

display: none;

}

}

I came across that one, and I think that class is probably provided as part of some pre-rendered markup by an endpoint (reader related?).

ockham · 2016-06-13T14:56:56Z

One more:

https://github.com/Automattic/wp-calypso/blob/de5eba6/client/my-sites/upgrades/checkout/privacy-protection-example.jsx (styles)

4794ec7

blowery · 2016-06-13T16:52:51Z

I came across that one, and I think that class is probably provided as part of some pre-rendered markup by an endpoint (reader related?).

Yup, generated by the API / Reader API for reblogs.

blowery · 2016-06-13T16:56:08Z

Can we rebase this and re-shrinkwrap it now that immutable has been bumped to match react 15 and interpolate-components@1.0.5 is on react 15 too?

I'd just do it but I don't want to break others that might have outstanding work on the branch.

ockham · 2016-06-15T13:10:36Z

@blowery Rebased, reshrunk.

blowery · 2016-06-15T15:01:49Z

@ockham woo! shinkwrap looks so much better!

gwwar · 2016-06-16T00:08:59Z

👍 Looking great!

For React 15 compatibility: * qrcode.react 0.6.1 Changelog: https://github.com/zpao/qrcode.react/blob/master/CHANGELOG.md#061---2016-04-13 * react-tap-event-plugin 1.0.0

Tests relied on React text elements being wrapped in `<span>`s. The React team considers this behavior an implementation detail and thus [removed](https://facebook.github.io/react/blog/2016/04/07/react-v15.html#no-more-extra-ltspangts) it with React 15, replacing them with comments inserted around text nodes. Text nodes, however, obviously don’t have `innerHtml()`, so we need to use `textContent()` instead, dropping all checks that relied on HTML being returned. Also, when checking for suggested matches, e.g. when entering `’t’`, we were previously checking for `[ '', ’t’, 'he‘ ]`. Since there is no text node inserted for the empty string parts, we need to change checks like these to `[ '', ’t’, 'he‘ ]` instead. Note that this can also be considered an implementation detaill that doesn’t affect functionality — the `TokenField` will continue to suggest the right things, as empty strings weren’t displayed or styled before anyway.

…de)Text Since it's really text now that those functions return.

Up to React 15, React text elements were being wrapped in `<span>`s. The React team considered this behavior an implementation detail and thus [removed](https://facebook.github.io/react/blog/2016/04/07/react-v15.html#no-more-extra-ltspangts) it with React 15, replacing them with comments inserted around text nodes. However, some of our styling relied on those spans. This commit seeks to re-add those `span`s manually, or adapt the styling where applicable. Essentially, I looked for SASS selectors like `span {` or `span,` and searched for the corresponding React code.

`commentHref` has been obsolete since #4849.

blowery · 2016-06-16T14:02:51Z

Tested reader, seems to work as expected

ockham · 2016-06-16T14:25:06Z

Thanks for reviewing @aduth @blowery @gwwar!

ockham self-assigned this Apr 29, 2016

ockham added [Feature Group] Appearance & Themes Features related to the appearance of sites. Framework [Status] In Progress and removed [Feature Group] Appearance & Themes Features related to the appearance of sites. labels Apr 29, 2016

This was referenced Apr 29, 2016

Framework: Upgrade react-day-picker to 1.3.2 #5129

Merged

Framework: Add makeLayout #5081

Merged

ockham force-pushed the update/react-15-0-1 branch 3 times, most recently from be6d234 to f95e405 Compare May 2, 2016 15:27

ockham mentioned this pull request May 2, 2016

Inline SVGs #5164

Merged

4 tasks

ockham force-pushed the update/react-15-0-1 branch 5 times, most recently from 731781d to e99f1ec Compare May 4, 2016 11:27

ockham changed the title ~~Framework: Upgrade to React 15.0.1~~ Framework: Upgrade to React 15.0.2 May 4, 2016

This was referenced May 4, 2016

ThemesList: Use localize() #5221

Merged

Tests: Add translate directly to component prototypes #5223

Merged

ockham force-pushed the update/react-15-0-1 branch 2 times, most recently from 0d123da to 5b3c3fb Compare May 12, 2016 14:19

ockham force-pushed the update/react-15-0-1 branch from 57f1e18 to e4e6796 Compare May 13, 2016 17:27

This was referenced May 13, 2016

Theme Component: Turn 'More' button into ES6 class #5381

Merged

DropZone: ES6ify (preparing for React 15 upgrade) #5383

Merged

ockham force-pushed the update/react-15-0-1 branch 2 times, most recently from 92eb728 to f71d563 Compare May 16, 2016 12:29

ockham mentioned this pull request May 16, 2016

Upgrades: Use enzyme for CartButtons test, use localize for CartButtons #5400

Merged

ockham force-pushed the update/react-15-0-1 branch from f71d563 to 9248a63 Compare May 16, 2016 21:44

ockham mentioned this pull request Jun 13, 2016

package.json: Bump interpolate-components to 1.0.5 Automattic/i18n-calypso#3

Merged

seear mentioned this pull request Jun 14, 2016

Themes: Fix 'more' button links in IE11 #5855

Closed

ockham mentioned this pull request Jun 15, 2016

Framework: Bump i18n-calypso to 1.2.0 #6054

Merged

ockham force-pushed the update/react-15-0-1 branch from 4794ec7 to dfebf43 Compare June 15, 2016 13:10

ockham added 11 commits June 16, 2016 15:33

Framework: Upgrade to React 15.1.0, plus two peer dependencies

e788bb8

For React 15 compatibility: * qrcode.react 0.6.1 Changelog: https://github.com/zpao/qrcode.react/blob/master/CHANGELOG.md#061---2016-04-13 * react-tap-event-plugin 1.0.0

s/fill-rule/fillRule

83d6d46

TokenField test: Placate ESLint

6cbed2a

TokenField test: Rename getSuggestions(Node)HTML to getSuggestions(No…

2b57477

…de)Text Since it's really text now that those functions return.

TrackInputChanges test: Update expected error message to match React 15

9c15968

EditorVisibility: Lint

76b6a7d

Post: Lint

a482703

Post: Remove obsolete variable

e9ca130

`commentHref` has been obsolete since #4849.

s/enable-background/enableBackground

e76e014

ockham force-pushed the update/react-15-0-1 branch from dfebf43 to e76e014 Compare June 16, 2016 13:34

ockham merged commit bf91d01 into master Jun 16, 2016

ockham deleted the update/react-15-0-1 branch June 16, 2016 14:24

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jun 16, 2016

ockham mentioned this pull request Jun 16, 2016

Themes: Details page fails to load on IE11 #5766

Closed

yoavf mentioned this pull request Jun 19, 2016

i18n: community translator is broken #6139

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Framework: Upgrade to React 15.1.0 #5116

Framework: Upgrade to React 15.1.0 #5116

ockham commented Apr 29, 2016 •

edited by dmsnell

Loading

aduth commented May 2, 2016

ockham commented May 2, 2016

ockham commented Jun 13, 2016

ockham commented Jun 13, 2016 •

edited

Loading

blowery commented Jun 13, 2016

blowery commented Jun 13, 2016 •

edited

Loading

ockham commented Jun 15, 2016

blowery commented Jun 15, 2016

gwwar commented Jun 16, 2016

blowery commented Jun 16, 2016

ockham commented Jun 16, 2016

Framework: Upgrade to React 15.1.0 #5116

Framework: Upgrade to React 15.1.0 #5116

Conversation

ockham commented Apr 29, 2016 • edited by dmsnell Loading

aduth commented May 2, 2016

ockham commented May 2, 2016

ockham commented Jun 13, 2016

ockham commented Jun 13, 2016 • edited Loading

blowery commented Jun 13, 2016

blowery commented Jun 13, 2016 • edited Loading

ockham commented Jun 15, 2016

blowery commented Jun 15, 2016

gwwar commented Jun 16, 2016

blowery commented Jun 16, 2016

ockham commented Jun 16, 2016

ockham commented Apr 29, 2016 •

edited by dmsnell

Loading

ockham commented Jun 13, 2016 •

edited

Loading

blowery commented Jun 13, 2016 •

edited

Loading