10 lines
8.5 KiB
JavaScript
10 lines
8.5 KiB
JavaScript
/**
|
|
* Litedom v0.11.1
|
|
* Copyright 2019 Mardix mcx2082@gmail.com
|
|
* License: MIT
|
|
* https://github.com/mardix/litedom
|
|
* Build date: 7/3/2019, 5:57:30 PM
|
|
*
|
|
*/
|
|
const t=t=>t.replace(/[-_\s+]([a-z])/g,t=>t[1].toUpperCase()),e=(t,e,n)=>{let r=t;const o=e.split(".");for(;o.length;){const t=o.shift();r[t]=o.length?r[t]?r[t]:{}:n,r=r[t]}},n=(t,e)=>e.split(".").reduce((t,e)=>t&&t[e],t),r=t=>"function"==typeof t,o=(t,e)=>t&&r(t[e]),i=t=>"string"==typeof t?document.querySelector(t):t,s=t=>window.getComputedStyle(t),c=t=>"hidden"===s(t).visibility,l=t=>"none"===s(t).display,a=t=>(new DOMParser).parseFromString(t,"text/html").body,u=[["<","<"],[">",">"],["&","&"]],d=(e,n=!1)=>Object.freeze(Array.from(e.attributes).map(e=>({[n?t(e.name):e.name]:e.value})).reduce((t,e)=>({...t,...e}),{})),f=(t,e)=>{let n=!1,r=!1;const o=new WeakMap,i=()=>{n?r||(r=!0):e()},s={get(t,e,n){if("#"===e)return t;const r=Reflect.get(t,e,n);if((t=>null===t||!["function","object"].includes(typeof t))(r)||"constructor"===e)return r;const i=((t,e)=>{let n=o.get(t);if(n)return n;n=new Map,o.set(t,n);let r=n.get(e);return r||(r=Reflect.getOwnPropertyDescriptor(t,e),n.set(e,r)),r})(t,e);if(i&&!i.configurable){if(i.set&&!i.get)return;if(!1===i.writable)return r}return new Proxy(r,s)},set(t,e,n,r){n&&void 0!==n["#"]&&(n=n["#"]);const o=Reflect.get(t,e,r),s=Reflect.set(t,e,n);return o!==n&&i(),s},defineProperty(t,e,n){const r=Reflect.defineProperty(t,e,n);return i(),r},deleteProperty(t,e){const n=Reflect.deleteProperty(t,e);return i(),n},apply(t,o,i){if(!n){n=!0;const s=Reflect.apply(t,o,i);return r&&e(),n=r=!1,s}return Reflect.apply(t,o,i)}};return new Proxy(t,s)};const p=t=>(function t(e){return null===e||"object"!=typeof e?e:(Object.keys(e).forEach(function(n){const r=e[n];null!==r&&"object"==typeof r&&t(r)}),Object.freeze(e))})(function(t){if(null===t||"object"!=typeof t)return t;var e=t.constructor();for(const n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=p(t[n]));return e}(t)),h=[];for(const t in document){const e=null===document[t]||r(document[t]);t.startsWith("on")&&e&&h.push(t.substring(2))}const m="ld--elist",b=t=>`ld-on-${t}`;const y=(t,e)=>Array.from(t.childNodes).filter(t=>e(t)).map(t=>({[e(t)]:t})).reduce((t,e)=>({...t,...e}),{}),g=t=>(t=>t instanceof HTMLElement)(t)&&t.hasAttribute("ref-key")?t.getAttribute("ref-key"):t.id;const $={$key:function(t,e,n){t.setAttribute("ref-key",e),w(t,n)},$class:function(t,e,n){const r=e.split(";").map(t=>t.split(":",2).map(t=>t.trim())).map(t=>`\${${t[1]} ? '${t[0]}': ''}`).join(" "),o=t.getAttribute("class")||""+` ${r}`;t.setAttribute("class",o),w(t,n)},$style:function(t,e,n){const r=t.getAttribute("style")||"",o=`\${function() { return this.__$styleMap(${e});}.call(this)}`;t.setAttribute("style",(r?r+"; ":"")+o),w(t,n)},$for:function(t,e,n){const r=/(.*)\s+(in)\s+(.*)$/.exec(e);if(4===r.length){const e=r[1].replace("(","").replace(")",""),o=r[3];j(t,`\${${o}.map(function(${e}) { return \``,"`}.bind(this)).join('')}"),w(t,n)}},$if:function(t,e,n){w(t,n),N(t,`\${${e} ? `);const r=t.nextElementSibling;r&&v(r,"else")?(j(t,"`","`"),w(r,"else"),j(r,":`","`}")):j(t,"`","`:``}")}},A=t=>`:${t}`,v=(t,e)=>t.hasAttribute(A(e)),M=(t,e)=>t.getAttribute(A(e)),w=(t,e)=>t.removeAttribute(A(e)),x=(t,e)=>t.querySelectorAll(`[\\${A(e)}]`),N=(t,e)=>t.insertAdjacentText("beforebegin",e),j=(t,e,n)=>{N(t,e),((t,e)=>t.insertAdjacentText("afterend",e))(t,n)};const k=["data","el","shadowDOM","template","created","updated","removed","$store","prop","tagName"],E=t=>Object.keys(t).filter(t=>!k.includes(t)).filter(e=>o(t,e)).reduce((e,n)=>({...e,[n]:t[n]}),{}),T=t=>Object.keys(t).filter(e=>!o(t,e)).reduce((e,n)=>({...e,[n]:t[n]}),{}),O=t=>Object.keys(t).filter(e=>o(t,e)).map(e=>((t,e)=>n=>n[t]=e({...n}))(e,t[e])),_=t=>e=>(e.$store=t.getState(),t.subscribe(n=>e.$store={...t.getState()})),C=(t,e,n)=>{Object.keys(e).filter(t=>!t.startsWith("_")).map(r=>t[r]=e[r].bind(n))},L=t=>{const e=a((t=>t.replace(/\$?\{([^\;\{]+)\}/g,(t,e)=>`\${${e}}`))(t));!function(t,e={}){const n={...e,...$};for(const e in n){const r=e.replace("$","");for(const o of x(t,r))if(v(o,r)){const t=M(o,r);n[e](o,t,r)}}}(e),function(t){for(const e of t.querySelectorAll("[\\@call], [\\@bind]")){let t=e.getAttribute("@call");const n=e.hasAttribute("@bind");e.removeAttribute("@call"),n&&(e.setAttribute("ld--bind",e.getAttribute("@bind")),e.removeAttribute("@bind"),t="__$bindInput");let r=["click"];e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?r=["input","paste"]:e instanceof HTMLSelectElement?r=["change"]:e instanceof HTMLFormElement?r=["submit"]:e instanceof HTMLAnchorElement&&e.setAttribute("href","javascript:void(0);");let o=(e.getAttribute(m)||"").split(",").filter(t=>t);o=o.concat(r),e.setAttribute(m,o.join(","));for(const n of r)e.setAttribute(b(n),t)}for(const e of h)for(const n of t.querySelectorAll(`[\\@${e}]`)){const t=(n.getAttribute(m)||"").split(",").filter(t=>t);t.push(e),n.setAttribute(m,t.join(",")),n.setAttribute(b(e),n.getAttribute(`@${e}`)),n.removeAttribute(`@${e}`),n instanceof HTMLAnchorElement&&n.setAttribute("href","javascript:void(0);")}}(e);const n=(t=>u.reduce((t,e)=>t.replace(new RegExp(e[0],"g"),e[1]),t))(e.innerHTML),r=(t=>e=>new Function(`return \`${t}\``).call(e))(n);return{html:n,render:(t,e)=>{const n=a(r(e));return!t.isEqualNode(n)&&function t(e,n,r={}){if(r={key:t=>g(t),...r},"string"==typeof n){const t=n;(n=document.createElement(e.nodeName)).innerHTML=t}const o=y(e,r.key);let i;for(i=0;n.firstChild;i++){const s=n.removeChild(n.firstChild);if(i>=e.childNodes.length){e.appendChild(s);continue}let c=e.childNodes[i];const l=r.key(s);if(r.key(c)||l){const t=l&&l in o?o[l]:s;t!==c&&(c=e.insertBefore(t,c))}if(c.nodeType!==s.nodeType||c.tagName!==s.tagName)e.replaceChild(s,c);else if([Node.TEXT_NODE,Node.COMMENT_NODE].indexOf(c.nodeType)>=0)c.textContent!==s.textContent&&(c.textContent=s.textContent);else if(c!==s){const e=d(c),n=d(s);for(const t in e)t in n||c.removeAttribute(t);for(const t in n)t in e&&e[t]===n[t]||c.setAttribute(t,n[t]);t(c,s)}}for(;e.childNodes.length>i;)e.removeChild(e.lastChild);return!0}(t,n)}}};function S(t){const r=t.target,o=r.getAttribute("ld--bind");if("checkbox"===r.type){const t=n(this.data,o)||[];e(this.data,o,r.checked?t.concat(r.value):t.filter(t=>t!=r.value))}else r.options&&r.multiple?e(this.data,o,[].reduce.call(r,(t,e)=>e.selected?t.concat(e.value):t,[])):e(this.data,o,r.value)}const H={__$styleMap:t=>Object.keys(t).map(e=>`${(t=>t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase())(e)}: ${t[e]};`).join(" ")};function D(t={}){const e={shadowDOM:!1,tagName:null,data:{},template:null,$store:{getState:()=>void 0,subscribe:()=>()=>{}},created(){},updated(){},removed(){},...t},n=_(e.$store),r=L(e.template),o=E(e),i=T(e.data),s=O(e.data),c=t=>s.forEach(e=>e(t));window.customElements.define(e.tagName.toLowerCase(),class extends HTMLElement{constructor(){super(),this.$root=e.shadowDOM?this.attachShadow({mode:"open"}):this}connectedCallback(){this.$eventHooks={updated:[],removed:[]},this._state={...this._state,...i,prop:d(this,!0)};const t=f(this._state,()=>{c(this._state),r.render(this.$root,{...this._state,...H})&&e.updated.call(this.context)});this.disconnectStore=n(t),this.$root.innerHTML=r.html,this.context={...o,data:t,el:this.$root,prop:this._state.prop,$store:e.$store},function(t,e){function n(t){Array.from(t.querySelectorAll(`[${m}]`)).map(t=>{(t.getAttribute(m)||"").split(",").filter(t=>t).map(n=>{t[`on${n}`]=(r=>{r.preventDefault();const o=t.getAttribute(b(n));e[o].call(e,r)})})})}const r=new MutationObserver(t=>{[...t].filter(t=>t.addedNodes.length>0).map(t=>t.target).map(t=>n(t))});r.observe(t,{attributes:!0,childList:!0,subtree:!0}),n(t)}(this.$root,{...this.context,__$bindInput:S}),C(this,o,this.context),c(this._state),r.render(this.$root,{...this._state,...H}),e.created.call(this.context)}disconnectedCallback(){e.removed.call(this.context),this.disconnectStore(),this.$eventHooks=[]}get data(){return p(this._state)}})}const P=t=>new Error(`Litedom Error: ${t}`),R=()=>`litedom-${((t=7)=>Math.random().toString(36).substr(2,t).toLowerCase())()}`;function q(t){const e={el:null,refId:null,template:null,tagName:null,shadowDOM:!1,...t};let n=null;const r=!!e.tagName;if(e.tagName=e.tagName||R(),e.el&&(n=i(e.el),c(n)&&(n.style.visibility="visible"),l(n)&&(n.style.display=""),e.template||(e.template=n.innerHTML),n.innerHTML="",!r)){const t=document.createElement(e.tagName);e.refId&&t.setAttribute("ref-id",e.refId),n.parentNode.replaceChild(t,n)}if(!e.template)throw P("missing 'template' option or 'el' are not valid elements");D(e)}export default t=>{Array.isArray(t)?t.map(t=>q(t)):q(t)};
|