isomorfeus-react 16.13.6 → 16.13.11

data/lib/isomorfeus_react/lucid_func/mixin.rb

@@ -1,12 +1,18 @@
 module LucidFunc
   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(::LucidFunc::NativeComponentConstructor)
+      if on_browser?  || on_ssr?
+        base.extend(::LucidFunc::NativeComponentConstructor)
+        base.include(::React::Component::Elements)
+      elsif on_mobile?
+        base.extend(::LucidFunc::ReactNativeComponentConstructor)
+        base.include(::ReactNative::Component::Elements)
+      end
       base.include(::LucidComponent::Api)
+      base.include(::LucidComponent::StylesApi)
     end
   end
 end

data/lib/isomorfeus_react/lucid_func/native_component_constructor.rb

@@ -24,7 +24,7 @@ module LucidFunc
           if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
           let theme = og.ReactJSS.useTheme();
           if (base.jss_styles) {
-            if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+            if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
               let styles;
               if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
               else { styles = base.jss_styles; }
@@ -42,13 +42,12 @@ module LucidFunc
           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.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+          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();
-          if (result.length === 1) { return result[0]; }
-          return result;
+          return (result.length === 1) ? result[0] : result;
         }, base.equality_checker);
         base.react_component.displayName = #{component_name};
       }

data/lib/isomorfeus_react/react/function_component/api.rb

@@ -18,8 +18,8 @@ module React
         `Opal.global.React.useDebugValue(value)`
       end
 
-      def use_effect(&block)
-        `Opal.global.React.useEffect(function() { #{block.call} })`
+      def use_effect(*args, &block)
+        `Opal.global.React.useEffect(function() { #{block.call} }, args)`
       end
 
       def use_imperative_handle(ref, *deps, &block)
@@ -86,12 +86,13 @@ module React
       end
       alias rre render_react_element
 
-      def method_ref(method_symbol)
+      def method_ref(method_symbol, *args)
+        method_key = "#{method_symbol}#{args}"
         %x{
-          if (#{self}.method_refs && #{self}.method_refs[#{method_symbol}]) { return #{self}.method_refs[#{method_symbol}]; }
+          if (#{self}.method_refs && #{self}.method_refs[#{method_key}]) { return #{self}.method_refs[#{method_key}]; }
           if (!#{self}.method_refs) { #{self}.method_refs = {}; }
-          #{self}.method_refs[#{method_symbol}] = #{method(method_symbol)};
-          return #{self}.method_refs[#{method_symbol}];
+          #{self}.method_refs[#{method_key}] = { m: #{method(method_symbol)}, a: args };
+          return #{self}.method_refs[#{method_key}];
         }
       end
       alias m_ref method_ref

data/lib/isomorfeus_react/react/function_component/mixin.rb

@@ -2,7 +2,11 @@ module React
   module FunctionComponent
     module Mixin
       def self.included(base)
-        base.include(::React::Component::Elements)
+        if on_browser? || on_ssr?
+          base.include(::React::Component::Elements)
+        elsif on_mobile?
+          base.include(::ReactNative::Component::Elements)
+        end
         base.include(::React::Component::Features)
         base.include(::React::FunctionComponent::Initializer)
         base.include(::React::FunctionComponent::Api)

data/lib/isomorfeus_react/react/function_component/native_component_constructor.rb

@@ -19,10 +19,11 @@ module React
             __ruby_instance.props = props;
             oper.active_components.push(__ruby_instance);
             let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_components.pop();
             // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
-            return oper.render_buffer.pop();
+            let result = oper.render_buffer.pop();
+            return (result.length === 1) ? result[0] : result;
           }
           base.react_component.displayName = #{component_name};
         }

data/lib/isomorfeus_react/react/memo_component/mixin.rb

@@ -2,7 +2,11 @@ module React
   module MemoComponent
     module Mixin
       def self.included(base)
-        base.include(::React::Component::Elements)
+        if on_browser? || on_ssr?
+          base.include(::React::Component::Elements)
+        elsif on_mobile?
+          base.include(::ReactNative::Component::Elements)
+        end
         base.include(::React::Component::Features)
         base.include(::React::FunctionComponent::Initializer)
         base.include(::React::FunctionComponent::Api)

data/lib/isomorfeus_react/react/memo_component/native_component_constructor.rb

@@ -20,12 +20,11 @@ module React
             __ruby_instance.props = props;
             oper.active_components.push(__ruby_instance);
             let block_result = #{`__ruby_instance`.instance_exec(&`base.render_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            if (block_result && block_result !== nil) { oper.render_block_result(block_result); }
             oper.active_components.pop();
             // console.log("memo popping", oper.render_buffer, oper.render_buffer.toString());
             let result = oper.render_buffer.pop();
-            if (result.length === 1) { return result[0]; }
-            return result;
+            return (result.length === 1) ? result[0] : result;
           }, base.equality_checker);
           base.react_component.displayName = #{component_name};
         }

data/lib/isomorfeus_react_material/lucid_material/app/mixin.rb

@@ -10,6 +10,7 @@ module LucidMaterial
         base.include(::React::Component::Api)
         base.include(::React::Component::Callbacks)
         base.include(::LucidComponent::Api)
+        base.include(::LucidComponent::StylesApi)
         base.include(::LucidApp::Api)
         base.include(::LucidComponent::Initializer)
         base.include(::React::Component::Features)

data/lib/isomorfeus_react_material/lucid_material/app/native_component_constructor.rb

@@ -5,7 +5,6 @@ module LucidMaterial
       # 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'
         theme_component_name = base.to_s + 'ThemeWrapper'
         # language=JS
         %x{
@@ -15,7 +14,7 @@ module LucidMaterial
             let classes = null;
             let theme = opag.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
                 let styles;
                 if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
                 else { styles = base.jss_styles; }
@@ -27,11 +26,23 @@ module LucidMaterial
             return opag.React.createElement(base.lucid_react_component, themed_classes_props);
           }
           base.themed_react_component.displayName = #{theme_component_name};
-          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);
+          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_react_component, this.props);
+              return Opal.global.React.createElement(Opal.global.MuiStyles.ThemeProvider, { theme: base.jss_theme }, themed_component);
+            }
           }
-          base.react_component.displayName = #{component_name};
         }
       end
     end

data/lib/isomorfeus_react_material/lucid_material/component/mixin.rb

@@ -10,6 +10,7 @@ module LucidMaterial
         base.include(::React::Component::Api)
         base.include(::React::Component::Callbacks)
         base.include(::LucidComponent::Api)
+        base.include(::LucidComponent::StylesApi)
         base.include(::LucidComponent::Initializer)
         base.include(::React::Component::Features)
       end

data/lib/isomorfeus_react_material/lucid_material/component/native_component_constructor.rb

@@ -8,13 +8,13 @@ module LucidMaterial
         component_name = base.to_s + 'Wrapper'
         # language=JS
         %x{
-          base.react_component = function(props) {
+          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 theme = Opal.global.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
                 let styles;
                 if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
                 else { styles = base.jss_styles; }
@@ -27,7 +27,7 @@ module LucidMaterial
             new_props.theme = theme;
             new_props.store = store;
             return Opal.global.React.createElement(base.lucid_react_component, new_props);
-          }
+          }, Opal.React.props_are_equal);
           base.react_component.displayName = #{component_name};
         }
       end

data/lib/isomorfeus_react_material/lucid_material/func/mixin.rb

@@ -8,6 +8,7 @@ module LucidMaterial
         base.include(::React::FunctionComponent::Api)
         base.extend(::LucidMaterial::Func::NativeComponentConstructor)
         base.include(::LucidComponent::Api)
+        base.include(::LucidComponent::StylesApi)
       end
     end
   end

data/lib/isomorfeus_react_material/lucid_material/func/native_component_constructor.rb

@@ -25,7 +25,7 @@ module LucidMaterial
             if (base.store_updates) { store = og.React.useContext(og.LucidApplicationContext); }
             let theme = og.MuiStyles.useTheme();
             if (base.jss_styles) {
-              if (!base.use_styles || (Opal.Isomorfeus.development && Opal.Isomorfeus.development !== nil)) {
+              if (!base.use_styles || (Opal.Isomorfeus.development === true)) {
                 let styles;
                 if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
                 else { styles = base.jss_styles; }
@@ -43,13 +43,12 @@ module LucidMaterial
             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.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            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();
-            if (result.length === 1) { return result[0]; }
-            return result;
+            return (result.length === 1) ? result[0] : result;
           }, base.equality_checker);
           base.react_component.displayName = #{component_name};
         }

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

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

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

@@ -0,0 +1,19 @@
+module LucidPaper
+  module App
+    module Mixin
+      def self.included(base)
+        base.include(::Native::Wrapper)
+        base.extend(::LucidApp::NativeLucidComponentConstructor)
+        base.extend(::LucidPaper::App::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(::LucidApp::Api)
+        base.include(::LucidComponent::Initializer)
+        base.include(::React::Component::Features)
+      end
+    end
+  end
+end

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