lucia - npm Package Compare versions

Comparing version 0.0.3-alpha.1 to 0.0.3-alpha.2

dist/lucia.js

@@ -194,4 +194,135 @@ var Lucia = (function () {
 
+  var wrapIIFE = function wrapIIFE(payload) {
+    return "(function(){".concat(payload, "})()");
+  };
+
+  var createVariable = function createVariable(keys) {
+    return "var {".concat(keys.join(','), "}=data;");
+  };
+
+  var createFunction = function createFunction(value) {
+    return "function ".concat(value.toString().replace(/this\./g, 'data.'));
+  };
+
+  var compose = function compose(raw, data) {
+    var output = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var payload = '';
+    var dataKeys = [];
+
+    for (var key in data) {
+      if (typeof data[key] === 'function') {
+        payload += createFunction(data[key]);
+      } else {
+        dataKeys.push(key);
+      }
+    }
+
+    payload += createVariable(dataKeys);
+    if (output) payload += "return ".concat(raw);else payload += "".concat(raw);
+    return eval(wrapIIFE(payload));
+  };
+
+  var dataStore = function dataStore(data, patch, vdom) {
+    return new Proxy(data, {
+      get: function get(target, key) {
+        patch(vdom, data);
+        return target[key];
+      },
+      set: function set(target, key, value) {
+        target[key] = value;
+        patch(vdom, data);
+        return true;
+      },
+      deleteProperty: function deleteProperty(target, key) {
+        delete target[key];
+        patch(vdom, data);
+        return true;
+      }
+    });
+  };
+
+  var parentElements = function parentElements(element) {
+    var parents = [];
+
+    while (element) {
+      var tagName = element.nodeName.toLowerCase();
+      var cssId = element.id ? "#".concat(element.id) : '';
+      var cssClass = element.className ? ".".concat(element.className.replace(/\s+/g, '.')) : '';
+      parents.unshift({
+        element: element,
+        selector: tagName + cssId + cssClass
+      });
+      element = element.parentNode !== document ? element.parentNode : false;
+    }
+
+    return parents;
+  };
+
+  var nthElement = function nthElement(element) {
+    var el = element;
+    var nth = 0;
+
+    while (el.previousElementSibling !== null) {
+      if (el.nodeName === element.nodeName) {
+        nth++;
+      }
+
+      el = el.previousElementSibling;
+    }
+
+    return nth;
+  };
+
+  var nthSelectorNeeded = function nthSelectorNeeded(selector, path) {
+    var querySelector = path === '' ? selector : "".concat(path, " > ").concat(selector);
+    return document.querySelectorAll(querySelector).length > 1;
+  };
+
+  var buildPathString = function buildPathString(parents) {
+    var pathArr = [];
+    parents.forEach(function (parent) {
+      if (nthSelectorNeeded(parent.selector, pathArr.join(' > '))) {
+        parent.selector += ":nth-of-type(".concat(nthElement(parent.element), ")");
+      }
+
+      pathArr.push(parent.selector);
+    });
+    return pathArr.join(' > ');
+  };
+
+  var getSelector = function getSelector(element) {
+    if (!(element instanceof HTMLElement)) {
+      throw new Error('Element must be of type `HTMLElement`.');
+    }
+
+    return buildPathString(parentElements(element));
+  };
+
+  var mapAttributes = function mapAttributes($el) {
+    var attributesObject = {};
+
+    if ($el.attributes) {
+      var _iterator = _createForOfIteratorHelper($el.attributes),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var attr = _step.value;
+
+          if (attr.name.startsWith('l-')) {
+            attributesObject[attr.name] = attr.value;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+
+    return attributesObject;
+  };
+
   var VDom = /*#__PURE__*/function () {
-    function VDom($el) {
+    function VDom($el, data) {
       _classCallCheck(this, VDom);
@@ -203,12 +334,28 @@
 
+      _defineProperty(this, "data", void 0);
+
       this.$el = $el;
-      this.vdom = this.init(this.$el);
+      this.vdom = this.toVNode(this.$el);
+      this.data = dataStore(data, this.patch.bind(this), this.vdom);
     }
 
     _createClass(VDom, [{
-      key: "init",
-      value: function init($rootEl) {
-        return this.toVNode($rootEl);
+      key: "element",
+      value: function element($el, tagName, attributes, children) {
+        return {
+          $el: $el,
+          tagName: tagName,
+          attributes: attributes || {},
+          children: children || []
+        };
       }
     }, {
+      key: "textNode",
+      value: function textNode($el, value) {
+        return {
+          $el: $el,
+          value: value
+        };
+      }
+    }, {
       key: "renderTemplate",
@@ -226,3 +373,3 @@ value: function renderTemplate(html, data) {
           } else {
-            html = html.replace(tokens[i], this.compose(rawTemplateData, data));
+            html = html.replace(tokens[i], compose(rawTemplateData, data));
           }
@@ -234,29 +381,2 @@ }
     }, {
-      key: "h",
-      value: function h(tagName, attributes, children) {
-        return {
-          tagName: tagName,
-          attributes: attributes || {},
-          children: children || []
-        };
-      }
-    }, {
-      key: "element",
-      value: function element($el, tagName, attributes, children) {
-        return {
-          $el: $el,
-          tagName: tagName,
-          attributes: attributes || {},
-          children: children || []
-        };
-      }
-    }, {
-      key: "textNode",
-      value: function textNode($el, value) {
-        return {
-          $el: $el,
-          value: value
-        };
-      }
-    }, {
       key: "toVNode",
@@ -275,3 +395,3 @@ value: function toVNode($el) {
             case Node.ELEMENT_NODE:
-              children.push(this.element(targetChildNodes[i], targetChildNodes[i].tagName.toLowerCase(), this.getAttributesObject(targetChildNodes[i]), this.toVNode(targetChildNodes[i], true)));
+              children.push(this.element(getSelector(targetChildNodes[i]), targetChildNodes[i].tagName.toLowerCase(), mapAttributes(targetChildNodes[i]), this.toVNode(targetChildNodes[i], true)));
               break;
@@ -282,3 +402,3 @@ }
         if (iter) return children;else {
-          return this.element($el, $el.tagName.toLowerCase(), this.getAttributesObject($el), children);
+          return this.element(getSelector($el), $el.tagName.toLowerCase(), mapAttributes($el), children);
         }
@@ -304,72 +424,74 @@ }
             var renderedText = this.renderTemplate(vnodes.children[i].value, data);
-            if (renderedText !== vnodes.children[i].$el.nodeValue) vnodes.children[i].$el.nodeValue = renderedText;
+
+            if (renderedText !== vnodes.children[i].$el.nodeValue) {
+              vnodes.children[i].$el.nodeValue = renderedText;
+            }
           } else {
-            for (var attr in vnodes.children[i].attributes) {
+            var _loop = function _loop(attr) {
               // Directives
-              if (attr.startsWith('l-')) {
-                (function () {
-                  var attrValue = vnodes.children[i].attributes[attr];
-                  vnodes.children[i].$el.removeAttribute(attr);
+              var attrValue = vnodes.children[i].attributes[attr];
+              document.querySelector(vnodes.children[i].$el).removeAttribute(attr);
 
-                  if (attr.startsWith('l-on:')) {
-                    var eventHandler = function eventHandler() {
-                      return _this.compose(attrValue, data);
-                    };
+              if (attr.startsWith('l-on:')) {
+                var eventHandler = function eventHandler() {
+                  return compose(attrValue, _this.data, false);
+                };
 
-                    vnodes.children[i].$el["on".concat(attr.split(':')[1])] = eventHandler;
-                  }
+                document.querySelector(vnodes.children[i].$el)["on".concat(attr.split(':')[1])] = eventHandler;
+              }
 
-                  if (attr === 'l-if') {
-                    vnodes.children[i].$el.hidden = _this.compose(vnodes.children[i].attributes[attr], data) ? false : true;
-                  }
+              if (attr === 'l-if') {
+                document.querySelector(vnodes.children[i].$el).hidden = compose(vnodes.children[i].attributes[attr], data) ? false : true;
+              }
 
-                  if (attr === 'l-html') {
-                    if (data[vnodes.children[i].attributes[attr]]) {
-                      vnodes.children[i].$el.innerHTML = _this.renderTemplate(data[vnodes.children[i].attributes[attr]], data);
-                    } else {
-                      vnodes.children[i].$el.innerHTML = _this.renderTemplate(vnodes.children[i].attributes[attr], data);
-                    }
-                  }
+              if (attr === 'l-html') {
+                if (compose(vnodes.children[i].attributes[attr], data) !== undefined) {
+                  document.querySelector(vnodes.children[i].$el).innerHTML = compose(vnodes.children[i].attributes[attr], data);
+                } else {
+                  document.querySelector(vnodes.children[i].$el).innerHTML = vnodes.children[i].attributes[attr];
+                }
+              }
 
-                  if (attr.startsWith('l-bind:')) {
-                    switch (attr.split(':')[1]) {
-                      case 'class':
-                        var classData = _this.compose(attrValue, data);
+              if (attr.startsWith('l-bind:')) {
+                switch (attr.split(':')[1]) {
+                  case 'class':
+                    var classData = compose(attrValue, data);
 
-                        if (classData instanceof Array) {
-                          vnodes.children[i].$el.setAttribute('class', classData.join(' '));
-                        } else {
-                          var classes = [];
+                    if (classData instanceof Array) {
+                      document.querySelector(vnodes.children[i].$el).setAttribute('class', classData.join(' '));
+                    } else {
+                      var classes = [];
 
-                          for (var key in classData) {
-                            if (classData[key]) classes.push(key);
-                          }
+                      for (var key in classData) {
+                        if (classData[key]) classes.push(key);
+                      }
 
-                          if (classes.length > 0) {
-                            vnodes.children[i].$el.setAttribute('class', classes.join(' '));
-                          } else {
-                            vnodes.children[i].$el.removeAttribute('class');
-                          }
-                        }
+                      if (classes.length > 0) {
+                        document.querySelector(vnodes.children[i].$el).setAttribute('class', classes.join(' '));
+                      } else {
+                        document.querySelector(vnodes.children[i].$el).removeAttribute('class');
+                      }
+                    }
 
-                        break;
+                    break;
 
-                      case 'style':
-                        var styleData = _this.compose(attrValue, data);
+                  case 'style':
+                    var styleData = compose(attrValue, data);
+                    document.querySelector(vnodes.children[i].$el).removeAttribute('style'); // too harsh
 
-                        vnodes.children[i].$el.removeAttribute('style'); // too harsh
+                    for (var _key in styleData) {
+                      document.querySelector(vnodes.children[i].$el).style[_key] = styleData[_key];
+                    }
 
-                        for (var _key in styleData) {
-                          vnodes.children[i].$el.style[_key] = styleData[_key];
-                        }
+                    break;
 
-                        break;
+                  default:
+                    document.querySelector(vnodes.children[i].$el).setAttribute(attr.split(':')[1], compose(attrValue, data));
+                    break;
+                }
+              }
+            };
 
-                      default:
-                        vnodes.children[i].$el.setAttribute(attr.split(':')[1], _this.compose(attrValue, data));
-                        break;
-                    }
-                  }
-                })();
-              }
+            for (var attr in vnodes.children[i].attributes) {
+              _loop(attr);
             }
@@ -383,38 +505,2 @@
       }
-    }, {
-      key: "compose",
-      value: function compose(raw, data) {
-        var payload;
-        payload = "(function(){var d=JSON.parse('".concat(JSON.stringify(data), "');");
-
-        for (var key in data) {
-          payload += "var ".concat(key, "=d.").concat(key, ";");
-        }
-
-        payload += "return ".concat(raw, "})()");
-        return eval(payload);
-      }
-    }, {
-      key: "getAttributesObject",
-      value: function getAttributesObject($el) {
-        var attributesObject = {};
-
-        if ($el.attributes) {
-          var _iterator = _createForOfIteratorHelper($el.attributes),
-              _step;
-
-          try {
-            for (_iterator.s(); !(_step = _iterator.n()).done;) {
-              var attr = _step.value;
-              attributesObject[attr.name] = attr.value;
-            }
-          } catch (err) {
-            _iterator.e(err);
-          } finally {
-            _iterator.f();
-          }
-        }
-
-        return attributesObject;
-      }
     }]);
@@ -425,17 +511,2 @@
 
-  var data = (function (data, patch, vdom) {
-    return new Proxy(data, {
-      set: function set(target, key, value) {
-        target[key] = value;
-        patch(vdom, data);
-        return true;
-      },
-      deleteProperty: function deleteProperty(target, key) {
-        delete target[key];
-        patch(vdom, data);
-        return true;
-      }
-    });
-  });
-
   var Lucia = /*#__PURE__*/function (_VDom) {
@@ -451,10 +522,7 @@ _inherits(Lucia, _VDom);
 
-      _this = _super.call(this, document.querySelector(options.el));
+      _this = _super.call(this, document.querySelector(options.el || 'body'), options.data || {});
 
-      _defineProperty(_assertThisInitialized(_this), "data", void 0);
-
-      _this.data = data(options.data, _this.patch.bind(_assertThisInitialized(_this)), _this.vdom);
-
       _this.patch(_this.vdom, _this.data);
 
+      if (options.mounted) options.mounted();
       return _this;
@@ -461,0 +529,0 @@ }

dist/lucia.min.js

@@ -1,1 +0,1 @@
-var Lucia=function(){"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(e){return!1}}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}function _createSuper(r){var n=_isNativeReflectConstruct();return function(){var e,t=_getPrototypeOf(r);return _possibleConstructorReturn(this,n?(e=_getPrototypeOf(this).constructor,Reflect.construct(t,arguments,e)):t.apply(this,arguments))}}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function _createForOfIteratorHelper(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,l=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){l=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(l)throw i}}}}var VDom=function(){function VDom(e){_classCallCheck(this,VDom),_defineProperty(this,"$el",void 0),_defineProperty(this,"vdom",void 0),this.$el=e,this.vdom=this.init(this.$el)}return _createClass(VDom,[{key:"init",value:function(e){return this.toVNode(e)}},{key:"renderTemplate",value:function(e,t){for(var r=e.match(/{{\s*.+\s*}}/g)||[],n=0;n<r.length;n++){var o=r[n].replace(/(\{)\s*(\S+)\s*(?=})/gim,"$1$2"),i=o.substring(2,o.length-2).trim();e=i in t?e.replace(r[n],t[i]):e.replace(r[n],this.compose(i,t))}return e}},{key:"h",value:function(e,t,r){return{tagName:e,attributes:t||{},children:r||[]}}},{key:"element",value:function(e,t,r,n){return{$el:e,tagName:t,attributes:r||{},children:n||[]}}},{key:"textNode",value:function(e,t){return{$el:e,value:t}}},{key:"toVNode",value:function(e,t){for(var r=1<arguments.length&&void 0!==t&&t,n=[],o=e.childNodes,i=0;i<o.length;i++)switch(o[i].nodeType){case Node.TEXT_NODE:n.push(this.textNode(o[i],o[i].nodeValue));break;case Node.ELEMENT_NODE:n.push(this.element(o[i],o[i].tagName.toLowerCase(),this.getAttributesObject(o[i]),this.toVNode(o[i],!0)))}return r?n:this.element(e,e.tagName.toLowerCase(),this.getAttributesObject(e),n)}},{key:"patch",value:function(a,l,e){var c=this,t=2<arguments.length&&void 0!==e&&e;if(a){if("string"==typeof a)return this.renderTemplate(a,l);for(var r,u=0;u<a.children.length;u++){if((null===(r=a.children[u].$el)||void 0===r?void 0:r.nodeType)===Node.TEXT_NODE){var n=this.renderTemplate(a.children[u].value,l);n!==a.children[u].$el.nodeValue&&(a.children[u].$el.nodeValue=n)}else{for(var s in a.children[u].attributes)s.startsWith("l-")&&function(){var e=a.children[u].attributes[s];if(a.children[u].$el.removeAttribute(s),s.startsWith("l-on:")&&(a.children[u].$el["on".concat(s.split(":")[1])]=function(){return c.compose(e,l)}),"l-if"===s&&(a.children[u].$el.hidden=!c.compose(a.children[u].attributes[s],l)),"l-html"===s&&(l[a.children[u].attributes[s]]?a.children[u].$el.innerHTML=c.renderTemplate(l[a.children[u].attributes[s]],l):a.children[u].$el.innerHTML=c.renderTemplate(a.children[u].attributes[s],l)),s.startsWith("l-bind:"))switch(s.split(":")[1]){case"class":var t=c.compose(e,l);if(t instanceof Array)a.children[u].$el.setAttribute("class",t.join(" "));else{var r=[];for(var n in t)t[n]&&r.push(n);0<r.length?a.children[u].$el.setAttribute("class",r.join(" ")):a.children[u].$el.removeAttribute("class")}break;case"style":var o=c.compose(e,l);for(var i in a.children[u].$el.removeAttribute("style"),o)a.children[u].$el.style[i]=o[i];break;default:a.children[u].$el.setAttribute(s.split(":")[1],c.compose(e,l))}}();a.children[u]=this.patch(a.children[u],l,!0)}}return t?a:void 0}}},{key:"compose",value:function compose(raw,data){var payload,payload="(function(){var d=JSON.parse('".concat(JSON.stringify(data),"');");for(var key in data)payload+="var ".concat(key,"=d.").concat(key,";");return payload+="return ".concat(raw,"})()"),eval(payload)}},{key:"getAttributesObject",value:function(e){var t={};if(e.attributes){var r,n=_createForOfIteratorHelper(e.attributes);try{for(n.s();!(r=n.n()).done;){var o=r.value;t[o.name]=o.value}}catch(e){n.e(e)}finally{n.f()}}return t}}]),VDom}(),data=function(n,o,i){return new Proxy(n,{set:function(e,t,r){return e[t]=r,o(i,n),!0},deleteProperty:function(e,t){return delete e[t],o(i,n),!0}})},Lucia=function(){_inherits(n,VDom);var r=_createSuper(n);function n(e){var t;return _classCallCheck(this,n),_defineProperty(_assertThisInitialized(t=r.call(this,document.querySelector(e.el))),"data",void 0),t.data=data(e.data,t.patch.bind(_assertThisInitialized(t)),t.vdom),t.patch(t.vdom,t.data),t}return n}();return Lucia}();
+var Lucia=function(){"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(e){return!1}}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}function _createSuper(r){var n=_isNativeReflectConstruct();return function(){var e,t=_getPrototypeOf(r);return _possibleConstructorReturn(this,n?(e=_getPrototypeOf(this).constructor,Reflect.construct(t,arguments,e)):t.apply(this,arguments))}}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function _createForOfIteratorHelper(e,t){var r;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(r=_unsupportedIterableToArray(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,c=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return i=e.done,e},e:function(e){c=!0,a=e},f:function(){try{i||null==r.return||r.return()}finally{if(c)throw a}}}}var wrapIIFE=function(e){return"(function(){".concat(e,"})()")},createVariable=function(e){return"var {".concat(e.join(","),"}=data;")},createFunction=function(e){return"function ".concat(e.toString().replace(/this\./g,"data."))},compose=function compose(raw,data){var output=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],payload="",dataKeys=[];for(var key in data)"function"==typeof data[key]?payload+=createFunction(data[key]):dataKeys.push(key);return payload+=createVariable(dataKeys),payload+=output?"return ".concat(raw):"".concat(raw),eval(wrapIIFE(payload))},dataStore=function(n,o,a){return new Proxy(n,{get:function(e,t){return o(a,n),e[t]},set:function(e,t,r){return e[t]=r,o(a,n),!0},deleteProperty:function(e,t){return delete e[t],o(a,n),!0}})},parentElements=function(e){for(var t=[];e;){var r=e.nodeName.toLowerCase(),n=e.id?"#".concat(e.id):"",o=e.className?".".concat(e.className.replace(/\s+/g,".")):"";t.unshift({element:e,selector:r+n+o}),e=e.parentNode!==document&&e.parentNode}return t},nthElement=function(e){for(var t=e,r=0;null!==t.previousElementSibling;)t.nodeName===e.nodeName&&r++,t=t.previousElementSibling;return r},nthSelectorNeeded=function(e,t){var r=""===t?e:"".concat(t," > ").concat(e);return 1<document.querySelectorAll(r).length},buildPathString=function(e){var t=[];return e.forEach(function(e){nthSelectorNeeded(e.selector,t.join(" > "))&&(e.selector+=":nth-of-type(".concat(nthElement(e.element),")")),t.push(e.selector)}),t.join(" > ")},getSelector=function(e){if(!(e instanceof HTMLElement))throw new Error("Element must be of type `HTMLElement`.");return buildPathString(parentElements(e))},mapAttributes=function(e){var t={};if(e.attributes){var r,n=_createForOfIteratorHelper(e.attributes);try{for(n.s();!(r=n.n()).done;){var o=r.value;o.name.startsWith("l-")&&(t[o.name]=o.value)}}catch(e){n.e(e)}finally{n.f()}}return t},VDom=function(){function r(e,t){_classCallCheck(this,r),_defineProperty(this,"$el",void 0),_defineProperty(this,"vdom",void 0),_defineProperty(this,"data",void 0),this.$el=e,this.vdom=this.toVNode(this.$el),this.data=dataStore(t,this.patch.bind(this),this.vdom)}return _createClass(r,[{key:"element",value:function(e,t,r,n){return{$el:e,tagName:t,attributes:r||{},children:n||[]}}},{key:"textNode",value:function(e,t){return{$el:e,value:t}}},{key:"renderTemplate",value:function(e,t){for(var r=e.match(/{{\s*.+\s*}}/g)||[],n=0;n<r.length;n++){var o=r[n].replace(/(\{)\s*(\S+)\s*(?=})/gim,"$1$2"),a=o.substring(2,o.length-2).trim();e=a in t?e.replace(r[n],t[a]):e.replace(r[n],compose(a,t))}return e}},{key:"toVNode",value:function(e,t){for(var r=1<arguments.length&&void 0!==t&&t,n=[],o=e.childNodes,a=0;a<o.length;a++)switch(o[a].nodeType){case Node.TEXT_NODE:n.push(this.textNode(o[a],o[a].nodeValue));break;case Node.ELEMENT_NODE:n.push(this.element(getSelector(o[a]),o[a].tagName.toLowerCase(),mapAttributes(o[a]),this.toVNode(o[a],!0)))}return r?n:this.element(getSelector(e),e.tagName.toLowerCase(),mapAttributes(e),n)}},{key:"patch",value:function(c,u,e){var l=this,t=2<arguments.length&&void 0!==e&&e;if(c){if("string"==typeof c)return this.renderTemplate(c,u);for(var r,s=0;s<c.children.length;s++){if((null===(r=c.children[s].$el)||void 0===r?void 0:r.nodeType)===Node.TEXT_NODE){var n=this.renderTemplate(c.children[s].value,u);n!==c.children[s].$el.nodeValue&&(c.children[s].$el.nodeValue=n)}else{for(var o in c.children[s].attributes)!function(e){var t=c.children[s].attributes[e];if(document.querySelector(c.children[s].$el).removeAttribute(e),e.startsWith("l-on:")&&(document.querySelector(c.children[s].$el)["on".concat(e.split(":")[1])]=function(){return compose(t,l.data,!1)}),"l-if"===e&&(document.querySelector(c.children[s].$el).hidden=!compose(c.children[s].attributes[e],u)),"l-html"===e&&(void 0!==compose(c.children[s].attributes[e],u)?document.querySelector(c.children[s].$el).innerHTML=compose(c.children[s].attributes[e],u):document.querySelector(c.children[s].$el).innerHTML=c.children[s].attributes[e]),e.startsWith("l-bind:"))switch(e.split(":")[1]){case"class":var r=compose(t,u);if(r instanceof Array)document.querySelector(c.children[s].$el).setAttribute("class",r.join(" "));else{var n=[];for(var o in r)r[o]&&n.push(o);0<n.length?document.querySelector(c.children[s].$el).setAttribute("class",n.join(" ")):document.querySelector(c.children[s].$el).removeAttribute("class")}break;case"style":var a=compose(t,u);for(var i in document.querySelector(c.children[s].$el).removeAttribute("style"),a)document.querySelector(c.children[s].$el).style[i]=a[i];break;default:document.querySelector(c.children[s].$el).setAttribute(e.split(":")[1],compose(t,u))}}(o);c.children[s]=this.patch(c.children[s],u,!0)}}return t?c:void 0}}}]),r}(),Lucia=function(){_inherits(n,VDom);var r=_createSuper(n);function n(e){var t;return _classCallCheck(this,n),(t=r.call(this,document.querySelector(e.el||"body"),e.data||{})).patch(t.vdom,t.data),e.mounted&&e.mounted(),t}return n}();return Lucia}();

package.json

 {
   "name": "lucia",
-  "version": "0.0.3-alpha.1",
+  "version": "0.0.3-alpha.2",
   "description": "Tiny JavaScript library for web applications",
@@ -5,0 +5,0 @@ "main": "dist/lucia.js",

README.md

 <img src="https://github.com/luciadotjs/lucia/raw/master/.github/img/logo.svg" width="80px" align="right" />
 
-# [Lucia](https://lucia.js.org) &middot; ![NPM Version](https://img.shields.io/npm/v/lucia?color=%23C454FF&style=flat-square) ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?color=%23E676AA&style=flat-square) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=%23FA8A7C&style=flat-square)
+# [Lucia](https://lucia.js.org) &middot; ![Code Size](https://img.shields.io/bundlephobia/minzip/lucia?color=7460E1&style=flat-square) ![NPM Version](https://img.shields.io/npm/v/lucia?color=%23C454FF&style=flat-square) ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?color=%23E676AA&style=flat-square) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=%23FA8A7C&style=flat-square)
 
@@ -10,4 +10,4 @@ > Currently in heavy development (learning project). Do not use in production.
 - **Declarative:** Lucia makes it painless to create interactive UIs. Declarative views make your code more predictable, simpler to understand, and easier to debug.
-- **Reactive:** When a data point is changed, the Virtual DOM will react and will update and render the points in realtime.
-- **Data-Driven:** Instead of using traditional direct DOM manipulation, Lucia provides an interface to change data to mutate the DOM. 
+- **Reactive:** When a data point is changed, the loose Virtual DOM will react and will update and render the points in realtime.
+- **Data-Driven:** Instead of using traditional direct DOM manipulation, Lucia provides an interface to change data to mutate our loose Virtual DOM. 
 
@@ -99,3 +99,3 @@ ## Installation
 <div id="app">
-  <button l-on:click="alert(message)">{{ message }}</button>
+  <button l-on:click="announce()">{{ message }}</button>
 </div>
@@ -109,2 +109,5 @@ ```
     message: 'Hello world!',
+    announce() {
+      alert(this.message);
+    }
   },
@@ -138,2 +141,2 @@ });
 
-Lucia falls under the [MIT License](LICENSE.md).
+Lucia is [MIT Licensed](LICENSE.md).

No alert changes

Improved metrics

Total package byte prevSize

29271

increased by13.2%

Lines of code

458

increased by13.65%

Number of lines in readme file

138

increased by2.22%

No dependency changes