lucia - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/lucia.js

@@ -291,9 +291,5 @@ (function (global, factory) {
 
-  var wrapScope = function wrapScope(expression) {
-    return "(function(){with(_){".concat(expression, "}})()");
-  };
-
-  var computeProperties = function computeProperties(expression, _) {
+  var computeProperties = function computeProperties(expression, view) {
     var returnable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    return eval(wrapScope(returnable ? "return ".concat(expression) : expression));
+    return new Function("with(this) {".concat(returnable ? "return ".concat(expression) : expression, "}")).bind(view)();
   };
@@ -304,3 +300,3 @@
       case 'class':
-        var classView = computeProperties(value, view, true);
+        var classView = computeProperties(value, view);
 
@@ -402,7 +398,11 @@ if (typeof classView === 'string') {
 
-    el["on".concat(eventName)] = function ($event) {
-      if (eventProp === 'prevent') $event.preventDefault();
-      if (eventProp === 'stop') $event.stopPropagation();
-      computeProperties(value, view, true);
-    };
+    if (eventName === 'effect') {
+      computeProperties(value, view);
+    } else {
+      el["on".concat(eventName)] = function ($event) {
+        if (eventProp === 'prevent') $event.preventDefault();
+        if (eventProp === 'stop') $event.stopPropagation();
+        computeProperties(value, view);
+      };
+    }
   };
@@ -577,2 +577,8 @@
     }, {
+      key: "unmount",
+      value: function unmount() {
+        this.$vdom = null;
+        this.$view = null;
+      }
+    }, {
       key: "$createVNode",
@@ -663,38 +669,34 @@ value: function $createVNode(sel, _ref) {
           if (typeof vnode === 'string') continue;
+          var affectedDirectives = [];
 
-          for (var name in directives) {
+          var _loop = function _loop(name) {
             var value = directives[name];
 
-            var _iterator2 = _createForOfIteratorHelper(keys),
-                _step2;
+            if (keys.some(function (key) {
+              return value.toString().includes(key);
+            }) || Object.keys(view).some(function (key) {
+              return typeof view[key] === 'function' && view[key].toString().includes("this.".concat(key));
+            })) {
+              affectedDirectives.push(name);
+            }
+          };
 
-            try {
-              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                var key = _step2.value;
-                var hasKey = value.toString().includes(key);
-                var hasKeyInFunction = false;
+          for (var name in directives) {
+            _loop(name);
+          }
 
-                for (var globalKey in view) {
-                  if (typeof view[globalKey] === 'function' && view[globalKey].toString().includes("this.".concat(globalKey))) {
-                    hasKeyInFunction = true;
-                    break;
-                  }
-                }
+          if (affectedDirectives.length > 0 && Object.keys(directives).includes('on:effect')) {
+            affectedDirectives.push('on:effect'); // Probably should make this more efficient in the future
+          }
 
-                if (hasKey || hasKeyInFunction) {
-                  var el = attributes.id ? document.getElementById(attributes.id) : document.querySelector(sel);
-                  renderDirective({
-                    el: el,
-                    name: name,
-                    value: value,
-                    view: this.$view
-                  });
-                  break;
-                }
-              }
-            } catch (err) {
-              _iterator2.e(err);
-            } finally {
-              _iterator2.f();
-            }
+          for (var _i = 0, _affectedDirectives = affectedDirectives; _i < _affectedDirectives.length; _i++) {
+            var _name = _affectedDirectives[_i];
+            var value = directives[_name];
+            var el = attributes.id ? document.getElementById(attributes.id) : document.querySelector(sel);
+            renderDirective({
+              el: el,
+              name: _name,
+              value: value,
+              view: this.$view
+            });
           }
@@ -712,9 +714,9 @@
 
-  var Lucia = /*#__PURE__*/function (_VDom) {
-    _inherits(Lucia, _VDom);
+  var App = /*#__PURE__*/function (_VDom) {
+    _inherits(App, _VDom);
 
-    var _super = _createSuper(Lucia);
+    var _super = _createSuper(App);
 
-    function Lucia(options) {
-      _classCallCheck(this, Lucia);
+    function App(options) {
+      _classCallCheck(this, App);
 
@@ -724,22 +726,25 @@ return _super.call(this, options || {});
 
-    return Lucia;
+    return App;
   }(VDom);
   var createApp = function createApp(options) {
-    return new Lucia(options);
+    return new App(options);
   };
+  var links = {};
   document.addEventListener('DOMContentLoaded', function () {
-    var components = Array.from(document.querySelectorAll('[l-use]'));
-    var scopedEval = eval;
+    var elements = 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');
+    for (var _i = 0, _elements = elements; _i < _elements.length; _i++) {
+      var el = _elements[_i];
+      var options = el.getAttribute('l-use');
       if (options === null) return;
-      var app = createApp(scopedEval("(".concat(options, ")")));
-      app.mount(component);
+      var app = createApp(new Function("return (".concat(options, ")"))());
+      var link = el.getAttribute('l-link');
+      if (link) links[link] = app;
+      app.mount(el);
     }
   });
 
-  exports.Lucia = Lucia;
+  exports.App = App;
   exports.createApp = createApp;
+  exports.links = links;
 
@@ -746,0 +751,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

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&&"string"==typeof e.className&&(o=".".concat(e.className.replace(/\s+/g,".").replace(/[:*+?^${}()|[\]\\]/gi,"\\$&"))),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,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(" > ")},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,a=i.name,c=i.value;a.startsWith("l-")?r[a.replace("l-","")]=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.tag,n=t.attributes,o=void 0===n?{}:n,i=t.directives,a=void 0===i?{}:i,c=t.children;return{sel:e,tag: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=getProps(a),u=c.attributes,s=c.directives;n.push(this.$createVNode(getSelector(a),{tag:a.tagName.toLowerCase(),attributes:u,directives:s,children:this.$buildVNodeTree(a,!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],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 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(c);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 e=Array.from(document.querySelectorAll("[l-use]")),t=eval,r=0,n=e;r<n.length;r++){var o=n[r],i=o.getAttribute("l-use");if(null===i)return;createApp(t("(".concat(i,")"))).mount(o)}})),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(e){function t(e){return(t="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 n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e){return(u=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function s(e){var t=function(){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}}();return function(){var n,r=u(e);if(t){var o=u(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return l(this,n)}}function f(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function v(e,t){var n;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(e,t):void 0}}(e))||t&&e&&"number"==typeof e.length){n&&(e=n);var r=0,o=function(){};return{s:o,n:function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}},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,u=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return c=e.done,e},e:function(e){u=!0,i=e},f:function(){try{c||null==n.return||n.return()}finally{if(u)throw i}}}}var d=function(e,n,r){var o={get:function(e,n){return"object"===t(e[n])&&null!==e[n]?new Proxy(e[n],o):e[n]},set:function(t,o,i){return t[o]=i,n(r,"length"===o?Object.keys(e).filter((function(n){return e[n]instanceof Array&&(r=t,o=e[n],r instanceof Array&&o instanceof Array&&r.length===o.length&&r.every((function(e,t){return e===o[t]})));var r,o})):[o]),!0},deleteProperty:function(t,o){return delete t[o],n(r,"length"===o?Object.keys(e).filter((function(t){return e[t]instanceof Array})):[o]),!0}};return new Proxy(e,o)},p=function(e,t){var n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return new Function("with(this) {".concat(n?"return ".concat(e):e,"}")).bind(t)()},y=function(e,t,n,r){switch(t.split(":")[1]){case"class":var o=p(n,r);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 u=p(n,r);for(var a in e.removeAttribute("style"),u)e.style[a]=u[a];break;default:var l=p(n,r);l?e.setAttribute(t.split(":")[1],l):e.removeAttribute(t.split(":")[1])}},h=function(e,t,n,r){var o=n.split("by "),i=p(o[0],r);e.innerHTML=void 0!==i?i.join(o[1]||""):o[0].join(o[1]||"")},b=function(e,t,n,r){var o=p(n,r);e.innerHTML=void 0!==o?o:n},m=function(e,t,n,r){e.hidden=!p(n,r)},g=function(e,t,n,r){e.value=r[n],e.oninput=function(){var t="number"==typeof r[n]&&!isNaN(e.value),o="boolean"==typeof r[n]&&("true"===e.value||"false"===e.value),i=!(null!==r[n]&&void 0!==r[n]||"null"!==e.value&&"undefined"!==e.value);t?r[n]=Number(e.value).toPrecision():o?r[n]=Boolean(e.value):i?"null"===e.value?r[n]=null:r[n]=void 0:r[n]=e.value}},w=function(e,t,n,r){var o=t.split("."),i=o[0].split(":")[1],c=o[1]||null;"effect"===i?p(n,r):e["on".concat(i)]=function(e){"prevent"===c&&e.preventDefault(),"stop"===c&&e.stopPropagation(),p(n,r)}},O=function(e,t,n,r){var o=p(n,r);e.textContent=void 0!==o?o:n},j=function(e){var t=e.el,n=e.name,r=e.value,o=e.view;({bind:y,join:h,html:b,if:m,model:g,on:w,text:O})[n.split(":")[0]](t,n,r,o)},N=function(e){for(var t=e,n=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&n++,t=t.previousElementSibling;return n},$=function(e,t){var n=""===t?e:"".concat(t," > ").concat(e);return document.querySelectorAll(n).length>1},A=function(e){var t={},n={};if(e.attributes||e.directives){var r,o=v(e.attributes);try{for(o.s();!(r=o.n()).done;){var i=r.value,c=i.name,u=i.value;c.startsWith("l-")?n[c.replace("l-","")]=u:t[c]=u}}catch(e){o.e(e)}finally{o.f()}}return{attributes:t,directives:n}},S=function(e){return function(e){var t,n=[],r=v(e);try{for(r.s();!(t=r.n()).done;){var o=t.value;$(o.selector,n.join(" > "))&&(o.selector+=":nth-of-type(".concat(N(o.el),")")),n.push(o.selector)}}catch(e){r.e(e)}finally{r.f()}var i,c=v(n);try{for(c.s();!(i=c.n()).done;){var u=i.value;u.includes("#")&&(n=n.slice(n.indexOf(u)))}}catch(e){c.e(e)}finally{c.f()}return n.join(" > ")}(function(e){for(var t=[];e;){var n=e.nodeName.toLowerCase(),r=e.id?"#".concat(e.id):"",o="";e.className&&"string"==typeof e.className&&(o=".".concat(e.className.replace(/\s+/g,".").replace(/[:*+?^${}()|[\]\\]/gi,"\\$&"))),t.unshift({el:e,selector:n+r+o}),e=e.parentNode!==document&&e.parentNode}return t}(e))},P=function(e){!function(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&&a(e,t)}(r,e);var t=s(r);function r(e){return n(this,r),t.call(this,e||{})}return r}(function(){function e(t){n(this,e),o(this,"$vdom",void 0),o(this,"$view",void 0),this.$vdom=null,this.$view=t}var t,i,u;return t=e,(i=[{key:"mount",value:function(e){return this.$vdom=this.$buildVNodeTree("string"==typeof e?document.querySelector(e):e),this.$view=d(this.$view,this.$patch.bind(this),this.$vdom),this.$patch(this.$vdom,Object.keys(this.$view)),this.$view}},{key:"unmount",value:function(){this.$vdom=null,this.$view=null}},{key:"$createVNode",value:function(e,t){var n=t.tag,r=t.attributes,o=void 0===r?{}:r,i=t.directives,c=void 0===i?{}:i,u=t.children;return{sel:e,tag:n,attributes:o,directives:c,children:void 0===u?[]:u}}},{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 n,r=[],o=Array.prototype.slice.call(e.childNodes),i=v(o);try{for(i.s();!(n=i.n()).done;){var c=n.value;switch(c.nodeType){case Node.TEXT_NODE:r.push(c.nodeValue);break;case Node.ELEMENT_NODE:var u=A(c),a=u.attributes,l=u.directives;r.push(this.$createVNode(S(c),{tag:c.tagName.toLowerCase(),attributes:a,directives:l,children:this.$buildVNodeTree(c,!0)}))}}}catch(e){i.e(e)}finally{i.f()}var s=A(e),f=s.attributes,d=s.directives;return t?r:this.$createVNode(S(e),{tag:e.tagName.toLowerCase(),attributes:f,directives:d,children:r})}},{key:"$patch",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(e){for(var r=c({},this.$view),o=0;o<e.children.length;o++){var i=e.children[o],u=i,a=u.sel,l=u.directives,s=u.attributes;if("string"!=typeof i){var f=[],v=function(e){var n=l[e];(t.some((function(e){return n.toString().includes(e)}))||Object.keys(r).some((function(e){return"function"==typeof r[e]&&r[e].toString().includes("this.".concat(e))})))&&f.push(e)};for(var d in l)v(d);f.length>0&&Object.keys(l).includes("on:effect")&&f.push("on:effect");for(var p=0,y=f;p<y.length;p++){var h=y[p],b=l[h],m=s.id?document.getElementById(s.id):document.querySelector(a);j({el:m,name:h,value:b,view:this.$view})}i=this.$patch(i,t,!0)}}return n?e:void 0}}}])&&r(t.prototype,i),u&&r(t,u),e}()),E=function(e){return new P(e)},k={};document.addEventListener("DOMContentLoaded",(function(){for(var e=0,t=Array.from(document.querySelectorAll("[l-use]"));e<t.length;e++){var n=t[e],r=n.getAttribute("l-use");if(null===r)return;var o=E(new Function("return (".concat(r,")"))()),i=n.getAttribute("l-link");i&&(k[i]=o),o.mount(n)}})),e.App=P,e.createApp=E,e.links=k,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "lucia",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Tiny library for tiny web apps.",
@@ -12,3 +12,3 @@ "main": "dist/lucia.js",
     "build:docs": "typedoc --out docs src",
-    "test": "exit 0"
+    "test": "jest --coverage"
   },
@@ -29,3 +29,3 @@ "repository": {
   ],
-  "author": "Aiden Bai <[e-mail]>",
+  "author": "Aiden Bai <[e-mail]>",
   "license": "MIT",
@@ -48,7 +48,14 @@ "bugs": {
     "del-cli": "^3.0.1",
+    "jest": "^26.6.1",
     "rollup": "2.15.0",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^26.4.2",
     "typedoc": "^0.19.2",
     "typescript": "^4.0.3"
+  },
+  "jest": {
+    "transform": {
+      ".(ts)": "ts-jest"
+    }
   }
 }

README.md

 [![Lucia](https://raw.githubusercontent.com/aidenybai/lucia/master/.github/img/banner.svg)](https://lucia.js.org)
 
-![Code Size](https://badgen.net/badgesize/brotli/https/unpkg.com/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) ![NPM Version](https://img.shields.io/npm/v/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?color=7460E1&labelColor=1D1E32&style=flat-square) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=7460E1&labelColor=1D1E32&style=flat-square)
+![TravisCI Build](https://badgen.net/travis/aidenybai/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) ![Code Size](https://badgen.net/badgesize/brotli/https/unpkg.com/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) ![NPM Version](https://img.shields.io/npm/v/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?color=7460E1&labelColor=1D1E32&style=flat-square) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=7460E1&labelColor=1D1E32&style=flat-square)
 
 ## What is Lucia?
 
-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:
+Lucia is a tiny JavaScript (UMD compatible) library that serves as a bridge between vanilla JavaScript and Vue. Some features of Lucia are:
 
-- **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 (~4kb min+brotli) and performant as it does not use a tranditional Virtual DOM, rather it renders directives only if necessary by skipping static nodes through selectors.
+- **Declarative:** Lucia provides a declarative API similar to Vue/Alpine to create views, making development predictable and intuitive through markup-centric code.
+- **Reactive:** When the view is changed, the internal reference Virtual DOM will automatically react and will update and render the new view in realtime.
+- **Lightweight:** Lucia is extremely light (~4kb min+brotli) and performant as it does not use a traditional Virtual DOM, rather it renders directives only if necessary by skipping static nodes through selectors.
 
+> Right off the bat it should be noted that Lucia should not be implemented in all use cases. Lucia aims to tackle projects that need to be quickly implemented as an experiment, and this by extension doesn't make it very good for production environments. If you are looking for something established and widely used with a similar API to Lucia, check out the [similar projects](#Similar-Projects).
+
 ## Installation
@@ -19,3 +21,3 @@
 <!-- development version, includes helpful console warnings -->
-<script src="https://unpkg.com/lucia/dist/lucia.js" defer></script>
+<script src="https://unpkg.com/lucia/dist/lucia.js"></script>
 ```
@@ -25,3 +27,3 @@
 <!-- production version, optimized for size and speed -->
-<script src="https://unpkg.com/lucia" defer></script>
+<script src="https://unpkg.com/lucia"></script>
 ```
@@ -35,3 +37,3 @@
 <div l-use="{ count: 0 }">
-  <button l-text="count" l-on:click="++count"></button>
+  <button l-text="count" l-on:click="++count">0</button>
 </div>
@@ -44,12 +46,13 @@ ```
 
-| 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.  |
+| 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.  |
+| [`l-link`](#Accessing-Lucia-Applications) | Allows access of initialized Lucia applications through JavaScript                      |
 
@@ -181,4 +184,48 @@ ### Creating a Component
 
+### Accessing Lucia Applications
+
+You can use the `l-link` directive to allow access of Lucia apps through the `Lucia.links` property
+
+```html
+<div l-use="AccessingLuciaApplications()" l-link="AccessingLuciaApplications">
+  <p l-text="message"></p>
+</div>
+```
+
+```js
+function AccessingLuciaApplications() {
+  return {
+    message: 'Hello World',
+  };
+}
+
+console.log(Lucia.links.AccessingLuciaApplications.$data);
+```
+
+## Similar Projects
+
+If you're looking for something production-ready and is widely that has a API similar to Lucia, check these projects out!
+
+- [Alpine](https://github.com/alpinejs/alpine) - A rugged, minimal framework for composing JavaScript behavior in your markup.
+- [Stimulus](https://github.com/stimulusjs/stimulus) - A modest JavaScript framework for the HTML you already have.
+- [Intercooler.js](https://github.com/intercoolerjs/intercooler-js) - Making AJAX as easy as anchor tags.
+- [Mavo](https://github.com/mavoweb/mavo) - Create web applications entirely by writing HTML and CSS!
+- [Htmx](https://github.com/bigskysoftware/htmx) - </> htmx - high power tools for HTML
+- [Unpoly](https://github.com/unpoly/unpoly) - Unobtrusive Javascript Framework for server-side applications
+
 ## License
 
 Lucia is [MIT licensed](LICENSE.md).
+
+## Acknowledgements
+
+This project could not have been created with the inspiration from dedicated developers of the projects listed below:
+
+- [Vue](https://github.com/vuejs/vue) for the fantastically structured API.
+- [Svelte](https://github.com/sveltejs/svelte) for their dedication to performance and amazing banner header.
+- [Alpine](https://github.com/alpinejs/alpine) for the component scope syntax as well as great documentation.
+- [Moon](https://github.com/kbrsh/moon) for the initial itch to start a lightweight JavaScript library.
+
+As well as the developers, awesome [contributors](https://github.com/aidenybai/lucia/graphs/contributors), and the CHS Magnet Program for providing this opportunity to me.
+
+＼＿ﾍ(◕‿◕ ✰)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133401

increased by225.2%

Number of package files

11

increased by120%

Lines of code

2614

increased by297.26%

Number of lines in readme file

227

increased by26.11%

Worsened metrics

Dev dependency count

14

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes