isomorfeus-react 16.11.0 → 16.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 213e018e729c219e9de32cd2b8a0d74526e7af1f28328d7773e39972b67eabe1
-  data.tar.gz: cf6644194924c5d90d04a27019bcf299888ebfa2e25ff0f789a621a1622607f2
+  metadata.gz: b5301ce025d6a20a58407e97c18e9cb8035239521878ba82ed8d8595feb80112
+  data.tar.gz: afbd4361a197d7ba37968b0058520ef1ce922028debc2a137fd8efb0adad5445
 SHA512:
-  metadata.gz: b5f64d8d14b3c25a5b556bf052748652c248e5d903d791e1851966594d5b94a69dd8fae09e95274c8a4e7c3669c138d46d82186d5cbdb7d240002cc9505cc48a
-  data.tar.gz: 3645999619b36bec9b541145ef748fa9c0f098386296b20c7c15f7f467c52468a608400445e6d622fce9688766aa5f56d613c2996ece58443327adae5913e908
+  metadata.gz: e6cac4b0b0259f8f3480b8aa8794e3e6919c79486e99039a73b7835b97897b4059ffe66cc559cf7263381e9aa7e0c5c91d95cdca3de647491b95b7eeb97ad7db
+  data.tar.gz: 3da5277c55b661864d71edc26800ffb05a82afeedc4dca8b73948bbc4fb37d6b13d20fe4a2394fd06ac2d733d31218946ee7d542514039be7ba6f5ac7a0292d0

data/README.md

@@ -9,7 +9,7 @@ At the [Isomorfeus Framework Project](http://isomorfeus.com)
 isomorfeus-react version follows the React version which features and API it implements.
 
 ### React
-Isomorfeus-react 16.10.x implements features and the API of React 16.8 and should be used with React 16.10
+Isomorfeus-react 16.11.x implements features and the API of React 16.11 and should be used with React 16.11
 
 ### Preact
 isomorfeus-react works with preact version 10.0.x.
@@ -32,6 +32,7 @@ Component Types:
 - [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
 - [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
 - [LucidMaterial App, LucidMaterial Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_material_component.md) - support for [MaterialUI](https://material-ui.com)
+- [Lucid Func, LucidMaterial Func (for use with Hooks)](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_func_component.md)
 - [React Javascript Components and React Elements](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/javascript_component.md)
 
 Which component to use?

data/lib/isomorfeus-react-material-ui.rb

@@ -8,3 +8,8 @@ require 'lucid_material/component/base'
 require 'lucid_material/app/native_component_constructor'
 require 'lucid_material/app/mixin'
 require 'lucid_material/app/base'
+# LucidMaterial::Func
+require 'lucid_material/func/initializer'
+require 'lucid_material/func/native_component_constructor'
+require 'lucid_material/func/mixin'
+require 'lucid_material/func/base'

data/lib/isomorfeus-react.rb

@@ -51,12 +51,13 @@ if RUBY_ENGINE == 'opal'
 
   # Function Component
   require 'react/function_component/resolution'
+  require 'react/function_component/initializer'
   require 'react/function_component/api'
   require 'react/function_component/event_handler'
-  require 'react/function_component/creator'
+  require 'react/function_component/native_component_constructor'
   require 'react/function_component/mixin'
   require 'react/function_component/base'
-  require 'react/memo_component/creator'
+  require 'react/memo_component/native_component_constructor'
   require 'react/memo_component/mixin'
   require 'react/memo_component/base'
 
@@ -84,10 +85,15 @@ if RUBY_ENGINE == 'opal'
   require 'lucid_app/context'
   LucidApp::Context.create_application_context
 
+  # LucidFunc
+  require 'lucid_func/initializer'
+  require 'lucid_func/native_component_constructor'
+  require 'lucid_func/mixin'
+  require 'lucid_func/base'
+
   # LucidComponent
   require 'lucid_component/environment_support'
-  require 'lucid_component/styles_support'
-  require 'lucid_component/store_api'
+  require 'lucid_component/api'
   require 'lucid_component/app_store_defaults'
   require 'lucid_component/component_class_store_defaults'
   require 'lucid_component/component_instance_store_defaults'

data/lib/lucid_app/api.rb

@@ -21,10 +21,6 @@ module LucidApp
         end
         alias_method :theme=, :theme
       end
-
-      def context
-        @native.JS[:context]
-      end
     end
   end
 end

data/lib/lucid_app/mixin.rb

@@ -11,8 +11,7 @@ module LucidApp
       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::API)
       base.include(::LucidApp::API)
       base.include(::LucidComponent::Initializer)
       base.include(::React::Component::Features)

data/lib/lucid_app/native_component_constructor.rb

@@ -4,7 +4,8 @@ module LucidApp
     # 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
+      component_name = base.to_s + 'Wrapper'
+      theme_component_name = base.to_s + 'ThemeWrapper'
       # language=JS
       %x{
         base.jss_theme = {};
@@ -23,10 +24,12 @@ module LucidApp
           let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
           return Opal.global.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.ReactJSS.ThemeProvider, { theme: base.jss_theme }, themed_component);
         }
+        base.react_component.displayName = #{component_name};
       }
     end
   end

data/lib/lucid_app/native_lucid_component_constructor.rb

@@ -58,19 +58,20 @@ module LucidApp
             return new_name;
           }
           render() {
+            const oper = Opal.React;
             this.context = this.state.isomorfeus_store_state;
-            Opal.React.render_buffer.push([]);
-            // console.log("lucid app pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            Opal.React.active_components.push(this);
-            Opal.React.active_redux_components.push(this.__ruby_instance);
+            oper.render_buffer.push([]);
+            // console.log("lucid app pushed", oper.render_buffer, oper.render_buffer.toString());
+            oper.active_components.push(this);
+            oper.active_redux_components.push(this.__ruby_instance);
             let block_result;
             if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
             else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
-            Opal.React.active_redux_components.pop();
-            Opal.React.active_components.pop();
-            // console.log("lucid app popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, Opal.React.render_buffer.pop());
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            oper.active_redux_components.pop();
+            oper.active_components.pop();
+            // console.log("lucid app popping", oper.render_buffer, oper.render_buffer.toString());
+            return Opal.global.React.createElement(Opal.global.LucidApplicationContext.Provider, { value: this.state.isomorfeus_store_state }, oper.render_buffer.pop());
           }
           data_access() {
             return this.context;

data/lib/lucid_component/{store_api.rb → api.rb}

@@ -1,7 +1,8 @@
 module LucidComponent
-  module StoreAPI
+  module API
     def self.included(base)
       base.instance_exec do
+        # store
         attr_accessor :app_store
         attr_accessor :class_store
         attr_accessor :store
@@ -39,6 +40,36 @@ module LucidComponent
           when :off then `base.store_updates = false`
           end
         end
+
+        # styles
+        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

data/lib/lucid_component/app_store_proxy.rb

@@ -12,8 +12,8 @@ module LucidComponent
         Isomorfeus.store.dispatch(action)
       else
         # check if we have a component local state value
-        if `this.native.props.store`
-          if `this.native.props.store.application_state && this.native.props.store.application_state.hasOwnProperty(key)`
+        if `#@native.props.store`
+          if `#@native.props.store.application_state && #@native.props.store.application_state.hasOwnProperty(key)`
             return @native.JS[:props].JS[:store].JS[:application_state].JS[key]
           end
         else

data/lib/lucid_component/mixin.rb

@@ -12,8 +12,7 @@ module LucidComponent
       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::API)
       base.include(::LucidComponent::Initializer)
       base.include(::React::Component::Features)
       base.include(::React::Component::Resolution)

data/lib/lucid_component/native_component_constructor.rb

@@ -4,7 +4,7 @@ module LucidComponent
     # 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
+      component_name = base.to_s + 'Wrapper'
       # language=JS
       %x{
         base.react_component = function(props) {
@@ -27,6 +27,7 @@ module LucidComponent
           new_props.store = store;
           return Opal.global.React.createElement(base.lucid_react_component, new_props);
         }
+        base.react_component.displayName = #{component_name};
       }
     end
   end

data/lib/lucid_component/native_lucid_component_constructor.rb

@@ -46,22 +46,23 @@ module LucidComponent
             return new_name;
           }
           render() {
-            Opal.React.render_buffer.push([]);
-            // console.log("lucid component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            Opal.React.active_components.push(this);
-            Opal.React.active_redux_components.push(this);
+            const oper = Opal.React;
+            oper.render_buffer.push([]);
+            // console.log("lucid component pushed", oper.render_buffer, oper.render_buffer.toString());
+            oper.active_components.push(this);
+            oper.active_redux_components.push(this);
             let block_result;
             if (base.preload_block && base.while_loading_block && !this.state.preloaded) { block_result = #{`this.__ruby_instance`.instance_exec(&`base.while_loading_block`)}; }
             else { block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)}; }
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
-            Opal.React.active_redux_components.pop();
-            Opal.React.active_components.pop();
-            // console.log("lucid component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
+            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+            oper.active_redux_components.pop();
+            oper.active_components.pop();
+            // console.log("lucid component popping", oper.render_buffer, oper.render_buffer.toString());
             if (base.except_ssr) {
               if (typeof block_result === "object" && block_result.danger) { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s(), dangerouslySetInnerHTML: { __html: block_result.html}});}
-              else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()}, Opal.React.render_buffer.pop()); }
+              else { return Opal.global.React.createElement('div', {'data-ssrhelper': this.__ruby_instance.$class().$to_s()}, oper.render_buffer.pop()); }
             }
-            return Opal.React.render_buffer.pop();
+            return oper.render_buffer.pop();
           }
           data_access() {
             return this.props.store;

data/lib/lucid_func/base.rb

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

data/lib/lucid_func/initializer.rb

@@ -0,0 +1,19 @@
+module LucidFunc
+  module Initializer
+    def initialize
+      self.JS[:native_props] = `{ props: null }`
+      @native_props = `Opal.React.Component.Props.$new(#{self})`
+      @app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
+      @class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
+      @store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
+      event_handlers = self.class.event_handlers
+      event_handler_source = self.class
+      %x{
+        for (var i = 0; i < event_handlers.length; i++) {
+          self[event_handlers[i]] = event_handler_source[event_handlers[i]];
+          self[event_handlers[i]] = self[event_handlers[i]].bind(self);
+        }
+      }
+    end
+  end
+end

data/lib/lucid_func/mixin.rb

@@ -0,0 +1,16 @@
+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.include(::React::FunctionComponent::Resolution)
+      base.extend(::React::FunctionComponent::EventHandler)
+      base.extend(::LucidComponent::EnvironmentSupport)
+      base.include(::LucidComponent::EnvironmentSupport)
+      base.extend(::LucidFunc::NativeComponentConstructor)
+      base.include(::LucidComponent::API)
+    end
+  end
+end

data/lib/lucid_func/native_component_constructor.rb

@@ -0,0 +1,74 @@
+module LucidFunc
+  module NativeComponentConstructor
+    def self.extended(base)
+      component_name = base.to_s
+      %x{
+        base.store_updates = true;
+        base.equality_checker = null;
+        base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
+        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 classes = null;
+          let store;
+          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)) {
+              let styles;
+              if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
+              else { styles = base.jss_styles; }
+              base.use_styles = og.ReactJSS.createUseStyles(styles);
+            }
+            classes = base.use_styles();
+          }
+          // 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 = theme;
+          __ruby_instance.props.classes = classes;
+          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); }
+          oper.active_redux_components.pop();
+          oper.active_components.pop();
+          // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
+          return oper.render_buffer.pop();
+        }, 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

data/lib/lucid_material/app/mixin.rb

@@ -12,8 +12,7 @@ module LucidMaterial
         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::API)
         base.include(::LucidApp::API)
         base.include(::LucidComponent::Initializer)
         base.include(::React::Component::Features)

data/lib/lucid_material/app/native_component_constructor.rb

@@ -5,7 +5,8 @@ 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
+        component_name = base.to_s + 'Wrapper'
+        theme_component_name = base.to_s + 'ThemeWrapper'
         # language=JS
         %x{
           base.jss_theme = Opal.global.Mui.createMuiTheme();
@@ -24,10 +25,12 @@ module LucidMaterial
             let themed_classes_props = Object.assign({}, props, { classes: classes, theme: theme });
             return Opal.global.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.displayName = #{component_name};
         }
       end
     end

data/lib/lucid_material/component/mixin.rb

@@ -13,8 +13,7 @@ module LucidMaterial
         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::API)
         base.include(::LucidComponent::Initializer)
         base.include(::React::Component::Features)
         base.include(::React::Component::Resolution)

data/lib/lucid_material/component/native_component_constructor.rb

@@ -5,7 +5,7 @@ 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
+        component_name = base.to_s + 'Wrapper'
         # language=JS
         %x{
           base.react_component = function(props) {
@@ -28,6 +28,7 @@ module LucidMaterial
             new_props.store = store;
             return Opal.global.React.createElement(base.lucid_react_component, new_props);
           }
+          base.react_component.displayName = #{component_name};
         }
       end
     end

data/lib/lucid_material/func/base.rb

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

data/lib/lucid_material/func/initializer.rb

@@ -0,0 +1,21 @@
+module LucidMaterial
+  module Func
+    module Initializer
+      def initialize
+        self.JS[:native_props] = `{ props: null }`
+        @native_props = `Opal.React.Component.Props.$new(#{self})`
+        @app_store = `Opal.LucidComponent.AppStoreProxy.$new(#{self})`
+        @class_store = `Opal.LucidComponent.ClassStoreProxy.$new(#{self})`
+        @store = `Opal.LucidComponent.InstanceStoreProxy.$new(#{self})`
+        event_handlers = self.class.event_handlers
+        event_handler_source = self.class
+        %x{
+          for (var i = 0; i < event_handlers.length; i++) {
+            self[event_handlers[i]] = event_handler_source[event_handlers[i]];
+            self[event_handlers[i]] = self[event_handlers[i]].bind(self);
+          }
+        }
+      end
+    end
+  end
+end

data/lib/lucid_material/func/mixin.rb

@@ -0,0 +1,18 @@
+module LucidMaterial
+  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.include(::React::FunctionComponent::Resolution)
+        base.extend(::React::FunctionComponent::EventHandler)
+        base.extend(::LucidComponent::EnvironmentSupport)
+        base.include(::LucidComponent::EnvironmentSupport)
+        base.extend(::LucidMaterial::Func::NativeComponentConstructor)
+        base.include(::LucidComponent::API)
+      end
+    end
+  end
+end

data/lib/lucid_material/func/native_component_constructor.rb

@@ -0,0 +1,76 @@
+module LucidMaterial
+  module Func
+    module NativeComponentConstructor
+      def self.extended(base)
+        component_name = base.to_s
+        %x{
+          base.store_updates = true;
+          base.equality_checker = null;
+          base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
+          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 classes = null;
+            let store;
+            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)) {
+                let styles;
+                if (typeof base.jss_styles === 'function') { styles = base.jss_styles(theme); }
+                else { styles = base.jss_styles; }
+                base.use_styles = og.MuiStyles.makeStyles(styles);
+              }
+              classes = base.use_styles();
+            }
+            // 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 = theme;
+            __ruby_instance.props.classes = classes;
+            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); }
+            oper.active_redux_components.pop();
+            oper.active_components.pop();
+            // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
+            return oper.render_buffer.pop();
+          }, 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/react/component/event_handler.rb

@@ -8,12 +8,9 @@ module React
       def event_handler(name, &block)
         event_handlers << name
         %x{
-           var fun = function(event, info) {
-            if (typeof event === "object") {
-              #{ruby_event = ::React::SyntheticEvent.new(`event`)};
-            } else {
-              #{ruby_event = `event`};
-            }
+          var fun = function(event, info) {
+            if (typeof event === "object") { #{ruby_event = ::React::SyntheticEvent.new(`event`)}; }
+            else { #{ruby_event = `event`}; }
             #{`this.__ruby_instance`.instance_exec(ruby_event, `info`, &block)};
           }
           if (self.lucid_react_component) { self.lucid_react_component.prototype[name] = fun; }

data/lib/react/component/native_component_constructor.rb

@@ -42,14 +42,15 @@ module React
               return new_name;
             }
             render() {
-              Opal.React.render_buffer.push([]);
-              // console.log("react component pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-              Opal.React.active_components.push(this);
+              const oper = Opal.React;
+              oper.render_buffer.push([]);
+              // console.log("react component pushed", oper.render_buffer, oper.render_buffer.toString());
+              oper.active_components.push(this);
               let block_result = #{`this.__ruby_instance`.instance_exec(&`base.render_block`)};
-              if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
-              // console.log("react component popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-              Opal.React.active_components.pop();
-              return Opal.React.render_buffer.pop();
+              if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { oper.render_buffer[oper.render_buffer.length - 1].push(block_result); }
+              // console.log("react component popping", oper.render_buffer, oper.render_buffer.toString());
+              oper.active_components.pop();
+              return oper.render_buffer.pop();
             }
             shouldComponentUpdate(next_props, next_state) {
               if (base.should_component_update_block) {

data/lib/react/function_component/api.rb

@@ -1,10 +1,8 @@
 module React
   module FunctionComponent
     module API
-      attr_accessor :props
-
-      def initialize(props)
-        @props = ::React::Component::Props.new(`{props: props}`)
+      def props
+        @native_props
       end
 
       def use_callback(deps, &block)
@@ -48,8 +46,8 @@ module React
         [state, proc { |arg| `dispatcher(arg)` }]
       end
 
-      def use_ref(initial_value)
-        React::Ref.new(`Opal.global.React.useRef(initial_value)`)
+      def use_ref(native_ref)
+        React::Ref.new(`Opal.global.React.useRef(native_ref)`)
       end
 
       def use_state(initial_value)
@@ -87,6 +85,10 @@ module React
         nil
       end
       alias rre render_react_element
+
+      def to_n
+        self
+      end
     end
   end
 end

data/lib/react/function_component/event_handler.rb

@@ -1,16 +1,20 @@
 module React
   module FunctionComponent
     module EventHandler
+      def event_handlers
+        @event_handlers ||= []
+      end
+
       def event_handler(name, &block)
-        define_method(name) do |event, info|
-          ruby_event = if `typeof event === "object"`
-                         ::React::SyntheticEvent.new(event)
-                       else
-                         event
-                       end
-          block.call(ruby_event, info)
-        end
-        `self[name] = self.prototype['$' + name]`
+        event_handlers << name
+        %x{
+          var fun = function(event, info) {
+            if (typeof event === "object") { #{ruby_event = ::React::SyntheticEvent.new(`event`)}; }
+            else { #{ruby_event = `event`}; }
+            #{`this`.instance_exec(ruby_event, `info`, &block)};
+          }
+          self[name] = fun;
+        }
       end
     end
   end

data/lib/react/function_component/initializer.rb

@@ -0,0 +1,18 @@
+module React
+  module FunctionComponent
+    module Initializer
+      def initialize
+        self.JS[:native_props] = `{ props: null }`
+        @native_props = ::React::Component::Props.new(self)
+        event_handlers = self.class.event_handlers
+        event_handler_source = self.class
+        %x{
+          for (var i = 0; i < event_handlers.length; i++) {
+            self[event_handlers[i]] = event_handler_source[event_handlers[i]];
+            self[event_handlers[i]] = self[event_handlers[i]].bind(self);
+          }
+        }
+      end
+    end
+  end
+end

data/lib/react/function_component/mixin.rb

@@ -4,10 +4,11 @@ module React
       def self.included(base)
         base.include(::React::Component::Elements)
         base.include(::React::Component::Features)
+        base.include(::React::FunctionComponent::Initializer)
         base.include(::React::FunctionComponent::API)
         base.include(::React::FunctionComponent::Resolution)
         base.extend(::React::FunctionComponent::EventHandler)
-        base.extend(::React::FunctionComponent::Creator)
+        base.extend(::React::FunctionComponent::NativeComponentConstructor)
       end
     end
   end

data/lib/react/function_component/native_component_constructor.rb

@@ -0,0 +1,43 @@
+module React
+  module FunctionComponent
+    module NativeComponentConstructor
+      def self.extended(base)
+        component_name = base.to_s
+        %x{
+          base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
+          base.instance_reducer = function(state, action) { return state; }
+          base.react_component = function(props) {
+            const oper = Opal.React;
+            oper.render_buffer.push([]);
+            // console.log("function pushed", oper.render_buffer, oper.render_buffer.toString());
+            const [__ruby_state, __ruby_dispatch] = Opal.global.React.useReducer(base.instance_reducer, null, base.instance_init);
+            const __ruby_instance = __ruby_state.instance;
+            __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); }
+            oper.active_components.pop();
+            // console.log("function popping", oper.render_buffer, oper.render_buffer.toString());
+            return oper.render_buffer.pop();
+          }
+          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 render(&block)
+          `base.render_block = #{block}`
+        end
+      end
+    end
+  end
+end

data/lib/react/memo_component/mixin.rb

@@ -4,10 +4,11 @@ module React
       def self.included(base)
         base.include(::React::Component::Elements)
         base.include(::React::Component::Features)
+        base.include(::React::FunctionComponent::Initializer)
         base.include(::React::FunctionComponent::API)
         base.include(::React::FunctionComponent::Resolution)
         base.extend(::React::FunctionComponent::EventHandler)
-        base.extend(::React::MemoComponent::Creator)
+        base.extend(::React::MemoComponent::NativeComponentConstructor)
       end
     end
   end

data/lib/react/memo_component/native_component_constructor.rb

@@ -0,0 +1,44 @@
+module React
+  module MemoComponent
+    module NativeComponentConstructor
+      def self.extended(base)
+        component_name = base.to_s
+        %x{
+          base.instance_init = function(initial) { return { instance: #{base.new(`{}`)} }; }
+          base.instance_reducer = function(state, action) { return state; }
+          base.equality_checker = null;
+          base.react_component = Opal.global.React.memo(function(props) {
+            const oper = Opal.React;
+            oper.render_buffer.push([]);
+            // console.log("memo pushed", oper.render_buffer, oper.render_buffer.toString());
+            const [__ruby_state, __ruby_dispatch] = Opal.global.React.useReducer(base.instance_reducer, null, base.instance_init);
+            const __ruby_instance = __ruby_state.instance;
+            __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); }
+            oper.active_components.pop();
+            // console.log("memo popping", oper.render_buffer, oper.render_buffer.toString());
+            return oper.render_buffer.pop();
+          }, 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 render(&block)
+          `base.render_block = #{block}`
+        end
+      end
+    end
+  end
+end

data/lib/react/native_constant_wrapper.rb

@@ -10,6 +10,10 @@ module React
     def method_missing(name, *args, &block)
       # language=JS
       %x{
+        if (name[0] === 'u' && name[1] === 's' && name[2] === 'e') {
+          if (name.indexOf('_') > 0) { name = Opal.React.lower_camelize(name); }
+          return #@native[name].call(this, args);
+        }
         var component = null;
         var component_type = typeof #@native[name];
         if (component_type === "function" || component_type === "object") {
@@ -23,4 +27,4 @@ module React
       }
     end
   end
-end
+end

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.11.0'
+  VERSION = '16.11.1'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.11.0
+  version: 16.11.1
 platform: ruby
 authors:
 - Jan Biedermann
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-10-23 00:00:00.000000000 Z
+date: 2019-10-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: oj
@@ -180,6 +180,7 @@ files:
 - lib/lucid_app/mixin.rb
 - lib/lucid_app/native_component_constructor.rb
 - lib/lucid_app/native_lucid_component_constructor.rb
+- lib/lucid_component/api.rb
 - lib/lucid_component/app_store_defaults.rb
 - lib/lucid_component/app_store_proxy.rb
 - lib/lucid_component/base.rb
@@ -194,14 +195,20 @@ files:
 - lib/lucid_component/native_lucid_component_constructor.rb
 - lib/lucid_component/preloading_support.rb
 - lib/lucid_component/reducers.rb
-- lib/lucid_component/store_api.rb
-- lib/lucid_component/styles_support.rb
+- lib/lucid_func/base.rb
+- lib/lucid_func/initializer.rb
+- lib/lucid_func/mixin.rb
+- lib/lucid_func/native_component_constructor.rb
 - lib/lucid_material/app/base.rb
 - lib/lucid_material/app/mixin.rb
 - lib/lucid_material/app/native_component_constructor.rb
 - lib/lucid_material/component/base.rb
 - lib/lucid_material/component/mixin.rb
 - lib/lucid_material/component/native_component_constructor.rb
+- lib/lucid_material/func/base.rb
+- lib/lucid_material/func/initializer.rb
+- lib/lucid_material/func/mixin.rb
+- lib/lucid_material/func/native_component_constructor.rb
 - lib/lucid_prop_declaration/mixin.rb
 - lib/react.rb
 - lib/react/active_support_support.rb
@@ -226,13 +233,14 @@ files:
 - lib/react/context_wrapper.rb
 - lib/react/function_component/api.rb
 - lib/react/function_component/base.rb
-- lib/react/function_component/creator.rb
 - lib/react/function_component/event_handler.rb
+- lib/react/function_component/initializer.rb
 - lib/react/function_component/mixin.rb
+- lib/react/function_component/native_component_constructor.rb
 - lib/react/function_component/resolution.rb
 - lib/react/memo_component/base.rb
-- lib/react/memo_component/creator.rb
 - lib/react/memo_component/mixin.rb
+- lib/react/memo_component/native_component_constructor.rb
 - lib/react/native_constant_wrapper.rb
 - lib/react/ref.rb
 - lib/react/synthetic_event.rb
@@ -243,7 +251,13 @@ homepage: http://isomorfeus.com
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message: |2+
+
+  isomorfeus-react 16.11.1:
+    Breaking changes:
+      - React::MemoComponent#create_memo has been renamed to React::MemoComponent#render
+      - React::FunctionComponent#create_function has been renamed to React::FunctionComponent#render
+
 rdoc_options: []
 require_paths:
 - lib

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/react/function_component/creator.rb

@@ -1,35 +0,0 @@
-module React
-  module FunctionComponent
-    module Creator
-      def self.extended(base)
-        %x{
-          base.react_component = function(props) {
-            Opal.React.render_buffer.push([]);
-            // console.log("function pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            Opal.React.active_components.push(base);
-            let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
-            Opal.React.active_components.pop();
-            // console.log("function popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            return Opal.React.render_buffer.pop();
-          }
-        }
-
-        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 create_function(&block)
-          `base.function_block = #{block}`
-        end
-      end
-    end
-  end
-end

data/lib/react/memo_component/creator.rb

@@ -1,35 +0,0 @@
-module React
-  module MemoComponent
-    module Creator
-      def self.extended(base)
-        %x{
-          base.equality_checker = null;
-          base.react_component = Opal.global.React.memo(function(props) {
-            Opal.React.render_buffer.push([]);
-            // console.log("memo pushed", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            Opal.React.active_components.push(base);
-            let block_result = #{base.new(`props`).instance_exec(&`base.function_block`)};
-            if (block_result && (block_result.constructor === String || block_result.constructor === Number)) { Opal.React.render_buffer[Opal.React.render_buffer.length - 1].push(block_result); }
-            Opal.React.active_components.pop();
-            // console.log("memo popping", Opal.React.render_buffer, Opal.React.render_buffer.toString());
-            return Opal.React.render_buffer.pop();
-          }, base.equality_checker);
-        }
-
-        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 #{base.new(`{}`).instance_exec(`prev_ruby_props`, `next_ruby_props`, &block)};
-            }
-          }
-        end
-
-        def create_memo(&block)
-          `base.function_block = #{block}`
-        end
-      end
-    end
-  end
-end