Server side rendering for scrolled entries

app/assets/javascripts/pageflow/vendor.js

@@ -16,5 +16,4 @@
 // = require iscroll
 // = require audio5.min
 
-// = require react
 // = require backbone-rails

app/assets/stylesheets/pageflow/base.scss

@@ -18,13 +18,6 @@ body {
   -ms-touch-action: none;
 }
 
-.ios7.ipad body {
-  @media screen and (orientation: landscape) {
-    position: fixed;
-    margin-top: 0px;
-  }
-}
-
 body.js, .js #outer_wrapper {
   overflow: hidden;
 }

entry_types/paged/app/assets/javascripts/pageflow_paged/server_rendering.js

@@ -0,0 +1,9 @@
+// Pageflow Paged requires an older version of React than the one that
+// comes bundled with react-rails. The React builds from the
+// originally used version of react-rails have been copied to
+// paged/vendor/assets/javascripts/<env>/pageflow_paged/vendor.
+
+//= require pageflow_paged/vendor/react-server
+
+//= require react_ujs
+//= require components

entry_types/paged/app/assets/javascripts/pageflow_paged/vendor.js

@@ -0,0 +1,8 @@
+//= require pageflow/vendor
+
+// Pageflow Paged requires an older version of React than the one that
+// comes bundled with react-rails. The React builds from the
+// originally used version of react-rails have been copied to
+// paged/vendor/assets/javascripts/<env>/pageflow_paged/vendor.
+
+//= require pageflow_paged/vendor/react

entry_types/paged/app/helpers/pageflow_paged/react_server_side_rendering_helper.rb

@@ -3,6 +3,7 @@ module PageflowPaged
   module ReactServerSideRenderingHelper
     def render_page_react_component(entry, page, component_name)
       return '' if page.perma_id.blank?
+
       extra_props_string = %("pageId": #{page.perma_id}, "pageType": "#{page.template}")
       render_react_component_with_seed(entry, component_name, extra_props_string)
     end
@@ -13,13 +14,33 @@ def render_widget_react_component(entry, widget_type_name, component_name)
                                        %("widgetTypeName": "#{widget_type_name}"))
     end
 
+    def self.renderer
+      @renderer ||=
+        ReactRenderer.new(files: ['pageflow_paged/server_rendering.js'])
+    end
+
     private
 
     def render_react_component_with_seed(entry, component_name, extra_props_string)
       seed = (@_pageflow_react_entry_seed ||= entry_json_seed(entry))
       props_string = %({ "resolverSeed": #{seed}, #{extra_props_string} })
 
-      ::React::ServerRendering.render(component_name, props_string, true)
+      ReactServerSideRenderingHelper.renderer.render(component_name, props_string, true)
+    end
+
+    # Normally react-rails either tries to auto detect which asset
+    # container (i.e. Webpack, Sprockets) to use or relies on an app
+    # wide configuration. Since Pageflow Paged and Scrolled need
+    # different asset containers, this renderer specifies it
+    # explicitly.
+    class ReactRenderer < ::React::ServerRendering::BundleRenderer
+      def asset_container_class
+        if assets_precompiled?
+          ::React::ServerRendering::ManifestContainer
+        else
+          ::React::ServerRendering::EnvironmentContainer
+        end
+      end
     end
   end
 end

entry_types/paged/app/views/layouts/pageflow_paged/application.html.erb

@@ -7,7 +7,7 @@
     window.PAGEFLOW_EDITOR = false;
   </script>
 
-  <%= javascript_include_tag 'pageflow/vendor', 'data-turbolinks-track' => true %>
+  <%= javascript_include_tag 'pageflow_paged/vendor', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'pageflow_paged/frontend', 'data-turbolinks-track' => true %>
 
   <meta charset="utf-8" />

entry_types/paged/app/views/pageflow_paged/editor/entries/_head.html.erb

@@ -5,7 +5,7 @@
   window.PAGEFLOW_EDITOR = true;
 </script>
 
-<%= javascript_include_tag 'pageflow/vendor' %>
+<%= javascript_include_tag 'pageflow_paged/vendor' %>
 <%= javascript_include_tag 'pageflow_paged/frontend' %>
 <%= javascript_include_tag 'pageflow_paged/editor' %>
 

entry_types/paged/lib/pageflow_paged/engine.rb

@@ -7,9 +7,21 @@ class Engine < ::Rails::Engine
     config.i18n.load_path += Dir[config.root.join('config', 'locales', '**', '*.yml').to_s]
 
     initializer 'pageflow_paged.assets.precompile' do |app|
+      # Pageflow Paged requires an older version of React than the one
+      # that comes bundled with react-rails. The React builds from the
+      # originally used version of react-rails have been copied to
+      # paged/vendor/assets/javascripts/<env>/pageflow_paged/vendor.
+      #
+      # Replicate the react-rails setup to use different React builds
+      # based on the Rails environment.
+      variant = Rails.env.production? ? 'production' : 'development'
+      app.config.assets.paths << config.root.join('vendor', 'assets', 'javascripts', variant).to_s
+
       app.config.assets.precompile += %w[
+        pageflow_paged/vendor.js
         pageflow_paged/editor.js
         pageflow_paged/frontend.js
+        pageflow_paged/server_rendering.js
         pageflow_paged/editor.css
       ]
     end