lucia - npm Package Compare versions

Comparing version 0.0.9 to 0.1.0

dist/lucia.js

@@ -246,5 +246,5 @@ (function (global, factory) {
 
-  var arrayEquals = function arrayEquals(first, second) {
-    return first instanceof Array && second instanceof Array && first.length === second.length && first.every(function (value, index) {
-      return value === second[index];
+  var arrayEquals = function arrayEquals(firstArray, secondArray) {
+    return firstArray instanceof Array && secondArray instanceof Array && firstArray.length === secondArray.length && firstArray.every(function (value, i) {
+      return value === secondArray[i];
     });
@@ -304,19 +304,19 @@ };
       case 'class':
-        var classview = computeProperties(value, view, true);
+        var classView = computeProperties(value, view, true);
 
-        if (typeof classview === 'string') {
-          return el.setAttribute('class', "".concat(el.className, " ").concat(classview).trim());
+        if (typeof classView === 'string') {
+          return el.setAttribute('class', "".concat(el.className, " ").concat(classView).trim());
         }
 
-        if (classview instanceof Array) {
-          return el.setAttribute('class', "".concat(el.className, " ").concat(classview.join(' ').trim()));
+        if (classView instanceof Array) {
+          return el.setAttribute('class', "".concat(el.className, " ").concat(classView.join(' ').trim()));
         } else {
           var classes = [];
 
-          for (var key in classview) {
-            if (classview[key]) classes.push(key);
+          for (var key in classView) {
+            if (classView[key]) classes.push(key);
           }
 
           if (classes.length > 0) {
-            return el.setAttribute('class', "".concat(el.className, " ").concat(classview.join(' ').trim()));
+            return el.setAttribute('class', "".concat(el.className, " ").concat(classView.join(' ').trim()));
           } else if (el.className.length.trim() > 0) {
@@ -330,7 +330,7 @@ return el.setAttribute('class', el.className);
       case 'style':
-        var styleview = computeProperties(value, view);
+        var styleView = computeProperties(value, view);
         el.removeAttribute('style');
 
-        for (var _key in styleview) {
-          el.style[_key] = styleview[_key];
+        for (var _key in styleView) {
+          el.style[_key] = styleView[_key];
         }
@@ -439,14 +439,14 @@
   // Adapted from https://github.com/zypox/dom-element-path
-  var parentElements = function parentElements(element) {
+  var parentElements = function parentElements(el) {
     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, '.')) : '';
+    while (el) {
+      var tagName = el.nodeName.toLowerCase();
+      var cssId = el.id ? "#".concat(el.id) : '';
+      var cssClass = el.className ? ".".concat(el.className.replace(/\s+/g, '.')) : '';
       parents.unshift({
-        element: element,
+        el: el,
         selector: tagName + cssId + cssClass
       });
-      element = element.parentNode !== document ? element.parentNode : false;
+      el = el.parentNode !== document ? el.parentNode : false;
     }
@@ -457,9 +457,9 @@
 
-  var nthElement = function nthElement(element) {
-    var el = element;
+  var nthElement = function nthElement(el) {
+    var element = el;
     var nth = 1;
 
-    while (el.previousElementSibling !== null) {
-      if (el.previousElementSibling.nodeName === element.nodeName) nth++;
-      el = el.previousElementSibling;
+    while (element.previousElementSibling !== null) {
+      if (element.previousElementSibling.nodeName === el.nodeName) nth++;
+      element = element.previousElementSibling;
     }
@@ -486,3 +486,3 @@
         if (nthSelectorNeeded(parent.selector, pathArr.join(' > '))) {
-          parent.selector += ":nth-of-type(".concat(nthElement(parent.element), ")");
+          parent.selector += ":nth-of-type(".concat(nthElement(parent.el), ")");
         }
@@ -518,3 +518,3 @@
 
-  var mapAttributes = function mapAttributes(el) {
+  var getProps = function getProps(el) {
     var attributes = {};
@@ -533,4 +533,4 @@ var directives = {};
 
-          if (name.startsWith('*')) {
-            directives[name.replace('*', '')] = value;
+          if (name.startsWith('l-')) {
+            directives[name.replace('l-', '')] = value;
           } else {
@@ -552,4 +552,4 @@ attributes[name] = value;
   };
-  var getSelector = function getSelector(element) {
-    return buildPathString(parentElements(element));
+  var getSelector = function getSelector(el) {
+    return buildPathString(parentElements(el));
   };
@@ -580,3 +580,3 @@
       value: function $createVNode(sel, _ref) {
-        var tagName = _ref.tagName,
+        var tag = _ref.tag,
             _ref$attributes = _ref.attributes,
@@ -590,3 +590,3 @@ attributes = _ref$attributes === void 0 ? {} : _ref$attributes,
           sel: sel,
-          tagName: tagName,
+          tag: tag,
           attributes: attributes,
@@ -618,8 +618,8 @@ directives: directives,
               case Node.ELEMENT_NODE:
-                var _mapAttributes2 = mapAttributes(targetChildNode),
-                    _attributes = _mapAttributes2.attributes,
-                    _directives = _mapAttributes2.directives;
+                var _getProps2 = getProps(targetChildNode),
+                    _attributes = _getProps2.attributes,
+                    _directives = _getProps2.directives;
 
                 children.push(this.$createVNode(getSelector(targetChildNode), {
-                  tagName: targetChildNode.tagName.toLowerCase(),
+                  tag: targetChildNode.tagName.toLowerCase(),
                   attributes: _attributes,
@@ -638,9 +638,9 @@ directives: _directives,
 
-        var _mapAttributes = mapAttributes(el),
-            attributes = _mapAttributes.attributes,
-            directives = _mapAttributes.directives;
+        var _getProps = getProps(el),
+            attributes = _getProps.attributes,
+            directives = _getProps.directives;
 
         if (recurse) return children;else {
           return this.$createVNode(getSelector(el), {
-            tagName: el.tagName.toLowerCase(),
+            tag: el.tagName.toLowerCase(),
             attributes: attributes,
@@ -695,7 +695,2 @@ directives: directives,
                   });
-
-                  try {
-                    el.removeAttribute("*".concat(name));
-                  } catch (err) {}
-
                   break;
@@ -737,3 +732,14 @@ }
   };
+  document.addEventListener('DOMContentLoaded', function () {
+    var components = Array.from(document.querySelectorAll('[l-use]'));
 
+    for (var _i = 0, _components = components; _i < _components.length; _i++) {
+      var component = _components[_i];
+      var options = component.getAttribute('l-use');
+      if (options === null) return;
+      var app = createApp(eval(options));
+      app.mount(component);
+    }
+  });
+
   exports.Lucia = Lucia;
@@ -740,0 +746,0 @@ exports.createApp = createApp;

dist/lucia.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Lucia={})}(this,(function(exports){function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}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 ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach((function(t){_defineProperty(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return 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(e){var t=_isNativeReflectConstruct();return function(){var r,n=_getPrototypeOf(e);if(t){var o=_getPrototypeOf(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return _possibleConstructorReturn(this,r)}}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,c=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return a=e.done,e},e:function(e){c=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(c)throw i}}}}var arrayEquals=function(e,t){return e instanceof Array&&t instanceof Array&&e.length===t.length&&e.every((function(e,r){return e===t[r]}))},observer=function(e,t,r){var n={get:function(e,t){return"object"===_typeof(e[t])&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(n,o,i){return n[o]=i,t(r,"length"===o?Object.keys(e).filter((function(t){return e[t]instanceof Array&&arrayEquals(n,e[t])})):[o]),!0},deleteProperty:function(n,o){return delete n[o],t(r,"length"===o?Object.keys(e).filter((function(t){return e[t]instanceof Array})):[o]),!0}};return new Proxy(e,n)},wrapScope=function(e){return"(function(){with(_){".concat(e,"}})()")},computeProperties=function computeProperties(expression,_){var returnable=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return eval(wrapScope(returnable?"return ".concat(expression):expression))},bindDirective=function(e,t,r,n){switch(t.split(":")[1]){case"class":var o=computeProperties(r,n,!0);if("string"==typeof o)return e.setAttribute("class","".concat(e.className," ").concat(o).trim());if(o instanceof Array)return e.setAttribute("class","".concat(e.className," ").concat(o.join(" ").trim()));var i=[];for(var a in o)o[a]&&i.push(a);return i.length>0?e.setAttribute("class","".concat(e.className," ").concat(o.join(" ").trim())):e.className.length.trim()>0?e.setAttribute("class",e.className):e.removeAttribute("class");case"style":var c=computeProperties(r,n);for(var u in e.removeAttribute("style"),c)e.style[u]=c[u];break;default:var s=computeProperties(r,n);s?e.setAttribute(t.split(":")[1],s):e.removeAttribute(t.split(":")[1])}},joinDirective=function(e,t,r,n){var o=r.split("by "),i=computeProperties(o[0],n);e.innerHTML=void 0!==i?i.join(o[1]||""):o[0].join(o[1]||"")},htmlDirective=function(e,t,r,n){var o=computeProperties(r,n);e.innerHTML=void 0!==o?o:r},ifDirective=function(e,t,r,n){e.hidden=!computeProperties(r,n)},modelDirective=function(e,t,r,n){e.value=n[r],e.oninput=function(){var t="number"==typeof n[r]&&!isNaN(e.value),o="boolean"==typeof n[r]&&("true"===e.value||"false"===e.value),i=!(null!==n[r]&&void 0!==n[r]||"null"!==e.value&&"undefined"!==e.value);t?n[r]=Number(e.value).toPrecision():o?n[r]=Boolean(e.value):i?"null"===e.value?n[r]=null:n[r]=void 0:n[r]=e.value}},onDirective=function(e,t,r,n){var o=t.split("."),i=o[0].split(":")[1],a=o[1]||null;e["on".concat(i)]=function(e){"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),computeProperties(r,n,!0)}},textDirective=function(e,t,r,n){var o=computeProperties(r,n);e.textContent=void 0!==o?o:r},renderDirective=function(e){var t=e.el,r=e.name,n=e.value,o=e.view;({bind:bindDirective,join:joinDirective,html:htmlDirective,if:ifDirective,model:modelDirective,on:onDirective,text:textDirective})[r.split(":")[0]](t,r,n,o)},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=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&r++,t=t.previousElementSibling;return r},nthSelectorNeeded=function(e,t){var r=""===t?e:"".concat(t," > ").concat(e);return document.querySelectorAll(r).length>1},buildPathString=function(e){var t,r=[],n=_createForOfIteratorHelper(e);try{for(n.s();!(t=n.n()).done;){var o=t.value;nthSelectorNeeded(o.selector,r.join(" > "))&&(o.selector+=":nth-of-type(".concat(nthElement(o.element),")")),r.push(o.selector)}}catch(e){n.e(e)}finally{n.f()}var i,a=_createForOfIteratorHelper(r);try{for(a.s();!(i=a.n()).done;){var c=i.value;c.includes("#")&&(r=r.slice(r.indexOf(c)))}}catch(e){a.e(e)}finally{a.f()}return r.join(" > ")},mapAttributes=function(e){var t={},r={};if(e.attributes||e.directives){var n,o=_createForOfIteratorHelper(e.attributes);try{for(o.s();!(n=o.n()).done;){var i=n.value,a=i.name,c=i.value;a.startsWith("*")?r[a.replace("*","")]=c:t[a]=c}}catch(e){o.e(e)}finally{o.f()}}return{attributes:t,directives:r}},getSelector=function(e){return buildPathString(parentElements(e))},VDom=function(){function e(t){_classCallCheck(this,e),_defineProperty(this,"$vdom",void 0),_defineProperty(this,"$view",void 0),this.$vdom=null,this.$view=t}return _createClass(e,[{key:"mount",value:function(e){return this.$vdom=this.$buildVNodeTree("string"==typeof e?document.querySelector(e):e),this.$view=observer(this.$view,this.$patch.bind(this),this.$vdom),this.$patch(this.$vdom,Object.keys(this.$view)),this.$view}},{key:"$createVNode",value:function(e,t){var r=t.tagName,n=t.attributes,o=void 0===n?{}:n,i=t.directives,a=void 0===i?{}:i,c=t.children;return{sel:e,tagName:r,attributes:o,directives:a,children:void 0===c?[]:c}}},{key:"$buildVNodeTree",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!e)throw new Error("Please provide a Element");var r,n=[],o=Array.prototype.slice.call(e.childNodes),i=_createForOfIteratorHelper(o);try{for(i.s();!(r=i.n()).done;){var a=r.value;switch(a.nodeType){case Node.TEXT_NODE:n.push(a.nodeValue);break;case Node.ELEMENT_NODE:var c=mapAttributes(a),u=c.attributes,s=c.directives;n.push(this.$createVNode(getSelector(a),{tagName:a.tagName.toLowerCase(),attributes:u,directives:s,children:this.$buildVNodeTree(a,!0)}))}}}catch(e){i.e(e)}finally{i.f()}var l=mapAttributes(e),f=l.attributes,p=l.directives;return t?n:this.$createVNode(getSelector(e),{tagName:e.tagName.toLowerCase(),attributes:f,directives:p,children:n})}},{key:"$patch",value:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e){for(var n=_objectSpread2({},this.$view),o=0;o<e.children.length;o++){var i=e.children[o],a=i,c=a.sel,u=a.directives,s=a.attributes;if("string"!=typeof i){for(var l in u){var f,p=u[l],v=_createForOfIteratorHelper(t);try{for(v.s();!(f=v.n()).done;){var y=f.value,d=p.toString().includes(y),b=!1;for(var h in n)if("function"==typeof n[h]&&n[h].toString().includes("this.".concat(h))){b=!0;break}if(d||b){var m=s.id?document.getElementById(s.id):document.querySelector(c);renderDirective({el:m,name:l,value:p,view:this.$view});try{m.removeAttribute("*".concat(l))}catch(e){}break}}}catch(e){v.e(e)}finally{v.f()}}i=this.$patch(i,t,!0)}}return r?e:void 0}}}]),e}(),Lucia=function(e){_inherits(r,e);var t=_createSuper(r);function r(e){return _classCallCheck(this,r),t.call(this,e||{})}return r}(VDom),createApp=function(e){return new Lucia(e)};exports.Lucia=Lucia,exports.createApp=createApp,Object.defineProperty(exports,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).Lucia={})}(this,(function(exports){function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}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 ownKeys(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function _objectSpread2(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach((function(t){_defineProperty(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return 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(e){var t=_isNativeReflectConstruct();return function(){var r,n=_getPrototypeOf(e);if(t){var o=_getPrototypeOf(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return _possibleConstructorReturn(this,r)}}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,c=!0,a=!1;return{s:function(){r=e[Symbol.iterator]()},n:function(){var e=r.next();return c=e.done,e},e:function(e){a=!0,i=e},f:function(){try{c||null==r.return||r.return()}finally{if(a)throw i}}}}var arrayEquals=function(e,t){return e instanceof Array&&t instanceof Array&&e.length===t.length&&e.every((function(e,r){return e===t[r]}))},observer=function(e,t,r){var n={get:function(e,t){return"object"===_typeof(e[t])&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(n,o,i){return n[o]=i,t(r,"length"===o?Object.keys(e).filter((function(t){return e[t]instanceof Array&&arrayEquals(n,e[t])})):[o]),!0},deleteProperty:function(n,o){return delete n[o],t(r,"length"===o?Object.keys(e).filter((function(t){return e[t]instanceof Array})):[o]),!0}};return new Proxy(e,n)},wrapScope=function(e){return"(function(){with(_){".concat(e,"}})()")},computeProperties=function computeProperties(expression,_){var returnable=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return eval(wrapScope(returnable?"return ".concat(expression):expression))},bindDirective=function(e,t,r,n){switch(t.split(":")[1]){case"class":var o=computeProperties(r,n,!0);if("string"==typeof o)return e.setAttribute("class","".concat(e.className," ").concat(o).trim());if(o instanceof Array)return e.setAttribute("class","".concat(e.className," ").concat(o.join(" ").trim()));var i=[];for(var c in o)o[c]&&i.push(c);return i.length>0?e.setAttribute("class","".concat(e.className," ").concat(o.join(" ").trim())):e.className.length.trim()>0?e.setAttribute("class",e.className):e.removeAttribute("class");case"style":var a=computeProperties(r,n);for(var u in e.removeAttribute("style"),a)e.style[u]=a[u];break;default:var s=computeProperties(r,n);s?e.setAttribute(t.split(":")[1],s):e.removeAttribute(t.split(":")[1])}},joinDirective=function(e,t,r,n){var o=r.split("by "),i=computeProperties(o[0],n);e.innerHTML=void 0!==i?i.join(o[1]||""):o[0].join(o[1]||"")},htmlDirective=function(e,t,r,n){var o=computeProperties(r,n);e.innerHTML=void 0!==o?o:r},ifDirective=function(e,t,r,n){e.hidden=!computeProperties(r,n)},modelDirective=function(e,t,r,n){e.value=n[r],e.oninput=function(){var t="number"==typeof n[r]&&!isNaN(e.value),o="boolean"==typeof n[r]&&("true"===e.value||"false"===e.value),i=!(null!==n[r]&&void 0!==n[r]||"null"!==e.value&&"undefined"!==e.value);t?n[r]=Number(e.value).toPrecision():o?n[r]=Boolean(e.value):i?"null"===e.value?n[r]=null:n[r]=void 0:n[r]=e.value}},onDirective=function(e,t,r,n){var o=t.split("."),i=o[0].split(":")[1],c=o[1]||null;e["on".concat(i)]=function(e){"prevent"===c&&e.preventDefault(),"stop"===c&&e.stopPropagation(),computeProperties(r,n,!0)}},textDirective=function(e,t,r,n){var o=computeProperties(r,n);e.textContent=void 0!==o?o:r},renderDirective=function(e){var t=e.el,r=e.name,n=e.value,o=e.view;({bind:bindDirective,join:joinDirective,html:htmlDirective,if:ifDirective,model:modelDirective,on:onDirective,text:textDirective})[r.split(":")[0]](t,r,n,o)},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({el:e,selector:r+n+o}),e=e.parentNode!==document&&e.parentNode}return t},nthElement=function(e){for(var t=e,r=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&r++,t=t.previousElementSibling;return r},nthSelectorNeeded=function(e,t){var r=""===t?e:"".concat(t," > ").concat(e);return document.querySelectorAll(r).length>1},buildPathString=function(e){var t,r=[],n=_createForOfIteratorHelper(e);try{for(n.s();!(t=n.n()).done;){var o=t.value;nthSelectorNeeded(o.selector,r.join(" > "))&&(o.selector+=":nth-of-type(".concat(nthElement(o.el),")")),r.push(o.selector)}}catch(e){n.e(e)}finally{n.f()}var i,c=_createForOfIteratorHelper(r);try{for(c.s();!(i=c.n()).done;){var a=i.value;a.includes("#")&&(r=r.slice(r.indexOf(a)))}}catch(e){c.e(e)}finally{c.f()}return r.join(" > ")},getProps=function(e){var t={},r={};if(e.attributes||e.directives){var n,o=_createForOfIteratorHelper(e.attributes);try{for(o.s();!(n=o.n()).done;){var i=n.value,c=i.name,a=i.value;c.startsWith("l-")?r[c.replace("l-","")]=a:t[c]=a}}catch(e){o.e(e)}finally{o.f()}}return{attributes:t,directives:r}},getSelector=function(e){return buildPathString(parentElements(e))},VDom=function(){function e(t){_classCallCheck(this,e),_defineProperty(this,"$vdom",void 0),_defineProperty(this,"$view",void 0),this.$vdom=null,this.$view=t}return _createClass(e,[{key:"mount",value:function(e){return this.$vdom=this.$buildVNodeTree("string"==typeof e?document.querySelector(e):e),this.$view=observer(this.$view,this.$patch.bind(this),this.$vdom),this.$patch(this.$vdom,Object.keys(this.$view)),this.$view}},{key:"$createVNode",value:function(e,t){var r=t.tag,n=t.attributes,o=void 0===n?{}:n,i=t.directives,c=void 0===i?{}:i,a=t.children;return{sel:e,tag:r,attributes:o,directives:c,children:void 0===a?[]:a}}},{key:"$buildVNodeTree",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(!e)throw new Error("Please provide a Element");var r,n=[],o=Array.prototype.slice.call(e.childNodes),i=_createForOfIteratorHelper(o);try{for(i.s();!(r=i.n()).done;){var c=r.value;switch(c.nodeType){case Node.TEXT_NODE:n.push(c.nodeValue);break;case Node.ELEMENT_NODE:var a=getProps(c),u=a.attributes,s=a.directives;n.push(this.$createVNode(getSelector(c),{tag:c.tagName.toLowerCase(),attributes:u,directives:s,children:this.$buildVNodeTree(c,!0)}))}}}catch(e){i.e(e)}finally{i.f()}var l=getProps(e),f=l.attributes,p=l.directives;return t?n:this.$createVNode(getSelector(e),{tag:e.tagName.toLowerCase(),attributes:f,directives:p,children:n})}},{key:"$patch",value:function(e,t){var r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e){for(var n=_objectSpread2({},this.$view),o=0;o<e.children.length;o++){var i=e.children[o],c=i,a=c.sel,u=c.directives,s=c.attributes;if("string"!=typeof i){for(var l in u){var f,p=u[l],v=_createForOfIteratorHelper(t);try{for(v.s();!(f=v.n()).done;){var d=f.value,y=p.toString().includes(d),h=!1;for(var b in n)if("function"==typeof n[b]&&n[b].toString().includes("this.".concat(b))){h=!0;break}if(y||h){var m=s.id?document.getElementById(s.id):document.querySelector(a);renderDirective({el:m,name:l,value:p,view:this.$view});break}}}catch(e){v.e(e)}finally{v.f()}}i=this.$patch(i,t,!0)}}return r?e:void 0}}}]),e}(),Lucia=function(e){_inherits(r,e);var t=_createSuper(r);function r(e){return _classCallCheck(this,r),t.call(this,e||{})}return r}(VDom),createApp=function(e){return new Lucia(e)};document.addEventListener("DOMContentLoaded",(function(){for(var components=Array.from(document.querySelectorAll("[l-use]")),_i=0,_components=components;_i<_components.length;_i++){var component=_components[_i],options=component.getAttribute("l-use");if(null===options)return;var app=createApp(eval(options));app.mount(component)}})),exports.Lucia=Lucia,exports.createApp=createApp,Object.defineProperty(exports,"__esModule",{value:!0})}));

package.json

 {
   "name": "lucia",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Tiny library for tiny web apps.",
@@ -36,3 +36,2 @@ "main": "dist/lucia.js",
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
     "@babel/core": "^7.11.4",
@@ -47,5 +46,4 @@ "@babel/plugin-proposal-class-properties": "^7.10.4",
     "rollup": "2.15.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "typescript": "3.9.5"
+    "rollup-plugin-terser": "^7.0.2"
   }
 }

README.md

@@ -7,7 +7,7 @@ [![Lucia](https://raw.githubusercontent.com/aidenybai/lucia/master/.github/img/banner.svg)](https://lucia.js.org)
 
-Lucia is a tiny JavaScript (UMD compatible) library for small SPAs and web apps with a API similar to Vue. Some features of Lucia are:
+Lucia is a tiny JavaScript (UMD compatible) library as a drop-in replacement for jQuery and vanilla JavaScript web apps. Some features of Lucia are:
 
-- **Declarative:** Lucia provides a straightforward API to create declarative views, allowing predictible and easy development.
-- **Reactive:** When the view is changed, the Virtual DOM will automatically react and will update and render the new view in realtime.
-- **Lightweight:** Lucia is extremely light (~3kb min+brotli) and performant as it does not VNode diff, renders directives only if necessary by skipping static notes, and relies only on selectors.
+- **Declarative:** Lucia provides a declarative API similar to Vue to create views, making development predictible and intiuitive through markup-centric code.
+- **Reactive:** When the view is changed, the interal reference Virtual DOM will automatically react and will update and render the new view in realtime.
+- **Lightweight:** Lucia is extremely light (~3kb min+brotli) and performant as it does not use a tranditional VDom, rather it renders directives only if necessary by skipping static nodes through selectors.
 
@@ -33,4 +33,4 @@ ## Installation
 ```html
-<div id="app">
-  <button *on:click="increment()" *text="count"></button>
+<div l-use="ClickerGame()">
+  <button l-on:click="addPoints(1)" l-text="points"></button>
 </div>
@@ -40,10 +40,11 @@ ```
 ```js
-const ClickerGame = {
-  count: localStorage.count || 0,
-  increment() {
-    localStorage.count = ++this.count;
-  },
-};
-
-Lucia.createApp(ClickerGame).mount('#app');
+function ClickerGame() {
+  return {
+    points: localStorage.points || 0,
+    addPoints(amount = 1) {
+      this.points += amount;
+      localStorage.points = this.points;
+    },
+  };
+}
 ```
@@ -53,10 +54,33 @@
 
+Lucia relies on directives in markup to perform functions:
+
+| Directive                          | Description                                                                             |
+| ---------------------------------- | --------------------------------------------------------------------------------------- |
+| [`l-use`](#Creating-a-Component)   | Declares a new component scope.                                                         |
+| [`l-text`](#Declarative-Rendering) | Works similarly to `l-bind`, but will update the `textContent` of an element.           |
+| [`l-html`](#Declarative-Rendering) | Works similarly to `l-bind`, but will update the `innerHTML` of an element.             |
+| [`l-if`](#Conditionals)            | Toggles `display: none;` on the element depending on expression (true or false).        |
+| [`l-on`](#Event-Handlers)          | Attaches an event listener to the element. Executes JavaScript expression when emitted. |
+| [`l-bind`](#Attribute-Binding)     | Sets the value of an attribute to the result of a JavaScript expression.                |
+| [`l-join`](#List-Rendering)        | Create new DOM nodes for each item in an array.                                         |
+| [`l-model`](#Form-Input-Bindings)  | Adds "two-way data binding" to an element. Keeps input element in sync with view data.  |
+
+### Creating a Component
+
+Lucia allows us to create component scopes. It tells the library to initialize a new component with the following data object.
+
+```html
+<div l-use="{ message: 'Hello World' }">
+  <p l-text="message"></p>
+</div>
+```
+
 ### Declarative Rendering
 
-At the core of Lucia is a system that enables us to declaratively render data to the DOM using the straightforward `*text` directive:
+At the core of Lucia is a system that enables us to declaratively render data to the DOM using the straightforward `l-text` and `l-html` directives:
 
 ```html
-<div id="app">
-  <p *text="message"></p>
-  <p *text="message === 'Hello World!'"></p>
+<div l-use="DeclarativeRendering()">
+  <p l-text="message"></p>
+  <p l-html="markupMessage"></p>
 </div>
@@ -66,5 +90,8 @@ ```
 ```js
-Lucia.createApp({
-  message: 'Hello World!',
-}).mount('#app');
+function DeclarativeRendering() {
+  return {
+    message: 'Hello World!',
+    markupMessage: '<span>Hello World with Markup!</span>',
+  };
+}
 ```
@@ -77,5 +104,5 @@
 ```html
-<div id="app">
-  <button *if="!show">You can't see me</button>
-  <button *if="show">You can see me</button>
+<div l-use="Conditionals()">
+  <button l-if="!show">You can't see me</button>
+  <button l-if="show">You can see me</button>
 </div>
@@ -85,5 +112,5 @@ ```
 ```js
-Lucia.createApp({
-  show: true,
-}).mount('#app');
+function Conditionals() {
+  return { show: true };
+}
 ```
@@ -93,7 +120,7 @@
 
-To let users interact with your app, we can use the `*on` directive to attach event listeners that invoke methods on our Lucia instances:
+To let users interact with your app, we can use the `l-on` directive to attach event listeners that invoke methods on our Lucia instances:
 
 ```html
-<div id="app">
-  <button *on:click="announce()" *text="message"></button>
+<div l-use="EventHandlers()">
+  <button l-on:click="announce()" l-text="message"></button>
 </div>
@@ -103,8 +130,10 @@ ```
 ```js
-Lucia.createApp({
-  message: 'Hello world!',
-  announce() {
-    alert(this.message);
-  },
-}).mount('#app');
+function EventHandlers() {
+  return {
+    message: 'Hello world!',
+    announce() {
+      alert(this.message);
+    },
+  };
+}
 ```
@@ -114,8 +143,8 @@
 
-In addition to text interpolation, we can also bind element attributes using the `*bind` directive:
+In addition to text interpolation, we can also bind element attributes using the `l-bind` directive:
 
 ```html
-<div id="app">
-  <h1 *bind:class="{ hello: show }">Classes are cool</h1>
-  <h1 *bind:style="color">Styles are sassy</h1>
+<div l-use="AttributeBinding()">
+  <h1 l-bind:class="{ hello: show }">Classes are cool</h1>
+  <h1 l-bind:style="color">Styles are sassy</h1>
 </div>
@@ -125,7 +154,8 @@ ```
 ```js
-Lucia.createApp({
-  show: true,
-  // You can also reference data vs inputing an object in the directive itself
-  color: { color: 'purple' },
-}).mount('#app');
+function AttributeBinding() {
+  return {
+    show: true,
+    color: { color: 'purple' },
+  };
+}
 ```
@@ -135,7 +165,7 @@
 
-We can also use the `*join` directive to render a list of items based on an array. Note that performance will be affected if using array mutators.
+We can also use the `l-join` directive to render a list of items based on an array. Note that performance will be affected if using array mutators.
 
 ```html
-<div id="app">
-  <p *join="fruits by , "></p>
+<div l-use="ListRendering()">
+  <p l-join="fruits by , "></p>
 </div>
@@ -145,5 +175,7 @@ ```
 ```js
-Lucia.createApp({
-  fruits: ['apple', 'orange', 'banana'],
-}).mount('#app');
+function ListRendering() {
+  return {
+    fruits: ['apple', 'orange', 'banana'],
+  };
+}
 ```
@@ -153,8 +185,8 @@
 
-You can use the `*model` directive to create two-way data bindings on form `input`, `textarea`, and `select` elements.
+You can use the `l-model` directive to create two-way data bindings on form `input`, `textarea`, and `select` elements.
 
 ```html
-<div id="app">
-  <input *model="message" />
-  <p *text="message"></p>
+<div l-use="FormInputBindings()">
+  <input l-model="message" />
+  <p l-text="message"></p>
 </div>
@@ -164,5 +196,7 @@ ```
 ```js
-Lucia.createApp({
-  message: 'Nothing submitted yet',
-}).mount('#app');
+function FormInputBindings() {
+  return {
+    message: 'Nothing submitted yet',
+  };
+}
 ```
@@ -169,0 +203,0 @@

No alert changes

Improved metrics

Total package byte prevSize

40764

increased by5.92%

Dev dependency count

10

decreased by-16.67%

Lines of code

654

increased by1.24%

Number of lines in readme file

192

increased by21.52%

No dependency changes