Merge pull request #12 from InDIOS/development

Bump to version 0.2.4

.gitignore

@@ -1,6 +1,9 @@
 # Dependency directories
 node_modules/
-
+specs/*
+!specs/components
+specs/components/*
+!specs/components/readme.txt
 build/
 tools/*.js
 tools/*.map

CHANGELOG.md

@@ -1,3 +1,11 @@
+0.2.4
+- Added ability to get the iteration index when iterate over obejcts.
+- Fixed issue initializing element attributes.
+- Fixed missing spaces in adjacent interpolation expressions.
+- Fixed missing attribute generation.
+- Fixed scope issue when conditional are inside loops.
+- Changed test to work with PhantomJS.
+
 0.2.3
 - Added ability to add or remove boolean attributes.
 - Fixed some bugs on context assignment with Sequence and Assignment expressions.

examples/animation/src/components/animation.html

@@ -25,7 +25,7 @@
 				animation.ended(() => { !value && this.$update(); });
 				if (value) {
 					this.$set('visible', value);
-					 animation.in(refs.box);
+					animation.in(refs.box);
 				} else {
 					this.visible = value;
 					animation.out(refs.box);

examples/dynamic-component/src/components/app.html

@@ -2,7 +2,7 @@
 <a href="#" @click.prevent="foo = 'blue'">Blue </a>
 <a href="#" @click.prevent="foo = 'green'">Gree </a>
 
-<component :is="children[foo]" name="thing" />
+<component :is="children[foo]" text="thing" />
 
 <script>
   import red from './red.html';

examples/dynamic-component/src/components/blue.html

@@ -1,8 +1,8 @@
 <h2>Component Blue:</h2>
-<p style="color: blue">Blue {{ name }}</p>
+<p style="color: blue">Blue {{ text }}</p>
 
 <script>
   export default {
-    attrs: ['name']
+    attrs: ['text']
   };
 </script>

examples/dynamic-component/src/components/green.html

@@ -1,8 +1,8 @@
 <h2>Component Green:</h2>
-<span style="color: green">Green {{ name }}</span>
+<span style="color: green">Green {{ text }}</span>
 
 <script>
   export default {
-    attrs: ['name']
+    attrs: ['text']
   };
 </script>

examples/dynamic-component/src/components/red.html

@@ -1,8 +1,8 @@
 <h2>Component Red:</h2>
-<span style="color: red">Red {{ name }}</span>
+<span style="color: red">Red {{ text }}</span>
 
 <script>
   export default {
-    attrs: ['name']
+    attrs: ['text']
   };
 </script>

examples/select/index.html

@@ -0,0 +1,10 @@
+<input id="checkbox_1" type="checkbox" $name="checkboxes" :value="{ value: 'No' }">
+<input id="checkbox_2" type="checkbox" $name="checkboxes" :value="{ value: 'Yes' }">
+
+<script>
+  export default {
+    model: {
+      checkboxes: []
+    }
+  };
+</script>

spec/components/html.umd.js → examples/select/index.iif.js

@@ -1,8 +1,4 @@
-!function (global, factory) {
-		typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-		typeof define === 'function' && define.amd ? define('html', factory) :
-		(global.Html = factory());
-	}(this, function () {
+!function(glob) { 
 		'use strict';
 var PROP_MAP = {
   p: '__TP__',
@@ -411,21 +407,6 @@ function _$toPlainObj(obj) {
   });
   return _$isObject(obj) ? data : obj;
 }
-function _$setRef(obj, prop) {
-  var value = [];
-  _$def(obj, prop, {
-    get: function() {
-      return value.length <= 1 ? value[0] : value;
-    },
-
-    set: function(val) {
-      val && !~value.indexOf(val) && value.push(val);
-    },
-
-    enumerable: true,
-    configurable: true
-  });
-}
 function _$accesor(object, path, value) {
   return path.split('.').reduce(function(obj, key, i, arr) {
     if (_$isType(value, 'undefined')) {
@@ -449,6 +430,11 @@ function _$accesor(object, path, value) {
     return obj ? obj[key] : null;
   }, object);
 }
+function _$bindGroup(input, selection) {
+  var _value = _$gv(input);
+  var _$index = selection.indexOf(_value);
+  input.checked && !~_$index ? selection.push(_value) : selection.splice(_$index, 1);
+}
 function _$(selector, parent) {
   return _$isStr(selector) ? (parent || document).querySelector(selector) : selector;
 }
@@ -466,18 +452,39 @@ function _$a(parent, child, sibling) {
 function _$ce(tagName) {
   return document.createElement(tagName || 'div');
 }
-function _$ct(content) {
-  return document.createTextNode(content || '');
-}
 function _$sa(el, attrAndValue) {
   var attr = attrAndValue[0], value = attrAndValue[1];
   el.setAttribute(attr, _$toStr(value));
   if (_$isValueAttr(attr) && !_$isStr(value))
     el[PROP_MAP._] = value;
 }
-function _$tu(text, value) {
-  if (text.data !== (value = _$toStr(value)))
-    text.data = value;
+function _$ga(el, attr) {
+  return _$isValueAttr(attr) ? _$gv(el) : el.getAttribute(attr);
+}
+function _$gv(el) {
+  return _$hasProp(el, PROP_MAP._) ? el[PROP_MAP._] : el[PROP_MAP.v];
+}
+function _$al(el, event, handler) {
+  el.addEventListener(event, handler, false);
+}
+function _$rl(el, event, handler) {
+  el.removeEventListener(event, handler, false);
+}
+function _$bba(el, attrAndValue) {
+  var _a = attrAndValue.concat([el.hasAttribute(attrAndValue[0])]), attr = _a[0], value = _a[1], hasAttr = _a[2];
+  value == null || value === false ? hasAttr && el.removeAttribute(attr) : _$sa(el, [attr, '']);
+}
+function _$bu(el, binding) {
+  var attr = binding[0], value = binding[1];
+  var _value = _$toStr(value);
+  if (_$isValueAttr(attr)) {
+    if (el[attr] !== _value) {
+      el[attr] = _value;
+    }
+    el[PROP_MAP._] = value;
+  } else if (_$ga(el, attr) !== _value) {
+    _$sa(el, [attr, _value]);
+  }
 }
 function _$e(obj, cb) {
   for (var key in obj) {
@@ -486,38 +493,49 @@ function _$e(obj, cb) {
     }
   }
 }
-function _$tplHtml(_$state) {
-  var _$frag, div_1, div_2, p_1, txt_1, setTxt_1, div_3, p_2, txt_2, setTxt_2, _refs, div_4, div_5, contentDiv_5_1;
+function _$tplIndex(_$state) {
+  var _$frag, input_1, changeEvent_1, handlerChangeEvent_1, bindCheckedInput_1, bindValueInput_1, input_2, changeEvent_2, handlerChangeEvent_2, bindCheckedInput_2, bindValueInput_2;
   _$frag = _$d();
-  setTxt_1 = function(_$state) {
-    return 'Some paragraph with text ' + _$state.expression;
+  changeEvent_1 = function(_$state, $event, $el) {
+    _$bindGroup($el, _$state.checkboxes);
+  };
+  bindCheckedInput_1 = function(_$state) {
+    return ['checked', !!~_$state.checkboxes.indexOf(_$ga(input_1, 'value'))];
+  };
+  bindValueInput_1 = function() {
+    return ['value', {
+      value: 'No'
+    }];
+  };
+  changeEvent_2 = function(_$state, $event, $el) {
+    _$bindGroup($el, _$state.checkboxes);
   };
-  setTxt_2 = function(_$state) {
-    return 'Some paragraph with ' + _$state.text + ' and ' + _$state.attribute + ' expressions';
+  bindCheckedInput_2 = function(_$state) {
+    return ['checked', !!~_$state.checkboxes.indexOf(_$ga(input_2, 'value'))];
   };
-  _refs = _$state.$refs;
-  contentDiv_5_1 = function(_$state) {
-    return _$state.html;
+  bindValueInput_2 = function() {
+    return ['value', {
+      value: 'Yes'
+    }];
   };
   return {
     $create: function() {
-      div_1 = _$ce();
-      div_1.innerHTML = '<p>Here\'s a very interesting note displayed in a lovely shadowed box.</p><p>Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!</p>';
-      div_2 = _$ce();
-      p_1 = _$ce('p');
-      txt_1 = _$ct();
-      txt_1.data = setTxt_1(_$state);
-      div_3 = _$ce();
-      p_2 = _$ce('p');
-      txt_2 = _$ct();
-      txt_2.data = setTxt_2(_$state);
-      !_refs['someAttr'] && _$setRef(_refs, 'someAttr');
-      _refs['someAttr'] = p_2;
-      div_4 = _$ce();
-      div_4.innerHTML = '<p $some-attr="someVar">Some paragraph with text intentional {{escaped}}</p>';
-      div_5 = _$ce();
-      div_5.innerHTML = contentDiv_5_1(_$state);
-      _$sa(div_1, ['class', 'shadowbox']);
+      input_1 = _$ce('input');
+      input_2 = _$ce('input');
+      _$al(input_1, 'change', handlerChangeEvent_1 = function(event) {
+        changeEvent_1(_$state, event, input_1);
+      });
+      _$bba(input_1, bindCheckedInput_1(_$state));
+      _$sa(input_1, bindValueInput_1(_$state));
+      _$sa(input_1, ['id', 'checkbox_1']);
+      _$sa(input_1, ['type', 'checkbox']);
+      _$al(input_2, 'change', handlerChangeEvent_2 = function(event) {
+        changeEvent_2(_$state, event, input_2);
+      });
+      _$bba(input_2, bindCheckedInput_2(_$state));
+      _$sa(input_2, bindValueInput_2(_$state));
+      _$sa(input_2, ['id', 'checkbox_2']);
+      _$sa(input_2, ['type', 'checkbox']);
     },
 
     $mount: function(parent, sibling) {
@@ -528,25 +546,15 @@ function _$tplHtml(_$state) {
     },
 
     $update: function(_$state) {
-      _$tu(txt_1, setTxt_1(_$state));
-      _$tu(txt_2, setTxt_2(_$state));
-      var updateContentDiv_5_1 = contentDiv_5_1(_$state);
-      if (div_5.innerHTML !== updateContentDiv_5_1) {
-        div_5.innerHTML = updateContentDiv_5_1;
-      }
-      updateContentDiv_5_1 = void 0;
+      _$bba(input_1, bindCheckedInput_1(_$state));
+      _$bu(input_1, bindValueInput_1(_$state));
+      _$bba(input_2, bindCheckedInput_2(_$state));
+      _$bu(input_2, bindValueInput_2(_$state));
     },
 
     $unmount: function() {
-      _$a(_$frag, div_1);
-      _$a(p_1, txt_1);
-      _$a(div_2, p_1);
-      _$a(_$frag, div_2);
-      _$a(p_2, txt_2);
-      _$a(div_3, p_2);
-      _$a(_$frag, div_3);
-      _$a(_$frag, div_4);
-      _$a(_$frag, div_5);
+      _$a(_$frag, input_1);
+      _$a(_$frag, input_2);
     },
 
     $destroy: function() {
@@ -555,26 +563,22 @@ function _$tplHtml(_$state) {
       this.$parentEl = null;
       this.$siblingEl = null;
       this.$children.splice(0, this.$children.length);
-      if (_$isType(_refs['someAttr'], 'array')) {
-        var indexP_2 = _refs['someAttr'].indexOf(p_2);
-        _refs['someAttr'].splice(indexP_2, 1);
-      } else {
-        delete _refs['someAttr'];
-      }
+      _$rl(input_1, 'change', handlerChangeEvent_1);
+      _$rl(input_2, 'change', handlerChangeEvent_2);
       delete _$state.$root;
-      _$frag = div_1 = div_2 = p_1 = txt_1 = setTxt_1 = div_3 = p_2 = txt_2 = setTxt_2 = _refs = div_4 = div_5 = contentDiv_5_1 = void 0;
+      _$frag = input_1 = changeEvent_1 = handlerChangeEvent_1 = bindCheckedInput_1 = bindValueInput_1 = input_2 = changeEvent_2 = handlerChangeEvent_2 = bindCheckedInput_2 = bindValueInput_2 = void 0;
     }
   };
 }
-function Html(_$attrs, _$parent) {
-  _$CompCtr.call(this, _$attrs, _$tplHtml, {
+function Index(_$attrs, _$parent) {
+  _$CompCtr.call(this, _$attrs, _$tplIndex, {
     model: {
-      html: '<p $some-attr="someVar">Some paragraph with text from {{model}}</p>'
+      checkboxes: []
     }
   }, _$parent);
   !_$parent && this.$create();
 }
-_$extends(Html, _$CompCtr);
-return Html;
-
-	});
+_$extends(Index, _$CompCtr);
+glob.Index = Index;
+ 
+	}(this);

examples/select/index.js

@@ -0,0 +1,27 @@
+phantom.injectJs('index.iif.js');
+
+var app = new Index();
+app.$mount('body');
+
+var input_1 = document.querySelector('#checkbox_1');
+var input_2 = document.querySelector('#checkbox_2');
+
+fireEvent('MouseEvents', input_1, 'click');
+fireEvent('MouseEvents', input_2, 'click');
+
+console.log('Model Value:', JSON.stringify(app.checkboxes));
+console.log('Input 1 Value:', input_1.value, typeof input_1.value);
+console.log('Input 1 _Value:', input_1._value, typeof input_1._value);
+console.log('Input 2 Value:', input_2.value, typeof input_2.value);
+console.log('Input 2 _Value:', input_2._value, typeof input_2._value);
+
+phantom.exit();
+
+function fireEvent(type, el, name) { // element to click on
+  // Create the event.
+  var event = document.createEvent(type);
+  // Define that the event name is 'build'.
+  event.initEvent(name, true, true);
+  // target can be any Element or other EventTarget.
+  return el.dispatchEvent(event);
+}

examples/todomvc/src/components/todo.ts

@@ -18,7 +18,7 @@ const filters = {
 		}
 	},
 	pluralize(word: string, count: number) {
-		return `${word}${count > 1 ? 's' : ''}`;
+		return `${word}${count !== 1 ? 's' : ''}`;
 	}
 };