From ec544de8de51977055d1da76d7cbc2393ff25d27 Mon Sep 17 00:00:00 2001
From: Dan Holmsand <holmsand@gmail.com>
Date: Mon, 7 Dec 2015 12:44:02 +0100
Subject: [PATCH] Add news about with-let

---
 demo/reagentdemo/news/news060.cljs | 58 ++++++++++++++++++++++++++++++
 demo/reagentdemo/syntax.cljs       |  2 +-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/demo/reagentdemo/news/news060.cljs b/demo/reagentdemo/news/news060.cljs
index cad6275..a394b64 100644
--- a/demo/reagentdemo/news/news060.cljs
+++ b/demo/reagentdemo/news/news060.cljs
@@ -40,6 +40,35 @@
      (for [i ids]
        ^{:key i} [name-comp i])]))
 
+
+(defn mouse-pos-comp []
+  (r/with-let [pointer (r/atom nil)
+               handler #(swap! pointer assoc
+                               :x (.-pageX %)
+                               :y (.-pageY %))
+               _ (.addEventListener js/document "mousemove" handler)]
+    [:div
+     "Pointer moved to: "
+     (str @pointer)]
+    (finally
+      (.removeEventListener js/document "mousemove" handler))))
+
+(defn mouse-pos []
+  (r/with-let [pointer (r/atom nil)
+               handler #(swap! pointer assoc
+                               :x (.-pageX %)
+                               :y (.-pageY %))
+               _ (.addEventListener js/document "mousemove" handler)]
+    @pointer
+    (finally
+      (.removeEventListener js/document "mousemove" handler))))
+
+(defn tracked-pos []
+  [:div
+   "Pointer moved to: "
+   (str @(r/track mouse-pos))])
+
+
 (defn main [{:keys [summary]}]
   [:div.reagent-demo
    [:h1 [link {:href url} title]]
@@ -103,6 +132,35 @@
         will only result in one call to the " [:code "people"] "
         function (both initially, and when the state atom changes)."]]
 
+       [:h2 "Handling destruction"]
+
+       [:p "Reagent now has a new way of writing components that need
+       to do something when they are no longer around:
+       the "[:code "with-let"]" macro. It looks just
+       like " [:code "let"] " – but the bindings only execute once,
+       and it takes an optional " [:code "finally"] " clause, that
+       runs when the component is no longer rendered."]
+
+       [:p "For example: here's a component that sets up an event
+       listener for mouse moves, and stops listening when the
+       component is removed."]
+
+       [demo-component {:comp mouse-pos-comp
+                        :src (s/src-of [:mouse-pos-comp])}]
+
+       [:p "The same thing could of course be achieved with React
+       lifecycle methods, but that would be a lot more verbose."]
+
+       [:p [:code "with-let"] " can also be combined with " [:code "track"] ". For
+       example, the component above could also be written as: "]
+
+       [demo-component {:comp tracked-pos
+                        :src (s/src-of [:mouse-pos
+                                        :tracked-pos])}]
+
+       [:p "The " [:code "finally"] " clause will run
+       when " [:code "mouse-pos"] " is no longer tracked anywhere."]
+
        ])]])
 
 (tools/register-page url [#'main] title)
diff --git a/demo/reagentdemo/syntax.cljs b/demo/reagentdemo/syntax.cljs
index eee5d36..e2baa1c 100644
--- a/demo/reagentdemo/syntax.cljs
+++ b/demo/reagentdemo/syntax.cljs
@@ -26,7 +26,7 @@
                "update-in" "sorted-map" "inc" "dec" "false" "true" "not"
                "=" "partial" "first" "second" "rest" "list" "conj"
                "drop" "when-let" "if-let" "add-watch" "mod" "quot"
-               "bit-test" "vector" "do"})
+               "bit-test" "vector" "do" "try" "catch" "finally"})
 
 (def styles {:comment  comment-style
              :str-litt string-style