Merge pull request #7 from mickaelvieira/0.4.0

0.4.0
mickaelvieira · Apr 13, 2018 · e3963c6 · e3963c6
2 parents ae2d724 + 692e946
commit e3963c6
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 310 deletions.
diff --git a/README.md b/README.md
@@ -50,11 +50,12 @@ import { wrap } from "dom-element-wrapper";
 
 let element = document.querySelector(".my-container");
 
-element = wrap(element)
-  .appendNode("div", {
+element = wrap(element).append(
+  wrap("div", {
     id: "element-id",
     className: "css-class"
-  });
+  })
+);
 ```
 
 The cool thing is you still have access to the underlying node, so you can do something like this:
@@ -63,19 +64,20 @@ The cool thing is you still have access to the underlying node, so you can do so
 import { wrap } from "dom-element-wrapper";
 
 const nodes = wrap(element)
-  .appendNode("div", {
-    id: "element-id",
-    className: "css-class"
-  })
+  .append(
+    wrap("div", {
+      id: "element-id",
+      className: "css-class"
+    })
+  )
   .setAttribute("title", "Element's title")
   .addEventListener("mouseover", handler)
-  .appendChild(document.createElement("div"))
-  .childNodes;
+  .appendChild(document.createElement("div")).childNodes;
 ```
 
 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 `get` `has` or `is` 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?**
 >
@@ -119,16 +121,12 @@ you can simply write something like that:
 import { wrap } from "dom-element-wrapper";
 
 const entries = ["Stuff 1", "Stuff 2", "Stuff 3", "Stuff 4"];
-const items = entries.map(entry => wrap("li").appendText(entry));
+const items = entries.map(entry => wrap("li").append(entry));
 
 const element = wrap("div", { className: "nice-stuff" })
-  .appendWrappers(
-    wrap("div").appendWrappers(
-      wrap("p").appendText("List of stuff")
-    ),
-    wrap("ul").appendWrappers(
-      ...items
-    )
+  .append(
+    wrap("div").append(wrap("p").append("List of stuff")),
+    wrap("ul").append(...items)
   )
   .unwrap();
 
@@ -187,12 +185,16 @@ const element = wrap(document.querySelector(".container"), {
 
 ```js
 const element = wrap("div")
-  .prependNode("div", {
-    id: "my-id",
-  })
-  .prependNode("div", {
-    className: "my-style"
-  });
+  .prepend(
+    wrap("div", {
+      id: "my-id"
+    })
+  )
+  .prepend(
+    wrap("div", {
+      className: "my-style"
+    })
+  );
 ```
 
 ```html
@@ -204,12 +206,16 @@ const element = wrap("div")
 
 ```js
 const element = wrap("div")
-  .appendNode("div", {
-    id: "my-id",
-  })
-  .appendNode("div", {
-    className: "my-style"
-  });
+  .append(
+    wrap("div", {
+      id: "my-id"
+    })
+  )
+  .append(
+    wrap("div", {
+      className: "my-style"
+    })
+  );
 ```
 
 ```html
@@ -223,9 +229,9 @@ const element = wrap("div")
 
 ```js
 const element = wrap("div")
-  .prependText("world")
-  .prependText(" ")
-  .prependText("Hello");
+  .prepend("world")
+  .prepend(" ")
+  .prepend("Hello");
 ```
 
 ```html
@@ -236,9 +242,9 @@ const element = wrap("div")
 
 ```js
 const element = wrap("div")
-  .appendText("Hello")
-  .appendText(" ")
-  .appendText("world");
+  .append("Hello")
+  .append(" ")
+  .append("world");
 ```
 
 ```html
@@ -250,11 +256,7 @@ const element = wrap("div")
 #### Prepend/append wrappers
 
 ```js
-const element = wrap("div").prependWrappers(
-  wrap("h1"),
-  wrap("h2"),
-  wrap("p")
-);
+const element = wrap("div").prepend(wrap("h1"), wrap("h2"), wrap("p"));
 ```
 
 ```html
@@ -266,11 +268,7 @@ const element = wrap("div").prependWrappers(
 ```
 
 ```js
-const element = wrap("div").appendWrappers(
-  wrap("h1"),
-  wrap("h2"),
-  wrap("p")
-);
+const element = wrap("div").append(wrap("h1"), wrap("h2"), wrap("p"));
 ```
 
 ```html

diff --git a/bin/create-branch b/bin/create-branch
@@ -65,17 +65,20 @@ split_version() {
 }
 
 get_next_major_version() {
-    local numbers=("$(split_version "$1")")
+    local numbers=()
+    IFS=" " read -r -a numbers <<< "$(split_version "$1")"
     [[ ${#numbers[@]} -eq 3 ]] && echo "$((numbers[0] + 1)).0.0"
 }
 
 get_next_minor_version() {
-    local numbers=("$(split_version "$1")")
+    local numbers=()
+    IFS=" " read -r -a numbers <<< "$(split_version "$1")"
     [[ ${#numbers[@]} -eq 3 ]] && echo "${numbers[0]}.$((numbers[1] + 1)).0"
 }
 
 get_next_patch_version() {
-    local numbers=("$(split_version "$1")")
+    local numbers=()
+    IFS=" " read -r -a numbers <<< "$(split_version "$1")"
     [[ ${#numbers[@]} -eq 3 ]] && echo "${numbers[0]}.${numbers[1]}.$((numbers[2] + 1))"
 }
 

diff --git a/examples/examples.js b/examples/examples.js
@@ -12,26 +12,32 @@ function form_example() {
     .addEventListener("submit", function(event) {
       event.preventDefault();
     })
-    .appendWrappers(
-      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"
-      })
+    .append(
+      wrap("div", { className: "form-group" }).append(
+        wrap("input", {
+          type: "text",
+          id: "username",
+          name: "username",
+          className: "form-control"
+        })
+      ),
+      wrap("div", { className: "form-group" }).append(
+        wrap("input", {
+          type: "text",
+          id: "password",
+          name: "password",
+          className: "form-control"
+        })
+      ),
+      wrap("div", { className: "form-group" }).append(
+        wrap("input", {
+          type: "submit",
+          id: "username",
+          name: "username",
+          className: "btn btn-secondary",
+          value: "Click me"
+        })
+      )
     )
     .unwrap();
 
@@ -41,18 +47,18 @@ function form_example() {
 
 function list_example() {
   const items = ["Cat", "Dog", "Wolf"].map((name, index) =>
-    wrap("li", { "data-id": index }).appendText(name)
+    wrap("li", { "data-id": index }).append(name)
   );
 
   const element = wrap("div")
     .setAttribute("id", "element-id")
-    .appendWrappers(
-      wrap("div").appendWrappers(wrap("h2").appendText("Animals")),
+    .append(
+      wrap("div").append(wrap("h2").append("Animals")),
       wrap("ul", {
         role: "menu",
         "aria-menu": true,
         class: "menu-items"
-      }).appendWrappers(...items)
+      }).append(...items)
     )
     .unwrap();
 
@@ -62,8 +68,8 @@ function list_example() {
 
 function prepend_example() {
   const element1 = wrap("div");
-  const element2 = wrap("h1").appendText("h1");
-  const element3 = wrap("h2").appendText("h2");
+  const element2 = wrap("h1").append("h1");
+  const element3 = wrap("h2").append("h2");
 
   element1.prepend(element2, element3);
 

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