Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

V1: Remove templating; consolidate to core.clj{s} #85

Merged
merged 9 commits into from
Oct 14, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
## 1.0.0

* Updated ClojureScript dependency to 0.0-2356
* BREAKING: Removed `dommy.template` namespace
* BREAKING: Merged `dommy.macros` into `dommy.core`; macros now required like `(:require [dommy.core :as dommy :include-macros true])`
* Merged `dommy.attrs` into `dommy.core`.
* Renamed `dommy.core/ancestor-nodes` to `dommy.core/ancestors`
* Added `dommy.core/create-element` and `dommy.core/create-text-node`

## 0.1.3

* Fix add-class! for when element.classList is not supported (Prismatic/dommy#59)
* Improved support for SVG elements (Prismatic/dommy#60)
* Fixed support attributes containing forward slashes (Prismatic/dommy#62)
* Fix set-style! in some versions of Firefox (Prismatic/dommy#64)
* Fix add-class! for when element.classList is not supported (Prismatic/dommy#59)
* Improved support for SVG elements (Prismatic/dommy#60)
* Fixed support attributes containing forward slashes (Prismatic/dommy#62)
* Fix set-style! in some versions of Firefox (Prismatic/dommy#64)

## 0.1.2

## 0.1.1

## 0.1.0

* Consolidated all macros into one ns, dommy.macros
* The following functions were made variadic: add-class!, remove-class!, set-style!, set-px!, set-attr!, and remove-attr!
* Consolidated all macros into one ns, dommy.macros
* The following functions were made variadic: add-class!, remove-class!, set-style!, set-px!, set-attr!, and remove-attr!
113 changes: 40 additions & 73 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,37 @@
<img src="resources/logo.png" width="270" />

A ClojureScript DOM manipulation, templating and event library.
A ClojureScript DOM manipulation and event library.

## Usage

Add the following dependency to your `project.clj`:

```clojure
[prismatic/dommy "0.1.3"]
[prismatic/dommy "1.0.0"]
```

#### Upgrading to 1.0.0+ from 0.X.Y

Version "1.0.0" includes breaking API changes. Here's a quick overview of what's
changed:

* `dommy.template` namespace and all related templating features
(`node`, `deftemplate`, etc) have been removed from the library.
* Simplified namespace structure.
Everything in `dommy.macros` and `dommy.attrs` has been moved into
`dommy.core`

See CHANGELOG.md or <https://github.com/Prismatic/dommy/pull/85> for more
details.

### Selection

DOM nodes are selected using macros, which expand to the correct native dom calls. Because selectors don't wrap returned nodes, there is a distinction between single and multiple selections. A selector can be a keyword, string or vector.

```clojure
(ns
(ns foo.bar
(:require
[dommy.utils :as utils]
[dommy.core :as dommy])
(:use-macros
[dommy.macros :only [node sel sel1]]))
[dommy.core :refer-macros [sel sel1]]))

(sel1 :body) ; => document.body
(sel1 :#header) ; => document.getElementById("header")
Expand All @@ -29,6 +40,12 @@ DOM nodes are selected using macros, which expand to the correct native dom call
(sel [:#todos :li]) ; => document.querySelectorAll("#todos li")
```

Sometimes its useful to specify the base node from which the selection takes place.

```clojure
(sel1 todos-element :.todo)
```

### DOM Manipulation

Inspired by [jQuery](http://jquery.com), but adapted to be functional in order to better fit with ClojureScript core.
Expand All @@ -42,7 +59,7 @@ Inspired by [jQuery](http://jquery.com), but adapted to be functional in order t
(map dommy/text (sel :.todo))
```

Functions that modify take the target dom node as their first argument, and return the same modified node, allowing the use of threading macros to accomplish jQuery-like chaining.
Functions that modify take the target node as their first argument, and return the same modified node, allowing the use of threading macros to accomplish jQuery-like chaining.

```clojure
(-> (sel1 :#my-button)
Expand All @@ -55,90 +72,40 @@ Functions that modify take the target dom node as their first argument, and retu
(map #(dommy/add-class! % :big-image)))
```

Dom manipulation is defined in [dommy.core](https://github.com/Prismatic/dommy/blob/master/src/dommy/core.cljs) and [dommy.attrs](https://github.com/Prismatic/dommy/blob/master/src/dommy/attrs.cljs).

### Templating

Templating syntax is based on [Hiccup](https://github.com/weavejester/hiccup/), a great HTML library for Clojure. Instead of returning a string of html, dommy's `node` macro returns a DOM node.

```clojure
(ns …
(:require [dommy.core])
(:use-macros
[dommy.macros :only [node]]))

(node
[:div#id.class1
(for [r (range 2)]
[:span.text (str "word" r)])]) ;; => [object HTMLElement]

;; Styles can be inlined as a map
(node
[:span
{:style
{:color "#aaa"
:text-decoration "line-through"}}])
```

The `deftemplate` macro is useful syntactic sugar for defining a function that returns a DOM node.

```clojure
(ns …
(:require [dommy.core])
(:use-macros
[dommy.macros :only [node deftemplate]]))

(defn simple-template [cat]
(node [:img {:src cat}]))

(deftemplate simple-template [cat]
[:img {:src cat}])
```
### Events

Thanks to [@ibdknox](https://github.com/ibdknox/), you can define view logic for custom types by implementing the `PElement` protocol:
Dommy's event API closely resembles the native JavaScript API.

```clojure
(defrecord MyModel [data]
dommy.template/PElement
(-elem [this] (node [:p (str "My data " data)])))

(dommy/append! (sel1 :body) (MyModel. "is big"))
```
(ns foo.bar
(:require
[dommy.core :as dommy :refer-macros [sel1]]))

### Type-Hinting Template Macros
(defn click-handler [e]
(.log js/console "You clicked my button! Congratulations"))

One caveat of using the compile-macro is that if you have a compound element (a vector element) and want to have a non-literal map as the attributes (the second element of the vector), then you need to use <code>^:attrs</code> meta-data so the compiler knows to process this symbol as a map of attributes in the runtime system. Here's an example:
(dommy/listen! (sel1 :#my-button) :click click-handler)

```clojure
(node [:a ^:attrs (merge m1 m2)])
(dommy/unlisten! (sel1 :#my-button) :click click-handler)
```

### Events

Listening for events in dommy is pretty straightforward. `listen!` takes a DOM node, a macro describing the event and the function to run in the case of that event being triggered.
If the first argument to `listen!` is a sequence, the handler will delegate events to the selected element defined by the sequence. A special property `selectedTarget` added to the event specifies the element selected.

```clojure
(ns …
(:require
[dommy.core :as dommy])
(:use-macros
[dommy.macros :only [sel1]]))

(defn clickEvent [event]
(.log js/console "You have clicked the button! Congratulations"))
(defn todo-click-handler [e]
(.log js/console "The clicked todo is" (.-selectedTarget e)))

(dommy/listen! (sel1 :#clickButton)
:click clickEvent)
(dommy/listen! [todos-element :.todo] :click todo-click-handler))
```

## Testing

For all pull requests, please ensure your tests pass (or add test cases) before submitting.

$ lein test
$ lein cljsbuild test

## License

Copyright (C) 2013 Prismatic
Copyright (C) 2014 Prismatic

Distributed under the Eclipse Public License, the same as Clojure.
16 changes: 9 additions & 7 deletions project.clj
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
(defproject prismatic/dommy "0.1.4-SNAPSHOT"
(defproject prismatic/dommy "1.0.0"
:clojurescript? true
:description "Clojurescript DOM templating and manipulation"
:description "Clojurescript DOM manipulation"
:url "https://github.com/prismatic/dommy"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
Expand All @@ -10,14 +10,16 @@
[:url "http://getprismatic.com"]
[:email "[email protected]"]
[:timezone "-8"]]]
:plugins [[lein-cljsbuild "0.3.2"]
[com.cemerick/clojurescript.test "0.2.1"]
[com.cemerick/austin "0.1.3"]]

:dependencies [[org.clojure/clojure "1.6.0" :scope "provided"]
[org.clojure/clojurescript "0.0-2356" :scope "provided"]]

:plugins [[lein-cljsbuild "1.0.3"]]

:hooks [leiningen.cljsbuild]

:profiles {:dev {:dependencies [[crate "0.2.3"] ;; for perf test
[com.cemerick/clojurescript.test "0.2.1"]]}}
:profiles {:dev {:dependencies [[com.cemerick/clojurescript.test "0.3.1"]]
:plugins [[com.cemerick/clojurescript.test "0.3.1"]]}}

:lein-release {:deploy-via :shell
:shell ["lein" "deploy" "clojars"]}
Expand Down
Loading