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.

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

Update to react 16 #792

Merged
merged 24 commits into from
Oct 9, 2017
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
dccc8de
Correct all deprecation warnings in addons
BookOfGreg Sep 27, 2017
373f45a
Update React and React-dom to 16
BookOfGreg Sep 27, 2017
68c9ed2
Prebundle React16 and new addons
BookOfGreg Sep 27, 2017
c616ee5
Update generator to React 16 proptypes and ES6 export
BookOfGreg Sep 29, 2017
c87d890
Include react-create-class in generator for non-es6
BookOfGreg Sep 29, 2017
3cf34fb
Update test fixtures to use createReactClass
BookOfGreg Sep 29, 2017
cb66e31
Migrate more tests to React16, add createReactClass to dummyw3
BookOfGreg Sep 30, 2017
7e450ab
Add reactCreateBuild to addons
BookOfGreg Sep 30, 2017
32c9df3
Replace therubyracer with mini_racer
BookOfGreg Sep 30, 2017
e594694
Add PropTypes to default react bundle
BookOfGreg Sep 30, 2017
896b4fc
Update README on PropType
BookOfGreg Sep 30, 2017
6b0b878
Webpacker error changed, dont yell at JS errors
BookOfGreg Sep 30, 2017
57f7adc
Stop scanning for React in JSX
BookOfGreg Sep 30, 2017
61462c5
Merge update-to-chromedriver-for-js-tests into update-to-react-16
BookOfGreg Sep 30, 2017
aa65c48
Replace React.DOM with React.createElement
BookOfGreg Sep 30, 2017
4b73b9f
Add Proptypes to React with addons
BookOfGreg Oct 1, 2017
8ab2c7b
Remove Addons distributables
BookOfGreg Oct 1, 2017
1ba1110
Stop checking for reactid as createElement doesnt make one
BookOfGreg Oct 1, 2017
18faeed
Remove final references to React.createClass
BookOfGreg Oct 1, 2017
a8a9cd2
Give Webpacker ES6 import always
BookOfGreg Oct 1, 2017
8883be9
Dont reference react where it can be compiled
BookOfGreg Oct 1, 2017
691d2aa
Touch a file after a second to make it compile on fast computers
BookOfGreg Oct 1, 2017
0c1e60c
Merge resolved
BookOfGreg Oct 2, 2017
d7adca6
Reorder appraisal file so I get the most interesting failures first
BookOfGreg Oct 2, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41,484 changes: 21,523 additions & 19,961 deletions lib/assets/react-source/development-with-addons/react-server.js

Large diffs are not rendered by default.

37,164 changes: 17,792 additions & 19,372 deletions lib/assets/react-source/development-with-addons/react.js

Large diffs are not rendered by default.

22,520 changes: 3,892 additions & 18,628 deletions lib/assets/react-source/development/react-server.js

Large diffs are not rendered by default.

34,057 changes: 16,541 additions & 17,516 deletions lib/assets/react-source/development/react.js

Large diffs are not rendered by default.

27 changes: 6 additions & 21 deletions lib/assets/react-source/production-with-addons/react-server.js

Large diffs are not rendered by default.

27 changes: 6 additions & 21 deletions lib/assets/react-source/production-with-addons/react.js

Large diffs are not rendered by default.

22 changes: 2 additions & 20 deletions lib/assets/react-source/production/react-server.js

Large diffs are not rendered by default.

25 changes: 5 additions & 20 deletions lib/assets/react-source/production/react.js

Large diffs are not rendered by default.

42 changes: 25 additions & 17 deletions lib/generators/react/component_generator.rb
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,31 @@ class ComponentGenerator < ::Rails::Generators::NamedBase
desc: 'Output coffeescript based component'

REACT_PROP_TYPES = {
'node' => 'React.PropTypes.node',
'bool' => 'React.PropTypes.bool',
'boolean' => 'React.PropTypes.bool',
'string' => 'React.PropTypes.string',
'number' => 'React.PropTypes.number',
'object' => 'React.PropTypes.object',
'array' => 'React.PropTypes.array',
'shape' => 'React.PropTypes.shape({})',
'element' => 'React.PropTypes.element',
'func' => 'React.PropTypes.func',
'function' => 'React.PropTypes.func',
'any' => 'React.PropTypes.any',
'node' => 'PropTypes.node',
'bool' => 'PropTypes.bool',
'boolean' => 'PropTypes.bool',
'string' => 'PropTypes.string',
'number' => 'PropTypes.number',
'object' => 'PropTypes.object',
'array' => 'PropTypes.array',
'shape' => 'PropTypes.shape({})',
'element' => 'PropTypes.element',
'func' => 'PropTypes.func',
'function' => 'PropTypes.func',
'any' => 'PropTypes.any',

'instanceOf' => ->(type) {
'React.PropTypes.instanceOf(%s)' % type.to_s.camelize
'PropTypes.instanceOf(%s)' % type.to_s.camelize
},

'oneOf' => ->(*options) {
enums = options.map{ |k| "'#{k.to_s}'" }.join(',')
'React.PropTypes.oneOf([%s])' % enums
'PropTypes.oneOf([%s])' % enums
},

'oneOfType' => ->(*options) {
types = options.map{ |k| "#{lookup(k.to_s, k.to_s)}" }.join(',')
'React.PropTypes.oneOfType([%s])' % types
'PropTypes.oneOfType([%s])' % types
}
}

Expand Down Expand Up @@ -129,15 +129,23 @@ def component_name

def file_header
if webpacker?
%|var React = require("react")\n|
if options[:es6]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it important to distinguish between these two varieties of preprocessed JS? I mean, what's the scenario where you want require(...) but not import?

Anyone who's using webpacker will probably already use Babel (for JSX), right? So do you think one of these options would be sufficient by itself?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was tempted to scrap all the old style generators but was not sure on the effect it would have with sprockets + babel transpiler. I did what looked safe given I still don't fully know the system and saw the option[:es6] used nearby in the same file.
Will continue on this path a little this afternoon, seems like the most pressing issue for now, then maybe the HMR ( 793 ) thing after once I get time.

%|import React from "react"\nimport PropTypes from "prop-types"\n|
else
%|var React = require("react")\nvar PropTypes = require("prop-types")\nvar createReactClass = require('create-react-class');|
end
else
''
end
end

def file_footer
if webpacker?
%|module.exports = #{component_name}|
if options[:es6]
%|export default #{component_name}|
else
%|module.exports = #{component_name}|
end
else
''
end
Expand Down
2 changes: 1 addition & 1 deletion lib/generators/templates/component.js.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<%= file_header %>var <%= component_name %> = React.createClass({
<%= file_header %>var <%= component_name %> = createReactClass({
<% if attributes.size > 0 -%>
propTypes: {
<% attributes.each_with_index do |attribute, idx| -%>
Expand Down
12 changes: 4 additions & 8 deletions react-builds/addons-object.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
var addons = {};
addons.TransitionGroup = require("react-addons-transition-group");
addons.CSSTransitionGroup = require("react-addons-css-transition-group");
addons.LinkedStateMixin = require("react-addons-linked-state-mixin");
addons.createFragment = require("react-addons-create-fragment");
addons.update = require("react-addons-update");
addons.PureRenderMixin = require("react-addons-pure-render-mixin");
addons.TransitionGroup = require("react-transition-group/TransitionGroup");
addons.CSSTransitionGroup = require("react-transition-group/CSSTransitionGroup");
addons.update = require("immutability-helper");

if (process.env.NODE_ENV !== "production") {
addons.TestUtils = require("react-addons-test-utils");
addons.Perf = require("react-addons-perf");
addons.TestUtils = require("react-dom/test-utils");
}

module.exports = addons;
14 changes: 4 additions & 10 deletions react-builds/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,10 @@
"description": "Prepares react-rails asset files",
"main": "react.js",
"dependencies": {
"react": "^15.3.0",
"react-addons-create-fragment": "^15.3.0",
"react-addons-css-transition-group": "^15.3.0",
"react-addons-linked-state-mixin": "^15.3.0",
"react-addons-perf": "^15.3.0",
"react-addons-pure-render-mixin": "^15.3.0",
"react-addons-test-utils": "^15.3.0",
"react-addons-transition-group": "^15.3.0",
"react-addons-update": "^15.3.0",
"react-dom": "^15.3.0",
"immutability-helper": "^2.4.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-transition-group": "1.1.1",
"webpack": "^1.12.2"
},
"scripts": {
Expand Down
119 changes: 28 additions & 91 deletions react-builds/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -282,14 +282,6 @@ core-util-is@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"

create-react-class@^15.6.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"

cryptiles@2.x.x:
version "2.0.5"
resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
Expand Down Expand Up @@ -417,18 +409,6 @@ fbjs@^0.8.16:
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"

fbjs@^0.8.4, fbjs@^0.8.9:
version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.9"

filename-regex@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
Expand Down Expand Up @@ -592,6 +572,12 @@ ieee754@^1.1.4:
version "1.1.8"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"

immutability-helper@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.4.0.tgz#00d421e2957c17f0f0781475f05ffd837e73458d"
dependencies:
invariant "^2.2.0"

indexof@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
Expand Down Expand Up @@ -619,6 +605,12 @@ interpret@^0.6.4:
version "0.6.6"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"

invariant@^2.2.0:
version "2.2.2"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
dependencies:
loose-envify "^1.0.0"

is-binary-path@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
Expand Down Expand Up @@ -1016,7 +1008,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10, prop-types@^15.5.6:
prop-types@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
dependencies:
Expand Down Expand Up @@ -1064,86 +1056,31 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"

react-addons-create-fragment@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8"
dependencies:
fbjs "^0.8.4"
loose-envify "^1.3.1"
object-assign "^4.1.0"

react-addons-css-transition-group@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.6.2.tgz#9e4376bcf40b5217d14ec68553081cee4b08a6d6"
dependencies:
react-transition-group "^1.2.0"

react-addons-linked-state-mixin@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-linked-state-mixin/-/react-addons-linked-state-mixin-15.6.2.tgz#0d47b71370b715b376dee02e468fc74188a24608"
react-dom@^16.0.0:
version "16.0.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"

react-addons-perf@^15.3.0:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"

react-addons-pure-render-mixin@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.6.2.tgz#6b83f40b6b36ee40735cbd6125eb3f13ce1cddc9"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"

react-addons-test-utils@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.2.tgz#c12b6efdc2247c10da7b8770d185080a7b047156"

react-addons-transition-group@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-transition-group/-/react-addons-transition-group-15.6.2.tgz#8baebc2ae91ccdbf245fe29c9fd3d36f8b471923"
dependencies:
react-transition-group "^1.2.0"

react-addons-update@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.6.2.tgz#e53753c5b34887974510c882d7fb075851d5e504"
dependencies:
fbjs "^0.8.9"
object-assign "^4.1.0"

react-dom@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
dependencies:
fbjs "^0.8.9"
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.10"
object-assign "^4.1.1"
prop-types "^15.6.0"

react-transition-group@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.0.tgz#b51fc921b0c3835a7ef7c571c79fc82c73e9204f"
react-transition-group@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.1.1.tgz#f9d0f0dff82f52574fc5ab30684add24948d0f23"
dependencies:
chain-function "^1.0.0"
dom-helpers "^3.2.0"
loose-envify "^1.3.1"
prop-types "^15.5.6"
warning "^3.0.0"

react@^15.3.0:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
react@^16.0.0:
version "16.0.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d"
dependencies:
create-react-class "^15.6.0"
fbjs "^0.8.9"
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.10"
object-assign "^4.1.1"
prop-types "^15.6.0"

"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.1.4, readable-stream@^2.2.6:
version "2.2.6"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var Todo = React.createClass({
var Todo = createReactClass({
render: function() {
return React.createElement("li", null, this.props.todo)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Todo = React.createClass
Todo = createReactClass
render: ->
`<li>{this.props.todo}</li>`

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
TodoList = React.createClass({
TodoList = createReactClass({
getInitialState: function() {
return({mounted: "nope"});
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
TodoListWithConsoleLog = React.createClass({
TodoListWithConsoleLog = createReactClass({
getInitialState: function() {
console.log('got initial state');
return({mounted: "nope"});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
WithSetTimeout = React.createClass({
WithSetTimeout = createReactClass({
componentWillMount: function () {
setTimeout(function () {}, 1000)
clearTimeout(0)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Component = React.createClass
Component = createReactClass
render: ->
`<ExampleComponent videos={this.props.videos} />`

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var HarmonyComponent = React.createClass({
var HarmonyComponent = createReactClass({
statics: {
generateGreeting() {
return "Hello Harmony!"
Expand Down
2 changes: 1 addition & 1 deletion test/dummy_sprockets/app/assets/javascripts/pages.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var GreetingMessage = React.createClass({
var GreetingMessage = createReactClass({
getInitialState: function() {
var initialGreeting = 'Hello';
if (typeof global !== "undefined" && global.ctx && global.ctx.greeting) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var Todo = React.createClass({
var Todo = createReactClass({
render: function() {
return React.createElement("li", null, this.props.todo)
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Todo = React.createClass
Todo = createReactClass
render: ->
`<li>{this.props.todo}</li>`

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
TodoList = React.createClass({
TodoList = createReactClass({
getInitialState: function() {
return({mounted: "nope"});
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
TodoListWithConsoleLog = React.createClass({
TodoListWithConsoleLog = createReactClass({
getInitialState: function() {
console.log('got initial state');
return({mounted: "nope"});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
WithSetTimeout = React.createClass({
WithSetTimeout = createReactClass({
componentWillMount: function () {
setTimeout(function () {}, 1000)
clearTimeout(0)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Component = React.createClass
Component = createReactClass
render: ->
`<ExampleComponent videos={this.props.videos} />`

Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var HarmonyComponent = React.createClass({
var HarmonyComponent = createReactClass({
statics: {
generateGreeting() {
return "Hello Harmony!"
Expand Down
2 changes: 1 addition & 1 deletion test/dummy_webpacker1/app/assets/javascripts/pages.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var GreetingMessage = React.createClass({
var GreetingMessage = createReactClass({
getInitialState: function() {
var initialGreeting = 'Hello';
if (typeof global !== "undefined" && global.ctx && global.ctx.greeting) {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
var React = require("react")
var createReactClass = require("create-react-class")

module.exports = React.createClass({
module.exports = createReactClass({
getInitialState: function() {
var initialGreeting = 'Hello';
if (typeof global !== "undefined" && global.ctx && global.ctx.greeting) {
Expand Down
Loading