fixed partials and async defer

Author: jonasjabari

app/concepts/matestack/ui/core/async/async.js

@@ -18,8 +18,16 @@ const componentDef = {
   methods: {
     show: function(event_data){
       const self = this
+      if (this.showing === true){
+        return
+      }
       this.showing = true
       this.event.data = event_data
+      if(this.componentConfig["defer"] != undefined){
+        if(!isNaN(this.componentConfig["defer"])){
+          this.startDefer()
+        }
+      }
       if(this.componentConfig["hide_after"] != undefined){
         self.hide_after_timeout = setTimeout(function () {
           self.hide()
@@ -29,6 +37,12 @@ const componentDef = {
     hide: function(){
       this.showing = false
       this.event.data = {}
+    },
+    startDefer: function(){
+      const self = this
+      setTimeout(function () {
+        self.rerender()
+      }, parseInt(this.componentConfig["defer"]));
     }
   },
   created: function () {
@@ -39,14 +53,11 @@ const componentDef = {
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
-    if(this.componentConfig["hide_on"] != undefined){
-      this.showing = true
-    }
     if(this.componentConfig["defer"] != undefined){
       if(!isNaN(this.componentConfig["defer"])){
-        setTimeout(function () {
-          self.rerender()
-        }, parseInt(this.componentConfig["defer"]));
+        if (this.componentConfig["show_on"] == undefined){
+          this.startDefer()
+        }
       }
     }
   },

app/concepts/matestack/ui/core/page/page.rb

@@ -48,7 +48,7 @@ def prepare
     end
 
     def components(&block)
-      @nodes = Matestack::Ui::Core::PageNode.build(self, nil, &block)
+      @nodes = Matestack::Ui::Core::PageNode.build(self, nil, context[:params], &block)
     end
 
     def nodes_to_cell
@@ -59,12 +59,10 @@ def nodes_to_cell
 
     def partial(&block)
       return block
-      # Matestack::Ui::Core::PageNode.build(self, included, &block)
     end
 
     def slot(&block)
-      # return block
-      Matestack::Ui::Core::PageNode.build(self, nil, &block)
+      Matestack::Ui::Core::PageNode.build(self, nil, context[:params], &block)
     end
 
 

app/lib/matestack/ui/core/page_node.rb

@@ -1,18 +1,19 @@
 module Matestack::Ui::Core
   class PageNode
 
-    def self.build(page_instance, included_config, &block)
-      node = PageNode.new(page_instance, included_config)
+    def self.build(page_instance, included_config, url_params, &block)
+      node = PageNode.new(page_instance, included_config, url_params)
       node.instance_eval(&block)
       node.hash
     end
 
     attr_reader :hash
 
-    def initialize(page_instance, included_config)
+    def initialize(page_instance, included_config, url_params)
       @hash = {}
       @node_start_id = 0
       @included_config = included_config
+      @url_params = url_params
       @page_instance = page_instance
       page_instance.instance_variables.each do |page_instance_var_key|
         self.instance_variable_set(page_instance_var_key, page_instance.instance_variable_get(page_instance_var_key))
@@ -45,7 +46,7 @@ def method_missing meth, *args, &block
         if meth == :partial
           partial_block = @page_instance.send(args.first, *args.drop(1))
           @hash[current_node]["components"] = PageNode.build(
-            @page_instance, included, &partial_block
+            @page_instance, included, @url_params, &partial_block
           )
         else
           if args.first.is_a?(Hash)
@@ -56,13 +57,13 @@ def method_missing meth, *args, &block
 
           if block_given?
             if args.first.is_a?(Hash) && args.first[:defer].present?
-              if args.first[:url_params].present? && args.first[:url_params][:component_key].present?
-                @hash[current_node]["components"] = PageNode.build(@page_instance, included, &block)
+              if @url_params.present? && @url_params[:component_key].present?
+                @hash[current_node]["components"] = PageNode.build(@page_instance, included, @url_params, &block)
               else
                 return
               end
             else
-              @hash[current_node]["components"] = PageNode.build(@page_instance, included, &block)
+              @hash[current_node]["components"] = PageNode.build(@page_instance, included, @url_params, &block)
             end
           end
         end

spec/dummy/app/matestack/pages/my_app/my_first_page.rb

@@ -1,8 +1,4 @@
 class Pages::MyApp::MyFirstPage < Matestack::Ui::Page
-  #
-  # def prepare
-  #   @count = DummyModel.all.count
-  # end
 
   def response
     components {
@@ -14,7 +10,7 @@ def response
       onclick emit: "test" do
         button text: "rerender"
       end
-      async defer: true, url_params: context[:params] do
+      async defer: 3000 do
         partial :my_deferred_scope
       end
     }

spec/usage/components/async_spec.rb

@@ -193,4 +193,197 @@ def response
 
   end
 
+  describe "defer" do
+
+    it "Example 5: deferred loading without any timeout, deferred request right after component mounting" do
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def prepare
+          @current_time = DateTime.now.strftime('%Q')
+        end
+
+        def response
+          components {
+            div id: "my-reference-div" do
+              plain "#{@current_time}"
+            end
+            async do
+              div id: "my-not-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+            async defer: true do
+              div id: "my-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+          }
+        end
+
+      end
+
+      visit "/example"
+
+      initial_timestamp = page.find("#my-reference-div").text #initial page load
+      non_deferred_timestamp = page.find("#my-not-deferred-div").text #initial page load
+
+      deferred_timestamp = page.find("#my-deferred-div").text #deferred loading
+
+      expect(non_deferred_timestamp).to eq initial_timestamp
+      expect(deferred_timestamp).to be > initial_timestamp
+
+      expect(deferred_timestamp.to_i - initial_timestamp.to_i).to be_between(0, 2000).inclusive
+
+    end
+
+    it "Example 6: deferred loading with a specific timeout" do
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def prepare
+          @current_time = DateTime.now.strftime('%Q')
+        end
+
+        def response
+          components {
+            div id: "my-reference-div" do
+              plain "#{@current_time}"
+            end
+            async do
+              div id: "my-not-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+            async defer: 1000 do
+              div id: "my-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+          }
+        end
+
+      end
+
+      visit "/example"
+
+      initial_timestamp = page.find("#my-reference-div").text #initial page load
+      non_deferred_timestamp = page.find("#my-not-deferred-div").text #initial page load
+
+      deferred_timestamp = page.find("#my-deferred-div").text #deferred loading
+
+      expect(non_deferred_timestamp).to eq initial_timestamp
+      expect(deferred_timestamp).to be > initial_timestamp
+      expect(deferred_timestamp.to_i - initial_timestamp.to_i).to be_between(1000, 3000).inclusive
+
+    end
+
+    it "Example 7: multiple deferred loadings with a specific timeout" do
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def prepare
+          @current_time = DateTime.now.strftime('%Q')
+        end
+
+        def response
+          components {
+            div id: "my-reference-div" do
+              plain "#{@current_time}"
+            end
+            async do
+              div id: "my-not-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+            async defer: 1000 do
+              div id: "my-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+            async defer: 2000 do
+              div id: "my-second-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+          }
+        end
+
+      end
+
+      visit "/example"
+
+      initial_timestamp = page.find("#my-reference-div").text #initial page load
+      non_deferred_timestamp = page.find("#my-not-deferred-div").text #initial page load
+
+      deferred_timestamp = page.find("#my-deferred-div").text #deferred loading
+      second_deferred_timestamp = page.find("#my-second-deferred-div").text #deferred loading
+
+      expect(non_deferred_timestamp).to eq initial_timestamp
+      expect(deferred_timestamp).to be > initial_timestamp
+      expect(second_deferred_timestamp).to be > initial_timestamp
+      expect(deferred_timestamp.to_i - initial_timestamp.to_i).to be_between(1000, 3000).inclusive
+      expect(second_deferred_timestamp.to_i - initial_timestamp.to_i).to be_between(2000, 4000).inclusive
+
+    end
+
+    it "Example 8: deferred loading without any timeout, triggered by on_show event" do
+
+      class ExamplePage < Matestack::Ui::Page
+
+        def prepare
+          @current_time = DateTime.now.strftime('%Q')
+        end
+
+        def response
+          components {
+            div id: "my-reference-div" do
+              plain "#{@current_time}"
+            end
+            onclick emit: "my_event" do
+              button text: "show"
+            end
+            onclick emit: "my_other_event" do
+              button text: "hide"
+            end
+            async defer: true, show_on: "my_event", hide_on: "my_other_event" do
+              plain "waited for 'my_event'"
+              div id: "my-deferred-div" do
+                plain "#{@current_time}"
+              end
+            end
+          }
+        end
+
+      end
+
+      visit "/example"
+
+      initial_timestamp = page.find("#my-reference-div").text #initial page load
+
+      expect(page).not_to have_content("waited for 'my_event'")
+
+      sleep 2
+
+      click_button "show"
+
+      expect(page).to have_content("waited for 'my_event'")
+
+      deferred_timestamp = page.find("#my-deferred-div").text #deferred loading after click
+
+      expect(deferred_timestamp.to_i - initial_timestamp.to_i).to be_between(2000, 4000).inclusive
+
+      sleep 1
+
+      click_button "hide"
+      click_button "show"
+
+      new_deferred_timestamp = page.find("#my-deferred-div").text #deferred loading after another click
+
+      expect(new_deferred_timestamp.to_i - deferred_timestamp.to_i).to be_between(1000, 2000).inclusive
+
+    end
+
+  end
+
 end