isomorfeus-react 16.10.0 → 16.10.1

data/lib/isomorfeus/top_level_ssr.rb

@@ -0,0 +1,28 @@
+module Isomorfeus
+  class TopLevel
+    class << self
+      attr_accessor :ssr_route_path
+      attr_accessor :transport_ws_url
+
+      def mount!
+        # nothing, but keep it for compatibility with browser
+      end
+
+      def render_component_to_string(component_name, props)
+        component = nil
+        %x{
+          if (typeof component_name === 'string' || component_name instanceof String) {
+            component = component_name.split(".").reduce(function(o, x) {
+              return (o !== null && typeof o[x] !== "undefined" && o[x] !== null) ? o[x] : null;
+            }, Opal.global)
+          } else {
+            component = component_name;
+          }
+        }
+        component = Isomorfeus.cached_component_class(component_name) unless component
+
+        ReactDOMServer.render_to_string(React.create_element(component, `Opal.Hash.$new(props)`))
+      end
+    end
+  end
+end

data/lib/lucid_app/api.rb

@@ -0,0 +1,30 @@
+module LucidApp
+  module API
+    def self.included(base)
+      base.instance_exec do
+        def theme(theme_hash = nil, &block)
+          if block_given?
+            %x{
+              let result = block.$call(Opal.Hash.$new(base.jss_theme));
+              if (typeof result.$to_n === 'function') { base.jss_theme = result.$to_n(); }
+              else { base.jss_theme = result; }
+              return result;
+            }
+          elsif theme_hash
+            `base.jss_theme = #{theme_hash.to_n}` if theme_hash
+            theme_hash
+          elsif `typeof base.jss_theme === 'object'`
+            `Opal.Hash.$new(base.jss_theme)`
+          else
+            nil
+          end
+        end
+        alias_method :theme=, :theme
+      end
+
+      def context
+        @native.JS[:context]
+      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,20 @@
+module LucidApp
+  module Mixin
+    def self.included(base)
+      base.include(::Native::Wrapper)
+      base.extend(::LucidApp::NativeComponentConstructor)
+      base.extend(::LucidPropDeclaration::Mixin)
+      base.extend(::React::Component::ShouldComponentUpdate)
+      base.extend(::LucidComponent::EventHandler)
+      base.include(::React::Component::Elements)
+      base.include(::React::Component::API)
+      base.include(::React::Component::Callbacks)
+      base.include(::LucidComponent::StoreAPI)
+      base.include(::LucidComponent::StylesSupport)
+      base.include(::LucidApp::API)
+      base.include(::LucidComponent::Initializer)
+      base.include(::React::Component::Features)
+      base.include(::React::Component::Resolution)
+    end
+  end
+end

data/lib/lucid_app/native_component_constructor.rb

@@ -0,0 +1,105 @@
+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.lucid_react_component = class extends Opal.global.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 (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
+            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) {
+                  element = Opal.React.native_element_or_component_to_ruby(element);
+                  #{`this.__ruby_instance`.instance_exec(`element`, &`defined_refs[ref]`)}
+                }
+                this[ref] = this[ref].bind(this);
+              } else {
+                this[ref] = Opal.global.React.createRef();
+              }
+            }
+            this.listener = this.listener.bind(this);
+            this.unsubscriber = Opal.Isomorfeus.store.native.subscribe(this.listener);
+          }
+          static get displayName() {
+            return #{component_name};
+          }
+          render() {
+            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(&`base.render_block`)};
+            Opal.React.active_redux_components.pop();
+            Opal.React.active_components.pop();
+            let children = Opal.React.render_buffer.pop();
+            return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
+          }
+          listener() {
+            let next_state = Opal.Isomorfeus.store.native.getState();
+            this.setState({ isomorfeus_store_state: next_state });
+          }
+          componentWillUnmount() {
+            if (typeof this.unsubscriber === "function") { this.unsubscriber(); };
+          }
+          validateProp(props, propName, componentName) {
+            try { base.$validate_prop(propName, props[propName]) }
+            catch (e) { return new Error(componentName + ": Error: prop validation failed: " + e.message); }
+            return null;
+          }
+        }
+        base.jss_styles = null;
+        base.jss_styles_used = null;
+        base.jss_theme = {};
+        base.use_styles = null;
+        base.themed_react_component = function(props) {
+          let classes = null;
+          let theme = Opal.global.ReactJSS.useTheme();
+          if (base.jss_styles) {
+            if (!base.use_styles || (Opal.Isomorfeus["$development?"]() && !Object.is(base.jss_styles, base.jss_styles_used))) {
+              base.jss_styles_used = base.jss_styles;
+              let styles = base.jss_styles
+              if (typeof styles === 'function') { styles = styles(theme); }
+              base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
+            }
+            classes = base.use_styles();
+          }
+          let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
+          return Opal.global.React.createElement(base.lucid_react_component, themed_classes_props);
+        }
+        base.react_component = function(props) {
+          let themed_component = Opal.global.React.createElement(base.themed_react_component, props);
+          return Opal.global.React.createElement(Opal.global.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
+        }
+      }
+    end
+  end
+end

data/lib/lucid_component/app_store_defaults.rb

@@ -0,0 +1,36 @@
+module LucidComponent
+  class AppStoreDefaults
+    def initialize(state, component_name)
+      @state = state
+      if @state.isomorfeus_store
+        @state.isomorfeus_store.merge!(application_state: {})
+      else
+        @state.isomorfeus_store = { application_state: {}}
+      end
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set initial class state
+        key = key.chop if `key.endsWith('=')`
+        @state.isomorfeus_store[:application_state][key] = args[0]
+        current_state = Isomorfeus.store.get_state
+        if !(current_state[:application_state].key?(key))
+          Isomorfeus.store.dispatch(type: 'APPLICATION_STATE', name: key, value: args[0])
+        end
+      else
+        # get class state
+
+        # check if we have a component local state value
+        if @state.isomorfeus_store[:application_state].key?(key)
+          return @state.isomorfeus_store[:application_state][key]
+        end
+      end
+      nil
+    end
+
+    def to_h
+      @state.isomorfeus_store[:application_state]
+    end
+  end
+end

data/lib/lucid_component/app_store_proxy.rb

@@ -0,0 +1,38 @@
+module LucidComponent
+  class AppStoreProxy
+    def initialize(component_instance)
+      @native_component_instance = component_instance.to_n
+      @component_instance = component_instance
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set class state, simply a dispatch
+        action = { type: 'APPLICATION_STATE', name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
+        Isomorfeus.store.dispatch(action)
+      else
+        # check if we have a component local state value
+        if `this.native_component_instance.context.application_state.hasOwnProperty(key)`
+          return @native_component_instance.JS['context'].JS[:application_state].JS[key]
+        elsif @component_instance.class.default_app_store_defined && @component_instance.class.app_store.to_h.key?(key)
+          # check if a default value was given
+          return @component_instance.class.app_store.to_h[key]
+        end
+        # otherwise return nil
+        return nil
+      end
+    end
+
+    def dispatch(action)
+      Isomorfeus.store.dispatch(action)
+    end
+
+    def subscribe(&block)
+      Isomorfeus.store.subscribe(&block)
+    end
+
+    def unsubscribe(unsubscriber)
+      `unsubscriber()`
+    end
+  end
+end

data/lib/lucid_component/base.rb

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

data/lib/lucid_component/class_store_proxy.rb

@@ -0,0 +1,41 @@
+module LucidComponent
+  class ClassStoreProxy
+    def initialize(component_instance)
+      @native_component_instance = component_instance.to_n
+      @component_instance = component_instance
+      @component_name = component_instance.class.to_s
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set class state, simply a dispatch
+        action = { type: 'COMPONENT_CLASS_STATE', class: @component_name, name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
+        Isomorfeus.store.dispatch(action)
+      else
+        # get class state
+        # check if we have a component local state value
+        if @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name] &&
+          @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name].JS.hasOwnProperty(key)
+          return @native_component_instance.JS['context'].JS[:component_class_state].JS[@component_name].JS[key]
+        elsif @component_instance.class.default_class_store_defined && @component_instance.class.class_store.to_h.key?(key)
+          # check if a default value was given
+          return @component_instance.class.class_store.to_h[key]
+        end
+        # otherwise return nil
+        return nil
+      end
+    end
+
+    def dispatch(action)
+      Isomorfeus.store.dispatch(action)
+    end
+
+    def subscribe(&block)
+      Isomorfeus.store.subscribe(&block)
+    end
+
+    def unsubscribe(unsubscriber)
+      `unsubscriber()`
+    end
+  end
+end

data/lib/lucid_component/component_class_store_defaults.rb

@@ -0,0 +1,38 @@
+module LucidComponent
+  class ComponentClassStoreDefaults
+    def initialize(state, component_name)
+      @state = state
+      @component_name = component_name
+      if @state.isomorfeus_store
+        @state.isomorfeus_store.merge!(component_class_state: { @component_name => {} })
+      else
+        @state.isomorfeus_store = { component_class_state: { @component_name => {} } }
+      end
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set initial class state
+        key = key.chop if `key.endsWith('=')`
+        @state.isomorfeus_store[:component_class_state][@component_name][key] = args[0]
+        current_state = Isomorfeus.store.get_state
+        if !(current_state[:component_class_state].key?(@component_name) && current_state[:component_class_state][@component_name].key?(key))
+          Isomorfeus.store.dispatch(type: 'COMPONENT_CLASS_STATE', class: @component_name, name: key, value: args[0])
+        end
+      else
+        # get class state
+
+        # check if we have a component local state value
+
+        if @state.isomorfeus_store[:component_class_state][@component_name].key?(key)
+          return @state.isomorfeus_store[:component_class_state][@component_name][key]
+        end
+      end
+      nil
+    end
+
+    def to_h
+      @state.isomorfeus_store[:component_class_state][@component_name]
+    end
+  end
+end

data/lib/lucid_component/component_instance_store_defaults.rb

@@ -0,0 +1,35 @@
+module LucidComponent
+  class ComponentInstanceStoreDefaults
+    def initialize(state, component_name)
+      @state = {}
+      @component_name = component_name
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set initial class state
+        key = key.chop if `key.endsWith('=')`
+        @state[key] = args[0]
+        current_state = Isomorfeus.store.get_state
+        if !(current_state[:component_state].key?(@component_name) &&
+          current_state[:component_state][@component_name].key?(:instance_defaults) &&
+          current_state[:component_state][@component_name][:instance_defaults].key?(key))
+          Isomorfeus.store.dispatch(type: 'COMPONENT_CLASS_STATE', class: @component_name, name: :instance_defaults, value: { key => args[0]})
+        end
+      else
+        # get class state
+
+        # check if we have a component local state value
+
+        if @state.key?(key)
+          return @state[key]
+        end
+      end
+      nil
+    end
+
+    def to_h
+      @state
+    end
+  end
+end

data/lib/lucid_component/event_handler.rb

@@ -0,0 +1,17 @@
+module LucidComponent
+  module EventHandler
+    def event_handlers
+      @event_handlers ||= []
+    end
+
+    def event_handler(name, &block)
+      event_handlers << name
+      %x{
+        self.lucid_react_component.prototype[name] = function(event, info) {
+          #{ruby_event = ::React::SyntheticEvent.new(`event`)};
+          #{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
+        }
+      }
+    end
+  end
+end

data/lib/lucid_component/initializer.rb

@@ -0,0 +1,12 @@
+module LucidComponent
+  module Initializer
+    def initialize(native_component)
+      @native = native_component
+      @app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
+      @class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
+      @props = `Opal.React.Component.Props.$new(#@native)`
+      @state = `Opal.React.Component.State.$new(#@native)`
+      @store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
+    end
+  end
+end

data/lib/lucid_component/instance_store_proxy.rb

@@ -0,0 +1,45 @@
+module LucidComponent
+  class InstanceStoreProxy
+    def initialize(component_instance)
+      @native_component_instance = component_instance.to_n
+      @component_instance = component_instance
+      @component_object_id = component_instance.object_id.to_s
+    end
+
+    def method_missing(key, *args, &block)
+      if `args.length > 0`
+        # set instance state, simply a dispatch
+
+        action = { type: 'COMPONENT_STATE', object_id: @component_object_id, name: (`key.endsWith('=')` ? key.chop : key), value: args[0] }
+        Isomorfeus.store.dispatch(action)
+
+      else
+        # get instance state
+
+        if @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id] &&
+          @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS.hasOwnProperty(key)
+          # check if we have a component local state value
+          return @native_component_instance.JS[:context].JS[:component_state].JS[@component_object_id].JS[key]
+        elsif @component_instance.class.default_instance_store_defined && @component_instance.class.store.to_h.key?(key)
+          # check if a default value was given
+          return @component_instance.class.store.to_h[key]
+        end
+
+        # otherwise return nil
+        return nil
+      end
+    end
+
+    def dispatch(action)
+      Isomorfeus.store.dispatch(action)
+    end
+
+    def subscribe(&block)
+      Isomorfeus.store.subscribe(&block)
+    end
+
+    def unsubscribe(unsubscriber)
+      `unsubscriber()`
+    end
+  end
+end