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 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/README.md b/README.md index 7726478..b22e2dc 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 diff --git a/src/reagent/impl/template.cljs b/src/reagent/impl/template.cljs index fa2d8b0..f40260b 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 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. + + [: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-brand {: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))) + (when (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)