Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
-> (client)
+> (server) `
/node_package/tests/jest.setup.js'],
};
diff --git a/lib/generators/USAGE b/lib/generators/USAGE
index d7a7dd668..7091d6e09 100644
--- a/lib/generators/USAGE
+++ b/lib/generators/USAGE
@@ -21,4 +21,4 @@ Then you may run
More Details:
- `https://github.com/shakacode/react_on_rails/blob/master/docs/basics/generator-details.md`
+ `https://github.com/shakacode/react_on_rails/blob/master/docs/additional-details/generator-details.md`
diff --git a/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb b/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb
new file mode 100644
index 000000000..69c84c0a6
--- /dev/null
+++ b/lib/generators/react_on_rails/adapt_for_older_shakapacker_generator.rb
@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require_relative "generator_helper"
+
+module ReactOnRails
+ module Generators
+ class AdaptForOlderShakapackerGenerator < Rails::Generators::Base
+ include GeneratorHelper
+ Rails::Generators.hide_namespace(namespace)
+
+ def change_spelling_to_webpacker
+ puts "Change spelling to webpacker v7"
+ files = %w[
+ Procfile.dev
+ Procfile.dev-static
+ config/shakapacker.yml
+ config/initializers/react_on_rails.rb
+ ]
+ files.each { |file| gsub_file(file, "shakapacker", "webpacker") }
+ end
+
+ def rename_config_file
+ puts "Rename to config/webpacker.yml"
+ puts "Renaming shakapacker.yml into webpacker.yml"
+ FileUtils.mv("config/shakapacker.yml", "config/webpacker.yml")
+ end
+
+ def modify_requiring_webpack_config_in_js
+ puts "Update commonWebpackConfig.js to follow the Shakapacker v6 interface"
+ file = "config/webpack/commonWebpackConfig.js"
+ gsub_file(file, "const baseClientWebpackConfig = generateWebpackConfig();\n\n", "")
+ gsub_file(
+ file,
+ "const { generateWebpackConfig, merge } = require('shakapacker');",
+ "const { webpackConfig: baseClientWebpackConfig, merge } = require('shakapacker');"
+ )
+ end
+ end
+ end
+end
diff --git a/lib/generators/react_on_rails/base_generator.rb b/lib/generators/react_on_rails/base_generator.rb
index 8d80fd037..cf7e851d4 100644
--- a/lib/generators/react_on_rails/base_generator.rb
+++ b/lib/generators/react_on_rails/base_generator.rb
@@ -3,7 +3,6 @@
require "rails/generators"
require_relative "generator_messages"
require_relative "generator_helper"
-
module ReactOnRails
module Generators
class BaseGenerator < Rails::Generators::Base
@@ -30,27 +29,87 @@ def create_react_directories
def copy_base_files
base_path = "base/base/"
base_files = %w[app/controllers/hello_world_controller.rb
- app/views/layouts/hello_world.html.erb
- config/initializers/react_on_rails.rb
- Procfile.dev
- Procfile.dev-hmr]
+ app/views/layouts/hello_world.html.erb]
+ base_templates = %w[config/initializers/react_on_rails.rb
+ Procfile.dev
+ Procfile.dev-static]
base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+ base_templates.each do |file|
+ template("#{base_path}/#{file}.tt", file, { packer_type: ReactOnRails::PackerUtils.packer_type })
+ end
+ end
+
+ def copy_js_bundle_files
+ base_path = "base/base/"
+ base_files = %w[app/javascript/packs/server-bundle.js
+ app/javascript/bundles/HelloWorld/components/HelloWorldServer.js
+ app/javascript/bundles/HelloWorld/components/HelloWorld.module.css]
+ base_files.each { |file| copy_file("#{base_path}#{file}", file) }
+ end
+
+ def copy_webpack_config
+ puts "Adding Webpack config"
+ base_path = "base/base"
+ base_files = %w[babel.config.js
+ config/webpack/clientWebpackConfig.js
+ config/webpack/commonWebpackConfig.js
+ config/webpack/test.js
+ config/webpack/development.js
+ config/webpack/production.js
+ config/webpack/serverWebpackConfig.js
+ config/webpack/webpack.config.js
+ config/webpack/webpackConfig.js]
+ config = {
+ message: "// The source code including full typescript support is available at:"
+ }
+ base_files.each { |file| template("#{base_path}/#{file}.tt", file, config) }
+ end
+
+ def copy_packer_config
+ puts "Adding Shakapacker #{ReactOnRails::PackerUtils.shakapacker_version} config"
+ base_path = "base/base/"
+ config = "config/shakapacker.yml"
+ copy_file("#{base_path}#{config}", config)
end
def add_base_gems_to_gemfile
- gem "mini_racer", platforms: :ruby
run "bundle"
end
- def add_yarn_dependencies
- major_minor_patch_only = /\A\d+\.\d+\.\d+\z/.freeze
+ def add_js_dependencies
+ major_minor_patch_only = /\A\d+\.\d+\.\d+\z/
if ReactOnRails::VERSION.match?(major_minor_patch_only)
- run "yarn add react-on-rails@#{ReactOnRails::VERSION} --exact"
+ package_json.manager.add(["react-on-rails@#{ReactOnRails::VERSION}"])
else
# otherwise add latest
- puts "Adding the lastest react-on-rails NPM module. Double check this is correct in package.json"
- run "yarn add react-on-rails --exact"
+ puts "Adding the latest react-on-rails NPM module. Double check this is correct in package.json"
+ package_json.manager.add(["react-on-rails"])
end
+
+ puts "Adding React dependencies"
+ package_json.manager.add([
+ "react",
+ "react-dom",
+ "@babel/preset-react",
+ "prop-types",
+ "babel-plugin-transform-react-remove-prop-types",
+ "babel-plugin-macros"
+ ])
+
+ puts "Adding CSS handlers"
+
+ package_json.manager.add(%w[
+ css-loader
+ css-minimizer-webpack-plugin
+ mini-css-extract-plugin
+ style-loader
+ ])
+
+ puts "Adding dev dependencies"
+ package_json.manager.add([
+ "@pmmmwh/react-refresh-webpack-plugin",
+ "react-refresh"
+ ], type: :dev)
end
def append_to_spec_rails_helper
@@ -88,45 +147,6 @@ def append_to_spec_rails_helper
ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
STR
- def self.helpful_message
- <<-MSG.strip_heredoc
-
- What to do next:
-
- - See the documentation on https://github.com/rails/webpacker/blob/master/docs/webpack.md
- for how to customize the default webpack configuration.
-
- - Include your webpack assets to your application layout.
-
- <%= javascript_pack_tag 'hello-world-bundle' %>
-
- - Run `rails s` to start the Rails server and use Webpacker's default lazy compilation.
-
- - Visit http://localhost:3000/hello_world and see your React On Rails app running!
-
- - Run bin/webpack-dev-server to start the Webpack dev server for compilation of Webpack
- assets as soon as you save. This default setup with the dev server does not work
- for server rendering
-
- - Alternately, you may turn off compile in config/webpacker.yml and run the foreman
- command to start the rails server and run webpack in watch mode.
-
- foreman start -f Procfile.dev
-
- - To turn on HMR, edit config/webpacker.yml and set HMR to true. Restart the rails server
- and bin/webpack-dev-server. Or use Procfile.dev-hmr.
-
- - To server render, change this line app/views/hello_world/index.html.erb to
- `prerender: true` to see server rendering (right click on page and select "view source").
-
- <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
- MSG
- end
-
- def print_helpful_message
- GeneratorMessages.add_info(self.class.helpful_message)
- end
-
private
# From https://github.com/rails/rails/blob/4c940b2dbfb457f67c6250b720f63501d74a45fd/railties/lib/rails/generators/rails/app/app_generator.rb
diff --git a/lib/generators/react_on_rails/bin/dev b/lib/generators/react_on_rails/bin/dev
new file mode 100755
index 000000000..bc3f590eb
--- /dev/null
+++ b/lib/generators/react_on_rails/bin/dev
@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+def installed?(process)
+ IO.popen "#{process} -v"
+rescue Errno::ENOENT
+ false
+end
+
+def run(process)
+ system "#{process} start -f Procfile.dev"
+rescue Errno::ENOENT
+ warn <<~MSG
+ ERROR:
+ Please ensure `Procfile.dev` exists in your project!
+ MSG
+ exit!
+end
+
+if installed? "overmind"
+ run "overmind"
+elsif installed? "foreman"
+ run "foreman"
+else
+ warn <<~MSG
+ NOTICE:
+ For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
+ MSG
+ exit!
+end
diff --git a/lib/generators/react_on_rails/bin/dev-static b/lib/generators/react_on_rails/bin/dev-static
new file mode 100755
index 000000000..d0d255c69
--- /dev/null
+++ b/lib/generators/react_on_rails/bin/dev-static
@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+def installed?(process)
+ IO.popen "#{process} -v"
+rescue Errno::ENOENT
+ false
+end
+
+def run(process)
+ system "#{process} start -f Procfile.dev-static"
+rescue Errno::ENOENT
+ warn <<~MSG
+ ERROR:
+ Please ensure `Procfile.dev-static` exists in your project!
+ MSG
+ exit!
+end
+
+if installed? "overmind"
+ run "overmind"
+elsif installed? "foreman"
+ run "foreman"
+else
+ warn <<~MSG
+ NOTICE:
+ For this script to run, you need either 'overmind' or 'foreman' installed on your machine. Please try this script after installing one of them.
+ MSG
+ exit!
+end
diff --git a/lib/generators/react_on_rails/dev_tests_generator.rb b/lib/generators/react_on_rails/dev_tests_generator.rb
index 024044da3..68cd97fab 100644
--- a/lib/generators/react_on_rails/dev_tests_generator.rb
+++ b/lib/generators/react_on_rails/dev_tests_generator.rb
@@ -39,7 +39,7 @@ def replace_prerender_if_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: false/,
+ 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 }
diff --git a/lib/generators/react_on_rails/generator_helper.rb b/lib/generators/react_on_rails/generator_helper.rb
index 0494ce4a2..38414c17c 100644
--- a/lib/generators/react_on_rails/generator_helper.rb
+++ b/lib/generators/react_on_rails/generator_helper.rb
@@ -1,8 +1,13 @@
# frozen_string_literal: true
+require "package_json"
require "rainbow"
module GeneratorHelper
+ def package_json
+ @package_json ||= PackageJson.read
+ end
+
# Takes a relative path from the destination root, such as `.gitignore` or `app/assets/javascripts/application.js`
def dest_file_exists?(file)
dest_file = File.join(destination_root, file)
@@ -52,4 +57,8 @@ def copy_file_and_missing_parent_directories(source_file, destination_file = nil
empty_directory(parent_directories) unless dest_dir_exists?(parent_directories)
copy_file source_file, destination_file
end
+
+ def add_documentation_reference(message, source)
+ "#{message} \n#{source}"
+ end
end
diff --git a/lib/generators/react_on_rails/generator_messages.rb b/lib/generators/react_on_rails/generator_messages.rb
index 872017e25..a5ea063be 100644
--- a/lib/generators/react_on_rails/generator_messages.rb
+++ b/lib/generators/react_on_rails/generator_messages.rb
@@ -37,5 +37,38 @@ def format_info(msg)
def clear
@output = []
end
+
+ def helpful_message_after_installation
+ <<~MSG
+
+ What to do next:
+
+ - See the documentation on https://github.com/shakacode/shakapacker#webpack-configuration
+ for how to customize the default webpack configuration.
+
+ - Include your webpack assets to your application layout.
+
+ <%= javascript_pack_tag 'hello-world-bundle' %>
+
+ - To start Rails server run:
+
+ ./bin/dev # Running with HMR
+
+ or
+
+ ./bin/dev-static # Running with statically created bundles, without HMR
+
+ - To server render, change this line app/views/hello_world/index.html.erb to
+ `prerender: true` to see server rendering (right click on page and select "view source").
+
+ <%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>
+
+ Alternative steps to run the app:
+
+ - We recommend using Procfile.dev with foreman, overmind, or a similar program. Alternately, you can run each of the processes listed in Procfile.dev in a separate tab in your terminal.
+
+ - Visit http://localhost:3000/hello_world and see your React On Rails app running!
+ MSG
+ end
end
end
diff --git a/lib/generators/react_on_rails/install_generator.rb b/lib/generators/react_on_rails/install_generator.rb
index c3717a6ec..d327dd67b 100644
--- a/lib/generators/react_on_rails/install_generator.rb
+++ b/lib/generators/react_on_rails/install_generator.rb
@@ -28,6 +28,8 @@ class InstallGenerator < Rails::Generators::Base
def run_generators
if installation_prerequisites_met? || options.ignore_warnings?
invoke_generators
+ add_bin_scripts
+ add_post_install_message
else
error = "react_on_rails generator prerequisites not met!"
GeneratorMessages.add_error(error)
@@ -51,6 +53,8 @@ def invoke_generators
else
invoke "react_on_rails:react_no_redux"
end
+
+ invoke "react_on_rails:adapt_for_older_shakapacker" unless using_shakapacker_7_or_above?
end
# NOTE: other requirements for existing files such as .gitignore or application.
@@ -75,6 +79,31 @@ def missing_node?
GeneratorMessages.add_error(error)
true
end
+
+ def add_bin_scripts
+ directory "#{__dir__}/bin", "bin"
+
+ # Make these and only these files executable
+ files_to_copy = []
+ Dir.chdir("#{__dir__}/bin") do
+ files_to_copy.concat(Dir.glob("*"))
+ end
+ files_to_become_executable = files_to_copy.map { |filename| "bin/#{filename}" }
+
+ File.chmod(0o755, *files_to_become_executable)
+ end
+
+ def add_post_install_message
+ GeneratorMessages.add_info(GeneratorMessages.helpful_message_after_installation)
+ end
+
+ def using_shakapacker_7_or_above?
+ shakapacker_gem = Gem::Specification.find_by_name("shakapacker")
+ shakapacker_gem.version.segments.first >= 7
+ rescue Gem::MissingSpecError
+ # In case using Webpacker
+ false
+ end
end
end
end
diff --git a/lib/generators/react_on_rails/templates/.eslintrc b/lib/generators/react_on_rails/templates/.eslintrc
index 2e54c6c05..ae94f82aa 100644
--- a/lib/generators/react_on_rails/templates/.eslintrc
+++ b/lib/generators/react_on_rails/templates/.eslintrc
@@ -1,5 +1,7 @@
---
-extends: eslint-config-shakacode
+extends:
+ - eslint-config-shakacode
+ - prettier
plugins:
- react
diff --git a/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr b/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr
deleted file mode 100644
index 013c2fc0b..000000000
--- a/lib/generators/react_on_rails/templates/base/base/Procfile.dev-hmr
+++ /dev/null
@@ -1,26 +0,0 @@
-# Procfile for development using HMR
-
-web: rails s -p 3000
-
-# Note, hot and live reloading don't work with the default generator setup on
-# top of the rails/webpacker Webpack config with server rendering.
-# If you have server rendering enabled (prerender is true), you either need to
-# a. Ensure that you have dev_server.hmr and dev_server.inline BOTH set to false,
-# and you have this option in your config/initializers/react_on_rails.rb:
-# config.same_bundle_for_client_and_server = true
-# If you have either config/webpacker.yml option set to true, you'll see errors like
-# "ReferenceError: window is not defined" (if hmr is true)
-# "TypeError: Cannot read property 'prototype' of undefined" (if inline is true)
-# b. Skip using the webpack-dev-server. bin/webpack --watch is typically
- fast enough.
-# c. See the React on Rails README for a link to documentation for how to setup
-# SSR with HMR and React hot loading using the webpack-dev-server only for the
-# client bundles and a static file for the server bundle.
-
-# Run the webpack-dev-server for client and maybe server files
-webpack-dev-server: bin/webpack-dev-server
-
-# Keep the JS fresh for server rendering. Remove if not server rendering.
-# Especially if you have not configured generation of a server bundle without a hash.
-# as that will conflict with the manifest created by the bin/webpack-dev-server
-# rails-server-assets: SERVER_BUNDLE_ONLY=yes bin/webpack --watch
diff --git a/lib/generators/react_on_rails/templates/base/base/Procfile.dev b/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static.tt
similarity index 67%
rename from lib/generators/react_on_rails/templates/base/base/Procfile.dev
rename to lib/generators/react_on_rails/templates/base/base/Procfile.dev-static.tt
index 2e4764bc2..39ccec23b 100644
--- a/lib/generators/react_on_rails/templates/base/base/Procfile.dev
+++ b/lib/generators/react_on_rails/templates/base/base/Procfile.dev-static.tt
@@ -5,5 +5,5 @@ web: rails s -p 3000
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
# Note, if using React on Rails localization you will need to run
-# `bundle exec rake react_on_rails:locale` before you run bin/webpack
-client: sh -c 'rm -rf public/packs/* || true && bin/webpack -w'
+# `bundle exec rake react_on_rails:locale` before you run bin/<%= config[:packer_type] %>
+webpack: sh -c 'rm -rf public/packs/* || true && bin/<%= config[:packer_type] %> -w'
diff --git a/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt b/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt
new file mode 100644
index 000000000..b87fce83a
--- /dev/null
+++ b/lib/generators/react_on_rails/templates/base/base/Procfile.dev.tt
@@ -0,0 +1,5 @@
+# Procfile for development using HMR
+# You can run these commands in separate shells
+rails: bundle exec rails s -p 3000
+wp-client: bin/<%= config[:packer_type] %>-dev-server
+wp-server: SERVER_BUNDLE_ONLY=yes bin/<%= config[:packer_type] %> --watch
diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
index f7e0487e3..35fef108f 100644
--- a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
+++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorld.jsx
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import React, { useState } from 'react';
+import * as style from './HelloWorld.module.css';
const HelloWorld = (props) => {
const [name, setName] = useState(props.name);
@@ -9,7 +10,7 @@ const HelloWorld = (props) => {
Hello, {name}!
+ );
+};
+
+TestComponentForStreaming.propTypes = {
+ throwSyncError: PropTypes.bool,
+ throwAsyncError: PropTypes.bool,
+};
+
+describe('streamServerRenderedReactComponent', () => {
+ beforeEach(() => {
+ ComponentRegistry.components().clear();
+ });
+
+ const expectStreamChunk = (chunk) => {
+ expect(typeof chunk).toBe('string');
+ const jsonChunk = JSON.parse(chunk);
+ expect(typeof jsonChunk.html).toBe('string');
+ expect(typeof jsonChunk.consoleReplayScript).toBe('string');
+ expect(typeof jsonChunk.hasErrors).toBe('boolean');
+ expect(typeof jsonChunk.isShellReady).toBe('boolean');
+ return jsonChunk;
+ };
+
+ const setupStreamTest = ({
+ throwSyncError = false,
+ throwJsErrors = false,
+ throwAsyncError = false,
+ } = {}) => {
+ ComponentRegistry.register({ TestComponentForStreaming });
+ const renderResult = streamServerRenderedReactComponent({
+ name: 'TestComponentForStreaming',
+ domNodeId: 'myDomId',
+ trace: false,
+ props: { throwSyncError, throwAsyncError },
+ throwJsErrors,
+ });
+
+ const chunks = [];
+ renderResult.on('data', (chunk) => {
+ const decodedText = new TextDecoder().decode(chunk);
+ chunks.push(expectStreamChunk(decodedText));
+ });
+
+ return { renderResult, chunks };
+ };
+
+ it('streamServerRenderedReactComponent streams the rendered component', async () => {
+ const { renderResult, chunks } = setupStreamTest();
+ await new Promise((resolve) => renderResult.on('end', resolve));
+
+ expect(chunks).toHaveLength(2);
+ expect(chunks[0].html).toContain('Header In The Shell');
+ expect(chunks[0].consoleReplayScript).toBe('');
+ expect(chunks[0].hasErrors).toBe(false);
+ expect(chunks[0].isShellReady).toBe(true);
+ expect(chunks[1].html).toContain('Async Content');
+ expect(chunks[1].consoleReplayScript).toBe('');
+ expect(chunks[1].hasErrors).toBe(false);
+ expect(chunks[1].isShellReady).toBe(true);
+ });
+
+ it('emits an error if there is an error in the shell and throwJsErrors is true', async () => {
+ const { renderResult, chunks } = setupStreamTest({ throwSyncError: true, throwJsErrors: true });
+ const onError = jest.fn();
+ renderResult.on('error', onError);
+ await new Promise((resolve) => renderResult.on('end', resolve));
+
+ expect(onError).toHaveBeenCalled();
+ expect(chunks).toHaveLength(1);
+ expect(chunks[0].html).toMatch(/
Exception in rendering[.\s\S]*Sync Error[.\s\S]*<\/pre>/);
+ expect(chunks[0].consoleReplayScript).toBe('');
+ expect(chunks[0].hasErrors).toBe(true);
+ expect(chunks[0].isShellReady).toBe(false);
+ });
+
+ it("doesn't emit an error if there is an error in the shell and throwJsErrors is false", async () => {
+ const { renderResult, chunks } = setupStreamTest({ throwSyncError: true, throwJsErrors: false });
+ const onError = jest.fn();
+ renderResult.on('error', onError);
+ await new Promise((resolve) => renderResult.on('end', resolve));
+
+ expect(onError).not.toHaveBeenCalled();
+ expect(chunks).toHaveLength(1);
+ expect(chunks[0].html).toMatch(/Exception in rendering[.\s\S]*Sync Error[.\s\S]*<\/pre>/);
+ expect(chunks[0].consoleReplayScript).toBe('');
+ expect(chunks[0].hasErrors).toBe(true);
+ expect(chunks[0].isShellReady).toBe(false);
+ });
+
+ it('emits an error if there is an error in the async content and throwJsErrors is true', async () => {
+ const { renderResult, chunks } = setupStreamTest({ throwAsyncError: true, throwJsErrors: true });
+ const onError = jest.fn();
+ renderResult.on('error', onError);
+ await new Promise((resolve) => renderResult.on('end', resolve));
+
+ expect(onError).toHaveBeenCalled();
+ expect(chunks).toHaveLength(2);
+ expect(chunks[0].html).toContain('Header In The Shell');
+ expect(chunks[0].consoleReplayScript).toBe('');
+ expect(chunks[0].hasErrors).toBe(false);
+ expect(chunks[0].isShellReady).toBe(true);
+ // Script that fallbacks the render to client side
+ expect(chunks[1].html).toMatch(/\"}"
end
+ describe "#load_pack_for_generated_component" do
+ let(:render_options) do
+ ReactOnRails::ReactComponent::RenderOptions.new(react_component_name: "component_name",
+ options: {})
+ end
+
+ it "appends js/css pack tag" do
+ allow(helper).to receive(:append_javascript_pack_tag)
+ allow(helper).to receive(:append_stylesheet_pack_tag)
+ expect { helper.load_pack_for_generated_component("component_name", render_options) }.not_to raise_error
+ expect(helper).to have_received(:append_javascript_pack_tag).with("generated/component_name", { defer: true })
+ expect(helper).to have_received(:append_stylesheet_pack_tag).with("generated/component_name")
+ end
+
+ it "throws an error in development if generated component isn't found" do
+ allow(Rails.env).to receive(:development?).and_return(true)
+ expect { helper.load_pack_for_generated_component("nonexisting_component", render_options) }
+ .to raise_error(ReactOnRails::Error, /the generated component entrypoint/)
+ end
+ end
+
describe "#json_safe_and_pretty(hash_or_string)" do
it "raises an error if not hash nor string nor nil passed" do
expect { helper.json_safe_and_pretty(false) }.to raise_error(ReactOnRails::Error)
@@ -143,7 +169,7 @@ class PlainReactOnRailsHelper
end
let(:json_props_sanitized) do
- '{"hello":"world","free":"of charge","x":"\\u003c/script\\u003e\\u003cscrip'\
+ '{"hello":"world","free":"of charge","x":"\\u003c/script\\u003e\\u003cscrip' \
"t\\u003ealert('foo')\\u003c/script\\u003e\"}"
end
@@ -265,6 +291,26 @@ class PlainReactOnRailsHelper
it { is_expected.not_to include '' }
it { is_expected.to include '' }
end
+
+ describe "'force_load' tag option" do
+ let(:force_load_script) do
+ %(
+ReactOnRails.reactOnRailsComponentLoaded('App-react-component-0');
+ ).html_safe
+ end
+
+ context "with 'force_load' == true" do
+ subject { react_component("App", force_load: true) }
+
+ it { is_expected.to include force_load_script }
+ end
+
+ context "without 'force_load' tag option" do
+ subject { react_component("App") }
+
+ it { is_expected.not_to include force_load_script }
+ end
+ end
end
describe "#redux_store" do
@@ -275,9 +321,9 @@ class PlainReactOnRailsHelper
end
let(:react_store_script) do
- '"
+ '"
end
it { expect(self).to respond_to :redux_store }
@@ -320,5 +366,30 @@ class PlainReactOnRailsHelper
expect { ob.send(:rails_context, server_side: false) }.not_to raise_error
end
end
+
+ describe "#rails_context_if_not_already_rendered" do
+ let(:helper) { PlainReactOnRailsHelper.new }
+
+ before do
+ allow(helper).to receive(:rails_context).and_return({ some: "context" })
+ end
+
+ it "returns a script tag with rails context when not already rendered" do
+ result = helper.send(:rails_context_if_not_already_rendered)
+ expect(result).to include('