WIP -- conversion to ES6, npm for react_on_rails by justin808 · Pull Request #148 · shakacode/react_on_rails

justin808 · 2015-12-07T06:36:55Z

ReactOnRails.register({react1, react2}); to integrate with Rails! No more react_on_rails.js asset!

https://www.npmjs.com/package/react-on-rails
https://rubygems.org/gems/react_on_rails/versions/
Move JavaScript part of react_on_rails to npm package
'react-on-rails'.
Converted JavaScript code to ES6! with tests!
No global namespace pollution. ReactOnRails is the only global added.
New API. Instead of placing React components on the global namespace,
you instead call ReactOnRails.register, passing an object where keys
are the names of your components.
import ReactOnRails from 'react-on-rails'; ReactOnRails.registerComponent({name: component});
Best done with Object destructing
import ReactOnRails from 'react-on-rails'; ReactOnRails.registerComponent( { Component1, Component2 } );
Previously, you used
window.Component1 = Component1; window.Component2 = Component2;
This would pollute the global namespace. See details in the README.md
for more information.
Your jade template for the WebpackDevServer setup should use the new
API:
ReactOnRails.render(componentName, props, domNodeId);
such as:
ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');
All npm dependency libraries updated. Most notable is going to Babel
6.
Dropped support for react 0.13.
JS Linter uses ShakaCode JavaScript style:
https://github.com/shakacode/style-guide-javascript
Generators account these differences.

Other fixes and changes

Auto detection of generator function!
Previously, we could not have react installed as a devDependency at the
top level with react-on-rails, or else we get an obscure 'react is
included multiple times' error.

Fix is to add this to the webpack configs:

resolve: {
root: [path.join(__dirname, 'app')],
extensions: ['', '.js', '.jsx'],
fallback: [path.join(__dirname, 'node_modules')],
alias: {
react: path.resolve('./node_modules/react'),
"react-dom": path.resolve('./node_modules/react-dom'),
},
},

That ensures that react is only loaded from one place.

Also cleaned up linting and test scripts so that it's easier to run all
the tests.
Finish up the changes to the generators
Doc updates
Changed domId to domNodeId (thanks Rob and Alex)
Fixed generators to use new API of "registration" from "globals"
Fixed tests for generators
Updated doc to indicate directories to ignore
Change example apps to use Poltergeist for integration tests
Move coveralls push to Rakefile so we don't fail after running tests locally and short circuit the linters
Update technique for generatorFunction
See discussion on
https://discuss.reactjs.org/t/how-to-determine-if-js-object-is-react-component/2825/2
Change styling of gen app
fix issue with ruby-lint.yml
Fixed display of warning messages and stop app
add option to override stopping when you get warnings
Made the dumb component dumber, better formatting
Allows removal of bootstrap and better styling
Add resolveLoader to generated example apps' webpack.client.base.config.js
Shakacode linter style, switch to non-docker lint
Using eslint-config-shakacode
Created tutorial
Create rails3.md
Add migration steps to changelog.MD
VersionChecker only warns if major versions are different

See #128

justin808 · 2015-12-07T06:37:34Z

@yorzi Please take a look. I could not get this to start yet. Maybe you'll see the issue.

@alexfedoseev can you please take a look as well, both the setup and the ES6 conversion.

justin808 · 2015-12-07T11:09:45Z

@alexfedoseev Please review.
@yorzi Please see my last commit message and pick up from there.

yorzi · 2015-12-07T11:11:23Z

@justin808 👍 awesome work!

justin808 · 2015-12-07T11:14:12Z

@alexfedoseev the node module name of react_on_rails might be awkward. Should it be ReactOnRails? or react-on-rails?

import ReactOnRails from 'react_on_rails';

alex35mil · 2015-12-07T12:24:37Z

react-on-rails is more common in npm.

alex35mil · 2015-12-07T12:27:15Z

I changed it to just git push, b/c betas can be released from branches.

alex35mil · 2015-12-07T12:43:15Z

@justin808 LGTM! Few comments.

rstudner · 2015-12-07T13:06:38Z

Looks good!

justin808 · 2015-12-08T08:14:48Z

@yorzi Check out @alexfedoseev suggestions. I'm OK if you apply them.

Also, take a look at: https://github.com/umdjs/umd

We need to be sure we're properly installing the event handlers only ONCE. Probably can use some debug code until we're sure.

Let me know if you have questions.

justin808 · 2015-12-08T08:22:03Z

@yorzi Here's the list to do right now: 0ae1e8d

Not yet testing the registerComponent API

Provides warning messages if not registering

TODO:

Change examples to use

import ReactOnRails from 'react_on_rails';
ReactOnRails.registerComponent(name, component);

Look into moving the 'is generator function' part from the view helper
to the JS definition
Add JS tests with Tape
Fix generators
Add scenario for not registering and be sure that we still use the
globally defined one.

alex35mil · 2015-12-08T09:56:49Z

@yorzi Also if you'll decide to split sources of this module into few smaller sub-modules, webpack has build-in functionality to wrap build into UMD wrapper (link). Ping me if you have any questions.

yorzi · 2015-12-08T10:14:54Z

@alexfedoseev I had same idea to split current js into several small ones. Great hints!

yorzi · 2015-12-08T15:41:28Z

I can not understand this variable here. If we attach components to this components const, how should it work? (comparing to previous window.component_name or global.component_name) cc @justin808 @alexfedoseev

yorzi · 2015-12-12T13:08:49Z

There are some errors which might relate to babel-loader when using react-on-rails in dummy app. Log here: https://gist.github.com/yorzi/6bec9e9d757afca4c582 cc: @justin808

alex35mil · 2015-12-12T22:18:16Z

@yorzi Try to update to Babel 6 (shakacode/react-webpack-rails-tutorial@d67548b)

robwise · 2015-12-14T02:22:49Z

@yorzi It's up to you, I'm not sure which would be easier, but another option is to just move the tests from the dummy app to the dev_tests generator so they will get run on all of the example apps.

You will have to refactor some of them since some are server-rendering specific as well as test react-router, which we currently aren't generating. So the dev_tests generator will have to decide which tests to copy over for each of the server-rendering examples. Then we could just get rid of the dummy apps. That way we don't have this problem in the future, because they get stale very easily. This was one of the todo items in #92

However, this is probably a lot of work and you may want to just make a baby step with bringing the dummy apps up to speed first. It's up to you.

justin808 · 2015-12-26T10:59:48Z

@alexfedoseev @yorzi @robwise I just got it working with NPM! Tests will probably not pass remotely unless I push a version to npm. So I'll push 0.0.1 of react-on-rails.

justin808 · 2015-12-27T08:48:41Z

@alexfedoseev Any suggestions?

@yorzi See checklist at top of discussion.

register or registerComponent?

ReactOnRails.registerComponent('HelloWorld', HelloWorld, { generator: true });
ReactOnRails.registerComponent('HelloWorldWithLogAndThrow', HelloWorldWithLogAndThrow);

or

ReactOnRails.register('HelloWorld', HelloWorld, { generator: true });
ReactOnRails.register('HelloWorldWithLogAndThrow', HelloWorldWithLogAndThrow);

robwise · 2015-12-27T09:09:41Z

could we extract a variable or two just for readability; context is a boolean?

context is either window or global.

robwise · 2016-01-03T11:29:58Z

@justin808: I finally got it passing in CI. Currently we are using selenium firefox as the driver for spec/dummy and poltergeist for the generated example apps. We could:

A) Keep it as is
B) have @dylangrafmyre yak shave on getting spec/dummy to work with poltergeist
C) change generator apps to also use selenium firefox just for consistency's sake

justin808 · 2016-01-03T18:20:09Z

Selenium is firefox is fine for generated apps on CI.

justin808 · 2016-01-04T10:55:40Z

@robwise I've released rc.1 and I'm done with the tests. I think any remaining JS tests are largely covered by our integration tests.

I'd say if no serious issues are uncovered this week, we ship later in the week!

justin808 · 2016-01-09T10:40:06Z

@robwise @alexfedoseev How about we change the official linter setup to use: https://github.com/shakacode/style-guide-javascript/tree/master/packages/eslint-config-shakacode

alex35mil · 2016-01-09T10:41:48Z

@justin808 That's why we've made it :)

robwise · 2016-01-09T10:46:39Z

@justin808 @alexfedoseev Yep, definitely! And we need to test if the example apps are actually getting linted once and for all.

bensie · 2016-01-10T02:12:48Z

Looks like RC2 was tagged on GitHub, but not released to Rubygems or NPM. Can you do this or should I just wait for RC3 / final release?

justin808 · 2016-01-10T04:39:06Z

@bensie Give me a couple hours. I'll push up RC3!

justin808 · 2016-01-10T10:27:37Z

@bensie Please see 6bfc6ae or http://forum.shakacode.com/t/using-react-on-rails/451. Feedback appreciated.

bensie · 2016-01-10T20:38:00Z

@justin808 I'll give it a go shortly...thanks!

justin808 · 2016-01-12T11:01:27Z

I'm going to squash commits and merge to master tomorrow!

- Move JavaScript part of react_on_rails to npm package 'react-on-rails'. - Converted JavaScript code to ES6! with tests! - No global namespace pollution. ReactOnRails is the only global added. - New API. Instead of placing React components on the global namespace, you instead call ReactOnRails.register, passing an object where keys are the names of your components. ``` import ReactOnRails from 'react-on-rails'; ReactOnRails.registerComponent({name: component}); ``` Best done with Object destructing ``` import ReactOnRails from 'react-on-rails'; ReactOnRails.registerComponent( { Component1, Component2 } ); ``` Previously, you used ``` window.Component1 = Component1; window.Component2 = Component2; ``` This would pollute the global namespace. See details in the README.md for more information. - Your jade template for the WebpackDevServer setup should use the new API: `ReactOnRails.render(componentName, props, domNodeId);` such as: `ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');` - All npm dependency libraries updated. Most notable is going to Babel 6. - Dropped support for react 0.13. - JS Linter uses ShakaCode JavaScript style: https://github.com/shakacode/style-guide-javascript - Generators account these differences. Other fixes and changes * Auto detection of generator function! * Previously, we could not have react installed as a devDependency at the top level with react-on-rails, or else we get an obscure 'react is included multiple times' error. Fix is to add this to the webpack configs: resolve: { root: [path.join(__dirname, 'app')], extensions: ['', '.js', '.jsx'], fallback: [path.join(__dirname, 'node_modules')], alias: { react: path.resolve('./node_modules/react'), "react-dom": path.resolve('./node_modules/react-dom'), }, }, That ensures that react is only loaded from one place. Also cleaned up linting and test scripts so that it's easier to run all the tests. * Finish up the changes to the generators * Doc updates * Changed domId to domNodeId (thanks Rob and Alex) * Fixed generators to use new API of "registration" from "globals" * Fixed tests for generators * Updated doc to indicate directories to ignore * Change example apps to use Poltergeist for integration tests * Move coveralls push to Rakefile so we don't fail after running tests locally and short circuit the linters * Update technique for generatorFunction See discussion on https://discuss.reactjs.org/t/how-to-determine-if-js-object-is-react-component/2825/2 * Change styling of gen app * fix issue with ruby-lint.yml * Fixed display of warning messages and stop app * add option to override stopping when you get warnings * Made the dumb component dumber, better formatting * Allows removal of bootstrap and better styling * Add resolveLoader to generated example apps' webpack.client.base.config.js * Shakacode linter style, switch to non-docker lint * Using eslint-config-shakacode * Created tutorial * Create rails3.md * Add migration steps to changelog.MD * VersionChecker only warns if major versions are different

WIP -- conversion to ES6, npm for react_on_rails

* Misc spec example fixes

alex35mil reviewed Dec 7, 2015
View reviewed changes

Comment thread node_package/scripts/release

Copy link
Copy Markdown

Member

alex35mil Dec 7, 2015

Choose a reason for hiding this comment

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

I changed it to just git push, b/c betas can be released from branches.

yorzi reviewed Dec 8, 2015
View reviewed changes

justin808 force-pushed the npm-react-on-rails-js branch from 013c761 to 4c587db Compare December 18, 2015 06:48

justin808 force-pushed the npm-react-on-rails-js branch from 1dbb607 to 8a9a7ac Compare December 26, 2015 10:57

justin808 mentioned this pull request Dec 27, 2015

Create NPM module with the API (v2.0.0) #128

Closed

7 tasks

robwise reviewed Dec 27, 2015
View reviewed changes

justin808 force-pushed the npm-react-on-rails-js branch from 02fed06 to 10f2e24 Compare January 5, 2016 08:31

justin808 force-pushed the npm-react-on-rails-js branch 2 times, most recently from 634988e to 5b3f3c9 Compare January 10, 2016 07:44

robwise force-pushed the npm-react-on-rails-js branch 3 times, most recently from 972c205 to 5938d52 Compare January 13, 2016 14:56

justin808 force-pushed the npm-react-on-rails-js branch from a186ef5 to 8be023b Compare January 14, 2016 04:24

justin808 force-pushed the npm-react-on-rails-js branch from 8be023b to f7ef290 Compare January 14, 2016 04:31

justin808 added 2 commits January 13, 2016 20:58

Release 2.0.0-rc.4

ae2540d

Bump to 2.0.0.rc.4

0a0b558

justin808 force-pushed the npm-react-on-rails-js branch from e8fc79d to 0a0b558 Compare January 14, 2016 05:03

justin808 added 2 commits January 13, 2016 21:03

Update Gemfile.lock for spec/dummy

6d8cef5

Update releasing.md

3cbea9d

justin808 added a commit that referenced this pull request Jan 14, 2016

Merge pull request #148 from shakacode/npm-react-on-rails-js

51f77e0

WIP -- conversion to ES6, npm for react_on_rails

justin808 merged commit 51f77e0 into master Jan 14, 2016

justin808 deleted the npm-react-on-rails-js branch January 14, 2016 09:53

AbanoubGhadban pushed a commit that referenced this pull request Sep 25, 2025

Renamed vm-render to node-renderer (#148)

8094842

* Misc spec example fixes

AbanoubGhadban pushed a commit that referenced this pull request Sep 26, 2025

Renamed vm-render to node-renderer (#148)

b8b03ee

* Misc spec example fixes

Uh oh!

Conversation

justin808 commented Dec 7, 2015

Uh oh!

justin808 commented Dec 7, 2015

Uh oh!

justin808 commented Dec 7, 2015

Uh oh!

yorzi commented Dec 7, 2015

Uh oh!

justin808 commented Dec 7, 2015

Uh oh!

alex35mil commented Dec 7, 2015

Uh oh!

alex35mil Dec 7, 2015

Choose a reason for hiding this comment

Uh oh!

alex35mil commented Dec 7, 2015

Uh oh!

rstudner commented Dec 7, 2015

Uh oh!

justin808 commented Dec 8, 2015

Uh oh!

justin808 commented Dec 8, 2015

Uh oh!

alex35mil commented Dec 8, 2015

Uh oh!

yorzi commented Dec 8, 2015

Uh oh!

yorzi Dec 8, 2015

Choose a reason for hiding this comment

Uh oh!

yorzi commented Dec 12, 2015

Uh oh!

alex35mil commented Dec 12, 2015

Uh oh!

robwise commented Dec 14, 2015

Uh oh!

justin808 commented Dec 26, 2015

Uh oh!

justin808 commented Dec 27, 2015

Uh oh!

robwise Dec 27, 2015

Choose a reason for hiding this comment

Uh oh!

justin808 Dec 27, 2015

Choose a reason for hiding this comment

Uh oh!

robwise commented Jan 3, 2016

Uh oh!

justin808 commented Jan 3, 2016

Uh oh!

justin808 commented Jan 4, 2016

Uh oh!

justin808 commented Jan 9, 2016

Uh oh!

alex35mil commented Jan 9, 2016

Uh oh!

robwise commented Jan 9, 2016

Uh oh!

bensie commented Jan 10, 2016

Uh oh!

justin808 commented Jan 10, 2016

Uh oh!

justin808 commented Jan 10, 2016

Uh oh!

bensie commented Jan 10, 2016

Uh oh!

justin808 commented Jan 12, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants