diff --git a/lib/generators/USAGE b/lib/generators/USAGE index 6ca9ce66f..c44323a39 100644 --- a/lib/generators/USAGE +++ b/lib/generators/USAGE @@ -1,6 +1,6 @@ Description: -The react_on_rails:install generator integrates webpack with rails with ease. You can pass the redux option if you'd like to have redux setup for you automatically. +The react_on_rails:install generator integrates webpack with rails with ease. You can pass the redux option if you'd like to have redux setup for you automatically. * Redux diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb index 87ca28bc4..a5967c3f5 100644 --- a/lib/generators/react_on_rails/base_generator.rb +++ b/lib/generators/react_on_rails/base_generator.rb @@ -4,7 +4,7 @@ module ReactOnRails module Generators - class BaseGenerator < Rails::Generators::Base # rubocop:disable Metrics/ClassLength + class BaseGenerator < Rails::Generators::Base include GeneratorHelper Rails::Generators.hide_namespace(namespace) source_root(File.expand_path("../templates", __FILE__)) @@ -39,9 +39,6 @@ def update_git_ignore def update_application_js data = <<-DATA.strip_heredoc - // DO NOT REQUIRE jQuery or jQuery-ujs in this file! - // DO NOT REQUIRE TREE! - //= require webpack-bundle DATA @@ -55,13 +52,6 @@ def update_application_js end end - def strip_application_js_of_incompatible_sprockets_statements - application_js = File.join(destination_root, "app/assets/javascripts/application.js") - gsub_file(application_js, "//= require jquery_ujs", "// require jquery_ujs") - gsub_file(application_js, %r{//= require jquery$}, "// require jquery") - gsub_file(application_js, %r{//= require_tree \.$}, "// require_tree .") - end - def strip_application_js_of_double_blank_lines application_js = File.join(destination_root, "app/assets/javascripts/application.js") gsub_file(application_js, /^\n^\n/, "\n") diff --git a/lib/generators/react_on_rails/dev_tests_generator.rb b/lib/generators/react_on_rails/dev_tests_generator.rb index a6beb5461..599ea1215 100644 --- a/lib/generators/react_on_rails/dev_tests_generator.rb +++ b/lib/generators/react_on_rails/dev_tests_generator.rb @@ -61,11 +61,11 @@ def add_test_related_gems_to_gemfile end def gsub_prerender_if_server_rendering - return if !options.example_server_rendering + return unless options.example_server_rendering hello_world_index = File.join(destination_root, "app", "views", "hello_world", "index.html.erb") hello_world_contents = File.read(hello_world_index) - new_hello_world_contents = hello_world_contents.gsub(/\) %>/, - ', prerender: true) %>') + new_hello_world_contents = hello_world_contents.gsub(/prerender: false/, + "prerender: true") File.open(hello_world_index, "w+") { |f| f.puts new_hello_world_contents } end diff --git a/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt b/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt index ebf8512fe..266bc15d6 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt +++ b/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt @@ -1,3 +1,3 @@

Hello World

-<%%= react_component("HelloWorldApp", props: @hello_world_props) %> +<%%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %> diff --git a/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt b/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt index 830844197..8cae5993e 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt +++ b/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorldWidget.jsx.tt @@ -2,7 +2,6 @@ // all your dump component names with Widget. import React, { PropTypes } from 'react'; -import _ from 'lodash'; // Simple example of a React "dumb" component export default class HelloWorldWidget extends React.Component { @@ -13,15 +12,6 @@ export default class HelloWorldWidget extends React.Component { name: PropTypes.string.isRequired, }; - constructor(props, context) { - super(props, context); - - // Uses lodash to bind all methods to the context of the object instance, otherwise - // the methods defined here would not refer to the component's class, not the component - // instance itself. - _.bindAll(this, 'handleChange'); - } - // React will automatically provide us with the event `e` handleChange(e) { const name = e.target.value; @@ -43,7 +33,7 @@ export default class HelloWorldWidget extends React.Component { this.handleChange(e)} /> diff --git a/lib/generators/react_on_rails/templates/base/base/client/package.json.tt b/lib/generators/react_on_rails/templates/base/base/client/package.json.tt index 6e6ce0ec1..c86c77be1 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/package.json.tt +++ b/lib/generators/react_on_rails/templates/base/base/client/package.json.tt @@ -26,8 +26,6 @@ "immutable": "^3.7.6", <%- end -%> "imports-loader": "^0.6.5", - "jquery": "^2.2.2", - "jquery-ujs": "^1.2.1", <%- if options.redux? -%> "mirror-creator": "1.1.0", <%- end -%> diff --git a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js index a470a13a9..54d2dd570 100644 --- a/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js +++ b/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js @@ -16,12 +16,10 @@ config = { filename: 'webpack-bundle.js', path: '../app/assets/webpack', }, - + resolve: { extensions: ['', '.js', '.jsx'], alias: { - lib: path.join(process.cwd(), 'app', 'lib'), - // Look into react: path.resolve('./node_modules/react'), 'react-dom': path.resolve('./node_modules/react-dom'), }, @@ -35,11 +33,14 @@ config = { ], module: { loaders: [ - { test: require.resolve('jquery'), loader: 'expose?jQuery' }, - { test: require.resolve('jquery'), loader: 'expose?$' }, - { test: require.resolve('react'), loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham' }, - { test: require.resolve('jquery-ujs'), loader: 'imports?jQuery=jquery' }, - { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }, + { + test: require.resolve('react'), + loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham', + }, + { + test: /\.jsx?$/, loader: 'babel-loader', + exclude: /node_modules/, + }, ], }, }; diff --git a/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb b/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb index cca380ab8..23d219890 100644 --- a/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb +++ b/lib/generators/react_on_rails/templates/dev_tests/spec/features/hello_world_spec.rb @@ -3,7 +3,7 @@ feature "Hello World", js: true do scenario "the hello world example works" do visit "/hello_world" - expect(heading).to have_text("Rendering") + expect(heading).to have_text("Hello World") expect(message).to have_text("Stranger") name_input.set("John Doe") expect(message).to have_text("John Doe") diff --git a/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx b/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx index dd4dd9bd6..a5a52641d 100644 --- a/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx +++ b/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorld.jsx @@ -1,6 +1,5 @@ import React, { PropTypes } from 'react'; import HelloWorldWidget from '../components/HelloWorldWidget'; -import _ from 'lodash'; // Simple example of a React "smart" component export default class HelloWorld extends React.Component { @@ -14,11 +13,6 @@ export default class HelloWorld extends React.Component { // How to set initial state in ES6 class syntax // https://facebook.github.io/react/docs/reusable-components.html#es6-classes this.state = { name: this.props.name }; - - // Uses lodash to bind all methods to the context of the object instance, otherwise - // the methods defined here would not refer to the component's class, not the component - // instance itself. - _.bindAll(this, 'updateName'); } updateName(name) { @@ -28,7 +22,7 @@ export default class HelloWorld extends React.Component { render() { return (
- + this.updateName(e)} />
); } diff --git a/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt b/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt index 5cada08cf..c0e72aa82 100644 --- a/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt +++ b/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt @@ -19,4 +19,4 @@ const HelloWorldApp = (props) => { }; // This is how react_on_rails can see the HelloWorldApp in the browser. -ReactOnRails.register({ HelloWorldApp }); \ No newline at end of file +ReactOnRails.register({ HelloWorldApp }); diff --git a/spec/react_on_rails/support/generator_spec_helper.rb b/spec/react_on_rails/support/generator_spec_helper.rb index 0ab8a065c..9623e8f31 100644 --- a/spec/react_on_rails/support/generator_spec_helper.rb +++ b/spec/react_on_rails/support/generator_spec_helper.rb @@ -16,7 +16,7 @@ def simulate_existing_rails_files(options) if options.fetch(:hello_world_file, false) simulate_existing_file( "app/views/hello_world/index.html.erb", - "<%= react_component('HelloWorldApp', props: @hello_world_props) %>" + "<%= react_component('HelloWorldApp', props: @hello_world_props, prerender: false) %>" ) end simulate_existing_file("Gemfile", "") diff --git a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb index 8f8eec0cf..c095928e1 100644 --- a/spec/react_on_rails/support/shared_examples/base_generator_examples.rb +++ b/spec/react_on_rails/support/shared_examples/base_generator_examples.rb @@ -1,4 +1,4 @@ -shared_examples "base_generator" do |options| +shared_examples "base_generator" do it "adds a route for get 'hello_world' to 'hello_world#index'" do match = <<-MATCH.strip_heredoc Rails.application.routes.draw do @@ -23,9 +23,6 @@ it "updates application.js" do match = <<-MATCH.strip_heredoc - // DO NOT REQUIRE jQuery or jQuery-ujs in this file! - // DO NOT REQUIRE TREE! - //= require webpack-bundle MATCH @@ -34,36 +31,17 @@ end end - it "doesn't include incompatible sprockets require statements" do - assert_file("app/assets/javascripts/application.js") do |contents| - refute_match(%r{//= require_tree \.$}, contents) - refute_match(%r{//= require jquery$}, contents) - refute_match("//= require jquery_ujs", contents) - end - end - - it "comments out incompatible sprockets require statements" do - assert_file("app/assets/javascripts/application.js") do |contents| - if options[:application_js] - assert_match(%r{// require_tree \.$}, contents) - assert_match(%r{// require jquery$}, contents) - assert_match("//= require jquery-ui", contents) - assert_match("// require jquery_ujs", contents) - end - end - end - it "creates react directories" do dirs = %w(components containers startup) dirs.each { |dirname| assert_directory "client/app/bundles/HelloWorld/#{dirname}" } end it "copies react files" do - # client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx %w(app/controllers/hello_world_controller.rb app/views/hello_world/index.html.erb client/webpack.config.js client/.babelrc + client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx client/package.json config/initializers/react_on_rails.rb package.json