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

literaljs

Package Overview
Dependencies
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

literaljs - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

2

build/index.js

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

var e,t,n,i={},r=[];function o(e){if("function"==typeof e)e=new e;else if("function"==typeof e.element){var t=Object.assign({},e.attributes.props)||{};delete e.attributes.props,e=new(e.element(t))}if(e.children)for(var n=0;n<e.children.length;n++)e.children[n]=o(e.children[n]);return e}function d(e,t){void 0===t&&(t={});var n=t.mount;void 0===n&&(n=!0);var i=t.initial;void 0===i&&(i=!1);var o=typeof e;if("string"===o||"number"===o)return document.createTextNode(e);if("boolean"===o)return document.createTextNode("");for(var s=document.createElement(e.element),c=0,a=Object.entries(e.attributes);c<a.length;c+=1){var l=a[c],f=l[0],v=l[1];"events"===f?m(v,s,n,i):s.setAttribute(f,v)}for(var h=0;h<e.children.length;h++)s.appendChild(d(e.children[h],{mount:n,initial:i}));return s;function m(e,t,n,i){for(var o=0,d=Object.entries(e);o<d.length;o+=1){var s=d[o],c=s[0],a=s[1];["mounted","unmounted","updated"].includes(c)||t.addEventListener(c,a),l(c,a,n,i)}function l(e,t,n,i){i&&(n&&"mounted"===e&&r.push(t),n||"updated"!==e||r.push(t),u())}}}function u(){var e=new Event("__LITERAL_LIFECYCLE__");return window.dispatchEvent(e)}module.exports={component:function(s){void 0===s&&(s={});var c=s.methods;void 0===c&&(c=function(){});var a=s.render;return void 0===a&&(a=function(){}),function(s){return void 0===s&&(s={}),function(l){for(var f in void 0===l&&(l={}),this.props=s,this.getState=function(){return Object.assign({},i,l)},this.setState=function(s){var c,a,l=Object.assign({},this.getState(),s);i=l,c=o(t()),a=Object.assign({},n),n=Object.assign({},c),function e(t,n,i,o){if(void 0===o&&(o=0),t){var s,c,a,l,f=typeof n,v=typeof i,h=t.childNodes[o];if(void 0===i)t.appendChild(d(n)),b(n,"mounted");else if(!1!==i||!n.element&&"string"!==f&&"number"!==f)if(!1!==n||!i.element&&"string"!==v&&"number"!==v){if(function(e,t,n,i){return n!==i||"string"===n&&e!==t||e.element!==t.element}(n,i,f,v))t.replaceChild(d(n,{mount:!1}),h),b(n,"mounted");else if(n.element&&(function(e,t,n,i){for(var r=0,o=Object.entries(n.attributes);r<o.length;r+=1){var d=o[r],u=d[0],s=d[1],c=i[u]?i[u].attributes:void 0;["events"].includes(u)||c&&s===c||(t.setAttribute(u,s),b(n,"updated"))}}(0,h,n,i),n.children||i.children)){var m=(c=i.children,{nc:a=(s=n.children)?s.length:0,oc:l=c?c.length:0,longest:a>=l?a:l});if(m.nc!==m.longest){for(var p=m.oc-1;p>0;p--)void 0===n.children[p]&&(h.lastChild.remove(),b(i.children[p],"unmounted"));m.longest=m.nc}for(var g=0;g<m.longest;g++)e(h,n.children[g],i.children[g],g)}}else t.replaceChild(d(n),h),b(i,"unmounted");else t.replaceChild(d(n),h),b(n,"mounted")}function b(e,t){if(e.events){for(var n=0,i=Object.entries(e.events);n<i.length;n+=1){var o=i[n],d=o[0],s=o[1];d===t&&r.push(s)}u()}}}(e,c,a)}.bind(this),"function"==typeof c&&(c=c.bind(this)()),c)this[f]=c[f].bind(this);return a.bind(this)()}}},render:function(u,s,c){void 0===c&&(c={}),i=Object.assign({},i,c),e=document.getElementById(s),t=u;var a=o(u());function l(){for(var e;e=r.pop();)e()}n=Object.assign({},a),e.appendChild(d(a,{initial:!0})),l(),window.addEventListener("__LITERAL_LIFECYCLE__",l)},h:function(e,t){for(var n=[],i=arguments.length-2;i-- >0;)n[i]=arguments[i+2];return{element:e,attributes:Object.assign({},t),children:function e(t,n){for(var i=0;i<t.length;i++)Array.isArray(t[i])?e(t[i],n):n.push(t[i]);return n}(n,[])}}};
var e,t,n,i={},r={},u="luid",d="euid",o=[],a=[],s={},f=[];function c(e){var t;if(void 0!==e){if("function"==typeof e.render)t=e.uuid,(e=new e.render).uuid=t,e.attributes&&(e.attributes["data-"+u]=t);else if("function"==typeof e.element){var n=Object.assign({},e.attributes.props)||{};delete e.attributes.props,(e=e.element(n)).render&&(t=e.uuid,(e=new e.render).uuid=t,e.attributes&&(e.attributes["data-"+u]=t))}if(e.children)for(var i=0;i<e.children.length;i++)e.children[i]=c(e.children[i]);return e}}function l(e,t){void 0===t&&(t={});var n=t.mount;void 0===n&&(n=!0);var i=t.initial;void 0===i&&(i=!1);var r=typeof e;if("undefined"!==r){if("string"===r||"number"===r)return document.createTextNode(e);if("boolean"===r)return document.createTextNode("");var u=document.createElement(e.element);if(e.attributes&&"object"==typeof e.attributes)for(var d=0,o=Object.entries(e.attributes);d<o.length;d+=1){var a=o[d],s=a[0],f=a[1];"events"===s?(v(f,u),b(f,n,i)):"style"===s?h(f,u):u.setAttribute(s,f)}if(e.children&&e.children.length)for(var c=0;c<e.children.length;c++)u.appendChild(l(e.children[c],{mount:n,initial:i}));return u}}function v(t,n){!function(t){for(var n=Object.keys(t),i=0;i<n.length;i++)["mounted","updated","unmounted"].includes(n[i])||o.push(n[i]);!function(){var t;for(;t=o.pop();)a.includes(t)||(a.push(t),e.addEventListener(t,function(e){var t=e.target.getAttribute("data-"+d);if(t&&s[t]){var n=e.type,i=s[t][n];i&&i(e)}}))}()}(t);var i=y();n.setAttribute("data-"+d,i),s[i]=t}function h(e,t){if(e&&"object"==typeof e)for(var n=0,i=Object.entries(e);n<i.length;n+=1){var r=i[n];t.style[r[0]]=r[1]}}function b(e,t,n){for(var i=0,r=Object.entries(e);i<r.length;i+=1){var u=r[i];d(u[0],u[1],t,n)}function d(e,t,n,i){i&&(n&&"mounted"===e&&f.push(t),n||"updated"!==e||f.push(t),m())}}function g(i){var r=c(t()),d=Object.assign({},n);n=Object.assign({},r);var o=e;if(!i)return p(o,r,d);o=document.querySelector("[data-"+u+'="'+i+'"]').parentNode;var a=!1,s=function(e,t,n,i){if(!a){if(!e)return{newTree:void 0,oldTree:void 0};if(e.uuid&&e.uuid===n)return{newTree:e,oldTree:t};if(e.children)for(var r=e.children.length,u=0;u<r;u++){var d=e.children[u],o=t.children[u];d.uuid&&d.uuid===n?i(a={newTree:d,oldTree:o}):s(d,o,n,i)}}};s(r,d,i,function(e){return p(o,e.newTree,e.oldTree)})}function p(e,t,n,i){if(void 0===i&&(i=0),e){var r=typeof t,u=typeof n,o=e.childNodes[i];if("undefined"===u)e.appendChild(l(t)),O(t,"mounted");else if("undefined"===r)j(o),e.removeChild(o),O(n,"unmounted");else if(!1!==n||!t.element&&"string"!==r&&"number"!==r)if(!1!==t||!n.element&&"string"!==u&&"number"!==u){if(function(e,t,n,i){return n!==i||"string"===n&&e!==t||e.element!==t.element}(t,n,r,u))j(o),e.replaceChild(l(t,{mount:!1}),o),O(n,"unmounted"),O(t,"mounted");else if(t.element){!function(e,t,n){for(var i=0,r=Object.entries(t.attributes);i<r.length;i+=1){var u=r[i],d=u[0],o=u[1],a=n.attributes?n.attributes[d]:void 0;if("style"===d){if(void 0,void 0,l=typeof(f=a),"object"===(c=typeof(s=o))&&"object"===l&&JSON.stringify(s)===JSON.stringify(f)||"undefined"===c&&"undefined"===l)return;e.removeAttribute("style"),h(o,e)}else"events"===d?(j(e),v(o,e)):"value"===d&&e.value&&e.value!==o?e.value=o:a&&o===a||e.setAttribute(d,o)}var s,f,c,l}(o,t,n),O(t,"updated");var a=t.children?t.children.length:0,c=o.childNodes.length;if(a<c)for(var b=c-1;b>0;b--)if(void 0===t.children[b]){var g=o.lastChild;j(g),g.remove(),O(n.children[b],"unmounted")}for(var y=0;y<a;y++)p(o,t.children[y],n.children[y],y)}}else j(o),e.replaceChild(l(t),o),O(n,"unmounted"),O(t,"mounted");else j(o),e.replaceChild(l(t),o),O(n,"unmounted"),O(t,"mounted")}function j(e){if(e.getAttribute){var t=e.getAttribute("data-"+d);t&&delete s[t]}}function O(e,t){if(e&&e.attributes&&e.attributes.events){for(var n=0,i=Object.entries(e.attributes.events);n<i.length;n+=1){var r=i[n];r[0]===t&&f.push(r[1])}m()}}}function m(){var e=new Event("__LITERAL_LIFECYCLE__");return window.dispatchEvent(e)}function y(){return Math.random().toString(36).substring(2)+(new Date).getTime().toString(36)}module.exports={component:function(e){void 0===e&&(e={});var t=e.state;void 0===t&&(t={});var n=e.methods;void 0===n&&(n=function(){});var u=e.render;void 0===u&&(u=function(){});var d=y();return r[d]=t,function(e){return void 0===e&&(e={}),{uuid:d,render:function(){for(var t in this.uuid=d,this.props=e,this.getState=function(){return Object.assign({},r[this.uuid])}.bind(this),this.setState=function(e){var t=Object.assign({},this.getState(),e);r[this.uuid]=t,g(this.uuid)}.bind(this),this.getStore=function(){return Object.assign({},i)},this.setStore=function(e){var t=Object.assign({},this.getStore(),e);i=t,g()}.bind(this),"function"==typeof n&&(n=n.bind(this)()),n)this[t]=n[t].bind(this);return u.bind(this)()}}}},render:function(r,u,d){void 0===d&&(d={}),i=Object.assign({},i,d),e=document.getElementById(u);var o=c(r());function a(){for(var e;e=f.pop();)e()}t=r,n=Object.assign({},o),e.appendChild(l(o,{initial:!0})),a(),window.addEventListener("__LITERAL_LIFECYCLE__",a)},h:function(e,t){for(var n=[],i=arguments.length-2;i-- >0;)n[i]=arguments[i+2];return{element:e,attributes:Object.assign({},t),children:function e(t,n){for(var i=0;i<t.length;i++)Array.isArray(t[i])?e(t[i],n):n.push(t[i]);return n}(n,[])}}};
//# sourceMappingURL=index.js.map

2

build/index.m.js

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

var e,t,n,i={},r=[],o=function(e,t){for(var n=[],i=arguments.length-2;i-- >0;)n[i]=arguments[i+2];return{element:e,attributes:Object.assign({},t),children:function e(t,n){for(var i=0;i<t.length;i++)Array.isArray(t[i])?e(t[i],n):n.push(t[i]);return n}(n,[])}},d=function(o,d,u){void 0===u&&(u={}),i=Object.assign({},i,u),e=document.getElementById(d),t=o;var a=s(o());function l(){for(var e;e=r.pop();)e()}n=Object.assign({},a),e.appendChild(c(a,{initial:!0})),l(),window.addEventListener("__LITERAL_LIFECYCLE__",l)},u=function(o){void 0===o&&(o={});var d=o.methods;void 0===d&&(d=function(){});var u=o.render;return void 0===u&&(u=function(){}),function(o){return void 0===o&&(o={}),function(l){for(var f in void 0===l&&(l={}),this.props=o,this.getState=function(){return Object.assign({},i,l)},this.setState=function(o){var d,u,l=Object.assign({},this.getState(),o);i=l,d=s(t()),u=Object.assign({},n),n=Object.assign({},d),function e(t,n,i,o){if(void 0===o&&(o=0),t){var d,u,s,l,f=typeof n,v=typeof i,h=t.childNodes[o];if(void 0===i)t.appendChild(c(n)),b(n,"mounted");else if(!1!==i||!n.element&&"string"!==f&&"number"!==f)if(!1!==n||!i.element&&"string"!==v&&"number"!==v){if(function(e,t,n,i){return n!==i||"string"===n&&e!==t||e.element!==t.element}(n,i,f,v))t.replaceChild(c(n,{mount:!1}),h),b(n,"mounted");else if(n.element&&(function(e,t,n,i){for(var r=0,o=Object.entries(n.attributes);r<o.length;r+=1){var d=o[r],u=d[0],s=d[1],c=i[u]?i[u].attributes:void 0;["events"].includes(u)||c&&s===c||(t.setAttribute(u,s),b(n,"updated"))}}(0,h,n,i),n.children||i.children)){var p=(u=i.children,{nc:s=(d=n.children)?d.length:0,oc:l=u?u.length:0,longest:s>=l?s:l});if(p.nc!==p.longest){for(var m=p.oc-1;m>0;m--)void 0===n.children[m]&&(h.lastChild.remove(),b(i.children[m],"unmounted"));p.longest=p.nc}for(var g=0;g<p.longest;g++)e(h,n.children[g],i.children[g],g)}}else t.replaceChild(c(n),h),b(i,"unmounted");else t.replaceChild(c(n),h),b(n,"mounted")}function b(e,t){if(e.events){for(var n=0,i=Object.entries(e.events);n<i.length;n+=1){var o=i[n],d=o[0],u=o[1];d===t&&r.push(u)}a()}}}(e,d,u)}.bind(this),"function"==typeof d&&(d=d.bind(this)()),d)this[f]=d[f].bind(this);return u.bind(this)()}}};function s(e){if("function"==typeof e)e=new e;else if("function"==typeof e.element){var t=Object.assign({},e.attributes.props)||{};delete e.attributes.props,e=new(e.element(t))}if(e.children)for(var n=0;n<e.children.length;n++)e.children[n]=s(e.children[n]);return e}function c(e,t){void 0===t&&(t={});var n=t.mount;void 0===n&&(n=!0);var i=t.initial;void 0===i&&(i=!1);var o=typeof e;if("string"===o||"number"===o)return document.createTextNode(e);if("boolean"===o)return document.createTextNode("");for(var d=document.createElement(e.element),u=0,s=Object.entries(e.attributes);u<s.length;u+=1){var l=s[u],f=l[0],v=l[1];"events"===f?p(v,d,n,i):d.setAttribute(f,v)}for(var h=0;h<e.children.length;h++)d.appendChild(c(e.children[h],{mount:n,initial:i}));return d;function p(e,t,n,i){for(var o=0,d=Object.entries(e);o<d.length;o+=1){var u=d[o],s=u[0],c=u[1];["mounted","unmounted","updated"].includes(s)||t.addEventListener(s,c),l(s,c,n,i)}function l(e,t,n,i){i&&(n&&"mounted"===e&&r.push(t),n||"updated"!==e||r.push(t),a())}}}function a(){var e=new Event("__LITERAL_LIFECYCLE__");return window.dispatchEvent(e)}export default{component:u,render:d,h:o};export{o as h,d as render,u as component};
var e,t,n,i={},r={},u="luid",d="euid",o=[],a=[],s={},f=[],c=function(e,t){for(var n=[],i=arguments.length-2;i-- >0;)n[i]=arguments[i+2];return{element:e,attributes:Object.assign({},t),children:function e(t,n){for(var i=0;i<t.length;i++)Array.isArray(t[i])?e(t[i],n):n.push(t[i]);return n}(n,[])}},l=function(r,u,d){void 0===d&&(d={}),i=Object.assign({},i,d),e=document.getElementById(u);var o=h(r());function a(){for(var e;e=f.pop();)e()}t=r,n=Object.assign({},o),e.appendChild(b(o,{initial:!0})),a(),window.addEventListener("__LITERAL_LIFECYCLE__",a)},v=function(e){void 0===e&&(e={});var t=e.state;void 0===t&&(t={});var n=e.methods;void 0===n&&(n=function(){});var u=e.render;void 0===u&&(u=function(){});var d=T();return r[d]=t,function(e){return void 0===e&&(e={}),{uuid:d,render:function(){for(var t in this.uuid=d,this.props=e,this.getState=function(){return Object.assign({},r[this.uuid])}.bind(this),this.setState=function(e){var t=Object.assign({},this.getState(),e);r[this.uuid]=t,y(this.uuid)}.bind(this),this.getStore=function(){return Object.assign({},i)},this.setStore=function(e){var t=Object.assign({},this.getStore(),e);i=t,y()}.bind(this),"function"==typeof n&&(n=n.bind(this)()),n)this[t]=n[t].bind(this);return u.bind(this)()}}}};function h(e){var t;if(void 0!==e){if("function"==typeof e.render)t=e.uuid,(e=new e.render).uuid=t,e.attributes&&(e.attributes["data-"+u]=t);else if("function"==typeof e.element){var n=Object.assign({},e.attributes.props)||{};delete e.attributes.props,(e=e.element(n)).render&&(t=e.uuid,(e=new e.render).uuid=t,e.attributes&&(e.attributes["data-"+u]=t))}if(e.children)for(var i=0;i<e.children.length;i++)e.children[i]=h(e.children[i]);return e}}function b(e,t){void 0===t&&(t={});var n=t.mount;void 0===n&&(n=!0);var i=t.initial;void 0===i&&(i=!1);var r=typeof e;if("undefined"!==r){if("string"===r||"number"===r)return document.createTextNode(e);if("boolean"===r)return document.createTextNode("");var u=document.createElement(e.element);if(e.attributes&&"object"==typeof e.attributes)for(var d=0,o=Object.entries(e.attributes);d<o.length;d+=1){var a=o[d],s=a[0],f=a[1];"events"===s?(p(f,u),m(f,n,i)):"style"===s?g(f,u):u.setAttribute(s,f)}if(e.children&&e.children.length)for(var c=0;c<e.children.length;c++)u.appendChild(b(e.children[c],{mount:n,initial:i}));return u}}function p(t,n){!function(t){for(var n=Object.keys(t),i=0;i<n.length;i++)["mounted","updated","unmounted"].includes(n[i])||o.push(n[i]);!function(){var t;for(;t=o.pop();)a.includes(t)||(a.push(t),e.addEventListener(t,function(e){var t=e.target.getAttribute("data-"+d);if(t&&s[t]){var n=e.type,i=s[t][n];i&&i(e)}}))}()}(t);var i=T();n.setAttribute("data-"+d,i),s[i]=t}function g(e,t){if(e&&"object"==typeof e)for(var n=0,i=Object.entries(e);n<i.length;n+=1){var r=i[n];t.style[r[0]]=r[1]}}function m(e,t,n){for(var i=0,r=Object.entries(e);i<r.length;i+=1){var u=r[i];d(u[0],u[1],t,n)}function d(e,t,n,i){i&&(n&&"mounted"===e&&f.push(t),n||"updated"!==e||f.push(t),O())}}function y(i){var r=h(t()),d=Object.assign({},n);n=Object.assign({},r);var o=e;if(!i)return j(o,r,d);o=document.querySelector("[data-"+u+'="'+i+'"]').parentNode;var a=!1,s=function(e,t,n,i){if(!a){if(!e)return{newTree:void 0,oldTree:void 0};if(e.uuid&&e.uuid===n)return{newTree:e,oldTree:t};if(e.children)for(var r=e.children.length,u=0;u<r;u++){var d=e.children[u],o=t.children[u];d.uuid&&d.uuid===n?i(a={newTree:d,oldTree:o}):s(d,o,n,i)}}};s(r,d,i,function(e){return j(o,e.newTree,e.oldTree)})}function j(e,t,n,i){if(void 0===i&&(i=0),e){var r=typeof t,u=typeof n,o=e.childNodes[i];if("undefined"===u)e.appendChild(b(t)),y(t,"mounted");else if("undefined"===r)m(o),e.removeChild(o),y(n,"unmounted");else if(!1!==n||!t.element&&"string"!==r&&"number"!==r)if(!1!==t||!n.element&&"string"!==u&&"number"!==u){if(function(e,t,n,i){return n!==i||"string"===n&&e!==t||e.element!==t.element}(t,n,r,u))m(o),e.replaceChild(b(t,{mount:!1}),o),y(n,"unmounted"),y(t,"mounted");else if(t.element){!function(e,t,n){for(var i=0,r=Object.entries(t.attributes);i<r.length;i+=1){var u=r[i],d=u[0],o=u[1],a=n.attributes?n.attributes[d]:void 0;if("style"===d){if(void 0,void 0,l=typeof(f=a),"object"===(c=typeof(s=o))&&"object"===l&&JSON.stringify(s)===JSON.stringify(f)||"undefined"===c&&"undefined"===l)return;e.removeAttribute("style"),g(o,e)}else"events"===d?(m(e),p(o,e)):"value"===d&&e.value&&e.value!==o?e.value=o:a&&o===a||e.setAttribute(d,o)}var s,f,c,l}(o,t,n),y(t,"updated");var a=t.children?t.children.length:0,c=o.childNodes.length;if(a<c)for(var l=c-1;l>0;l--)if(void 0===t.children[l]){var v=o.lastChild;m(v),v.remove(),y(n.children[l],"unmounted")}for(var h=0;h<a;h++)j(o,t.children[h],n.children[h],h)}}else m(o),e.replaceChild(b(t),o),y(n,"unmounted"),y(t,"mounted");else m(o),e.replaceChild(b(t),o),y(n,"unmounted"),y(t,"mounted")}function m(e){if(e.getAttribute){var t=e.getAttribute("data-"+d);t&&delete s[t]}}function y(e,t){if(e&&e.attributes&&e.attributes.events){for(var n=0,i=Object.entries(e.attributes.events);n<i.length;n+=1){var r=i[n];r[0]===t&&f.push(r[1])}O()}}}function O(){var e=new Event("__LITERAL_LIFECYCLE__");return window.dispatchEvent(e)}function T(){return Math.random().toString(36).substring(2)+(new Date).getTime().toString(36)}export default{component:v,render:l,h:c};export{c as h,l as render,v as component};
//# sourceMappingURL=index.m.js.map

2

build/index.umd.js

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

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.literaljs=t()}(this,function(){var e,t,n,i={},r=[];function o(e){if("function"==typeof e)e=new e;else if("function"==typeof e.element){var t=Object.assign({},e.attributes.props)||{};delete e.attributes.props,e=new(e.element(t))}if(e.children)for(var n=0;n<e.children.length;n++)e.children[n]=o(e.children[n]);return e}function d(e,t){void 0===t&&(t={});var n=t.mount;void 0===n&&(n=!0);var i=t.initial;void 0===i&&(i=!1);var o=typeof e;if("string"===o||"number"===o)return document.createTextNode(e);if("boolean"===o)return document.createTextNode("");for(var s=document.createElement(e.element),c=0,a=Object.entries(e.attributes);c<a.length;c+=1){var l=a[c],f=l[0],h=l[1];"events"===f?p(h,s,n,i):s.setAttribute(f,h)}for(var v=0;v<e.children.length;v++)s.appendChild(d(e.children[v],{mount:n,initial:i}));return s;function p(e,t,n,i){for(var o=0,d=Object.entries(e);o<d.length;o+=1){var s=d[o],c=s[0],a=s[1];["mounted","unmounted","updated"].includes(c)||t.addEventListener(c,a),l(c,a,n,i)}function l(e,t,n,i){i&&(n&&"mounted"===e&&r.push(t),n||"updated"!==e||r.push(t),u())}}}function u(){var e=new Event("__LITERAL_LIFECYCLE__");return window.dispatchEvent(e)}return{component:function(s){void 0===s&&(s={});var c=s.methods;void 0===c&&(c=function(){});var a=s.render;return void 0===a&&(a=function(){}),function(s){return void 0===s&&(s={}),function(l){for(var f in void 0===l&&(l={}),this.props=s,this.getState=function(){return Object.assign({},i,l)},this.setState=function(s){var c,a,l=Object.assign({},this.getState(),s);i=l,c=o(t()),a=Object.assign({},n),n=Object.assign({},c),function e(t,n,i,o){if(void 0===o&&(o=0),t){var s,c,a,l,f=typeof n,h=typeof i,v=t.childNodes[o];if(void 0===i)t.appendChild(d(n)),g(n,"mounted");else if(!1!==i||!n.element&&"string"!==f&&"number"!==f)if(!1!==n||!i.element&&"string"!==h&&"number"!==h){if(function(e,t,n,i){return n!==i||"string"===n&&e!==t||e.element!==t.element}(n,i,f,h))t.replaceChild(d(n,{mount:!1}),v),g(n,"mounted");else if(n.element&&(function(e,t,n,i){for(var r=0,o=Object.entries(n.attributes);r<o.length;r+=1){var d=o[r],u=d[0],s=d[1],c=i[u]?i[u].attributes:void 0;["events"].includes(u)||c&&s===c||(t.setAttribute(u,s),g(n,"updated"))}}(0,v,n,i),n.children||i.children)){var p=(c=i.children,{nc:a=(s=n.children)?s.length:0,oc:l=c?c.length:0,longest:a>=l?a:l});if(p.nc!==p.longest){for(var m=p.oc-1;m>0;m--)void 0===n.children[m]&&(v.lastChild.remove(),g(i.children[m],"unmounted"));p.longest=p.nc}for(var b=0;b<p.longest;b++)e(v,n.children[b],i.children[b],b)}}else t.replaceChild(d(n),v),g(i,"unmounted");else t.replaceChild(d(n),v),g(n,"mounted")}function g(e,t){if(e.events){for(var n=0,i=Object.entries(e.events);n<i.length;n+=1){var o=i[n],d=o[0],s=o[1];d===t&&r.push(s)}u()}}}(e,c,a)}.bind(this),"function"==typeof c&&(c=c.bind(this)()),c)this[f]=c[f].bind(this);return a.bind(this)()}}},render:function(u,s,c){void 0===c&&(c={}),i=Object.assign({},i,c),e=document.getElementById(s),t=u;var a=o(u());function l(){for(var e;e=r.pop();)e()}n=Object.assign({},a),e.appendChild(d(a,{initial:!0})),l(),window.addEventListener("__LITERAL_LIFECYCLE__",l)},h:function(e,t){for(var n=[],i=arguments.length-2;i-- >0;)n[i]=arguments[i+2];return{element:e,attributes:Object.assign({},t),children:function e(t,n){for(var i=0;i<t.length;i++)Array.isArray(t[i])?e(t[i],n):n.push(t[i]);return n}(n,[])}}}});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.literaljs=t()}(this,function(){var e,t,n,i={},r={},u="luid",d="euid",o=[],a=[],s={},f=[];function c(e){var t;if(void 0!==e){if("function"==typeof e.render)t=e.uuid,(e=new e.render).uuid=t,e.attributes&&(e.attributes["data-"+u]=t);else if("function"==typeof e.element){var n=Object.assign({},e.attributes.props)||{};delete e.attributes.props,(e=e.element(n)).render&&(t=e.uuid,(e=new e.render).uuid=t,e.attributes&&(e.attributes["data-"+u]=t))}if(e.children)for(var i=0;i<e.children.length;i++)e.children[i]=c(e.children[i]);return e}}function l(e,t){void 0===t&&(t={});var n=t.mount;void 0===n&&(n=!0);var i=t.initial;void 0===i&&(i=!1);var r=typeof e;if("undefined"!==r){if("string"===r||"number"===r)return document.createTextNode(e);if("boolean"===r)return document.createTextNode("");var u=document.createElement(e.element);if(e.attributes&&"object"==typeof e.attributes)for(var d=0,o=Object.entries(e.attributes);d<o.length;d+=1){var a=o[d],s=a[0],f=a[1];"events"===s?(v(f,u),b(f,n,i)):"style"===s?h(f,u):u.setAttribute(s,f)}if(e.children&&e.children.length)for(var c=0;c<e.children.length;c++)u.appendChild(l(e.children[c],{mount:n,initial:i}));return u}}function v(t,n){!function(t){for(var n=Object.keys(t),i=0;i<n.length;i++)["mounted","updated","unmounted"].includes(n[i])||o.push(n[i]);!function(){var t;for(;t=o.pop();)a.includes(t)||(a.push(t),e.addEventListener(t,function(e){var t=e.target.getAttribute("data-"+d);if(t&&s[t]){var n=e.type,i=s[t][n];i&&i(e)}}))}()}(t);var i=y();n.setAttribute("data-"+d,i),s[i]=t}function h(e,t){if(e&&"object"==typeof e)for(var n=0,i=Object.entries(e);n<i.length;n+=1){var r=i[n];t.style[r[0]]=r[1]}}function b(e,t,n){for(var i=0,r=Object.entries(e);i<r.length;i+=1){var u=r[i];d(u[0],u[1],t,n)}function d(e,t,n,i){i&&(n&&"mounted"===e&&f.push(t),n||"updated"!==e||f.push(t),g())}}function p(i){var r=c(t()),d=Object.assign({},n);n=Object.assign({},r);var o=e;if(!i)return m(o,r,d);o=document.querySelector("[data-"+u+'="'+i+'"]').parentNode;var a=!1,s=function(e,t,n,i){if(!a){if(!e)return{newTree:void 0,oldTree:void 0};if(e.uuid&&e.uuid===n)return{newTree:e,oldTree:t};if(e.children)for(var r=e.children.length,u=0;u<r;u++){var d=e.children[u],o=t.children[u];d.uuid&&d.uuid===n?i(a={newTree:d,oldTree:o}):s(d,o,n,i)}}};s(r,d,i,function(e){return m(o,e.newTree,e.oldTree)})}function m(e,t,n,i){if(void 0===i&&(i=0),e){var r=typeof t,u=typeof n,o=e.childNodes[i];if("undefined"===u)e.appendChild(l(t)),O(t,"mounted");else if("undefined"===r)j(o),e.removeChild(o),O(n,"unmounted");else if(!1!==n||!t.element&&"string"!==r&&"number"!==r)if(!1!==t||!n.element&&"string"!==u&&"number"!==u){if(function(e,t,n,i){return n!==i||"string"===n&&e!==t||e.element!==t.element}(t,n,r,u))j(o),e.replaceChild(l(t,{mount:!1}),o),O(n,"unmounted"),O(t,"mounted");else if(t.element){!function(e,t,n){for(var i=0,r=Object.entries(t.attributes);i<r.length;i+=1){var u=r[i],d=u[0],o=u[1],a=n.attributes?n.attributes[d]:void 0;if("style"===d){if(void 0,void 0,l=typeof(f=a),"object"===(c=typeof(s=o))&&"object"===l&&JSON.stringify(s)===JSON.stringify(f)||"undefined"===c&&"undefined"===l)return;e.removeAttribute("style"),h(o,e)}else"events"===d?(j(e),v(o,e)):"value"===d&&e.value&&e.value!==o?e.value=o:a&&o===a||e.setAttribute(d,o)}var s,f,c,l}(o,t,n),O(t,"updated");var a=t.children?t.children.length:0,c=o.childNodes.length;if(a<c)for(var b=c-1;b>0;b--)if(void 0===t.children[b]){var p=o.lastChild;j(p),p.remove(),O(n.children[b],"unmounted")}for(var y=0;y<a;y++)m(o,t.children[y],n.children[y],y)}}else j(o),e.replaceChild(l(t),o),O(n,"unmounted"),O(t,"mounted");else j(o),e.replaceChild(l(t),o),O(n,"unmounted"),O(t,"mounted")}function j(e){if(e.getAttribute){var t=e.getAttribute("data-"+d);t&&delete s[t]}}function O(e,t){if(e&&e.attributes&&e.attributes.events){for(var n=0,i=Object.entries(e.attributes.events);n<i.length;n+=1){var r=i[n];r[0]===t&&f.push(r[1])}g()}}}function g(){var e=new Event("__LITERAL_LIFECYCLE__");return window.dispatchEvent(e)}function y(){return Math.random().toString(36).substring(2)+(new Date).getTime().toString(36)}return{component:function(e){void 0===e&&(e={});var t=e.state;void 0===t&&(t={});var n=e.methods;void 0===n&&(n=function(){});var u=e.render;void 0===u&&(u=function(){});var d=y();return r[d]=t,function(e){return void 0===e&&(e={}),{uuid:d,render:function(){for(var t in this.uuid=d,this.props=e,this.getState=function(){return Object.assign({},r[this.uuid])}.bind(this),this.setState=function(e){var t=Object.assign({},this.getState(),e);r[this.uuid]=t,p(this.uuid)}.bind(this),this.getStore=function(){return Object.assign({},i)},this.setStore=function(e){var t=Object.assign({},this.getStore(),e);i=t,p()}.bind(this),"function"==typeof n&&(n=n.bind(this)()),n)this[t]=n[t].bind(this);return u.bind(this)()}}}},render:function(r,u,d){void 0===d&&(d={}),i=Object.assign({},i,d),e=document.getElementById(u);var o=c(r());function a(){for(var e;e=f.pop();)e()}t=r,n=Object.assign({},o),e.appendChild(l(o,{initial:!0})),a(),window.addEventListener("__LITERAL_LIFECYCLE__",a)},h:function(e,t){for(var n=[],i=arguments.length-2;i-- >0;)n[i]=arguments[i+2];return{element:e,attributes:Object.assign({},t),children:function e(t,n){for(var i=0;i<t.length;i++)Array.isArray(t[i])?e(t[i],n):n.push(t[i]);return n}(n,[])}}}});
//# sourceMappingURL=index.umd.js.map

47

package.json
{
"name": "literaljs",
"version": "4.0.0",
"description": "~1kb JavaScript library for building user interfaces.",
"main": "build/index.js",
"module": "build/index.m.js",
"source": "src/index.js",
"scripts": {
"build": "microbundle",
"prepare": "npm run build",
"prepublishOnly": "npm run build",
"test": "jest --coverage"
},
"author": "Michael Farrell",
"license": "MIT",
"babel": {
"presets": "env"
},
"dependencies": {},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"jest": "^22.4.0",
"microbundle": "^0.4.3"
}
"name": "literaljs",
"version": "5.0.0",
"description": "A small JavaScript library for building reactive user interfaces.",
"main": "build/index.js",
"module": "build/index.m.js",
"source": "src/index.js",
"scripts": {
"rebuild": "sudo rm -rf build/ && yarn build",
"build": "microbundle",
"prepare": "npm run build",
"prepublishOnly": "npm run build",
"test": "jest --coverage"
},
"author": "Michael Farrell",
"license": "MIT",
"babel": {
"presets": "env"
},
"dependencies": {},
"devDependencies": {
"babel-preset-env": "^1.6.1",
"jest": "^22.4.0",
"microbundle": "^0.4.3"
}
}

17

README.md

@@ -7,3 +7,3 @@ <p align="center">

# LiteralJS
### ~1kb JavaScript library for building user interfaces.
### A small JavaScript library for building reactive user interfaces.

@@ -13,16 +13,19 @@ ### Links

Recent 5.0.0 microbundle:
```js
$ microbundle
Build output to build:
1.4 kB: index.js
1.42 kB: index.m.js
1.46 kB: index.umd.js
1.98 kB: index.js
2 kB: index.m.js
2.03 kB: index.umd.js
```
### [Features and stuff](#features)
- **Small**: Only around 1kb in size.
- **Small**: Only around 2kb in size (using microbundle).
- **Fast**: Current and previous vDOM data is diffed instead of the actual DOM for performant updates and rendering.
- **Virtual DOM**: Diffing occurs on state update for more efficient DOM updates.
- **Virtual DOM**: Diffing occurs only on state and store update for more efficient DOM updates.
- **Flexible Syntax**: Freedom to use JSX, Hyperscript, or Object syntax.
- **Lifecycle Methods**: All DOM elements have the ability to trigger `mounted`, `updated`, and `unmounted` lifecycle functions.
- **One Global Store**: One source of truth which makes other state management libraries less of a need.
- **Local Component State**: Every component can manage state locally.
- **Global Application Store**: One source of truth which makes other state management libraries (like Redux) less of a need.
- **Event Delegation**: Uses event delegation and only event types defined within the application for increased performance.

167

test/component.test.js
import { component, h } from '../src';
describe('Component Tests', () => {
test('Component H Syntax Works', () => {
const Comp = new component({
render() {
return h('div', {}, h('span', {}, 'Hello World'));
}
})();
test('Component H Syntax Works', () => {
const Comp = new component({
render() {
return h('div', {}, h('span', {}, 'Hello World'));
}
})();
expect(new Comp()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: ['Hello World']
}
]
});
});
expect(new Comp.render()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: ['Hello World']
}
]
});
});
test('Component Props Injection Works', () => {
const count = 1;
const Comp = new component({
render() {
return h('div', {}, h('span', {}, this.props.count));
}
})({ count: count });
test('Component Props Injection Works', () => {
const count = 1;
const Comp = new component({
render() {
return h('div', {}, h('span', {}, this.props.count));
}
})({ count: count });
expect(new Comp()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: [count]
}
]
});
});
expect(new Comp.render()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: [count]
}
]
});
});
test('Component State Injection Works', () => {
const count = 1;
const Comp = component({
render() {
return h('div', {}, h('span', {}, this.getState().count));
}
})();
test('Component State Injection Works', () => {
const count = 1;
const Comp = component({
state: {
count: count
},
render() {
return h('div', {}, h('span', {}, this.getState().count));
}
})();
expect(new Comp({ count })).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: [count]
}
]
});
});
expect(new Comp.render()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: [count]
}
]
});
});
test('Component Method Injection Works', () => {
const count = 1;
const Comp = component({
methods() {
return {
count() {
return count;
}
};
},
render() {
return h('div', {}, h('span', {}, this.count()));
}
})();
expect(new Comp()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: [count]
}
]
});
});
test('Component Method Injection Works', () => {
const count = 1;
const Comp = component({
methods() {
return {
count() {
return count;
}
};
},
render() {
return h('div', {}, h('span', {}, this.count()));
}
})();
expect(new Comp.render()).toEqual({
element: 'div',
attributes: {},
children: [
{
element: 'span',
attributes: {},
children: [count]
}
]
});
});
});

155

test/lifecycle.test.js
import { render, component, h } from '../src';
describe('Lifecycle Tests', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
test('Lifecycle mounted works with getState and setState', () => {
const Comp2 = component({
render() {
return h(
'button',
{
id: 'button',
events: {
click: () => this.setState({ show: !this.getState().show })
}
},
this.getState().show &&
h(
'span',
{
events: {
mounted: () => {
this.setState({ count: this.getState().count + 1 });
}
}
},
h('span', { id: 'count' }, this.getState().count)
)
);
}
});
test('Lifecycle mounted works with getState and setState', () => {
const Comp2 = component({
state: { show: false, count: 1 },
render() {
return h(
'button',
{
id: 'button',
events: {
click: () => {
this.setState({ show: !this.getState().show });
setTimeout(() => {
expect(
document.getElementById('count')
.innerHTML
).toBe('2');
done();
});
}
}
},
this.getState().show &&
h(
'span',
{
events: {
mounted: () => {
this.setState({
count: this.getState().count + 1
});
}
}
},
h('span', { id: 'count' }, this.getState().count)
)
);
}
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
render(Comp, 'root', { show: false, count: 1 });
render(Comp, 'root', {});
document.getElementById('button').click();
expect(document.getElementById('count').innerHTML).toBe(2);
});
document.getElementById('button').click();
});
test('Lifecycle unmounted works with getState and setState', () => {
const Comp2 = component({
render() {
return h(
'button',
{
id: 'button',
events: {
mounted: () => this.setState({ show: !this.getState().show })
}
},
this.getState().show &&
h('span', {
events: {
unmounted: () => {
this.setState({ count: this.getState().count + 1 });
}
}
}),
h('span', { id: 'count' }, this.getState().count)
);
}
});
test('Lifecycle unmounted works with getState and setState', () => {
const Comp2 = component({
state: { show: true, count: 1 },
render() {
return h(
'button',
{
id: 'button',
events: {
mounted: () => {
this.setState({ show: !this.getState().show });
expect(
document.getElementById('count').innerHTML
).toBe('2');
done();
}
}
},
this.getState().show &&
h('span', {
events: {
unmounted: () => {
this.setState({
count: this.getState().count + 1
});
}
}
}),
h('span', { id: 'count' }, this.getState().count)
);
}
});
const Comp = component({
render: () => h('div', { class: 'container' }, Comp2())
});
const Comp = component({
render: () => h('div', { class: 'container' }, Comp2())
});
render(Comp, 'root', { show: true, count: 1 });
document.getElementById('button').click();
expect(document.getElementById('count').innerHTML).toBe(2);
});
render(Comp, 'root', {});
});
});

272

test/render.test.js
import { render, component, h } from '../src';
describe('Render Tests', () => {
beforeEach(() => {
document.body.innerHTML = '<div id="root"></div>';
});
test('Render Mounts Properly', () => {
document.body.innerHTML = '<div id="root"></div>';
test('Render Mounts Properly', () => {
const Comp = component({
render() {
return h('span', { class: 'container' }, 'Hello World');
}
});
const Comp = component({
render() {
return h('span', { class: 'container' }, 'Hello World');
}
});
render(Comp, 'root', {});
render(Comp, 'root', {});
expect(document.body.innerHTML).toBe(
'<div id="root"><span class="container">Hello World</span></div>'
);
});
expect(document.body.innerHTML).toMatch(
/<div id="root"><span class="container" data-luid="[\w|\d]{19}">Hello World<\/span><\/div>/i
);
});
test('Render Renders Global State Properly', () => {
const Comp = component({
render() {
return h('span', { class: 'container' }, this.getState().count);
}
});
test('Render Global Store Properly', () => {
document.body.innerHTML = '<div id="root"></div>';
render(Comp, 'root', { count: 1 });
const Comp = component({
render() {
return h(
'span',
{ class: 'container', id: 'count' },
this.getStore().count
);
}
});
expect(document.body.innerHTML).toBe(
'<div id="root"><span class="container">1</span></div>'
);
});
render(Comp, 'root', { count: 1 });
test('Render Multiple Components With Global State Properly', () => {
const Comp2 = component({
render() {
return h('span', {}, this.getState().count);
}
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
expect(document.getElementById('count').innerText).toMatch('1');
});
render(Comp, 'root', { count: 1 });
test('Render Multiple Components With State Properly', () => {
document.body.innerHTML = '<div id="root"></div>';
expect(document.body.innerHTML).toBe(
'<div id="root"><div class="container"><span>1</span></div></div>'
);
});
const Comp2 = component({
state: { count: 1 },
render() {
return h('span', { id: 'count' }, this.getState().count);
}
});
test('Renders True Markup Booleans Properly', () => {
const Comp = component({
render() {
return h('div', { class: 'container' }, [
this.getState().show && h('span', {}, 'Hello World')
]);
}
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
render(Comp, 'root', { show: true });
render(Comp, 'root', {});
expect(document.body.innerHTML).toBe(
'<div id="root"><div class="container"><span>Hello World</span></div></div>'
);
});
expect(document.getElementById('count').innerText).toMatch('1');
});
test('Renders False Markup Booleans Properly', () => {
const Comp = component({
render() {
return h('div', { class: 'container' }, [
this.getState().show && h('span', { id: 'hello' }, 'Hello World')
]);
}
});
test('Renders True Markup Booleans Properly', () => {
document.body.innerHTML = '<div id="root"></div>';
render(Comp, 'root', { show: false });
const Comp = component({
state: { show: true },
render() {
return h('div', { class: 'container' }, [
this.getState().show && h('span', {}, 'Hello World')
]);
}
});
expect(document.getElementById('hello')).toBe(null);
});
render(Comp, 'root', {});
test('getState and setState Works With Methods', done => {
const Comp2 = component({
methods() {
return {
increment() {
this.setState({ count: this.getState().count + 1 });
}
};
},
render() {
return h(
'button',
{
id: 'button',
events: {
click: () => {
this.increment();
expect(this.getState().count).toBe(2);
done();
}
}
},
'Click Me'
);
}
});
expect(document.body.innerHTML).toMatch(
/<div id="root"><div class="container" data-luid="[\w|\d]{19}"><span>Hello World<\/span><\/div><\/div>/i
);
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
test('Renders False Markup Booleans Properly', () => {
document.body.innerHTML = '<div id="root"></div>';
render(Comp, 'root', { count: 1 });
const Comp = component({
state: { show: false },
render() {
return h('div', { class: 'container' }, [
this.getState().show &&
h('span', { id: 'hello' }, 'Hello World')
]);
}
});
document.getElementById('button').click();
});
render(Comp, 'root', {});
test('getState and setState Works In Render Event', done => {
const Comp2 = component({
render() {
return h(
'button',
{
id: 'button',
events: {
click: () => {
this.setState({ count: this.getState().count + 1 });
expect(this.getState().count).toBe(2);
done();
}
}
},
'Click Me'
);
}
});
expect(document.getElementById('hello')).toBe(null);
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
test('getState and setState Works With Methods', done => {
document.body.innerHTML = '<div id="root"></div>';
render(Comp, 'root', { count: 1 });
const Comp2 = component({
state: { count: 1 },
methods() {
return {
increment() {
this.setState({ count: this.getState().count + 1 });
}
};
},
render() {
return h(
'button',
{
id: 'button',
events: {
click: () => {
this.increment();
expect(this.getState().count).toBe(2);
done();
}
}
},
'Click Me'
);
}
});
document.getElementById('button').click();
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
render(Comp, 'root', {});
document.getElementById('button').click();
});
test('getState and setState Works In Render Event', done => {
document.body.innerHTML = '<div id="root"></div>';
const Comp2 = component({
state: { count: 1 },
render() {
return h(
'button',
{
id: 'button',
events: {
click: () => {
this.setState({
count: this.getState().count + 1
});
var count = this.getState().count;
expect(count).toBe(2);
done();
}
}
},
'Click Me'
);
}
});
const Comp = component({
render() {
return h('div', { class: 'container' }, Comp2());
}
});
render(Comp, 'root', {});
document.getElementById('button').click();
});
});
build/index.js.map

Sorry, the diff of this file is not supported yet

build/index.m.js.map

Sorry, the diff of this file is not supported yet

build/index.umd.js.map

Sorry, the diff of this file is not supported yet

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