From 94e973c4cb7e53d0cacf7f9e182e49c4eb96c884 Mon Sep 17 00:00:00 2001 From: "Howard M. Lewis Ship" Date: Thu, 18 Jun 2015 16:20:50 -0700 Subject: [PATCH 1/6] Ignore some IntelliJ related stuff --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 3157f16..e25f1f0 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,7 @@ outsite/public/news outsite/public/css out figwheel_server.log + +reagent.iml +.idea +.lein-failures \ No newline at end of file From 3d6c2f5e3f9a67d1adb839553ce5b74003b7ef96 Mon Sep 17 00:00:00 2001 From: "Howard M. Lewis Ship" Date: Thu, 18 Jun 2015 18:05:21 -0700 Subject: [PATCH 2/6] Implement nested Hiccup elements --- CHANGELOG.md | 4 +++ src/reagent/impl/template.cljs | 48 +++++++++++++++++++++++++++++----- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2743139..3931034 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,10 @@ # Changelog +## 0.5.1 + +- Hiccup syntax has been extended to allow nested elements to be defined using '>' as part of the keyword name. + ## 0.5.0 - React updated to 0.12.2 diff --git a/src/reagent/impl/template.cljs b/src/reagent/impl/template.cljs index fa2d8b0..e8456a3 100644 --- a/src/reagent/impl/template.cljs +++ b/src/reagent/impl/template.cljs @@ -226,17 +226,51 @@ jsprops)] (make-element argv comp p first-child))))))) +(defn- expand-tags + "Used to supported the extended Hiccup syntax for nested elements. In addition to the keyword + specifying tag, optional id, and optional class(es), the '>' character indicates a nested element. + + e.g. + + [:nav.navbar>div.container>div.navbar-header>a.navbar-brand {:href \"...\"} \"Home\"] + + is the same as: + + [:nav.navbar [:div.container [:div.navbar-header [:a.navbar-bran {:href \"...\"} \"Home\"]]]] + + tags - the original keyword split at '>' + hiccup-form - the original hiccup form (a keyword in the first position)" + [tags hiccup-form] + (loop [deepest? true + [tag & tag-queue] (reverse tags) + tail (rest hiccup-form)] + (if (nil? tag) + tail + (recur false + tag-queue + (if deepest? + (into [(keyword tag)] tail) + [(keyword tag) tail]))))) + (defn vec-to-elem [v] (assert (pos? (count v)) (str "Hiccup form should not be empty: " (pr-str v) (comp/comp-name))) - (let [tag (nth v 0)] - (assert (valid-tag? tag) - (str "Invalid Hiccup form: " - (pr-str v) (comp/comp-name))) - (if-some [ne (native-element tag v)] - ne - (reag-element tag v)))) + (let [tag (nth v 0) + tags (do + (assert (valid-tag? tag) + (str "Invalid Hiccup form: " + (pr-str v) (comp/comp-name))) + (if (keyword? tag) + (-> tag + name + (string/split #">") + vec)))] + (if (< 1 (count tags)) + (recur (expand-tags tags v)) + (if-some [ne (native-element tag v)] + ne + (reag-element tag v))))) (declare expand-seq) (declare expand-seq-check) From 91564be3937b917f42667b21c4429743f589c938 Mon Sep 17 00:00:00 2001 From: "Howard M. Lewis Ship" Date: Thu, 25 Jun 2015 08:39:10 -0700 Subject: [PATCH 3/6] Add some examples of extended Hiccup to the README --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index f0d6b38..26db862 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,20 @@ Reagent uses [Hiccup-like](https://github.com/weavejester/hiccup) markup instead " text."]]) ``` +Reagent extends standard Hiccup in one way: it is possible to "squeeze" elements together by using a `>` character. + +```clj +[:div + [:p + [:b "Nested Element"]]] +``` + +can be written as: + +```clj +[:div>p>b "Nested Element"] +``` + You can use one component inside another: ```clj From 072043dba191f6a80666198e2114c6c2933a11de Mon Sep 17 00:00:00 2001 From: "Howard M. Lewis Ship" Date: Thu, 25 Jun 2015 11:42:18 -0700 Subject: [PATCH 4/6] Use when rather than if In this situation, only a keyword should be split on '>'; the other possibilities (string, symbol, native element) are not subject to splitting into nested tags. --- src/reagent/impl/template.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reagent/impl/template.cljs b/src/reagent/impl/template.cljs index e8456a3..e68067b 100644 --- a/src/reagent/impl/template.cljs +++ b/src/reagent/impl/template.cljs @@ -261,7 +261,7 @@ (assert (valid-tag? tag) (str "Invalid Hiccup form: " (pr-str v) (comp/comp-name))) - (if (keyword? tag) + (when (keyword? tag) (-> tag name (string/split #">") From 4160fdfd35a15c503d97b817d359df845125e8e1 Mon Sep 17 00:00:00 2001 From: "Howard M. Lewis Ship" Date: Thu, 25 Jun 2015 11:43:49 -0700 Subject: [PATCH 5/6] Fix typo in docstring --- src/reagent/impl/template.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reagent/impl/template.cljs b/src/reagent/impl/template.cljs index e68067b..c037ddf 100644 --- a/src/reagent/impl/template.cljs +++ b/src/reagent/impl/template.cljs @@ -227,7 +227,7 @@ (make-element argv comp p first-child))))))) (defn- expand-tags - "Used to supported the extended Hiccup syntax for nested elements. In addition to the keyword + "Used to support the extended Hiccup syntax for nested elements. In addition to the keyword specifying tag, optional id, and optional class(es), the '>' character indicates a nested element. e.g. From 4d32b97ca6559294d5c6c045688804e1e9766f70 Mon Sep 17 00:00:00 2001 From: "Howard M. Lewis Ship" Date: Thu, 25 Jun 2015 11:44:09 -0700 Subject: [PATCH 6/6] Correct error in example in docstring --- src/reagent/impl/template.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/reagent/impl/template.cljs b/src/reagent/impl/template.cljs index c037ddf..f40260b 100644 --- a/src/reagent/impl/template.cljs +++ b/src/reagent/impl/template.cljs @@ -236,7 +236,7 @@ is the same as: - [:nav.navbar [:div.container [:div.navbar-header [:a.navbar-bran {:href \"...\"} \"Home\"]]]] + [:nav.navbar [:div.container [:div.navbar-header [:a.navbar-brand {:href \"...\"} \"Home\"]]]] tags - the original keyword split at '>' hiccup-form - the original hiccup form (a keyword in the first position)"