Merge pull request #136 from NHDaly/synchronous

Add `async` option to make `body!()` and `content!()` (a)synchronous.

res/blink.js

@@ -97,26 +97,28 @@
     }
   }
 
-  function fill(node, html, fade) {
+  function fill(node, html, fade, resolve, reject) {
     node = select(node);
     fade ?
-      fillfade(node, html) :
-      fillnofade(node, html)
+      fillfade(node, html, resolve, reject) :
+      fillnofade(node, html, resolve, reject)
   }
-  function fillfade(node, html) {
+  function fillfade(node, html, resolve, reject) {
     node = select(node);
     node.classList.add('blink-show');
     callback(function () {
       node.classList.add('blink-fade');
       callback(0.2, function() {
-        fillnofade(node, html);
+        fillnofade(node, html, null, null);
         node.classList.remove('blink-fade');
+        if (resolve) resolve(true);
       });
     });
   }
-  function fillnofade(node, html) {
+  function fillnofade(node, html, resolve, reject) {
     node.innerHTML = html;
     evalscripts(node);
+    if (resolve) resolve(true);
   }
 
   Blink.fill = fill;

src/content/api.jl

@@ -1,12 +1,22 @@
 export body!, content!, loadcss!, loadjs!, load!, importhtml!
 
-content!(o, sel, html::AbstractString; fade = true) =
-    @js_(o, Blink.fill($sel, $html, $fade))
+function content!(o, sel, html::AbstractString; fade = true, async = true)
+  if async
+    @js_(o, Blink.fill($sel, $html, $fade, null, null))
+  else
+    @js o begin  # Use `@js` to wait until the below Promise is resolved.
+      @new Promise(function (resolve, reject)
+        Blink.fill($sel, $html, $fade, resolve, reject)
+      end)
+    end
+    return o  # But still return `o` for chaining.
+  end
+end
 
-content!(o, sel, html; fade = true) =
-  content!(o, sel, stringmime(MIME"text/html"(), html), fade = fade)
+content!(o, sel, html; fade = true, async = true) =
+  content!(o, sel, stringmime(MIME"text/html"(), html), fade=fade, async=async)
 
-body!(w, html; fade = true) = content!(w, "body", html, fade = fade)
+body!(w, html; fade = true, async = true) = content!(w, "body", html, fade=fade, async=async)
 
 function loadcss!(w, url)
   @js_ w begin
@@ -55,7 +65,7 @@ end
 
 isurl(f) = ismatch(r"^https?://", f)
 
-function load!(w, file)
+function load!(w, file; async=false)
   if !isurl(file)
     resource(file)
     file = basename(file)
@@ -66,7 +76,7 @@ function load!(w, file)
   elseif ext == "css"
     loadcss!(w, file)
   elseif ext == "html"
-    importhtml!(w, file)
+    importhtml!(w, file; async)
   else
     error("Blink: Unsupported file type")
   end

test/content/api.jl

@@ -3,15 +3,15 @@ using Base.Test
 
 @testset "content! Tests" begin
     w = Window(Blink.@d(:show => false)); sleep(5.0)
-    body!(w, ""); sleep(1.0)  # body! is not synchronous.
+    body!(w, "", async=false);
     @test (@js w document.querySelector("body").innerHTML) == ""
 
     # Test reloading body and a selector element.
     html = """<div id="a">hi world</div><div id="b">bye</div>"""
-    body!(w, html); sleep(1.0)
+    body!(w, html, async=false);
     @test (@js w document.getElementById("a").innerHTML) == "hi world"
     @test (@js w document.getElementById("b").innerHTML) == "bye"
-    content!(w, "div", "hello world"); sleep(1.0)
+    content!(w, "div", "hello world", async=false);
     @test (@js w document.getElementById("a").innerHTML) == "hello world"
     # TODO(nhdaly): Is this right? Should content!(w,"div",...) change _all_ divs?
     @test (@js w document.getElementById("b").innerHTML) == "bye"
@@ -22,14 +22,59 @@ using Base.Test
         # Must create a new window to ensure javascript is reset.
         w = Window(Blink.@d(:show => false)); sleep(5.0)
 
-        body!(w, fadeTestHtml; fade=true); sleep(1.0)
+        body!(w, fadeTestHtml; fade=true, async=false);
         @test (@js w testJS) == "test"
     end
     @testset "Fade False" begin
         # Must create a new window to ensure javascript is reset.
         w = Window(Blink.@d(:show => false)); sleep(5.0)
 
-        body!(w, fadeTestHtml; fade=false); sleep(1.0)
+        body!(w, fadeTestHtml; fade=false, async=false);
         @test (@js w testJS) == "test"
     end
 end
+
+@testset "Sync/Async content reload tests" begin
+    w = Window(Blink.@d(:show => false)); sleep(5.0)
+    sleep_content(seconds) = """
+        <script>
+            function spinsleep(ms) {
+                var start = new Date().getTime(), expire = start + ms;
+                while (new Date().getTime() < expire) { }
+                return;
+            }
+            spinsleep($(seconds * 1000));
+        </script>
+      """
+
+    @timed sleep(0.1);   # Throw-away statement to warm-up @sync and @async
+
+    x, t = @timed body!(w, sleep_content(3); fade=true, async=false)
+    #@test x == true  # TODO: What should it return?
+    @test t >= 3.0 # seconds
+
+    x, t = @timed body!(w, sleep_content(3); fade=false, async=false)
+    @test t >= 3.0 # seconds
+
+    x, t = @timed body!(w, sleep_content(3); fade=true, async=true);
+    @test t < 3.0 # seconds
+    sleep(3)  # (Wait until the end of the previous body! call.)
+
+    x, t = @timed body!(w, sleep_content(3); fade=false, async=true);
+    @test t < 3.0 # seconds
+    sleep(3)  # (Wait until the end of the previous body! call.)
+
+
+    @sync begin  # Throw-away block to warm-up @sync and @async
+        @async sleep(0.1)
+        @async sleep(0.1)
+    end
+    # Test using Julia's async mechanisms with synchronous `content!`.
+    _, t = @timed @sync begin
+      @async body!(w, sleep_content(4); async=false);
+      sleep(4)
+    end
+
+    @test t >= 4.0
+    @test t < 8
+end