isomorfeus-react 16.6.6 → 16.6.7

data/lib/isomorfeus-react.rb

@@ -3,20 +3,27 @@ if RUBY_ENGINE == 'opal'
   require 'native'
   require 'active_support/core_ext/string'
   require 'react/active_support_support'
-  require 'browser/support'
-  require 'browser/event'
-  require 'browser/event_source'
-  require 'browser/screen'
-  require 'browser/socket'
-  require 'browser/window'
-  require 'browser/dom/node'
-  require 'browser/dom/element'
+  require 'isomorfeus/execution_environment'
+  if Isomorfeus.on_browser?
+    require 'browser/support'
+    require 'browser/event'
+    require 'browser/event_source'
+    require 'browser/screen'
+    require 'browser/socket'
+    require 'browser/window'
+    require 'browser/dom/node'
+    require 'browser/dom/element'
+  end
   require 'isomorfeus-redux'
   require 'react/version'
   require 'react'
   # require 'react/element' # usually not needed
   require 'react/synthetic_event'
-  require 'react_dom'
+  if Isomorfeus.on_browser?
+    require 'react_dom'
+  else
+    require 'react_dom_server'
+  end
   # React::Component
   require 'react/component/api'
   require 'react/component/unsafe_api'
@@ -81,51 +88,42 @@ if RUBY_ENGINE == 'opal'
   require 'lucid_app/mixin'
   require 'lucid_app/base'
 
+  # LucidRouter
+  require 'lucid_router'
+
   # allow mounting of components
-  require 'isomorfeus/top_level'
+  if Isomorfeus.on_browser?
+    require 'isomorfeus/top_level_browser'
+  else
+    require 'isomorfeus/top_level_ssr'
+  end
 
   # initalize Store, options, etc.
   Isomorfeus.init
 else
+  require 'oj'
   require 'opal'
   require 'opal-activesupport'
   require 'opal-browser'
   require 'isomorfeus-redux'
+  require 'isomorfeus-speednode'
   require 'react/version'
   require 'isomorfeus/config'
-  require 'isomorfeus/view_helpers'
 
-  Opal.append_path(__dir__.untaint)
+  Isomorfeus.env = ENV['RACK_ENV']
 
-  if defined?(Rails)
-    module Isomorfeus
-      module Model
-        class Railtie < Rails::Railtie
-          def delete_first(a, e)
-            a.delete_at(a.index(e) || a.length)
-          end
+  if Isomorfeus.env == 'production'
+    Isomorfeus.server_side_rendering = true
+  else
+    Isomorfeus.server_side_rendering = false
+  end
 
-          config.before_configuration do |_|
-            Rails.configuration.tap do |config|
-              # rails will add everything immediately below app to eager and auto load, so we need to remove it
-              delete_first config.eager_load_paths, "#{config.root}/app/isomorfeus"
+  require 'isomorfeus/execution_environment'
+  require 'isomorfeus/react_view_helper'
 
-              unless Rails.env.production?
-                # rails will add everything immediately below app to eager and auto load, so we need to remove it
-                delete_first config.autoload_paths, "#{config.root}/app/isomorfeus"
-              end
-            end
-          end
-        end
-      end
-    end
-  end
+  Opal.append_path(__dir__.untaint)
 
-  if Dir.exist?(File.join('app', 'isomorfeus'))
-    # Opal.append_path(File.expand_path(File.join('app', 'isomorfeus', 'components')))
-    Opal.append_path(File.expand_path(File.join('app', 'isomorfeus'))) unless Opal.paths.include?(File.expand_path(File.join('app', 'isomorfeus')))
-  elsif Dir.exist?('isomorfeus')
-    # Opal.append_path(File.expand_path(File.join('isomorfeus', 'components')))
+  if Dir.exist?('isomorfeus')
     Opal.append_path(File.expand_path('isomorfeus')) unless Opal.paths.include?(File.expand_path('isomorfeus'))
   end
 end

data/lib/isomorfeus/config.rb

@@ -1,12 +1,19 @@
 module Isomorfeus
   if RUBY_ENGINE == 'opal'
     class << self
-      attr_reader :initialized?
+      attr_reader :initialized
       attr_reader :store
+      attr_reader :env
 
       def init
-        return if initialized?
+        return if initialized
         @initialized = true
+        # at least one reducer must have been added at this stage
+        # this happened in isomorfeus-react.rb, where the component reducers were added
+        force_init!
+      end
+
+      def force_init!
         # at least one reducer must have been added at this stage
         # this happened in isomorfeus-react.rb, where the component reducers were added
         @store = Redux::Store.init!
@@ -28,21 +35,75 @@ module Isomorfeus
           constant.constantize.send(:init)
         end
       end
+
+      def env=(env_string)
+        @env = env_string ? env_string.to_s : 'development'
+        @development = (@env == 'development') ? true : false
+        @production = (@env == 'production') ? true : false
+        @test = (@env == 'test') ? true : false
+      end
+
+      def development?
+        @development
+      end
+
+      def production?
+        @production
+      end
+
+      def test?
+        @test
+      end
+
+      def start_app!
+        Isomorfeus::TopLevel.mount!
+      end
+
+      def force_render
+        @render_trigger ||= 1
+        @render_trigger += 1
+        action = { type: 'APPLICATION_STATE', name: 'render_trigger', value: @render_trigger }
+        Isomorfeus.store.dispatch(action)
+        @render_trigger
+      end
     end
+
     self.add_client_option(:client_init_class_names, [])
   else
     class << self
-      attr_accessor :prerendering
+      attr_accessor :server_side_rendering
+      attr_reader :env
 
       def configuration(&block)
         block.call(self)
       end
 
+      def env=(env_string)
+        @env = env_string ? env_string.to_s : 'development'
+        @development = (@env == 'development') ? true : false
+        @production = (@env == 'production') ? true : false
+        @test = (@env == 'test') ? true : false
+      end
+
+      def development?
+        @development
+      end
+
+      def production?
+        @production
+      end
+
+      def test?
+        @test
+      end
+
+      def ssr_contexts
+        @ssr_contexts ||= {}
+      end
+
       def version
         Isomorfeus::VERSION
       end
     end
-
-    self.prerendering = :off
   end
 end

data/lib/isomorfeus/execution_environment.rb

@@ -0,0 +1,31 @@
+module Isomorfeus
+  if RUBY_ENGINE == 'opal'
+    class << self
+      def on_browser?
+        !on_ssr?
+      end
+
+      def on_ssr?
+        !!`((typeof process !== 'undefined') && (typeof process.release !== "undefined") && (process.release.name === 'node'))`
+      end
+
+      def on_server?
+        false
+      end
+    end
+  else
+    class << self
+      def on_browser?
+        false
+      end
+
+      def on_ssr?
+        false
+      end
+
+      def on_server?
+        true
+      end
+    end
+  end
+end

data/lib/isomorfeus/react_view_helper.rb

@@ -0,0 +1,26 @@
+module Isomorfeus
+  module ReactViewHelper
+    def mount_component(component_name, props = {}, asset = 'application_ssr.js')
+      render_result = "<div data-iso-env=\"#{Isomorfeus.env}\" data-iso-root=\"#{component_name}\" data-iso-props='#{Oj.dump(props, mode: :strict)}'>"
+      if Isomorfeus.server_side_rendering
+        unless Isomorfeus.ssr_contexts.key?(asset)
+          asset_file_name = OpalWebpackLoader::Manifest.lookup_path_for(asset)
+          asset_path = File.join('public', asset_file_name)
+          Isomorfeus.ssr_contexts[asset] = ExecJS.permissive_compile(File.read(asset_path))
+        end
+        javascript = ''
+        if props.key?(:location)
+          javascript << <<~JAVASCRIPT
+            global.Opal.Isomorfeus.TopLevel["$ssr_route_path="]('#{props[:location]}');
+          JAVASCRIPT
+        end
+        javascript << <<~JAVASCRIPT
+          return global.Opal.Isomorfeus.TopLevel.$render_component_to_string('#{component_name}', #{Oj.dump(props, mode: :strict)})
+        JAVASCRIPT
+        render_result << Isomorfeus.ssr_contexts[asset].exec(javascript)
+      end
+      render_result << '</div>'
+      render_result
+    end
+  end
+end

data/lib/isomorfeus/top_level_browser.rb

@@ -0,0 +1,51 @@
+module Isomorfeus
+  class TopLevel
+    def self.mount!
+      Isomorfeus.init
+      on_ready do
+        root_element = `document.querySelector('div[data-iso-root]')`
+        component_name = root_element.JS.getAttribute('data-iso-root')
+        component = component_name.constantize
+        props_json = root_element.JS.getAttribute('data-iso-props')
+        props = `Opal.Hash.$new(JSON.parse(props_json))`
+        hydrated = root_element.JS.getAttribute('data-iso-hydrated')
+        mount_component(component, props, root_element, hydrated)
+      end
+    end
+
+    def self.on_ready(&block)
+      # this looks a bit odd but works across _all_ browsers, and no event handler mess
+      %x{
+        function run() { block.$call() };
+        function ready_fun() {
+          /in/.test(document.readyState) ? setTimeout(ready_fun,5) : run();
+        }
+        ready_fun();
+      }
+    end
+
+    def self.on_ready_mount(component, props = nil, element_query = nil)
+      # init in case it hasn't been run yet
+      Isomorfeus.init
+      on_ready do
+        mount_component(component, props, element_query)
+      end
+    end
+
+    def self.mount_component(component, props, element_or_query, hydrated = false)
+      if `(typeof element_or_query.$class === 'function')` && element_or_query.class == String
+        element = `document.body.querySelector(element_or_query)`
+      elsif `(typeof element_or_query.$is_a === 'function')` && element_or_query.is_a?(Browser::DOM::Node)
+        element = element_or_query.to_n
+      else
+        element = element_or_query
+      end
+
+      if hydrated
+        ReactDOM.hydrate(React.create_element(component, props), element)
+      else
+        ReactDOM.render(React.create_element(component, props), element)
+      end
+    end
+  end
+end

data/lib/isomorfeus/top_level_ssr.rb

@@ -0,0 +1,18 @@
+module Isomorfeus
+  class TopLevel
+    class << self
+      attr_accessor :ssr_route_path
+
+      def mount!
+        # nothing, but keep it for compatibility with browser
+      end
+
+      def render_component_to_string(component_name, props_json)
+        # for some reason props_json arrives already decoded
+        component = component_name.constantize
+        Isomorfeus.force_init!
+        ReactDOMServer.render_to_string(React.create_element(component, `Opal.Hash.$new(props_json)`))
+      end
+    end
+  end
+end

data/lib/lucid_app/api.rb

@@ -12,7 +12,7 @@ module LucidApp
               Opal.React.active_redux_components.pop();
               Opal.React.active_components.pop();
               var children = Opal.React.render_buffer.pop();
-              return React.createElement(LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
+              return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
             }
           }
         end

data/lib/lucid_app/native_component_constructor.rb

@@ -7,7 +7,7 @@ module LucidApp
       component_name = base.to_s
       # language=JS
       %x{
-        base.react_component = class extends React.Component {
+        base.react_component = class extends Opal.global.React.Component {
           constructor(props) {
             super(props);
             if (base.$default_state_defined()) {
@@ -42,7 +42,7 @@ module LucidApp
                 }
                 this[ref] = this[ref].bind(this);
               } else {
-                this[ref] = React.createRef();
+                this[ref] = Opal.global.React.createRef();
               }
             }
             this.listener = this.listener.bind(this);

data/lib/lucid_component/native_component_constructor.rb

@@ -8,12 +8,12 @@ module LucidComponent
       # language=JS
       %x{
         base.react_component = function(props) {
-          return React.createElement(LucidApplicationContext.Consumer, null, function(store) {
+          return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Consumer, null, function(store) {
             var store_props = Object.assign({}, props, { isomorfeus_store: store });
-            return React.createElement(base.lucid_react_component, store_props);
+            return Opal.global.React.createElement(base.lucid_react_component, store_props);
           });
         }
-        base.lucid_react_component = class extends React.Component {
+        base.lucid_react_component = class extends Opal.global.React.Component {
           constructor(props) {
             super(props);
             if (base.$default_state_defined()) {
@@ -39,7 +39,7 @@ module LucidComponent
                 }
                 this[ref] = this[ref].bind(this);
               } else {
-                this[ref] = React.createRef();
+                this[ref] = Opal.global.React.createRef();
               }
             }
           }
@@ -61,10 +61,13 @@ module LucidComponent
             var this_state_keys = Object.keys(this.state);
             if (next_state_keys.length !== this_state_keys.length) { return true; }
 
+            var used_store_result;
             for (var property in next_props) {
               if (property === "isomorfeus_store") {
-                var res = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
-                if (res) { return true; }
+                used_store_result = this.scu_for_used_store_paths(this, this.state.isomorfeus_store, next_state.isomorfeus_store);
+                if (used_store_result) {
+                  return true;
+                }
               } else if (next_props.hasOwnProperty(property)) {
                 if (!this.props.hasOwnProperty(property)) { return true; };
                 if (property == "children") { if (next_props.children !== this.props.children) { return true; }}

data/lib/lucid_router.rb

@@ -0,0 +1,18 @@
+# language=JS
+%x{
+  class LucidRouter extends Opal.global.React.Component {
+    constructor(props) {
+      super(props);
+    }
+    render() {
+      if (Opal.Isomorfeus["$on_ssr?"]()) {
+        var new_props = Object.assign({}, this.props, { location: Opal.Isomorfeus.TopLevel.$ssr_route_path() });
+        return Opal.global.React.createElement(Opal.global.StaticRouter, new_props);
+      } else {
+        return Opal.global.React.createElement(Opal.global.BrowserRouter, this.props);
+      }
+    }
+  }
+
+  Opal.global.LucidRouter = LucidRouter;
+}

data/lib/react.rb

@@ -1,6 +1,6 @@
 module React
   # to_native_react_props: the native_component params is used for event handlers, it keeps the event handlers
-  # it does not need to be component, can be a object with the event handlers
+  # it does not need to be compone nt, can be a object with the event handlers
   # language=JS
   %x{
     self.render_buffer = [];
@@ -13,7 +13,7 @@ module React
             res += parts[i][0].toUpperCase() + parts[i].slice(1);
       }
       return res;
-    }
+    };
 
     self.to_native_react_props = function(ruby_style_props) {
         var result = {};
@@ -35,7 +35,7 @@ module React
           }
         }
         return result;
-    }
+    };
 
     self.internal_render = function(component, props, string_child, block) {
       var children;
@@ -58,7 +58,7 @@ module React
         else if (children.length == 0) { children = null; }
       }
       if (props) { native_props = Opal.React.to_native_react_props(props); }
-      react_element = React.createElement(component, native_props, children);
+      react_element = Opal.global.React.createElement(component, native_props, children);
       Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(react_element);
     };
 
@@ -86,12 +86,12 @@ module React
       block_result = `null` unless block_result
     end
     native_props = props ? `Opal.React.to_native_react_props(props)` : `null`
-    `React.cloneElement(ruby_react_element.$to_n(), native_props, block_result)`
+    `Opal.global.React.cloneElement(ruby_react_element.$to_n(), native_props, block_result)`
   end
 
   def self.create_context(const_name, default_value)
     %x{
-      Opal.global[const_name] = React.createContext(default_value);
+      Opal.global[const_name] = Opal.global.React.createContext(default_value);
       var new_const = #{React::ContextWrapper.new(`Opal.global[const_name]`)};
       #{Object.const_set(const_name, `new_const`)};
       return new_const;
@@ -126,31 +126,31 @@ module React
         if (children.length == 1) { children = children[0]; }
         else if (children.length == 0) { children = null; }
       }
-      return React.createElement(component, native_props, children);
+      return Opal.global.React.createElement(component, native_props, children);
     }
   end
 
   def self.create_factory(type)
-    native_function = `React.createFactory(type)`
+    native_function = `Opal.global.React.createFactory(type)`
     proc { `native_function.call()` }
   end
 
 
   def self.create_ref
-    React::Ref.new(`React.createRef()`)
+    React::Ref.new(`Opal.global.React.createRef()`)
   end
 
   def self.forwardRef(&block)
     # TODO whats the return here? A React:Element?, doc says a React node, whats that?
-    `React.forwardRef( function(props, ref) { return block.$call().$to_n(); })`
+    `Opal.global.React.forwardRef( function(props, ref) { return block.$call().$to_n(); })`
   end
 
   def self.isValidElement(react_element)
-    `React.isValidElement(react_element)`
+    `Opal.global.React.isValidElement(react_element)`
   end
 
   def self.lazy(import_statement_function)
-    `React.lazy(import_statement_function)`
+    `Opal.global.React.lazy(import_statement_function)`
   end
 
   def self.memo(function_component, &block)
@@ -159,10 +159,10 @@ module React
         var fun = function(prev_props, next_props) {
           return #{block.call(::React::Component::Props.new(prev_props), ::React::Component::Props.new(next_props))};
         }
-        return React.memo(function_component, fun);
+        return Opal.global.React.memo(function_component, fun);
       }
     else
-      `React.memo(function_component)`
+      `Opal.global.React.memo(function_component)`
     end
   end
 end