Comparing version 0.2.1 to 0.2.2
@@ -29,4 +29,5 @@ Object.defineProperty(exports, '__esModule', { value: true }); | ||
var directives = {}; | ||
el = el; | ||
if (el.attributes) { | ||
for (var _i = 0, _a = el.attributes; _i < _a.length; _i++) { | ||
for (var _i = 0, _a = Array.prototype.slice.call(el.attributes); _i < _a.length; _i++) { | ||
var _b = _a[_i], name_1 = _b.name, value = _b.value; | ||
@@ -44,54 +45,15 @@ if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
var parentElements = function (el) { | ||
var parents = []; | ||
while (el) { | ||
var tagName = el.nodeName.toLowerCase(); | ||
var cssId = el.id ? "#" + el.id : ''; | ||
var cssClass = ''; | ||
if (el.className && typeof el.className === 'string') { | ||
cssClass = "." + el.className.replace(/\s+/g, '.').replace(/[:*+?^${}()|[\]\\]/gi, '\\$&'); | ||
} | ||
parents.unshift({ | ||
el: el, | ||
selector: tagName + cssId + cssClass, | ||
}); | ||
el = el.parentNode !== document ? el.parentNode : false; | ||
} | ||
return parents; | ||
var createVNode = function (el, view, children) { | ||
var _a = props(el), attributes = _a.attributes, directives = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC || attributes.id ? undefined : el); | ||
}; | ||
var nthElement = function (el) { | ||
var element = el; | ||
var nth = 1; | ||
while (element.previousElementSibling !== null) { | ||
if (element.previousElementSibling.nodeName === el.nodeName) | ||
nth++; | ||
element = element.previousElementSibling; | ||
} | ||
return nth; | ||
}; | ||
var nthSelectorNeeded = function (selector, path) { | ||
var querySelector = path === '' ? selector : path + " > " + selector; | ||
return document.querySelectorAll(querySelector).length > 1; | ||
}; | ||
var buildPathString = function (parents) { | ||
var pathArr = []; | ||
for (var _i = 0, parents_1 = parents; _i < parents_1.length; _i++) { | ||
var parent_1 = parents_1[_i]; | ||
if (nthSelectorNeeded(parent_1.selector, pathArr.join(' > '))) { | ||
parent_1.selector += ":nth-of-type(" + nthElement(parent_1.el) + ")"; | ||
} | ||
pathArr.push(parent_1.selector); | ||
} | ||
for (var _a = 0, pathArr_1 = pathArr; _a < pathArr_1.length; _a++) { | ||
var path = pathArr_1[_a]; | ||
if (path.includes('#')) { | ||
pathArr = pathArr.slice(pathArr.indexOf(path)); | ||
} | ||
} | ||
return pathArr.join(' > '); | ||
}; | ||
var selector = function (el) { | ||
return buildPathString(parentElements(el)); | ||
}; | ||
var compile = function (el, view, callSelf) { | ||
@@ -111,30 +73,10 @@ if (view === void 0) { view = {}; } | ||
case Node.ELEMENT_NODE: | ||
var _a = props(child), attributes_1 = _a.attributes, directives_1 = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives_1).length > 0; | ||
var hasKeyInDirectives = Object.values(directives_1).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
children.push(h(child.tagName.toLowerCase(), attributes_1, directives_1, compile(child, view, true), type, type === VNodeTypes.STATIC ? undefined : selector(child))); | ||
children.push(createVNode(child, view, compile(child, view, true))); | ||
break; | ||
} | ||
} | ||
var _b = props(el), attributes = _b.attributes, directives = _b.directives; | ||
if (callSelf) | ||
return children; | ||
else { | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC ? undefined : selector(el)); | ||
return createVNode(el, view, children); | ||
} | ||
@@ -287,14 +229,13 @@ }; | ||
var patch = function (originVNode, view, keys, callSelf) { | ||
var patch = function (originVNode, view, keys) { | ||
if (view === void 0) { view = {}; } | ||
if (keys === void 0) { keys = []; } | ||
if (callSelf === void 0) { callSelf = false; } | ||
if (!originVNode) | ||
return; | ||
for (var _i = 0, _a = originVNode.children; _i < _a.length; _i++) { | ||
var vnode = _a[_i]; | ||
if (typeof vnode === 'string') | ||
var node = _a[_i]; | ||
if (typeof node === 'string') | ||
continue; | ||
if (vnode.type > VNodeTypes.STATIC) { | ||
var _b = vnode.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
if (node.type > VNodeTypes.STATIC) { | ||
var _b = node.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
var affectedDirectives = []; | ||
@@ -315,4 +256,4 @@ var _loop_1 = function (name_1) { | ||
} | ||
if (vnode.type === VNodeTypes.NEEDS_PATCH) { | ||
vnode.type = VNodeTypes.STATIC; | ||
if (node.type === VNodeTypes.NEEDS_PATCH) { | ||
node.type = VNodeTypes.STATIC; | ||
} | ||
@@ -322,5 +263,3 @@ for (var _c = 0, affectedDirectives_1 = affectedDirectives; _c < affectedDirectives_1.length; _c++) { | ||
var value = directives[name_2]; | ||
var el = attributes.id | ||
? document.getElementById(attributes.id) | ||
: document.querySelector(sel); | ||
var el = attributes.id ? document.getElementById(attributes.id) : sel; | ||
render({ | ||
@@ -334,6 +273,5 @@ el: el, | ||
} | ||
vnode = patch(vnode, view, keys, true); | ||
if (node.children.length > 0) | ||
patch(node, view, keys); | ||
} | ||
if (callSelf) | ||
return originVNode; | ||
}; | ||
@@ -348,13 +286,15 @@ | ||
var handleArray = function (target, key, view, patch) { | ||
if (key === 'length') { | ||
var affectedKeys = Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
}); | ||
if (affectedKeys.length !== 0) | ||
patch(affectedKeys); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var observer = function (view, patch) { | ||
var handleArray = function (target, key) { | ||
if (key === 'length') { | ||
patch(Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
})); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var handler = { | ||
@@ -371,3 +311,3 @@ get: function (target, key) { | ||
target[key] = value; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -377,3 +317,3 @@ }, | ||
delete target[key]; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -449,3 +389,2 @@ }, | ||
exports.render = render; | ||
exports.selector = selector; | ||
exports.use = use; |
@@ -1,1 +0,1 @@ | ||
Object.defineProperty(exports,"__esModule",{value:!0});var e=0,t=1,r=2,n=function(e,t,r,n,i,o){return void 0===t&&(t={}),void 0===r&&(r={}),void 0===n&&(n=[]),void 0===i&&(i=0),{tag:e,props:{attributes:t,directives:r,sel:o},children:n,type:i}},i=function(e){var t={},r={};if(e.attributes)for(var n=0,i=e.attributes;n<i.length;n++){var o=i[n],u=o.name,l=o.value;u.startsWith("l-")?r[u.slice("l-".length)]=l:t[u]=l}return{attributes:t,directives:r}},o=function(e){for(var t=e,r=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&r++,t=t.previousElementSibling;return r},u=function(e,t){var r=""===t?e:t+" > "+e;return document.querySelectorAll(r).length>1},l=function(e){return function(e){for(var t=[],r=0,n=e;r<n.length;r++){var i=n[r];u(i.selector,t.join(" > "))&&(i.selector+=":nth-of-type("+o(i.el)+")"),t.push(i.selector)}for(var l=0,s=t;l<s.length;l++){var a=s[l];a.includes("#")&&(t=t.slice(t.indexOf(a)))}return t.join(" > ")}(function(e){for(var t=[];e;){var r=e.nodeName.toLowerCase(),n=e.id?"#"+e.id:"",i="";e.className&&"string"==typeof e.className&&(i="."+e.className.replace(/\s+/g,".").replace(/[:*+?^${}()|[\]\\]/gi,"\\$&")),t.unshift({el:e,selector:r+n+i}),e=e.parentNode!==document&&e.parentNode}return t}(e))},s=function(o,u,a){if(void 0===u&&(u={}),void 0===a&&(a=!1),!o)throw new Error("Please provide a Element");for(var v=[],c=0,f=Array.prototype.slice.call(o.childNodes);c<f.length;c++){var d=f[c];switch(d.nodeType){case Node.TEXT_NODE:v.push(d.nodeValue);break;case Node.ELEMENT_NODE:var p=i(d),m=p.attributes,h=p.directives,y=e,b=Object.keys(h).length>0,w=Object.values(h).some((function(e){return Object.keys(u).some((function(t){return e.includes(t)}))}));b&&(y=t),w&&(y=r),v.push(n(d.tagName.toLowerCase(),m,h,s(d,u,!0),y,y===e?void 0:l(d)))}}var g=i(o),N=g.attributes,A=g.directives;if(a)return v;y=e,b=Object.keys(A).length>0,w=Object.values(A).some((function(e){return Object.keys(u).some((function(t){return e.includes(t)}))}));return b&&(y=t),w&&(y=r),n(o.tagName.toLowerCase(),N,A,v,y,y===e?void 0:l(o))},a=function(e,t,r){return void 0===t&&(t={}),void 0===r&&(r=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(r?"return "+e:e)+"}").bind(t)()},v={bind:function(e){var t=e.el,r=e.name,n=e.value,i=e.view;switch(r.split(":")[1]){case"class":var o=a(n,{$view:i,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var l in o)o[l]&&u.push(l);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var s=a(n,{$view:i,$el:t});for(var l in t.removeAttribute("style"),s)t.style[l]=s[l];break;default:var v=a(n,{$view:i,$el:t});v?t.setAttribute(r.split(":")[1],v):t.removeAttribute(r.split(":")[1])}},join:function(e){var t=e.el,r=e.value,n=e.view,i=r.split("by "),o=a(i[0],{$view:n,$el:t});t.innerHTML=void 0!==o?o.join(i[1]||""):i[0].join(i[1]||"")},html:function(e){var t=e.el,r=e.value,n=e.view,i=a(r,{$view:n,$el:t});t.innerHTML=void 0!==i?i:r},if:function(e){var t=e.el,r=e.value,n=e.view,i=!!a(r,{$view:n,$el:t});t.hidden=!i},model:function(e){var t=e.el,r=e.value,n=e.view;t.value=n[r];var i=function(){var e="number"==typeof n[r]&&!isNaN(t.value),i="boolean"==typeof n[r]&&("true"===t.value||"false"===t.value),o=!(null!==n[r]&&void 0!==n[r]||"null"!==t.value&&"undefined"!==t.value);e?n[r]=Number(t.value).toPrecision():i?n[r]=Boolean(t.value):o?"null"===t.value?n[r]=null:n[r]=void 0:n[r]=t.value};t.oninput=i,i()},on:function(e){var t=e.el,r=e.name,n=e.value,i=e.view,o=r.split("."),u=o[0].split(":")[1],l=o[1]||null;t["on"+u]=function(e){"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),a(n,{$view:i,$el:t},!1)}},text:function(e){var t=e.el,r=e.value,n=e.view,i=a(r,{$view:n,$el:t});t.textContent=null!=i?i:r}},c=function(e){var t=e.el,r=e.name,n=e.value,i=e.view,o=r.split(/:|\./)[0];v[o]({el:t,name:r,value:n,view:i})},f=function(r,n,i,o){if(void 0===n&&(n={}),void 0===i&&(i=[]),void 0===o&&(o=!1),r){for(var u=0,l=r.children;u<l.length;u++){var s=l[u];if("string"!=typeof s){if(s.type>e){var a=s.props,v=a.attributes,d=a.directives,p=a.sel,m=[],h=function(e){var t=d[e],r=i.some((function(e){return t.toString().includes(e)})),o=Object.keys(n).some((function(e){return"function"==typeof n[e]&&i.some((function(t){return n[e].toString().includes("this."+t)}))}));(r||o)&&m.push(e)};for(var y in d)h(y);s.type===t&&(s.type=e);for(var b=0,w=m;b<w.length;b++){var g=w[b],N=d[g],A=v.id?document.getElementById(v.id):document.querySelector(p);c({el:A,name:g,value:N,view:n})}}s=f(s,n,i,!0)}}return o?r:void 0}},d=function(e,t){var r=function(r,n){t("length"===n?Object.keys(e).filter((function(t){return e[t]instanceof Array&&(n=r,i=e[t],n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(e,t){return e===i[t]})));var n,i})):[n])},n={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(e,t,n){return e[t]=n,r(e,t),!0},deleteProperty:function(e,t){return delete e[t],r(e,t),!0}};return new Proxy(e,n)},p=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=d(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){f(this.vdom,this.view,e)},e.prototype._compile=function(e){return s(e,this.view)},e}(),m=function(e){return new p(e)},h=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var r=0,n=Array.from(e.querySelectorAll("[l-"+t+"]"));r<n.length;r++){var i=n[r],o=i.getAttribute("l-"+t);if(null===o)return;try{m(a(o)).mount(i)}catch(e){}}};document.addEventListener("DOMContentLoaded",(function(){return h(document,"init")})),exports.App=p,exports.compile=s,exports.compute=a,exports.createApp=m,exports.directives=v,exports.h=n,exports.init=h,exports.observer=d,exports.patch=f,exports.props=i,exports.render=c,exports.selector=l,exports.use=function(e,t){for(var r=0,n=Array.from(document.querySelectorAll("[l-use]"));r<n.length;r++){var i=n[r];if(i.getAttribute("l-use")===e){var o=m(t);return o.mount(i),o}}}; | ||
Object.defineProperty(exports,"__esModule",{value:!0});var e=0,t=1,r=2,n=function(e,t,r,n,i,o){return void 0===t&&(t={}),void 0===r&&(r={}),void 0===n&&(n=[]),void 0===i&&(i=0),{tag:e,props:{attributes:t,directives:r,sel:o},children:n,type:i}},i=function(e){var t={},r={};if((e=e).attributes)for(var n=0,i=Array.prototype.slice.call(e.attributes);n<i.length;n++){var o=i[n],u=o.name,l=o.value;u.startsWith("l-")?r[u.slice("l-".length)]=l:t[u]=l}return{attributes:t,directives:r}},o=function(o,u,l){var s=i(o),a=s.attributes,v=s.directives,c=e,f=Object.keys(v).length>0,p=Object.values(v).some((function(e){return Object.keys(u).some((function(t){return e.includes(t)}))}));return f&&(c=t),p&&(c=r),n(o.tagName.toLowerCase(),a,v,l,c,c===e||a.id?void 0:o)},u=function(e,t,r){if(void 0===t&&(t={}),void 0===r&&(r=!1),!e)throw new Error("Please provide a Element");for(var n=[],i=0,l=Array.prototype.slice.call(e.childNodes);i<l.length;i++){var s=l[i];switch(s.nodeType){case Node.TEXT_NODE:n.push(s.nodeValue);break;case Node.ELEMENT_NODE:n.push(o(s,t,u(s,t,!0)))}}return r?n:o(e,t,n)},l=function(e,t,r){return void 0===t&&(t={}),void 0===r&&(r=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(r?"return "+e:e)+"}").bind(t)()},s={bind:function(e){var t=e.el,r=e.name,n=e.value,i=e.view;switch(r.split(":")[1]){case"class":var o=l(n,{$view:i,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var s in o)o[s]&&u.push(s);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var a=l(n,{$view:i,$el:t});for(var s in t.removeAttribute("style"),a)t.style[s]=a[s];break;default:var v=l(n,{$view:i,$el:t});v?t.setAttribute(r.split(":")[1],v):t.removeAttribute(r.split(":")[1])}},join:function(e){var t=e.el,r=e.value,n=e.view,i=r.split("by "),o=l(i[0],{$view:n,$el:t});t.innerHTML=void 0!==o?o.join(i[1]||""):i[0].join(i[1]||"")},html:function(e){var t=e.el,r=e.value,n=e.view,i=l(r,{$view:n,$el:t});t.innerHTML=void 0!==i?i:r},if:function(e){var t=e.el,r=e.value,n=e.view,i=!!l(r,{$view:n,$el:t});t.hidden=!i},model:function(e){var t=e.el,r=e.value,n=e.view;t.value=n[r];var i=function(){var e="number"==typeof n[r]&&!isNaN(t.value),i="boolean"==typeof n[r]&&("true"===t.value||"false"===t.value),o=!(null!==n[r]&&void 0!==n[r]||"null"!==t.value&&"undefined"!==t.value);e?n[r]=Number(t.value).toPrecision():i?n[r]=Boolean(t.value):o?"null"===t.value?n[r]=null:n[r]=void 0:n[r]=t.value};t.oninput=i,i()},on:function(e){var t=e.el,r=e.name,n=e.value,i=e.view,o=r.split("."),u=o[0].split(":")[1],s=o[1]||null;t["on"+u]=function(e){"prevent"===s&&e.preventDefault(),"stop"===s&&e.stopPropagation(),l(n,{$view:i,$el:t},!1)}},text:function(e){var t=e.el,r=e.value,n=e.view,i=l(r,{$view:n,$el:t});t.textContent=null!=i?i:r}},a=function(e){var t=e.el,r=e.name,n=e.value,i=e.view,o=r.split(/:|\./)[0];s[o]({el:t,name:r,value:n,view:i})},v=function(r,n,i){if(void 0===n&&(n={}),void 0===i&&(i=[]),r)for(var o=0,u=r.children;o<u.length;o++){var l=u[o];if("string"!=typeof l){if(l.type>e){var s=l.props,c=s.attributes,f=s.directives,p=s.sel,d=[],h=function(e){var t=f[e],r=i.some((function(e){return t.toString().includes(e)})),o=Object.keys(n).some((function(e){return"function"==typeof n[e]&&i.some((function(t){return n[e].toString().includes("this."+t)}))}));(r||o)&&d.push(e)};for(var m in f)h(m);l.type===t&&(l.type=e);for(var y=0,w=d;y<w.length;y++){var b=w[y],g=f[b],A=c.id?document.getElementById(c.id):p;a({el:A,name:b,value:g,view:n})}}l.children.length>0&&v(l,n,i)}}},c=function(e,t,r,n){if("length"===t){var i=Object.keys(r).filter((function(t){return r[t]instanceof Array&&(n=e,i=r[t],n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(e,t){return e===i[t]})));var n,i}));0!==i.length&&n(i)}else n([t])},f=function(e,t){var r={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(r,n,i){return r[n]=i,c(r,n,e,t),!0},deleteProperty:function(r,n){return delete r[n],c(r,n,e,t),!0}};return new Proxy(e,r)},p=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=f(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){v(this.vdom,this.view,e)},e.prototype._compile=function(e){return u(e,this.view)},e}(),d=function(e){return new p(e)},h=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var r=0,n=Array.from(e.querySelectorAll("[l-"+t+"]"));r<n.length;r++){var i=n[r],o=i.getAttribute("l-"+t);if(null===o)return;try{d(l(o)).mount(i)}catch(e){}}};document.addEventListener("DOMContentLoaded",(function(){return h(document,"init")})),exports.App=p,exports.compile=u,exports.compute=l,exports.createApp=d,exports.directives=s,exports.h=n,exports.init=h,exports.observer=f,exports.patch=v,exports.props=i,exports.render=a,exports.use=function(e,t){for(var r=0,n=Array.from(document.querySelectorAll("[l-use]"));r<n.length;r++){var i=n[r];if(i.getAttribute("l-use")===e){var o=d(t);return o.mount(i),o}}}; |
@@ -27,4 +27,5 @@ var VNodeTypes = { | ||
var directives = {}; | ||
el = el; | ||
if (el.attributes) { | ||
for (var _i = 0, _a = el.attributes; _i < _a.length; _i++) { | ||
for (var _i = 0, _a = Array.prototype.slice.call(el.attributes); _i < _a.length; _i++) { | ||
var _b = _a[_i], name_1 = _b.name, value = _b.value; | ||
@@ -42,54 +43,15 @@ if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
var parentElements = function (el) { | ||
var parents = []; | ||
while (el) { | ||
var tagName = el.nodeName.toLowerCase(); | ||
var cssId = el.id ? "#" + el.id : ''; | ||
var cssClass = ''; | ||
if (el.className && typeof el.className === 'string') { | ||
cssClass = "." + el.className.replace(/\s+/g, '.').replace(/[:*+?^${}()|[\]\\]/gi, '\\$&'); | ||
} | ||
parents.unshift({ | ||
el: el, | ||
selector: tagName + cssId + cssClass, | ||
}); | ||
el = el.parentNode !== document ? el.parentNode : false; | ||
} | ||
return parents; | ||
var createVNode = function (el, view, children) { | ||
var _a = props(el), attributes = _a.attributes, directives = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC || attributes.id ? undefined : el); | ||
}; | ||
var nthElement = function (el) { | ||
var element = el; | ||
var nth = 1; | ||
while (element.previousElementSibling !== null) { | ||
if (element.previousElementSibling.nodeName === el.nodeName) | ||
nth++; | ||
element = element.previousElementSibling; | ||
} | ||
return nth; | ||
}; | ||
var nthSelectorNeeded = function (selector, path) { | ||
var querySelector = path === '' ? selector : path + " > " + selector; | ||
return document.querySelectorAll(querySelector).length > 1; | ||
}; | ||
var buildPathString = function (parents) { | ||
var pathArr = []; | ||
for (var _i = 0, parents_1 = parents; _i < parents_1.length; _i++) { | ||
var parent_1 = parents_1[_i]; | ||
if (nthSelectorNeeded(parent_1.selector, pathArr.join(' > '))) { | ||
parent_1.selector += ":nth-of-type(" + nthElement(parent_1.el) + ")"; | ||
} | ||
pathArr.push(parent_1.selector); | ||
} | ||
for (var _a = 0, pathArr_1 = pathArr; _a < pathArr_1.length; _a++) { | ||
var path = pathArr_1[_a]; | ||
if (path.includes('#')) { | ||
pathArr = pathArr.slice(pathArr.indexOf(path)); | ||
} | ||
} | ||
return pathArr.join(' > '); | ||
}; | ||
var selector = function (el) { | ||
return buildPathString(parentElements(el)); | ||
}; | ||
var compile = function (el, view, callSelf) { | ||
@@ -109,30 +71,10 @@ if (view === void 0) { view = {}; } | ||
case Node.ELEMENT_NODE: | ||
var _a = props(child), attributes_1 = _a.attributes, directives_1 = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives_1).length > 0; | ||
var hasKeyInDirectives = Object.values(directives_1).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
children.push(h(child.tagName.toLowerCase(), attributes_1, directives_1, compile(child, view, true), type, type === VNodeTypes.STATIC ? undefined : selector(child))); | ||
children.push(createVNode(child, view, compile(child, view, true))); | ||
break; | ||
} | ||
} | ||
var _b = props(el), attributes = _b.attributes, directives = _b.directives; | ||
if (callSelf) | ||
return children; | ||
else { | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC ? undefined : selector(el)); | ||
return createVNode(el, view, children); | ||
} | ||
@@ -285,14 +227,13 @@ }; | ||
var patch = function (originVNode, view, keys, callSelf) { | ||
var patch = function (originVNode, view, keys) { | ||
if (view === void 0) { view = {}; } | ||
if (keys === void 0) { keys = []; } | ||
if (callSelf === void 0) { callSelf = false; } | ||
if (!originVNode) | ||
return; | ||
for (var _i = 0, _a = originVNode.children; _i < _a.length; _i++) { | ||
var vnode = _a[_i]; | ||
if (typeof vnode === 'string') | ||
var node = _a[_i]; | ||
if (typeof node === 'string') | ||
continue; | ||
if (vnode.type > VNodeTypes.STATIC) { | ||
var _b = vnode.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
if (node.type > VNodeTypes.STATIC) { | ||
var _b = node.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
var affectedDirectives = []; | ||
@@ -313,4 +254,4 @@ var _loop_1 = function (name_1) { | ||
} | ||
if (vnode.type === VNodeTypes.NEEDS_PATCH) { | ||
vnode.type = VNodeTypes.STATIC; | ||
if (node.type === VNodeTypes.NEEDS_PATCH) { | ||
node.type = VNodeTypes.STATIC; | ||
} | ||
@@ -320,5 +261,3 @@ for (var _c = 0, affectedDirectives_1 = affectedDirectives; _c < affectedDirectives_1.length; _c++) { | ||
var value = directives[name_2]; | ||
var el = attributes.id | ||
? document.getElementById(attributes.id) | ||
: document.querySelector(sel); | ||
var el = attributes.id ? document.getElementById(attributes.id) : sel; | ||
render({ | ||
@@ -332,6 +271,5 @@ el: el, | ||
} | ||
vnode = patch(vnode, view, keys, true); | ||
if (node.children.length > 0) | ||
patch(node, view, keys); | ||
} | ||
if (callSelf) | ||
return originVNode; | ||
}; | ||
@@ -346,13 +284,15 @@ | ||
var handleArray = function (target, key, view, patch) { | ||
if (key === 'length') { | ||
var affectedKeys = Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
}); | ||
if (affectedKeys.length !== 0) | ||
patch(affectedKeys); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var observer = function (view, patch) { | ||
var handleArray = function (target, key) { | ||
if (key === 'length') { | ||
patch(Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
})); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var handler = { | ||
@@ -369,3 +309,3 @@ get: function (target, key) { | ||
target[key] = value; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -375,3 +315,3 @@ }, | ||
delete target[key]; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -436,2 +376,2 @@ }, | ||
export { App, compile, computeProperties as compute, createApp, directives, h, init, observer, patch, props, render, selector, use }; | ||
export { App, compile, computeProperties as compute, createApp, directives, h, init, observer, patch, props, render, use }; |
@@ -1,1 +0,1 @@ | ||
var e=0,t=1,n=2,r=function(e,t,n,r,i,o){return void 0===t&&(t={}),void 0===n&&(n={}),void 0===r&&(r=[]),void 0===i&&(i=0),{tag:e,props:{attributes:t,directives:n,sel:o},children:r,type:i}},i=function(e){var t={},n={};if(e.attributes)for(var r=0,i=e.attributes;r<i.length;r++){var o=i[r],u=o.name,l=o.value;u.startsWith("l-")?n[u.slice("l-".length)]=l:t[u]=l}return{attributes:t,directives:n}},o=function(e){for(var t=e,n=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&n++,t=t.previousElementSibling;return n},u=function(e,t){var n=""===t?e:t+" > "+e;return document.querySelectorAll(n).length>1},l=function(e){return function(e){for(var t=[],n=0,r=e;n<r.length;n++){var i=r[n];u(i.selector,t.join(" > "))&&(i.selector+=":nth-of-type("+o(i.el)+")"),t.push(i.selector)}for(var l=0,a=t;l<a.length;l++){var s=a[l];s.includes("#")&&(t=t.slice(t.indexOf(s)))}return t.join(" > ")}(function(e){for(var t=[];e;){var n=e.nodeName.toLowerCase(),r=e.id?"#"+e.id:"",i="";e.className&&"string"==typeof e.className&&(i="."+e.className.replace(/\s+/g,".").replace(/[:*+?^${}()|[\]\\]/gi,"\\$&")),t.unshift({el:e,selector:n+r+i}),e=e.parentNode!==document&&e.parentNode}return t}(e))},a=function(o,u,s){if(void 0===u&&(u={}),void 0===s&&(s=!1),!o)throw new Error("Please provide a Element");for(var v=[],c=0,f=Array.prototype.slice.call(o.childNodes);c<f.length;c++){var d=f[c];switch(d.nodeType){case Node.TEXT_NODE:v.push(d.nodeValue);break;case Node.ELEMENT_NODE:var m=i(d),p=m.attributes,h=m.directives,y=e,b=Object.keys(h).length>0,w=Object.values(h).some((function(e){return Object.keys(u).some((function(t){return e.includes(t)}))}));b&&(y=t),w&&(y=n),v.push(r(d.tagName.toLowerCase(),p,h,a(d,u,!0),y,y===e?void 0:l(d)))}}var g=i(o),N=g.attributes,A=g.directives;if(s)return v;y=e,b=Object.keys(A).length>0,w=Object.values(A).some((function(e){return Object.keys(u).some((function(t){return e.includes(t)}))}));return b&&(y=t),w&&(y=n),r(o.tagName.toLowerCase(),N,A,v,y,y===e?void 0:l(o))},s=function(e,t,n){return void 0===t&&(t={}),void 0===n&&(n=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(n?"return "+e:e)+"}").bind(t)()},v={bind:function(e){var t=e.el,n=e.name,r=e.value,i=e.view;switch(n.split(":")[1]){case"class":var o=s(r,{$view:i,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var l in o)o[l]&&u.push(l);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var a=s(r,{$view:i,$el:t});for(var l in t.removeAttribute("style"),a)t.style[l]=a[l];break;default:var v=s(r,{$view:i,$el:t});v?t.setAttribute(n.split(":")[1],v):t.removeAttribute(n.split(":")[1])}},join:function(e){var t=e.el,n=e.value,r=e.view,i=n.split("by "),o=s(i[0],{$view:r,$el:t});t.innerHTML=void 0!==o?o.join(i[1]||""):i[0].join(i[1]||"")},html:function(e){var t=e.el,n=e.value,r=e.view,i=s(n,{$view:r,$el:t});t.innerHTML=void 0!==i?i:n},if:function(e){var t=e.el,n=e.value,r=e.view,i=!!s(n,{$view:r,$el:t});t.hidden=!i},model:function(e){var t=e.el,n=e.value,r=e.view;t.value=r[n];var i=function(){var e="number"==typeof r[n]&&!isNaN(t.value),i="boolean"==typeof r[n]&&("true"===t.value||"false"===t.value),o=!(null!==r[n]&&void 0!==r[n]||"null"!==t.value&&"undefined"!==t.value);e?r[n]=Number(t.value).toPrecision():i?r[n]=Boolean(t.value):o?"null"===t.value?r[n]=null:r[n]=void 0:r[n]=t.value};t.oninput=i,i()},on:function(e){var t=e.el,n=e.name,r=e.value,i=e.view,o=n.split("."),u=o[0].split(":")[1],l=o[1]||null;t["on"+u]=function(e){"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),s(r,{$view:i,$el:t},!1)}},text:function(e){var t=e.el,n=e.value,r=e.view,i=s(n,{$view:r,$el:t});t.textContent=null!=i?i:n}},c=function(e){var t=e.el,n=e.name,r=e.value,i=e.view,o=n.split(/:|\./)[0];v[o]({el:t,name:n,value:r,view:i})},f=function(n,r,i,o){if(void 0===r&&(r={}),void 0===i&&(i=[]),void 0===o&&(o=!1),n){for(var u=0,l=n.children;u<l.length;u++){var a=l[u];if("string"!=typeof a){if(a.type>e){var s=a.props,v=s.attributes,d=s.directives,m=s.sel,p=[],h=function(e){var t=d[e],n=i.some((function(e){return t.toString().includes(e)})),o=Object.keys(r).some((function(e){return"function"==typeof r[e]&&i.some((function(t){return r[e].toString().includes("this."+t)}))}));(n||o)&&p.push(e)};for(var y in d)h(y);a.type===t&&(a.type=e);for(var b=0,w=p;b<w.length;b++){var g=w[b],N=d[g],A=v.id?document.getElementById(v.id):document.querySelector(m);c({el:A,name:g,value:N,view:r})}}a=f(a,r,i,!0)}}return o?n:void 0}},d=function(e,t){var n=function(n,r){t("length"===r?Object.keys(e).filter((function(t){return e[t]instanceof Array&&(r=n,i=e[t],r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]})));var r,i})):[r])},r={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(e,t,r){return e[t]=r,n(e,t),!0},deleteProperty:function(e,t){return delete e[t],n(e,t),!0}};return new Proxy(e,r)},m=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=d(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){f(this.vdom,this.view,e)},e.prototype._compile=function(e){return a(e,this.view)},e}(),p=function(e){return new m(e)},h=function(e,t){for(var n=0,r=Array.from(document.querySelectorAll("[l-use]"));n<r.length;n++){var i=r[n];if(i.getAttribute("l-use")===e){var o=p(t);return o.mount(i),o}}},y=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var n=0,r=Array.from(e.querySelectorAll("[l-"+t+"]"));n<r.length;n++){var i=r[n],o=i.getAttribute("l-"+t);if(null===o)return;try{p(s(o)).mount(i)}catch(e){}}};document.addEventListener("DOMContentLoaded",(function(){return y(document,"init")}));export{m as App,a as compile,s as compute,p as createApp,v as directives,r as h,y as init,d as observer,f as patch,i as props,c as render,l as selector,h as use}; | ||
var e=0,t=1,n=2,i=function(e,t,n,i,r,o){return void 0===t&&(t={}),void 0===n&&(n={}),void 0===i&&(i=[]),void 0===r&&(r=0),{tag:e,props:{attributes:t,directives:n,sel:o},children:i,type:r}},r=function(e){var t={},n={};if((e=e).attributes)for(var i=0,r=Array.prototype.slice.call(e.attributes);i<r.length;i++){var o=r[i],u=o.name,l=o.value;u.startsWith("l-")?n[u.slice("l-".length)]=l:t[u]=l}return{attributes:t,directives:n}},o=function(o,u,l){var a=r(o),s=a.attributes,v=a.directives,c=e,f=Object.keys(v).length>0,d=Object.values(v).some((function(e){return Object.keys(u).some((function(t){return e.includes(t)}))}));return f&&(c=t),d&&(c=n),i(o.tagName.toLowerCase(),s,v,l,c,c===e||s.id?void 0:o)},u=function(e,t,n){if(void 0===t&&(t={}),void 0===n&&(n=!1),!e)throw new Error("Please provide a Element");for(var i=[],r=0,l=Array.prototype.slice.call(e.childNodes);r<l.length;r++){var a=l[r];switch(a.nodeType){case Node.TEXT_NODE:i.push(a.nodeValue);break;case Node.ELEMENT_NODE:i.push(o(a,t,u(a,t,!0)))}}return n?i:o(e,t,i)},l=function(e,t,n){return void 0===t&&(t={}),void 0===n&&(n=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(n?"return "+e:e)+"}").bind(t)()},a={bind:function(e){var t=e.el,n=e.name,i=e.value,r=e.view;switch(n.split(":")[1]){case"class":var o=l(i,{$view:r,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var a in o)o[a]&&u.push(a);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var s=l(i,{$view:r,$el:t});for(var a in t.removeAttribute("style"),s)t.style[a]=s[a];break;default:var v=l(i,{$view:r,$el:t});v?t.setAttribute(n.split(":")[1],v):t.removeAttribute(n.split(":")[1])}},join:function(e){var t=e.el,n=e.value,i=e.view,r=n.split("by "),o=l(r[0],{$view:i,$el:t});t.innerHTML=void 0!==o?o.join(r[1]||""):r[0].join(r[1]||"")},html:function(e){var t=e.el,n=e.value,i=e.view,r=l(n,{$view:i,$el:t});t.innerHTML=void 0!==r?r:n},if:function(e){var t=e.el,n=e.value,i=e.view,r=!!l(n,{$view:i,$el:t});t.hidden=!r},model:function(e){var t=e.el,n=e.value,i=e.view;t.value=i[n];var r=function(){var e="number"==typeof i[n]&&!isNaN(t.value),r="boolean"==typeof i[n]&&("true"===t.value||"false"===t.value),o=!(null!==i[n]&&void 0!==i[n]||"null"!==t.value&&"undefined"!==t.value);e?i[n]=Number(t.value).toPrecision():r?i[n]=Boolean(t.value):o?"null"===t.value?i[n]=null:i[n]=void 0:i[n]=t.value};t.oninput=r,r()},on:function(e){var t=e.el,n=e.name,i=e.value,r=e.view,o=n.split("."),u=o[0].split(":")[1],a=o[1]||null;t["on"+u]=function(e){"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),l(i,{$view:r,$el:t},!1)}},text:function(e){var t=e.el,n=e.value,i=e.view,r=l(n,{$view:i,$el:t});t.textContent=null!=r?r:n}},s=function(e){var t=e.el,n=e.name,i=e.value,r=e.view,o=n.split(/:|\./)[0];a[o]({el:t,name:n,value:i,view:r})},v=function(n,i,r){if(void 0===i&&(i={}),void 0===r&&(r=[]),n)for(var o=0,u=n.children;o<u.length;o++){var l=u[o];if("string"!=typeof l){if(l.type>e){var a=l.props,c=a.attributes,f=a.directives,d=a.sel,h=[],p=function(e){var t=f[e],n=r.some((function(e){return t.toString().includes(e)})),o=Object.keys(i).some((function(e){return"function"==typeof i[e]&&r.some((function(t){return i[e].toString().includes("this."+t)}))}));(n||o)&&h.push(e)};for(var m in f)p(m);l.type===t&&(l.type=e);for(var y=0,w=h;y<w.length;y++){var b=w[y],g=f[b],A=c.id?document.getElementById(c.id):d;s({el:A,name:b,value:g,view:i})}}l.children.length>0&&v(l,i,r)}}},c=function(e,t,n,i){if("length"===t){var r=Object.keys(n).filter((function(t){return n[t]instanceof Array&&(i=e,r=n[t],i instanceof Array&&r instanceof Array&&i.length===r.length&&i.every((function(e,t){return e===r[t]})));var i,r}));0!==r.length&&i(r)}else i([t])},f=function(e,t){var n={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(n,i,r){return n[i]=r,c(n,i,e,t),!0},deleteProperty:function(n,i){return delete n[i],c(n,i,e,t),!0}};return new Proxy(e,n)},d=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=f(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){v(this.vdom,this.view,e)},e.prototype._compile=function(e){return u(e,this.view)},e}(),h=function(e){return new d(e)},p=function(e,t){for(var n=0,i=Array.from(document.querySelectorAll("[l-use]"));n<i.length;n++){var r=i[n];if(r.getAttribute("l-use")===e){var o=h(t);return o.mount(r),o}}},m=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var n=0,i=Array.from(e.querySelectorAll("[l-"+t+"]"));n<i.length;n++){var r=i[n],o=r.getAttribute("l-"+t);if(null===o)return;try{h(l(o)).mount(r)}catch(e){}}};document.addEventListener("DOMContentLoaded",(function(){return m(document,"init")}));export{d as App,u as compile,l as compute,h as createApp,a as directives,i as h,m as init,f as observer,v as patch,r as props,s as render,p as use}; |
var Lucia = (function (exports) { | ||
var VNodeTypes = { | ||
@@ -28,4 +29,5 @@ STATIC: 0, | ||
var directives = {}; | ||
el = el; | ||
if (el.attributes) { | ||
for (var _i = 0, _a = el.attributes; _i < _a.length; _i++) { | ||
for (var _i = 0, _a = Array.prototype.slice.call(el.attributes); _i < _a.length; _i++) { | ||
var _b = _a[_i], name_1 = _b.name, value = _b.value; | ||
@@ -43,54 +45,15 @@ if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
var parentElements = function (el) { | ||
var parents = []; | ||
while (el) { | ||
var tagName = el.nodeName.toLowerCase(); | ||
var cssId = el.id ? "#" + el.id : ''; | ||
var cssClass = ''; | ||
if (el.className && typeof el.className === 'string') { | ||
cssClass = "." + el.className.replace(/\s+/g, '.').replace(/[:*+?^${}()|[\]\\]/gi, '\\$&'); | ||
} | ||
parents.unshift({ | ||
el: el, | ||
selector: tagName + cssId + cssClass, | ||
}); | ||
el = el.parentNode !== document ? el.parentNode : false; | ||
} | ||
return parents; | ||
var createVNode = function (el, view, children) { | ||
var _a = props(el), attributes = _a.attributes, directives = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC || attributes.id ? undefined : el); | ||
}; | ||
var nthElement = function (el) { | ||
var element = el; | ||
var nth = 1; | ||
while (element.previousElementSibling !== null) { | ||
if (element.previousElementSibling.nodeName === el.nodeName) | ||
nth++; | ||
element = element.previousElementSibling; | ||
} | ||
return nth; | ||
}; | ||
var nthSelectorNeeded = function (selector, path) { | ||
var querySelector = path === '' ? selector : path + " > " + selector; | ||
return document.querySelectorAll(querySelector).length > 1; | ||
}; | ||
var buildPathString = function (parents) { | ||
var pathArr = []; | ||
for (var _i = 0, parents_1 = parents; _i < parents_1.length; _i++) { | ||
var parent_1 = parents_1[_i]; | ||
if (nthSelectorNeeded(parent_1.selector, pathArr.join(' > '))) { | ||
parent_1.selector += ":nth-of-type(" + nthElement(parent_1.el) + ")"; | ||
} | ||
pathArr.push(parent_1.selector); | ||
} | ||
for (var _a = 0, pathArr_1 = pathArr; _a < pathArr_1.length; _a++) { | ||
var path = pathArr_1[_a]; | ||
if (path.includes('#')) { | ||
pathArr = pathArr.slice(pathArr.indexOf(path)); | ||
} | ||
} | ||
return pathArr.join(' > '); | ||
}; | ||
var selector = function (el) { | ||
return buildPathString(parentElements(el)); | ||
}; | ||
var compile = function (el, view, callSelf) { | ||
@@ -110,30 +73,10 @@ if (view === void 0) { view = {}; } | ||
case Node.ELEMENT_NODE: | ||
var _a = props(child), attributes_1 = _a.attributes, directives_1 = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives_1).length > 0; | ||
var hasKeyInDirectives = Object.values(directives_1).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
children.push(h(child.tagName.toLowerCase(), attributes_1, directives_1, compile(child, view, true), type, type === VNodeTypes.STATIC ? undefined : selector(child))); | ||
children.push(createVNode(child, view, compile(child, view, true))); | ||
break; | ||
} | ||
} | ||
var _b = props(el), attributes = _b.attributes, directives = _b.directives; | ||
if (callSelf) | ||
return children; | ||
else { | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC ? undefined : selector(el)); | ||
return createVNode(el, view, children); | ||
} | ||
@@ -286,14 +229,13 @@ }; | ||
var patch = function (originVNode, view, keys, callSelf) { | ||
var patch = function (originVNode, view, keys) { | ||
if (view === void 0) { view = {}; } | ||
if (keys === void 0) { keys = []; } | ||
if (callSelf === void 0) { callSelf = false; } | ||
if (!originVNode) | ||
return; | ||
for (var _i = 0, _a = originVNode.children; _i < _a.length; _i++) { | ||
var vnode = _a[_i]; | ||
if (typeof vnode === 'string') | ||
var node = _a[_i]; | ||
if (typeof node === 'string') | ||
continue; | ||
if (vnode.type > VNodeTypes.STATIC) { | ||
var _b = vnode.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
if (node.type > VNodeTypes.STATIC) { | ||
var _b = node.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
var affectedDirectives = []; | ||
@@ -314,4 +256,4 @@ var _loop_1 = function (name_1) { | ||
} | ||
if (vnode.type === VNodeTypes.NEEDS_PATCH) { | ||
vnode.type = VNodeTypes.STATIC; | ||
if (node.type === VNodeTypes.NEEDS_PATCH) { | ||
node.type = VNodeTypes.STATIC; | ||
} | ||
@@ -321,5 +263,3 @@ for (var _c = 0, affectedDirectives_1 = affectedDirectives; _c < affectedDirectives_1.length; _c++) { | ||
var value = directives[name_2]; | ||
var el = attributes.id | ||
? document.getElementById(attributes.id) | ||
: document.querySelector(sel); | ||
var el = attributes.id ? document.getElementById(attributes.id) : sel; | ||
render({ | ||
@@ -333,6 +273,5 @@ el: el, | ||
} | ||
vnode = patch(vnode, view, keys, true); | ||
if (node.children.length > 0) | ||
patch(node, view, keys); | ||
} | ||
if (callSelf) | ||
return originVNode; | ||
}; | ||
@@ -347,13 +286,15 @@ | ||
var handleArray = function (target, key, view, patch) { | ||
if (key === 'length') { | ||
var affectedKeys = Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
}); | ||
if (affectedKeys.length !== 0) | ||
patch(affectedKeys); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var observer = function (view, patch) { | ||
var handleArray = function (target, key) { | ||
if (key === 'length') { | ||
patch(Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
})); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var handler = { | ||
@@ -370,3 +311,3 @@ get: function (target, key) { | ||
target[key] = value; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -376,3 +317,3 @@ }, | ||
delete target[key]; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -448,7 +389,8 @@ }, | ||
exports.render = render; | ||
exports.selector = selector; | ||
exports.use = use; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
return exports; | ||
}({})); |
@@ -1,1 +0,1 @@ | ||
var Lucia=function(e){var t=0,n=1,r=2,i=function(e,t,n,r,i,o){return void 0===t&&(t={}),void 0===n&&(n={}),void 0===r&&(r=[]),void 0===i&&(i=0),{tag:e,props:{attributes:t,directives:n,sel:o},children:r,type:i}},o="l-",u=function(e){var t={},n={};if(e.attributes)for(var r=0,i=e.attributes;r<i.length;r++){var u=i[r],l=u.name,a=u.value;l.startsWith(o)?n[l.slice(o.length)]=a:t[l]=a}return{attributes:t,directives:n}},l=function(e){for(var t=e,n=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&n++,t=t.previousElementSibling;return n},a=function(e,t){var n=""===t?e:t+" > "+e;return document.querySelectorAll(n).length>1},s=function(e){return function(e){for(var t=[],n=0,r=e;n<r.length;n++){var i=r[n];a(i.selector,t.join(" > "))&&(i.selector+=":nth-of-type("+l(i.el)+")"),t.push(i.selector)}for(var o=0,u=t;o<u.length;o++){var s=u[o];s.includes("#")&&(t=t.slice(t.indexOf(s)))}return t.join(" > ")}(function(e){for(var t=[];e;){var n=e.nodeName.toLowerCase(),r=e.id?"#"+e.id:"",i="";e.className&&"string"==typeof e.className&&(i="."+e.className.replace(/\s+/g,".").replace(/[:*+?^${}()|[\]\\]/gi,"\\$&")),t.unshift({el:e,selector:n+r+i}),e=e.parentNode!==document&&e.parentNode}return t}(e))},v=function(e,o,l){if(void 0===o&&(o={}),void 0===l&&(l=!1),!e)throw new Error("Please provide a Element");for(var a=[],c=0,f=Array.prototype.slice.call(e.childNodes);c<f.length;c++){var d=f[c];switch(d.nodeType){case Node.TEXT_NODE:a.push(d.nodeValue);break;case Node.ELEMENT_NODE:var p=u(d),m=p.attributes,h=p.directives,y=t,b=Object.keys(h).length>0,w=Object.values(h).some((function(e){return Object.keys(o).some((function(t){return e.includes(t)}))}));b&&(y=n),w&&(y=r),a.push(i(d.tagName.toLowerCase(),m,h,v(d,o,!0),y,y===t?void 0:s(d)))}}var g=u(e),N=g.attributes,A=g.directives;if(l)return a;y=t,b=Object.keys(A).length>0,w=Object.values(A).some((function(e){return Object.keys(o).some((function(t){return e.includes(t)}))}));return b&&(y=n),w&&(y=r),i(e.tagName.toLowerCase(),N,A,a,y,y===t?void 0:s(e))},c=function(e,t,n){return void 0===t&&(t={}),void 0===n&&(n=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(n?"return "+e:e)+"}").bind(t)()},f={bind:function(e){var t=e.el,n=e.name,r=e.value,i=e.view;switch(n.split(":")[1]){case"class":var o=c(r,{$view:i,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var l in o)o[l]&&u.push(l);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var a=c(r,{$view:i,$el:t});for(var l in t.removeAttribute("style"),a)t.style[l]=a[l];break;default:var s=c(r,{$view:i,$el:t});s?t.setAttribute(n.split(":")[1],s):t.removeAttribute(n.split(":")[1])}},join:function(e){var t=e.el,n=e.value,r=e.view,i=n.split("by "),o=c(i[0],{$view:r,$el:t});t.innerHTML=void 0!==o?o.join(i[1]||""):i[0].join(i[1]||"")},html:function(e){var t=e.el,n=e.value,r=e.view,i=c(n,{$view:r,$el:t});t.innerHTML=void 0!==i?i:n},if:function(e){var t=e.el,n=e.value,r=e.view,i=!!c(n,{$view:r,$el:t});t.hidden=!i},model:function(e){var t=e.el,n=e.value,r=e.view;t.value=r[n];var i=function(){var e="number"==typeof r[n]&&!isNaN(t.value),i="boolean"==typeof r[n]&&("true"===t.value||"false"===t.value),o=!(null!==r[n]&&void 0!==r[n]||"null"!==t.value&&"undefined"!==t.value);e?r[n]=Number(t.value).toPrecision():i?r[n]=Boolean(t.value):o?"null"===t.value?r[n]=null:r[n]=void 0:r[n]=t.value};t.oninput=i,i()},on:function(e){var t=e.el,n=e.name,r=e.value,i=e.view,o=n.split("."),u=o[0].split(":")[1],l=o[1]||null;t["on"+u]=function(e){"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),c(r,{$view:i,$el:t},!1)}},text:function(e){var t=e.el,n=e.value,r=e.view,i=c(n,{$view:r,$el:t});t.textContent=null!=i?i:n}},d=function(e){var t=e.el,n=e.name,r=e.value,i=e.view,o=n.split(/:|\./)[0];f[o]({el:t,name:n,value:r,view:i})},p=function(e,r,i,o){if(void 0===r&&(r={}),void 0===i&&(i=[]),void 0===o&&(o=!1),e){for(var u=0,l=e.children;u<l.length;u++){var a=l[u];if("string"!=typeof a){if(a.type>t){var s=a.props,v=s.attributes,c=s.directives,f=s.sel,m=[],h=function(e){var t=c[e],n=i.some((function(e){return t.toString().includes(e)})),o=Object.keys(r).some((function(e){return"function"==typeof r[e]&&i.some((function(t){return r[e].toString().includes("this."+t)}))}));(n||o)&&m.push(e)};for(var y in c)h(y);a.type===n&&(a.type=t);for(var b=0,w=m;b<w.length;b++){var g=w[b],N=c[g],A=v.id?document.getElementById(v.id):document.querySelector(f);d({el:A,name:g,value:N,view:r})}}a=p(a,r,i,!0)}}return o?e:void 0}},m=function(e,t){var n=function(n,r){t("length"===r?Object.keys(e).filter((function(t){return e[t]instanceof Array&&(r=n,i=e[t],r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]})));var r,i})):[r])},r={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(e,t,r){return e[t]=r,n(e,t),!0},deleteProperty:function(e,t){return delete e[t],n(e,t),!0}};return new Proxy(e,r)},h=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=m(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){p(this.vdom,this.view,e)},e.prototype._compile=function(e){return v(e,this.view)},e}(),y=function(e){return new h(e)},b=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var n=0,r=Array.from(e.querySelectorAll("["+(o+t)+"]"));n<r.length;n++){var i=r[n],u=i.getAttribute(o+t);if(null===u)return;try{y(c(u)).mount(i)}catch(e){}}};return document.addEventListener("DOMContentLoaded",(function(){return b(document,"init")})),e.App=h,e.compile=v,e.compute=c,e.createApp=y,e.directives=f,e.h=i,e.init=b,e.observer=m,e.patch=p,e.props=u,e.render=d,e.selector=s,e.use=function(e,t){for(var n=0,r=Array.from(document.querySelectorAll("[l-use]"));n<r.length;n++){var i=r[n];if(i.getAttribute("l-use")===e){var o=y(t);return o.mount(i),o}}},e}({}); | ||
var Lucia=function(e){var t=0,n=1,i=2,r=function(e,t,n,i,r,o){return void 0===t&&(t={}),void 0===n&&(n={}),void 0===i&&(i=[]),void 0===r&&(r=0),{tag:e,props:{attributes:t,directives:n,sel:o},children:i,type:r}},o="l-",u=function(e){var t={},n={};if((e=e).attributes)for(var i=0,r=Array.prototype.slice.call(e.attributes);i<r.length;i++){var u=r[i],l=u.name,a=u.value;l.startsWith(o)?n[l.slice(o.length)]=a:t[l]=a}return{attributes:t,directives:n}},l=function(e,o,l){var a=u(e),s=a.attributes,v=a.directives,c=t,f=Object.keys(v).length>0,d=Object.values(v).some((function(e){return Object.keys(o).some((function(t){return e.includes(t)}))}));return f&&(c=n),d&&(c=i),r(e.tagName.toLowerCase(),s,v,l,c,c===t||s.id?void 0:e)},a=function(e,t,n){if(void 0===t&&(t={}),void 0===n&&(n=!1),!e)throw new Error("Please provide a Element");for(var i=[],r=0,o=Array.prototype.slice.call(e.childNodes);r<o.length;r++){var u=o[r];switch(u.nodeType){case Node.TEXT_NODE:i.push(u.nodeValue);break;case Node.ELEMENT_NODE:i.push(l(u,t,a(u,t,!0)))}}return n?i:l(e,t,i)},s=function(e,t,n){return void 0===t&&(t={}),void 0===n&&(n=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(n?"return "+e:e)+"}").bind(t)()},v={bind:function(e){var t=e.el,n=e.name,i=e.value,r=e.view;switch(n.split(":")[1]){case"class":var o=s(i,{$view:r,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var l in o)o[l]&&u.push(l);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var a=s(i,{$view:r,$el:t});for(var l in t.removeAttribute("style"),a)t.style[l]=a[l];break;default:var v=s(i,{$view:r,$el:t});v?t.setAttribute(n.split(":")[1],v):t.removeAttribute(n.split(":")[1])}},join:function(e){var t=e.el,n=e.value,i=e.view,r=n.split("by "),o=s(r[0],{$view:i,$el:t});t.innerHTML=void 0!==o?o.join(r[1]||""):r[0].join(r[1]||"")},html:function(e){var t=e.el,n=e.value,i=e.view,r=s(n,{$view:i,$el:t});t.innerHTML=void 0!==r?r:n},if:function(e){var t=e.el,n=e.value,i=e.view,r=!!s(n,{$view:i,$el:t});t.hidden=!r},model:function(e){var t=e.el,n=e.value,i=e.view;t.value=i[n];var r=function(){var e="number"==typeof i[n]&&!isNaN(t.value),r="boolean"==typeof i[n]&&("true"===t.value||"false"===t.value),o=!(null!==i[n]&&void 0!==i[n]||"null"!==t.value&&"undefined"!==t.value);e?i[n]=Number(t.value).toPrecision():r?i[n]=Boolean(t.value):o?"null"===t.value?i[n]=null:i[n]=void 0:i[n]=t.value};t.oninput=r,r()},on:function(e){var t=e.el,n=e.name,i=e.value,r=e.view,o=n.split("."),u=o[0].split(":")[1],l=o[1]||null;t["on"+u]=function(e){"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),s(i,{$view:r,$el:t},!1)}},text:function(e){var t=e.el,n=e.value,i=e.view,r=s(n,{$view:i,$el:t});t.textContent=null!=r?r:n}},c=function(e){var t=e.el,n=e.name,i=e.value,r=e.view,o=n.split(/:|\./)[0];v[o]({el:t,name:n,value:i,view:r})},f=function(e,i,r){if(void 0===i&&(i={}),void 0===r&&(r=[]),e)for(var o=0,u=e.children;o<u.length;o++){var l=u[o];if("string"!=typeof l){if(l.type>t){var a=l.props,s=a.attributes,v=a.directives,d=a.sel,p=[],h=function(e){var t=v[e],n=r.some((function(e){return t.toString().includes(e)})),o=Object.keys(i).some((function(e){return"function"==typeof i[e]&&r.some((function(t){return i[e].toString().includes("this."+t)}))}));(n||o)&&p.push(e)};for(var m in v)h(m);l.type===n&&(l.type=t);for(var y=0,w=p;y<w.length;y++){var b=w[y],g=v[b],A=s.id?document.getElementById(s.id):d;c({el:A,name:b,value:g,view:i})}}l.children.length>0&&f(l,i,r)}}},d=function(e,t,n,i){if("length"===t){var r=Object.keys(n).filter((function(t){return n[t]instanceof Array&&(i=e,r=n[t],i instanceof Array&&r instanceof Array&&i.length===r.length&&i.every((function(e,t){return e===r[t]})));var i,r}));0!==r.length&&i(r)}else i([t])},p=function(e,t){var n={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(n,i,r){return n[i]=r,d(n,i,e,t),!0},deleteProperty:function(n,i){return delete n[i],d(n,i,e,t),!0}};return new Proxy(e,n)},h=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=p(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){f(this.vdom,this.view,e)},e.prototype._compile=function(e){return a(e,this.view)},e}(),m=function(e){return new h(e)},y=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var n=0,i=Array.from(e.querySelectorAll("["+(o+t)+"]"));n<i.length;n++){var r=i[n],u=r.getAttribute(o+t);if(null===u)return;try{m(s(u)).mount(r)}catch(e){}}};return document.addEventListener("DOMContentLoaded",(function(){return y(document,"init")})),e.App=h,e.compile=a,e.compute=s,e.createApp=m,e.directives=v,e.h=r,e.init=y,e.observer=p,e.patch=f,e.props=u,e.render=c,e.use=function(e,t){for(var n=0,i=Array.from(document.querySelectorAll("[l-use]"));n<i.length;n++){var r=i[n];if(r.getAttribute("l-use")===e){var o=m(t);return o.mount(r),o}}},Object.defineProperty(e,"__esModule",{value:!0}),e}({}); |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
(global = global || self, factory(global.Lucia = {})); | ||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Lucia = {})); | ||
}(this, (function (exports) { | ||
@@ -32,4 +32,5 @@ var VNodeTypes = { | ||
var directives = {}; | ||
el = el; | ||
if (el.attributes) { | ||
for (var _i = 0, _a = el.attributes; _i < _a.length; _i++) { | ||
for (var _i = 0, _a = Array.prototype.slice.call(el.attributes); _i < _a.length; _i++) { | ||
var _b = _a[_i], name_1 = _b.name, value = _b.value; | ||
@@ -47,54 +48,15 @@ if (name_1.startsWith(DIRECTIVE_PREFIX)) { | ||
var parentElements = function (el) { | ||
var parents = []; | ||
while (el) { | ||
var tagName = el.nodeName.toLowerCase(); | ||
var cssId = el.id ? "#" + el.id : ''; | ||
var cssClass = ''; | ||
if (el.className && typeof el.className === 'string') { | ||
cssClass = "." + el.className.replace(/\s+/g, '.').replace(/[:*+?^${}()|[\]\\]/gi, '\\$&'); | ||
} | ||
parents.unshift({ | ||
el: el, | ||
selector: tagName + cssId + cssClass, | ||
}); | ||
el = el.parentNode !== document ? el.parentNode : false; | ||
} | ||
return parents; | ||
var createVNode = function (el, view, children) { | ||
var _a = props(el), attributes = _a.attributes, directives = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC || attributes.id ? undefined : el); | ||
}; | ||
var nthElement = function (el) { | ||
var element = el; | ||
var nth = 1; | ||
while (element.previousElementSibling !== null) { | ||
if (element.previousElementSibling.nodeName === el.nodeName) | ||
nth++; | ||
element = element.previousElementSibling; | ||
} | ||
return nth; | ||
}; | ||
var nthSelectorNeeded = function (selector, path) { | ||
var querySelector = path === '' ? selector : path + " > " + selector; | ||
return document.querySelectorAll(querySelector).length > 1; | ||
}; | ||
var buildPathString = function (parents) { | ||
var pathArr = []; | ||
for (var _i = 0, parents_1 = parents; _i < parents_1.length; _i++) { | ||
var parent_1 = parents_1[_i]; | ||
if (nthSelectorNeeded(parent_1.selector, pathArr.join(' > '))) { | ||
parent_1.selector += ":nth-of-type(" + nthElement(parent_1.el) + ")"; | ||
} | ||
pathArr.push(parent_1.selector); | ||
} | ||
for (var _a = 0, pathArr_1 = pathArr; _a < pathArr_1.length; _a++) { | ||
var path = pathArr_1[_a]; | ||
if (path.includes('#')) { | ||
pathArr = pathArr.slice(pathArr.indexOf(path)); | ||
} | ||
} | ||
return pathArr.join(' > '); | ||
}; | ||
var selector = function (el) { | ||
return buildPathString(parentElements(el)); | ||
}; | ||
var compile = function (el, view, callSelf) { | ||
@@ -114,30 +76,10 @@ if (view === void 0) { view = {}; } | ||
case Node.ELEMENT_NODE: | ||
var _a = props(child), attributes_1 = _a.attributes, directives_1 = _a.directives; | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives_1).length > 0; | ||
var hasKeyInDirectives = Object.values(directives_1).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
children.push(h(child.tagName.toLowerCase(), attributes_1, directives_1, compile(child, view, true), type, type === VNodeTypes.STATIC ? undefined : selector(child))); | ||
children.push(createVNode(child, view, compile(child, view, true))); | ||
break; | ||
} | ||
} | ||
var _b = props(el), attributes = _b.attributes, directives = _b.directives; | ||
if (callSelf) | ||
return children; | ||
else { | ||
var type = VNodeTypes.STATIC; | ||
var hasDirectives = Object.keys(directives).length > 0; | ||
var hasKeyInDirectives = Object.values(directives).some(function (value) { | ||
return Object.keys(view).some(function (key) { return value.includes(key); }); | ||
}); | ||
if (hasDirectives) | ||
type = VNodeTypes.NEEDS_PATCH; | ||
if (hasKeyInDirectives) | ||
type = VNodeTypes.DYNAMIC; | ||
return h(el.tagName.toLowerCase(), attributes, directives, children, type, type === VNodeTypes.STATIC ? undefined : selector(el)); | ||
return createVNode(el, view, children); | ||
} | ||
@@ -290,14 +232,13 @@ }; | ||
var patch = function (originVNode, view, keys, callSelf) { | ||
var patch = function (originVNode, view, keys) { | ||
if (view === void 0) { view = {}; } | ||
if (keys === void 0) { keys = []; } | ||
if (callSelf === void 0) { callSelf = false; } | ||
if (!originVNode) | ||
return; | ||
for (var _i = 0, _a = originVNode.children; _i < _a.length; _i++) { | ||
var vnode = _a[_i]; | ||
if (typeof vnode === 'string') | ||
var node = _a[_i]; | ||
if (typeof node === 'string') | ||
continue; | ||
if (vnode.type > VNodeTypes.STATIC) { | ||
var _b = vnode.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
if (node.type > VNodeTypes.STATIC) { | ||
var _b = node.props, attributes = _b.attributes, directives = _b.directives, sel = _b.sel; | ||
var affectedDirectives = []; | ||
@@ -318,4 +259,4 @@ var _loop_1 = function (name_1) { | ||
} | ||
if (vnode.type === VNodeTypes.NEEDS_PATCH) { | ||
vnode.type = VNodeTypes.STATIC; | ||
if (node.type === VNodeTypes.NEEDS_PATCH) { | ||
node.type = VNodeTypes.STATIC; | ||
} | ||
@@ -325,5 +266,3 @@ for (var _c = 0, affectedDirectives_1 = affectedDirectives; _c < affectedDirectives_1.length; _c++) { | ||
var value = directives[name_2]; | ||
var el = attributes.id | ||
? document.getElementById(attributes.id) | ||
: document.querySelector(sel); | ||
var el = attributes.id ? document.getElementById(attributes.id) : sel; | ||
render({ | ||
@@ -337,6 +276,5 @@ el: el, | ||
} | ||
vnode = patch(vnode, view, keys, true); | ||
if (node.children.length > 0) | ||
patch(node, view, keys); | ||
} | ||
if (callSelf) | ||
return originVNode; | ||
}; | ||
@@ -351,13 +289,15 @@ | ||
var handleArray = function (target, key, view, patch) { | ||
if (key === 'length') { | ||
var affectedKeys = Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
}); | ||
if (affectedKeys.length !== 0) | ||
patch(affectedKeys); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var observer = function (view, patch) { | ||
var handleArray = function (target, key) { | ||
if (key === 'length') { | ||
patch(Object.keys(view).filter(function (key) { | ||
return view[key] instanceof Array && arrayEquals(target, view[key]); | ||
})); | ||
} | ||
else { | ||
patch([key]); | ||
} | ||
}; | ||
var handler = { | ||
@@ -374,3 +314,3 @@ get: function (target, key) { | ||
target[key] = value; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -380,3 +320,3 @@ }, | ||
delete target[key]; | ||
handleArray(target, key); | ||
handleArray(target, key, view, patch); | ||
return true; | ||
@@ -452,3 +392,2 @@ }, | ||
exports.render = render; | ||
exports.selector = selector; | ||
exports.use = use; | ||
@@ -455,0 +394,0 @@ |
@@ -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(e){var t=0,n=1,r=2,i=function(e,t,n,r,i,o){return void 0===t&&(t={}),void 0===n&&(n={}),void 0===r&&(r=[]),void 0===i&&(i=0),{tag:e,props:{attributes:t,directives:n,sel:o},children:r,type:i}},o="l-",u=function(e){var t={},n={};if(e.attributes)for(var r=0,i=e.attributes;r<i.length;r++){var u=i[r],l=u.name,a=u.value;l.startsWith(o)?n[l.slice(o.length)]=a:t[l]=a}return{attributes:t,directives:n}},l=function(e){for(var t=e,n=1;null!==t.previousElementSibling;)t.previousElementSibling.nodeName===e.nodeName&&n++,t=t.previousElementSibling;return n},a=function(e,t){var n=""===t?e:t+" > "+e;return document.querySelectorAll(n).length>1},s=function(e){return function(e){for(var t=[],n=0,r=e;n<r.length;n++){var i=r[n];a(i.selector,t.join(" > "))&&(i.selector+=":nth-of-type("+l(i.el)+")"),t.push(i.selector)}for(var o=0,u=t;o<u.length;o++){var s=u[o];s.includes("#")&&(t=t.slice(t.indexOf(s)))}return t.join(" > ")}(function(e){for(var t=[];e;){var n=e.nodeName.toLowerCase(),r=e.id?"#"+e.id:"",i="";e.className&&"string"==typeof e.className&&(i="."+e.className.replace(/\s+/g,".").replace(/[:*+?^${}()|[\]\\]/gi,"\\$&")),t.unshift({el:e,selector:n+r+i}),e=e.parentNode!==document&&e.parentNode}return t}(e))},c=function(e,o,l){if(void 0===o&&(o={}),void 0===l&&(l=!1),!e)throw new Error("Please provide a Element");for(var a=[],v=0,f=Array.prototype.slice.call(e.childNodes);v<f.length;v++){var d=f[v];switch(d.nodeType){case Node.TEXT_NODE:a.push(d.nodeValue);break;case Node.ELEMENT_NODE:var p=u(d),m=p.attributes,h=p.directives,y=t,b=Object.keys(h).length>0,w=Object.values(h).some((function(e){return Object.keys(o).some((function(t){return e.includes(t)}))}));b&&(y=n),w&&(y=r),a.push(i(d.tagName.toLowerCase(),m,h,c(d,o,!0),y,y===t?void 0:s(d)))}}var g=u(e),N=g.attributes,A=g.directives;if(l)return a;y=t,b=Object.keys(A).length>0,w=Object.values(A).some((function(e){return Object.keys(o).some((function(t){return e.includes(t)}))}));return b&&(y=n),w&&(y=r),i(e.tagName.toLowerCase(),N,A,a,y,y===t?void 0:s(e))},v=function(e,t,n){return void 0===t&&(t={}),void 0===n&&(n=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(n?"return "+e:e)+"}").bind(t)()},f={bind:function(e){var t=e.el,n=e.name,r=e.value,i=e.view;switch(n.split(":")[1]){case"class":var o=v(r,{$view:i,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var l in o)o[l]&&u.push(l);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var a=v(r,{$view:i,$el:t});for(var l in t.removeAttribute("style"),a)t.style[l]=a[l];break;default:var s=v(r,{$view:i,$el:t});s?t.setAttribute(n.split(":")[1],s):t.removeAttribute(n.split(":")[1])}},join:function(e){var t=e.el,n=e.value,r=e.view,i=n.split("by "),o=v(i[0],{$view:r,$el:t});t.innerHTML=void 0!==o?o.join(i[1]||""):i[0].join(i[1]||"")},html:function(e){var t=e.el,n=e.value,r=e.view,i=v(n,{$view:r,$el:t});t.innerHTML=void 0!==i?i:n},if:function(e){var t=e.el,n=e.value,r=e.view,i=!!v(n,{$view:r,$el:t});t.hidden=!i},model:function(e){var t=e.el,n=e.value,r=e.view;t.value=r[n];var i=function(){var e="number"==typeof r[n]&&!isNaN(t.value),i="boolean"==typeof r[n]&&("true"===t.value||"false"===t.value),o=!(null!==r[n]&&void 0!==r[n]||"null"!==t.value&&"undefined"!==t.value);e?r[n]=Number(t.value).toPrecision():i?r[n]=Boolean(t.value):o?"null"===t.value?r[n]=null:r[n]=void 0:r[n]=t.value};t.oninput=i,i()},on:function(e){var t=e.el,n=e.name,r=e.value,i=e.view,o=n.split("."),u=o[0].split(":")[1],l=o[1]||null;t["on"+u]=function(e){"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),v(r,{$view:i,$el:t},!1)}},text:function(e){var t=e.el,n=e.value,r=e.view,i=v(n,{$view:r,$el:t});t.textContent=null!=i?i:n}},d=function(e){var t=e.el,n=e.name,r=e.value,i=e.view,o=n.split(/:|\./)[0];f[o]({el:t,name:n,value:r,view:i})},p=function(e,r,i,o){if(void 0===r&&(r={}),void 0===i&&(i=[]),void 0===o&&(o=!1),e){for(var u=0,l=e.children;u<l.length;u++){var a=l[u];if("string"!=typeof a){if(a.type>t){var s=a.props,c=s.attributes,v=s.directives,f=s.sel,m=[],h=function(e){var t=v[e],n=i.some((function(e){return t.toString().includes(e)})),o=Object.keys(r).some((function(e){return"function"==typeof r[e]&&i.some((function(t){return r[e].toString().includes("this."+t)}))}));(n||o)&&m.push(e)};for(var y in v)h(y);a.type===n&&(a.type=t);for(var b=0,w=m;b<w.length;b++){var g=w[b],N=v[g],A=c.id?document.getElementById(c.id):document.querySelector(f);d({el:A,name:g,value:N,view:r})}}a=p(a,r,i,!0)}}return o?e:void 0}},m=function(e,t){var n=function(n,r){t("length"===r?Object.keys(e).filter((function(t){return e[t]instanceof Array&&(r=n,i=e[t],r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]})));var r,i})):[r])},r={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],r):e[t]},set:function(e,t,r){return e[t]=r,n(e,t),!0},deleteProperty:function(e,t){return delete e[t],n(e,t),!0}};return new Proxy(e,r)},h=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=m(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){p(this.vdom,this.view,e)},e.prototype._compile=function(e){return c(e,this.view)},e}(),y=function(e){return new h(e)},b=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var n=0,r=Array.from(e.querySelectorAll("["+(o+t)+"]"));n<r.length;n++){var i=r[n],u=i.getAttribute(o+t);if(null===u)return;try{y(v(u)).mount(i)}catch(e){}}};document.addEventListener("DOMContentLoaded",(function(){return b(document,"init")})),e.App=h,e.compile=c,e.compute=v,e.createApp=y,e.directives=f,e.h=i,e.init=b,e.observer=m,e.patch=p,e.props=u,e.render=d,e.selector=s,e.use=function(e,t){for(var n=0,r=Array.from(document.querySelectorAll("[l-use]"));n<r.length;n++){var i=r[n];if(i.getAttribute("l-use")===e){var o=y(t);return o.mount(i),o}}},Object.defineProperty(e,"__esModule",{value:!0})})); | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Lucia={})}(this,(function(e){var t=0,n=1,i=2,r=function(e,t,n,i,r,o){return void 0===t&&(t={}),void 0===n&&(n={}),void 0===i&&(i=[]),void 0===r&&(r=0),{tag:e,props:{attributes:t,directives:n,sel:o},children:i,type:r}},o="l-",u=function(e){var t={},n={};if((e=e).attributes)for(var i=0,r=Array.prototype.slice.call(e.attributes);i<r.length;i++){var u=r[i],l=u.name,a=u.value;l.startsWith(o)?n[l.slice(o.length)]=a:t[l]=a}return{attributes:t,directives:n}},l=function(e,o,l){var a=u(e),s=a.attributes,v=a.directives,c=t,f=Object.keys(v).length>0,d=Object.values(v).some((function(e){return Object.keys(o).some((function(t){return e.includes(t)}))}));return f&&(c=n),d&&(c=i),r(e.tagName.toLowerCase(),s,v,l,c,c===t||s.id?void 0:e)},a=function(e,t,n){if(void 0===t&&(t={}),void 0===n&&(n=!1),!e)throw new Error("Please provide a Element");for(var i=[],r=0,o=Array.prototype.slice.call(e.childNodes);r<o.length;r++){var u=o[r];switch(u.nodeType){case Node.TEXT_NODE:i.push(u.nodeValue);break;case Node.ELEMENT_NODE:i.push(l(u,t,a(u,t,!0)))}}return n?i:l(e,t,i)},s=function(e,t,n){return void 0===t&&(t={}),void 0===n&&(n=!0),new Function("with("+(0===Object.keys(t).length?"this":"this.$view")+") {"+(n?"return "+e:e)+"}").bind(t)()},v={bind:function(e){var t=e.el,n=e.name,i=e.value,r=e.view;switch(n.split(":")[1]){case"class":var o=s(i,{$view:r,$el:t});if("string"==typeof o)return t.setAttribute("class",(t.className+" "+o).trim());if(o instanceof Array)return t.setAttribute("class",t.className+" "+o.join(" ").trim());var u=[];for(var l in o)o[l]&&u.push(l);return u.length>0?t.setAttribute("class",(t.className+" "+u.join(" ").trim()).trim()):t.className.length.trim()>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var a=s(i,{$view:r,$el:t});for(var l in t.removeAttribute("style"),a)t.style[l]=a[l];break;default:var v=s(i,{$view:r,$el:t});v?t.setAttribute(n.split(":")[1],v):t.removeAttribute(n.split(":")[1])}},join:function(e){var t=e.el,n=e.value,i=e.view,r=n.split("by "),o=s(r[0],{$view:i,$el:t});t.innerHTML=void 0!==o?o.join(r[1]||""):r[0].join(r[1]||"")},html:function(e){var t=e.el,n=e.value,i=e.view,r=s(n,{$view:i,$el:t});t.innerHTML=void 0!==r?r:n},if:function(e){var t=e.el,n=e.value,i=e.view,r=!!s(n,{$view:i,$el:t});t.hidden=!r},model:function(e){var t=e.el,n=e.value,i=e.view;t.value=i[n];var r=function(){var e="number"==typeof i[n]&&!isNaN(t.value),r="boolean"==typeof i[n]&&("true"===t.value||"false"===t.value),o=!(null!==i[n]&&void 0!==i[n]||"null"!==t.value&&"undefined"!==t.value);e?i[n]=Number(t.value).toPrecision():r?i[n]=Boolean(t.value):o?"null"===t.value?i[n]=null:i[n]=void 0:i[n]=t.value};t.oninput=r,r()},on:function(e){var t=e.el,n=e.name,i=e.value,r=e.view,o=n.split("."),u=o[0].split(":")[1],l=o[1]||null;t["on"+u]=function(e){"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),s(i,{$view:r,$el:t},!1)}},text:function(e){var t=e.el,n=e.value,i=e.view,r=s(n,{$view:i,$el:t});t.textContent=null!=r?r:n}},c=function(e){var t=e.el,n=e.name,i=e.value,r=e.view,o=n.split(/:|\./)[0];v[o]({el:t,name:n,value:i,view:r})},f=function(e,i,r){if(void 0===i&&(i={}),void 0===r&&(r=[]),e)for(var o=0,u=e.children;o<u.length;o++){var l=u[o];if("string"!=typeof l){if(l.type>t){var a=l.props,s=a.attributes,v=a.directives,d=a.sel,p=[],h=function(e){var t=v[e],n=r.some((function(e){return t.toString().includes(e)})),o=Object.keys(i).some((function(e){return"function"==typeof i[e]&&r.some((function(t){return i[e].toString().includes("this."+t)}))}));(n||o)&&p.push(e)};for(var m in v)h(m);l.type===n&&(l.type=t);for(var y=0,b=p;y<b.length;y++){var w=b[y],g=v[w],A=s.id?document.getElementById(s.id):d;c({el:A,name:w,value:g,view:i})}}l.children.length>0&&f(l,i,r)}}},d=function(e,t,n,i){if("length"===t){var r=Object.keys(n).filter((function(t){return n[t]instanceof Array&&(i=e,r=n[t],i instanceof Array&&r instanceof Array&&i.length===r.length&&i.every((function(e,t){return e===r[t]})));var i,r}));0!==r.length&&i(r)}else i([t])},p=function(e,t){var n={get:function(e,t){return"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t]},set:function(n,i,r){return n[i]=r,d(n,i,e,t),!0},deleteProperty:function(n,i){return delete n[i],d(n,i,e,t),!0}};return new Proxy(e,n)},h=function(){function e(e){void 0===e&&(e={}),this.vdom=null,this.view=e}return e.prototype.mount=function(e){return this.vdom=this._compile("string"==typeof e?document.querySelector(e):e),this.view=p(this.view,this._patch.bind(this)),this._patch(Object.keys(this.view)),this.view},e.prototype._patch=function(e){f(this.vdom,this.view,e)},e.prototype._compile=function(e){return a(e,this.view)},e}(),m=function(e){return new h(e)},y=function(e,t){void 0===e&&(e=document),void 0===t&&(t="use");for(var n=0,i=Array.from(e.querySelectorAll("["+(o+t)+"]"));n<i.length;n++){var r=i[n],u=r.getAttribute(o+t);if(null===u)return;try{m(s(u)).mount(r)}catch(e){}}};document.addEventListener("DOMContentLoaded",(function(){return y(document,"init")})),e.App=h,e.compile=a,e.compute=s,e.createApp=m,e.directives=v,e.h=r,e.init=y,e.observer=p,e.patch=f,e.props=u,e.render=c,e.use=function(e,t){for(var n=0,i=Array.from(document.querySelectorAll("[l-use]"));n<i.length;n++){var r=i[n];if(r.getAttribute("l-use")===e){var o=m(t);return o.mount(r),o}}},Object.defineProperty(e,"__esModule",{value:!0})})); |
@@ -6,6 +6,5 @@ import { h, VNode } from './vdom/h'; | ||
import { props } from './vdom/helpers/props'; | ||
import selector from './vdom/helpers/selector'; | ||
import compute from './utils/compute'; | ||
import { render, directives } from './directives/render'; | ||
export { h, compile, patch, observer, props, selector, compute, render, directives }; | ||
export { h, compile, patch, observer, props, compute, render, directives }; | ||
export declare class App { | ||
@@ -12,0 +11,0 @@ vdom: VNode | null; |
@@ -5,15 +5,12 @@ export interface VNode { | ||
children: (VNode | string)[]; | ||
type: number; | ||
type: VNodeType; | ||
} | ||
export interface VNodeProps { | ||
sel?: string; | ||
sel?: Element; | ||
attributes: Record<string, string>; | ||
directives: Record<string, string>; | ||
} | ||
export declare const VNodeTypes: { | ||
STATIC: number; | ||
NEEDS_PATCH: number; | ||
DYNAMIC: number; | ||
}; | ||
export declare const h: (tag: string, attributes?: Record<string, string>, directives?: Record<string, string>, children?: (VNode | string)[], type?: number, sel?: string | undefined) => VNode; | ||
export declare type VNodeType = 0 | 1 | 2; | ||
export declare const VNodeTypes: Record<string, VNodeType>; | ||
export declare const h: (tag: string, attributes?: Record<string, string>, directives?: Record<string, string>, children?: (VNode | string)[], type?: VNodeType, sel?: Element | undefined) => VNode; | ||
export default h; |
export declare const DIRECTIVE_PREFIX = "l-"; | ||
export declare const props: (el: Record<string, any>) => Record<string, any>; | ||
export declare const props: (el: Element | null) => Record<string, any>; | ||
export default props; |
import { VNode } from './h'; | ||
declare const patch: (originVNode: VNode | null, view?: Record<string, any>, keys?: string[], callSelf?: boolean) => Record<any, any> | any; | ||
declare const patch: (originVNode: VNode | null, view?: Record<string, any>, keys?: string[]) => Record<any, any> | any; | ||
export default patch; |
{ | ||
"name": "lucia", | ||
"version": "0.2.1", | ||
"version": "0.2.2", | ||
"description": "Tiny library for tiny web apps.", | ||
@@ -40,4 +40,4 @@ "main": "dist/lucia.cjs.js", | ||
"devDependencies": { | ||
"@rollup/plugin-commonjs": "13.0.0", | ||
"@rollup/plugin-node-resolve": "8.0.1", | ||
"@rollup/plugin-commonjs": "16.0.0", | ||
"@rollup/plugin-node-resolve": "10.0.0", | ||
"coveralls": "^3.1.0", | ||
@@ -47,7 +47,7 @@ "del-cli": "^3.0.1", | ||
"prettier": "^2.1.2", | ||
"rollup": "2.15.0", | ||
"rollup": "2.33.3", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"rollup-plugin-typescript2": "^0.29.0", | ||
"ts-jest": "^26.4.2", | ||
"typescript": "^4.0.3" | ||
"typescript": "^4.1.2" | ||
}, | ||
@@ -54,0 +54,0 @@ "jest": { |
@@ -1,35 +0,35 @@ | ||
[![Lucia](https://raw.githubusercontent.com/aidenybai/lucia/master/.github/img/banner.svg)](https://lucia.js.org) | ||
# <a href="http://lucia.js.org"><img src="https://raw.githubusercontent.com/aidenybai/lucia/master/.github/img/logo.svg" height="60" alt="Lucia Logo" aria-label="http://lucia.js.org" /></a> | ||
![TravisCI Build](https://badgen.net/travis/aidenybai/lucia?color=7460E1&labelColor=1D1E32&style=flat-square&label=build) ![Code Size](https://badgen.net/badgesize/brotli/https/unpkg.com/lucia?color=7460E1&labelColor=1D1E32&style=flat-square&label=size) ![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) ![Code Coverage](https://img.shields.io/coveralls/github/aidenybai/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) | ||
Lucia is a tiny JavaScript library for building web apps. | ||
## What is Lucia? | ||
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/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 (~3kb 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. | ||
- **Lightweight:** Lucia is extremely light 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). | ||
![TravisCI Build](https://badgen.net/travis/aidenybai/lucia?color=7460E1&labelColor=1D1E32&style=flat-square&label=build) ![Code Size](https://badgen.net/badgesize/brotli/https/unpkg.com/lucia?color=7460E1&labelColor=1D1E32&style=flat-square&label=size) ![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) ![Code Coverage](https://img.shields.io/coveralls/github/aidenybai/lucia?color=7460E1&labelColor=1D1E32&style=flat-square) | ||
## Installation | ||
Lucia is currently is installable through a CDN and also supports UMD (Node, Browser, Isomorphic/Universal). Put this within your `<head>` tags in html. | ||
Lucia is currently is installable through a CDN and also supports UMD (ES Module, CommonJS, IIFE). Put this within your `<head>` tags in HTML. | ||
```html | ||
<!-- development version, includes helpful console warnings --> | ||
<script src="https://unpkg.com/lucia/dist/lucia.js"></script> | ||
<script src="https://unpkg.com/lucia"></script> | ||
``` | ||
```html | ||
<!-- production version, optimized for size and speed --> | ||
<script src="https://unpkg.com/lucia@0.2.0"></script> | ||
``` | ||
If you are using a module bunder like [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org): | ||
Another option is installing via if you are using a module bundler such as [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org). | ||
```sh | ||
$ npm install lucia | ||
npm install lucia | ||
``` | ||
For more details, see the [Installation docs page](https://lucia.js.org/docs/essentials/installation). | ||
## Documentation | ||
The Lucia docs are located at [**https://lucia.js.org**](https://lucia.js.org): | ||
- [Introduction](https://lucia.js.org/docs/essentials/introduction) | ||
- [Installation](https://lucia.js.org/docs/essentials/installation) | ||
- [Clicker Game Example](https://lucia.js.org/docs/essentials/introduction#clicker-game-example) | ||
## Example | ||
@@ -47,33 +47,22 @@ | ||
## Documentation | ||
If you're interested in learning more about Lucia, visit [the documentation](https://lucia.js.org). | ||
## Similar Projects | ||
If you're looking for something production-ready and is widely that has a API similar to Lucia, check these projects out! | ||
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. This means if you're looking for something production-ready and is widely that has a API similar to Lucia, check these projects out! | ||
- [Vue](https://github.com/vuejs/vue) - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. | ||
- [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. | ||
- [Remake](https://github.com/remake/remake-cli) - Create interactive web apps with just HTML. | ||
- [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 | ||
## Contributing | ||
Lucia is [MIT licensed](LICENSE.md). | ||
Refer to the [CONTRIBUTING.md](https://github.com/aidenybai/lucia/blob/master/.github/CONTRIBUTING.md) file for instructions. | ||
## Acknowledgements | ||
<a href="https://github.com/aidenybai/lucia/graphs/contributors"><img src="https://opencollective.com/lucialand/contributors.svg?width=890" /></a> | ||
This project could not have been created with the inspiration from dedicated developers of the projects listed below: | ||
## License | ||
- [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. | ||
Lucia is [MIT licensed](LICENSE.md). | ||
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. | ||
\_ヘ(◕‿◕ ✰) |
Major refactor
Supply chain riskPackage 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
0
86877
1616
68