Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 15.6 migration #13321

Closed
jsnmoon opened this issue Apr 22, 2017 · 5 comments
Closed

React 15.6 migration #13321

jsnmoon opened this issue Apr 22, 2017 · 5 comments
Assignees
@jsnmoon
Labels
Framework [Type] Janitorial

Comments

@jsnmoon
Copy link
Contributor

jsnmoon commented Apr 22, 2017 •
edited
Loading

Context

React 15.6 has several deprecations that would impact us, so I thought others might find these findings useful.

Status

See this project for our current progress.

Summary of Deprecations (that affect Calypso)

React.PropTypes

  • Recommended drop-in replacement: prop-types package
  • npm run codemod react-proptypes ./client/your-directory

React.createClass

  • Recommended replacement: React.Component (or React.PureComponent if react-addons-pure-render-mixin was used).
  • npm run codemod react-create-class ./client/your-directory

react-addons-*

  • The following have no drop-in replacements and will require manual intervention.
    • react-addons-create-fragment
    • react-addons-linked-state-mixin
  • The following have drop-in replacements:
    • react-addons-css-transition-group with react-transition-group/CSSTransitionGroup
    • react-addons-update with immutability-helper

Custom Calypso mixins will need to be migrated manually.

  1. i8n mixin auto-injection (many files)
  2. lib/mixins/emitter (72 files)
  3. lib/mixins/data-observe (43 files)
  4. lib/mixins/analytics (28 files)
  5. me/event-recorder (20 files)
@jsnmoon jsnmoon self-assigned this Apr 22, 2017
@jsnmoon jsnmoon mentioned this issue Apr 22, 2017
Closed
11 tasks
@jsnmoon jsnmoon added [Status] In Progress [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it labels Apr 22, 2017
@ockham
Copy link
Contributor

ockham commented Apr 27, 2017

Due to our use of the auto-injected i18n mixin, it might be worth looking into that before running the createClass -> (ES6 class) Component codemod, since that would need to ignore basically anything that calls this.translate.

@ockham
Copy link
Contributor

ockham commented Apr 27, 2017 •
edited
Loading

Hopefully, we can write a codemod that uses that one util from react codemods to locate createClass instances, check if they contain this.translate, and if they do, change that to this.props.translate, and wrap the component in localize().

@spen
Copy link
Contributor

spen commented Apr 27, 2017

#10268 is closed but I'm aiming to reopen and polish it a little bit soon. The original mixin is only used in a couple of places but, still, we'll need to squish it :)
(Incase you wanted to add that to the list)

@ockham
Copy link
Contributor

ockham commented May 8, 2017

Hopefully, we can write a codemod that uses that one util from react codemods to locate createClass instances, check if they contain this.translate, and if they do, change that to this.props.translate, and wrap the component in localize().

#13759

@jsnajdr
Copy link
Member

jsnajdr commented May 11, 2017

Codemod to remove react-addons-linked-state-mixin is in progress here: #13925

@Copons Copons mentioned this issue May 31, 2017
Merged
Copons added a commit that referenced this issue Jun 1, 2017
@Copons
Comments: Add actions transitions and notices (#14593)
7d26e19 
Introduce in the Comment Management lists both a quick fade out transition for disappearing comments and an undoable global notice in response to actions.

## Changes

- Add `ReactCSSTransitionGroup` to handle a fade out transition on component unmount.
Please note that `ReactCSSTransitionGroup` is deprecated as of React 15.0, and its replacement is tracked in #13321.

- Add global notices in response to actions performed on comments.
  - All notices (except "Delete Permanently") feature an Undo button, that simply fires the `setCommentStatus` method with the previous comment status.
  - Undos don't trigger any notice, and are therefore not undoable directly in the notice (they can of course be undone by via comment action).
  - The notices are not stacked together, but performing multiple actions on the same comment (e.g. `approve -> unapprove -> approve -> etc.`) only displays one single notice containing the last performed action.
In other words, we display one notice top for each actioned comment.
  - The notices are set to last 5 seconds before automatically disappearing.
  - The notices are persistent on route changes.
This is to prevent them to disappear when changing Comment Management list.
The side effect, though, is that undoing a notice while outside the Comment Management would trigger the `setCommentStatus` method of the `CommentList` component, which is not mounted anymore.
@jsnmoon jsnmoon changed the title React v15.5 migration preparation React v15.5 migration Oct 3, 2017
@jsnmoon jsnmoon mentioned this issue Oct 3, 2017
Merged
@jsnmoon jsnmoon changed the title React v15.5 migration React v15.6 migration Oct 4, 2017
This was referenced Oct 4, 2017
Closed
Merged
@jsnmoon jsnmoon changed the title React v15.6 migration React 15.6 migration Oct 4, 2017
@jsnmoon jsnmoon removed [Status] In Progress OSS Citizen [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it [Type] Task labels Oct 9, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jsnmoon jsnmoon

Labels
Framework [Type] Janitorial
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@ockham @jsnajdr @designsimply @jsnmoon @spen @rachelmcr @matticbot