New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More β†’
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

lucia

Package Overview
Dependencies
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lucia - npm Package Compare versions

Comparing version 0.3.7 to 0.3.8

rollup-dev.config.js

134

dist/legacy/lucia.cjs.js

@@ -75,2 +75,4 @@ 'use strict';

var rawDirectiveSplitRE = function () { return /:|\./; };
var eventDirectivePrefixRE = function () { return /on|@/; };
var parenthesisWrapReplaceRE = function () { return /\(|\)/g; };
var hasDirectiveRE = function () {

@@ -81,3 +83,3 @@ return new RegExp("(" + DIRECTIVE_PREFIX + "|" + Object.keys(DIRECTIVE_SHORTHANDS).join('|') + ")\\w+", 'gim');

if (hasThis === void 0) { hasThis = true; }
return new RegExp("" + (hasThis ? 'this\\.' : '') + key + "\\b");
return new RegExp("" + (hasThis ? 'this\\.' : '') + key + "\\b", 'g');
};

@@ -103,3 +105,3 @@

if (classes.length > 0) {
return el.setAttribute('class', (el.className + " " + classes.join(' ').trim()).trim());
return el.setAttribute('class', (el.className + " " + classes.join(' ')).trim());
}

@@ -238,31 +240,61 @@ else if (el.className.trim().length > 0) {

var forDirective = function (_a) {
var e_1, _b, e_2, _c;
var el = _a.el, data = _a.data, app = _a.app;
var _b = __read(data.value.split(/ +in +/g), 2), expression = _b[0], target = _b[1];
var _c = __read(expression.split(','), 2), item = _c[0], index = _c[1];
var hydratedArray = compute(target, { $el: el })(app.state);
var template = String(el.__l_for);
if (template) {
var accumulator = '';
for (var i = 0; i < hydratedArray.length; i++) {
var content = template;
if (item)
content = content.replace(new RegExp("this." + item.trim(), 'g'), target + "[" + i + "]");
if (index)
content = content.replace(new RegExp("this." + index.trim(), 'g'), String(i));
accumulator += content;
}
el.innerHTML = accumulator;
var _d = __read(data.value.split(/in +/g), 2), expression = _d[0], target = _d[1];
var _e = __read(expression.replace(parenthesisWrapReplaceRE(), '').split(','), 2), item = _e[0], index = _e[1];
var currArray = __spread(compute(target, { $el: el })(app.state));
var template = String(el.__l_for_template);
if (template.trim() === '') {
el.innerHTML = currArray.join('');
}
else {
el.innerHTML = hydratedArray.join('');
if (el.innerHTML.trim() === template)
el.innerHTML = '';
var arrayDiff = currArray.length - el.children.length;
if (arrayDiff !== 0) {
for (var i = Math.abs(arrayDiff); i > 0; i--) {
if (arrayDiff < 0)
el.removeChild(el.lastChild);
else {
var temp = document.createElement('div');
var content = template;
if (item) {
content = content.replace(expressionPropRE(item.trim()), target + "[" + (currArray.length - i) + "]");
}
if (index) {
content = content.replace(expressionPropRE(index.trim()), String(currArray.length - i));
}
temp.innerHTML = content;
el.appendChild(temp.firstChild);
}
}
}
}
var scope = createApp(__assign({}, app.state));
Object.entries(app.directives || {}).map(function (_a) {
var _b = __read(_a, 2), name = _b[0], evaluationCallback = _b[1];
scope.directive(name, evaluationCallback);
});
Object.entries(app.components || {}).map(function (_a) {
var _b = __read(_a, 2), name = _b[0], templateCallback = _b[1];
scope.component(name, templateCallback);
});
try {
for (var _f = __values(Object.entries(app.directives || {})), _g = _f.next(); !_g.done; _g = _f.next()) {
var _h = __read(_g.value, 2), name_1 = _h[0], evaluationCallback = _h[1];
scope.directive(name_1, evaluationCallback);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
}
finally { if (e_1) throw e_1.error; }
}
try {
for (var _j = __values(Object.entries(app.components || {})), _k = _j.next(); !_k.done; _k = _j.next()) {
var _l = __read(_k.value, 2), name_2 = _l[0], templateCallback = _l[1];
scope.component(name_2, templateCallback);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
}
finally { if (e_2) throw e_2.error; }
}
scope.mount(el);

@@ -320,7 +352,7 @@ };

var returnable = true;
if (name_1.includes('for') && el.__l_for === undefined) {
el.__l_for = String(el.innerHTML).trim();
if (name_1.includes('for') && el.__l_for_template === undefined) {
el.__l_for_template = String(el.innerHTML).trim();
returnable = false;
}
if (/on|@/.test(name_1))
if (eventDirectivePrefixRE().test(name_1))
returnable = false;

@@ -487,4 +519,5 @@ var directiveData = { compute: compute(value, { $el: el }, returnable), value: value };

var handlePatch = function (target, key, state, patch, needsUpdate) {
var e_1, _a, e_2, _b;
if (needsUpdate === void 0) { needsUpdate = false; }
if (key === 'length') {
if (key === 'length' || target instanceof Array) {
var affectedKeys = Object.keys(state).filter(function (k) {

@@ -498,4 +531,34 @@ return state[k] instanceof Array && arrayEquals(target, state[k]);

else {
var keys = [key];
try {
for (var _c = __values(document.querySelectorAll('[l-for]')), _d = _c.next(); !_d.done; _d = _c.next()) {
var el = _d.value;
var stateKeys = Object.keys(el.__l.state);
if (stateKeys.indexOf(key) !== -1) {
stateKeys.splice(stateKeys.indexOf(key), 1);
try {
for (var stateKeys_1 = (e_2 = void 0, __values(stateKeys)), stateKeys_1_1 = stateKeys_1.next(); !stateKeys_1_1.done; stateKeys_1_1 = stateKeys_1.next()) {
var k = stateKeys_1_1.value;
keys.push(k);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (stateKeys_1_1 && !stateKeys_1_1.done && (_b = stateKeys_1.return)) _b.call(stateKeys_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
if (needsUpdate)
patch([key]);
patch(keys);
return false;

@@ -515,3 +578,3 @@ }

set: function (target, key, value) {
var needsUpdate = target[key] !== value;
var needsUpdate = target[key] !== value || target instanceof Array || typeof target === 'object';
if (needsUpdate) {

@@ -607,3 +670,3 @@ target[key] = value;

if (shallow === void 0) { shallow = false; }
var rootEl = typeof el === 'string' ? document.querySelector(el) : el;
var rootEl = (typeof el === 'string' ? document.querySelector(el) : el);
this.vdom = this.compile(rootEl);

@@ -617,2 +680,4 @@ if (!shallow) {

this.mountHook(this.state);
rootEl.__l = this;
rootEl.setAttribute('data-l-app', '');
return this.state;

@@ -653,5 +718,4 @@ };

var state = new Function("return " + expression)();
var app = createApp(state);
var app = createApp(state || {});
app.mount(el);
el.__l = app;
}

@@ -658,0 +722,0 @@ catch (err) {

2

dist/legacy/lucia.cjs.min.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=function(){return(t=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function e(t){var e="function"==typeof Symbol&&Symbol.iterator,r=e&&t[e],n=0;if(r)return r.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,i,o=r.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(t){i={error:t}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function n(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(r(arguments[e]));return t}var i;!function(t){t["@"]="on",t[":"]="bind"}(i||(i={}));var o=function(){return new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim")},a=function(t,e){return void 0===e&&(e=!0),new RegExp((e?"this\\.":"")+t+"\\b")};function s(t){try{var e=this.returnable?"return "+this.expression:this.expression;return(new(Function.bind.apply(Function,n([void 0],Object.keys(this.argsKV),[e])))).bind(t).apply(void 0,n(Object.values(this.argsKV)))}catch(t){console.warn('Lucia Error: "'+t+'"\n\nExpression: "'+this.expression+'"\nElement:',this.argsKV.$el)}}var l,u=function(t,e,r){return void 0===r&&(r=!0),s.bind({expression:t,argsKV:{$el:e.$el},returnable:r})},c={BIND:function(t){var e=t.el,r=t.name,n=t.data,i=t.app;switch(r.split(":")[1]){case"class":var o=n.compute(i.state);if("string"==typeof o)return e.setAttribute("class",(e.className+" "+o).trim());if(o instanceof Array)return e.setAttribute("class",(e.className+" "+o.join(" ")).trim());var a=[];for(var s in o)o[s]&&a.push(s);return a.length>0?e.setAttribute("class",(e.className+" "+a.join(" ").trim()).trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class");case"style":var l=n.compute(i.state);for(var s in e.removeAttribute("style"),l)e.style[s]=l[s];break;default:var u=n.compute(i.state);if("object"==typeof u&&null!==u)for(var s in u)u[s]?e.setAttribute(s,u[s]):e.removeAttribute(s);else u?e.setAttribute(r.split(":")[1],u):e.removeAttribute(r.split(":")[1])}},HTML:function(e){var n,i=e.el,o=e.data,a=e.app;i.innerHTML=null!==(n=o.compute(a.state))&&void 0!==n?n:o.value;var s=x(t({},a.state));Object.entries(a.directives||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];s.directive(n,i)})),Object.entries(a.components||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];s.component(n,i)})),s.mount(i)},IF:function(t){var e=t.el,r=t.data,n=t.app;r.compute(n.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:function(t){var e=t.el,r=t.data,n=t.app,i=e,o=r.compute(n.state);i.value!==o&&(i.value=o),i.oninput=function(){return function(t,e,r,n){var i,o="number"==typeof e&&!isNaN(t.value),a="boolean"==typeof e&&("true"===t.value||"false"===t.value),s=null==e&&("null"===t.value||"undefined"===t.value);return i=o?"Number('"+t.value+"').toPrecision()":a?"Boolean('"+t.value+"')":s?"null"===t.value?null:void 0:"'"+t.value+"'",u(r.value+" = "+i,{$el:t},!1)(n.state),i}(i,o,r,n)}},ON:function(t){var e=t.el,n=t.name,i=t.data,o=t.app,a=r(n.split("."),2),s=a[0],l=a[1],u=s.split(":")[1],c=l||null;e["on"+u]=function(t){"prevent"===c&&t.preventDefault(),"stop"===c&&t.stopPropagation(),i.compute(o.state)}},TEXT:function(t){var e,r=t.el,n=t.data,i=t.app;r.textContent=null!==(e=n.compute(i.state))&&void 0!==e?e:n.value},FOR:function(e){var n=e.el,i=e.data,o=e.app,a=r(i.value.split(/ +in +/g),2),s=a[0],l=a[1],c=r(s.split(","),2),v=c[0],p=c[1],f=u(l,{$el:n})(o.state),d=String(n.__l_for);if(d){for(var h="",y=0;y<f.length;y++){var m=d;v&&(m=m.replace(new RegExp("this."+v.trim(),"g"),l+"["+y+"]")),p&&(m=m.replace(new RegExp("this."+p.trim(),"g"),String(y))),h+=m}n.innerHTML=h}else n.innerHTML=f.join("");var b=x(t({},o.state));Object.entries(o.directives||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];b.directive(n,i)})),Object.entries(o.components||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];b.component(n,i)})),b.mount(n)}},v=function(t,e){e[t.name.split(/:|\./)[0].toUpperCase()](t)};!function(t){t[t.STATIC=0]="STATIC",t[t.NEEDS_PATCH=1]="NEEDS_PATCH",t[t.DYNAMIC=2]="DYNAMIC"}(l||(l={}));var p=function(e,r,n){void 0===r&&(r=[]);var i=t({},null==n?void 0:n.attributes),o=t({},null==n?void 0:n.directives);return r=r instanceof Array?r:[r],i.className&&(i.className=i.className.trim()),{tag:e,children:r,props:{attributes:i,directives:o,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},f=function(t){var r,o,a={},s={};if(t.attributes)try{for(var l=e(n(t.attributes)),c=l.next();!c.done;c=l.next()){var v=c.value,p=v.name,f=v.value,d=!0;p.includes("for")&&void 0===t.__l_for&&(t.__l_for=String(t.innerHTML).trim(),d=!1),/on|@/.test(p)&&(d=!1);var h={compute:u(f,{$el:t},d),value:f};p.startsWith("l-")?s[p.slice("l-".length)]=h:Object.keys(i).includes(p[0])?s[i[p[0]]+":"+p.slice(1)]=h:a[p]=f}}catch(t){r={error:t}}finally{try{c&&!c.done&&(o=l.return)&&o.call(l)}finally{if(r)throw r.error}}return{attributes:a,directives:s}},d=function(t,e,r){var n=f(t),i=n.attributes,o=n.directives,s=l.STATIC,u=Object.keys(o).length>0,c=Object.values(o).some((function(t){var r=t.value;return Object.keys(e).some((function(t){return a(t,!1).test(r)}))}));return u&&(s=l.NEEDS_PATCH),c&&(s=l.DYNAMIC),p(t.tagName.toLowerCase(),r,{attributes:i,directives:o,ref:s===l.STATIC||i.id?void 0:t,type:s})},h=function(t,n,i,a,s){var l,u,c,v,p,m,b;if(void 0===n&&(n={}),void 0===i&&(i={}),void 0===a&&(a=!1),void 0===s&&(s=!1),!t)throw new Error("Please provide a Element");var g=[],E=Array.prototype.slice.call(t.childNodes);try{for(var x=e(E),A=x.next();!A.done;A=x.next()){var T=A.value;switch(T.nodeType){case Node.TEXT_NODE:!a&&T.nodeValue&&g.push(T.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(i).includes(T.tagName)){var N=document.createElement("div"),j=i[T.tagName]({children:T.innerHTML,state:n});N.innerHTML=j;try{for(var w=(c=void 0,e(Object.entries(f(T).directives))),O=w.next();!O.done;O=w.next()){var _=r(O.value,2),S=_[0],C=_[1];null===(b=N.firstElementChild)||void 0===b||b.setAttribute("l-"+S,C.value)}}catch(t){c={error:t}}finally{try{O&&!O.done&&(v=w.return)&&v.call(w)}finally{if(c)throw c.error}}if(!a||o().test(N.outerHTML)){var L=h(N,n,i,a,!0);try{for(var H=(p=void 0,e(L)),I=H.next();!I.done;I=H.next()){var M=I.value;g.push(M)}}catch(t){p={error:t}}finally{try{I&&!I.done&&(m=H.return)&&m.call(H)}finally{if(p)throw p.error}}}t.replaceChild(N.firstElementChild,T)}else if(!a||o().test(T.outerHTML)){L=h(T,n,i,a,!0);var k=d(T,n,L);g.push(k)}}}}catch(t){l={error:t}}finally{try{A&&!A.done&&(u=x.return)&&u.call(x)}finally{if(l)throw l.error}}if(s)return g;var D=d(t,n,g);return a?y(D):D},y=function(r){var i,o,a=t({},r);a.children=a.children.filter((function(t){return"object"==typeof t&&t.props.type>0}));try{for(var s=e(r.children),l=s.next();!l.done;l=s.next()){var u=l.value;"string"!=typeof u&&(u.children.length>0&&(a.children=n(a.children,y({children:u.children}).children),u.children=[]))}}catch(t){i={error:t}}finally{try{l&&!l.done&&(o=s.return)&&o.call(s)}finally{if(i)throw i.error}}return a},m=function(t,e,r,n,i){if(void 0===i&&(i=!1),"length"===e){var o=Object.keys(r).filter((function(e){return r[e]instanceof Array&&(n=t,i=r[e],n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(t,e){return t===i[e]})));var n,i}));return 0!==o.length&&n(o),!0}return i&&n([e]),!1},b=function(t,e){var r={get:function(t,e){return"object"==typeof t[e]&&null!==t[e]?new Proxy(t[e],r):t[e]},set:function(r,n,i){var o=r[n]!==i;return o&&(r[n]=i),m(r,n,t,e,o),!0},deleteProperty:function(r,n){return delete r[n],m(r,n,t,e,!0),!0}};return new Proxy(t,r)},g=function(r,n,i){var o,s;void 0===n&&(n={});var u=!1,c=n.state||{};if(r){i||(i=Object.keys(c)),"%LUCIA_FIRST_RENDER%"===i[0]&&(u=!0);var p=function(e){if("string"==typeof e)return"continue";if(e.props.type>l.STATIC){var r=e.props,o=r.attributes,s=r.directives,p=r.ref,f=r.type,d=[];if(!u){var h=function(t){var e=1===f,r=i.some((function(e){return a(e).test(String(s[t].value))})),n=Object.keys(c).some((function(t){var e=i.some((function(e){return a(e).test(String(c[t]))}));return"function"==typeof c[t]&&e}));(e||r||n)&&d.push(t)};for(var y in s)h(y)}e.props.type=f===l.NEEDS_PATCH?l.STATIC:f,(u?Object.keys(s):d).map((function(e){var r=s[e],i=o.id?document.getElementById(o.id):p;v({el:i,name:e,data:r,app:n},t({},n.directives))}))}e.children.length>0&&g(e,n,i)};try{for(var f=e(r.children),d=f.next();!d.done;d=f.next()){p(d.value)}}catch(t){o={error:t}}finally{try{d&&!d.done&&(s=f.return)&&s.call(f)}finally{if(o)throw o.error}}}},E=function(){function e(t,e){void 0===t&&(t={}),this.state=t,this.directives={},this.components={},this.mountHook=e}return e.prototype.mount=function(e,r){void 0===r&&(r=!1);var n="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(n),r||(this.state=b(this.state,this.patch.bind(this)),this.directives=t(t({},this.directives),c)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),this.state},e.prototype.component=function(t,e){this.components[t.toUpperCase()]=e},e.prototype.directive=function(t,e){this.directives[t.toUpperCase()]=e},e.prototype.patch=function(t){var e={state:this.state,directives:this.directives,components:this.components};g(this.vdom,e,t)},e.prototype.compile=function(t){return h(t,this.state,this.components,!0)},e}(),x=function(t,e){return new E(t,e)};exports.compile=h,exports.createApp=x,exports.directives=c,exports.h=p,exports.init=function(t){void 0===t&&(t=document),n(t.querySelectorAll("[l-state]")).filter((function(t){return void 0===t.__l})).map((function(t){var e=t.getAttribute("l-state");try{var r=new Function("return "+e)(),n=x(r);n.mount(t),t.__l=n}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+e+'"\nElement:',t)}}))},exports.listen=function(t,e,r){void 0===e&&(e=document),new MutationObserver((function(e){e.map((function(e){if(e.addedNodes.length>0)e.addedNodes.forEach((function(e){1===e.nodeType&&(e.parentElement&&e.parentElement.closest("[l-state]")||e.getAttribute("l-state")&&t(e.parentElement))}));else if("attributes"===e.type){if(e.target.parentElement&&e.target.parentElement.closest("[l-state]"))return;t(e.target.parentElement)}}))})).observe(e,r||{childList:!0,attributes:!0,subtree:!0})},exports.patch=g,exports.reactive=b,exports.renderDirective=v;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=function(){return(e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,o=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function n(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}var i;!function(e){e["@"]="on",e[":"]="bind"}(i||(i={}));var o=function(){return new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim")},a=function(e,t){return void 0===t&&(t=!0),new RegExp((t?"this\\.":"")+e+"\\b","g")};function l(e){try{var t=this.returnable?"return "+this.expression:this.expression;return(new(Function.bind.apply(Function,n([void 0],Object.keys(this.argsKV),[t])))).bind(e).apply(void 0,n(Object.values(this.argsKV)))}catch(e){console.warn('Lucia Error: "'+e+'"\n\nExpression: "'+this.expression+'"\nElement:',this.argsKV.$el)}}var s,c=function(e,t,r){return void 0===r&&(r=!0),l.bind({expression:e,argsKV:{$el:t.$el},returnable:r})},u={BIND:function(e){var t=e.el,r=e.name,n=e.data,i=e.app;switch(r.split(":")[1]){case"class":var o=n.compute(i.state);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 a=[];for(var l in o)o[l]&&a.push(l);return a.length>0?t.setAttribute("class",(t.className+" "+a.join(" ")).trim()):t.className.trim().length>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var s=n.compute(i.state);for(var l in t.removeAttribute("style"),s)t.style[l]=s[l];break;default:var c=n.compute(i.state);if("object"==typeof c&&null!==c)for(var l in c)c[l]?t.setAttribute(l,c[l]):t.removeAttribute(l);else c?t.setAttribute(r.split(":")[1],c):t.removeAttribute(r.split(":")[1])}},HTML:function(t){var n,i=t.el,o=t.data,a=t.app;i.innerHTML=null!==(n=o.compute(a.state))&&void 0!==n?n:o.value;var l=E(e({},a.state));Object.entries(a.directives||{}).map((function(e){var t=r(e,2),n=t[0],i=t[1];l.directive(n,i)})),Object.entries(a.components||{}).map((function(e){var t=r(e,2),n=t[0],i=t[1];l.component(n,i)})),l.mount(i)},IF:function(e){var t=e.el,r=e.data,n=e.app;r.compute(n.state)?t.style.removeProperty("display"):t.style.display="none"},MODEL:function(e){var t=e.el,r=e.data,n=e.app,i=t,o=r.compute(n.state);i.value!==o&&(i.value=o),i.oninput=function(){return function(e,t,r,n){var i,o="number"==typeof t&&!isNaN(e.value),a="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=o?"Number('"+e.value+"').toPrecision()":a?"Boolean('"+e.value+"')":l?"null"===e.value?null:void 0:"'"+e.value+"'",c(r.value+" = "+i,{$el:e},!1)(n.state),i}(i,o,r,n)}},ON:function(e){var t=e.el,n=e.name,i=e.data,o=e.app,a=r(n.split("."),2),l=a[0],s=a[1],c=l.split(":")[1],u=s||null;t["on"+c]=function(e){"prevent"===u&&e.preventDefault(),"stop"===u&&e.stopPropagation(),i.compute(o.state)}},TEXT:function(e){var t,r=e.el,n=e.data,i=e.app;r.textContent=null!==(t=n.compute(i.state))&&void 0!==t?t:n.value},FOR:function(i){var o,l,s,u,v=i.el,f=i.data,p=i.app,d=r(f.value.split(/in +/g),2),y=d[0],h=d[1],m=r(y.replace(/\(|\)/g,"").split(","),2),b=m[0],g=m[1],x=n(c(h,{$el:v})(p.state)),A=String(v.__l_for_template);if(""===A.trim())v.innerHTML=x.join("");else{v.innerHTML.trim()===A&&(v.innerHTML="");var T=x.length-v.children.length;if(0!==T)for(var N=Math.abs(T);N>0;N--)if(T<0)v.removeChild(v.lastChild);else{var O=document.createElement("div"),j=A;b&&(j=j.replace(a(b.trim()),h+"["+(x.length-N)+"]")),g&&(j=j.replace(a(g.trim()),String(x.length-N))),O.innerHTML=j,v.appendChild(O.firstChild)}}var w=E(e({},p.state));try{for(var _=t(Object.entries(p.directives||{})),C=_.next();!C.done;C=_.next()){var S=r(C.value,2),L=S[0],M=S[1];w.directive(L,M)}}catch(e){o={error:e}}finally{try{C&&!C.done&&(l=_.return)&&l.call(_)}finally{if(o)throw o.error}}try{for(var H=t(Object.entries(p.components||{})),k=H.next();!k.done;k=H.next()){var I=r(k.value,2),D=I[0],P=I[1];w.component(D,P)}}catch(e){s={error:e}}finally{try{k&&!k.done&&(u=H.return)&&u.call(H)}finally{if(s)throw s.error}}w.mount(v)}},v=function(e,t){t[e.name.split(/:|\./)[0].toUpperCase()](e)};!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(s||(s={}));var f=function(t,r,n){void 0===r&&(r=[]);var i=e({},null==n?void 0:n.attributes),o=e({},null==n?void 0:n.directives);return r=r instanceof Array?r:[r],i.className&&(i.className=i.className.trim()),{tag:t,children:r,props:{attributes:i,directives:o,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},p=function(e){var r,o,a={},l={};if(e.attributes)try{for(var s=t(n(e.attributes)),u=s.next();!u.done;u=s.next()){var v=u.value,f=v.name,p=v.value,d=!0;f.includes("for")&&void 0===e.__l_for_template&&(e.__l_for_template=String(e.innerHTML).trim(),d=!1),/on|@/.test(f)&&(d=!1);var y={compute:c(p,{$el:e},d),value:p};f.startsWith("l-")?l[f.slice("l-".length)]=y:Object.keys(i).includes(f[0])?l[i[f[0]]+":"+f.slice(1)]=y:a[f]=p}}catch(e){r={error:e}}finally{try{u&&!u.done&&(o=s.return)&&o.call(s)}finally{if(r)throw r.error}}return{attributes:a,directives:l}},d=function(e,t,r){var n=p(e),i=n.attributes,o=n.directives,l=s.STATIC,c=Object.keys(o).length>0,u=Object.values(o).some((function(e){var r=e.value;return Object.keys(t).some((function(e){return a(e,!1).test(r)}))}));return c&&(l=s.NEEDS_PATCH),u&&(l=s.DYNAMIC),f(e.tagName.toLowerCase(),r,{attributes:i,directives:o,ref:l===s.STATIC||i.id?void 0:e,type:l})},y=function(e,n,i,a,l){var s,c,u,v,f,m,b;if(void 0===n&&(n={}),void 0===i&&(i={}),void 0===a&&(a=!1),void 0===l&&(l=!1),!e)throw new Error("Please provide a Element");var g=[],x=Array.prototype.slice.call(e.childNodes);try{for(var E=t(x),A=E.next();!A.done;A=E.next()){var T=A.value;switch(T.nodeType){case Node.TEXT_NODE:!a&&T.nodeValue&&g.push(T.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(i).includes(T.tagName)){var N=document.createElement("div"),O=i[T.tagName]({children:T.innerHTML,state:n});N.innerHTML=O;try{for(var j=(u=void 0,t(Object.entries(p(T).directives))),w=j.next();!w.done;w=j.next()){var _=r(w.value,2),C=_[0],S=_[1];null===(b=N.firstElementChild)||void 0===b||b.setAttribute("l-"+C,S.value)}}catch(e){u={error:e}}finally{try{w&&!w.done&&(v=j.return)&&v.call(j)}finally{if(u)throw u.error}}if(!a||o().test(N.outerHTML)){var L=y(N,n,i,a,!0);try{for(var M=(f=void 0,t(L)),H=M.next();!H.done;H=M.next()){var k=H.value;g.push(k)}}catch(e){f={error:e}}finally{try{H&&!H.done&&(m=M.return)&&m.call(M)}finally{if(f)throw f.error}}}e.replaceChild(N.firstElementChild,T)}else if(!a||o().test(T.outerHTML)){L=y(T,n,i,a,!0);var I=d(T,n,L);g.push(I)}}}}catch(e){s={error:e}}finally{try{A&&!A.done&&(c=E.return)&&c.call(E)}finally{if(s)throw s.error}}if(l)return g;var D=d(e,n,g);return a?h(D):D},h=function(r){var i,o,a=e({},r);a.children=a.children.filter((function(e){return"object"==typeof e&&e.props.type>0}));try{for(var l=t(r.children),s=l.next();!s.done;s=l.next()){var c=s.value;"string"!=typeof c&&(c.children.length>0&&(a.children=n(a.children,h({children:c.children}).children),c.children=[]))}}catch(e){i={error:e}}finally{try{s&&!s.done&&(o=l.return)&&o.call(l)}finally{if(i)throw i.error}}return a},m=function(e,r,n,i,o){var a,l,s,c;if(void 0===o&&(o=!1),"length"===r||e instanceof Array){var u=Object.keys(n).filter((function(t){return n[t]instanceof Array&&(r=e,i=n[t],r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]})));var r,i}));return 0!==u.length&&i(u),!0}var v=[r];try{for(var f=t(document.querySelectorAll("[l-for]")),p=f.next();!p.done;p=f.next()){var d=p.value,y=Object.keys(d.__l.state);if(-1!==y.indexOf(r)){y.splice(y.indexOf(r),1);try{for(var h=(s=void 0,t(y)),m=h.next();!m.done;m=h.next()){var b=m.value;v.push(b)}}catch(e){s={error:e}}finally{try{m&&!m.done&&(c=h.return)&&c.call(h)}finally{if(s)throw s.error}}}}}catch(e){a={error:e}}finally{try{p&&!p.done&&(l=f.return)&&l.call(f)}finally{if(a)throw a.error}}return o&&i(v),!1},b=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){var o=r[n]!==i||r instanceof Array||"object"==typeof r;return o&&(r[n]=i),m(r,n,e,t,o),!0},deleteProperty:function(r,n){return delete r[n],m(r,n,e,t,!0),!0}};return new Proxy(e,r)},g=function(r,n,i){var o,l;void 0===n&&(n={});var c=!1,u=n.state||{};if(r){i||(i=Object.keys(u)),"%LUCIA_FIRST_RENDER%"===i[0]&&(c=!0);var f=function(t){if("string"==typeof t)return"continue";if(t.props.type>s.STATIC){var r=t.props,o=r.attributes,l=r.directives,f=r.ref,p=r.type,d=[];if(!c){var y=function(e){var t=1===p,r=i.some((function(t){return a(t).test(String(l[e].value))})),n=Object.keys(u).some((function(e){var t=i.some((function(t){return a(t).test(String(u[e]))}));return"function"==typeof u[e]&&t}));(t||r||n)&&d.push(e)};for(var h in l)y(h)}t.props.type=p===s.NEEDS_PATCH?s.STATIC:p,(c?Object.keys(l):d).map((function(t){var r=l[t],i=o.id?document.getElementById(o.id):f;v({el:i,name:t,data:r,app:n},e({},n.directives))}))}t.children.length>0&&g(t,n,i)};try{for(var p=t(r.children),d=p.next();!d.done;d=p.next()){f(d.value)}}catch(e){o={error:e}}finally{try{d&&!d.done&&(l=p.return)&&l.call(p)}finally{if(o)throw o.error}}}},x=function(){function t(e,t){void 0===e&&(e={}),this.state=e,this.directives={},this.components={},this.mountHook=t}return t.prototype.mount=function(t,r){void 0===r&&(r=!1);var n="string"==typeof t?document.querySelector(t):t;return this.vdom=this.compile(n),r||(this.state=b(this.state,this.patch.bind(this)),this.directives=e(e({},this.directives),u)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),n.__l=this,n.setAttribute("data-l-app",""),this.state},t.prototype.component=function(e,t){this.components[e.toUpperCase()]=t},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.patch=function(e){var t={state:this.state,directives:this.directives,components:this.components};g(this.vdom,t,e)},t.prototype.compile=function(e){return y(e,this.state,this.components,!0)},t}(),E=function(e,t){return new x(e,t)};exports.compile=y,exports.createApp=E,exports.directives=u,exports.h=f,exports.init=function(e){void 0===e&&(e=document),n(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===e.__l})).map((function(e){var t=e.getAttribute("l-state");try{var r=new Function("return "+t)();E(r||{}).mount(e)}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+t+'"\nElement:',e)}}))},exports.listen=function(e,t,r){void 0===t&&(t=document),new MutationObserver((function(t){t.map((function(t){if(t.addedNodes.length>0)t.addedNodes.forEach((function(t){1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute("l-state")&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,r||{childList:!0,attributes:!0,subtree:!0})},exports.patch=g,exports.reactive=b,exports.renderDirective=v;

134

dist/legacy/lucia.esm.js

@@ -71,2 +71,4 @@ /*! *****************************************************************************

var rawDirectiveSplitRE = function () { return /:|\./; };
var eventDirectivePrefixRE = function () { return /on|@/; };
var parenthesisWrapReplaceRE = function () { return /\(|\)/g; };
var hasDirectiveRE = function () {

@@ -77,3 +79,3 @@ return new RegExp("(" + DIRECTIVE_PREFIX + "|" + Object.keys(DIRECTIVE_SHORTHANDS).join('|') + ")\\w+", 'gim');

if (hasThis === void 0) { hasThis = true; }
return new RegExp("" + (hasThis ? 'this\\.' : '') + key + "\\b");
return new RegExp("" + (hasThis ? 'this\\.' : '') + key + "\\b", 'g');
};

@@ -99,3 +101,3 @@

if (classes.length > 0) {
return el.setAttribute('class', (el.className + " " + classes.join(' ').trim()).trim());
return el.setAttribute('class', (el.className + " " + classes.join(' ')).trim());
}

@@ -234,31 +236,61 @@ else if (el.className.trim().length > 0) {

var forDirective = function (_a) {
var e_1, _b, e_2, _c;
var el = _a.el, data = _a.data, app = _a.app;
var _b = __read(data.value.split(/ +in +/g), 2), expression = _b[0], target = _b[1];
var _c = __read(expression.split(','), 2), item = _c[0], index = _c[1];
var hydratedArray = compute(target, { $el: el })(app.state);
var template = String(el.__l_for);
if (template) {
var accumulator = '';
for (var i = 0; i < hydratedArray.length; i++) {
var content = template;
if (item)
content = content.replace(new RegExp("this." + item.trim(), 'g'), target + "[" + i + "]");
if (index)
content = content.replace(new RegExp("this." + index.trim(), 'g'), String(i));
accumulator += content;
}
el.innerHTML = accumulator;
var _d = __read(data.value.split(/in +/g), 2), expression = _d[0], target = _d[1];
var _e = __read(expression.replace(parenthesisWrapReplaceRE(), '').split(','), 2), item = _e[0], index = _e[1];
var currArray = __spread(compute(target, { $el: el })(app.state));
var template = String(el.__l_for_template);
if (template.trim() === '') {
el.innerHTML = currArray.join('');
}
else {
el.innerHTML = hydratedArray.join('');
if (el.innerHTML.trim() === template)
el.innerHTML = '';
var arrayDiff = currArray.length - el.children.length;
if (arrayDiff !== 0) {
for (var i = Math.abs(arrayDiff); i > 0; i--) {
if (arrayDiff < 0)
el.removeChild(el.lastChild);
else {
var temp = document.createElement('div');
var content = template;
if (item) {
content = content.replace(expressionPropRE(item.trim()), target + "[" + (currArray.length - i) + "]");
}
if (index) {
content = content.replace(expressionPropRE(index.trim()), String(currArray.length - i));
}
temp.innerHTML = content;
el.appendChild(temp.firstChild);
}
}
}
}
var scope = createApp(__assign({}, app.state));
Object.entries(app.directives || {}).map(function (_a) {
var _b = __read(_a, 2), name = _b[0], evaluationCallback = _b[1];
scope.directive(name, evaluationCallback);
});
Object.entries(app.components || {}).map(function (_a) {
var _b = __read(_a, 2), name = _b[0], templateCallback = _b[1];
scope.component(name, templateCallback);
});
try {
for (var _f = __values(Object.entries(app.directives || {})), _g = _f.next(); !_g.done; _g = _f.next()) {
var _h = __read(_g.value, 2), name_1 = _h[0], evaluationCallback = _h[1];
scope.directive(name_1, evaluationCallback);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
}
finally { if (e_1) throw e_1.error; }
}
try {
for (var _j = __values(Object.entries(app.components || {})), _k = _j.next(); !_k.done; _k = _j.next()) {
var _l = __read(_k.value, 2), name_2 = _l[0], templateCallback = _l[1];
scope.component(name_2, templateCallback);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
}
finally { if (e_2) throw e_2.error; }
}
scope.mount(el);

@@ -316,7 +348,7 @@ };

var returnable = true;
if (name_1.includes('for') && el.__l_for === undefined) {
el.__l_for = String(el.innerHTML).trim();
if (name_1.includes('for') && el.__l_for_template === undefined) {
el.__l_for_template = String(el.innerHTML).trim();
returnable = false;
}
if (/on|@/.test(name_1))
if (eventDirectivePrefixRE().test(name_1))
returnable = false;

@@ -483,4 +515,5 @@ var directiveData = { compute: compute(value, { $el: el }, returnable), value: value };

var handlePatch = function (target, key, state, patch, needsUpdate) {
var e_1, _a, e_2, _b;
if (needsUpdate === void 0) { needsUpdate = false; }
if (key === 'length') {
if (key === 'length' || target instanceof Array) {
var affectedKeys = Object.keys(state).filter(function (k) {

@@ -494,4 +527,34 @@ return state[k] instanceof Array && arrayEquals(target, state[k]);

else {
var keys = [key];
try {
for (var _c = __values(document.querySelectorAll('[l-for]')), _d = _c.next(); !_d.done; _d = _c.next()) {
var el = _d.value;
var stateKeys = Object.keys(el.__l.state);
if (stateKeys.indexOf(key) !== -1) {
stateKeys.splice(stateKeys.indexOf(key), 1);
try {
for (var stateKeys_1 = (e_2 = void 0, __values(stateKeys)), stateKeys_1_1 = stateKeys_1.next(); !stateKeys_1_1.done; stateKeys_1_1 = stateKeys_1.next()) {
var k = stateKeys_1_1.value;
keys.push(k);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (stateKeys_1_1 && !stateKeys_1_1.done && (_b = stateKeys_1.return)) _b.call(stateKeys_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
if (needsUpdate)
patch([key]);
patch(keys);
return false;

@@ -511,3 +574,3 @@ }

set: function (target, key, value) {
var needsUpdate = target[key] !== value;
var needsUpdate = target[key] !== value || target instanceof Array || typeof target === 'object';
if (needsUpdate) {

@@ -603,3 +666,3 @@ target[key] = value;

if (shallow === void 0) { shallow = false; }
var rootEl = typeof el === 'string' ? document.querySelector(el) : el;
var rootEl = (typeof el === 'string' ? document.querySelector(el) : el);
this.vdom = this.compile(rootEl);

@@ -613,2 +676,4 @@ if (!shallow) {

this.mountHook(this.state);
rootEl.__l = this;
rootEl.setAttribute('data-l-app', '');
return this.state;

@@ -649,5 +714,4 @@ };

var state = new Function("return " + expression)();
var app = createApp(state);
var app = createApp(state || {});
app.mount(el);
el.__l = app;
}

@@ -654,0 +718,0 @@ catch (err) {

2

dist/legacy/lucia.esm.min.js

@@ -1,1 +0,1 @@

var t=function(){return(t=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function e(t){var e="function"==typeof Symbol&&Symbol.iterator,r=e&&t[e],n=0;if(r)return r.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,i,o=r.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(t){i={error:t}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function n(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(r(arguments[e]));return t}var i;!function(t){t["@"]="on",t[":"]="bind"}(i||(i={}));var o=function(){return new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim")},a=function(t,e){return void 0===e&&(e=!0),new RegExp((e?"this\\.":"")+t+"\\b")};function l(t){try{var e=this.returnable?"return "+this.expression:this.expression;return(new(Function.bind.apply(Function,n([void 0],Object.keys(this.argsKV),[e])))).bind(t).apply(void 0,n(Object.values(this.argsKV)))}catch(t){console.warn('Lucia Error: "'+t+'"\n\nExpression: "'+this.expression+'"\nElement:',this.argsKV.$el)}}var s,u=function(t,e,r){return void 0===r&&(r=!0),l.bind({expression:t,argsKV:{$el:e.$el},returnable:r})},c={BIND:function(t){var e=t.el,r=t.name,n=t.data,i=t.app;switch(r.split(":")[1]){case"class":var o=n.compute(i.state);if("string"==typeof o)return e.setAttribute("class",(e.className+" "+o).trim());if(o instanceof Array)return e.setAttribute("class",(e.className+" "+o.join(" ")).trim());var a=[];for(var l in o)o[l]&&a.push(l);return a.length>0?e.setAttribute("class",(e.className+" "+a.join(" ").trim()).trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class");case"style":var s=n.compute(i.state);for(var l in e.removeAttribute("style"),s)e.style[l]=s[l];break;default:var u=n.compute(i.state);if("object"==typeof u&&null!==u)for(var l in u)u[l]?e.setAttribute(l,u[l]):e.removeAttribute(l);else u?e.setAttribute(r.split(":")[1],u):e.removeAttribute(r.split(":")[1])}},HTML:function(e){var n,i=e.el,o=e.data,a=e.app;i.innerHTML=null!==(n=o.compute(a.state))&&void 0!==n?n:o.value;var l=A(t({},a.state));Object.entries(a.directives||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];l.directive(n,i)})),Object.entries(a.components||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];l.component(n,i)})),l.mount(i)},IF:function(t){var e=t.el,r=t.data,n=t.app;r.compute(n.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:function(t){var e=t.el,r=t.data,n=t.app,i=e,o=r.compute(n.state);i.value!==o&&(i.value=o),i.oninput=function(){return function(t,e,r,n){var i,o="number"==typeof e&&!isNaN(t.value),a="boolean"==typeof e&&("true"===t.value||"false"===t.value),l=null==e&&("null"===t.value||"undefined"===t.value);return i=o?"Number('"+t.value+"').toPrecision()":a?"Boolean('"+t.value+"')":l?"null"===t.value?null:void 0:"'"+t.value+"'",u(r.value+" = "+i,{$el:t},!1)(n.state),i}(i,o,r,n)}},ON:function(t){var e=t.el,n=t.name,i=t.data,o=t.app,a=r(n.split("."),2),l=a[0],s=a[1],u=l.split(":")[1],c=s||null;e["on"+u]=function(t){"prevent"===c&&t.preventDefault(),"stop"===c&&t.stopPropagation(),i.compute(o.state)}},TEXT:function(t){var e,r=t.el,n=t.data,i=t.app;r.textContent=null!==(e=n.compute(i.state))&&void 0!==e?e:n.value},FOR:function(e){var n=e.el,i=e.data,o=e.app,a=r(i.value.split(/ +in +/g),2),l=a[0],s=a[1],c=r(l.split(","),2),v=c[0],f=c[1],p=u(s,{$el:n})(o.state),d=String(n.__l_for);if(d){for(var h="",y=0;y<p.length;y++){var m=d;v&&(m=m.replace(new RegExp("this."+v.trim(),"g"),s+"["+y+"]")),f&&(m=m.replace(new RegExp("this."+f.trim(),"g"),String(y))),h+=m}n.innerHTML=h}else n.innerHTML=p.join("");var b=A(t({},o.state));Object.entries(o.directives||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];b.directive(n,i)})),Object.entries(o.components||{}).map((function(t){var e=r(t,2),n=e[0],i=e[1];b.component(n,i)})),b.mount(n)}},v=function(t,e){e[t.name.split(/:|\./)[0].toUpperCase()](t)};!function(t){t[t.STATIC=0]="STATIC",t[t.NEEDS_PATCH=1]="NEEDS_PATCH",t[t.DYNAMIC=2]="DYNAMIC"}(s||(s={}));var f=function(e,r,n){void 0===r&&(r=[]);var i=t({},null==n?void 0:n.attributes),o=t({},null==n?void 0:n.directives);return r=r instanceof Array?r:[r],i.className&&(i.className=i.className.trim()),{tag:e,children:r,props:{attributes:i,directives:o,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},p=function(t){var r,o,a={},l={};if(t.attributes)try{for(var s=e(n(t.attributes)),c=s.next();!c.done;c=s.next()){var v=c.value,f=v.name,p=v.value,d=!0;f.includes("for")&&void 0===t.__l_for&&(t.__l_for=String(t.innerHTML).trim(),d=!1),/on|@/.test(f)&&(d=!1);var h={compute:u(p,{$el:t},d),value:p};f.startsWith("l-")?l[f.slice("l-".length)]=h:Object.keys(i).includes(f[0])?l[i[f[0]]+":"+f.slice(1)]=h:a[f]=p}}catch(t){r={error:t}}finally{try{c&&!c.done&&(o=s.return)&&o.call(s)}finally{if(r)throw r.error}}return{attributes:a,directives:l}},d=function(t,e,r){var n=p(t),i=n.attributes,o=n.directives,l=s.STATIC,u=Object.keys(o).length>0,c=Object.values(o).some((function(t){var r=t.value;return Object.keys(e).some((function(t){return a(t,!1).test(r)}))}));return u&&(l=s.NEEDS_PATCH),c&&(l=s.DYNAMIC),f(t.tagName.toLowerCase(),r,{attributes:i,directives:o,ref:l===s.STATIC||i.id?void 0:t,type:l})},h=function(t,n,i,a,l){var s,u,c,v,f,m,b;if(void 0===n&&(n={}),void 0===i&&(i={}),void 0===a&&(a=!1),void 0===l&&(l=!1),!t)throw new Error("Please provide a Element");var g=[],E=Array.prototype.slice.call(t.childNodes);try{for(var A=e(E),T=A.next();!T.done;T=A.next()){var N=T.value;switch(N.nodeType){case Node.TEXT_NODE:!a&&N.nodeValue&&g.push(N.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(i).includes(N.tagName)){var w=document.createElement("div"),x=i[N.tagName]({children:N.innerHTML,state:n});w.innerHTML=x;try{for(var j=(c=void 0,e(Object.entries(p(N).directives))),O=j.next();!O.done;O=j.next()){var S=r(O.value,2),C=S[0],_=S[1];null===(b=w.firstElementChild)||void 0===b||b.setAttribute("l-"+C,_.value)}}catch(t){c={error:t}}finally{try{O&&!O.done&&(v=j.return)&&v.call(j)}finally{if(c)throw c.error}}if(!a||o().test(w.outerHTML)){var L=h(w,n,i,a,!0);try{for(var H=(f=void 0,e(L)),I=H.next();!I.done;I=H.next()){var k=I.value;g.push(k)}}catch(t){f={error:t}}finally{try{I&&!I.done&&(m=H.return)&&m.call(H)}finally{if(f)throw f.error}}}t.replaceChild(w.firstElementChild,N)}else if(!a||o().test(N.outerHTML)){L=h(N,n,i,a,!0);var M=d(N,n,L);g.push(M)}}}}catch(t){s={error:t}}finally{try{T&&!T.done&&(u=A.return)&&u.call(A)}finally{if(s)throw s.error}}if(l)return g;var D=d(t,n,g);return a?y(D):D},y=function(r){var i,o,a=t({},r);a.children=a.children.filter((function(t){return"object"==typeof t&&t.props.type>0}));try{for(var l=e(r.children),s=l.next();!s.done;s=l.next()){var u=s.value;"string"!=typeof u&&(u.children.length>0&&(a.children=n(a.children,y({children:u.children}).children),u.children=[]))}}catch(t){i={error:t}}finally{try{s&&!s.done&&(o=l.return)&&o.call(l)}finally{if(i)throw i.error}}return a},m=function(t,e,r,n,i){if(void 0===i&&(i=!1),"length"===e){var o=Object.keys(r).filter((function(e){return r[e]instanceof Array&&(n=t,i=r[e],n instanceof Array&&i instanceof Array&&n.length===i.length&&n.every((function(t,e){return t===i[e]})));var n,i}));return 0!==o.length&&n(o),!0}return i&&n([e]),!1},b=function(t,e){var r={get:function(t,e){return"object"==typeof t[e]&&null!==t[e]?new Proxy(t[e],r):t[e]},set:function(r,n,i){var o=r[n]!==i;return o&&(r[n]=i),m(r,n,t,e,o),!0},deleteProperty:function(r,n){return delete r[n],m(r,n,t,e,!0),!0}};return new Proxy(t,r)},g=function(r,n,i){var o,l;void 0===n&&(n={});var u=!1,c=n.state||{};if(r){i||(i=Object.keys(c)),"%LUCIA_FIRST_RENDER%"===i[0]&&(u=!0);var f=function(e){if("string"==typeof e)return"continue";if(e.props.type>s.STATIC){var r=e.props,o=r.attributes,l=r.directives,f=r.ref,p=r.type,d=[];if(!u){var h=function(t){var e=1===p,r=i.some((function(e){return a(e).test(String(l[t].value))})),n=Object.keys(c).some((function(t){var e=i.some((function(e){return a(e).test(String(c[t]))}));return"function"==typeof c[t]&&e}));(e||r||n)&&d.push(t)};for(var y in l)h(y)}e.props.type=p===s.NEEDS_PATCH?s.STATIC:p,(u?Object.keys(l):d).map((function(e){var r=l[e],i=o.id?document.getElementById(o.id):f;v({el:i,name:e,data:r,app:n},t({},n.directives))}))}e.children.length>0&&g(e,n,i)};try{for(var p=e(r.children),d=p.next();!d.done;d=p.next()){f(d.value)}}catch(t){o={error:t}}finally{try{d&&!d.done&&(l=p.return)&&l.call(p)}finally{if(o)throw o.error}}}},E=function(){function e(t,e){void 0===t&&(t={}),this.state=t,this.directives={},this.components={},this.mountHook=e}return e.prototype.mount=function(e,r){void 0===r&&(r=!1);var n="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(n),r||(this.state=b(this.state,this.patch.bind(this)),this.directives=t(t({},this.directives),c)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),this.state},e.prototype.component=function(t,e){this.components[t.toUpperCase()]=e},e.prototype.directive=function(t,e){this.directives[t.toUpperCase()]=e},e.prototype.patch=function(t){var e={state:this.state,directives:this.directives,components:this.components};g(this.vdom,e,t)},e.prototype.compile=function(t){return h(t,this.state,this.components,!0)},e}(),A=function(t,e){return new E(t,e)},T=function(t){void 0===t&&(t=document),n(t.querySelectorAll("[l-state]")).filter((function(t){return void 0===t.__l})).map((function(t){var e=t.getAttribute("l-state");try{var r=new Function("return "+e)(),n=A(r);n.mount(t),t.__l=n}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+e+'"\nElement:',t)}}))},N=function(t,e,r){void 0===e&&(e=document),new MutationObserver((function(e){e.map((function(e){if(e.addedNodes.length>0)e.addedNodes.forEach((function(e){1===e.nodeType&&(e.parentElement&&e.parentElement.closest("[l-state]")||e.getAttribute("l-state")&&t(e.parentElement))}));else if("attributes"===e.type){if(e.target.parentElement&&e.target.parentElement.closest("[l-state]"))return;t(e.target.parentElement)}}))})).observe(e,r||{childList:!0,attributes:!0,subtree:!0})};export{h as compile,A as createApp,c as directives,f as h,T as init,N as listen,g as patch,b as reactive,v as renderDirective};
var e=function(){return(e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function r(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,o=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function n(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(r(arguments[t]));return e}var i;!function(e){e["@"]="on",e[":"]="bind"}(i||(i={}));var o=function(){return new RegExp("(l-|"+Object.keys(i).join("|")+")\\w+","gim")},a=function(e,t){return void 0===t&&(t=!0),new RegExp((t?"this\\.":"")+e+"\\b","g")};function l(e){try{var t=this.returnable?"return "+this.expression:this.expression;return(new(Function.bind.apply(Function,n([void 0],Object.keys(this.argsKV),[t])))).bind(e).apply(void 0,n(Object.values(this.argsKV)))}catch(e){console.warn('Lucia Error: "'+e+'"\n\nExpression: "'+this.expression+'"\nElement:',this.argsKV.$el)}}var s,c=function(e,t,r){return void 0===r&&(r=!0),l.bind({expression:e,argsKV:{$el:t.$el},returnable:r})},u={BIND:function(e){var t=e.el,r=e.name,n=e.data,i=e.app;switch(r.split(":")[1]){case"class":var o=n.compute(i.state);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 a=[];for(var l in o)o[l]&&a.push(l);return a.length>0?t.setAttribute("class",(t.className+" "+a.join(" ")).trim()):t.className.trim().length>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var s=n.compute(i.state);for(var l in t.removeAttribute("style"),s)t.style[l]=s[l];break;default:var c=n.compute(i.state);if("object"==typeof c&&null!==c)for(var l in c)c[l]?t.setAttribute(l,c[l]):t.removeAttribute(l);else c?t.setAttribute(r.split(":")[1],c):t.removeAttribute(r.split(":")[1])}},HTML:function(t){var n,i=t.el,o=t.data,a=t.app;i.innerHTML=null!==(n=o.compute(a.state))&&void 0!==n?n:o.value;var l=A(e({},a.state));Object.entries(a.directives||{}).map((function(e){var t=r(e,2),n=t[0],i=t[1];l.directive(n,i)})),Object.entries(a.components||{}).map((function(e){var t=r(e,2),n=t[0],i=t[1];l.component(n,i)})),l.mount(i)},IF:function(e){var t=e.el,r=e.data,n=e.app;r.compute(n.state)?t.style.removeProperty("display"):t.style.display="none"},MODEL:function(e){var t=e.el,r=e.data,n=e.app,i=t,o=r.compute(n.state);i.value!==o&&(i.value=o),i.oninput=function(){return function(e,t,r,n){var i,o="number"==typeof t&&!isNaN(e.value),a="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=o?"Number('"+e.value+"').toPrecision()":a?"Boolean('"+e.value+"')":l?"null"===e.value?null:void 0:"'"+e.value+"'",c(r.value+" = "+i,{$el:e},!1)(n.state),i}(i,o,r,n)}},ON:function(e){var t=e.el,n=e.name,i=e.data,o=e.app,a=r(n.split("."),2),l=a[0],s=a[1],c=l.split(":")[1],u=s||null;t["on"+c]=function(e){"prevent"===u&&e.preventDefault(),"stop"===u&&e.stopPropagation(),i.compute(o.state)}},TEXT:function(e){var t,r=e.el,n=e.data,i=e.app;r.textContent=null!==(t=n.compute(i.state))&&void 0!==t?t:n.value},FOR:function(i){var o,l,s,u,f=i.el,v=i.data,p=i.app,d=r(v.value.split(/in +/g),2),y=d[0],h=d[1],m=r(y.replace(/\(|\)/g,"").split(","),2),b=m[0],g=m[1],E=n(c(h,{$el:f})(p.state)),T=String(f.__l_for_template);if(""===T.trim())f.innerHTML=E.join("");else{f.innerHTML.trim()===T&&(f.innerHTML="");var x=E.length-f.children.length;if(0!==x)for(var N=Math.abs(x);N>0;N--)if(x<0)f.removeChild(f.lastChild);else{var w=document.createElement("div"),O=T;b&&(O=O.replace(a(b.trim()),h+"["+(E.length-N)+"]")),g&&(O=O.replace(a(g.trim()),String(E.length-N))),w.innerHTML=O,f.appendChild(w.firstChild)}}var j=A(e({},p.state));try{for(var _=t(Object.entries(p.directives||{})),C=_.next();!C.done;C=_.next()){var S=r(C.value,2),L=S[0],H=S[1];j.directive(L,H)}}catch(e){o={error:e}}finally{try{C&&!C.done&&(l=_.return)&&l.call(_)}finally{if(o)throw o.error}}try{for(var M=t(Object.entries(p.components||{})),k=M.next();!k.done;k=M.next()){var I=r(k.value,2),D=I[0],P=I[1];j.component(D,P)}}catch(e){s={error:e}}finally{try{k&&!k.done&&(u=M.return)&&u.call(M)}finally{if(s)throw s.error}}j.mount(f)}},f=function(e,t){t[e.name.split(/:|\./)[0].toUpperCase()](e)};!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(s||(s={}));var v=function(t,r,n){void 0===r&&(r=[]);var i=e({},null==n?void 0:n.attributes),o=e({},null==n?void 0:n.directives);return r=r instanceof Array?r:[r],i.className&&(i.className=i.className.trim()),{tag:t,children:r,props:{attributes:i,directives:o,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},p=function(e){var r,o,a={},l={};if(e.attributes)try{for(var s=t(n(e.attributes)),u=s.next();!u.done;u=s.next()){var f=u.value,v=f.name,p=f.value,d=!0;v.includes("for")&&void 0===e.__l_for_template&&(e.__l_for_template=String(e.innerHTML).trim(),d=!1),/on|@/.test(v)&&(d=!1);var y={compute:c(p,{$el:e},d),value:p};v.startsWith("l-")?l[v.slice("l-".length)]=y:Object.keys(i).includes(v[0])?l[i[v[0]]+":"+v.slice(1)]=y:a[v]=p}}catch(e){r={error:e}}finally{try{u&&!u.done&&(o=s.return)&&o.call(s)}finally{if(r)throw r.error}}return{attributes:a,directives:l}},d=function(e,t,r){var n=p(e),i=n.attributes,o=n.directives,l=s.STATIC,c=Object.keys(o).length>0,u=Object.values(o).some((function(e){var r=e.value;return Object.keys(t).some((function(e){return a(e,!1).test(r)}))}));return c&&(l=s.NEEDS_PATCH),u&&(l=s.DYNAMIC),v(e.tagName.toLowerCase(),r,{attributes:i,directives:o,ref:l===s.STATIC||i.id?void 0:e,type:l})},y=function(e,n,i,a,l){var s,c,u,f,v,m,b;if(void 0===n&&(n={}),void 0===i&&(i={}),void 0===a&&(a=!1),void 0===l&&(l=!1),!e)throw new Error("Please provide a Element");var g=[],E=Array.prototype.slice.call(e.childNodes);try{for(var A=t(E),T=A.next();!T.done;T=A.next()){var x=T.value;switch(x.nodeType){case Node.TEXT_NODE:!a&&x.nodeValue&&g.push(x.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(i).includes(x.tagName)){var N=document.createElement("div"),w=i[x.tagName]({children:x.innerHTML,state:n});N.innerHTML=w;try{for(var O=(u=void 0,t(Object.entries(p(x).directives))),j=O.next();!j.done;j=O.next()){var _=r(j.value,2),C=_[0],S=_[1];null===(b=N.firstElementChild)||void 0===b||b.setAttribute("l-"+C,S.value)}}catch(e){u={error:e}}finally{try{j&&!j.done&&(f=O.return)&&f.call(O)}finally{if(u)throw u.error}}if(!a||o().test(N.outerHTML)){var L=y(N,n,i,a,!0);try{for(var H=(v=void 0,t(L)),M=H.next();!M.done;M=H.next()){var k=M.value;g.push(k)}}catch(e){v={error:e}}finally{try{M&&!M.done&&(m=H.return)&&m.call(H)}finally{if(v)throw v.error}}}e.replaceChild(N.firstElementChild,x)}else if(!a||o().test(x.outerHTML)){L=y(x,n,i,a,!0);var I=d(x,n,L);g.push(I)}}}}catch(e){s={error:e}}finally{try{T&&!T.done&&(c=A.return)&&c.call(A)}finally{if(s)throw s.error}}if(l)return g;var D=d(e,n,g);return a?h(D):D},h=function(r){var i,o,a=e({},r);a.children=a.children.filter((function(e){return"object"==typeof e&&e.props.type>0}));try{for(var l=t(r.children),s=l.next();!s.done;s=l.next()){var c=s.value;"string"!=typeof c&&(c.children.length>0&&(a.children=n(a.children,h({children:c.children}).children),c.children=[]))}}catch(e){i={error:e}}finally{try{s&&!s.done&&(o=l.return)&&o.call(l)}finally{if(i)throw i.error}}return a},m=function(e,r,n,i,o){var a,l,s,c;if(void 0===o&&(o=!1),"length"===r||e instanceof Array){var u=Object.keys(n).filter((function(t){return n[t]instanceof Array&&(r=e,i=n[t],r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]})));var r,i}));return 0!==u.length&&i(u),!0}var f=[r];try{for(var v=t(document.querySelectorAll("[l-for]")),p=v.next();!p.done;p=v.next()){var d=p.value,y=Object.keys(d.__l.state);if(-1!==y.indexOf(r)){y.splice(y.indexOf(r),1);try{for(var h=(s=void 0,t(y)),m=h.next();!m.done;m=h.next()){var b=m.value;f.push(b)}}catch(e){s={error:e}}finally{try{m&&!m.done&&(c=h.return)&&c.call(h)}finally{if(s)throw s.error}}}}}catch(e){a={error:e}}finally{try{p&&!p.done&&(l=v.return)&&l.call(v)}finally{if(a)throw a.error}}return o&&i(f),!1},b=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){var o=r[n]!==i||r instanceof Array||"object"==typeof r;return o&&(r[n]=i),m(r,n,e,t,o),!0},deleteProperty:function(r,n){return delete r[n],m(r,n,e,t,!0),!0}};return new Proxy(e,r)},g=function(r,n,i){var o,l;void 0===n&&(n={});var c=!1,u=n.state||{};if(r){i||(i=Object.keys(u)),"%LUCIA_FIRST_RENDER%"===i[0]&&(c=!0);var v=function(t){if("string"==typeof t)return"continue";if(t.props.type>s.STATIC){var r=t.props,o=r.attributes,l=r.directives,v=r.ref,p=r.type,d=[];if(!c){var y=function(e){var t=1===p,r=i.some((function(t){return a(t).test(String(l[e].value))})),n=Object.keys(u).some((function(e){var t=i.some((function(t){return a(t).test(String(u[e]))}));return"function"==typeof u[e]&&t}));(t||r||n)&&d.push(e)};for(var h in l)y(h)}t.props.type=p===s.NEEDS_PATCH?s.STATIC:p,(c?Object.keys(l):d).map((function(t){var r=l[t],i=o.id?document.getElementById(o.id):v;f({el:i,name:t,data:r,app:n},e({},n.directives))}))}t.children.length>0&&g(t,n,i)};try{for(var p=t(r.children),d=p.next();!d.done;d=p.next()){v(d.value)}}catch(e){o={error:e}}finally{try{d&&!d.done&&(l=p.return)&&l.call(p)}finally{if(o)throw o.error}}}},E=function(){function t(e,t){void 0===e&&(e={}),this.state=e,this.directives={},this.components={},this.mountHook=t}return t.prototype.mount=function(t,r){void 0===r&&(r=!1);var n="string"==typeof t?document.querySelector(t):t;return this.vdom=this.compile(n),r||(this.state=b(this.state,this.patch.bind(this)),this.directives=e(e({},this.directives),u)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),n.__l=this,n.setAttribute("data-l-app",""),this.state},t.prototype.component=function(e,t){this.components[e.toUpperCase()]=t},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.patch=function(e){var t={state:this.state,directives:this.directives,components:this.components};g(this.vdom,t,e)},t.prototype.compile=function(e){return y(e,this.state,this.components,!0)},t}(),A=function(e,t){return new E(e,t)},T=function(e){void 0===e&&(e=document),n(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===e.__l})).map((function(e){var t=e.getAttribute("l-state");try{var r=new Function("return "+t)();A(r||{}).mount(e)}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+t+'"\nElement:',e)}}))},x=function(e,t,r){void 0===t&&(t=document),new MutationObserver((function(t){t.map((function(t){if(t.addedNodes.length>0)t.addedNodes.forEach((function(t){1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute("l-state")&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,r||{childList:!0,attributes:!0,subtree:!0})};export{y as compile,A as createApp,u as directives,v as h,T as init,x as listen,g as patch,b as reactive,f as renderDirective};

134

dist/legacy/lucia.js

@@ -115,2 +115,4 @@ (function (global, factory) {

var rawDirectiveSplitRE = function () { return /:|\./; };
var eventDirectivePrefixRE = function () { return /on|@/; };
var parenthesisWrapReplaceRE = function () { return /\(|\)/g; };
var hasDirectiveRE = function () {

@@ -121,3 +123,3 @@ return new RegExp("(" + DIRECTIVE_PREFIX + "|" + Object.keys(DIRECTIVE_SHORTHANDS).join('|') + ")\\w+", 'gim');

if (hasThis === void 0) { hasThis = true; }
return new RegExp("" + (hasThis ? 'this\\.' : '') + key + "\\b");
return new RegExp("" + (hasThis ? 'this\\.' : '') + key + "\\b", 'g');
};

@@ -143,3 +145,3 @@

if (classes.length > 0) {
return el.setAttribute('class', (el.className + " " + classes.join(' ').trim()).trim());
return el.setAttribute('class', (el.className + " " + classes.join(' ')).trim());
}

@@ -278,31 +280,61 @@ else if (el.className.trim().length > 0) {

var forDirective = function (_a) {
var e_1, _b, e_2, _c;
var el = _a.el, data = _a.data, app = _a.app;
var _b = __read(data.value.split(/ +in +/g), 2), expression = _b[0], target = _b[1];
var _c = __read(expression.split(','), 2), item = _c[0], index = _c[1];
var hydratedArray = compute(target, { $el: el })(app.state);
var template = String(el.__l_for);
if (template) {
var accumulator = '';
for (var i = 0; i < hydratedArray.length; i++) {
var content = template;
if (item)
content = content.replace(new RegExp("this." + item.trim(), 'g'), target + "[" + i + "]");
if (index)
content = content.replace(new RegExp("this." + index.trim(), 'g'), String(i));
accumulator += content;
}
el.innerHTML = accumulator;
var _d = __read(data.value.split(/in +/g), 2), expression = _d[0], target = _d[1];
var _e = __read(expression.replace(parenthesisWrapReplaceRE(), '').split(','), 2), item = _e[0], index = _e[1];
var currArray = __spread(compute(target, { $el: el })(app.state));
var template = String(el.__l_for_template);
if (template.trim() === '') {
el.innerHTML = currArray.join('');
}
else {
el.innerHTML = hydratedArray.join('');
if (el.innerHTML.trim() === template)
el.innerHTML = '';
var arrayDiff = currArray.length - el.children.length;
if (arrayDiff !== 0) {
for (var i = Math.abs(arrayDiff); i > 0; i--) {
if (arrayDiff < 0)
el.removeChild(el.lastChild);
else {
var temp = document.createElement('div');
var content = template;
if (item) {
content = content.replace(expressionPropRE(item.trim()), target + "[" + (currArray.length - i) + "]");
}
if (index) {
content = content.replace(expressionPropRE(index.trim()), String(currArray.length - i));
}
temp.innerHTML = content;
el.appendChild(temp.firstChild);
}
}
}
}
var scope = createApp(__assign({}, app.state));
Object.entries(app.directives || {}).map(function (_a) {
var _b = __read(_a, 2), name = _b[0], evaluationCallback = _b[1];
scope.directive(name, evaluationCallback);
});
Object.entries(app.components || {}).map(function (_a) {
var _b = __read(_a, 2), name = _b[0], templateCallback = _b[1];
scope.component(name, templateCallback);
});
try {
for (var _f = __values(Object.entries(app.directives || {})), _g = _f.next(); !_g.done; _g = _f.next()) {
var _h = __read(_g.value, 2), name_1 = _h[0], evaluationCallback = _h[1];
scope.directive(name_1, evaluationCallback);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_g && !_g.done && (_b = _f.return)) _b.call(_f);
}
finally { if (e_1) throw e_1.error; }
}
try {
for (var _j = __values(Object.entries(app.components || {})), _k = _j.next(); !_k.done; _k = _j.next()) {
var _l = __read(_k.value, 2), name_2 = _l[0], templateCallback = _l[1];
scope.component(name_2, templateCallback);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_k && !_k.done && (_c = _j.return)) _c.call(_j);
}
finally { if (e_2) throw e_2.error; }
}
scope.mount(el);

@@ -360,7 +392,7 @@ };

var returnable = true;
if (name_1.includes('for') && el.__l_for === undefined) {
el.__l_for = String(el.innerHTML).trim();
if (name_1.includes('for') && el.__l_for_template === undefined) {
el.__l_for_template = String(el.innerHTML).trim();
returnable = false;
}
if (/on|@/.test(name_1))
if (eventDirectivePrefixRE().test(name_1))
returnable = false;

@@ -527,4 +559,5 @@ var directiveData = { compute: compute(value, { $el: el }, returnable), value: value };

var handlePatch = function (target, key, state, patch, needsUpdate) {
var e_1, _a, e_2, _b;
if (needsUpdate === void 0) { needsUpdate = false; }
if (key === 'length') {
if (key === 'length' || target instanceof Array) {
var affectedKeys = Object.keys(state).filter(function (k) {

@@ -538,4 +571,34 @@ return state[k] instanceof Array && arrayEquals(target, state[k]);

else {
var keys = [key];
try {
for (var _c = __values(document.querySelectorAll('[l-for]')), _d = _c.next(); !_d.done; _d = _c.next()) {
var el = _d.value;
var stateKeys = Object.keys(el.__l.state);
if (stateKeys.indexOf(key) !== -1) {
stateKeys.splice(stateKeys.indexOf(key), 1);
try {
for (var stateKeys_1 = (e_2 = void 0, __values(stateKeys)), stateKeys_1_1 = stateKeys_1.next(); !stateKeys_1_1.done; stateKeys_1_1 = stateKeys_1.next()) {
var k = stateKeys_1_1.value;
keys.push(k);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (stateKeys_1_1 && !stateKeys_1_1.done && (_b = stateKeys_1.return)) _b.call(stateKeys_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
if (needsUpdate)
patch([key]);
patch(keys);
return false;

@@ -555,3 +618,3 @@ }

set: function (target, key, value) {
var needsUpdate = target[key] !== value;
var needsUpdate = target[key] !== value || target instanceof Array || typeof target === 'object';
if (needsUpdate) {

@@ -647,3 +710,3 @@ target[key] = value;

if (shallow === void 0) { shallow = false; }
var rootEl = typeof el === 'string' ? document.querySelector(el) : el;
var rootEl = (typeof el === 'string' ? document.querySelector(el) : el);
this.vdom = this.compile(rootEl);

@@ -657,2 +720,4 @@ if (!shallow) {

this.mountHook(this.state);
rootEl.__l = this;
rootEl.setAttribute('data-l-app', '');
return this.state;

@@ -693,5 +758,4 @@ };

var state = new Function("return " + expression)();
var app = createApp(state);
var app = createApp(state || {});
app.mount(el);
el.__l = app;
}

@@ -698,0 +762,0 @@ catch (err) {

2

dist/legacy/lucia.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Lucia=t()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e,t,n,r){return new(n||(n=Promise))((function(i,o){function a(e){try{u(r.next(e))}catch(e){o(e)}}function l(e){try{u(r.throw(e))}catch(e){o(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,l)}u((r=r.apply(e,t||[])).next())}))}function n(e,t){var n,r,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(o){return function(l){return function(o){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(i=2&o[0]?r.return:o[0]?r.throw||((i=r.return)&&i.call(r),0):r.next)&&!(i=i.call(r,o[1])).done)return i;switch(r=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,r=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],r=0}finally{n=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,l])}}}function r(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],r=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&r>=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function i(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,i,o=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(r=o.next()).done;)a.push(r.value)}catch(e){i={error:e}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a}function o(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(i(arguments[t]));return e}var a,l="l-",u="%LUCIA_FIRST_RENDER%";!function(e){e["@"]="on",e[":"]="bind"}(a||(a={}));var s=function(){return new RegExp("(l-|"+Object.keys(a).join("|")+")\\w+","gim")},c=function(e,t){return void 0===t&&(t=!0),new RegExp((t?"this\\.":"")+e+"\\b")};function f(e){try{var t=this.returnable?"return "+this.expression:this.expression;return(new(Function.bind.apply(Function,o([void 0],Object.keys(this.argsKV),[t])))).bind(e).apply(void 0,o(Object.values(this.argsKV)))}catch(e){console.warn('Lucia Error: "'+e+'"\n\nExpression: "'+this.expression+'"\nElement:',this.argsKV.$el)}}var v,p=function(e,t,n){return void 0===n&&(n=!0),f.bind({expression:e,argsKV:{$el:t.$el},returnable:n})},d={BIND:function(e){var t=e.el,n=e.name,r=e.data,i=e.app;switch(n.split(":")[1]){case"class":var o=r.compute(i.state);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 a=[];for(var l in o)o[l]&&a.push(l);return a.length>0?t.setAttribute("class",(t.className+" "+a.join(" ").trim()).trim()):t.className.trim().length>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var u=r.compute(i.state);for(var l in t.removeAttribute("style"),u)t.style[l]=u[l];break;default:var s=r.compute(i.state);if("object"==typeof s&&null!==s)for(var l in s)s[l]?t.setAttribute(l,s[l]):t.removeAttribute(l);else s?t.setAttribute(n.split(":")[1],s):t.removeAttribute(n.split(":")[1])}},HTML:function(t){var n,r=t.el,o=t.data,a=t.app;r.innerHTML=null!==(n=o.compute(a.state))&&void 0!==n?n:o.value;var l=N(e({},a.state));Object.entries(a.directives||{}).map((function(e){var t=i(e,2),n=t[0],r=t[1];l.directive(n,r)})),Object.entries(a.components||{}).map((function(e){var t=i(e,2),n=t[0],r=t[1];l.component(n,r)})),l.mount(r)},IF:function(e){var t=e.el,n=e.data,r=e.app;n.compute(r.state)?t.style.removeProperty("display"):t.style.display="none"},MODEL:function(e){var t=e.el,n=e.data,r=e.app,i=t,o=n.compute(r.state);i.value!==o&&(i.value=o),i.oninput=function(){return function(e,t,n,r){var i,o="number"==typeof t&&!isNaN(e.value),a="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=o?"Number('"+e.value+"').toPrecision()":a?"Boolean('"+e.value+"')":l?"null"===e.value?null:void 0:"'"+e.value+"'",p(n.value+" = "+i,{$el:e},!1)(r.state),i}(i,o,n,r)}},ON:function(e){var t=e.el,n=e.name,r=e.data,o=e.app,a=i(n.split("."),2),l=a[0],u=a[1],s=l.split(":")[1],c=u||null;t["on"+s]=function(e){"prevent"===c&&e.preventDefault(),"stop"===c&&e.stopPropagation(),r.compute(o.state)}},TEXT:function(e){var t,n=e.el,r=e.data,i=e.app;n.textContent=null!==(t=r.compute(i.state))&&void 0!==t?t:r.value},FOR:function(t){var n=t.el,r=t.data,o=t.app,a=i(r.value.split(/ +in +/g),2),l=a[0],u=a[1],s=i(l.split(","),2),c=s[0],f=s[1],v=p(u,{$el:n})(o.state),d=String(n.__l_for);if(d){for(var h="",y=0;y<v.length;y++){var m=d;c&&(m=m.replace(new RegExp("this."+c.trim(),"g"),u+"["+y+"]")),f&&(m=m.replace(new RegExp("this."+f.trim(),"g"),String(y))),h+=m}n.innerHTML=h}else n.innerHTML=v.join("");var b=N(e({},o.state));Object.entries(o.directives||{}).map((function(e){var t=i(e,2),n=t[0],r=t[1];b.directive(n,r)})),Object.entries(o.components||{}).map((function(e){var t=i(e,2),n=t[0],r=t[1];b.component(n,r)})),b.mount(n)}},h=function(e,t){t[e.name.split(/:|\./)[0].toUpperCase()](e)};!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(v||(v={}));var y=function(t,n,r){void 0===n&&(n=[]);var i=e({},null==r?void 0:r.attributes),o=e({},null==r?void 0:r.directives);return n=n instanceof Array?n:[n],i.className&&(i.className=i.className.trim()),{tag:t,children:n,props:{attributes:i,directives:o,ref:(null==r?void 0:r.ref)||void 0,type:(null==r?void 0:r.type)||0}}},m=function(e){var t,n,i={},u={};if(e.attributes)try{for(var s=r(o(e.attributes)),c=s.next();!c.done;c=s.next()){var f=c.value,v=f.name,d=f.value,h=!0;v.includes("for")&&void 0===e.__l_for&&(e.__l_for=String(e.innerHTML).trim(),h=!1),/on|@/.test(v)&&(h=!1);var y={compute:p(d,{$el:e},h),value:d};v.startsWith(l)?u[v.slice(l.length)]=y:Object.keys(a).includes(v[0])?u[a[v[0]]+":"+v.slice(1)]=y:i[v]=d}}catch(e){t={error:e}}finally{try{c&&!c.done&&(n=s.return)&&n.call(s)}finally{if(t)throw t.error}}return{attributes:i,directives:u}},b=function(e,t,n){var r=m(e),i=r.attributes,o=r.directives,a=v.STATIC,l=Object.keys(o).length>0,u=Object.values(o).some((function(e){var n=e.value;return Object.keys(t).some((function(e){return c(e,!1).test(n)}))}));return l&&(a=v.NEEDS_PATCH),u&&(a=v.DYNAMIC),y(e.tagName.toLowerCase(),n,{attributes:i,directives:o,ref:a===v.STATIC||i.id?void 0:e,type:a})},g=function(e,t,n,o,a){var l,u,c,f,v,p,d;if(void 0===t&&(t={}),void 0===n&&(n={}),void 0===o&&(o=!1),void 0===a&&(a=!1),!e)throw new Error("Please provide a Element");var h=[],y=Array.prototype.slice.call(e.childNodes);try{for(var w=r(y),T=w.next();!T.done;T=w.next()){var A=T.value;switch(A.nodeType){case Node.TEXT_NODE:!o&&A.nodeValue&&h.push(A.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(A.tagName)){var x=document.createElement("div"),N=n[A.tagName]({children:A.innerHTML,state:t});x.innerHTML=N;try{for(var j=(c=void 0,r(Object.entries(m(A).directives))),O=j.next();!O.done;O=j.next()){var _=i(O.value,2),S=_[0],C=_[1];null===(d=x.firstElementChild)||void 0===d||d.setAttribute("l-"+S,C.value)}}catch(e){c={error:e}}finally{try{O&&!O.done&&(f=j.return)&&f.call(j)}finally{if(c)throw c.error}}if(!o||s().test(x.outerHTML)){var k=g(x,t,n,o,!0);try{for(var L=(v=void 0,r(k)),H=L.next();!H.done;H=L.next()){var M=H.value;h.push(M)}}catch(e){v={error:e}}finally{try{H&&!H.done&&(p=L.return)&&p.call(L)}finally{if(v)throw v.error}}}e.replaceChild(x.firstElementChild,A)}else if(!o||s().test(A.outerHTML)){k=g(A,t,n,o,!0);var D=b(A,t,k);h.push(D)}}}}catch(e){l={error:e}}finally{try{T&&!T.done&&(u=w.return)&&u.call(w)}finally{if(l)throw l.error}}if(a)return h;var I=b(e,t,h);return o?E(I):I},E=function(t){var n,i,a=e({},t);a.children=a.children.filter((function(e){return"object"==typeof e&&e.props.type>0}));try{for(var l=r(t.children),u=l.next();!u.done;u=l.next()){var s=u.value;"string"!=typeof s&&(s.children.length>0&&(a.children=o(a.children,E({children:s.children}).children),s.children=[]))}}catch(e){n={error:e}}finally{try{u&&!u.done&&(i=l.return)&&i.call(l)}finally{if(n)throw n.error}}return a},w=function(e,t,n,r,i){if(void 0===i&&(i=!1),"length"===t){var o=Object.keys(n).filter((function(t){return n[t]instanceof Array&&(r=e,i=n[t],r instanceof Array&&i instanceof Array&&r.length===i.length&&r.every((function(e,t){return e===i[t]})));var r,i}));return 0!==o.length&&r(o),!0}return i&&r([t]),!1},T=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,r,i){var o=n[r]!==i;return o&&(n[r]=i),w(n,r,e,t,o),!0},deleteProperty:function(n,r){return delete n[r],w(n,r,e,t,!0),!0}};return new Proxy(e,n)},A=function(t,n,i){var o,a;void 0===n&&(n={});var l=!1,s=n.state||{};if(t){i||(i=Object.keys(s)),i[0]===u&&(l=!0);var f=function(t){if("string"==typeof t)return"continue";if(t.props.type>v.STATIC){var r=t.props,o=r.attributes,a=r.directives,u=r.ref,f=r.type,p=[];if(!l){var d=function(e){var t=1===f,n=i.some((function(t){return c(t).test(String(a[e].value))})),r=Object.keys(s).some((function(e){var t=i.some((function(t){return c(t).test(String(s[e]))}));return"function"==typeof s[e]&&t}));(t||n||r)&&p.push(e)};for(var y in a)d(y)}t.props.type=f===v.NEEDS_PATCH?v.STATIC:f,(l?Object.keys(a):p).map((function(t){var r=a[t],i=o.id?document.getElementById(o.id):u;h({el:i,name:t,data:r,app:n},e({},n.directives))}))}t.children.length>0&&A(t,n,i)};try{for(var p=r(t.children),d=p.next();!d.done;d=p.next()){f(d.value)}}catch(e){o={error:e}}finally{try{d&&!d.done&&(a=p.return)&&a.call(p)}finally{if(o)throw o.error}}}},x=function(){function t(e,t){void 0===e&&(e={}),this.state=e,this.directives={},this.components={},this.mountHook=t}return t.prototype.mount=function(t,n){void 0===n&&(n=!1);var r="string"==typeof t?document.querySelector(t):t;return this.vdom=this.compile(r),n||(this.state=T(this.state,this.patch.bind(this)),this.directives=e(e({},this.directives),d)),this.patch([u]),this.mountHook&&this.mountHook(this.state),this.state},t.prototype.component=function(e,t){this.components[e.toUpperCase()]=t},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.patch=function(e){var t={state:this.state,directives:this.directives,components:this.components};A(this.vdom,t,e)},t.prototype.compile=function(e){return g(e,this.state,this.components,!0)},t}(),N=function(e,t){return new x(e,t)},j="l-state",O=function(e){void 0===e&&(e=document),o(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===e.__l})).map((function(e){var t=e.getAttribute(j);try{var n=new Function("return "+t)(),r=N(n);r.mount(e),e.__l=r}catch(n){console.warn('Lucia Error: "'+n+'"\n\nExpression: "'+t+'"\nElement:',e)}}))},_=function(e,t,n){void 0===t&&(t=document),new MutationObserver((function(t){t.map((function(t){if(t.addedNodes.length>0)t.addedNodes.forEach((function(t){1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute(j)&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,n||{childList:!0,attributes:!0,subtree:!0})},S=Object.freeze({__proto__:null,createApp:N,h:y,compile:g,patch:A,reactive:T,directives:d,renderDirective:h,init:O,listen:_}),C=function(){return t(void 0,void 0,void 0,(function(){return n(this,(function(e){switch(e.label){case 0:return[4,new Promise((function(e){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}))];case 1:return e.sent(),O(),document.addEventListener("turbolinks:load",(function(){return O()})),_((function(e){return O(e)})),[2]}}))}))};return window.__l?window.__l((function(){return C()})):C(),S}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Lucia=t()}(this,(function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function t(e,t,r,n){return new(r||(r=Promise))((function(i,o){function a(e){try{u(n.next(e))}catch(e){o(e)}}function l(e){try{u(n.throw(e))}catch(e){o(e)}}function u(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,l)}u((n=n.apply(e,t||[])).next())}))}function r(e,t){var r,n,i,o,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function l(o){return function(l){return function(o){if(r)throw new TypeError("Generator is already executing.");for(;a;)try{if(r=1,n&&(i=2&o[0]?n.return:o[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,o[1])).done)return i;switch(n=0,i&&(o=[2&o[0],i.value]),o[0]){case 0:case 1:i=o;break;case 4:return a.label++,{value:o[1],done:!1};case 5:a.label++,n=o[1],o=[0];continue;case 7:o=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==o[0]&&2!==o[0])){a=0;continue}if(3===o[0]&&(!i||o[1]>i[0]&&o[1]<i[3])){a.label=o[1];break}if(6===o[0]&&a.label<i[1]){a.label=i[1],i=o;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(o);break}i[2]&&a.ops.pop(),a.trys.pop();continue}o=t.call(e,a)}catch(e){o=[6,e],n=0}finally{r=i=0}if(5&o[0])throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}([o,l])}}}function n(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function i(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,i,o=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)a.push(n.value)}catch(e){i={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function o(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(i(arguments[t]));return e}var a,l="l-",u="%LUCIA_FIRST_RENDER%";!function(e){e["@"]="on",e[":"]="bind"}(a||(a={}));var c=function(){return new RegExp("(l-|"+Object.keys(a).join("|")+")\\w+","gim")},s=function(e,t){return void 0===t&&(t=!0),new RegExp((t?"this\\.":"")+e+"\\b","g")};function f(e){try{var t=this.returnable?"return "+this.expression:this.expression;return(new(Function.bind.apply(Function,o([void 0],Object.keys(this.argsKV),[t])))).bind(e).apply(void 0,o(Object.values(this.argsKV)))}catch(e){console.warn('Lucia Error: "'+e+'"\n\nExpression: "'+this.expression+'"\nElement:',this.argsKV.$el)}}var v,d=function(e,t,r){return void 0===r&&(r=!0),f.bind({expression:e,argsKV:{$el:t.$el},returnable:r})},p={BIND:function(e){var t=e.el,r=e.name,n=e.data,i=e.app;switch(r.split(":")[1]){case"class":var o=n.compute(i.state);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 a=[];for(var l in o)o[l]&&a.push(l);return a.length>0?t.setAttribute("class",(t.className+" "+a.join(" ")).trim()):t.className.trim().length>0?t.setAttribute("class",t.className):t.removeAttribute("class");case"style":var u=n.compute(i.state);for(var l in t.removeAttribute("style"),u)t.style[l]=u[l];break;default:var c=n.compute(i.state);if("object"==typeof c&&null!==c)for(var l in c)c[l]?t.setAttribute(l,c[l]):t.removeAttribute(l);else c?t.setAttribute(r.split(":")[1],c):t.removeAttribute(r.split(":")[1])}},HTML:function(t){var r,n=t.el,o=t.data,a=t.app;n.innerHTML=null!==(r=o.compute(a.state))&&void 0!==r?r:o.value;var l=_(e({},a.state));Object.entries(a.directives||{}).map((function(e){var t=i(e,2),r=t[0],n=t[1];l.directive(r,n)})),Object.entries(a.components||{}).map((function(e){var t=i(e,2),r=t[0],n=t[1];l.component(r,n)})),l.mount(n)},IF:function(e){var t=e.el,r=e.data,n=e.app;r.compute(n.state)?t.style.removeProperty("display"):t.style.display="none"},MODEL:function(e){var t=e.el,r=e.data,n=e.app,i=t,o=r.compute(n.state);i.value!==o&&(i.value=o),i.oninput=function(){return function(e,t,r,n){var i,o="number"==typeof t&&!isNaN(e.value),a="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);return i=o?"Number('"+e.value+"').toPrecision()":a?"Boolean('"+e.value+"')":l?"null"===e.value?null:void 0:"'"+e.value+"'",d(r.value+" = "+i,{$el:e},!1)(n.state),i}(i,o,r,n)}},ON:function(e){var t=e.el,r=e.name,n=e.data,o=e.app,a=i(r.split("."),2),l=a[0],u=a[1],c=l.split(":")[1],s=u||null;t["on"+c]=function(e){"prevent"===s&&e.preventDefault(),"stop"===s&&e.stopPropagation(),n.compute(o.state)}},TEXT:function(e){var t,r=e.el,n=e.data,i=e.app;r.textContent=null!==(t=n.compute(i.state))&&void 0!==t?t:n.value},FOR:function(t){var r,a,l,u,c=t.el,f=t.data,v=t.app,p=i(f.value.split(/in +/g),2),h=p[0],y=p[1],m=i(h.replace(/\(|\)/g,"").split(","),2),b=m[0],g=m[1],w=o(d(y,{$el:c})(v.state)),E=String(c.__l_for_template);if(""===E.trim())c.innerHTML=w.join("");else{c.innerHTML.trim()===E&&(c.innerHTML="");var x=w.length-c.children.length;if(0!==x)for(var A=Math.abs(x);A>0;A--)if(x<0)c.removeChild(c.lastChild);else{var T=document.createElement("div"),N=E;b&&(N=N.replace(s(b.trim()),y+"["+(w.length-A)+"]")),g&&(N=N.replace(s(g.trim()),String(w.length-A))),T.innerHTML=N,c.appendChild(T.firstChild)}}var O=_(e({},v.state));try{for(var j=n(Object.entries(v.directives||{})),C=j.next();!C.done;C=j.next()){var S=i(C.value,2),L=S[0],k=S[1];O.directive(L,k)}}catch(e){r={error:e}}finally{try{C&&!C.done&&(a=j.return)&&a.call(j)}finally{if(r)throw r.error}}try{for(var M=n(Object.entries(v.components||{})),H=M.next();!H.done;H=M.next()){var D=i(H.value,2),I=D[0],P=D[1];O.component(I,P)}}catch(e){l={error:e}}finally{try{H&&!H.done&&(u=M.return)&&u.call(M)}finally{if(l)throw l.error}}O.mount(c)}},h=function(e,t){t[e.name.split(/:|\./)[0].toUpperCase()](e)};!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(v||(v={}));var y=function(t,r,n){void 0===r&&(r=[]);var i=e({},null==n?void 0:n.attributes),o=e({},null==n?void 0:n.directives);return r=r instanceof Array?r:[r],i.className&&(i.className=i.className.trim()),{tag:t,children:r,props:{attributes:i,directives:o,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},m=function(e){var t,r,i={},u={};if(e.attributes)try{for(var c=n(o(e.attributes)),s=c.next();!s.done;s=c.next()){var f=s.value,v=f.name,p=f.value,h=!0;v.includes("for")&&void 0===e.__l_for_template&&(e.__l_for_template=String(e.innerHTML).trim(),h=!1),/on|@/.test(v)&&(h=!1);var y={compute:d(p,{$el:e},h),value:p};v.startsWith(l)?u[v.slice(l.length)]=y:Object.keys(a).includes(v[0])?u[a[v[0]]+":"+v.slice(1)]=y:i[v]=p}}catch(e){t={error:e}}finally{try{s&&!s.done&&(r=c.return)&&r.call(c)}finally{if(t)throw t.error}}return{attributes:i,directives:u}},b=function(e,t,r){var n=m(e),i=n.attributes,o=n.directives,a=v.STATIC,l=Object.keys(o).length>0,u=Object.values(o).some((function(e){var r=e.value;return Object.keys(t).some((function(e){return s(e,!1).test(r)}))}));return l&&(a=v.NEEDS_PATCH),u&&(a=v.DYNAMIC),y(e.tagName.toLowerCase(),r,{attributes:i,directives:o,ref:a===v.STATIC||i.id?void 0:e,type:a})},g=function(e,t,r,o,a){var l,u,s,f,v,d,p;if(void 0===t&&(t={}),void 0===r&&(r={}),void 0===o&&(o=!1),void 0===a&&(a=!1),!e)throw new Error("Please provide a Element");var h=[],y=Array.prototype.slice.call(e.childNodes);try{for(var E=n(y),x=E.next();!x.done;x=E.next()){var A=x.value;switch(A.nodeType){case Node.TEXT_NODE:!o&&A.nodeValue&&h.push(A.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(r).includes(A.tagName)){var T=document.createElement("div"),_=r[A.tagName]({children:A.innerHTML,state:t});T.innerHTML=_;try{for(var N=(s=void 0,n(Object.entries(m(A).directives))),O=N.next();!O.done;O=N.next()){var j=i(O.value,2),C=j[0],S=j[1];null===(p=T.firstElementChild)||void 0===p||p.setAttribute("l-"+C,S.value)}}catch(e){s={error:e}}finally{try{O&&!O.done&&(f=N.return)&&f.call(N)}finally{if(s)throw s.error}}if(!o||c().test(T.outerHTML)){var L=g(T,t,r,o,!0);try{for(var k=(v=void 0,n(L)),M=k.next();!M.done;M=k.next()){var H=M.value;h.push(H)}}catch(e){v={error:e}}finally{try{M&&!M.done&&(d=k.return)&&d.call(k)}finally{if(v)throw v.error}}}e.replaceChild(T.firstElementChild,A)}else if(!o||c().test(A.outerHTML)){L=g(A,t,r,o,!0);var D=b(A,t,L);h.push(D)}}}}catch(e){l={error:e}}finally{try{x&&!x.done&&(u=E.return)&&u.call(E)}finally{if(l)throw l.error}}if(a)return h;var I=b(e,t,h);return o?w(I):I},w=function(t){var r,i,a=e({},t);a.children=a.children.filter((function(e){return"object"==typeof e&&e.props.type>0}));try{for(var l=n(t.children),u=l.next();!u.done;u=l.next()){var c=u.value;"string"!=typeof c&&(c.children.length>0&&(a.children=o(a.children,w({children:c.children}).children),c.children=[]))}}catch(e){r={error:e}}finally{try{u&&!u.done&&(i=l.return)&&i.call(l)}finally{if(r)throw r.error}}return a},E=function(e,t,r,i,o){var a,l,u,c;if(void 0===o&&(o=!1),"length"===t||e instanceof Array){var s=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}));return 0!==s.length&&i(s),!0}var f=[t];try{for(var v=n(document.querySelectorAll("[l-for]")),d=v.next();!d.done;d=v.next()){var p=d.value,h=Object.keys(p.__l.state);if(-1!==h.indexOf(t)){h.splice(h.indexOf(t),1);try{for(var y=(u=void 0,n(h)),m=y.next();!m.done;m=y.next()){var b=m.value;f.push(b)}}catch(e){u={error:e}}finally{try{m&&!m.done&&(c=y.return)&&c.call(y)}finally{if(u)throw u.error}}}}}catch(e){a={error:e}}finally{try{d&&!d.done&&(l=v.return)&&l.call(v)}finally{if(a)throw a.error}}return o&&i(f),!1},x=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){var o=r[n]!==i||r instanceof Array||"object"==typeof r;return o&&(r[n]=i),E(r,n,e,t,o),!0},deleteProperty:function(r,n){return delete r[n],E(r,n,e,t,!0),!0}};return new Proxy(e,r)},A=function(t,r,i){var o,a;void 0===r&&(r={});var l=!1,c=r.state||{};if(t){i||(i=Object.keys(c)),i[0]===u&&(l=!0);var f=function(t){if("string"==typeof t)return"continue";if(t.props.type>v.STATIC){var n=t.props,o=n.attributes,a=n.directives,u=n.ref,f=n.type,d=[];if(!l){var p=function(e){var t=1===f,r=i.some((function(t){return s(t).test(String(a[e].value))})),n=Object.keys(c).some((function(e){var t=i.some((function(t){return s(t).test(String(c[e]))}));return"function"==typeof c[e]&&t}));(t||r||n)&&d.push(e)};for(var y in a)p(y)}t.props.type=f===v.NEEDS_PATCH?v.STATIC:f,(l?Object.keys(a):d).map((function(t){var n=a[t],i=o.id?document.getElementById(o.id):u;h({el:i,name:t,data:n,app:r},e({},r.directives))}))}t.children.length>0&&A(t,r,i)};try{for(var d=n(t.children),p=d.next();!p.done;p=d.next()){f(p.value)}}catch(e){o={error:e}}finally{try{p&&!p.done&&(a=d.return)&&a.call(d)}finally{if(o)throw o.error}}}},T=function(){function t(e,t){void 0===e&&(e={}),this.state=e,this.directives={},this.components={},this.mountHook=t}return t.prototype.mount=function(t,r){void 0===r&&(r=!1);var n="string"==typeof t?document.querySelector(t):t;return this.vdom=this.compile(n),r||(this.state=x(this.state,this.patch.bind(this)),this.directives=e(e({},this.directives),p)),this.patch([u]),this.mountHook&&this.mountHook(this.state),n.__l=this,n.setAttribute("data-l-app",""),this.state},t.prototype.component=function(e,t){this.components[e.toUpperCase()]=t},t.prototype.directive=function(e,t){this.directives[e.toUpperCase()]=t},t.prototype.patch=function(e){var t={state:this.state,directives:this.directives,components:this.components};A(this.vdom,t,e)},t.prototype.compile=function(e){return g(e,this.state,this.components,!0)},t}(),_=function(e,t){return new T(e,t)},N="l-state",O=function(e){void 0===e&&(e=document),o(e.querySelectorAll("[l-state]")).filter((function(e){return void 0===e.__l})).map((function(e){var t=e.getAttribute(N);try{var r=new Function("return "+t)();_(r||{}).mount(e)}catch(r){console.warn('Lucia Error: "'+r+'"\n\nExpression: "'+t+'"\nElement:',e)}}))},j=function(e,t,r){void 0===t&&(t=document),new MutationObserver((function(t){t.map((function(t){if(t.addedNodes.length>0)t.addedNodes.forEach((function(t){1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute(N)&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,r||{childList:!0,attributes:!0,subtree:!0})},C=Object.freeze({__proto__:null,createApp:_,h:y,compile:g,patch:A,reactive:x,directives:p,renderDirective:h,init:O,listen:j}),S=function(){return t(void 0,void 0,void 0,(function(){return r(this,(function(e){switch(e.label){case 0:return[4,new Promise((function(e){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()}))];case 1:return e.sent(),O(),document.addEventListener("turbolinks:load",(function(){return O()})),j((function(e){return O(e)})),[2]}}))}))};return window.__l?window.__l((function(){return S()})):S(),C}));

86

dist/lucia.cjs.js

@@ -14,5 +14,7 @@ 'use strict';

const rawDirectiveSplitRE = () => /:|\./;
const eventDirectivePrefixRE = () => /on|@/;
const parenthesisWrapReplaceRE = () => /\(|\)/g;
const hasDirectiveRE = () => new RegExp(`(${DIRECTIVE_PREFIX}|${Object.keys(DIRECTIVE_SHORTHANDS).join('|')})\\w+`, 'gim');
const expressionPropRE = (key, hasThis = true) => {
return new RegExp(`${hasThis ? 'this\\.' : ''}${key}\\b`);
return new RegExp(`${hasThis ? 'this\\.' : ''}${key}\\b`, 'g');
};

@@ -37,3 +39,3 @@

if (classes.length > 0) {
return el.setAttribute('class', `${el.className} ${classes.join(' ').trim()}`.trim());
return el.setAttribute('class', `${el.className} ${classes.join(' ')}`.trim());
}

@@ -164,28 +166,39 @@ else if (el.className.trim().length > 0) {

const forDirective = ({ el, data, app }) => {
const [expression, target] = data.value.split(/ +in +/g);
const [item, index] = expression.split(',');
const hydratedArray = compute(target, { $el: el })(app.state);
const template = String(el.__l_for);
if (template) {
let accumulator = '';
for (let i = 0; i < hydratedArray.length; i++) {
let content = template;
if (item)
content = content.replace(new RegExp(`this.${item.trim()}`, 'g'), `${target}[${i}]`);
if (index)
content = content.replace(new RegExp(`this.${index.trim()}`, 'g'), String(i));
accumulator += content;
}
el.innerHTML = accumulator;
const [expression, target] = data.value.split(/in +/g);
const [item, index] = expression.replace(parenthesisWrapReplaceRE(), '').split(',');
const currArray = [...compute(target, { $el: el })(app.state)];
let template = String(el.__l_for_template);
if (template.trim() === '') {
el.innerHTML = currArray.join('');
}
else {
el.innerHTML = hydratedArray.join('');
if (el.innerHTML.trim() === template)
el.innerHTML = '';
const arrayDiff = currArray.length - el.children.length;
if (arrayDiff !== 0) {
for (let i = Math.abs(arrayDiff); i > 0; i--) {
if (arrayDiff < 0)
el.removeChild(el.lastChild);
else {
const temp = document.createElement('div');
let content = template;
if (item) {
content = content.replace(expressionPropRE(item.trim()), `${target}[${currArray.length - i}]`);
}
if (index) {
content = content.replace(expressionPropRE(index.trim()), String(currArray.length - i));
}
temp.innerHTML = content;
el.appendChild(temp.firstChild);
}
}
}
}
const scope = createApp(Object.assign({}, app.state));
Object.entries(app.directives || {}).map(([name, evaluationCallback]) => {
for (const [name, evaluationCallback] of Object.entries(app.directives || {})) {
scope.directive(name, evaluationCallback);
});
Object.entries(app.components || {}).map(([name, templateCallback]) => {
}
for (const [name, templateCallback] of Object.entries(app.components || {})) {
scope.component(name, templateCallback);
});
}
scope.mount(el);

@@ -239,7 +252,7 @@ };

let returnable = true;
if (name.includes('for') && el.__l_for === undefined) {
el.__l_for = String(el.innerHTML).trim();
if (name.includes('for') && el.__l_for_template === undefined) {
el.__l_for_template = String(el.innerHTML).trim();
returnable = false;
}
if (/on|@/.test(name))
if (eventDirectivePrefixRE().test(name))
returnable = false;

@@ -352,3 +365,3 @@ const directiveData = { compute: compute(value, { $el: el }, returnable), value };

const handlePatch = (target, key, state, patch, needsUpdate = false) => {
if (key === 'length') {
if (key === 'length' || target instanceof Array) {
const affectedKeys = Object.keys(state).filter((k) => {

@@ -362,4 +375,14 @@ return state[k] instanceof Array && arrayEquals(target, state[k]);

else {
const keys = [key];
for (const el of document.querySelectorAll('[l-for]')) {
const stateKeys = Object.keys(el.__l.state);
if (stateKeys.indexOf(key) !== -1) {
stateKeys.splice(stateKeys.indexOf(key), 1);
for (const k of stateKeys) {
keys.push(k);
}
}
}
if (needsUpdate)
patch([key]);
patch(keys);
return false;

@@ -379,3 +402,3 @@ }

set(target, key, value) {
const needsUpdate = target[key] !== value;
const needsUpdate = target[key] !== value || target instanceof Array || typeof target === 'object';
if (needsUpdate) {

@@ -447,3 +470,3 @@ target[key] = value;

mount(el, shallow = false) {
const rootEl = typeof el === 'string' ? document.querySelector(el) : el;
const rootEl = (typeof el === 'string' ? document.querySelector(el) : el);
this.vdom = this.compile(rootEl);

@@ -457,2 +480,4 @@ if (!shallow) {

this.mountHook(this.state);
rootEl.__l = this;
rootEl.setAttribute('data-l-app', '');
return this.state;

@@ -491,5 +516,4 @@ }

const state = new Function(`return ${expression}`)();
const app = createApp(state);
const app = createApp(state || {});
app.mount(el);
el.__l = app;
}

@@ -496,0 +520,0 @@ catch (err) {

2

dist/lucia.cjs.min.js

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=()=>new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim"),s=(e,t=!0)=>new RegExp(`${t?"this\\.":""}${e}\\b`);function n(e){try{const t=this.returnable?`return ${this.expression}`:this.expression;return new Function(...Object.keys(this.argsKV),t).bind(e)(...Object.values(this.argsKV))}catch(e){console.warn(`Lucia Error: "${e}"\n\nExpression: "${this.expression}"\nElement:`,this.argsKV.$el)}}const r=(e,t,s=!0)=>n.bind({expression:e,argsKV:{$el:t.$el},returnable:s}),i={BIND:({el:e,name:t,data:s,app:n})=>{switch(t.split(":")[1]){case"class":const r=s.compute(n.state);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const e in r)r[e]&&t.push(e);return t.length>0?e.setAttribute("class",`${e.className} ${t.join(" ").trim()}`.trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class")}case"style":const i=s.compute(n.state);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const o=s.compute(n.state);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,app:s})=>{var n;e.innerHTML=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value;const r=b(Object.assign({},s.state));Object.entries(s.directives||{}).map((([e,t])=>{r.directive(e,t)})),Object.entries(s.components||{}).map((([e,t])=>{r.component(e,t)})),r.mount(e)},IF:({el:e,data:t,app:s})=>{t.compute(s.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:({el:e,data:t,app:s})=>{const n=e,i=t.compute(s.state);n.value!==i&&(n.value=i),n.oninput=()=>((e,t,s,n)=>{const i="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),a=null==t&&("null"===e.value||"undefined"===e.value);let l;return l=i?`Number('${e.value}').toPrecision()`:o?`Boolean('${e.value}')`:a?"null"===e.value?null:void 0:`'${e.value}'`,r(`${s.value} = ${l}`,{$el:e},!1)(n.state),l})(n,i,t,s)},ON:({el:e,name:t,data:s,app:n})=>{const[r,i]=t.split("."),o=r.split(":")[1],a=i||null;e[`on${o}`]=e=>{"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),s.compute(n.state)}},TEXT:({el:e,data:t,app:s})=>{var n;e.textContent=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value},FOR:({el:e,data:t,app:s})=>{const[n,i]=t.value.split(/ +in +/g),[o,a]=n.split(","),l=r(i,{$el:e})(s.state),c=String(e.__l_for);if(c){let t="";for(let e=0;e<l.length;e++){let s=c;o&&(s=s.replace(new RegExp(`this.${o.trim()}`,"g"),`${i}[${e}]`)),a&&(s=s.replace(new RegExp(`this.${a.trim()}`,"g"),String(e))),t+=s}e.innerHTML=t}else e.innerHTML=l.join("");const p=b(Object.assign({},s.state));Object.entries(s.directives||{}).map((([e,t])=>{p.directive(e,t)})),Object.entries(s.components||{}).map((([e,t])=>{p.component(e,t)})),p.mount(e)}},o=(e,t)=>{t[e.name.split(/:|\./)[0].toUpperCase()](e)};var a;!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(a||(a={}));const l=(e,t=[],s)=>{const n=Object.assign({},null==s?void 0:s.attributes),r=Object.assign({},null==s?void 0:s.directives);return t=t instanceof Array?t:[t],n.className&&(n.className=n.className.trim()),{tag:e,children:t,props:{attributes:n,directives:r,ref:(null==s?void 0:s.ref)||void 0,type:(null==s?void 0:s.type)||0}}},c=t=>{const s={},n={};if(t.attributes)for(const{name:i,value:o}of[...t.attributes]){let a=!0;i.includes("for")&&void 0===t.__l_for&&(t.__l_for=String(t.innerHTML).trim(),a=!1),/on|@/.test(i)&&(a=!1);const l={compute:r(o,{$el:t},a),value:o};i.startsWith("l-")?n[i.slice("l-".length)]=l:Object.keys(e).includes(i[0])?n[`${e[i[0]]}:${i.slice(1)}`]=l:s[i]=o}return{attributes:s,directives:n}},p=(e,t,n)=>{const{attributes:r,directives:i}=c(e);let o=a.STATIC;const p=Object.keys(i).length>0,u=Object.values(i).some((({value:e})=>Object.keys(t).some((t=>s(t,!1).test(e)))));return p&&(o=a.NEEDS_PATCH),u&&(o=a.DYNAMIC),l(e.tagName.toLowerCase(),n,{attributes:r,directives:i,ref:o===a.STATIC||r.id?void 0:e,type:o})},u=(e,s={},n={},r=!1,i=!1)=>{var o;if(!e)throw new Error("Please provide a Element");const a=[],l=Array.prototype.slice.call(e.childNodes);for(const i of l)switch(i.nodeType){case Node.TEXT_NODE:!r&&i.nodeValue&&a.push(i.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(i.tagName)){const l=document.createElement("div"),p=n[i.tagName]({children:i.innerHTML,state:s});l.innerHTML=p;for(const[e,t]of Object.entries(c(i).directives))null===(o=l.firstElementChild)||void 0===o||o.setAttribute(`l-${e}`,t.value);if(!r||t().test(l.outerHTML)){const e=u(l,s,n,r,!0);for(const t of e)a.push(t)}e.replaceChild(l.firstElementChild,i)}else if(!r||t().test(i.outerHTML)){const e=u(i,s,n,r,!0),t=p(i,s,e);a.push(t)}}if(i)return a;{let t=p(e,s,a);return r?d(t):t}},d=e=>{const t=Object.assign({},e);t.children=t.children.filter((e=>"object"==typeof e&&e.props.type>0));for(const s of e.children)"string"!=typeof s&&s.children.length>0&&(t.children=[...t.children,...d({children:s.children}).children],s.children=[]);return t},m=(e,t,s,n,r=!1)=>{if("length"===t){const t=Object.keys(s).filter((t=>{return s[t]instanceof Array&&(n=e,r=s[t],n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t])));var n,r}));return 0!==t.length&&n(t),!0}return r&&n([t]),!1},h=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){const i=s[n]!==r;return i&&(s[n]=r),m(s,n,e,t,i),!0},deleteProperty:(s,n)=>(delete s[n],m(s,n,e,t,!0),!0)};return new Proxy(e,s)},v=(e,t={},n)=>{let r=!1;const i=t.state||{};if(e){n||(n=Object.keys(i)),"%LUCIA_FIRST_RENDER%"===n[0]&&(r=!0);for(let l of e.children)if("string"!=typeof l){if(l.props.type>a.STATIC){const{attributes:e,directives:c,ref:p,type:u}=l.props;let d=[];if(!r)for(const e in c){const t=1===u,r=n.some((t=>s(t).test(String(c[e].value)))),o=Object.keys(i).some((e=>{const t=n.some((t=>s(t).test(String(i[e]))));return"function"==typeof i[e]&&t}));(t||r||o)&&d.push(e)}l.props.type=u===a.NEEDS_PATCH?a.STATIC:u;(r?Object.keys(c):d).map((s=>{const n=c[s],r=e.id?document.getElementById(e.id):p;o({el:r,name:s,data:n,app:t},Object.assign({},t.directives))}))}l.children.length>0&&v(l,t,n)}}};class f{constructor(e={},t){this.state=e,this.directives={},this.components={},this.mountHook=t}mount(e,t=!1){const s="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(s),t||(this.state=h(this.state,this.patch.bind(this)),this.directives=Object.assign(Object.assign({},this.directives),i)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),this.state}component(e,t){this.components[e.toUpperCase()]=t}directive(e,t){this.directives[e.toUpperCase()]=t}patch(e){const t={state:this.state,directives:this.directives,components:this.components};v(this.vdom,t,e)}compile(e){return u(e,this.state,this.components,!0)}}const b=(e,t)=>new f(e,t);exports.compile=u,exports.createApp=b,exports.directives=i,exports.h=l,exports.init=(e=document)=>{[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const t=e.getAttribute("l-state");try{const s=new Function(`return ${t}`)(),n=b(s);n.mount(e),e.__l=n}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${t}"\nElement:`,e)}}))},exports.listen=(e,t=document,s)=>{new MutationObserver((t=>{t.map((t=>{if(t.addedNodes.length>0)t.addedNodes.forEach((t=>{1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute("l-state")&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,s||{childList:!0,attributes:!0,subtree:!0})},exports.patch=v,exports.reactive=h,exports.renderDirective=o;
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=()=>new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim"),s=(e,t=!0)=>new RegExp(`${t?"this\\.":""}${e}\\b`,"g");function n(e){try{const t=this.returnable?`return ${this.expression}`:this.expression;return new Function(...Object.keys(this.argsKV),t).bind(e)(...Object.values(this.argsKV))}catch(e){console.warn(`Lucia Error: "${e}"\n\nExpression: "${this.expression}"\nElement:`,this.argsKV.$el)}}const r=(e,t,s=!0)=>n.bind({expression:e,argsKV:{$el:t.$el},returnable:s}),i={BIND:({el:e,name:t,data:s,app:n})=>{switch(t.split(":")[1]){case"class":const r=s.compute(n.state);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const e in r)r[e]&&t.push(e);return t.length>0?e.setAttribute("class",`${e.className} ${t.join(" ")}`.trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class")}case"style":const i=s.compute(n.state);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const o=s.compute(n.state);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,app:s})=>{var n;e.innerHTML=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value;const r=b(Object.assign({},s.state));Object.entries(s.directives||{}).map((([e,t])=>{r.directive(e,t)})),Object.entries(s.components||{}).map((([e,t])=>{r.component(e,t)})),r.mount(e)},IF:({el:e,data:t,app:s})=>{t.compute(s.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:({el:e,data:t,app:s})=>{const n=e,i=t.compute(s.state);n.value!==i&&(n.value=i),n.oninput=()=>((e,t,s,n)=>{const i="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);let a;return a=i?`Number('${e.value}').toPrecision()`:o?`Boolean('${e.value}')`:l?"null"===e.value?null:void 0:`'${e.value}'`,r(`${s.value} = ${a}`,{$el:e},!1)(n.state),a})(n,i,t,s)},ON:({el:e,name:t,data:s,app:n})=>{const[r,i]=t.split("."),o=r.split(":")[1],l=i||null;e[`on${o}`]=e=>{"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),s.compute(n.state)}},TEXT:({el:e,data:t,app:s})=>{var n;e.textContent=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value},FOR:({el:e,data:t,app:n})=>{const[i,o]=t.value.split(/in +/g),[l,a]=i.replace(/\(|\)/g,"").split(","),c=[...r(o,{$el:e})(n.state)];let p=String(e.__l_for_template);if(""===p.trim())e.innerHTML=c.join("");else{e.innerHTML.trim()===p&&(e.innerHTML="");const t=c.length-e.children.length;if(0!==t)for(let n=Math.abs(t);n>0;n--)if(t<0)e.removeChild(e.lastChild);else{const t=document.createElement("div");let r=p;l&&(r=r.replace(s(l.trim()),`${o}[${c.length-n}]`)),a&&(r=r.replace(s(a.trim()),String(c.length-n))),t.innerHTML=r,e.appendChild(t.firstChild)}}const u=b(Object.assign({},n.state));for(const[e,t]of Object.entries(n.directives||{}))u.directive(e,t);for(const[e,t]of Object.entries(n.components||{}))u.component(e,t);u.mount(e)}},o=(e,t)=>{t[e.name.split(/:|\./)[0].toUpperCase()](e)};var l;!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(l||(l={}));const a=(e,t=[],s)=>{const n=Object.assign({},null==s?void 0:s.attributes),r=Object.assign({},null==s?void 0:s.directives);return t=t instanceof Array?t:[t],n.className&&(n.className=n.className.trim()),{tag:e,children:t,props:{attributes:n,directives:r,ref:(null==s?void 0:s.ref)||void 0,type:(null==s?void 0:s.type)||0}}},c=t=>{const s={},n={};if(t.attributes)for(const{name:i,value:o}of[...t.attributes]){let l=!0;i.includes("for")&&void 0===t.__l_for_template&&(t.__l_for_template=String(t.innerHTML).trim(),l=!1),/on|@/.test(i)&&(l=!1);const a={compute:r(o,{$el:t},l),value:o};i.startsWith("l-")?n[i.slice("l-".length)]=a:Object.keys(e).includes(i[0])?n[`${e[i[0]]}:${i.slice(1)}`]=a:s[i]=o}return{attributes:s,directives:n}},p=(e,t,n)=>{const{attributes:r,directives:i}=c(e);let o=l.STATIC;const p=Object.keys(i).length>0,u=Object.values(i).some((({value:e})=>Object.keys(t).some((t=>s(t,!1).test(e)))));return p&&(o=l.NEEDS_PATCH),u&&(o=l.DYNAMIC),a(e.tagName.toLowerCase(),n,{attributes:r,directives:i,ref:o===l.STATIC||r.id?void 0:e,type:o})},u=(e,s={},n={},r=!1,i=!1)=>{var o;if(!e)throw new Error("Please provide a Element");const l=[],a=Array.prototype.slice.call(e.childNodes);for(const i of a)switch(i.nodeType){case Node.TEXT_NODE:!r&&i.nodeValue&&l.push(i.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(i.tagName)){const a=document.createElement("div"),p=n[i.tagName]({children:i.innerHTML,state:s});a.innerHTML=p;for(const[e,t]of Object.entries(c(i).directives))null===(o=a.firstElementChild)||void 0===o||o.setAttribute(`l-${e}`,t.value);if(!r||t().test(a.outerHTML)){const e=u(a,s,n,r,!0);for(const t of e)l.push(t)}e.replaceChild(a.firstElementChild,i)}else if(!r||t().test(i.outerHTML)){const e=u(i,s,n,r,!0),t=p(i,s,e);l.push(t)}}if(i)return l;{let t=p(e,s,l);return r?d(t):t}},d=e=>{const t=Object.assign({},e);t.children=t.children.filter((e=>"object"==typeof e&&e.props.type>0));for(const s of e.children)"string"!=typeof s&&s.children.length>0&&(t.children=[...t.children,...d({children:s.children}).children],s.children=[]);return t},m=(e,t,s,n,r=!1)=>{if("length"===t||e instanceof Array){const t=Object.keys(s).filter((t=>{return s[t]instanceof Array&&(n=e,r=s[t],n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t])));var n,r}));return 0!==t.length&&n(t),!0}{const e=[t];for(const s of document.querySelectorAll("[l-for]")){const n=Object.keys(s.__l.state);if(-1!==n.indexOf(t)){n.splice(n.indexOf(t),1);for(const t of n)e.push(t)}}return r&&n(e),!1}},h=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){const i=s[n]!==r||s instanceof Array||"object"==typeof s;return i&&(s[n]=r),m(s,n,e,t,i),!0},deleteProperty:(s,n)=>(delete s[n],m(s,n,e,t,!0),!0)};return new Proxy(e,s)},f=(e,t={},n)=>{let r=!1;const i=t.state||{};if(e){n||(n=Object.keys(i)),"%LUCIA_FIRST_RENDER%"===n[0]&&(r=!0);for(let a of e.children)if("string"!=typeof a){if(a.props.type>l.STATIC){const{attributes:e,directives:c,ref:p,type:u}=a.props;let d=[];if(!r)for(const e in c){const t=1===u,r=n.some((t=>s(t).test(String(c[e].value)))),o=Object.keys(i).some((e=>{const t=n.some((t=>s(t).test(String(i[e]))));return"function"==typeof i[e]&&t}));(t||r||o)&&d.push(e)}a.props.type=u===l.NEEDS_PATCH?l.STATIC:u;(r?Object.keys(c):d).map((s=>{const n=c[s],r=e.id?document.getElementById(e.id):p;o({el:r,name:s,data:n,app:t},Object.assign({},t.directives))}))}a.children.length>0&&f(a,t,n)}}};class v{constructor(e={},t){this.state=e,this.directives={},this.components={},this.mountHook=t}mount(e,t=!1){const s="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(s),t||(this.state=h(this.state,this.patch.bind(this)),this.directives=Object.assign(Object.assign({},this.directives),i)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),s.__l=this,s.setAttribute("data-l-app",""),this.state}component(e,t){this.components[e.toUpperCase()]=t}directive(e,t){this.directives[e.toUpperCase()]=t}patch(e){const t={state:this.state,directives:this.directives,components:this.components};f(this.vdom,t,e)}compile(e){return u(e,this.state,this.components,!0)}}const b=(e,t)=>new v(e,t);exports.compile=u,exports.createApp=b,exports.directives=i,exports.h=a,exports.init=(e=document)=>{[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const t=e.getAttribute("l-state");try{const s=new Function(`return ${t}`)();b(s||{}).mount(e)}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${t}"\nElement:`,e)}}))},exports.listen=(e,t=document,s)=>{new MutationObserver((t=>{t.map((t=>{if(t.addedNodes.length>0)t.addedNodes.forEach((t=>{1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute("l-state")&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,s||{childList:!0,attributes:!0,subtree:!0})},exports.patch=f,exports.reactive=h,exports.renderDirective=o;

86

dist/lucia.esm.js

@@ -10,5 +10,7 @@ const DIRECTIVE_PREFIX = 'l-';

const rawDirectiveSplitRE = () => /:|\./;
const eventDirectivePrefixRE = () => /on|@/;
const parenthesisWrapReplaceRE = () => /\(|\)/g;
const hasDirectiveRE = () => new RegExp(`(${DIRECTIVE_PREFIX}|${Object.keys(DIRECTIVE_SHORTHANDS).join('|')})\\w+`, 'gim');
const expressionPropRE = (key, hasThis = true) => {
return new RegExp(`${hasThis ? 'this\\.' : ''}${key}\\b`);
return new RegExp(`${hasThis ? 'this\\.' : ''}${key}\\b`, 'g');
};

@@ -33,3 +35,3 @@

if (classes.length > 0) {
return el.setAttribute('class', `${el.className} ${classes.join(' ').trim()}`.trim());
return el.setAttribute('class', `${el.className} ${classes.join(' ')}`.trim());
}

@@ -160,28 +162,39 @@ else if (el.className.trim().length > 0) {

const forDirective = ({ el, data, app }) => {
const [expression, target] = data.value.split(/ +in +/g);
const [item, index] = expression.split(',');
const hydratedArray = compute(target, { $el: el })(app.state);
const template = String(el.__l_for);
if (template) {
let accumulator = '';
for (let i = 0; i < hydratedArray.length; i++) {
let content = template;
if (item)
content = content.replace(new RegExp(`this.${item.trim()}`, 'g'), `${target}[${i}]`);
if (index)
content = content.replace(new RegExp(`this.${index.trim()}`, 'g'), String(i));
accumulator += content;
}
el.innerHTML = accumulator;
const [expression, target] = data.value.split(/in +/g);
const [item, index] = expression.replace(parenthesisWrapReplaceRE(), '').split(',');
const currArray = [...compute(target, { $el: el })(app.state)];
let template = String(el.__l_for_template);
if (template.trim() === '') {
el.innerHTML = currArray.join('');
}
else {
el.innerHTML = hydratedArray.join('');
if (el.innerHTML.trim() === template)
el.innerHTML = '';
const arrayDiff = currArray.length - el.children.length;
if (arrayDiff !== 0) {
for (let i = Math.abs(arrayDiff); i > 0; i--) {
if (arrayDiff < 0)
el.removeChild(el.lastChild);
else {
const temp = document.createElement('div');
let content = template;
if (item) {
content = content.replace(expressionPropRE(item.trim()), `${target}[${currArray.length - i}]`);
}
if (index) {
content = content.replace(expressionPropRE(index.trim()), String(currArray.length - i));
}
temp.innerHTML = content;
el.appendChild(temp.firstChild);
}
}
}
}
const scope = createApp(Object.assign({}, app.state));
Object.entries(app.directives || {}).map(([name, evaluationCallback]) => {
for (const [name, evaluationCallback] of Object.entries(app.directives || {})) {
scope.directive(name, evaluationCallback);
});
Object.entries(app.components || {}).map(([name, templateCallback]) => {
}
for (const [name, templateCallback] of Object.entries(app.components || {})) {
scope.component(name, templateCallback);
});
}
scope.mount(el);

@@ -235,7 +248,7 @@ };

let returnable = true;
if (name.includes('for') && el.__l_for === undefined) {
el.__l_for = String(el.innerHTML).trim();
if (name.includes('for') && el.__l_for_template === undefined) {
el.__l_for_template = String(el.innerHTML).trim();
returnable = false;
}
if (/on|@/.test(name))
if (eventDirectivePrefixRE().test(name))
returnable = false;

@@ -348,3 +361,3 @@ const directiveData = { compute: compute(value, { $el: el }, returnable), value };

const handlePatch = (target, key, state, patch, needsUpdate = false) => {
if (key === 'length') {
if (key === 'length' || target instanceof Array) {
const affectedKeys = Object.keys(state).filter((k) => {

@@ -358,4 +371,14 @@ return state[k] instanceof Array && arrayEquals(target, state[k]);

else {
const keys = [key];
for (const el of document.querySelectorAll('[l-for]')) {
const stateKeys = Object.keys(el.__l.state);
if (stateKeys.indexOf(key) !== -1) {
stateKeys.splice(stateKeys.indexOf(key), 1);
for (const k of stateKeys) {
keys.push(k);
}
}
}
if (needsUpdate)
patch([key]);
patch(keys);
return false;

@@ -375,3 +398,3 @@ }

set(target, key, value) {
const needsUpdate = target[key] !== value;
const needsUpdate = target[key] !== value || target instanceof Array || typeof target === 'object';
if (needsUpdate) {

@@ -443,3 +466,3 @@ target[key] = value;

mount(el, shallow = false) {
const rootEl = typeof el === 'string' ? document.querySelector(el) : el;
const rootEl = (typeof el === 'string' ? document.querySelector(el) : el);
this.vdom = this.compile(rootEl);

@@ -453,2 +476,4 @@ if (!shallow) {

this.mountHook(this.state);
rootEl.__l = this;
rootEl.setAttribute('data-l-app', '');
return this.state;

@@ -487,5 +512,4 @@ }

const state = new Function(`return ${expression}`)();
const app = createApp(state);
const app = createApp(state || {});
app.mount(el);
el.__l = app;
}

@@ -492,0 +516,0 @@ catch (err) {

2

dist/lucia.esm.min.js

@@ -1,1 +0,1 @@

var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=()=>new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim"),s=(e,t=!0)=>new RegExp(`${t?"this\\.":""}${e}\\b`);function n(e){try{const t=this.returnable?`return ${this.expression}`:this.expression;return new Function(...Object.keys(this.argsKV),t).bind(e)(...Object.values(this.argsKV))}catch(e){console.warn(`Lucia Error: "${e}"\n\nExpression: "${this.expression}"\nElement:`,this.argsKV.$el)}}const r=(e,t,s=!0)=>n.bind({expression:e,argsKV:{$el:t.$el},returnable:s}),i={BIND:({el:e,name:t,data:s,app:n})=>{switch(t.split(":")[1]){case"class":const r=s.compute(n.state);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const e in r)r[e]&&t.push(e);return t.length>0?e.setAttribute("class",`${e.className} ${t.join(" ").trim()}`.trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class")}case"style":const i=s.compute(n.state);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const o=s.compute(n.state);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,app:s})=>{var n;e.innerHTML=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value;const r=b(Object.assign({},s.state));Object.entries(s.directives||{}).map((([e,t])=>{r.directive(e,t)})),Object.entries(s.components||{}).map((([e,t])=>{r.component(e,t)})),r.mount(e)},IF:({el:e,data:t,app:s})=>{t.compute(s.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:({el:e,data:t,app:s})=>{const n=e,i=t.compute(s.state);n.value!==i&&(n.value=i),n.oninput=()=>((e,t,s,n)=>{const i="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),a=null==t&&("null"===e.value||"undefined"===e.value);let l;return l=i?`Number('${e.value}').toPrecision()`:o?`Boolean('${e.value}')`:a?"null"===e.value?null:void 0:`'${e.value}'`,r(`${s.value} = ${l}`,{$el:e},!1)(n.state),l})(n,i,t,s)},ON:({el:e,name:t,data:s,app:n})=>{const[r,i]=t.split("."),o=r.split(":")[1],a=i||null;e[`on${o}`]=e=>{"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),s.compute(n.state)}},TEXT:({el:e,data:t,app:s})=>{var n;e.textContent=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value},FOR:({el:e,data:t,app:s})=>{const[n,i]=t.value.split(/ +in +/g),[o,a]=n.split(","),l=r(i,{$el:e})(s.state),c=String(e.__l_for);if(c){let t="";for(let e=0;e<l.length;e++){let s=c;o&&(s=s.replace(new RegExp(`this.${o.trim()}`,"g"),`${i}[${e}]`)),a&&(s=s.replace(new RegExp(`this.${a.trim()}`,"g"),String(e))),t+=s}e.innerHTML=t}else e.innerHTML=l.join("");const u=b(Object.assign({},s.state));Object.entries(s.directives||{}).map((([e,t])=>{u.directive(e,t)})),Object.entries(s.components||{}).map((([e,t])=>{u.component(e,t)})),u.mount(e)}},o=(e,t)=>{t[e.name.split(/:|\./)[0].toUpperCase()](e)};var a;!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(a||(a={}));const l=(e,t=[],s)=>{const n=Object.assign({},null==s?void 0:s.attributes),r=Object.assign({},null==s?void 0:s.directives);return t=t instanceof Array?t:[t],n.className&&(n.className=n.className.trim()),{tag:e,children:t,props:{attributes:n,directives:r,ref:(null==s?void 0:s.ref)||void 0,type:(null==s?void 0:s.type)||0}}},c=t=>{const s={},n={};if(t.attributes)for(const{name:i,value:o}of[...t.attributes]){let a=!0;i.includes("for")&&void 0===t.__l_for&&(t.__l_for=String(t.innerHTML).trim(),a=!1),/on|@/.test(i)&&(a=!1);const l={compute:r(o,{$el:t},a),value:o};i.startsWith("l-")?n[i.slice("l-".length)]=l:Object.keys(e).includes(i[0])?n[`${e[i[0]]}:${i.slice(1)}`]=l:s[i]=o}return{attributes:s,directives:n}},u=(e,t,n)=>{const{attributes:r,directives:i}=c(e);let o=a.STATIC;const u=Object.keys(i).length>0,p=Object.values(i).some((({value:e})=>Object.keys(t).some((t=>s(t,!1).test(e)))));return u&&(o=a.NEEDS_PATCH),p&&(o=a.DYNAMIC),l(e.tagName.toLowerCase(),n,{attributes:r,directives:i,ref:o===a.STATIC||r.id?void 0:e,type:o})},p=(e,s={},n={},r=!1,i=!1)=>{var o;if(!e)throw new Error("Please provide a Element");const a=[],l=Array.prototype.slice.call(e.childNodes);for(const i of l)switch(i.nodeType){case Node.TEXT_NODE:!r&&i.nodeValue&&a.push(i.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(i.tagName)){const l=document.createElement("div"),u=n[i.tagName]({children:i.innerHTML,state:s});l.innerHTML=u;for(const[e,t]of Object.entries(c(i).directives))null===(o=l.firstElementChild)||void 0===o||o.setAttribute(`l-${e}`,t.value);if(!r||t().test(l.outerHTML)){const e=p(l,s,n,r,!0);for(const t of e)a.push(t)}e.replaceChild(l.firstElementChild,i)}else if(!r||t().test(i.outerHTML)){const e=p(i,s,n,r,!0),t=u(i,s,e);a.push(t)}}if(i)return a;{let t=u(e,s,a);return r?d(t):t}},d=e=>{const t=Object.assign({},e);t.children=t.children.filter((e=>"object"==typeof e&&e.props.type>0));for(const s of e.children)"string"!=typeof s&&s.children.length>0&&(t.children=[...t.children,...d({children:s.children}).children],s.children=[]);return t},m=(e,t,s,n,r=!1)=>{if("length"===t){const t=Object.keys(s).filter((t=>{return s[t]instanceof Array&&(n=e,r=s[t],n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t])));var n,r}));return 0!==t.length&&n(t),!0}return r&&n([t]),!1},h=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){const i=s[n]!==r;return i&&(s[n]=r),m(s,n,e,t,i),!0},deleteProperty:(s,n)=>(delete s[n],m(s,n,e,t,!0),!0)};return new Proxy(e,s)},v=(e,t={},n)=>{let r=!1;const i=t.state||{};if(e){n||(n=Object.keys(i)),"%LUCIA_FIRST_RENDER%"===n[0]&&(r=!0);for(let l of e.children)if("string"!=typeof l){if(l.props.type>a.STATIC){const{attributes:e,directives:c,ref:u,type:p}=l.props;let d=[];if(!r)for(const e in c){const t=1===p,r=n.some((t=>s(t).test(String(c[e].value)))),o=Object.keys(i).some((e=>{const t=n.some((t=>s(t).test(String(i[e]))));return"function"==typeof i[e]&&t}));(t||r||o)&&d.push(e)}l.props.type=p===a.NEEDS_PATCH?a.STATIC:p;(r?Object.keys(c):d).map((s=>{const n=c[s],r=e.id?document.getElementById(e.id):u;o({el:r,name:s,data:n,app:t},Object.assign({},t.directives))}))}l.children.length>0&&v(l,t,n)}}};class f{constructor(e={},t){this.state=e,this.directives={},this.components={},this.mountHook=t}mount(e,t=!1){const s="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(s),t||(this.state=h(this.state,this.patch.bind(this)),this.directives=Object.assign(Object.assign({},this.directives),i)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),this.state}component(e,t){this.components[e.toUpperCase()]=t}directive(e,t){this.directives[e.toUpperCase()]=t}patch(e){const t={state:this.state,directives:this.directives,components:this.components};v(this.vdom,t,e)}compile(e){return p(e,this.state,this.components,!0)}}const b=(e,t)=>new f(e,t),y=(e=document)=>{[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const t=e.getAttribute("l-state");try{const s=new Function(`return ${t}`)(),n=b(s);n.mount(e),e.__l=n}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${t}"\nElement:`,e)}}))},g=(e,t=document,s)=>{new MutationObserver((t=>{t.map((t=>{if(t.addedNodes.length>0)t.addedNodes.forEach((t=>{1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute("l-state")&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,s||{childList:!0,attributes:!0,subtree:!0})};export{p as compile,b as createApp,i as directives,l as h,y as init,g as listen,v as patch,h as reactive,o as renderDirective};
var e;!function(e){e["@"]="on",e[":"]="bind"}(e||(e={}));const t=()=>new RegExp(`(l-|${Object.keys(e).join("|")})\\w+`,"gim"),s=(e,t=!0)=>new RegExp(`${t?"this\\.":""}${e}\\b`,"g");function n(e){try{const t=this.returnable?`return ${this.expression}`:this.expression;return new Function(...Object.keys(this.argsKV),t).bind(e)(...Object.values(this.argsKV))}catch(e){console.warn(`Lucia Error: "${e}"\n\nExpression: "${this.expression}"\nElement:`,this.argsKV.$el)}}const r=(e,t,s=!0)=>n.bind({expression:e,argsKV:{$el:t.$el},returnable:s}),i={BIND:({el:e,name:t,data:s,app:n})=>{switch(t.split(":")[1]){case"class":const r=s.compute(n.state);if("string"==typeof r)return e.setAttribute("class",`${e.className} ${r}`.trim());if(r instanceof Array)return e.setAttribute("class",`${e.className} ${r.join(" ")}`.trim());{const t=[];for(const e in r)r[e]&&t.push(e);return t.length>0?e.setAttribute("class",`${e.className} ${t.join(" ")}`.trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class")}case"style":const i=s.compute(n.state);e.removeAttribute("style");for(const t in i)e.style[t]=i[t];break;default:const o=s.compute(n.state);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,app:s})=>{var n;e.innerHTML=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value;const r=b(Object.assign({},s.state));Object.entries(s.directives||{}).map((([e,t])=>{r.directive(e,t)})),Object.entries(s.components||{}).map((([e,t])=>{r.component(e,t)})),r.mount(e)},IF:({el:e,data:t,app:s})=>{t.compute(s.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:({el:e,data:t,app:s})=>{const n=e,i=t.compute(s.state);n.value!==i&&(n.value=i),n.oninput=()=>((e,t,s,n)=>{const i="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),l=null==t&&("null"===e.value||"undefined"===e.value);let a;return a=i?`Number('${e.value}').toPrecision()`:o?`Boolean('${e.value}')`:l?"null"===e.value?null:void 0:`'${e.value}'`,r(`${s.value} = ${a}`,{$el:e},!1)(n.state),a})(n,i,t,s)},ON:({el:e,name:t,data:s,app:n})=>{const[r,i]=t.split("."),o=r.split(":")[1],l=i||null;e[`on${o}`]=e=>{"prevent"===l&&e.preventDefault(),"stop"===l&&e.stopPropagation(),s.compute(n.state)}},TEXT:({el:e,data:t,app:s})=>{var n;e.textContent=null!==(n=t.compute(s.state))&&void 0!==n?n:t.value},FOR:({el:e,data:t,app:n})=>{const[i,o]=t.value.split(/in +/g),[l,a]=i.replace(/\(|\)/g,"").split(","),c=[...r(o,{$el:e})(n.state)];let u=String(e.__l_for_template);if(""===u.trim())e.innerHTML=c.join("");else{e.innerHTML.trim()===u&&(e.innerHTML="");const t=c.length-e.children.length;if(0!==t)for(let n=Math.abs(t);n>0;n--)if(t<0)e.removeChild(e.lastChild);else{const t=document.createElement("div");let r=u;l&&(r=r.replace(s(l.trim()),`${o}[${c.length-n}]`)),a&&(r=r.replace(s(a.trim()),String(c.length-n))),t.innerHTML=r,e.appendChild(t.firstChild)}}const p=b(Object.assign({},n.state));for(const[e,t]of Object.entries(n.directives||{}))p.directive(e,t);for(const[e,t]of Object.entries(n.components||{}))p.component(e,t);p.mount(e)}},o=(e,t)=>{t[e.name.split(/:|\./)[0].toUpperCase()](e)};var l;!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(l||(l={}));const a=(e,t=[],s)=>{const n=Object.assign({},null==s?void 0:s.attributes),r=Object.assign({},null==s?void 0:s.directives);return t=t instanceof Array?t:[t],n.className&&(n.className=n.className.trim()),{tag:e,children:t,props:{attributes:n,directives:r,ref:(null==s?void 0:s.ref)||void 0,type:(null==s?void 0:s.type)||0}}},c=t=>{const s={},n={};if(t.attributes)for(const{name:i,value:o}of[...t.attributes]){let l=!0;i.includes("for")&&void 0===t.__l_for_template&&(t.__l_for_template=String(t.innerHTML).trim(),l=!1),/on|@/.test(i)&&(l=!1);const a={compute:r(o,{$el:t},l),value:o};i.startsWith("l-")?n[i.slice("l-".length)]=a:Object.keys(e).includes(i[0])?n[`${e[i[0]]}:${i.slice(1)}`]=a:s[i]=o}return{attributes:s,directives:n}},u=(e,t,n)=>{const{attributes:r,directives:i}=c(e);let o=l.STATIC;const u=Object.keys(i).length>0,p=Object.values(i).some((({value:e})=>Object.keys(t).some((t=>s(t,!1).test(e)))));return u&&(o=l.NEEDS_PATCH),p&&(o=l.DYNAMIC),a(e.tagName.toLowerCase(),n,{attributes:r,directives:i,ref:o===l.STATIC||r.id?void 0:e,type:o})},p=(e,s={},n={},r=!1,i=!1)=>{var o;if(!e)throw new Error("Please provide a Element");const l=[],a=Array.prototype.slice.call(e.childNodes);for(const i of a)switch(i.nodeType){case Node.TEXT_NODE:!r&&i.nodeValue&&l.push(i.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(i.tagName)){const a=document.createElement("div"),u=n[i.tagName]({children:i.innerHTML,state:s});a.innerHTML=u;for(const[e,t]of Object.entries(c(i).directives))null===(o=a.firstElementChild)||void 0===o||o.setAttribute(`l-${e}`,t.value);if(!r||t().test(a.outerHTML)){const e=p(a,s,n,r,!0);for(const t of e)l.push(t)}e.replaceChild(a.firstElementChild,i)}else if(!r||t().test(i.outerHTML)){const e=p(i,s,n,r,!0),t=u(i,s,e);l.push(t)}}if(i)return l;{let t=u(e,s,l);return r?d(t):t}},d=e=>{const t=Object.assign({},e);t.children=t.children.filter((e=>"object"==typeof e&&e.props.type>0));for(const s of e.children)"string"!=typeof s&&s.children.length>0&&(t.children=[...t.children,...d({children:s.children}).children],s.children=[]);return t},m=(e,t,s,n,r=!1)=>{if("length"===t||e instanceof Array){const t=Object.keys(s).filter((t=>{return s[t]instanceof Array&&(n=e,r=s[t],n instanceof Array&&r instanceof Array&&n.length===r.length&&n.every(((e,t)=>e===r[t])));var n,r}));return 0!==t.length&&n(t),!0}{const e=[t];for(const s of document.querySelectorAll("[l-for]")){const n=Object.keys(s.__l.state);if(-1!==n.indexOf(t)){n.splice(n.indexOf(t),1);for(const t of n)e.push(t)}}return r&&n(e),!1}},f=(e,t)=>{const s={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],s):e[t],set(s,n,r){const i=s[n]!==r||s instanceof Array||"object"==typeof s;return i&&(s[n]=r),m(s,n,e,t,i),!0},deleteProperty:(s,n)=>(delete s[n],m(s,n,e,t,!0),!0)};return new Proxy(e,s)},h=(e,t={},n)=>{let r=!1;const i=t.state||{};if(e){n||(n=Object.keys(i)),"%LUCIA_FIRST_RENDER%"===n[0]&&(r=!0);for(let a of e.children)if("string"!=typeof a){if(a.props.type>l.STATIC){const{attributes:e,directives:c,ref:u,type:p}=a.props;let d=[];if(!r)for(const e in c){const t=1===p,r=n.some((t=>s(t).test(String(c[e].value)))),o=Object.keys(i).some((e=>{const t=n.some((t=>s(t).test(String(i[e]))));return"function"==typeof i[e]&&t}));(t||r||o)&&d.push(e)}a.props.type=p===l.NEEDS_PATCH?l.STATIC:p;(r?Object.keys(c):d).map((s=>{const n=c[s],r=e.id?document.getElementById(e.id):u;o({el:r,name:s,data:n,app:t},Object.assign({},t.directives))}))}a.children.length>0&&h(a,t,n)}}};class v{constructor(e={},t){this.state=e,this.directives={},this.components={},this.mountHook=t}mount(e,t=!1){const s="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(s),t||(this.state=f(this.state,this.patch.bind(this)),this.directives=Object.assign(Object.assign({},this.directives),i)),this.patch(["%LUCIA_FIRST_RENDER%"]),this.mountHook&&this.mountHook(this.state),s.__l=this,s.setAttribute("data-l-app",""),this.state}component(e,t){this.components[e.toUpperCase()]=t}directive(e,t){this.directives[e.toUpperCase()]=t}patch(e){const t={state:this.state,directives:this.directives,components:this.components};h(this.vdom,t,e)}compile(e){return p(e,this.state,this.components,!0)}}const b=(e,t)=>new v(e,t),y=(e=document)=>{[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const t=e.getAttribute("l-state");try{const s=new Function(`return ${t}`)();b(s||{}).mount(e)}catch(s){console.warn(`Lucia Error: "${s}"\n\nExpression: "${t}"\nElement:`,e)}}))},g=(e,t=document,s)=>{new MutationObserver((t=>{t.map((t=>{if(t.addedNodes.length>0)t.addedNodes.forEach((t=>{1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute("l-state")&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,s||{childList:!0,attributes:!0,subtree:!0})};export{p as compile,b as createApp,i as directives,a as h,y as init,g as listen,h as patch,f as reactive,o as renderDirective};

86

dist/lucia.js

@@ -41,5 +41,7 @@ (function (global, factory) {

const rawDirectiveSplitRE = () => /:|\./;
const eventDirectivePrefixRE = () => /on|@/;
const parenthesisWrapReplaceRE = () => /\(|\)/g;
const hasDirectiveRE = () => new RegExp(`(${DIRECTIVE_PREFIX}|${Object.keys(DIRECTIVE_SHORTHANDS).join('|')})\\w+`, 'gim');
const expressionPropRE = (key, hasThis = true) => {
return new RegExp(`${hasThis ? 'this\\.' : ''}${key}\\b`);
return new RegExp(`${hasThis ? 'this\\.' : ''}${key}\\b`, 'g');
};

@@ -64,3 +66,3 @@

if (classes.length > 0) {
return el.setAttribute('class', `${el.className} ${classes.join(' ').trim()}`.trim());
return el.setAttribute('class', `${el.className} ${classes.join(' ')}`.trim());
}

@@ -191,28 +193,39 @@ else if (el.className.trim().length > 0) {

const forDirective = ({ el, data, app }) => {
const [expression, target] = data.value.split(/ +in +/g);
const [item, index] = expression.split(',');
const hydratedArray = compute(target, { $el: el })(app.state);
const template = String(el.__l_for);
if (template) {
let accumulator = '';
for (let i = 0; i < hydratedArray.length; i++) {
let content = template;
if (item)
content = content.replace(new RegExp(`this.${item.trim()}`, 'g'), `${target}[${i}]`);
if (index)
content = content.replace(new RegExp(`this.${index.trim()}`, 'g'), String(i));
accumulator += content;
}
el.innerHTML = accumulator;
const [expression, target] = data.value.split(/in +/g);
const [item, index] = expression.replace(parenthesisWrapReplaceRE(), '').split(',');
const currArray = [...compute(target, { $el: el })(app.state)];
let template = String(el.__l_for_template);
if (template.trim() === '') {
el.innerHTML = currArray.join('');
}
else {
el.innerHTML = hydratedArray.join('');
if (el.innerHTML.trim() === template)
el.innerHTML = '';
const arrayDiff = currArray.length - el.children.length;
if (arrayDiff !== 0) {
for (let i = Math.abs(arrayDiff); i > 0; i--) {
if (arrayDiff < 0)
el.removeChild(el.lastChild);
else {
const temp = document.createElement('div');
let content = template;
if (item) {
content = content.replace(expressionPropRE(item.trim()), `${target}[${currArray.length - i}]`);
}
if (index) {
content = content.replace(expressionPropRE(index.trim()), String(currArray.length - i));
}
temp.innerHTML = content;
el.appendChild(temp.firstChild);
}
}
}
}
const scope = createApp(Object.assign({}, app.state));
Object.entries(app.directives || {}).map(([name, evaluationCallback]) => {
for (const [name, evaluationCallback] of Object.entries(app.directives || {})) {
scope.directive(name, evaluationCallback);
});
Object.entries(app.components || {}).map(([name, templateCallback]) => {
}
for (const [name, templateCallback] of Object.entries(app.components || {})) {
scope.component(name, templateCallback);
});
}
scope.mount(el);

@@ -266,7 +279,7 @@ };

let returnable = true;
if (name.includes('for') && el.__l_for === undefined) {
el.__l_for = String(el.innerHTML).trim();
if (name.includes('for') && el.__l_for_template === undefined) {
el.__l_for_template = String(el.innerHTML).trim();
returnable = false;
}
if (/on|@/.test(name))
if (eventDirectivePrefixRE().test(name))
returnable = false;

@@ -379,3 +392,3 @@ const directiveData = { compute: compute(value, { $el: el }, returnable), value };

const handlePatch = (target, key, state, patch, needsUpdate = false) => {
if (key === 'length') {
if (key === 'length' || target instanceof Array) {
const affectedKeys = Object.keys(state).filter((k) => {

@@ -389,4 +402,14 @@ return state[k] instanceof Array && arrayEquals(target, state[k]);

else {
const keys = [key];
for (const el of document.querySelectorAll('[l-for]')) {
const stateKeys = Object.keys(el.__l.state);
if (stateKeys.indexOf(key) !== -1) {
stateKeys.splice(stateKeys.indexOf(key), 1);
for (const k of stateKeys) {
keys.push(k);
}
}
}
if (needsUpdate)
patch([key]);
patch(keys);
return false;

@@ -406,3 +429,3 @@ }

set(target, key, value) {
const needsUpdate = target[key] !== value;
const needsUpdate = target[key] !== value || target instanceof Array || typeof target === 'object';
if (needsUpdate) {

@@ -474,3 +497,3 @@ target[key] = value;

mount(el, shallow = false) {
const rootEl = typeof el === 'string' ? document.querySelector(el) : el;
const rootEl = (typeof el === 'string' ? document.querySelector(el) : el);
this.vdom = this.compile(rootEl);

@@ -484,2 +507,4 @@ if (!shallow) {

this.mountHook(this.state);
rootEl.__l = this;
rootEl.setAttribute('data-l-app', '');
return this.state;

@@ -518,5 +543,4 @@ }

const state = new Function(`return ${expression}`)();
const app = createApp(state);
const app = createApp(state || {});
app.mount(el);
el.__l = app;
}

@@ -523,0 +547,0 @@ catch (err) {

2

dist/lucia.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Lucia=t()}(this,(function(){"use strict";function e(e,t,n,s){return new(n||(n=Promise))((function(i,r){function o(e){try{c(s.next(e))}catch(e){r(e)}}function a(e){try{c(s.throw(e))}catch(e){r(e)}}function c(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(o,a)}c((s=s.apply(e,t||[])).next())}))}const t="l-",n="%LUCIA_FIRST_RENDER%";var s;!function(e){e["@"]="on",e[":"]="bind"}(s||(s={}));const i=()=>new RegExp(`(l-|${Object.keys(s).join("|")})\\w+`,"gim"),r=(e,t=!0)=>new RegExp(`${t?"this\\.":""}${e}\\b`);function o(e){try{const t=this.returnable?`return ${this.expression}`:this.expression;return new Function(...Object.keys(this.argsKV),t).bind(e)(...Object.values(this.argsKV))}catch(e){console.warn(`Lucia Error: "${e}"\n\nExpression: "${this.expression}"\nElement:`,this.argsKV.$el)}}const a=(e,t,n=!0)=>o.bind({expression:e,argsKV:{$el:t.$el},returnable:n}),c={BIND:({el:e,name:t,data:n,app:s})=>{switch(t.split(":")[1]){case"class":const i=n.compute(s.state);if("string"==typeof i)return e.setAttribute("class",`${e.className} ${i}`.trim());if(i instanceof Array)return e.setAttribute("class",`${e.className} ${i.join(" ")}`.trim());{const t=[];for(const e in i)i[e]&&t.push(e);return t.length>0?e.setAttribute("class",`${e.className} ${t.join(" ").trim()}`.trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class")}case"style":const r=n.compute(s.state);e.removeAttribute("style");for(const t in r)e.style[t]=r[t];break;default:const o=n.compute(s.state);if("object"==typeof o&&null!==o)for(const t in o)o[t]?e.setAttribute(t,o[t]):e.removeAttribute(t);else o?e.setAttribute(t.split(":")[1],o):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,app:n})=>{var s;e.innerHTML=null!==(s=t.compute(n.state))&&void 0!==s?s:t.value;const i=E(Object.assign({},n.state));Object.entries(n.directives||{}).map((([e,t])=>{i.directive(e,t)})),Object.entries(n.components||{}).map((([e,t])=>{i.component(e,t)})),i.mount(e)},IF:({el:e,data:t,app:n})=>{t.compute(n.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:({el:e,data:t,app:n})=>{const s=e,i=t.compute(n.state);s.value!==i&&(s.value=i),s.oninput=()=>((e,t,n,s)=>{const i="number"==typeof t&&!isNaN(e.value),r="boolean"==typeof t&&("true"===e.value||"false"===e.value),o=null==t&&("null"===e.value||"undefined"===e.value);let c;return c=i?`Number('${e.value}').toPrecision()`:r?`Boolean('${e.value}')`:o?"null"===e.value?null:void 0:`'${e.value}'`,a(`${n.value} = ${c}`,{$el:e},!1)(s.state),c})(s,i,t,n)},ON:({el:e,name:t,data:n,app:s})=>{const[i,r]=t.split("."),o=i.split(":")[1],a=r||null;e[`on${o}`]=e=>{"prevent"===a&&e.preventDefault(),"stop"===a&&e.stopPropagation(),n.compute(s.state)}},TEXT:({el:e,data:t,app:n})=>{var s;e.textContent=null!==(s=t.compute(n.state))&&void 0!==s?s:t.value},FOR:({el:e,data:t,app:n})=>{const[s,i]=t.value.split(/ +in +/g),[r,o]=s.split(","),c=a(i,{$el:e})(n.state),l=String(e.__l_for);if(l){let t="";for(let e=0;e<c.length;e++){let n=l;r&&(n=n.replace(new RegExp(`this.${r.trim()}`,"g"),`${i}[${e}]`)),o&&(n=n.replace(new RegExp(`this.${o.trim()}`,"g"),String(e))),t+=n}e.innerHTML=t}else e.innerHTML=c.join("");const u=E(Object.assign({},n.state));Object.entries(n.directives||{}).map((([e,t])=>{u.directive(e,t)})),Object.entries(n.components||{}).map((([e,t])=>{u.component(e,t)})),u.mount(e)}},l=(e,t)=>{t[e.name.split(/:|\./)[0].toUpperCase()](e)};var u;!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(u||(u={}));const p=(e,t=[],n)=>{const s=Object.assign({},null==n?void 0:n.attributes),i=Object.assign({},null==n?void 0:n.directives);return t=t instanceof Array?t:[t],s.className&&(s.className=s.className.trim()),{tag:e,children:t,props:{attributes:s,directives:i,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},d=e=>{const n={},i={};if(e.attributes)for(const{name:r,value:o}of[...e.attributes]){let c=!0;r.includes("for")&&void 0===e.__l_for&&(e.__l_for=String(e.innerHTML).trim(),c=!1),/on|@/.test(r)&&(c=!1);const l={compute:a(o,{$el:e},c),value:o};r.startsWith(t)?i[r.slice(t.length)]=l:Object.keys(s).includes(r[0])?i[`${s[r[0]]}:${r.slice(1)}`]=l:n[r]=o}return{attributes:n,directives:i}},m=(e,t,n)=>{const{attributes:s,directives:i}=d(e);let o=u.STATIC;const a=Object.keys(i).length>0,c=Object.values(i).some((({value:e})=>Object.keys(t).some((t=>r(t,!1).test(e)))));return a&&(o=u.NEEDS_PATCH),c&&(o=u.DYNAMIC),p(e.tagName.toLowerCase(),n,{attributes:s,directives:i,ref:o===u.STATIC||s.id?void 0:e,type:o})},f=(e,t={},n={},s=!1,r=!1)=>{var o;if(!e)throw new Error("Please provide a Element");const a=[],c=Array.prototype.slice.call(e.childNodes);for(const r of c)switch(r.nodeType){case Node.TEXT_NODE:!s&&r.nodeValue&&a.push(r.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(r.tagName)){const c=document.createElement("div"),l=n[r.tagName]({children:r.innerHTML,state:t});c.innerHTML=l;for(const[e,t]of Object.entries(d(r).directives))null===(o=c.firstElementChild)||void 0===o||o.setAttribute(`l-${e}`,t.value);if(!s||i().test(c.outerHTML)){const e=f(c,t,n,s,!0);for(const t of e)a.push(t)}e.replaceChild(c.firstElementChild,r)}else if(!s||i().test(r.outerHTML)){const e=f(r,t,n,s,!0),i=m(r,t,e);a.push(i)}}if(r)return a;{let n=m(e,t,a);return s?h(n):n}},h=e=>{const t=Object.assign({},e);t.children=t.children.filter((e=>"object"==typeof e&&e.props.type>0));for(const n of e.children)"string"!=typeof n&&n.children.length>0&&(t.children=[...t.children,...h({children:n.children}).children],n.children=[]);return t},v=(e,t,n,s,i=!1)=>{if("length"===t){const t=Object.keys(n).filter((t=>{return n[t]instanceof Array&&(s=e,i=n[t],s instanceof Array&&i instanceof Array&&s.length===i.length&&s.every(((e,t)=>e===i[t])));var s,i}));return 0!==t.length&&s(t),!0}return i&&s([t]),!1},b=(e,t)=>{const n={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t],set(n,s,i){const r=n[s]!==i;return r&&(n[s]=i),v(n,s,e,t,r),!0},deleteProperty:(n,s)=>(delete n[s],v(n,s,e,t,!0),!0)};return new Proxy(e,n)},y=(e,t={},s)=>{let i=!1;const o=t.state||{};if(e){s||(s=Object.keys(o)),s[0]===n&&(i=!0);for(let n of e.children)if("string"!=typeof n){if(n.props.type>u.STATIC){const{attributes:e,directives:a,ref:c,type:p}=n.props;let d=[];if(!i)for(const e in a){const t=1===p,n=s.some((t=>r(t).test(String(a[e].value)))),i=Object.keys(o).some((e=>{const t=s.some((t=>r(t).test(String(o[e]))));return"function"==typeof o[e]&&t}));(t||n||i)&&d.push(e)}n.props.type=p===u.NEEDS_PATCH?u.STATIC:p;(i?Object.keys(a):d).map((n=>{const s=a[n],i=e.id?document.getElementById(e.id):c;l({el:i,name:n,data:s,app:t},Object.assign({},t.directives))}))}n.children.length>0&&y(n,t,s)}}};class g{constructor(e={},t){this.state=e,this.directives={},this.components={},this.mountHook=t}mount(e,t=!1){const s="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(s),t||(this.state=b(this.state,this.patch.bind(this)),this.directives=Object.assign(Object.assign({},this.directives),c)),this.patch([n]),this.mountHook&&this.mountHook(this.state),this.state}component(e,t){this.components[e.toUpperCase()]=t}directive(e,t){this.directives[e.toUpperCase()]=t}patch(e){const t={state:this.state,directives:this.directives,components:this.components};y(this.vdom,t,e)}compile(e){return f(e,this.state,this.components,!0)}}const E=(e,t)=>new g(e,t),A="l-state",T=(e=document)=>{[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const t=e.getAttribute(A);try{const n=new Function(`return ${t}`)(),s=E(n);s.mount(e),e.__l=s}catch(n){console.warn(`Lucia Error: "${n}"\n\nExpression: "${t}"\nElement:`,e)}}))},j=(e,t=document,n)=>{new MutationObserver((t=>{t.map((t=>{if(t.addedNodes.length>0)t.addedNodes.forEach((t=>{1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute(A)&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,n||{childList:!0,attributes:!0,subtree:!0})};var $=Object.freeze({__proto__:null,createApp:E,h:p,compile:f,patch:y,reactive:b,directives:c,renderDirective:l,init:T,listen:j});const O=()=>e(void 0,void 0,void 0,(function*(){yield new Promise((e=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})),T(),document.addEventListener("turbolinks:load",(()=>T())),j((e=>T(e)))}));return window.__l?window.__l((()=>O())):O(),$}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Lucia=t()}(this,(function(){"use strict";function e(e,t,n,s){return new(n||(n=Promise))((function(i,o){function r(e){try{a(s.next(e))}catch(e){o(e)}}function c(e){try{a(s.throw(e))}catch(e){o(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(r,c)}a((s=s.apply(e,t||[])).next())}))}const t="l-",n="%LUCIA_FIRST_RENDER%";var s;!function(e){e["@"]="on",e[":"]="bind"}(s||(s={}));const i=()=>new RegExp(`(l-|${Object.keys(s).join("|")})\\w+`,"gim"),o=(e,t=!0)=>new RegExp(`${t?"this\\.":""}${e}\\b`,"g");function r(e){try{const t=this.returnable?`return ${this.expression}`:this.expression;return new Function(...Object.keys(this.argsKV),t).bind(e)(...Object.values(this.argsKV))}catch(e){console.warn(`Lucia Error: "${e}"\n\nExpression: "${this.expression}"\nElement:`,this.argsKV.$el)}}const c=(e,t,n=!0)=>r.bind({expression:e,argsKV:{$el:t.$el},returnable:n}),a={BIND:({el:e,name:t,data:n,app:s})=>{switch(t.split(":")[1]){case"class":const i=n.compute(s.state);if("string"==typeof i)return e.setAttribute("class",`${e.className} ${i}`.trim());if(i instanceof Array)return e.setAttribute("class",`${e.className} ${i.join(" ")}`.trim());{const t=[];for(const e in i)i[e]&&t.push(e);return t.length>0?e.setAttribute("class",`${e.className} ${t.join(" ")}`.trim()):e.className.trim().length>0?e.setAttribute("class",e.className):e.removeAttribute("class")}case"style":const o=n.compute(s.state);e.removeAttribute("style");for(const t in o)e.style[t]=o[t];break;default:const r=n.compute(s.state);if("object"==typeof r&&null!==r)for(const t in r)r[t]?e.setAttribute(t,r[t]):e.removeAttribute(t);else r?e.setAttribute(t.split(":")[1],r):e.removeAttribute(t.split(":")[1])}},HTML:({el:e,data:t,app:n})=>{var s;e.innerHTML=null!==(s=t.compute(n.state))&&void 0!==s?s:t.value;const i=E(Object.assign({},n.state));Object.entries(n.directives||{}).map((([e,t])=>{i.directive(e,t)})),Object.entries(n.components||{}).map((([e,t])=>{i.component(e,t)})),i.mount(e)},IF:({el:e,data:t,app:n})=>{t.compute(n.state)?e.style.removeProperty("display"):e.style.display="none"},MODEL:({el:e,data:t,app:n})=>{const s=e,i=t.compute(n.state);s.value!==i&&(s.value=i),s.oninput=()=>((e,t,n,s)=>{const i="number"==typeof t&&!isNaN(e.value),o="boolean"==typeof t&&("true"===e.value||"false"===e.value),r=null==t&&("null"===e.value||"undefined"===e.value);let a;return a=i?`Number('${e.value}').toPrecision()`:o?`Boolean('${e.value}')`:r?"null"===e.value?null:void 0:`'${e.value}'`,c(`${n.value} = ${a}`,{$el:e},!1)(s.state),a})(s,i,t,n)},ON:({el:e,name:t,data:n,app:s})=>{const[i,o]=t.split("."),r=i.split(":")[1],c=o||null;e[`on${r}`]=e=>{"prevent"===c&&e.preventDefault(),"stop"===c&&e.stopPropagation(),n.compute(s.state)}},TEXT:({el:e,data:t,app:n})=>{var s;e.textContent=null!==(s=t.compute(n.state))&&void 0!==s?s:t.value},FOR:({el:e,data:t,app:n})=>{const[s,i]=t.value.split(/in +/g),[r,a]=s.replace(/\(|\)/g,"").split(","),l=[...c(i,{$el:e})(n.state)];let u=String(e.__l_for_template);if(""===u.trim())e.innerHTML=l.join("");else{e.innerHTML.trim()===u&&(e.innerHTML="");const t=l.length-e.children.length;if(0!==t)for(let n=Math.abs(t);n>0;n--)if(t<0)e.removeChild(e.lastChild);else{const t=document.createElement("div");let s=u;r&&(s=s.replace(o(r.trim()),`${i}[${l.length-n}]`)),a&&(s=s.replace(o(a.trim()),String(l.length-n))),t.innerHTML=s,e.appendChild(t.firstChild)}}const p=E(Object.assign({},n.state));for(const[e,t]of Object.entries(n.directives||{}))p.directive(e,t);for(const[e,t]of Object.entries(n.components||{}))p.component(e,t);p.mount(e)}},l=(e,t)=>{t[e.name.split(/:|\./)[0].toUpperCase()](e)};var u;!function(e){e[e.STATIC=0]="STATIC",e[e.NEEDS_PATCH=1]="NEEDS_PATCH",e[e.DYNAMIC=2]="DYNAMIC"}(u||(u={}));const p=(e,t=[],n)=>{const s=Object.assign({},null==n?void 0:n.attributes),i=Object.assign({},null==n?void 0:n.directives);return t=t instanceof Array?t:[t],s.className&&(s.className=s.className.trim()),{tag:e,children:t,props:{attributes:s,directives:i,ref:(null==n?void 0:n.ref)||void 0,type:(null==n?void 0:n.type)||0}}},d=e=>{const n={},i={};if(e.attributes)for(const{name:o,value:r}of[...e.attributes]){let a=!0;o.includes("for")&&void 0===e.__l_for_template&&(e.__l_for_template=String(e.innerHTML).trim(),a=!1),/on|@/.test(o)&&(a=!1);const l={compute:c(r,{$el:e},a),value:r};o.startsWith(t)?i[o.slice(t.length)]=l:Object.keys(s).includes(o[0])?i[`${s[o[0]]}:${o.slice(1)}`]=l:n[o]=r}return{attributes:n,directives:i}},f=(e,t,n)=>{const{attributes:s,directives:i}=d(e);let r=u.STATIC;const c=Object.keys(i).length>0,a=Object.values(i).some((({value:e})=>Object.keys(t).some((t=>o(t,!1).test(e)))));return c&&(r=u.NEEDS_PATCH),a&&(r=u.DYNAMIC),p(e.tagName.toLowerCase(),n,{attributes:s,directives:i,ref:r===u.STATIC||s.id?void 0:e,type:r})},m=(e,t={},n={},s=!1,o=!1)=>{var r;if(!e)throw new Error("Please provide a Element");const c=[],a=Array.prototype.slice.call(e.childNodes);for(const o of a)switch(o.nodeType){case Node.TEXT_NODE:!s&&o.nodeValue&&c.push(o.nodeValue);break;case Node.ELEMENT_NODE:if(Object.keys(n).includes(o.tagName)){const a=document.createElement("div"),l=n[o.tagName]({children:o.innerHTML,state:t});a.innerHTML=l;for(const[e,t]of Object.entries(d(o).directives))null===(r=a.firstElementChild)||void 0===r||r.setAttribute(`l-${e}`,t.value);if(!s||i().test(a.outerHTML)){const e=m(a,t,n,s,!0);for(const t of e)c.push(t)}e.replaceChild(a.firstElementChild,o)}else if(!s||i().test(o.outerHTML)){const e=m(o,t,n,s,!0),i=f(o,t,e);c.push(i)}}if(o)return c;{let n=f(e,t,c);return s?h(n):n}},h=e=>{const t=Object.assign({},e);t.children=t.children.filter((e=>"object"==typeof e&&e.props.type>0));for(const n of e.children)"string"!=typeof n&&n.children.length>0&&(t.children=[...t.children,...h({children:n.children}).children],n.children=[]);return t},v=(e,t,n,s,i=!1)=>{if("length"===t||e instanceof Array){const t=Object.keys(n).filter((t=>{return n[t]instanceof Array&&(s=e,i=n[t],s instanceof Array&&i instanceof Array&&s.length===i.length&&s.every(((e,t)=>e===i[t])));var s,i}));return 0!==t.length&&s(t),!0}{const e=[t];for(const n of document.querySelectorAll("[l-for]")){const s=Object.keys(n.__l.state);if(-1!==s.indexOf(t)){s.splice(s.indexOf(t),1);for(const t of s)e.push(t)}}return i&&s(e),!1}},b=(e,t)=>{const n={get:(e,t)=>"object"==typeof e[t]&&null!==e[t]?new Proxy(e[t],n):e[t],set(n,s,i){const o=n[s]!==i||n instanceof Array||"object"==typeof n;return o&&(n[s]=i),v(n,s,e,t,o),!0},deleteProperty:(n,s)=>(delete n[s],v(n,s,e,t,!0),!0)};return new Proxy(e,n)},y=(e,t={},s)=>{let i=!1;const r=t.state||{};if(e){s||(s=Object.keys(r)),s[0]===n&&(i=!0);for(let n of e.children)if("string"!=typeof n){if(n.props.type>u.STATIC){const{attributes:e,directives:c,ref:a,type:p}=n.props;let d=[];if(!i)for(const e in c){const t=1===p,n=s.some((t=>o(t).test(String(c[e].value)))),i=Object.keys(r).some((e=>{const t=s.some((t=>o(t).test(String(r[e]))));return"function"==typeof r[e]&&t}));(t||n||i)&&d.push(e)}n.props.type=p===u.NEEDS_PATCH?u.STATIC:p;(i?Object.keys(c):d).map((n=>{const s=c[n],i=e.id?document.getElementById(e.id):a;l({el:i,name:n,data:s,app:t},Object.assign({},t.directives))}))}n.children.length>0&&y(n,t,s)}}};class g{constructor(e={},t){this.state=e,this.directives={},this.components={},this.mountHook=t}mount(e,t=!1){const s="string"==typeof e?document.querySelector(e):e;return this.vdom=this.compile(s),t||(this.state=b(this.state,this.patch.bind(this)),this.directives=Object.assign(Object.assign({},this.directives),a)),this.patch([n]),this.mountHook&&this.mountHook(this.state),s.__l=this,s.setAttribute("data-l-app",""),this.state}component(e,t){this.components[e.toUpperCase()]=t}directive(e,t){this.directives[e.toUpperCase()]=t}patch(e){const t={state:this.state,directives:this.directives,components:this.components};y(this.vdom,t,e)}compile(e){return m(e,this.state,this.components,!0)}}const E=(e,t)=>new g(e,t),A="l-state",T=(e=document)=>{[...e.querySelectorAll("[l-state]")].filter((e=>void 0===e.__l)).map((e=>{const t=e.getAttribute(A);try{const n=new Function(`return ${t}`)();E(n||{}).mount(e)}catch(n){console.warn(`Lucia Error: "${n}"\n\nExpression: "${t}"\nElement:`,e)}}))},j=(e,t=document,n)=>{new MutationObserver((t=>{t.map((t=>{if(t.addedNodes.length>0)t.addedNodes.forEach((t=>{1===t.nodeType&&(t.parentElement&&t.parentElement.closest("[l-state]")||t.getAttribute(A)&&e(t.parentElement))}));else if("attributes"===t.type){if(t.target.parentElement&&t.target.parentElement.closest("[l-state]"))return;e(t.target.parentElement)}}))})).observe(t,n||{childList:!0,attributes:!0,subtree:!0})};var O=Object.freeze({__proto__:null,createApp:E,h:p,compile:m,patch:y,reactive:b,directives:a,renderDirective:l,init:T,listen:j});const _=()=>e(void 0,void 0,void 0,(function*(){yield new Promise((e=>{"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})),T(),document.addEventListener("turbolinks:load",(()=>T())),j((e=>T(e)))}));return window.__l?window.__l((()=>_())):_(),O}));

2

dist/types/vdom/utils/patterns.d.ts
export declare const rawDirectiveSplitRE: () => RegExp;
export declare const eventDirectivePrefixRE: () => RegExp;
export declare const parenthesisWrapReplaceRE: () => RegExp;
export declare const hasDirectiveRE: () => RegExp;
export declare const expressionPropRE: (key: string, hasThis?: boolean) => RegExp;

10

package.json
{
"name": "lucia",
"version": "0.3.7",
"version": "0.3.8",
"description": "A tiny 3kb JavaScript library for prototyping web applications.",

@@ -10,6 +10,6 @@ "main": "dist/lucia.cjs.js",

"scripts": {
"dev": "rollup -c -w",
"build": "del-cli dist/ && rollup -c",
"test": "jest --coverage",
"cleanup": "prettier -w src",
"dev": "npx rollup -c rollup-dev.config.js -w",
"build": "npx del-cli dist/ && npx rollup -c",
"test": "npx jest --coverage",
"cleanup": "npx prettier -w src",
"coverage": "cat ./coverage/lcov.info | coveralls"

@@ -16,0 +16,0 @@ },

17

README.md

@@ -35,3 +35,3 @@ # <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>

- [Installation](https://lucia.js.org/docs/essentials/installation)
- [Clicker Game Example](https://lucia.js.org/docs/essentials/introduction#clicker-game-example)
- [Todo App Example](https://lucia.js.org/docs/essentials/introduction#todo-app-example)

@@ -42,11 +42,18 @@ [**β†’ Learn how the Lucia Virtual DOM works**](https://github.com/aidenybai/lucia/tree/master/src/vdom#readme)

Below is an example of a clicker game in Lucia. No, your eyes aren't fooling you - it's really that simple.
Below is an example of a todo app in Lucia. No, your eyes aren't fooling you - it's really that simple.
```html
<div l-state="{ count: 0 }">
<button l-text="this.count" l-on:click="++this.count">0</button>
<div l-state="{ value: '', todo: [] }">
<!-- two-way-binds `value` prop to value -->
<input l-model="this.value">
<!-- captures click event, pushing current `value` to `todo` -->
<button l-on:click="this.todo.push(this.value)">Create</button>
<!-- joins array together -->
<ul l-for="task in this.todo">
<li l-text="this.task"></li>
</ul>
</div>
```
[**β†’ View the live Codepen example**](https://codepen.io/aidenybai/pen/jOrXdKj)
[**β†’ View the live Codepen example**](https://codepen.io/aidenybai/pen/JjRrwjN)

@@ -53,0 +60,0 @@ ## πŸ‘ Similar Projects

dist/types/vdom/directives/join.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚑️ by Socket Inc