Merge pull request #5 from mickaelvieira/0.2.0

0.2.0
mickaelvieira · Oct 7, 2017 · 73b6f4d · 73b6f4d
2 parents f8e2a7c + 6e855b0
commit 73b6f4d
Show file tree

Hide file tree

Showing 7 changed files with 264 additions and 92 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,10 +1,15 @@
+.github/          export-ignore
+bin/              export-ignore
+examples/         export-ignore
+spec/             export-ignore
 .babelrc          export-ignore
-.eslintrc         export-ignore
 .eslintignore     export-ignore
+.eslintrc         export-ignore
+.gitignore        export-ignore
+.npmignore        export-ignore
+.travis.yml       export-ignore
 jest.json         export-ignore
 Makefile          export-ignore
-spec/             export-ignore
-bin/              export-ignore
 rollup.config.js  export-ignore
 
 * text=auto
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,18 @@
-*.map
-node_modules
-coverage
+.github
 bin
+coverage
+examples
+node_modules
+spec
+.babelrc
+.eslintignore
+.eslintrc
+.gitattributes
+.gitignore
+.travis.yml
+jest.json
+Makefile
+rollup.config.js
 yarn.lock
-.github
+
+*.map
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 ## Motivation
 
-This thin wrapper (2k) aims to provide a friendlier interface when it comes to creating nodes using the DOM API.
+This thin wrapper aims to provide a friendlier interface when it comes to creating nodes using the DOM API.
 
 If like me, you enjoy chaining stuff and you feel sad when you have to use the DOM API, this library is made for you!
 
@@ -75,7 +75,7 @@ const nodes = wrap(element)
 
 We are now able to chain the node's methods! Whoop Whoop!
 
-You still have access to the element's properties, the only difference is: the proxy intercept "setters"  methods that return a _relevant_ result cannot be chained (.i.e such as `querySelector`, `cloneNode`, etc...) as so for methods starting with however methods that returns _irrelevant_ results can be chained (.i.e such as `addEventListener`, `insertBefore`, `appendChild`, etc...).
+You still have access to the element's properties, the only difference is: the proxy intercept "setters"  methods that return a _relevant_ result cannot be chained (.i.e such as `querySelector`, `cloneNode`, etc...) as so for methods starting with `get` `has` or `is` however methods that returns _irrelevant_ results can be chained (.i.e such as `addEventListener`, `insertBefore`, `appendChild`, etc...).
 
 > **What do I call `irrelevant` results?**
 >
@@ -183,25 +183,62 @@ const element = wrap(document.querySelector(".container"), {
 <div class="container" id="my-id"></div>
 ```
 
-#### Append a single node
+#### Prepend/append nodes
 
 ```js
-const element = wrap("div").appendNode("div", {
-  id: "my-id",
-  className: "my-style"
-});
+const element = wrap("div")
+  .prependNode("div", {
+    id: "my-id",
+  })
+  .prependNode("div", {
+    className: "my-style"
+  });
+```
+
+```html
+<div>
+  <div class="my-style"></div>
+  <div id="my-id"></div>
+</div>
+```
+
+```js
+const element = wrap("div")
+  .appendNode("div", {
+    id: "my-id",
+  })
+  .appendNode("div", {
+    className: "my-style"
+  });
 ```
 
 ```html
 <div>
-  <div id="my-id" class="my-style"></div>
+  <div id="my-id"></div>
+  <div class="my-style"></div>
 </div>
 ```
 
-#### Append a text
+#### Prepend/append text nodes
+
+```js
+const element = wrap("div")
+  .prependText("world")
+  .prependText(" ")
+  .prependText("Hello");
+```
+
+```html
+<div>
+  Hello world
+</div>
+```
 
 ```js
-const element = wrap("div").appendText("Hello world"));
+const element = wrap("div")
+  .appendText("Hello")
+  .appendText(" ")
+  .appendText("world");
 ```
 
 ```html
@@ -210,7 +247,23 @@ const element = wrap("div").appendText("Hello world"));
 </div>
 ```
 
-#### Add one or multiple wrappers
+#### Prepend/append wrappers
+
+```js
+const element = wrap("div").prependWrappers(
+  wrap("h1"),
+  wrap("h2"),
+  wrap("p")
+);
+```
+
+```html
+<div>
+  <p></p>
+  <h2></h2>
+  <h1></h1>
+</div>
+```
 
 ```js
 const element = wrap("div").appendWrappers(
@@ -234,6 +287,8 @@ const element = wrap("div").appendWrappers(
 const element = wrap("div").unwrap();
 ```
 
+That's it!
+
 ## Contributing
 
 Install the dependencies

diff --git a/examples/examples.js b/examples/examples.js
@@ -11,34 +11,27 @@ function form_example() {
   })
     .addEventListener("submit", function(event) {
       event.preventDefault();
-      console.log(event);
     })
     .appendWrappers(
-      wrap("div", { className: "form-group" }).appendWrappers(
-        wrap("input", {
-          type: "text",
-          id: "username",
-          name: "username",
-          className: "form-control"
-        })
-      ),
-      wrap("div", { className: "form-group" }).appendWrappers(
-        wrap("input", {
-          type: "text",
-          id: "password",
-          name: "password",
-          className: "form-control"
-        })
-      ),
-      wrap("div", { className: "form-group" }).appendWrappers(
-        wrap("input", {
-          type: "submit",
-          id: "username",
-          name: "username",
-          className: "btn btn-secondary",
-          value: "Click me"
-        })
-      )
+      wrap("div", { className: "form-group" }).appendNode("input", {
+        type: "text",
+        id: "username",
+        name: "username",
+        className: "form-control"
+      }),
+      wrap("div", { className: "form-group" }).appendNode("input", {
+        type: "text",
+        id: "password",
+        name: "password",
+        className: "form-control"
+      }),
+      wrap("div", { className: "form-group" }).appendNode("input", {
+        type: "submit",
+        id: "username",
+        name: "username",
+        className: "btn btn-secondary",
+        value: "Click me"
+      })
     )
     .unwrap();
 
@@ -47,8 +40,6 @@ function form_example() {
 }
 
 function list_example() {
-  const wrap = DOMElementWrapper.wrap;
-
   const items = ["Cat", "Dog", "Wolf"].map(name => wrap("li").appendText(name));
 
   const element = wrap("div")
@@ -59,7 +50,7 @@ function list_example() {
     )
     .unwrap();
 
-  let container = document.querySelector(".list-example");
+  const container = document.querySelector(".list-example");
   container.appendChild(element);
 }
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dom-element-wrapper",
   "description": "Make the DOM great again!",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/dom-element-wrapper.js",
   "js:next": "dist/dom-element-wrapper-es.js",
   "module": "dist/dom-element-wrapper-es.js",

diff --git a/spec/wrapper.spec.js b/spec/wrapper.spec.js
@@ -138,12 +138,53 @@ describe("wrap", () => {
     expect(wrapper.querySelectorAll(".my-class")).toEqual(expect.any(NodeList));
   });
 
-  test("appends a text node", () => {
-    const element = wrap("div").appendText("hello world");
+  test("prepends text nodes", () => {
+    const element = wrap("div")
+      .prependText("world")
+      .prependText(" ")
+      .prependText("hello");
+
     expect(element.firstChild.nodeType).toBe(Node.TEXT_NODE);
+    expect(element.lastChild.nodeType).toBe(Node.TEXT_NODE);
     expect(element.innerHTML).toBe("hello world");
   });
 
+  test("appends text nodes", () => {
+    const element = wrap("div")
+      .appendText("hello")
+      .appendText(" ")
+      .appendText("world");
+
+    expect(element.firstChild.nodeType).toBe(Node.TEXT_NODE);
+    expect(element.innerHTML).toBe("hello world");
+  });
+
+  test("prepends nodes", () => {
+    const element = wrap("div").prependNode("p").prependNode("h1");
+    expect(element.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.lastChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.firstChild.nodeName.toLowerCase()).toBe("h1");
+    expect(element.lastChild.nodeName.toLowerCase()).toBe("p");
+  });
+
+  test("prepends nodes with properties", () => {
+    const element = wrap("div")
+      .prependNode("p", {
+        className: "class-p"
+      })
+      .prependNode("h1", {
+        className: "class-h1"
+      });
+
+    expect(element.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.firstChild.nodeName.toLowerCase()).toBe("h1");
+    expect(element.firstChild.className).toBe("class-h1");
+
+    expect(element.lastChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element.lastChild.nodeName.toLowerCase()).toBe("p");
+    expect(element.lastChild.className).toBe("class-p");
+  });
+
   test("appends a node", () => {
     const element = wrap("div").appendNode("p");
     expect(element.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
@@ -159,6 +200,19 @@ describe("wrap", () => {
     expect(element.firstChild.className).toBe("my-css-class");
   });
 
+  test("prepends a wrapper", () => {
+    const element1 = wrap("div");
+    const element2 = wrap("h1");
+
+    element1.prependWrappers(element2);
+
+    expect(element1.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element1.firstChild.nodeName.toLowerCase()).toBe("h1");
+
+    expect(element1.lastChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element1.lastChild.nodeName.toLowerCase()).toBe("h1");
+  });
+
   test("appends a wrapper", () => {
     const element1 = wrap("div");
     const element2 = wrap("p");
@@ -169,7 +223,21 @@ describe("wrap", () => {
     expect(element1.firstChild.nodeName.toLowerCase()).toBe("p");
   });
 
-  test("appends multiple proxy elements", () => {
+  test("prepends multiple wrappers", () => {
+    const element1 = wrap("div");
+    const element2 = wrap("h1");
+    const element3 = wrap("h2");
+
+    element1.prependWrappers(element3, element2);
+
+    expect(element1.firstChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element1.firstChild.nodeName.toLowerCase()).toBe("h1");
+
+    expect(element1.lastChild.nodeType).toBe(Node.ELEMENT_NODE);
+    expect(element1.lastChild.nodeName.toLowerCase()).toBe("h2");
+  });
+
+  test("appends multiple wrappers", () => {
     const element1 = wrap("div");
     const element2 = wrap("p");
     const element3 = wrap("span");