Merge pull request #218 from shakacode/TangRufus-add-skip-display-none

Tang rufus add skip display none

.rubocop.yml

@@ -43,7 +43,7 @@ Lint/HandleExceptions:
 
 # Offense count: 1
 Metrics/AbcSize:
-  Max: 23
+  Max: 24
 
 # Offense count: 1
 # Configuration parameters: CountComments.
@@ -69,4 +69,3 @@ Metrics/ModuleLength:
 Style/GlobalVars:
   Exclude:
     - 'spec/dummy/config/environments/development.rb'
-

app/helpers/react_on_rails_helper.rb

@@ -61,7 +61,7 @@ def react_component(component_name, props = {}, options = {})
       content_tag(:div,
                   "",
                   class: "js-react-on-rails-component",
-                  style: "display:none",
+                  style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
                   data: data)
 
     # Create the HTML rendering part

lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb

@@ -23,4 +23,6 @@
   config.prerender = false
   # Default is true for development, off otherwise
   config.trace = Rails.env.development?
+  # Default is false, enable if your content security policy doesn't include `style-src: 'unsafe-inline'`
+  config.skip_display_none = false
 end

lib/react_on_rails/configuration.rb

@@ -14,19 +14,22 @@ def self.configuration
       trace: Rails.env.development?,
       development_mode: Rails.env.development?,
       server_renderer_pool_size: 1,
-      server_renderer_timeout: 20)
+      server_renderer_timeout: 20,
+      skip_display_none: false)
   end
 
   class Configuration
     attr_accessor :server_bundle_js_file, :prerender, :replay_console,
                   :trace, :development_mode,
                   :logging_on_server, :server_renderer_pool_size,
-                  :server_renderer_timeout, :raise_on_prerender_error
+                  :server_renderer_timeout, :raise_on_prerender_error,
+                  :skip_display_none
 
     def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
                    trace: nil, development_mode: nil,
                    logging_on_server: nil, server_renderer_pool_size: nil,
-                   server_renderer_timeout: nil, raise_on_prerender_error: nil)
+                   server_renderer_timeout: nil, raise_on_prerender_error: nil,
+                   skip_display_none: nil)
       if File.exist?(server_bundle_js_file)
         self.server_bundle_js_file = server_bundle_js_file
       else
@@ -43,6 +46,7 @@ def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
       end
       self.trace = trace.nil? ? Rails.env.development? : trace
       self.raise_on_prerender_error = raise_on_prerender_error
+      self.skip_display_none = skip_display_none
 
       # Server rendering:
       self.server_renderer_pool_size = self.development_mode ? 1 : server_renderer_pool_size

spec/dummy/config/initializers/react_on_rails.rb

@@ -18,4 +18,7 @@
   # Server rendering only (not for render_component helper)
   config.server_renderer_pool_size  = 1   # increase if you're on JRuby
   config.server_renderer_timeout    = 20  # seconds
+
+  # Default is false, enable if your content security policy doesn't include `style-src: 'unsafe-inline'`
+  config.skip_display_none = false
 end

spec/dummy/spec/helpers/react_on_rails_helper_spec.rb

@@ -74,6 +74,37 @@
       it { is_expected.not_to include react_component_div }
       it { is_expected.to include react_definition_div }
     end
+
+    context "with skip_display_none option true" do
+      before { ReactOnRails.configuration.skip_display_none = true }
+
+      let(:react_definition_div_skip_display_none_true) do
+        "<div class=\"js-react-on-rails-component\"
+              data-component-name=\"App\"
+              data-props=\"{&quot;name&quot;:&quot;My Test Name&quot;}\"
+              data-trace=\"false\"
+              data-expect-turbolinks=\"true\"
+              data-dom-id=\"#{id}\"></div>".squish
+      end
+
+      it { is_expected.to include react_definition_div_skip_display_none_true }
+    end
+
+    context "with skip_display_none option false" do
+      before { ReactOnRails.configuration.skip_display_none = false }
+
+      let(:react_definition_div_skip_display_none_false) do
+        "<div class=\"js-react-on-rails-component\"
+              style=\"display:none\"
+              data-component-name=\"App\"
+              data-props=\"{&quot;name&quot;:&quot;My Test Name&quot;}\"
+              data-trace=\"false\"
+              data-expect-turbolinks=\"true\"
+              data-dom-id=\"#{id}\"></div>".squish
+      end
+
+      it { is_expected.to include react_definition_div_skip_display_none_false }
+    end
   end
 
   describe "#server_render_js" do

spec/react_on_rails/configuration_spec.rb

@@ -21,5 +21,18 @@ module ReactOnRails
       expect(ReactOnRails.configuration.server_bundle_js_file).to eq("client/dist/something.js")
       expect(ReactOnRails.configuration.prerender).to eq(true)
     end
+
+    context "skip display: none" do
+      it "will default false" do
+        expect(ReactOnRails.configuration.skip_display_none).to eq(false)
+      end
+
+      it "will be true if set to true" do
+        ReactOnRails.configure do |config|
+          config.skip_display_none = true
+        end
+        expect(ReactOnRails.configuration.skip_display_none).to eq(true)
+      end
+    end
   end
 end