isomorfeus-react 16.5.1

data/isomorfeus-react.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+require_relative 'lib/react/version.rb'
+
+Gem::Specification.new do |s|
+  s.name          = 'isomorfeus-react'
+  s.version       = React::VERSION
+
+  s.authors       = ['Jan Biedermann']
+  s.email         = ['jan@kursator.com']
+  s.homepage      = 'http://isomorfeus.com'
+  s.summary       = 'React for Opal Ruby.'
+  s.license       = 'MIT'
+  s.description   = 'Write React Components in Ruby.'
+
+  s.files         = `git ls-files`.split("\n").reject { |f| f.match(%r{^(gemfiles|s)/}) }
+  #s.test_files    = `git ls-files -- {test,s,features}/*`.split("\n")
+  s.require_paths = ['lib']
+
+  s.add_dependency 'opal', '>= 0.11.0', '< 0.12.0'
+  s.add_dependency 'opal-activesupport', '~> 0.3.1'
+  s.add_dependency 'opal-browser', '~> 0.2.0'
+  s.add_dependency 'isomorfeus-redux', '~> 4.0.0'
+end

data/lib/isomorfeus-react.rb

@@ -0,0 +1,131 @@
+if RUBY_ENGINE == 'opal'
+  require '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-redux'
+  require 'react/version'
+  require 'react'
+  # require 'react/element' # usually not needed
+  require 'react/synthetic_event'
+  require 'react_dom'
+  # React::Component
+  require 'react/component/api'
+  require 'react/component/unsafe_api'
+  require 'react/component/initializer'
+  require 'react/component/features'
+  require 'react/native_constant_wrapper'
+  require 'react/context_wrapper'
+  require 'react/component/native_component_constructor'
+  require 'react/component/native_component_validate_prop'
+  require 'react/component/props'
+  require 'react/component/state'
+  require 'react/component/match'
+  require 'react/component/location'
+  require 'react/component/history'
+  require 'react/component/elements'
+  require 'react/component/resolution'
+  require 'react/component/should_component_update'
+  require 'react/component/event_handler'
+  require 'react/component/mixin'
+  require 'react/component/base'
+  # React::PureComponent
+  require 'react/pure_component/mixin'
+  require 'react/pure_component/base'
+  # Function Component
+  require 'react/function_component/resolution'
+  require 'react/function_component/runner'
+  require 'react/function_component/creator'
+  # Redux::Component
+  require 'react/redux_component/component_class_store_defaults'
+  require 'react/redux_component/component_instance_store_defaults'
+  require 'react/redux_component/app_store_defaults'
+  require 'react/redux_component/api'
+  require 'react/redux_component/initializer'
+  require 'react/redux_component/app_store_proxy'
+  require 'react/redux_component/class_store_proxy'
+  require 'react/redux_component/instance_store_proxy'
+  require 'react/redux_component/native_component_constructor'
+  require 'react/redux_component/mixin'
+  require 'react/redux_component/base'
+  require 'react/redux_component/reducers'
+  require 'isomorfeus/config'
+
+  # init component reducers
+  React::ReduxComponent::Reducers.add_component_reducers_to_store
+
+  # init LucidApplicationContext (Store Provider and Consumer)
+  require 'lucid_app/context'
+
+  LucidApp::Context.create_application_context
+
+  # LucidComponent
+  require 'lucid_component/api'
+  require 'lucid_component/initializer'
+  require 'lucid_component/native_component_constructor'
+  require 'lucid_component/event_handler'
+  require 'lucid_component/mixin'
+  require 'lucid_component/base'
+
+  # LucidApp
+  require 'lucid_app/api'
+  require 'lucid_app/native_component_constructor'
+  require 'lucid_app/mixin'
+  require 'lucid_app/base'
+
+  # allow mounting of components
+  require 'isomorfeus/top_level'
+
+  # initalize Store, options, etc.
+  Isomorfeus.init
+else
+  require 'opal'
+  require 'opal-activesupport'
+  require 'opal-browser'
+  require 'isomorfeus-redux'
+  require 'react/version'
+  require 'isomorfeus/config'
+  require 'isomorfeus/view_helpers'
+
+  Opal.append_path(__dir__.untaint)
+
+  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
+
+          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"
+
+              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
+
+  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')))
+    Opal.append_path(File.expand_path('isomorfeus')) unless Opal.paths.include?(File.expand_path('isomorfeus'))
+  end
+end

data/lib/isomorfeus/config.rb

@@ -0,0 +1,84 @@
+if RUBY_ENGINE == 'opal'
+  module Isomorfeus
+    class << self
+      attr_reader :options
+      attr_reader :initialized
+      attr_reader :store
+
+      def init
+        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
+        @store = Redux::Store.init!
+        `Opal.Isomorfeus.store = #@store`
+        init_options
+        execute_init_classes
+      end
+
+      def init_options
+        return @options if @options
+        @options = Hash.new(`Opal.IsomorfeusOptions`)
+        @options.keys.each do |option|
+          define_singleton_method(option) do
+            @options[option]
+          end
+        end
+      end
+
+      def execute_init_classes
+        if options.has_key?(:client_init_class_names)
+          client_init_class_names.each do |constant|
+            constant.constantize.send(:init)
+          end
+        end
+      end
+    end
+  end
+else
+  module Isomorfeus
+    class << self
+      attr_accessor :client_init_class_names
+      attr_accessor :prerendering
+      attr_accessor :version
+
+      def add_client_option(option)
+        @options_for_client ||= Set.new
+        @options_for_client << option
+      end
+
+      def add_client_options(options)
+        options.each do |option|
+          add_client_option(option)
+        end
+      end
+
+      def add_client_init_class_name(class_name)
+        client_init_class_names << class_name
+      end
+
+      def configuration(&block)
+        block.call(self)
+      end
+
+      def options_for_client
+        @options_for_client
+      end
+
+      def options_hash_for_client
+        opts = {}
+        Isomorfeus.options_for_client.each do |option|
+          opts[option] = Isomorfeus.send(option)
+        end
+        opts
+      end
+    end
+
+    self.add_client_option(:client_init_class_names)
+    self.add_client_option(:version)
+
+    self.client_init_class_names = []
+    self.prerendering = :off
+    # self.version = ::Isomorfeus::Component::VERSION # thats equal to the isomorfeus version
+  end
+end

data/lib/isomorfeus/top_level.rb

@@ -0,0 +1,48 @@
+module Isomorfeus
+  class TopLevel
+    def self.search_path
+      @search_path ||= [Object]
+    end
+
+    def self.on_ready_mount(component, params = nil, element_query = nil)
+      # init in case it hasn't been run yet
+      Isomorfeus.init
+      # this looks a bit odd but works across _all_ browsers, and no event handler mess
+      # TODO: server rendering
+      %x{
+        function do_the_mount() { #{mount(component, params, element_query)} };
+        function ready_fun() {
+          /in/.test(document.readyState) ? setTimeout(ready_fun,5) : do_the_mount();
+        };
+        ready_fun();
+      }
+    end
+
+    def self.mount(component, params = nil, element_or_query = nil)
+      # TODO: server rendering
+      if element_or_query.nil?
+        if params.nil?
+          element = `document.body.querySelector('div')`
+        elsif params.class == String
+          element = `document.body.querySelector(params)`
+          params = nil
+        elsif params.is_a?(Browser::DOM::Node)
+          element = params.to_n
+          params = nil
+        end
+      else
+        if element_or_query.class == String
+          element = `document.body.querySelector(params)`
+        elsif element_or_query.is_a?(Browser::DOM::Node)
+          element = params.to_n
+        end
+      end
+
+      ReactDOM.render(React.create_element(component, params), element)
+    end
+
+    def self.ujs_mount
+      # TODO: implement mount using RailsUJS, for turbolinks and things
+    end
+  end
+end

data/lib/isomorfeus/view_helpers.rb

@@ -0,0 +1,38 @@
+module Isomorfeus
+  module ViewHelpers
+    def isomorfeus_script_tag(options = {})
+      # client side used options:
+      # current_user_id
+      # session_id
+      # form_authenticity_token
+      options_hash = Isomorfeus.options_hash_for_client
+      options_hash.merge!(options)
+      tag = <<~SCRIPT
+        <script type="text/javascript">
+          Opal.IsomorfeusOptions = #{options_hash.to_json};
+          Opal.Isomorfeus.$init();
+        </script>
+      SCRIPT
+      tag.respond_to?(:html_safe) ? tag.html_safe : tag
+    end
+
+    def react_component(component_name, params)
+      component_name_id = component_id_name(component_name)
+      tag = <<~SCRIPT
+        <div id="#{component_name_id}"></div>
+        <script type="text/javascript">
+          var component = Opal.Object.$const_get("#{component_name}");
+          var json_params = #{Oj.dump(params, mode: :compat)};
+          Opal.Isomorfeus.$const_get('TopLevel').$mount(component, Opal.Hash.$new(json_params), "##{component_name_id}" );
+        </script>
+      SCRIPT
+      tag.respond_to?(:html_safe) ? tag.html_safe : tag
+    end
+
+    private
+
+    def component_id_name(component_name)
+      "#{component_name.underscore}_#{Random.rand.to_s[2..-1]}"
+    end
+  end
+end

data/lib/lucid_app/api.rb

@@ -0,0 +1,22 @@
+module LucidApp
+  module API
+    def self.included(base)
+      base.instance_exec do
+        def render(&block)
+          %x{
+            self.react_component.prototype.render = function() {
+              Opal.React.render_buffer.push([]);
+              Opal.React.active_components.push(this);
+              Opal.React.active_redux_components.push(this.__ruby_instance);
+              #{`this.__ruby_instance`.instance_exec(&block)};
+              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);
+            }
+          }
+        end
+      end
+    end
+  end
+end

data/lib/lucid_app/base.rb

@@ -0,0 +1,7 @@
+module LucidApp
+  class Base
+    def self.inherited(base)
+      base.include(::LucidApp::Mixin)
+    end
+  end
+end

data/lib/lucid_app/context.rb

@@ -0,0 +1,7 @@
+module LucidApp
+  module Context
+    def self.create_application_context
+      React.create_context('LucidApplicationContext', Isomorfeus.store)
+    end
+  end
+end

data/lib/lucid_app/mixin.rb

@@ -0,0 +1,17 @@
+module LucidApp
+  module Mixin
+    def self.included(base)
+      base.include(::Native::Wrapper)
+      base.extend(::LucidApp::NativeComponentConstructor)
+      base.extend(::React::Component::NativeComponentValidateProp)
+      base.extend(::React::Component::ShouldComponentUpdate)
+      base.extend(::React::Component::EventHandler)
+      base.include(::React::Component::Elements)
+      base.include(::React::Component::API)
+      base.include(::React::ReduxComponent::API)
+      base.include(::LucidApp::API)
+      base.include(::React::Component::Features)
+      base.include(::React::Component::Resolution)
+    end
+  end
+end

data/lib/lucid_app/native_component_constructor.rb

@@ -0,0 +1,70 @@
+module LucidApp
+  module NativeComponentConstructor
+    # for should_component_update we apply ruby semantics for comparing props
+    # to do so, we convert the props to ruby hashes and then compare
+    # this makes sure, that for example rubys Nil object gets handled properly
+    def self.extended(base)
+      component_name = base.to_s
+      # language=JS
+      %x{
+        base.react_component = class extends React.Component {
+          constructor(props) {
+            super(props);
+            if (base.$default_state_defined()) {
+              this.state = base.$state().$to_n();
+            } else {
+              this.state = {};
+            };
+            this.state.isomorfeus_store_state = Opal.Isomorfeus.store.native.getState();
+            var current_store_state = this.state.isomorfeus_store_state;
+            if (typeof current_store_state.component_class_state[#{component_name}] !== "undefined") {
+              this.state.component_class_state = {};
+              this.state.component_class_state[#{component_name}] = current_store_state.component_class_state[#{component_name}];
+            } else {
+              this.state.component_class_state = {};
+              this.state.component_class_state[#{component_name}] = {};
+            };
+            this.__ruby_instance = base.$new(this);
+            this.__object_id = this.__ruby_instance.$object_id().$to_s();
+            if (!this.state.component_state) {
+              this.state.component_state = {};
+              this.state.component_state[this.__object_id] = {};
+            };
+            var event_handlers = #{base.event_handlers};
+            for (var i = 0; i < event_handlers.length; i++) {
+              this[event_handlers[i]] = this[event_handlers[i]].bind(this);
+            }
+            var defined_refs = #{base.defined_refs};
+            for (var ref in defined_refs) {
+              if (defined_refs[ref] != null) {
+                this[ref] = function(element) {
+                  #{`this.__ruby_instance`.instance_exec(React::Ref.new(`element`), `defined_refs[ref]`)}
+                }
+                this[ref] = this[ref].bind(this);
+              } else {
+                this[ref] = React.createRef();
+              }
+            }
+            this.listener = this.listener.bind(this);
+            this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
+          }
+          static get displayName() {
+            return #{component_name};
+          }
+          listener() {
+            var next_state = Opal.Isomorfeus.store.native.getState();
+            var current_ruby_state = Opal.Hash.$new(this.state.isomorfeus_store_state);
+            var next_ruby_state = Opal.Hash.$new(next_state);
+            if (#{`next_ruby_state` != `current_ruby_state`}) {
+              this.setState({isomorfeus_store_state: next_state});
+            }
+          }
+          componentWillUnmount() {
+            if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
+          }
+        }
+      }
+    end
+  end
+end
+