isomorfeus-react 16.10.0 → 16.10.1

data/lib/lucid_component/mixin.rb

@@ -0,0 +1,18 @@
+module LucidComponent
+  module Mixin
+    def self.included(base)
+      base.include(::Native::Wrapper)
+      base.extend(::LucidComponent::NativeComponentConstructor)
+      base.extend(::LucidPropDeclaration::Mixin)
+      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(::LucidComponent::Initializer)
+      base.include(::React::Component::Features)
+      base.include(::React::Component::Resolution)
+    end
+  end
+end

data/lib/lucid_component/native_component_constructor.rb

@@ -0,0 +1,116 @@
+module LucidComponent
+  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.__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) {
+                  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();
+              }
+            }
+          }
+          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);
+            #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+            Opal.React.active_redux_components.pop();
+            Opal.React.active_components.pop();
+            return Opal.React.render_buffer.pop();
+          }
+          data_access() {
+            return this.context;
+          }
+          shouldComponentUpdate(next_props, next_state) {
+            var next_props_keys = Object.keys(next_props);
+            var this_props_keys = Object.keys(this.props);
+            if (next_props_keys.length !== this_props_keys.length) { return true; }
+
+            var next_state_keys = Object.keys(next_state);
+            var this_state_keys = Object.keys(this.state);
+            if (next_state_keys.length !== this_state_keys.length) { return true; }
+
+            for (var property in next_props) {
+              if (next_props.hasOwnProperty(property)) {
+                if (!this.props.hasOwnProperty(property)) { return true; };
+                if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
+                else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
+                         typeof next_props[property]['$!='] !== "undefined" &&
+                         typeof this.props[property] !== "undefined" && this.props[property] !== null &&
+                         typeof this.props[property]['$!='] !== "undefined") {
+                  if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; };
+                } else if (next_props[property] !== this.props[property]) { return true; };
+              }
+            }
+            for (var property in next_state) {
+              if (next_state.hasOwnProperty(property)) {
+                if (!this.state.hasOwnProperty(property)) { return true; };
+                if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
+                    this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
+                  if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true };
+                } else if (next_state[property] !== this.state[property]) { return true };
+              }
+            }
+            return false;
+          }
+          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.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
+        base.jss_styles = null;
+        base.jss_styles_used = null;
+        base.use_styles = null;
+        base.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 = base.jss_styles(theme); }
+              base.use_styles = Opal.global.ReactJSS.createUseStyles(styles);
+            }
+            classes = base.use_styles();
+          }
+          let class_theme_props = Object.assign({}, props, { classes: classes, theme: theme });
+          return Opal.global.React.createElement(base.lucid_react_component, class_theme_props);
+        }
+      }
+    end
+  end
+end

data/lib/lucid_component/reducers.rb

@@ -0,0 +1,48 @@
+module LucidComponent
+  module Reducers
+    class << self
+      attr_reader :component_reducers_added
+
+      def add_component_reducers_to_store
+        unless component_reducers_added
+          @_component_reducers_added = true
+          component_reducer = Redux.create_reducer do |prev_state, action|
+            case action[:type]
+            when 'COMPONENT_STATE'
+              if action.key?(:set_state)
+                action[:set_state]
+              else
+                new_state = {}.merge!(prev_state) # make a copy of state
+                new_state[action[:object_id]] = {} unless new_state.key?(action[:object_id])
+                new_state[action[:object_id]].merge!(action[:name] => action[:value])
+                # new_state == prev_state ? prev_state : new_state
+                new_state
+              end
+            else
+              prev_state
+            end
+          end
+
+          component_class_reducer = Redux.create_reducer do |prev_state, action|
+            case action[:type]
+            when 'COMPONENT_CLASS_STATE'
+              if action.key?(:set_state)
+                action[:set_state]
+              else
+                new_state = {}.merge!(prev_state) # make a copy of state
+                new_state[action[:class]] = {} unless new_state.key?(action[:class])
+                new_state[action[:class]].merge!(action[:name] => action[:value])
+                # new_state == prev_state ? prev_state : new_state
+                new_state
+              end
+            else
+              prev_state
+            end
+          end
+          Redux::Store.preloaded_state_merge!(component_state: {}, component_class_state: {})
+          Redux::Store.add_reducers(component_state: component_reducer, component_class_state: component_class_reducer)
+        end
+      end
+    end
+  end
+end

data/lib/lucid_component/store_api.rb

@@ -0,0 +1,38 @@
+module LucidComponent
+  module StoreAPI
+    def self.included(base)
+      base.instance_exec do
+        attr_accessor :app_store
+        attr_accessor :class_store
+        attr_accessor :store
+
+        def default_app_store_defined
+          @default_app_store_defined
+        end
+
+        def default_class_store_defined
+          @default_class_store_defined
+        end
+
+        def default_instance_store_defined
+          @default_instance_store_defined
+        end
+
+        def app_store
+          @default_app_store_defined = true
+          @default_app_store ||= ::LucidComponent::AppStoreDefaults.new(state, self.to_s)
+        end
+
+        def class_store
+          @default_class_store_defined = true
+          @default_class_store ||= ::LucidComponent::ComponentClassStoreDefaults.new(state, self.to_s)
+        end
+
+        def store
+          @default_instance_store_defined = true
+          @default_instance_store ||= ::LucidComponent::ComponentInstanceStoreDefaults.new(state, self.to_s)
+        end
+      end
+    end
+  end
+end

data/lib/lucid_component/styles_support.rb

@@ -0,0 +1,37 @@
+module LucidComponent
+  module StylesSupport
+    def self.included(base)
+      base.instance_exec do
+        def styles(styles_hash = nil, &block)
+          if block_given?
+            %x{
+              base.jss_styles = function(theme) {
+                let wrapped_theme = Opal.React.Component.Styles.$new(theme);
+                var result = block.$call(wrapped_theme);
+                return result.$to_n();
+              }
+            }
+            nil
+          elsif styles_hash
+            `base.jss_styles = #{styles_hash.to_n}` if styles_hash
+            styles_hash
+          elsif `typeof base.jss_styles === 'object'`
+            `Opal.Hash.$new(base.jss_styles)`
+          else
+            nil
+          end
+        end
+        alias_method :styles=, :styles
+      end
+
+      def styles
+        props.classes
+      end
+
+      def theme
+        props.theme
+      end
+    end
+  end
+end
+

data/lib/lucid_material/app/base.rb

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

data/lib/lucid_material/app/mixin.rb

@@ -0,0 +1,22 @@
+module LucidMaterial
+  module App
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::LucidMaterial::App::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
+end

data/lib/lucid_material/app/native_component_constructor.rb

@@ -0,0 +1,107 @@
+module LucidMaterial
+  module App
+    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();
+              var children = Opal.React.render_buffer.pop();
+              return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, children);
+            }
+            listener() {
+              var 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 = Opal.global.Mui.createMuiTheme();
+          base.use_styles = null;
+          base.themed_react_component = function(props) {
+            let classes = null;
+            let theme = Opal.global.MuiStyles.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.MuiStyles.makeStyles(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.MuiStyles.ThemeProvider, { theme: base.jss_theme }, themed_component);
+          }
+        }
+      end
+    end
+  end
+end

data/lib/lucid_material/component/base.rb

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

data/lib/lucid_material/component/mixin.rb

@@ -0,0 +1,20 @@
+module LucidMaterial
+  module Component
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::LucidMaterial::Component::NativeComponentConstructor)
+        base.extend(::LucidPropDeclaration::Mixin)
+        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(::LucidComponent::Initializer)
+        base.include(::React::Component::Features)
+        base.include(::React::Component::Resolution)
+      end
+    end
+  end
+end

data/lib/lucid_material/component/native_component_constructor.rb

@@ -0,0 +1,118 @@
+module LucidMaterial
+  module Component
+    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.__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) {
+                    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();
+                }
+              }
+            }
+            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);
+              #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
+              Opal.React.active_redux_components.pop();
+              Opal.React.active_components.pop();
+              return Opal.React.render_buffer.pop();
+            }
+            data_access() {
+              return this.context;
+            }
+            shouldComponentUpdate(next_props, next_state) {
+              var next_props_keys = Object.keys(next_props);
+              var this_props_keys = Object.keys(this.props);
+              if (next_props_keys.length !== this_props_keys.length) { return true; }
+
+              var next_state_keys = Object.keys(next_state);
+              var this_state_keys = Object.keys(this.state);
+              if (next_state_keys.length !== this_state_keys.length) { return true; }
+
+              for (var property in next_props) {
+                if (next_props.hasOwnProperty(property)) {
+                  if (!this.props.hasOwnProperty(property)) { return true; };
+                  if (property == "children") { if (next_props.children !== this.props.children) { return true; }}
+                  else if (typeof next_props[property] !== "undefined" && next_props[property] !== null &&
+                           typeof next_props[property]['$!='] !== "undefined" &&
+                           typeof this.props[property] !== "undefined" && this.props[property] !== null &&
+                           typeof this.props[property]['$!='] !== "undefined") {
+                    if (#{ !! (`next_props[property]` != `this.props[property]`) }) { return true; };
+                  } else if (next_props[property] !== this.props[property]) { return true; };
+                }
+              }
+              for (var property in next_state) {
+                if (next_state.hasOwnProperty(property)) {
+                  if (!this.state.hasOwnProperty(property)) { return true; };
+                  if (next_state[property] !== null && typeof next_state[property]['$!='] !== "undefined" &&
+                      this.state[property] !== null && typeof this.state[property]['$!='] !== "undefined") {
+                    if (#{ !! (`next_state[property]` != `this.state[property]`) }) { return true };
+                  } else if (next_state[property] !== this.state[property]) { return true };
+                }
+              }
+              return false;
+            }
+            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.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
+          base.jss_styles = null;
+          base.jss_styles_used = null;
+          base.use_styles = null;
+          base.react_component = function(props) {
+            let classes = null;
+            let theme = Opal.global.MuiStyles.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.MuiStyles.makeStyles(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);
+          }
+        }
+      end
+    end
+  end
+end