reactjs / react-rails Goto Github PK
View Code? Open in Web Editor NEWIntegrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
License: Apache License 2.0
Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.
License: Apache License 2.0
I'd like to build a Rails-specific component library that could ship with react-rails, and am looking for feedback / ideas.
The specific ideas I have are:
Just to encapsulate the various fields that a Rails-y form expects, and give developers a somewhat familiar interface. I wouldn't try to re-implement polymorphic_path
, just to build enough that it doesn't have to be re-implemented every time.
This would need a helper method for server-side rendering, giving it the method, csrf token + value, errors, etc.
Something like this:
<Rails.Form
action={this.props.action}
method={this.props.method}
csrf={this.props.csrf}
for={this.props.for}
errors={this.props.errors}
>
....inputs, submits, etc...
</Rails.Form>
could output a form with a Rails-y class and name, CSRF token, action, and _method.
Encapsulate the Rails scaffold error list, which typically looks like this:
<% if @post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% @post.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
Should be able to insert
<Rails.Method value={this.props.method} />
<input type="hidden" name="_method" value="PUT" />
based on props passed from Rails.Form.
<Rails.CSRFToken name={this.props.tokenName} value={this.props.tokenValue} />
becomes
<input name="authenticity_token" type="hidden" value="abc123" />
For both this and the Rails.FormMethod component, the idea is that you would never directly need to call these - the Rails.Form component would set all this up for the user.
jquery_ujs
just looks for a before adjusting outgoing Ajax calls - react_ujs could do the same before inserting the CSRF token.
<Rails.FlashNotice />
would replace
<p class="notice"><%= notice %></p>
This might need some magic that I haven't thought through to make work, and might not be worth the effort, since most notices are going to be pretty custom to the app.
These ideas are very rough! I've not thought through how specifically I would surface the info these components need, but I've done a few of these in personal projects, and with a little cleanup, I think they could be very useful for developers.
Any thoughts or suggestions on this? Does it seem like a useful bit of code to include with react-rails, or should it be a separate gem? I lean towards thinking it belongs in react-rails, because I see react-rails as being a drop-in set of helpers and tools to get developers building in react right away.
It would be nice to be on the latest version of react-source, and I noticed that you have a 0.10 branch with some commits that make this happen. I'd like to help get that in a mergeable state, but I'm not really sure what is actually left to be done. Any pointers?
I have react working locally in development by requiring react in my manifest and setting the appropriate variant in my config. When I attempt to precompile assets (even locally) I get an error:
couldn't find file 'react'
(in /path/to/app/app/assets/javascripts/all.js:7)
I can't seem to figure it out. Any thing I can check? react-rails is loaded in the environment, as the config.react statements are in my application config.
Any advice is appreciated.
Doing a SPA with react I have found it beneficial to have unmountReactComponents
publicly accessible. I have modded the react_ujs
file in this project to do this easily enough. I think there is an interesting discussion that can take place around this:
making it a 'revealing module pattern' is simple but where should it live really? A ReactUjs
obj ? I actually just append it to React itself as React.ujs
accessing them, obviously, as React.ujs.unmountComponent
etc...
I realize this may be outside of the scope you want to address with the gem. That being the case I can fork and maintain it separately
If interested I can work up a PR with the appropriate tests
According to these discussions #33 #64, "supporting additional gems like maccman/sprockets-commonjs is outside the scope [...]."
So, I have been trying to look for an alternative way to load copyProperties
other than using require with commonJS.
This is how i would normally get it:
var copyProperties = require('react/lib/copyProperties');
Of course, I could just provide my own copyProperties
or just not use it at all. But it would be nice to have those utilities.
I've been searching but haven't found a workaround. What would you suggest ?
We're still finalizing how it'll work, but the plan right now is a separate build that would drop-in replace react.js. So presumably this should just be another variant.
Details in facebook/react#370
I have JSX file numbers.js.jsx. It works in development.
But while RAILS_ENV=production rake assets:precompile there isn't any line about compile this file. I try load page in browser and I have error in production:
ActionView::Template::Error (web/numbers.js isn't precompiled):
13: = @number_as_words
14:
15: - unless @number.has_comment?
16: = javascript_include_tag "web/numbers"
17: #wrong
what should I do?
Components on the current page are not unmounted when navigating to a page cached by Turbolinks (e.g. back button).
Events for an initial page load:
page:change
<-- components are mountedEvents for a normal page visit (e.g. clicking a link):
page:before-change
<-- components are unmounted here...page:fetch
page:receive
<-- ...or here with #85page:change
<-- components are mountedpage:load
Events for a cached page (e.g. back button):
page:change
<-- components are mountedpage:restore
As you can see, neither of the unmount events are fired for cached pages.
My initial though was to unmount on page:change
and mount on both page:load
and page:restore
, but this obviously won't work for the initial page load.
The only solution I can currently think of is to turn off Turbolinks caching via Turbolinks.pagesCached(0)
In #64, I laid the foundation for adding Rails generators. I'd like to discuss what other generators are possible, and what they might look like.
rails generate react:component [ComponentName]
I get really tired of typing /** @jsx React.DOM */ and all the other boilerplate that goes with creating a new component. Making a simple generator to scaffold up a new component is very straightforward.
rails generate react:component [ComponentName] [field:type] [field:type]
Similar to rails g scaffold
, I would propose that this style automatically add an appropriate propTypes
object as well as scaffolding out the JSX in a Rails-y way.
Adapting one of the Rails scaffold examples, a react-rails component generator would look something like this:
rails generate react:component post title body:text published:boolean
which would generate something like this:
// app/assets/javascripts/components/post.js.jsx
/** @jsx React.DOM */
var Post = React.createClass({
propTypes: {
id: React.PropTypes.number,
title: React.PropTypes.string,
body: React.PropTypes.string,
published: React.PropTypes.bool
},
render: function() {
return <div className="post">
<p>
<strong>Title:</strong>
<span>{this.props.title}</span>
</p>
<p>
<strong>Body:</strong>
<span>{this.props.body}</span>
</p>
<p>
<strong>Published:</strong>
<span>{this.props.published}</span>
</p>
</div>;
}
});
Note: I wrote this code without trying to run it, totally possible that I made some mistakes.
Wildly throwing spitballs:
Taking this even further, I wonder if it would be useful to create an entire scaffold generator? The addition of namespaced components makes this pretty intriguing to me. Running rails generate react:scaffold_component post title body:text published:boolean
could create a set of components, something like Posts.Post, Posts.List, Posts.Edit, Posts.New, and Posts.Form, very similar to how Rails scaffolding currently works.
Please comment and leave suggestions or requests! I'd love to build this next week, but I want to make sure it's both "React-y" and "Rails-y".
During rake assets:precompile
, an error appears as shown in the stack trace below.
It probably is related to changes in initializer between 0.9.0
and 1.0.0
Stack trace is from 3.2
, but it is related to 4.0
too.
rake aborted!
can't modify immutable index
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/sprockets-2.2.2/lib/sprockets/index.rb:80:in `expire_index!'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/sprockets-2.2.2/lib/sprockets/trail.rb:31:in `prepend_path'
/Users/jakub/code/react-rails/lib/react/rails/railtie.rb:29:in `block in <class:Railtie>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/lazy_load_hooks.rb:34:in `call'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/lazy_load_hooks.rb:34:in `execute_hook'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/lazy_load_hooks.rb:43:in `block in run_load_hooks'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/lazy_load_hooks.rb:42:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/lazy_load_hooks.rb:42:in `run_load_hooks'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/application/finisher.rb:59:in `block in <module:Finisher>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/initializable.rb:30:in `instance_exec'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/initializable.rb:30:in `run'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/initializable.rb:55:in `block in run_initializers'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/initializable.rb:54:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/initializable.rb:54:in `run_initializers'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/application.rb:136:in `initialize!'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/railtie/configurable.rb:30:in `method_missing'
/Users/jakub/code/react-rails-dev-32/config/environment.rb:5:in `<top (required)>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/dependencies.rb:251:in `require'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/dependencies.rb:251:in `block in require'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/dependencies.rb:236:in `load_dependency'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/activesupport-3.2.17/lib/active_support/dependencies.rb:251:in `require'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/application.rb:103:in `require_environment!'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/railties-3.2.17/lib/rails/application.rb:305:in `block (2 levels) in initialize_tasks'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:236:in `call'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:236:in `block in execute'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:231:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:231:in `execute'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:175:in `block in invoke_with_call_chain'
/Users/jakub/.rvm/rubies/ruby-1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:161:in `invoke'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/tasks/assets.rake:190:in `block (2 levels) in <top (required)>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:236:in `call'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:236:in `block in execute'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:231:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:231:in `execute'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:175:in `block in invoke_with_call_chain'
/Users/jakub/.rvm/rubies/ruby-1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:197:in `block in invoke_prerequisites'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:195:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:195:in `invoke_prerequisites'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:174:in `block in invoke_with_call_chain'
/Users/jakub/.rvm/rubies/ruby-1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:197:in `block in invoke_prerequisites'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:195:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:195:in `invoke_prerequisites'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:174:in `block in invoke_with_call_chain'
/Users/jakub/.rvm/rubies/ruby-1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:161:in `invoke'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:149:in `invoke_task'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:106:in `block (2 levels) in top_level'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:106:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:106:in `block in top_level'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:115:in `run_with_threads'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:100:in `top_level'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:78:in `block in run'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:165:in `standard_exception_handling'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:75:in `run'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/bin/rake:33:in `<top (required)>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/bin/rake:23:in `load'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/bin/rake:23:in `<main>'
Tasks: TOP => environment
rake aborted!
Command failed with status (1): [/Users/jakub/.rvm/rubies/ruby-1.9.3-p484/b...]
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/file_utils.rb:55:in `block in create_shell_runner'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/file_utils.rb:45:in `call'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/file_utils.rb:45:in `sh'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/file_utils_ext.rb:37:in `sh'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/file_utils.rb:82:in `ruby'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/file_utils_ext.rb:37:in `ruby'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/actionpack-3.2.17/lib/sprockets/assets.rake:12:in `ruby_rake_task'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/actionpack-3.2.17/lib/sprockets/assets.rake:21:in `invoke_or_reboot_rake_task'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/actionpack-3.2.17/lib/sprockets/assets.rake:29:in `block (2 levels) in <top (required)>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:236:in `call'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:236:in `block in execute'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:231:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:231:in `execute'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:175:in `block in invoke_with_call_chain'
/Users/jakub/.rvm/rubies/ruby-1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/task.rb:161:in `invoke'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:149:in `invoke_task'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:106:in `block (2 levels) in top_level'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:106:in `each'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:106:in `block in top_level'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:115:in `run_with_threads'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:100:in `top_level'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:78:in `block in run'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:165:in `standard_exception_handling'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/lib/rake/application.rb:75:in `run'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/gems/rake-10.1.1/bin/rake:33:in `<top (required)>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/bin/rake:23:in `load'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/bin/rake:23:in `<main>'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/bin/ruby_executable_hooks:15:in `eval'
/Users/jakub/.rvm/gems/ruby-1.9.3-p484/bin/ruby_executable_hooks:15:in `<main>'
Tasks: TOP => assets:precompile
This crops up pretty frequently. Tests will randomly fail because Capybara / Poltergeist hasn't waited long enough for Turbolinks to become available.
In my work, sleep(1) seems to fix the problem. Capybara used to implement a method called wait_until
, which would have worked perfectly for this, but it was removed. There are several ways to re-implement this behavior, but before I do that, I'll investigate Capybara's API to see if there are any suitable built-in alternatives.
wait_until
ideas and implementations:
http://robots.thoughtbot.com/automatically-wait-for-ajax-with-capybara
https://coderwall.com/p/aklybw
https://gist.github.com/jnicklas/d8da686061f0a59ffdf7
According to this, if you enable the --harmony
flag, we can do cool things like:
class Comment extends React.component
render: ->
Makes for cleaner and consistent code!
view helper render_component('Component')
not working in ie8
use React.render(Component, mountNode)
than wrap this with turbolinks like page:load ready
works fine,but there is another problem, component will not unmount.
I don't know how to fix this problem
As master diverges from releases, it would be great to make it possible to drop in a specific version of React that overrides the files provided by react-source.
react.js
, react.min.js
JSXTransformer.js
to do transformation (important as it may diverge)Firstly, thanks for creating this great gem.
I would like to have a question regarding this application, which part the application created using react-rails route the application ? is it rails or react ?
While investigating #57 I came across a bug which might be the cause for many of the problems people are experiencing while trying out server-side rendering:
The components.js
file is cached, even in development mode!
That means changes are not picked up until the rails server is restartet, hich causes confusing errors like [React::Renderer] ReferenceError: MyComponent is not defined
even when it clearly is included.
To reproduce:
app/assets/javascripts/components.js
:
/** @jsx React.DOM */
var DummyComponent = React.createClass({displayName: 'DummyComponent',
render: function () {
return (
React.DOM.div(null,
this.props.text
)
);
}
});
Put this in any view:
=react_component('DummyComponent', {:text => 'Hello'}, {:prerender => true})
bundle exec rails s
load the page corresponding to the view from 2..
add the following anywhere in app/assets/javascripts/components.js
;
throw "WTF"
reload page – it does not throw
restart server and reload page – does throw
@zpao I thought we were going to go with environment based variant, if config.react.variant
is not explicitly set. However
if variant = app.config.react.variant || ::Rails.env.test?
makes it very clear that it needs to be configured. I think if it is as intended, then we should emphasize it a bit more in the readme. Because that bit even me a few times...
When using the prerender option, react-rails will rescue any JavaScript errors. This will log it and continue, which will just render the react ujs tag, and when the browser tries to render the component it will most likely encounter the same error and throw to the browser console for a better debugging experience.
While this may be the case for some JS errors, it is not the case for errors that happen when running JS not in the browser context but that don't happen when running JS in the browser context. For example, the window
object is available in the browser context but not available in the non-browser context, causing errors like "window is not defined". By rescuing these exceptions, seeing that something is broken in these situations is difficult.
What do you think about not rescuing JS exceptions when prerendering? This would make debugging in these situations quite a bit less mysterious. Folks who want a better debugging environment for JS errors that happen on the client side should be able to easily disable prerender.
Appraisal looks pretty cool and gives us an easy way to provide coverage across Rails versions.
I started working on this but ran into some issues... I created test/dummy
with Rails 4.0 and when loading it up with Rails 3.2 and Rails 3.1 it hit config loading issues. We might need multiple dummy apps to ensure everything actually works properly.
should be gem 'react-rails', '~> 0.11.1.0'
source: http://rubygems.org/gems/react-rails/versions/0.11.1.0
So I did the following:
gem 'react-rails 0.10'
in the Gemfile, then I went to app/assets/javascripts/application.js and added:
//= require react
//= require react_ujs
//= require_tree ./react_components
I then added:
config.react.variant = :development #and :production
to the appropriate environment files.
Finally I added:
// in the app/assets/javascripts/component.js
//= require_tree ./react_components
According to the instructions this is all correct(?).
But when I load the page I get:
couldn't find file 'react_ujs'
(in /home/abalan/Dropbox/AisisGit/Aisis-Writer/app/assets/javascripts/application.js:27)
I tried restarting the server, I tried checking the spelling - I cannot figure out why this isn't loading.
We're going to ship React 0.9 this week, and I think we should probably ship another release without the fancy things and ship 1.0 when it's ready with them.
Just wanted to open up discussion on how we could go about integrating this into the asset pipeline, removing the need for backticked JSX.
https://github.com/jsdf/coffee-react-transform
My first thought was to maybe write a Guard plugin that would watch files and put the output in another directory within my javascripts folder, but this doesn't seem particularly clean.
Anyone have thoughts?
Hello guys,
I'm trying to use react-rails gem and I wrote a small component to test it out. It is working on my development environment and it behaves as I expected. However, when I try to push to heroku the compilation of the assets fails with the following error:
-----> Preparing app for Rails asset pipeline
Running: rake assets:precompile
rake aborted!
/tmp/execjs20130823-621-lo6c2h.js:472
static: 'static',
^^^^^^
node.js:134
throw e; // process.nextTick error, or 'error' event on first tick
^
SyntaxError: Unexpected strict mode reserved word
at Module._compile (module.js:399:25)
at Object..js (module.js:410:10)
at Module.load (module.js:336:31)
at Function._load (module.js:297:12)
at Array.<anonymous> (module.js:423:10)
at EventEmitter._tickCallback (node.js:126:26)
(in /tmp/build_23w2j5nfuo0fp/app/assets/javascripts/likes.js.jsx)/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/execjs-1.4.0/lib/execjs/external_runtime.rb:142:in `exec_runtime'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/execjs-1.4.0/lib/execjs/external_runtime.rb:28:in `block in exec'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/execjs-1.4.0/lib/execjs/external_runtime.rb:41:in `compile_to_tempfile'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/execjs-1.4.0/lib/execjs/external_runtime.rb:27:in `exec'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/execjs-1.4.0/lib/execjs/external_runtime.rb:19:in `eval'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/execjs-1.4.0/lib/execjs/external_runtime.rb:33:in `call'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/react-rails-0.4.1.1/lib/react/jsx.rb:14:in `transform'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/react-rails-0.4.1.1/lib/react/jsx/template.rb:13:in `evaluate'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/context.rb:197:in `block in evaluate'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/context.rb:194:in `each'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/context.rb:194:in `evaluate'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/processed_asset.rb:12:in `initialize'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:374:in `new'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:374:in `block in build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:395:in `circular_call_protection'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:373:in `build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:94:in `block in build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/caching.rb:58:in `cache_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:93:in `build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:287:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:61:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/processed_asset.rb:111:in `block in resolve_dependencies'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/processed_asset.rb:105:in `each'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/processed_asset.rb:105:in `resolve_dependencies'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/processed_asset.rb:97:in `build_required_assets'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/processed_asset.rb:16:in `initialize'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:374:in `new'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:374:in `block in build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:395:in `circular_call_protection'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:373:in `build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:94:in `block in build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/caching.rb:58:in `cache_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:93:in `build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:287:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:61:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/bundled_asset.rb:16:in `initialize'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:377:in `new'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:377:in `build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:94:in `block in build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/caching.rb:58:in `cache_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:93:in `build_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/base.rb:287:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/index.rb:61:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:211:in `block in find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:257:in `benchmark'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:210:in `find_asset'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:119:in `block in compile'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:118:in `each'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/sprockets/manifest.rb:118:in `compile'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-rails-2.0.0/lib/sprockets/rails/task.rb:60:in `block (3 levels) in define'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-2.10.0/lib/rake/sprocketstask.rb:146:in `with_logger'
/tmp/build_23w2j5nfuo0fp/vendor/bundle/ruby/2.0.0/gems/sprockets-rails-2.0.0/lib/sprockets/rails/task.rb:59:in `block (2 levels) in define'
Tasks: TOP => assets:precompile
The compilation is successful in my local environment. I'm wondering if it's related to the environment that heroku is using to compile the assets...
Have anyone encountered this issue in the past?
Thanks a lot for your help!
The new version of the gem that was released today, v0.10.0.0, is broken. I believe that the wrong commit ended up being tagged. Instead of 9ed1c02, I think you want to tag 9a76532.
This may present itself as errors like Sprockets not being able to find react or the react_component
view helper not existing.
I followed the directions, but for some reason it does not seem to work.
I have a JSX file, games.js.jsx
. However, Instead of linking to /assets/javascripts/games.js
or /assets/javascripts/games.js.jsx
it references javascripts/games.js.jsx.js
which fails to pass off to the asset pipeline.
Any suggestions?
When the react-rails gem is included inside a rails engine I get the error
unknown file react
inside my application.js manifest.
Hey guys,
While javascript and jsx works consistently, my coffeescript files never seem to work. Note that I'm trying to use a pure coffeescript solution, with no interpolated jsx.
In my coffeescript file (its extension is *.js.coffee
)
{div} = React.DOM
Hello = React.createClass
render: ->
(div {}, ['Hello ' + @props.name])
In my view:
= react_component 'Hello', name: 'World'
And this is the error I consistently get in my console:
ReferenceError: Hello is not defined
What am I missing guys?
Hi guys!
I'm trying to get some rspec+capybara tests up and running on a rails app with react-rails but the tests appear to be failing. I'm using rspec-core v2.13.1 and I've tested against capybara v2.1.0, capybara-webkit v1.0.0, and phantomjs/poltergeist v1.4.1.
On poltergeist I'm seeing this error:
1) Minimum App React.js should load on the main page and render 'Hello World'
Failure/Error: visit root_path
Capybara::Poltergeist::JavascriptError:
One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).
TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(
/^(data|aria)-[a-z_][a-z\d_.\-]*$/
)')
TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(
/^(data|aria)-[a-z_][a-z\d_.\-]*$/
)')
at http://127.0.0.1:15151/assets/react.js:1498
at http://127.0.0.1:15151/assets/react.js:6 in i
at http://127.0.0.1:15151/assets/react.js:6
at http://127.0.0.1:15151/assets/react.js:5483
at http://127.0.0.1:15151/assets/react.js:6 in i
at http://127.0.0.1:15151/assets/react.js:6
at http://127.0.0.1:15151/assets/react.js:2975
at http://127.0.0.1:15151/assets/react.js:6 in i
at http://127.0.0.1:15151/assets/react.js:6
at http://127.0.0.1:15151/assets/react.js:11467
at http://127.0.0.1:15151/assets/react.js:5
at http://127.0.0.1:15151/assets/react.js:11468
ReferenceError: Can't find variable: React
ReferenceError: Can't find variable: React
at http://127.0.0.1:15151/assets/application.js:4
# ./spec/features/minimums_spec.rb:6:in `block (3 levels) in <top (required)>'
With capybara, I'm seeing something similar (but it's not as explicit)
pry(#<RSpec::Core::ExampleGroup::Nested_2::Nested_1>)> page.driver.console_messages
=> [{:line_number=>0,
:message=>"TypeError: 'undefined' is not a function",
:source=>"undefined"},
{:line_number=>0,
:message=>"ReferenceError: Can't find variable: React",
:source=>"undefined"}]
Printing out the page I see that react.js is getting loaded but it's not doing anything in the test. It should be adding 'Hello World!' inside of #content
.
pry(#<RSpec::Core::ExampleGroup::Nested_2::Nested_1>)> print page.html
<!DOCTYPE html><html><head>
<title>PotentialBatman</title>
<link href="/assets/application.css" media="all" rel="stylesheet">
<script src="/assets/react.js"></script>
<script src="/assets/application.js"></script>
</head>
<body>
<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>
<div id="content"></div>
</body></html>=> nil
If I open the page in the browser it works perfectly. Are there any other test configurations that need to be setup?
I like this gem a lot, but I find that using backticks if you want to use coffeescript is awkward. I would love to have something like this: https://github.com/jsdf/coffee-react
Unmonting event will not fire when going to another page and i need it to stop polling the server.
Going back to the page react won't load/remount even if i use server rendering
Check out this fiddle, http://jsfiddle.net/JUbe3/1/
Line 70 is the real puzzler
It suggests that when you "select" a message, that the Content's color should go red.
I've tried removing any mention of this.state.color and only using this.props.color and things work as expected. I can change color when I select a message, however, obviously I cannot toggle the color using the link.
I did also try setting the Content's state from the select function but that just resulted in errors.
Maybe someone with a bit more experience knows a work around (which I would like to hear about) but I feel like this is intuitive and so should just work and thats why I've filed it as an issue.
Now that React 0.12 has been released, it would be nice to be able to use this new version with react-rails.
Hi,
Is there a way to print to the terminal while rendering from the server with jruby and ruby rhino? I would like to use it for debugging.
Thanks,
Joe
I feel like this passage needs to be unpacked a little for lay users like me.
React components can also use the same ExecJS mechanisims in Sprockets to execute JavaScript code on the server, and render React components to HTML to be delivered to the browser, and then the react_ujs script will cause the component to be mounted. In this way, users get fast initial page loads and search-engine-friendly pages.
I have questions about this. Say I have a page like this:
#page=react_component("Page", {}, prerender: true)
When I tested this just now, the page is being rendered on the client, even when I go to it directly. That makes me think there is an additional step I am missing that should be explained in the README. When exactly is the HTML rendered on the server?
If I add //= require react
to any JS file, everything works fine until I run rake assets:precompile
, at which point I get a couldn't find file 'react'
error.
I have this in my production.rb
:
config.react.variant = :production
config.react.addons = true
And this in my development.rb
:
config.react.variant = :development
config.react.addons = true
I'm running Rails 3.2.17 with Ruby 1.9.3p484.
Full output of the rake assets:precompile
command:
> RAILS_ENV=production rake assets:precompile --trace
** Invoke assets:precompile (first_time)
** Execute assets:precompile
/Users/stefano/.rbenv/versions/1.9.3-p484/bin/ruby /Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets --trace
** Invoke assets:precompile:all (first_time)
** Invoke assets:cache:clean (first_time)
** Invoke assets:environment (first_time)
** Execute assets:environment
** Execute assets:cache:clean
** Execute assets:precompile:all
rake aborted!
couldn't find file 'react'
(in /Users/stefano/Work/Web/app/assets/javascripts/statusboard.module.js.jsx:3)
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:102:in `resolve'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:142:in `require_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:215:in `process_require_directive'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:165:in `block in process_directives'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:163:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:163:in `process_directives'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/directive_processor.rb:97:in `evaluate'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/tilt-1.4.1/lib/tilt/template.rb:103:in `render'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:193:in `block in evaluate'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:190:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:190:in `evaluate'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/sprockets/unprocessed_asset.rb:14:in `initialize'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/base.rb:16:in `new'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/base.rb:16:in `block in build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:270:in `circular_call_protection'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/base.rb:14:in `build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/bundled_asset.rb:12:in `initialize'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `new'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:32:in `block in compile'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:219:in `block in each_logical_path'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:206:in `block (2 levels) in each_file'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:196:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:196:in `each_entry'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:204:in `block in each_file'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:203:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:203:in `each_file'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:217:in `each_logical_path'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:29:in `compile'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/tasks/assets.rake:108:in `internal_precompile'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.10/lib/turbo-sprockets/tasks/assets.rake:115:in `block (3 levels) in <top (required)>'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:236:in `call'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:236:in `block in execute'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:231:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:231:in `execute'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:175:in `block in invoke_with_call_chain'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:161:in `invoke'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:149:in `invoke_task'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:106:in `block (2 levels) in top_level'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:106:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:106:in `block in top_level'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:115:in `run_with_threads'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:100:in `top_level'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:78:in `block in run'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:165:in `standard_exception_handling'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:75:in `run'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/bin/rake:33:in `<main>'
Tasks: TOP => assets:precompile:all
rake aborted!
Command failed with status (1): [/Users/stefano/.rbenv/versions/1.9.3-p484/...]
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/file_utils.rb:55:in `block in create_shell_runner'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/file_utils.rb:45:in `call'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/file_utils.rb:45:in `sh'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/file_utils_ext.rb:37:in `sh'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/file_utils.rb:82:in `ruby'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/file_utils_ext.rb:37:in `ruby'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/actionpack-3.2.17/lib/sprockets/assets.rake:12:in `ruby_rake_task'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/actionpack-3.2.17/lib/sprockets/assets.rake:21:in `invoke_or_reboot_rake_task'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/actionpack-3.2.17/lib/sprockets/assets.rake:29:in `block (2 levels) in <top (required)>'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:236:in `call'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:236:in `block in execute'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:231:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:231:in `execute'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:175:in `block in invoke_with_call_chain'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:168:in `invoke_with_call_chain'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/task.rb:161:in `invoke'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:149:in `invoke_task'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:106:in `block (2 levels) in top_level'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:106:in `each'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:106:in `block in top_level'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:115:in `run_with_threads'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:100:in `top_level'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:78:in `block in run'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:165:in `standard_exception_handling'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/lib/rake/application.rb:75:in `run'
/Users/stefano/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/rake-10.1.1/bin/rake:33:in `<main>'
Tasks: TOP => assets:precompile
I've probably completely overlooked something but how to I render children? In a stand alone front end app I'd write something like this -
var App = React.createClass({
render: function() {
return (
<Polyselect ref="polyselect">
<Polyoption title="My select option" value="1" />
<Polyoption title="My second select option" value="2" />
<Polyoption title="My third select option" value="3" />
</Polyselect>
);
}
});
React.render(<App/>, document.body);
How do I write this with react rails? I imagine it would be like this -
react_component('Polyselect', { ref: 'polyselect' }, [
react_component('Polyoption', { title: 'My select option', value: '1' })
])
I think I'm missing something fundamental here. Help would be much appreciated!
Creating a new issue, because #46 is closed and I can't re-open tickets.
The gem as pushed to RubyGems is broken.
Using a brand new app, just trying to visit /assets/react.js, I see:
Routing Error
No route matches [GET] "/assets/react.js"
I haven't had time to figure out what is different between master
and 0.11.1.0
that allows master to work, but the gem on rubygems.org basically doesn't work. Switching to master, however, works perfectly.
Is there a reason that the gem published to rubygems.org isn't tracking the master branch?
The simple case will be trivial so I'll do that. We'll want to followup with more complex setup once we have Appraisal testing multiple versions.
Hey guys,
Whenever I pass in the prerender: true
option to the options hash of a react component, I get the error: V8::Error - Unexpected token <
. My component works fine when i remove prerender: true
from the options hash.
Gemfile:
gem 'rails', '4.1.1'
gem 'execjs'
gem 'therubyracer', platforms: :ruby
gem 'react-rails', github: 'reactjs/react-rails'
The view:
= react_component("AssignmentWindowProgressBar", { assignment: @assignment_json }, { prerender: true })
Coffee file:
###* @jsx React.DOM ###
@AssignmentWindowProgressBar = React.createClass
render: ->
`<div>Hi world.</div>`
# this is located in this file:
# ./apps/assets/javascripts/components/assignments/AssignmentWindows.js.jsx.coffee
Stack trace:
V8::Error - Unexpected token < at <eval>:19037:15:
therubyracer (0.12.1) lib/v8/error.rb:86:in `block in try'
therubyracer (0.12.1) lib/v8/error.rb:83:in `try'
therubyracer (0.12.1) lib/v8/context.rb:95:in `block in eval'
therubyracer (0.12.1) lib/v8/context.rb:248:in `block (2 levels) in lock_scope_and_enter'
therubyracer (0.12.1) lib/v8/context.rb:245:in `block in lock_scope_and_enter'
therubyracer (0.12.1) lib/v8/context.rb:244:in `lock_scope_and_enter'
therubyracer (0.12.1) lib/v8/context.rb:204:in `enter'
therubyracer (0.12.1) lib/v8/context.rb:94:in `eval'
execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:11:in `block in initialize'
execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:78:in `block in lock'
execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:76:in `lock'
execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:9:in `initialize'
execjs (2.2.0) lib/execjs/runtime.rb:44:in `compile'
execjs (2.2.0) lib/execjs/module.rb:27:in `compile'
... end of execjs errors ...
Thanks for any and all help guys! Appreciate all the work and effort you all have put in to this great project.
The documentation states:
a concatenated file containing all of your React components, and each one has to be available in the global scope (either window or global can be used)
So far all the examples I've seen just expose their React components to the window
e.g var Component = React.createClass({})
How can I use components that are written as CommonJS for the client side? Ideally I'd like to avoid dozens of global variables in the browser.
Thanks
Hi. Is there a way to pass a reference to an object as prop with the react_component helper? I took a quick glance at the source and it seems there isn't.
This seems like a common use case. I currently using the gon gem to preload JSON data. I'd like to be able to pass this data to the component with the helper.
Occasionally I run across things that can only be done by requiring React submodules, such as ReactUpdates
(e.g. ReactRAFBatchingStrategy).
Is there a way to access ReactUpdates
et al. when using react-rails
?
For that matter I can’t even do require('react')
, even though I’m using a module system (sprockets-commonjs). Is there a recommended way to get CommonJS/AMD modules to work with Rails that is compatible with react-rails
?
Since I disabled Turbolinks, I was trying to prevent react_ujs behavior unmounting components on page unload.
The documentation says:
react_ujs
will also scan DOM elements and callReact.unmountComponentAtNode
on page unload. If you want to disable this behavior, removedata-react-class
attribute incomponentDidMount
.
But I don't know how to do that:
var MyComponent = React.createClass({
...
componentDidMount: function() {
// ???
}
});
It would be nice if the documentation give an example.
pointed out http://facebook.github.io/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html
Before we can even make sure it works, we need to fix our dev dependencies. sqlite
doesn't compile in jruby, there are different adaptors. Our dummy app doesn't need to use ActiveRecord though, so I think we can fix that part easily. I don't know what else would be involved yet.
It errors out when it hits a rake command:
servers: ["myserver.dot.com"]
[myserver.dot.com] executing command
** [out :: myserver.dot.com] rake aborted!
** [out :: myserver.dot.com] NoMethodError: undefined method react' for #<Rails::Application::Configuration:0x000000041e5ba0> ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/railtie/configuration.rb:85:in
method_missing'
** [out :: myserver.dot.com] /my/website/path/releases/20141029232243/config/environments/production.rb:81:in block in <top (required)>' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/railtie/configurable.rb:24:in
class_eval'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/railtie/configurable.rb:24:in configure' ** [out :: myserver.dot.com] /my/website/path/releases/20141029232243/config/environments/production.rb:3:in
<top (required)>'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:251:in require' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:251:in
block in require'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:236:in load_dependency' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:251:in
require'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/engine.rb:576:in block in <class:Engine>' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/initializable.rb:30:in
instance_exec'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/initializable.rb:30:in run' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/initializable.rb:55:in
block in run_initializers'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/initializable.rb:54:in each' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/initializable.rb:54:in
run_initializers'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/application.rb:136:in initialize!' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/railtie/configurable.rb:30:in
method_missing'
** [out :: myserver.dot.com] /my/website/path/releases/20141029232243/config/environment.rb:5:in <top (required)>' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:251:in
require'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:251:in block in require' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:236:in
load_dependency'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/activesupport-3.2.19/lib/active_support/dependencies.rb:251:in require' ** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/application.rb:103:in
require_environment!'
** [out :: myserver.dot.com] /my/website/path/shared/bundle/ruby/2.1.0/gems/railties-3.2.19/lib/rails/application.rb:305:in `block (2 levels) in initialize_tasks'
** [out :: myserver.dot.com] Tasks: TOP => db:migrate => environment
** [out :: myserver.dot.com](See full trace by running task with --trace)
I have config.react.variant = :production in the config/environments/production.rb file. I'm using rails 3.2.19 and ruby 2.1.1. In the gemfile react-rails (version 0.11.1.0) is not in a group. This problem does not occur when we deploy to our staging server.
Hi,
Im trying to implement a support to pjax, when I see this on code:
typeof Turbolinks !== 'undefined' ? handleTurbolinksEvents() : handleNativeEvents();
But Turbolinks sometime execute a fullpage reload:
So, handleNativeEvents should not be required anyway? (with or without turbolinks) ??
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.