isomorfeus-react 16.5.1 → 16.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cba3a632d5700b2370b2dc673eabc01aebac34c508680f79b01154ce856e5051
-  data.tar.gz: 4025af5f4037e829aacf72c91316b0da9b312209e92e242a8d8a127d58f1d109
+  metadata.gz: 4f5cb95862ec002593c0fa138708e7b836e5bde4cc5d98417fd9d1dc60822f3d
+  data.tar.gz: c675459414c7682373017e52d6d4eb4588d517f6280d8af39aa4f9e2bed73ad6
 SHA512:
-  metadata.gz: 8b178809f4a89d23283c1b0ccfa85f8df7e720388bf5516f70aa5083e38a7e88777992cfe7c92a53de74f0aa0cb78147ead4e8af11a6d58851c266b09fe862a8
-  data.tar.gz: a3da4df7f53d9f86b423750e5166ea214a359290c268d8e800f8254be688843732ce26d29c585dbd8f86f0b7d5580e06bf6afa2b721760024f712b95ccf9c612
+  metadata.gz: 02e9510d524a96550b74fba5d48b19d2d59d0c82f7c585dd6b95359422da967240d58b5f833b36526a41309ee59f16a8e8018cc168e52b2fa8396ea25f4ae240
+  data.tar.gz: 72dd5a6d9f1adc6943f25d406125695c3ca7ad3414e5ab61b90714ececff2ca227b828e16dc790dbcb3004508ba181153e132179de0b459045fcfb4f8f20cef6

data/README.md

@@ -4,12 +4,12 @@ Develop React components for Opal Ruby along with very easy to use and advanced
 
 ## Versioning
 isomorfeus-react version follows the React version which features and API it implements.
-Isomorfeus-react 16.5.x implements features and the API of React 16.5 and should be used with React 16.5
+Isomorfeus-react 16.5.x implements features and the API of React 16.6 and should be used with React 16.6
 
 ## Installation
 To install React with the matching version:
 ```
-yarn add react@16.5
+yarn add react@16.6
 ```
 then add to the Gemfile:
 ```ruby
@@ -116,7 +116,8 @@ Its recommended to use them only if no props or state are used or if props and s
 ![React::PureComponent Data Flow](https://raw.githubusercontent.com/isomorfeus/isomorfeus-react/master/images/data_flow_component.png)
 
 ### Function Components
-Function Components are created using a Ruby DSL that is used within the creator class:
+Function Components are created using a Ruby DSL that is used within the creator class. To create a function component that renders only
+when props change, use the memo_component, which uses React.memo:
 ```ruby
 class React::FunctionComponent::Creator
   function_component 'MyComponent' do |props|
@@ -126,6 +127,10 @@ class React::FunctionComponent::Creator
   function_component 'MyObject.MyComponent' do |props|
     SPAN { props.text }
   end
+  # a React.memo function component:
+  memo_component 'MyObject.MyComponent' do |props|
+    SPAN { props.text }
+  end
 end
 ```
 This creates a native javascript components. 

data/lib/lucid_app/api.rb

@@ -17,6 +17,10 @@ module LucidApp
           }
         end
       end
+
+      def context
+        @native.JS[:context]
+      end
     end
   end
 end

data/lib/lucid_component/native_component_constructor.rb

@@ -125,6 +125,7 @@ module LucidComponent
             return null;
           }
         }
+        base.lucid_react_component.contextType = Opal.global.LucidApplicationContext;
       }
     end
   end

data/lib/react.rb

@@ -144,4 +144,12 @@ module React
   def self.isValidElement(react_element)
     `React.isValidElement(react_element)`
   end
+
+  def self.lazy(import_statement_function)
+    `React.lazy(import_statement_function)`
+  end
+
+  def self.memo(function_component)
+    `React.memo(function_component)`
+  end
 end

data/lib/react/component/features.rb

@@ -42,6 +42,17 @@ module React
           Opal.React.internal_render(React.StrictMode, native_props, block);
         }
       end
+
+      def Suspense(props = `null`, &block)
+        %x{
+          var native_props = null;
+
+          if (props) {
+            native_props = Opal.React.to_native_react_props(args[0]);
+          }
+          Opal.React.internal_render(React.Suspense, native_props, block);
+        }
+      end
     end
   end
 end

data/lib/react/function_component/creator.rb

@@ -11,7 +11,6 @@ module React
       end
 
       def self.function_component(component_name, &block)
-
         %x{
           var fun = function(props) {
             Opal.React.render_buffer.push([]);
@@ -42,6 +41,38 @@ module React
           }, Opal.global);
         }
       end
+
+      def self.memo_component(component_name, &block)
+        %x{
+          var fun = React.memo(function(props) {
+            Opal.React.render_buffer.push([]);
+            Opal.React.active_components.push(Opal.React.FunctionComponent.Runner.event_handlers);
+            #{React::FunctionComponent::Runner.new(`props`).instance_exec(&block)};
+            Opal.React.active_components.pop();
+            return Opal.React.render_buffer.pop();
+          });
+          var const_names;
+          if (component_name.includes('.')) {
+            const_names = component_name.split('.');
+          } else {
+            const_names = [component_name];
+          }
+          var const_last = const_names.length - 1;
+          const_names.reduce(function(prev, curr) {
+            if (prev && prev[curr]) {
+              return prev[curr];
+            } else {
+              if (const_names.indexOf(curr) === const_last) {
+                prev[curr] = fun;
+                return prev[curr];
+              } else {
+                prev[curr] = {};
+                return prev[curr];
+              }
+            }
+          }, Opal.global);
+        }
+      end
     end
   end
 end

data/lib/react/version.rb

@@ -1,3 +1,3 @@
 module React
-  VERSION = '16.5.1'
+  VERSION = '16.6.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: isomorfeus-react
 version: !ruby/object:Gem::Version
-  version: 16.5.1
+  version: 16.6.1
 platform: ruby
 authors:
 - Jan Biedermann