# rubocop:disable Metrics/ModuleLength
# NOTE:
# For any heredoc JS:
# 1. The white spacing in this file matters!
# 2. Keep all #{some_var} fully to the left so that all indentation is done evenly in that var
require "react_on_rails/prerender_error"
module ReactOnRailsHelper
# The env_javascript_include_tag and env_stylesheet_link_tag support the usage of a webpack
# dev server for providing the JS and CSS assets during development mode. See
# https://github.com/shakacode/react-webpack-rails-tutorial/ for a working example.
#
# The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
# these params are optional, and support either a single value, or an array.
#
# static vs. hot is picked based on whether
# ENV["REACT_ON_RAILS_ENV"] == "HOT"
#
# <%= env_stylesheet_link_tag(static: 'application_static',
# hot: 'application_non_webpack',
# media: 'all',
# 'data-turbolinks-track' => "reload") %>
#
#
#
# <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
# 'http://localhost:3500/app-bundle.js']) %>
#
#
# <%= env_javascript_include_tag(static: 'application_static',
# hot: 'application_non_webpack',
# 'data-turbolinks-track' => "reload") %>
#
# NOTE: for Turbolinks 2.x, use 'data-turbolinks-track' => true
# See application.html.erb for usage example
# https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb
def env_javascript_include_tag(args = {})
send_tag_method(:javascript_include_tag, args)
end
# Helper to set CSS assets depending on if we want static or "hot", which means from the
# Webpack dev server.
#
# In this example, application_non_webpack is simply a CSS asset pipeline file which includes
# styles not placed in the webpack build.
#
# We don't need styles from the webpack build, as those will come via the JavaScript include
# tags.
#
# The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
# these params are optional, and support either a single value, or an array.
#
# <%= env_stylesheet_link_tag(static: 'application_static',
# hot: 'application_non_webpack',
# media: 'all',
# 'data-turbolinks-track' => true) %>
#
def env_stylesheet_link_tag(args = {})
send_tag_method(:stylesheet_link_tag, args)
end
# react_component_name: can be a React component, created using a ES6 class, or
# React.createClass, or a
# `generator function` that returns a React component
# using ES6
# let MyReactComponentApp = (props, railsContext) => ;
# or using ES5
# var MyReactComponentApp = function(props, railsContext) { return ; }
# Exposing the react_component_name is necessary to both a plain ReactComponent as well as
# a generator:
# See README.md for how to "register" your react components.
# See spec/dummy/client/app/startup/serverRegistration.jsx and
# spec/dummy/client/app/startup/ClientRegistration.jsx for examples of this
#
# options:
# props: Ruby Hash or JSON string which contains the properties to pass to the react object. Do
# not pass any props if you are separately initializing the store by the `redux_store` helper.
# prerender: set to false when debugging!
# id: You can optionally set the id, or else a unique one is automatically generated.
# html_options: You can set other html attributes that will go on this component
# trace: set to true to print additional debugging information in the browser
# default is true for development, off otherwise
# replay_console: Default is true. False will disable echoing server rendering
# logs to browser. While this can make troubleshooting server rendering difficult,
# so long as you have the default configuration of logging_on_server set to
# true, you'll still see the errors on the server.
# raise_on_prerender_error: Default to false. True will raise exception on server
# if the JS code throws
# Any other options are passed to the content tag, including the id.
def react_component(component_name, raw_options = {})
# Create the JavaScript and HTML to allow either client or server rendering of the
# react_component.
#
# Create the JavaScript setup of the global to initialize the client rendering
# (re-hydrate the data). This enables react rendered on the client to see that the
# server has already rendered the HTML.
# We use this react_component_index in case we have the same component multiple times on the page.
react_component_index = next_react_component_index
options = ReactOnRails::ReactComponent::Options.new(name: component_name,
index: react_component_index,
options: raw_options)
# Setup the page_loaded_js, which is the same regardless of prerendering or not!
# The reason is that React is smart about not doing extra work if the server rendering did its job.
component_specification_tag =
content_tag(:div,
"",
class: "js-react-on-rails-component",
style: options.style,
data: options.data)
# Create the HTML rendering part
result = server_rendered_react_component_html(options.props, options.name, options.dom_id,
prerender: options.prerender,
trace: options.trace,
raise_on_prerender_error: options.raise_on_prerender_error)
server_rendered_html = result["html"]
console_script = result["consoleReplayScript"]
content_tag_options = options.html_options
content_tag_options[:id] = options.dom_id
rendered_output = content_tag(:div,
server_rendered_html.html_safe,
content_tag_options)
# IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
result = <<-HTML.html_safe
#{component_specification_tag}
#{rendered_output}
#{options.replay_console ? console_script : ''}
HTML
prepend_render_rails_context(result)
end
# Separate initialization of store from react_component allows multiple react_component calls to
# use the same Redux store.
#
# store_name: name of the store, corresponding to your call to ReactOnRails.registerStores in your
# JavaScript code.
# props: Ruby Hash or JSON string which contains the properties to pass to the redux store.
# Options
# defer: false -- pass as true if you wish to render this below your component.
def redux_store(store_name, props: {}, defer: false)
redux_store_data = { store_name: store_name,
props: props }
if defer
@registered_stores_defer_render ||= []
@registered_stores_defer_render << redux_store_data
"YOU SHOULD NOT SEE THIS ON YOUR VIEW -- Uses as a code block, like <% redux_store %> "\
"and not <%= redux store %>"
else
@registered_stores ||= []
@registered_stores << redux_store_data
result = render_redux_store_data(redux_store_data)
prepend_render_rails_context(result)
end
end
# Place this view helper (no parameters) at the end of your shared layout. This tell
# ReactOnRails where to client render the redux store hydration data. Since we're going
# to be setting up the stores in the controllers, we need to know where on the view to put the
# client side rendering of this hydration data, which is a hidden div with a matching class
# that contains a data props.
def redux_store_hydration_data
return if @registered_stores_defer_render.blank?
@registered_stores_defer_render.reduce("") do |accum, redux_store_data|
accum << render_redux_store_data(redux_store_data)
end.html_safe
end
def sanitized_props_string(props)
props.is_a?(String) ? json_escape(props) : props.to_json
end
# Helper method to take javascript expression and returns the output from evaluating it.
# If you have more than one line that needs to be executed, wrap it in an IIFE.
# JS exceptions are caught and console messages are handled properly.
def server_render_js(js_expression, options = {})
wrapper_js = <<-JS
(function() {
var htmlResult = '';
var consoleReplayScript = '';
var hasErrors = false;
try {
htmlResult =
(function() {
return #{js_expression};
})();
} catch(e) {
htmlResult = ReactOnRails.handleError({e: e, name: null,
jsCode: '#{escape_javascript(js_expression)}', serverSide: true});
hasErrors = true;
}
consoleReplayScript = ReactOnRails.buildConsoleReplay();
return JSON.stringify({
html: htmlResult,
consoleReplayScript: consoleReplayScript,
hasErrors: hasErrors
});
})()
JS
result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(wrapper_js)
# IMPORTANT: To ensure that Rails doesn't auto-escape HTML tags, use the 'raw' method.
html = result["html"]
console_log_script = result["consoleLogScript"]
raw("#{html}#{replay_console_option(options[:replay_console_option]) ? console_log_script : ''}")
rescue ExecJS::ProgramError => err
# rubocop:disable Style/RaiseArgs
raise ReactOnRails::PrerenderError.new(component_name: "N/A (server_render_js called)",
err: err,
js_code: wrapper_js)
# rubocop:enable Style/RaiseArgs
end
private
# prepend the rails_context if not yet applied
def prepend_render_rails_context(render_value)
return render_value if @rendered_rails_context
data = {
rails_context: rails_context(server_side: false)
}
@rendered_rails_context = true
rails_context_content = content_tag(:div,
"",
id: "js-react-on-rails-context",
style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
data: data)
"#{rails_context_content}\n#{render_value}".html_safe
end
def render_redux_store_data(redux_store_data)
result = content_tag(:div,
"",
class: "js-react-on-rails-store",
style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
data: redux_store_data)
prepend_render_rails_context(result)
end
def next_react_component_index
@react_component_index ||= -1
@react_component_index += 1
end
def props_string(props)
props.is_a?(String) ? props : props.to_json
end
# Returns Array [0]: html, [1]: script to console log
# NOTE, these are NOT html_safe!
def server_rendered_react_component_html(props, react_component_name, dom_id,
prerender:, trace:, raise_on_prerender_error:)
return { "html" => "", "consoleReplayScript" => "" } unless prerender
# On server `location` option is added (`location = request.fullpath`)
# React Router needs this to match the current route
# Make sure that we use up-to-date bundle file used for server rendering, which is defined
# by config file value for config.server_bundle_js_file
ReactOnRails::ServerRenderingPool.reset_pool_if_server_bundle_was_modified
# Since this code is not inserted on a web page, we don't need to escape props
#
# However, as JSON (returned from `props_string(props)`) isn't JavaScript,
# but we want treat it as such, we need to compensate for the difference.
#
# \u2028 and \u2029 are valid characters in strings in JSON, but are treated
# as newline separators in JavaScript. As no newlines are allowed in
# strings in JavaScript, this causes an exception.
#
# We fix this by replacing these unicode characters with their escaped versions.
# This should be safe, as the only place they can appear is in strings anyway.
#
# Read more here: http://timelessrepo.com/json-isnt-a-javascript-subset
wrapper_js = <<-JS
(function() {
var railsContext = #{rails_context(server_side: true).to_json};
#{initialize_redux_stores}
var props = #{props_string(props).gsub("\u2028", '\u2028').gsub("\u2029", '\u2029')};
return ReactOnRails.serverRenderReactComponent({
name: '#{react_component_name}',
domNodeId: '#{dom_id}',
props: props,
trace: #{trace},
railsContext: railsContext
});
})()
JS
result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(wrapper_js)
if result["hasErrors"] && raise_on_prerender_error
# We caught this exception on our backtrace handler
# rubocop:disable Style/RaiseArgs
raise ReactOnRails::PrerenderError.new(component_name: react_component_name,
# Sanitize as this might be browser logged
props: sanitized_props_string(props),
err: nil,
js_code: wrapper_js,
console_messages: result["consoleReplayScript"])
# rubocop:enable Style/RaiseArgs
end
result
rescue ExecJS::ProgramError => err
# This error came from execJs
# rubocop:disable Style/RaiseArgs
raise ReactOnRails::PrerenderError.new(component_name: react_component_name,
# Sanitize as this might be browser logged
props: sanitized_props_string(props),
err: err,
js_code: wrapper_js)
# rubocop:enable Style/RaiseArgs
end
def initialize_redux_stores
return "" unless @registered_stores.present? || @registered_stores_defer_render.present?
declarations = "var reduxProps, store, storeGenerator;\n"
all_stores = (@registered_stores || []) + (@registered_stores_defer_render || [])
result = all_stores.each_with_object(declarations) do |redux_store_data, memo|
store_name = redux_store_data[:store_name]
props = props_string(redux_store_data[:props])
memo << <<-JS
reduxProps = #{props};
storeGenerator = ReactOnRails.getStoreGenerator('#{store_name}');
store = storeGenerator(reduxProps, railsContext);
ReactOnRails.setStore('#{store_name}', store);
JS
end
result
end
# This is the definitive list of the default values used for the rails_context, which is the
# second parameter passed to both component and store generator functions.
def rails_context(server_side:)
@rails_context ||= begin
# Using Addressable instead of standard URI to better deal with
# non-ASCII characters (see https://github.com/shakacode/react_on_rails/pull/405)
uri = Addressable::URI.parse(request.original_url)
# uri = Addressable::URI.parse("http://foo.com:3000/posts?id=30&limit=5#time=1305298413")
result = {
# URL settings
href: request.original_url,
location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}" : ''}",
scheme: uri.scheme, # http
host: uri.host, # foo.com
port: uri.port,
pathname: uri.path, # /posts
search: uri.query, # id=30&limit=5
# Locale settings
i18nLocale: I18n.locale,
i18nDefaultLocale: I18n.default_locale,
httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
}
if ReactOnRails.configuration.rendering_extension
custom_context = ReactOnRails.configuration.rendering_extension.custom_context(self)
result.merge!(custom_context) if custom_context
end
result
end
@rails_context.merge(serverSide: server_side)
end
def replay_console_option(val)
val.nil? ? ReactOnRails.configuration.replay_console : val
end
def use_hot_reloading?
ENV["REACT_ON_RAILS_ENV"] == "HOT"
end
def send_tag_method(tag_method_name, args)
asset_type = use_hot_reloading? ? :hot : :static
assets = Array(args[asset_type])
options = args.delete_if { |key, _value| %i(hot static).include?(key) }
send(tag_method_name, *assets, options) unless assets.empty?
end
end