Add news item for 0.4.0

demo/reagentdemo/common.cljs

@@ -15,16 +15,21 @@
     (into {} (for [x parts]
                [(->> x (re-seq ws) second keyword) x]))))
 
-(def nssrc
+(def ns-src
   "(ns example
   (:require [reagent.core :as reagent :refer [atom]]))
 ")
 
+(def nsr-src
+  "(ns example
+  (:require [reagent.core :as r :refer [atom]]))
+")
+
 (defn src-for-names [srcmap names]
   (string/join "\n" (map srcmap names)))
 
 (defn fun-map [src]
-  (-> src src-parts src-defs (assoc :ns nssrc)))
+  (-> src src-parts src-defs (assoc :ns ns-src :nsr nsr-src)))
 
 (defn src-for [funmap defs]
   [:pre (-> funmap (src-for-names defs) syntaxify)])
@@ -45,7 +50,9 @@
             (if-not complete
               [:div.simple-demo [comp]]
               [comp]))])
-       (when @showing
-         [:div.demo-source.clearfix
-          [:h3.demo-heading "Source"]
-          src])])))
+       (if @showing
+         (if src
+           [:div.demo-source.clearfix
+            [:h3.demo-heading "Source"]
+            src]
+           [:div.clearfix]))])))

demo/reagentdemo/intro.cljs

@@ -152,7 +152,7 @@
 
      [:p [:strong "Note: "]
      "The " [:code "^{:key item}"] " part isn’t really necessary in
-     this simple example, but passing a unique key for every item in a
+     this simple example, but attaching a unique key to every item in a
      dynamically generated list of components is good practice, and
      helps React to improve performance for large lists. The key can
      be given either (as in this example) as meta-data, or as a "

demo/reagentdemo/news.cljs

@@ -3,10 +3,12 @@
             [reagent.debug :refer-macros [dbg println]]
             [reagentdemo.page :refer [title link page-map]]
             [reagentdemo.common :as common :refer [demo-component]]
+            [reagentdemo.news.anyargs :as anyargs]
             [reagentdemo.news.async :as async]
             [reagentdemo.news.undo-demo :as undo-demo]))
 
 (defn main []
   [:div
+   [anyargs/main {:summary true}]
    [async/main {:summary true}]
    [undo-demo/main {:summary true}]])

demo/reagentdemo/news/anyargs.cljs

@@ -0,0 +1,88 @@
+(ns reagentdemo.news.anyargs
+  (:require [reagent.core :as r :refer [atom]]
+            [reagent.debug :refer-macros [dbg println]]
+            [reagentdemo.syntax :refer-macros [get-source]]
+            [reagentdemo.page :refer [title link page-map]]
+            [reagentdemo.common :as common :refer [demo-component]]
+            [geometry.core :as geometry]))
+
+(def funmap (-> ::this get-source common/fun-map))
+(def src-for (partial common/src-for funmap))
+
+(defn hello-component [name]
+  [:p "Hello, " name "!"])
+
+(defn say-hello []
+  [hello-component "world"])
+
+(defn geometry-example []
+  [geometry/main {:width "100%" :height 500}])
+
+(defn my-div []
+  (let [this (r/current-component)]
+    (into [:div.custom (r/props this)]
+          (r/children this))))
+
+(defn call-my-div []
+  [:div
+   [my-div "Some text."]
+   [my-div {:style {:font-weight 'bold}}
+    [:p "Some other text in bold."]]])
+
+(defn main [{:keys [summary]}]
+  (let [head "All arguments allowed"
+        geometry {:href "https://github.com/holmsand/reagent/tree/master/examples/geometry"}
+        jonase {:href "https://github.com/jonase"}]
+    
+    [:div.reagent-demo
+     [:h1 [link {:href main} head]]
+     [title (str "Reagent 0.4.0: " head)]
+     [:div.demo-text
+      
+      [:p "Reagent 0.4.0 lets component functions take any kinds of
+      arguments, and not just maps and vectors matching Hiccup’s
+      calling conventions. Before 0.4.0, component functions were
+      always called with three arguments: a map (called props), a
+      vector of ”children”, and a the current component (a.k.a
+      ”this”)."]
+
+      [:p "This was confusing, so now component functions get exactly
+      the same arguments you pass to them."]
+
+      (if summary
+        [link {:href main
+               :class 'news-read-more} "Read more"]
+        [:div.demo-text
+         [:p "In other words, you can now do this:"]
+
+         [demo-component {:comp say-hello
+                          :src (src-for [:hello-component :say-hello])}]
+
+         [:p "In the above example, it wouldn’t make any difference at
+         all if " [:code "hello-component"] " had been called as a
+         function, i.e with parenthesis instead of brackets (except
+         for performance, since components are cached between renders
+         if the arguments to them don’t change)."]
+
+         [:p "But there is one drawback: component function no longer
+         receives the ”current component” as a parameter. Instead
+         you’ll have to use "
+         [:code "reagent.core/current-component"] " in order to get
+         that. Beware that " [:code "current-component"] " must be
+         used outside of e.g event handlers and " [:code "for"] "
+         expressions, so it’s safest to always put it at the top, like
+         this:"]
+
+         [demo-component {:comp call-my-div
+                          :src (src-for [:nsr :my-div :call-my-div])}]
+
+         [:p "There is also a new, elegant and simple "
+          [:a geometry "example"] " of using svg with Reagent, written
+          by " [:a jonase "Jonas Enlund"] ". It also shows how you can
+          use Reagent’s new calling convensions, and looks like
+          this:"]
+
+         [demo-component {:comp geometry-example}]])]]))
+
+(swap! page-map assoc
+       "news/any-arguments.html" main)

demo/reagentdemo/syntax.clj

@@ -1,5 +1,12 @@
 (ns reagentdemo.syntax
-  (:require [clojure.java.io :as io]))
+  (:require [clojure.java.io :as io]
+            [clojure.string :as string]))
 
 (defmacro get-source [srcfile]
-  (slurp (io/resource srcfile)))
+  (let [s (if-not (keyword? srcfile)
+            srcfile
+            (-> srcfile
+                namespace
+                (string/replace #"[.]" "/")
+                (str ".cljs")))]
+    (-> s io/resource slurp)))

project.clj

@@ -20,7 +20,8 @@
                      {:client {:source-paths ^:replace
                                ["test" "src" "demo"
                                 "examples/todomvc/src"
-                                "examples/simple/src"]}}}}
+                                "examples/simple/src"
+                                "examples/geometry/src"]}}}}
              :srcmap {:cljsbuild
                       {:builds
                        {:client
@@ -32,7 +33,8 @@
   :cljsbuild
   {:builds
    {:client {:source-paths ["src" "demo" "examples/todomvc/src"
-                            "examples/simple/src"]
+                            "examples/simple/src"
+                            "examples/geometry/src"]
              :notify-command ["node" "./bin/gen-site.js"]
              :compiler
              {:preamble ["reagent/react.js"]