isomorfeus-react 16.9.24 → 16.10.0

data/lib/lucid_component/component_instance_store_defaults.rb

@@ -1,35 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

data/lib/lucid_component/mixin.rb

@@ -1,18 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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