isomorfeus-react 16.13.9 → 16.13.12

data/lib/isomorfeus_react_paper/lucid_paper/app/native_component_constructor.rb

@@ -0,0 +1,32 @@
+module LucidPaper
+  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)
+        %x{
+          base.jss_theme = Opal.global.Paper.DefaultTheme;
+          base.themed_component = Opal.global.Paper.withTheme(base.lucid_react_component);
+          base.react_component = class extends Opal.global.React.Component {
+            constructor(props) {
+              super(props);
+              if (Opal.Isomorfeus.$top_component() == nil) { Opal.Isomorfeus['$top_component='](this); }
+            }
+            static get displayName() {
+              return "IsomorfeusTopLevelComponent";
+            }
+            static set displayName(new_name) {
+              // dont do anything here except returning the set value
+              return new_name;
+            }
+            render() {
+              let themed_component = Opal.global.React.createElement(base.themed_component, this.props);
+              return Opal.global.React.createElement(Opal.global.Paper.Provider, { theme: base.jss_theme }, themed_component);
+            }
+          }
+        }
+      end
+    end
+  end
+end

data/lib/isomorfeus_react_paper/lucid_paper/component/base.rb

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

data/lib/isomorfeus_react_paper/lucid_paper/component/mixin.rb

@@ -0,0 +1,18 @@
+module LucidPaper
+  module Component
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::LucidComponent::NativeLucidComponentConstructor)
+        base.extend(::LucidPaper::Component::NativeComponentConstructor)
+        base.extend(::LucidPropDeclaration::Mixin)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::Api)
+        base.include(::React::Component::Callbacks)
+        base.include(::LucidComponent::Api)
+        base.include(::LucidComponent::Initializer)
+        base.include(::React::Component::Features)
+      end
+    end
+  end
+end

data/lib/isomorfeus_react_paper/lucid_paper/component/native_component_constructor.rb

@@ -0,0 +1,25 @@
+module LucidPaper
+  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 + 'Wrapper'
+        # language=JS
+        %x{
+          base.react_component = Opal.global.React.memo(function(props) {
+            let classes = null;
+            let store;
+            if (base.store_updates) { store = Opal.global.React.useContext(Opal.global.LucidApplicationContext); }
+            let new_props = Object.assign({}, props)
+            new_props.store = store;
+            new_props.theme = Opal.global.Paper.useTheme();
+            return Opal.global.React.createElement(base.lucid_react_component, new_props);
+          }, Opal.React.props_are_equal);
+          base.react_component.displayName = #{component_name};
+        }
+      end
+    end
+  end
+end

data/lib/isomorfeus_react_paper/lucid_paper/func/base.rb

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

data/lib/isomorfeus_react_paper/lucid_paper/func/mixin.rb

@@ -0,0 +1,14 @@
+module LucidPaper
+  module Func
+    module Mixin
+      def self.included(base)
+        base.include(::React::Component::Elements)
+        base.include(::React::Component::Features)
+        base.include(::LucidFunc::Initializer)
+        base.include(::React::FunctionComponent::Api)
+        base.extend(::LucidPaper::Func::NativeComponentConstructor)
+        base.include(::LucidComponent::Api)
+      end
+    end
+  end
+end

data/lib/isomorfeus_react_paper/lucid_paper/func/native_component_constructor.rb

@@ -0,0 +1,71 @@
+module LucidPaper
+  module Func
+    module NativeComponentConstructor
+      def self.extended(base)
+        component_name = "#{base.to_s}Wrapper"
+        %x{
+          base.store_updates = true;
+          base.equality_checker = null;
+          base.instance_init = function(initial) {
+            let ruby_state = { instance: #{base.new(`{}`)} };
+            ruby_state.instance.__ruby_instance = ruby_state.instance;
+            ruby_state.instance.data_access = function() { return this.props.store; }
+            ruby_state.instance.data_access.bind(ruby_state.instance);
+            return ruby_state;
+          }
+          base.instance_reducer = function(state, action) { return state; }
+          base.react_component = Opal.global.React.memo(function(props) {
+            const og = Opal.global;
+            const oper = Opal.React;
+            oper.render_buffer.push([]);
+            // console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
+            // Lucid functionality
+            let store;
+            if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
+            // prepare Ruby instance
+            const [__ruby_state, __ruby_dispatch] = og.React.useReducer(base.instance_reducer, null, base.instance_init);
+            const __ruby_instance = __ruby_state.instance;
+            __ruby_instance.props = Object.assign({}, props);
+            __ruby_instance.props.store = store;
+            __ruby_instance.props.theme = Opal.global.Paper.useTheme();
+            oper.active_components.push(__ruby_instance);
+            oper.active_redux_components.push(__ruby_instance);
+            let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
+            oper.active_redux_components.pop();
+            oper.active_components.pop();
+            // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
+            let result = oper.render_buffer.pop();
+            return (result.length === 1) ? result[0] : result;
+          }, base.equality_checker);
+          base.react_component.displayName = #{component_name};
+        }
+
+        base_module = base.to_s.deconstantize
+        if base_module != ''
+          base_module.constantize.define_singleton_method(base.to_s.demodulize) do |*args, &block|
+            `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
+          end
+        else
+          Object.define_method(base.to_s) do |*args, &block|
+            `Opal.React.internal_prepare_args_and_render(#{base}.react_component, args, block)`
+          end
+        end
+
+        def props_are_equal?(&block)
+          %x{
+              base.equality_checker = function (prev_props, next_props) {
+                var prev_ruby_props = Opal.React.Component.Props.$new({props: prev_props});
+                var next_ruby_props = Opal.React.Component.Props.$new({props: next_props});
+                return #{block.call(`prev_ruby_props`, `next_ruby_props`)};
+              }
+            }
+        end
+
+        def render(&block)
+          `base.render_block = #{block}`
+        end
+      end
+    end
+  end
+end

data/lib/lucid_app/context.rb

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

data/lib/lucid_prop_declaration/mixin.rb

@@ -1,126 +1,126 @@
-module LucidPropDeclaration
-  module Mixin
-    if RUBY_ENGINE == 'opal'
-      def self.extended(base)
-        def prop(prop_name, validate_hash = { required: true })
-          validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
-          if validate_hash.key?(:default)
-            %x{
-              if (base.lucid_react_component) {
-                let react_prop_name = Opal.React.lower_camelize(prop_name);
-                #{value = validate_hash[:default]}
-                if (!base.lucid_react_component.defaultProps) { base.lucid_react_component.defaultProps = {}; }
-                base.lucid_react_component.defaultProps[react_prop_name] = value;
-                if (!base.lucid_react_component.propTypes) { base.lucid_react_component.propTypes = {}; }
-                base.lucid_react_component.propTypes[react_prop_name] = base.lucid_react_component.prototype.validateProp;
-              } else if (base.react_component) {
-                let react_prop_name = Opal.React.lower_camelize(prop_name);
-                #{value = validate_hash[:default]}
-                if (!base.react_component.defaultProps) { base.react_component.defaultProps = {}; }
-                base.react_component.defaultProps[react_prop_name] = value;
-                if (!base.react_component.propTypes) { base.react_component.propTypes = {}; }
-                base.react_component.propTypes[react_prop_name] = base.react_component.prototype.validateProp;
-              }
-            }
-          end
-          declared_props[prop_name.to_sym] = validate_hash
-        end
-      end
-
-      def validate_function
-        %x{
-          if (typeof self.validate_function === 'undefined') {
-            self.validate_function = function(props_object) {
-              try { self.$validate_props(Opal.Hash.$new(props_object)) }
-              catch (e) { return e.message; }
-            }
-          }
-          return self.validate_function;
-        }
-      end
-
-      def validate_prop_function(prop)
-        function_name = "validate_#{prop}_function"
-        %x{
-          if (typeof self[function_name] === 'undefined') {
-            self[function_name] = function(value) {
-              try { self.$validate_prop(prop, value); }
-              catch (e) { return e.message; }
-            }
-          }
-          return self[function_name];
-        }
-      end
-    else
-      def prop(prop_name, validate_hash = { required: true })
-        validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
-        declared_props[prop_name.to_sym] = validate_hash
-      end
-    end
-
-    def declared_props
-      @declared_props ||= {}
-    end
-
-    def valid_prop?(prop, value)
-      validate_prop(prop, value)
-    rescue
-      false
-    end
-
-    def valid_props?(props)
-      validate_props(props)
-    rescue
-      false
-    end
-
-    def validate
-      Isomorfeus::Props::ValidateHashProxy.new
-    end
-
-    def validate_prop(prop, value)
-      return false unless declared_props.key?(prop)
-      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
-      validator.validate!
-      true
-    end
-
-    def validate_props(props)
-      props = {} unless props
-      declared_props.each_key do |prop|
-        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
-          Isomorfeus.raise_error(message: "Required prop #{prop} not given!")
-        end
-      end
-      result = true
-      props.each do |p, v|
-        r = validate_prop(p, v)
-        result = false unless r
-      end
-      result
-    end
-
-    def validated_prop(prop, value)
-      Isomorfeus.raise_error(message: "No such prop #{prop} declared!") unless declared_props.key?(prop)
-      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
-      validator.validated_value
-    end
-
-    def validated_props(props)
-      props = {} unless props
-
-      declared_props.each_key do |prop|
-        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
-          Isomorfeus.raise_error(message: "Required prop #{prop} not given!")
-        end
-        props[prop] = nil unless props.key?(prop) # let validator handle value
-      end
-
-      result = {}
-      props.each do |p, v|
-        result[p] = validated_prop(p, v)
-      end
-      result
-    end
-  end
-end
+module LucidPropDeclaration
+  module Mixin
+    if RUBY_ENGINE == 'opal'
+      def self.extended(base)
+        def prop(prop_name, validate_hash = { required: true })
+          validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
+          if validate_hash.key?(:default)
+            %x{
+              if (base.lucid_react_component) {
+                let react_prop_name = Opal.React.lower_camelize(prop_name);
+                #{value = validate_hash[:default]}
+                if (!base.lucid_react_component.defaultProps) { base.lucid_react_component.defaultProps = {}; }
+                base.lucid_react_component.defaultProps[react_prop_name] = value;
+                if (!base.lucid_react_component.propTypes) { base.lucid_react_component.propTypes = {}; }
+                base.lucid_react_component.propTypes[react_prop_name] = base.lucid_react_component.prototype.validateProp;
+              } else if (base.react_component) {
+                let react_prop_name = Opal.React.lower_camelize(prop_name);
+                #{value = validate_hash[:default]}
+                if (!base.react_component.defaultProps) { base.react_component.defaultProps = {}; }
+                base.react_component.defaultProps[react_prop_name] = value;
+                if (!base.react_component.propTypes) { base.react_component.propTypes = {}; }
+                base.react_component.propTypes[react_prop_name] = base.react_component.prototype.validateProp;
+              }
+            }
+          end
+          declared_props[prop_name.to_sym] = validate_hash
+        end
+      end
+
+      def validate_function
+        %x{
+          if (typeof self.validate_function === 'undefined') {
+            self.validate_function = function(props_object) {
+              try { self.$validate_props(Opal.Hash.$new(props_object)) }
+              catch (e) { return e.message; }
+            }
+          }
+          return self.validate_function;
+        }
+      end
+
+      def validate_prop_function(prop)
+        function_name = "validate_#{prop}_function"
+        %x{
+          if (typeof self[function_name] === 'undefined') {
+            self[function_name] = function(value) {
+              try { self.$validate_prop(prop, value); }
+              catch (e) { return e.message; }
+            }
+          }
+          return self[function_name];
+        }
+      end
+    else
+      def prop(prop_name, validate_hash = { required: true })
+        validate_hash = validate_hash.to_h if validate_hash.class == Isomorfeus::Props::ValidateHashProxy
+        declared_props[prop_name.to_sym] = validate_hash
+      end
+    end
+
+    def declared_props
+      @declared_props ||= {}
+    end
+
+    def valid_prop?(prop, value)
+      validate_prop(prop, value)
+    rescue
+      false
+    end
+
+    def valid_props?(props)
+      validate_props(props)
+    rescue
+      false
+    end
+
+    def validate
+      Isomorfeus::Props::ValidateHashProxy.new
+    end
+
+    def validate_prop(prop, value)
+      return false unless declared_props.key?(prop)
+      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
+      validator.validate!
+      true
+    end
+
+    def validate_props(props)
+      props = {} unless props
+      declared_props.each_key do |prop|
+        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
+          Isomorfeus.raise_error(message: "Required prop #{prop} not given!")
+        end
+      end
+      result = true
+      props.each do |p, v|
+        r = validate_prop(p, v)
+        result = false unless r
+      end
+      result
+    end
+
+    def validated_prop(prop, value)
+      Isomorfeus.raise_error(message: "No such prop #{prop} declared!") unless declared_props.key?(prop)
+      validator = Isomorfeus::Props::Validator.new(self, prop, value, declared_props[prop])
+      validator.validated_value
+    end
+
+    def validated_props(props)
+      props = {} unless props
+
+      declared_props.each_key do |prop|
+        if declared_props[prop].key?(:required) && declared_props[prop][:required] && !props.key?(prop)
+          Isomorfeus.raise_error(message: "Required prop #{prop} not given!")
+        end
+        props[prop] = nil unless props.key?(prop) # let validator handle value
+      end
+
+      result = {}
+      props.each do |p, v|
+        result[p] = validated_prop(p, v)
+      end
+      result
+    end
+  end
+end

data/lib/react/children.rb

@@ -1,35 +1,35 @@
-module React
-  module Children
-    class << self
-      def count(children)
-        `Opal.global.React.Children.count(children)`
-      end
-
-      def for_each(children, &block)
-        %x{
-          var fun = function(child) {
-            #{block.call(child)};
-          }
-          Opal.global.React.Children.forEach(children, fun);
-        }
-      end
-
-      def map(children, &block)
-        %x{
-          var fun = function(child) {
-            return #{block.call(child)};
-          }
-          return Opal.global.React.Children.map(children, fun);
-        }
-      end
-
-      def only(children)
-        `Opal.global.React.Children.only(children)`
-      end
-
-      def to_array(children)
-        `Opal.global.React.Children.toArray(children)`
-      end
-    end
-  end
+module React
+  module Children
+    class << self
+      def count(children)
+        `Opal.global.React.Children.count(children)`
+      end
+
+      def for_each(children, &block)
+        %x{
+          var fun = function(child) {
+            #{block.call(child)};
+          }
+          Opal.global.React.Children.forEach(children, fun);
+        }
+      end
+
+      def map(children, &block)
+        %x{
+          var fun = function(child) {
+            return #{block.call(child)};
+          }
+          return Opal.global.React.Children.map(children, fun);
+        }
+      end
+
+      def only(children)
+        `Opal.global.React.Children.only(children)`
+      end
+
+      def to_array(children)
+        `Opal.global.React.Children.toArray(children)`
+      end
+    end
+  end
 end