rename attributes to add_attributes for clarity! #44

Author: nelsonic

Diff for: examples/todo-list/elmish.js

@@ -1,7 +1,3 @@
-
-
-
-
 /**
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
@@ -45,9 +41,9 @@ function mount(model, update, view, root_element_id) {
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
 * // returns node with attributes applied
-* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
 */
-function attributes(attrlist, node) {
+function add_attributes(attrlist, node) {
   attrlist.forEach(function (attr) {
     var a = attr.split('=');
     switch(a[0]) {
@@ -80,7 +76,7 @@ function init(doc){
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     // view: view,
-    attributes: attributes,
+    add_attributes: add_attributes,
     empty: empty,
     init: init,
     mount: mount

Diff for: test/elmish.test.js

@@ -51,23 +51,23 @@ test('elmish.mount app expect state to be Zero', function (t) {
 });
 
 
-test('elmish.attributes applies class HTML attribute to a node', function (t) {
+test('elmish.add_attributes applies HTML claa attribute to node', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
-  div = elmish.attributes(["class=apptastic"], div);
+  div = elmish.add_attributes(["class=apptastic"], div);
   root.appendChild(div);
   // test the div has the desired class:
   const nodes = document.getElementsByClassName('apptastic');
   t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
   t.end();
 });
 
-test('elmish.attributes applies id HTML attribute to a node', function (t) {
+test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root);
   let el = document.createElement('section');
-  el = elmish.attributes(["id=myid"], el);
+  el = elmish.add_attributes(["id=myid"], el);
   const text = 'hello world!'
   var txt = document.createTextNode(text);
   el.appendChild(txt);
@@ -77,13 +77,39 @@ test('elmish.attributes applies id HTML attribute to a node', function (t) {
   t.end();
 });
 
-test('test default branch of elmish.attributes (no effect)', function (t) {
+test('elmish.add_attributes applies multiple attribute to node', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let el = document.createElement('span');
+  el = elmish.add_attributes(["id=myid", "class=totes mcawesome"], el);
+  const text = 'hello world'
+  var txt = document.createTextNode(text);
+  el.appendChild(txt);
+  root.appendChild(el);
+  const actual = document.getElementById('myid').textContent;
+  t.equal(actual, text, "<section> has 'myid' id attribute");
+  t.equal(el.className, 'totes mcawesome', "CSS class applied: ", el.className);
+  t.end();
+});
+
+test('test default branch of elmish.add_attributes (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking the elmish.attributes
+  const clone = div.cloneNode(true);
+  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
+
+test('elmish.', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
   // "Clone" the div DOM node before invoking the elmish.attributes
   const clone = div.cloneNode(true);
-  div = elmish.attributes(["unrecognised_attribute=noise"], div);
+  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
   t.deepEqual(div, clone, "<div> has not been altered");
   t.end();
 });

Diff for: todo-list.md

@@ -439,19 +439,19 @@ Demo: https://ellie-app.com/LTtNVQjfWVa1
 ![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
 
 
-### `attributes`
+### `add_attributes`
 
-The `JSDOC` comment for our `attributes` function is:
+The `JSDOC` comment for our `add_attributes` function is:
 ```js
 /**
-* attributes applies the desired attributes to the desired node.
+* add_attributes applies the desired attributes to the desired node.
 * Note: this function is "impure" because it "mutates" the node.
 * however it is idempotent; the "side effect" is only applied once.
 * @param {Array.<String>} attrlist list of attributes to be applied to the node
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
 * // returns node with attributes applied
-* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
 */
 ```
 This should give you a _good idea_ of what code needs to be written.
@@ -460,11 +460,11 @@ But let's write the _test_ first!
 Add the following test to the `test/elmish.test.js` file: <br />
 
 ```js
-test('elmish.attributes applies class HTML attribute to a node', function (t) {
+test('elmish.add_attributes applies class HTML attribute to a node', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
-  div = elmish.attributes(["class=apptastic"], div);
+  div = elmish.add_attributes(["class=apptastic"], div);
   root.appendChild(div);
   // test the div has the desired class:
   const nodes = document.getElementsByClassName('apptastic');