literaljs - npm Package Compare versions

Comparing version 2.1.1 to 2.2.0

build/index.js

@@ -1,2 +0,2 @@
-var e={},t=[],n=function(t){return e=Object.assign({},e,t)},r=function(e,n){window.addEventListener("__LITERAL_UPDATE__",function(){var r=t.pop();i(e,n,{oldState:r.oldState,newState:r.newState})})},i=function(e,t,n){var r=o(t(),n.oldState),i=o(t(),n.newState);return f(e,i,r)},o=function(e,t){if((e="function"==typeof e?e(t):e).children)for(var n=0;n<e.children.length;n++)e.children[n]=o(e.children[n],t);return e},d=function(e){var t=new MutationObserver(function(e){for(var t=0;t<e.length;t++)"childList"===e[t].type&&(n("mounted",e[t].addedNodes),n("unmounted",e[t].removedNodes))}),n=function(e,t){for(var n=0;n<t.length;n++){var r=new CustomEvent(e);t[n].dispatchEvent(r)}};t.observe(e,{childList:!0})},c=function(e){for(var t=document.createElement(e.element),n=0,r=Object.entries(e);n<r.length;n+=1){var i=r[n],o=i[0],d=i[1];if("text"===o&&a(d,t),"events"===o&&u(d,t),["children","element","text","events"].includes(o)||t.setAttribute(o,d),"children"===o)for(var l=0;l<d.length;l++)t.appendChild(c(d[l]))}return t},a=function(e,t){var n=document.createTextNode(e);t.appendChild(n)},u=function(e,t){if(e instanceof Array)for(var n=0;n<e.length;n++)["mounted","unmounted"].includes(e[n].type)&&d(newNode),t.addEventListener(e[n].type,e[n].action);else e instanceof Object&&(["mounted","unmounted"].includes(e.type)&&d(newNode),t.addEventListener(e.type,e.action))},l=function(t){return void 0===t&&(t=e),Object.assign({},t)},v=function(n){var r=l(),i={oldState:r,nextState:Object.assign({},r,n)};e=i.nextState,t.push(i);var o=new Event("__LITERAL_UPDATE__");return window.dispatchEvent(o)},f=function(e,t,n,r){void 0===r&&(r=0);var i=e.children[r];if(!n&&t)!1===n?e.insertBefore(c(t),i):void 0===n&&e.appendChild(c(t));else if(!t&&n)e.removeChild(i);else if(t&&(m(i,t,n),p(e,i,t,n),t.children||n.children))for(var o=s(t.children,n.children),d=s(n.children,t.children),a=0;a<h(o,d);a++)f(i,o[a],d[a],a)},s=function(e,t){for(var n=[],r=0;r<e.length;r++)!1===e[r]&&!1===t[r]||n.push(e[r]);return n},h=function(e,t){var n=e.length,r=t.length;return n>=r?n:r},p=function(e,t,n,r){for(var i=0,o=Object.entries(n);i<o.length;i+=1){var d=o[i],a=d[0],u=d[1],l=r[a];"element"===a||"text"===a?u!==l&&e.replaceChild(c(n),t):["children","events","element","text"].includes(a)||l&&u===l||t.setAttribute(name,value)}},m=function(e,t,n){for(var r=0,i=Object.entries(n);r<i.length;r+=1){var o=i[r];t[o[0]]||e.removeAttribute(o[1])}};module.exports={component:function(e){void 0===e&&(e={});var t=e.methods;void 0===t&&(t=function(){});var n=e.render;return void 0===n&&(n=function(){}),function(e){void 0===e&&(e={});var r=e.props;return void 0===r&&(r={}),function(e){return n({getState:function(){return l(e)},setState:v,props:r,methods:t({getState:function(){return l()},setState:v})})}}},render:function(t,i,d){void 0===d&&(d={});var a=document.getElementById(i);n(d),r(a,t);var u=o(t(),e),l=c(u);a.appendChild(l)}};
+var e={},t=[],n=function(t){return e=Object.assign({},e,t)},r=function(e,n){window.addEventListener("__LITERAL_UPDATE__",function(){var r=t.pop();i(e,n,{oldState:r.oldState,newState:r.newState})})},i=function(e,t,n){var r=d(t(),n.oldState),i=d(t(),n.newState);return s(e,i,r)},o=function(e,t){t=void 0===t?[]:t;for(var n=0;n<e.length;n++)Array.isArray(e[n])?o(e[n],t):t.push(e[n]);return t},d=function(e,t){if((e="function"==typeof e?e(t):e).children)for(var n=0;n<e.children.length;n++)e.children[n]=d(e.children[n],t);return e},c=function(e){var t=new MutationObserver(function(e){for(var t=0;t<e.length;t++)"childList"===e[t].type&&(n("mounted",e[t].addedNodes),n("unmounted",e[t].removedNodes))}),n=function(e,t){for(var n=0;n<t.length;n++){var r=new CustomEvent(e);t[n].dispatchEvent(r)}};t.observe(e,{childList:!0})},u=function(e){if("object"!=typeof e)return document.createTextNode(e);for(var t=document.createElement(e.element),n=0,r=Object.entries(e);n<r.length;n+=1){var i=r[n],o=i[0],d=i[1];if("text"===o&&a(d,t),"events"===o&&l(d,t),["children","element","text","events"].includes(o)||t.setAttribute(o,d),"children"===o)for(var c=0;c<d.length;c++)t.appendChild(u(d[c]))}return t},a=function(e,t){var n=document.createTextNode(e);t.appendChild(n)},l=function(e,t){if(Array.isArray(e))for(var n=0;n<e.length;n++)["mounted","unmounted"].includes(e[n].type)&&c(newNode),t.addEventListener(e[n].type,e[n].action);else["mounted","unmounted"].includes(e.type)&&c(newNode),t.addEventListener(e.type,e.action)},f=function(t){return void 0===t&&(t=e),Object.assign({},t)},v=function(n){var r=f(),i={oldState:r,nextState:Object.assign({},r,n)};e=i.nextState,t.push(i);var o=new Event("__LITERAL_UPDATE__");return window.dispatchEvent(o)},s=function(e,t,n,r){if(void 0===r&&(r=0),e){var i=e.childNodes[r];if(!n&&t)!1===n?e.insertBefore(u(t),i):void 0===n?e.appendChild(u(t)):0===n&&e.replaceChild(u(t),i);else if(!t&&n)e.removeChild(i);else if(t&&(m(i,t,n),p(e,i,t,n),t.children||n.children))for(var o=0;o<h(t.children,n.children);o++)s(i,t.children[o],n.children[o],o)}},h=function(e,t){var n=e.length,r=t.length;return n>=r?n:r},p=function(e,t,n,r){if(("object"!=typeof n||"object"!=typeof r)&&n!==r)return e.replaceChild(u(n),t);for(var i=0,o=Object.entries(n);i<o.length;i+=1){var d=o[i],c=d[0],a=d[1],l=r[c];if("element"===c||"text"===c){if(a!==l)return e.replaceChild(u(n),t)}else if(!(["children","events","element","text"].includes(c)||l&&a===l))return t.setAttribute(name,value)}},m=function(e,t,n){for(var r=0,i=Object.entries(n);r<i.length;r+=1){var o=i[r];t[o[0]]||e.removeAttribute(o[1])}};module.exports={component:function(e){void 0===e&&(e={});var t=e.methods;void 0===t&&(t=function(){});var n=e.render;return void 0===n&&(n=function(){}),function(e){void 0===e&&(e={});var r=e.props;return void 0===r&&(r={}),function(e){return n({getState:function(){return f(e)},setState:v,props:r,methods:t({getState:function(){return f()},setState:v})})}}},render:function(t,i,o){void 0===o&&(o={});var c=document.getElementById(i);n(o),r(c,t);var a=d(t(),e),l=u(a);c.appendChild(l)},h:function(e,t){for(var n=[],r=arguments.length-2;r-- >0;)n[r]=arguments[r+2];return"function"==typeof e?e:Object.assign({},{element:e},t,{children:o(n,[])})}};
 //# sourceMappingURL=index.js.map

build/index.m.js

@@ -1,2 +0,2 @@
-var e={},t=[],n=function(t,n,o){void 0===o&&(o={});var c=document.getElementById(n);r(o),i(c,t);var u=d(t(),e),l=a(u);c.appendChild(l)},r=function(t){return e=Object.assign({},e,t)},i=function(e,n){window.addEventListener("__LITERAL_UPDATE__",function(){var r=t.pop();o(e,n,{oldState:r.oldState,newState:r.newState})})},o=function(e,t,n){var r=d(t(),n.oldState),i=d(t(),n.newState);return h(e,i,r)},d=function(e,t){if((e="function"==typeof e?e(t):e).children)for(var n=0;n<e.children.length;n++)e.children[n]=d(e.children[n],t);return e},c=function(e){var t=new MutationObserver(function(e){for(var t=0;t<e.length;t++)"childList"===e[t].type&&(n("mounted",e[t].addedNodes),n("unmounted",e[t].removedNodes))}),n=function(e,t){for(var n=0;n<t.length;n++){var r=new CustomEvent(e);t[n].dispatchEvent(r)}};t.observe(e,{childList:!0})},a=function(e){for(var t=document.createElement(e.element),n=0,r=Object.entries(e);n<r.length;n+=1){var i=r[n],o=i[0],d=i[1];if("text"===o&&u(d,t),"events"===o&&l(d,t),["children","element","text","events"].includes(o)||t.setAttribute(o,d),"children"===o)for(var c=0;c<d.length;c++)t.appendChild(a(d[c]))}return t},u=function(e,t){var n=document.createTextNode(e);t.appendChild(n)},l=function(e,t){if(e instanceof Array)for(var n=0;n<e.length;n++)["mounted","unmounted"].includes(e[n].type)&&c(newNode),t.addEventListener(e[n].type,e[n].action);else e instanceof Object&&(["mounted","unmounted"].includes(e.type)&&c(newNode),t.addEventListener(e.type,e.action))},v=function(t){return void 0===t&&(t=e),Object.assign({},t)},f=function(n){var r=v(),i={oldState:r,nextState:Object.assign({},r,n)};e=i.nextState,t.push(i);var o=new Event("__LITERAL_UPDATE__");return window.dispatchEvent(o)},s=function(e){void 0===e&&(e={});var t=e.methods;void 0===t&&(t=function(){});var n=e.render;return void 0===n&&(n=function(){}),function(e){void 0===e&&(e={});var r=e.props;return void 0===r&&(r={}),function(e){return n({getState:function(){return v(e)},setState:f,props:r,methods:t({getState:function(){return v()},setState:f})})}}},h=function(e,t,n,r){void 0===r&&(r=0);var i=e.children[r];if(!n&&t)!1===n?e.insertBefore(a(t),i):void 0===n&&e.appendChild(a(t));else if(!t&&n)e.removeChild(i);else if(t&&(E(i,t,n),g(e,i,t,n),t.children||n.children))for(var o=p(t.children,n.children),d=p(n.children,t.children),c=0;c<m(o,d);c++)h(i,o[c],d[c],c)},p=function(e,t){for(var n=[],r=0;r<e.length;r++)!1===e[r]&&!1===t[r]||n.push(e[r]);return n},m=function(e,t){var n=e.length,r=t.length;return n>=r?n:r},g=function(e,t,n,r){for(var i=0,o=Object.entries(n);i<o.length;i+=1){var d=o[i],c=d[0],u=d[1],l=r[c];"element"===c||"text"===c?u!==l&&e.replaceChild(a(n),t):["children","events","element","text"].includes(c)||l&&u===l||t.setAttribute(name,value)}},E=function(e,t,n){for(var r=0,i=Object.entries(n);r<i.length;r+=1){var o=i[r];t[o[0]]||e.removeAttribute(o[1])}};export default{component:s,render:n};export{n as render,s as component};
+var e={},t=[],n=function(e,t){for(var n=[],r=arguments.length-2;r-- >0;)n[r]=arguments[r+2];return"function"==typeof e?e:Object.assign({},{element:e},t,{children:c(n,[])})},r=function(t,n,r){void 0===r&&(r={});var d=document.getElementById(n);i(r),o(d,t);var c=u(t(),e),a=l(c);d.appendChild(a)},i=function(t){return e=Object.assign({},e,t)},o=function(e,n){window.addEventListener("__LITERAL_UPDATE__",function(){var r=t.pop();d(e,n,{oldState:r.oldState,newState:r.newState})})},d=function(e,t,n){var r=u(t(),n.oldState),i=u(t(),n.newState);return m(e,i,r)},c=function(e,t){t=void 0===t?[]:t;for(var n=0;n<e.length;n++)Array.isArray(e[n])?c(e[n],t):t.push(e[n]);return t},u=function(e,t){if((e="function"==typeof e?e(t):e).children)for(var n=0;n<e.children.length;n++)e.children[n]=u(e.children[n],t);return e},a=function(e){var t=new MutationObserver(function(e){for(var t=0;t<e.length;t++)"childList"===e[t].type&&(n("mounted",e[t].addedNodes),n("unmounted",e[t].removedNodes))}),n=function(e,t){for(var n=0;n<t.length;n++){var r=new CustomEvent(e);t[n].dispatchEvent(r)}};t.observe(e,{childList:!0})},l=function(e){if("object"!=typeof e)return document.createTextNode(e);for(var t=document.createElement(e.element),n=0,r=Object.entries(e);n<r.length;n+=1){var i=r[n],o=i[0],d=i[1];if("text"===o&&f(d,t),"events"===o&&v(d,t),["children","element","text","events"].includes(o)||t.setAttribute(o,d),"children"===o)for(var c=0;c<d.length;c++)t.appendChild(l(d[c]))}return t},f=function(e,t){var n=document.createTextNode(e);t.appendChild(n)},v=function(e,t){if(Array.isArray(e))for(var n=0;n<e.length;n++)["mounted","unmounted"].includes(e[n].type)&&a(newNode),t.addEventListener(e[n].type,e[n].action);else["mounted","unmounted"].includes(e.type)&&a(newNode),t.addEventListener(e.type,e.action)},s=function(t){return void 0===t&&(t=e),Object.assign({},t)},h=function(n){var r=s(),i={oldState:r,nextState:Object.assign({},r,n)};e=i.nextState,t.push(i);var o=new Event("__LITERAL_UPDATE__");return window.dispatchEvent(o)},p=function(e){void 0===e&&(e={});var t=e.methods;void 0===t&&(t=function(){});var n=e.render;return void 0===n&&(n=function(){}),function(e){void 0===e&&(e={});var r=e.props;return void 0===r&&(r={}),function(e){return n({getState:function(){return s(e)},setState:h,props:r,methods:t({getState:function(){return s()},setState:h})})}}},m=function(e,t,n,r){if(void 0===r&&(r=0),e){var i=e.childNodes[r];if(!n&&t)!1===n?e.insertBefore(l(t),i):void 0===n?e.appendChild(l(t)):0===n&&e.replaceChild(l(t),i);else if(!t&&n)e.removeChild(i);else if(t&&(y(i,t,n),b(e,i,t,n),t.children||n.children))for(var o=0;o<g(t.children,n.children);o++)m(i,t.children[o],n.children[o],o)}},g=function(e,t){var n=e.length,r=t.length;return n>=r?n:r},b=function(e,t,n,r){if(("object"!=typeof n||"object"!=typeof r)&&n!==r)return e.replaceChild(l(n),t);for(var i=0,o=Object.entries(n);i<o.length;i+=1){var d=o[i],c=d[0],u=d[1],a=r[c];if("element"===c||"text"===c){if(u!==a)return e.replaceChild(l(n),t)}else if(!(["children","events","element","text"].includes(c)||a&&u===a))return t.setAttribute(name,value)}},y=function(e,t,n){for(var r=0,i=Object.entries(n);r<i.length;r+=1){var o=i[r];t[o[0]]||e.removeAttribute(o[1])}};export default{component:p,render:r,h:n};export{n as h,r as render,p as component};
 //# sourceMappingURL=index.m.js.map

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=function(t){return e=Object.assign({},e,t)},r=function(e,n){window.addEventListener("__LITERAL_UPDATE__",function(){var r=t.pop();i(e,n,{oldState:r.oldState,newState:r.newState})})},i=function(e,t,n){var r=o(t(),n.oldState),i=o(t(),n.newState);return v(e,i,r)},o=function(e,t){if((e="function"==typeof e?e(t):e).children)for(var n=0;n<e.children.length;n++)e.children[n]=o(e.children[n],t);return e},d=function(e){var t=new MutationObserver(function(e){for(var t=0;t<e.length;t++)"childList"===e[t].type&&(n("mounted",e[t].addedNodes),n("unmounted",e[t].removedNodes))}),n=function(e,t){for(var n=0;n<t.length;n++){var r=new CustomEvent(e);t[n].dispatchEvent(r)}};t.observe(e,{childList:!0})},c=function(e){for(var t=document.createElement(e.element),n=0,r=Object.entries(e);n<r.length;n+=1){var i=r[n],o=i[0],d=i[1];if("text"===o&&u(d,t),"events"===o&&a(d,t),["children","element","text","events"].includes(o)||t.setAttribute(o,d),"children"===o)for(var f=0;f<d.length;f++)t.appendChild(c(d[f]))}return t},u=function(e,t){var n=document.createTextNode(e);t.appendChild(n)},a=function(e,t){if(e instanceof Array)for(var n=0;n<e.length;n++)["mounted","unmounted"].includes(e[n].type)&&d(newNode),t.addEventListener(e[n].type,e[n].action);else e instanceof Object&&(["mounted","unmounted"].includes(e.type)&&d(newNode),t.addEventListener(e.type,e.action))},f=function(t){return void 0===t&&(t=e),Object.assign({},t)},l=function(n){var r=f(),i={oldState:r,nextState:Object.assign({},r,n)};e=i.nextState,t.push(i);var o=new Event("__LITERAL_UPDATE__");return window.dispatchEvent(o)},v=function(e,t,n,r){void 0===r&&(r=0);var i=e.children[r];if(!n&&t)!1===n?e.insertBefore(c(t),i):void 0===n&&e.appendChild(c(t));else if(!t&&n)e.removeChild(i);else if(t&&(m(i,t,n),p(e,i,t,n),t.children||n.children))for(var o=s(t.children,n.children),d=s(n.children,t.children),u=0;u<h(o,d);u++)v(i,o[u],d[u],u)},s=function(e,t){for(var n=[],r=0;r<e.length;r++)!1===e[r]&&!1===t[r]||n.push(e[r]);return n},h=function(e,t){var n=e.length,r=t.length;return n>=r?n:r},p=function(e,t,n,r){for(var i=0,o=Object.entries(n);i<o.length;i+=1){var d=o[i],u=d[0],a=d[1],f=r[u];"element"===u||"text"===u?a!==f&&e.replaceChild(c(n),t):["children","events","element","text"].includes(u)||f&&a===f||t.setAttribute(name,value)}},m=function(e,t,n){for(var r=0,i=Object.entries(n);r<i.length;r+=1){var o=i[r];t[o[0]]||e.removeAttribute(o[1])}};return{component:function(e){void 0===e&&(e={});var t=e.methods;void 0===t&&(t=function(){});var n=e.render;return void 0===n&&(n=function(){}),function(e){void 0===e&&(e={});var r=e.props;return void 0===r&&(r={}),function(e){return n({getState:function(){return f(e)},setState:l,props:r,methods:t({getState:function(){return f()},setState:l})})}}},render:function(t,i,d){void 0===d&&(d={});var u=document.getElementById(i);n(d),r(u,t);var a=o(t(),e),f=c(a);u.appendChild(f)}}});
+!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=function(t){return e=Object.assign({},e,t)},r=function(e,n){window.addEventListener("__LITERAL_UPDATE__",function(){var r=t.pop();i(e,n,{oldState:r.oldState,newState:r.newState})})},i=function(e,t,n){var r=d(t(),n.oldState),i=d(t(),n.newState);return s(e,i,r)},o=function(e,t){t=void 0===t?[]:t;for(var n=0;n<e.length;n++)Array.isArray(e[n])?o(e[n],t):t.push(e[n]);return t},d=function(e,t){if((e="function"==typeof e?e(t):e).children)for(var n=0;n<e.children.length;n++)e.children[n]=d(e.children[n],t);return e},c=function(e){var t=new MutationObserver(function(e){for(var t=0;t<e.length;t++)"childList"===e[t].type&&(n("mounted",e[t].addedNodes),n("unmounted",e[t].removedNodes))}),n=function(e,t){for(var n=0;n<t.length;n++){var r=new CustomEvent(e);t[n].dispatchEvent(r)}};t.observe(e,{childList:!0})},u=function(e){if("object"!=typeof e)return document.createTextNode(e);for(var t=document.createElement(e.element),n=0,r=Object.entries(e);n<r.length;n+=1){var i=r[n],o=i[0],d=i[1];if("text"===o&&a(d,t),"events"===o&&f(d,t),["children","element","text","events"].includes(o)||t.setAttribute(o,d),"children"===o)for(var c=0;c<d.length;c++)t.appendChild(u(d[c]))}return t},a=function(e,t){var n=document.createTextNode(e);t.appendChild(n)},f=function(e,t){if(Array.isArray(e))for(var n=0;n<e.length;n++)["mounted","unmounted"].includes(e[n].type)&&c(newNode),t.addEventListener(e[n].type,e[n].action);else["mounted","unmounted"].includes(e.type)&&c(newNode),t.addEventListener(e.type,e.action)},l=function(t){return void 0===t&&(t=e),Object.assign({},t)},v=function(n){var r=l(),i={oldState:r,nextState:Object.assign({},r,n)};e=i.nextState,t.push(i);var o=new Event("__LITERAL_UPDATE__");return window.dispatchEvent(o)},s=function(e,t,n,r){if(void 0===r&&(r=0),e){var i=e.childNodes[r];if(!n&&t)!1===n?e.insertBefore(u(t),i):void 0===n?e.appendChild(u(t)):0===n&&e.replaceChild(u(t),i);else if(!t&&n)e.removeChild(i);else if(t&&(m(i,t,n),p(e,i,t,n),t.children||n.children))for(var o=0;o<h(t.children,n.children);o++)s(i,t.children[o],n.children[o],o)}},h=function(e,t){var n=e.length,r=t.length;return n>=r?n:r},p=function(e,t,n,r){if(("object"!=typeof n||"object"!=typeof r)&&n!==r)return e.replaceChild(u(n),t);for(var i=0,o=Object.entries(n);i<o.length;i+=1){var d=o[i],c=d[0],a=d[1],f=r[c];if("element"===c||"text"===c){if(a!==f)return e.replaceChild(u(n),t)}else if(!(["children","events","element","text"].includes(c)||f&&a===f))return t.setAttribute(name,value)}},m=function(e,t,n){for(var r=0,i=Object.entries(n);r<i.length;r+=1){var o=i[r];t[o[0]]||e.removeAttribute(o[1])}};return{component:function(e){void 0===e&&(e={});var t=e.methods;void 0===t&&(t=function(){});var n=e.render;return void 0===n&&(n=function(){}),function(e){void 0===e&&(e={});var r=e.props;return void 0===r&&(r={}),function(e){return n({getState:function(){return l(e)},setState:v,props:r,methods:t({getState:function(){return l()},setState:v})})}}},render:function(t,i,o){void 0===o&&(o={});var c=document.getElementById(i);n(o),r(c,t);var a=d(t(),e),f=u(a);c.appendChild(f)},h:function(e,t){for(var n=[],r=arguments.length-2;r-- >0;)n[r]=arguments[r+2];return"function"==typeof e?e:Object.assign({},{element:e},t,{children:o(n,[])})}}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "literaljs",
-  "version": "2.1.1",
-  "description": "~1kb gzip JavaScript library for building user interfaces.",
+  "version": "2.2.0",
+  "description": "~1kb JavaScript library for building user interfaces.",
   "main": "build/index.js",
@@ -6,0 +6,0 @@ "module": "build/index.m.js",

README.md

@@ -5,22 +5,42 @@ # LiteralJS
 
+### Documentation Index
+- [Features](#features)
+- [Getting Started](#getting-started)
+- [Install LiteralJS](#install)
+- [How to use JSX in LiteralJS?](#using-jsx)
+- [JSX Markup Syntax](#jsx-markup-syntax)
+- [Object Markup Syntax](#object-markup-syntax)
+- [Lifecycle Events](#lifecycle-events)
+
+#### API Functions
+- [component](#component)
+  - [props](#component-props)
+  - [methods](#component-methods)
+  - [render](#component-render)
+    - [getState](#getstate)
+    - [setState](#setstate)
+    - [props](#props)
+    - [methods](#methods)
+- [render](#render)
+- [h](#h)
+
+
 ```js
 $ microbundle
 Build output to build:
-      1.19 kB: index.js
-      1.19 kB: index.m.js
-      1.26 kB: index.umd.js
+      1.29 kB: index.js
+      1.32 kB: index.m.js
+      1.35 kB: index.umd.js
 ```
-### Features and stuff
+### [Features and stuff](#features)
 
 - **Small**: Only around 1kb in size.
-- **Virtual DOM**: Diffing occurs on state update for more efficient DOM updates. Current and previous AST are diffed against each other.
+- **Fast**: Current and previous vDOM are diffed against each other for performant updates and rendering.
+- **Virtual DOM**: Diffing occurs on state 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` and `unmounted` lifecycle functions using built-in JavaScript `MutationObservers`.
-- **One Global Store**: One source of truth; State management libraries are less of a need.
+- **One Global Store**: One source of truth which makes other state management libraries less of a need.
 
-**API Function Index**
-- [component](#component)
-- [render](#render)
+## [Getting Started](#getting-started)
 
-## Getting Started
-
 The easiest way of getting started is by cloning the LiteralJS starter application located here:
@@ -41,3 +61,3 @@
 
-#### Install
+#### [Install](#install)
 ```
@@ -56,9 +76,63 @@ $ npm install literaljs
 // OR
-import { component, render } from 'literaljs';
+import { component, render, h } from 'literaljs';
 ```
-### ES6 Example
+### ES6 Examples
+
+You can use 3 types of markup in the render!
+
+#### JSX
+
+- [How to use JSX in LiteralJS?](#using-jsx)
+
+```jsx
+const Foo = component({
+  render: ({ getState, setState }) => (
+    <div class='container'>
+      This is the Count: {getState().count}
+      <button
+        events={{
+          type: 'click',
+          action: () => {
+            var state = getState();
+            setState({ count: state.count + 1 });
+          }
+        }}>
+        Click Me!
+      </button>
+    </div>
+  )
+});
+
+render(foo, 'app', { count: 0 });
+```
+
+#### Hyper Script
+
 ```js
-import { component, render } from 'literaljs';
+const Foo = component({
+  render: ({ getState, setState }) =>
+    h('div', {
+        class: 'container',
+        text: `This is the Count: ${getState().count}`
+      }, [
+        h('button', {
+          events: {
+            type: 'click',
+            action: () => {
+              var state = getState();
+              setState({ count: state.count + 1 });
+            }
+          }
+        })
+      ]
+    );
+});
 
-const foo = component({
+render(foo, 'app', { count: 0 });
+```
+
+#### Objects
+
+```js
+const Foo = component({
   render: ({ getState, setState }) => ({
@@ -98,3 +172,3 @@ element: 'div',
 
-### component `props`
+### [component `props`](#component-props)
 
@@ -124,3 +198,3 @@ The `props` of a `component` is an object which can be passed with anything that is normally valid in a JavaScript Object. This can include any data or functions.
 
-### component `methods`
+### [component `methods`](#component-methods)
 
@@ -131,3 +205,3 @@ The `methods` key of a `component` will accept a function which returns an object of other functions. Within the `methods`, you also have access to a `component`s `getState` and `setState` functions which can be used accordingly. You also, have access to created methods directly within the `render` function.
 
-```js
+```jsx
 component({
@@ -140,23 +214,27 @@ methods: ({ getState, setState }) => ({
   }),
-  render: ({ getState, setState, methods: { increase }}) => ({
-    element: 'button',
-    text: `Current Count: ${getState().count}`,
-    events: {
-      type: 'click',
-      action: () => increase()
-    }
-  })
+  render: ({ getState, setState, methods: { increase }}) => (
+      <button
+        events={{
+          type: 'click',
+          action: () => increase()
+        }}
+      >
+        Current Count: {getState().count}
+      </button>
+    )
 });
 ```
 
-### component `render`
+### [component `render`](#component-render)
 
 The `render` key of a `component` accepts a function that returns an JavaScript Object.
 
-- [Markup Syntax](#markup-syntax)
 - [Properties](#properties)
 
-#### Markup Syntax
-Markup is currently written with Objects with the following specified keys:
+#### [JSX Markup Syntax](#jsx-markup-syntax)
 
+
+#### [Object Markup Syntax](#object-markup-syntax)
+Object Markup is currently written with Objects with the following specified keys or strings:
+
 - [`element`](#element-key)*
@@ -203,2 +281,15 @@ - [`text`](#text-key)
 
+You can also include regular strings as children to create text nodes.
+
+Example:
+```js
+component({
+  render: () => ({
+    element: 'div',
+    children: ['Hello World!']
+  })
+});
+// Outputs: <div>Hello World!</div>
+```
+
 #### class Key
@@ -234,5 +325,5 @@
 
-#### Children Key
+#### children Key
 
-The `children` key in the `render` function markup is the `childNodes` of a given `element` or DOM Node. This key only accepts an Array of Objects. Each Object in this Array can be another Object that represents a new DOM Node.
+The `children` key in the `render` function markup represet the `childNodes` of a given `element` or DOM Node. This key only accepts an Array of Objects or Strings. Each Object or in this Array can be another Object that represents a new DOM Node. You can also use Strings to represet Text nodes.
 
@@ -245,4 +336,6 @@ Example:
     children: [
+      'Count: ',
       {
         element: 'span'
+        text: '0'
       }
@@ -252,3 +345,3 @@ ]
 });
-// Outputs: <div id="2"></div>
+// Outputs: <div>Count: <span>0</span></div>
 ```
@@ -293,3 +386,3 @@
 
-#### Lifecycle Events
+#### [Lifecycle Events](#lifecycle-events)
 
@@ -363,2 +456,26 @@ Besides the common event handlers like `click`, there are two lifecycle events that `LiteralJS` includes that can be attached to any DOM node.
 render(component, 'app');
-```
+```
+
+## h
+
+The `Literal.h` function will generate specific LiteralJS Object Syntax.
+
+
+
+### [Using JSX](#using-jsx)
+
+If you want to use JSX, you can import the `Literal.h` function and install the [JSX transform plugin](https://babeljs.io/docs/plugins/transform-react-jsx) and add the pragma option to your `.babelrc` file.
+
+In `.babelrc`:
+```
+{
+  "plugins": [["transform-react-jsx", { "pragma": "h" }]]
+}
+```
+
+Some text editors and linters might also require the following at the top of the file to recognize that the file is using JSX:
+
+```js
+/** @jsx h */
+```
+

No alert changes

Improved metrics

Total package byte prevSize

141191

increased by4.3%

Lines of code

43

increased by10.26%

Number of lines in readme file

469

increased by33.62%

No dependency changes