From 4727f6d44d496d0e853aca579f2aa9ec2b9de584 Mon Sep 17 00:00:00 2001 From: adamghill Date: Thu, 16 Feb 2023 08:39:47 -0500 Subject: [PATCH] Bump package. --- CHANGELOG.md | 3 ++ dist/dlite.es.js | 4 +-- package.json | 2 +- site/.buildinfo | 2 +- site/_static/documentation_options.js | 2 +- site/components/binding/index.html | 6 ++-- site/components/configuration/index.html | 6 ++-- site/components/directives/index.html | 6 ++-- site/components/events/index.html | 6 ++-- site/components/index.html | 10 +++---- site/components/store/index.html | 6 ++-- site/components/template/index.html | 6 ++-- site/examples/index.html | 6 ++-- site/faq/index.html | 6 ++-- site/genindex/index.html | 6 ++-- site/index.html | 6 ++-- site/installation/index.html | 24 ++++++++++------ site/objects.inv | Bin 2005 -> 2005 bytes site/search/index.html | 6 ++-- site/searchindex.js | 2 +- src/emerj.js | 35 +++++++++++++++-------- 21 files changed, 86 insertions(+), 64 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 60fb949..c5ef9c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +# 0.16.2 +- Remove `visibility: hide` on first component render + # 0.16.1 - Include `link` tags with a `rel` of `stylesheet` for `Shadow DOM` scoped css diff --git a/dist/dlite.es.js b/dist/dlite.es.js index 4e6c4ef..e4a782c 100644 --- a/dist/dlite.es.js +++ b/dist/dlite.es.js @@ -1,2 +1,2 @@ -/* dlite v0.16.1 */ -const t=(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]}},e=(t,e)=>e.split(".").reduce(((t,e)=>t&&t[e]),t),n=t=>"function"==typeof t,r=(t,e)=>t&&n(t[e]),o=t=>{const e=(new DOMParser).parseFromString(t,"text/html");return{head:e.head,body:e.body}},i=[["<","<"],[">",">"],["&","&"]],s=(t,e=!1)=>Object.freeze(Array.from(t.attributes).map((t=>{return{[e?(n=t.name,n.replace(/[-_\s+]([a-z])/g,(t=>t[1].toUpperCase()))):t.name]:t.value};var n})).reduce(((t,e)=>({...t,...e})),{})),l=(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)};function c(t){return null===t||"object"!=typeof t?t:(Object.keys(t).forEach((function(e){const n=t[e];null!==n&&"object"==typeof n&&c(n)})),Object.freeze(t))}const a=t=>c(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]=a(t[n]));return e}(t)),u=[];for(const t in document){const e=null===document[t]||n(document[t]);t.startsWith("on")&&e&&u.push(t.substring(2))}const d="dl--elist",f=t=>`dl--on-${t}`;const h=(t,e)=>Array.from(t.childNodes).filter((t=>e(t))).map((t=>({[e(t)]:t}))).reduce(((t,e)=>({...t,...e})),{}),p=t=>t instanceof HTMLElement&&t.hasAttribute("ref-key")?t.getAttribute("ref-key"):t.id;function b(t,e,n={}){if(n={key:t=>p(t),...n},"string"==typeof e){const n=e;(e=document.createElement(t.nodeName)).innerHTML=n}const r=h(t,n.key);let o;for(o=0;e.firstChild;o++){const i=e.removeChild(e.firstChild);if(o>=t.childNodes.length){t.appendChild(i);continue}let l=t.childNodes[o];const c=n.key(i);if(n.key(l)||c){const e=c&&c in r?r[c]:i;e!==l&&(l=t.insertBefore(e,l))}if(l.nodeType!==i.nodeType||l.tagName!==i.tagName)t.replaceChild(i,l);else if([Node.TEXT_NODE,Node.COMMENT_NODE].indexOf(l.nodeType)>=0)l.textContent!==i.textContent&&(l.textContent=i.textContent);else if(l!==i){const t=s(l),e=s(i);for(const n in t)n in e||l.removeAttribute(n);for(const n in e)n in t&&t[n]===e[n]||l.setAttribute(n,e[n]);b(l,i)}}for(;t.childNodes.length>o;)t.removeChild(t.lastChild);return!0}const m={$key:function(t,e,n){t.setAttribute("ref-key",e),A(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),A(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),A(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];M(t,`\${${o}.map(function(${e}) { return \``,"`}.bind(this)).join('')}"),A(t,n)}},$if:function(t,e,n){A(t,n),w(t,`\${${e} ? `);const r=t.nextElementSibling;r&&g(r,"else")?(M(t,"`","`"),A(r,"else"),M(r,":`","`}")):M(t,"`","`:``}")},$text:function(t,e,n){t.textContent=e,A(t,n)}},y=t=>`:${t}`,g=(t,e)=>t.hasAttribute(y(e)),$=(t,e)=>t.getAttribute(y(e)),A=(t,e)=>t.removeAttribute(y(e)),v=(t,e)=>t.querySelectorAll(`[\\${y(e)}]`),w=(t,e)=>t.insertAdjacentText("beforebegin",e),M=(t,e,n)=>{w(t,e),((t,e)=>{t.insertAdjacentText("afterend",e)})(t,n)};const k=["data","el","shadowDOM","template","created","updated","removed","$store","prop","tagName"],x=t=>Object.keys(t).filter((t=>!k.includes(t))).filter((t=>!t.startsWith("$"))).filter((e=>r(t,e))).reduce(((e,n)=>({...e,[n]:t[n]})),{}),j=t=>Object.keys(t).filter((e=>!r(t,e))).reduce(((e,n)=>({...e,[n]:t[n]})),{}),N=t=>Object.keys(t).filter((e=>r(t,e))).map((e=>{return n=e,r=t[e],t=>t[n]=r({...t});var n,r})),E=t=>Object.keys(t).filter((t=>t.startsWith("$"))).filter((t=>!k.includes(t))).reduce(((e,n)=>({...e,[n]:t[n]})),{}),T=t=>e=>(e.$store=t.getState(),t.subscribe((n=>e.$store={...t.getState()}))),O=(t,e,n)=>{Object.keys(e).filter((t=>!t.startsWith("_"))).map((r=>t[r]=e[r].bind(n)))},_=t=>{const{head:e,body:n}=o(t);!function(t,e={}){const n={...e,...m};for(const e in n){const r=e.replace("$","");for(const o of v(t,r))if(g(o,r)){const t=$(o,r);n[e](o,t,r)}}}(n),function(t){for(const e of t.querySelectorAll("[\\@call], [\\@bind]")){let t=e.getAttribute("@call");e.removeAttribute("@call"),e.hasAttribute("@bind")&&(e.setAttribute("dl--bind",e.getAttribute("@bind")),e.removeAttribute("@bind"),t="__$bindInput");let n=["click"];e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?n=["input","paste"]:e instanceof HTMLSelectElement?n=["change"]:e instanceof HTMLFormElement?n=["submit"]:e instanceof HTMLAnchorElement&&e.setAttribute("href","javascript:void(0);");let r=(e.getAttribute(d)||"").split(",").filter((t=>t));r=r.concat(n),e.setAttribute(d,r.join(","));for(const r of n)e.setAttribute(f(r),t)}for(const e of u)for(const n of t.querySelectorAll(`[\\@${e}]`)){const t=(n.getAttribute(d)||"").split(",").filter((t=>t));t.push(e),n.setAttribute(d,t.join(",")),n.setAttribute(f(e),n.getAttribute(`@${e}`)),n.removeAttribute(`@${e}`),n instanceof HTMLAnchorElement&&n.setAttribute("href","javascript:void(0);")}}(n);let r=(t=>t.replace(/\$?\{([^\;\{]+)\}/g,((t,e)=>`\${${e}}`)))((s=n.innerHTML,i.reduce(((t,e)=>t.replace(new RegExp(e[0],"g"),e[1])),s)));var s;e.querySelectorAll('style, link[rel="stylesheet"]').forEach((t=>{r+=t.outerHTML}));const l=(c=r,t=>new Function(`return \`${c}\``).call(t));var c;return{html:r,render:(t,e)=>{const{head:n,body:r}=o(l(e));return r.append(...n.querySelectorAll("style, link")),!t.isEqualNode(r)&&b(t,r)}}};function C(n){const r=n.target,o=r.getAttribute("ld--bind");if("checkbox"===r.type){const n=e(this.data,o)||[];t(this.data,o,r.checked?n.concat(r.value):n.filter((t=>t!=r.value)))}else r.options&&r.multiple?t(this.data,o,[].reduce.call(r,((t,e)=>e.selected?t.concat(e.value):t),[])):t(this.data,o,r.value)}const L={__$styleMap:t=>Object.keys(t).map((e=>{return`${n=e,n.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}: ${t[e]};`;var n})).join(" ")};function S(t={}){const n={shadowDOM:!0,tagName:null,data:{},template:null,$store:{getState:()=>{},subscribe:()=>()=>{}},created(){},updated(){},removed(){},...t},r=T(n.$store),o=_(n.template),i=x(n),c=j(n.data),u=N(n.data),h=E(n),p=t=>u.forEach((e=>e(t)));let b=null;return window.customElements.define(n.tagName.toLowerCase(),class extends HTMLElement{constructor(){super(),this.style.visibility=this.style.visibility?this.style.visibility:"hidden",this.$root=n.shadowDOM?this.attachShadow({mode:"open"}):this,b=this}connectedCallback(){this._state={...this._state,...c,prop:s(this,!0)};const t=l(this._state,(()=>{p(this._state),o.render(this.$root,{...this._state,...L})&&n.updated.call(this.context),"hidden"===this.style.visibility&&this.style.removeProperty("visibility")}));this.disconnectStore=r(t),this.$root.innerHTML=o.html,this.context={...i,...h,data:t,el:this.$root,prop:this._state.prop,$store:n.$store},function(t,n){function r(t){Array.from(t.querySelectorAll(`[${d}]`)).map((t=>{(t.getAttribute(d)||"").split(",").filter((t=>t)).map((e=>{t[`on${e}`]=r=>{r.preventDefault();const o=t.getAttribute(f(e));n[o].call(n,r)}}))}))}Array.from(t.querySelectorAll("[dl--bind]")).map((t=>{const r=e(n.data,t.getAttribute("dl--bind"));try{"INPUT"===t.tagName&&["radio","checkbox"].includes(t.type)?r.includes(t.value)&&(t.checked=!0):t.value=r}catch(t){}}));const o=new MutationObserver((t=>{[...t].filter((t=>t.addedNodes.length>0)).map((t=>t.target)).map((t=>r(t)))}));o.observe(t,{attributes:!0,childList:!0,subtree:!0}),r(t)}(this.$root,{...this.context,__$bindInput:C}),O(this,i,this.context),p(this._state),o.render(this.$root,{...this._state,...L}),n.created.call(this.context)}disconnectedCallback(){n.removed.call(this.context),this.disconnectStore()}get data(){return a(this._state)}}),b}async function H(t){return await fetch(t).then((t=>{if(t.status>=400)throw new Error(`${t.url} (${t.status})`);return t})).then((t=>(t.headers.get("content-type")||"").includes("json")?t.json():t.text()))}function P(t,e={},n=""){const r=document.createElement(t);r.innerHTML=n;for(const[t,n]of Object.entries(e))r.setAttribute(t,n);return r}var q=(t,e={})=>(Array.isArray(t)||(t=[t]),t.map(((t,n)=>{try{return function(t){const e={el:null,template:null,tagName:null,shadowDOM:!0,debug:!1,...t},n=!e.tagName;if(e.tagName=e.tagName||`dlite-${Math.random().toString(36).substring(2,9).toLowerCase()}`,e.el){if("string"==typeof e.el){const t=document.querySelector(e.el);if(!t)throw new Error(`'${e.el}' could not be found.`);e.el=t}if(e.template||(e.template=e.el.innerHTML),e.el.innerHTML="",n){const t=P(e.tagName,s(e.el));for(const[n,r]of Object.entries(s(e.el)))t.setAttribute(n,r);e.el.parentNode.replaceChild(t,e.el)}}else if(!e.el&&n)throw new Error("Missing either 'el' or 'tagName' setting.");if(!e.template)throw new Error("Missing 'template' setting.");return S(e)}({...e,...t})}catch(r){if(!e.debug&&!t.debug)throw r;{const t=P("div",{style:"background-color: red; color: white; padding: 10px;"},`\n

#${n+1}

\n${r}\n
\n Stacktrace\n ${r.stack.replaceAll("\n","
")}\n
`);document.body.prepend(t),console.error(r)}}})));export{q as default,H as fetcher}; +/* dlite v0.16.2 */ +const t=(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]}},e=(t,e)=>e.split(".").reduce(((t,e)=>t&&t[e]),t),n=t=>"function"==typeof t,r=(t,e)=>t&&n(t[e]),o=t=>{const e=(new DOMParser).parseFromString(t,"text/html");return{head:e.head,body:e.body}},i=[["<","<"],[">",">"],["&","&"]],s=(t,e=!1)=>Object.freeze(Array.from(t.attributes).map((t=>{return{[e?(n=t.name,n.replace(/[-_\s+]([a-z])/g,(t=>t[1].toUpperCase()))):t.name]:t.value};var n})).reduce(((t,e)=>({...t,...e})),{})),l=(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)};function c(t){return null===t||"object"!=typeof t?t:(Object.keys(t).forEach((function(e){const n=t[e];null!==n&&"object"==typeof n&&c(n)})),Object.freeze(t))}const a=t=>c(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]=a(t[n]));return e}(t)),u=[];for(const t in document){const e=null===document[t]||n(document[t]);t.startsWith("on")&&e&&u.push(t.substring(2))}const d="dl--elist",f=t=>`dl--on-${t}`;const h=(t,e)=>Array.from(t.childNodes).filter((t=>e(t))).map((t=>({[e(t)]:t}))).reduce(((t,e)=>({...t,...e})),{}),p=t=>t instanceof HTMLElement&&t.hasAttribute("ref-key")?t.getAttribute("ref-key"):t.id;function b(t,e,n={}){if(n={key:t=>p(t),...n},"string"==typeof e){const n=e;(e=document.createElement(t.nodeName)).innerHTML=n}const r=h(t,n.key);let o;for(o=0;e.firstChild;o++){const i=e.removeChild(e.firstChild);if(o>=t.childNodes.length){t.appendChild(i);continue}let l=t.childNodes[o];const c=n.key(i);if(n.key(l)||c){const e=c&&c in r?r[c]:i;e!==l&&(l=t.insertBefore(e,l))}if(l.nodeType!==i.nodeType||l.tagName!==i.tagName)t.replaceChild(i,l);else if([Node.TEXT_NODE,Node.COMMENT_NODE].indexOf(l.nodeType)>=0)l.textContent!==i.textContent&&(l.textContent=i.textContent);else if(l!==i){const t=s(l),e=s(i);for(const n in t)n in e||l.removeAttribute(n);for(const n in e)n in t&&t[n]===e[n]||l.setAttribute(n,e[n]);b(l,i)}}for(;t.childNodes.length>o;)t.removeChild(t.lastChild);return!0}const m={$key:function(t,e,n){t.setAttribute("ref-key",e),A(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),A(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),A(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];M(t,`\${${o}.map(function(${e}) { return \``,"`}.bind(this)).join('')}"),A(t,n)}},$if:function(t,e,n){A(t,n),w(t,`\${${e} ? `);const r=t.nextElementSibling;r&&g(r,"else")?(M(t,"`","`"),A(r,"else"),M(r,":`","`}")):M(t,"`","`:``}")},$text:function(t,e,n){t.textContent=e,A(t,n)}},y=t=>`:${t}`,g=(t,e)=>t.hasAttribute(y(e)),$=(t,e)=>t.getAttribute(y(e)),A=(t,e)=>t.removeAttribute(y(e)),v=(t,e)=>t.querySelectorAll(`[\\${y(e)}]`),w=(t,e)=>t.insertAdjacentText("beforebegin",e),M=(t,e,n)=>{w(t,e),((t,e)=>{t.insertAdjacentText("afterend",e)})(t,n)};const k=["data","el","shadowDOM","template","created","updated","removed","$store","prop","tagName"],x=t=>Object.keys(t).filter((t=>!k.includes(t))).filter((t=>!t.startsWith("$"))).filter((e=>r(t,e))).reduce(((e,n)=>({...e,[n]:t[n]})),{}),j=t=>Object.keys(t).filter((e=>!r(t,e))).reduce(((e,n)=>({...e,[n]:t[n]})),{}),N=t=>Object.keys(t).filter((e=>r(t,e))).map((e=>{return n=e,r=t[e],t=>t[n]=r({...t});var n,r})),E=t=>Object.keys(t).filter((t=>t.startsWith("$"))).filter((t=>!k.includes(t))).reduce(((e,n)=>({...e,[n]:t[n]})),{}),T=t=>e=>(e.$store=t.getState(),t.subscribe((n=>e.$store={...t.getState()}))),O=(t,e,n)=>{Object.keys(e).filter((t=>!t.startsWith("_"))).map((r=>t[r]=e[r].bind(n)))},C=t=>{const{head:e,body:n}=o(t);!function(t,e={}){const n={...e,...m};for(const e in n){const r=e.replace("$","");for(const o of v(t,r))if(g(o,r)){const t=$(o,r);n[e](o,t,r)}}}(n),function(t){for(const e of t.querySelectorAll("[\\@call], [\\@bind]")){let t=e.getAttribute("@call");e.removeAttribute("@call"),e.hasAttribute("@bind")&&(e.setAttribute("dl--bind",e.getAttribute("@bind")),e.removeAttribute("@bind"),t="__$bindInput");let n=["click"];e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement?n=["input","paste"]:e instanceof HTMLSelectElement?n=["change"]:e instanceof HTMLFormElement?n=["submit"]:e instanceof HTMLAnchorElement&&e.setAttribute("href","javascript:void(0);");let r=(e.getAttribute(d)||"").split(",").filter((t=>t));r=r.concat(n),e.setAttribute(d,r.join(","));for(const r of n)e.setAttribute(f(r),t)}for(const e of u)for(const n of t.querySelectorAll(`[\\@${e}]`)){const t=(n.getAttribute(d)||"").split(",").filter((t=>t));t.push(e),n.setAttribute(d,t.join(",")),n.setAttribute(f(e),n.getAttribute(`@${e}`)),n.removeAttribute(`@${e}`),n instanceof HTMLAnchorElement&&n.setAttribute("href","javascript:void(0);")}}(n);let r=(t=>t.replace(/\$?\{([^\;\{]+)\}/g,((t,e)=>`\${${e}}`)))((s=n.innerHTML,i.reduce(((t,e)=>t.replace(new RegExp(e[0],"g"),e[1])),s)));var s;e.querySelectorAll('style, link[rel="stylesheet"]').forEach((t=>{r+=t.outerHTML}));const l=(c=r,t=>new Function(`return \`${c}\``).call(t));var c;return{html:r,render:(t,e)=>{const{head:n,body:r}=o(l(e));return r.append(...n.querySelectorAll("style, link")),!t.isEqualNode(r)&&b(t,r)}}};function L(n){const r=n.target,o=r.getAttribute("ld--bind");if("checkbox"===r.type){const n=e(this.data,o)||[];t(this.data,o,r.checked?n.concat(r.value):n.filter((t=>t!=r.value)))}else r.options&&r.multiple?t(this.data,o,[].reduce.call(r,((t,e)=>e.selected?t.concat(e.value):t),[])):t(this.data,o,r.value)}const S={__$styleMap:t=>Object.keys(t).map((e=>{return`${n=e,n.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}: ${t[e]};`;var n})).join(" ")};function _(t={}){const n={shadowDOM:!0,tagName:null,data:{},template:null,$store:{getState:()=>{},subscribe:()=>()=>{}},created(){},updated(){},removed(){},...t},r=T(n.$store),o=C(n.template),i=x(n),c=j(n.data),u=N(n.data),h=E(n);let p=null;return window.customElements.define(n.tagName.toLowerCase(),class extends HTMLElement{constructor(){super(),this.style.visibility=this.style.visibility?this.style.visibility:"hidden",this.$root=n.shadowDOM?this.attachShadow({mode:"open"}):this,p=this}render(t=!1){var e;e=this._state,u.forEach((t=>t(e))),o.render(this.$root,{...this._state,...S})&&!t&&n.updated.call(this.context),"hidden"===this.style.visibility&&this.style.removeProperty("visibility")}connectedCallback(){if(!this.isConnected)return;this._state={...this._state,...c,prop:s(this,!0)};const t=l(this._state,this.render.bind(this));this.disconnectStore=r(t),this.$root.innerHTML=o.html,this.context={...i,...h,data:t,el:this.$root,prop:this._state.prop,$store:n.$store},function(t,n){function r(t){Array.from(t.querySelectorAll(`[${d}]`)).map((t=>{(t.getAttribute(d)||"").split(",").filter((t=>t)).map((e=>{t[`on${e}`]=r=>{r.preventDefault();const o=t.getAttribute(f(e));n[o].call(n,r)}}))}))}Array.from(t.querySelectorAll("[dl--bind]")).map((t=>{const r=e(n.data,t.getAttribute("dl--bind"));try{"INPUT"===t.tagName&&["radio","checkbox"].includes(t.type)?r.includes(t.value)&&(t.checked=!0):t.value=r}catch(t){}}));const o=new MutationObserver((t=>{[...t].filter((t=>t.addedNodes.length>0)).map((t=>t.target)).map((t=>r(t)))}));o.observe(t,{attributes:!0,childList:!0,subtree:!0}),r(t)}(this.$root,{...this.context,__$bindInput:L}),O(this,i,this.context),this.render(!0),n.created.call(this.context)}disconnectedCallback(){n.removed.call(this.context),this.disconnectStore()}get data(){return a(this._state)}}),p}async function H(t){return await fetch(t).then((t=>{if(t.status>=400)throw new Error(`${t.url} (${t.status})`);return t})).then((t=>(t.headers.get("content-type")||"").includes("json")?t.json():t.text()))}function P(t,e={},n=""){const r=document.createElement(t);r.innerHTML=n;for(const[t,n]of Object.entries(e))r.setAttribute(t,n);return r}var q=(t,e={})=>(Array.isArray(t)||(t=[t]),t.map(((t,n)=>{try{return function(t){const e={el:null,template:null,tagName:null,shadowDOM:!0,debug:!1,...t},n=!e.tagName;if(e.tagName=e.tagName||`dlite-${Math.random().toString(36).substring(2,9).toLowerCase()}`,e.el){if("string"==typeof e.el){const t=document.querySelector(e.el);if(!t)throw new Error(`'${e.el}' could not be found.`);e.el=t}if(e.template||(e.template=e.el.innerHTML),e.el.innerHTML="",n){const t=P(e.tagName,s(e.el));for(const[n,r]of Object.entries(s(e.el)))t.setAttribute(n,r);e.el.parentNode.replaceChild(t,e.el)}}else if(!e.el&&n)throw new Error("Missing either 'el' or 'tagName' setting.");if(!e.template)throw new Error("Missing 'template' setting.");return _(e)}({...e,...t})}catch(r){if(!e.debug&&!t.debug)throw r;{const t=P("div",{style:"background-color: red; color: white; padding: 10px;"},`\n

#${n+1}

\n${r}\n
\n Stacktrace\n ${r.stack.replaceAll("\n","
")}\n
`);document.body.prepend(t),console.error(r)}}})));export{q as default,H as fetcher}; diff --git a/package.json b/package.json index e64c1a6..d4fa1b2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dlite", "pkgName": "dlite", - "version": "0.16.1", + "version": "0.16.2", "author": "adamghill", "license": "MIT", "description": "A tiny, blazing fast view library that creates reactive Web Components.", diff --git a/site/.buildinfo b/site/.buildinfo index cdb78b2..10d7191 100644 --- a/site/.buildinfo +++ b/site/.buildinfo @@ -1,4 +1,4 @@ # Sphinx build info version 1 # This file hashes the configuration used when building these files. When it is not found, a full rebuild will be done. -config: da9356a956fc2547c95254403f8883d7 +config: 323f39a55d244729c079325248e9952f tags: d77d1c0d9ca2f4c8421862c7c5a0d620 diff --git a/site/_static/documentation_options.js b/site/_static/documentation_options.js index cdff7f3..1fdb768 100644 --- a/site/_static/documentation_options.js +++ b/site/_static/documentation_options.js @@ -1,6 +1,6 @@ var DOCUMENTATION_OPTIONS = { URL_ROOT: document.getElementById("documentation_options").getAttribute('data-url_root'), - VERSION: '0.16.1', + VERSION: '0.16.2', LANGUAGE: 'en', COLLAPSE_INDEX: false, BUILDER: 'dirhtml', diff --git a/site/components/binding/index.html b/site/components/binding/index.html index 214b7f6..c3189c0 100644 --- a/site/components/binding/index.html +++ b/site/components/binding/index.html @@ -6,7 +6,7 @@ - Data Binding - dlite 0.16.1 documentation + Data Binding - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/components/directives/index.html b/site/components/directives/index.html index bf1e86a..4d076ff 100644 --- a/site/components/directives/index.html +++ b/site/components/directives/index.html @@ -6,7 +6,7 @@ - Directives - dlite 0.16.1 documentation + Directives - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/components/events/index.html b/site/components/events/index.html index 2561e1e..c88463a 100644 --- a/site/components/events/index.html +++ b/site/components/events/index.html @@ -6,7 +6,7 @@ - Events - dlite 0.16.1 documentation + Events - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/components/index.html b/site/components/index.html index a8c9e5a..4f9ac08 100644 --- a/site/components/index.html +++ b/site/components/index.html @@ -6,7 +6,7 @@ - Initialize - dlite 0.16.1 documentation + Initialize - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation @@ -214,7 +214,7 @@

Initializedlite turns HTML into composable, fully compliant Web Components. The easiest way to initialize dlite is via an ES Module import.

Warning

-

Make sure to specify module for the script element’s type attribute.

+

Make sure to specify module for the script element’s type.

<script type="module">
   import Dlite from '//unpkg.com/dlite';
@@ -224,7 +224,7 @@ 
Initialize</script>
-

or

+

or download dlite.es.js and serve it.

<script type="module" src="dlite.es.js"></script>
diff --git a/site/components/store/index.html b/site/components/store/index.html index c9ed5a0..a0551cd 100644 --- a/site/components/store/index.html +++ b/site/components/store/index.html @@ -6,7 +6,7 @@ - Store - dlite 0.16.1 documentation + Store - dlite 0.16.2 documentation @@ -124,7 +124,7 @@

-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/components/template/index.html b/site/components/template/index.html index 9fb4128..3df1571 100644 --- a/site/components/template/index.html +++ b/site/components/template/index.html @@ -6,7 +6,7 @@ - Template - dlite 0.16.1 documentation + Template - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/examples/index.html b/site/examples/index.html index 108b5fb..2084970 100644 --- a/site/examples/index.html +++ b/site/examples/index.html @@ -6,7 +6,7 @@ - Examples - dlite 0.16.1 documentation + Examples - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/faq/index.html b/site/faq/index.html index 1ffa1a2..fbfe3a8 100644 --- a/site/faq/index.html +++ b/site/faq/index.html @@ -6,7 +6,7 @@ - FAQ - dlite 0.16.1 documentation + FAQ - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/genindex/index.html b/site/genindex/index.html index 13f8111..a1a7abe 100644 --- a/site/genindex/index.html +++ b/site/genindex/index.html @@ -4,7 +4,7 @@ - Index - dlite 0.16.1 documentation + Index - dlite 0.16.2 documentation @@ -122,7 +122,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -145,7 +145,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/index.html b/site/index.html index 2d34834..bddf832 100644 --- a/site/index.html +++ b/site/index.html @@ -6,7 +6,7 @@ - dlite 0.16.1 documentation + dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/installation/index.html b/site/installation/index.html index 5142325..39665f9 100644 --- a/site/installation/index.html +++ b/site/installation/index.html @@ -6,7 +6,7 @@ - Installation - dlite 0.16.1 documentation + Installation - dlite 0.16.2 documentation @@ -124,7 +124,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -147,7 +147,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation @@ -213,22 +213,30 @@

Installation#

Browser#

-

The easiest way to use dlite is with a script tag.

+

The easiest way to use the latest version of dlite is with a script tag and using the unpkg CDN.

+
+

Warning

+

Make sure to specify module for the script element’s type.

+
<script type="module">
   import Dlite from '//unpkg.com/dlite';
-  
-  ...
+</script>
+
+
+

You can also specify a version using the unpkg CDN to minimize the effect of breaking changes.

+
<script type="module">
+  import Dlite from '//unpkg.com/dlite@0.16.1';
 </script>

NPM#

-

You can also install via NPM.

+

You can also install via NPM.

npm install dlite
-

Then, import dlite in your HTML.

+

Then, import dlite in your JavaScript.

import Dlite from 'dlite';
diff --git a/site/objects.inv b/site/objects.inv index f07f4b490fb4994092a7f9fabf8b7a3bef176ddd..ba24e24c658f596c969dfb0908577e47d8e12116 100644 GIT binary patch delta 12 Tcmcc0f0ciN9i!1k`)TX|A8Z6y delta 12 Tcmcc0f0ciN9i!n!`)TX|A7=zs diff --git a/site/search/index.html b/site/search/index.html index d9306c2..9fbda7e 100644 --- a/site/search/index.html +++ b/site/search/index.html @@ -4,7 +4,7 @@ - Search - dlite 0.16.1 documentation + Search - dlite 0.16.2 documentation @@ -121,7 +121,7 @@
-
dlite 0.16.1 documentation
 +
dlite 0.16.2 documentation
@@ -144,7 +144,7 @@
- dlite 0.16.1 documentation + dlite 0.16.2 documentation diff --git a/site/searchindex.js b/site/searchindex.js index ca4a687..0efdf8b 100644 --- a/site/searchindex.js +++ b/site/searchindex.js @@ -1 +1 @@ -Search.setIndex({"docnames": ["components/binding", "components/configuration", "components/directives", "components/events", "components/index", "components/store", "components/template", "examples", "faq", "index", "installation"], "filenames": ["components/binding.md", "components/configuration.md", "components/directives.md", "components/events.md", "components/index.md", "components/store.md", "components/template.md", "examples.md", "faq.md", "index.md", "installation.md"], "titles": ["Data Binding", "Configuration", "Directives", "Events", "Initialize", "Store", "Template", "Examples", "FAQ", "Introduction", "Installation"], "terms": {"dlite": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10], "creat": [0, 4, 6, 7, 9], "web": [4, 8, 9], "compon": [1, 3, 4, 6, 9], "interact": [7, 9], "page": [1, 6, 9], "easili": 9, "without": [3, 8, 9], "bloat": 9, "big": 9, "framework": 9, "It": [1, 2, 4, 8, 9], "can": [1, 2, 4, 6, 7, 8, 9, 10], "effortlessli": 9, "ad": [1, 9], "exist": [4, 9], "html": [1, 2, 3, 4, 6, 7, 8, 9, 10], "add": [2, 3, 4], "throughout": [], "applic": [1, 8, 9], "i": [1, 2, 3, 4, 5, 7, 9, 10], "perfect": 9, "develop": [], "work": [8, 9], "simpl": [8, 9], "dynam": 9, "static": [8, 9], "site": [8, 9], "when": [1, 4, 5, 7, 8, 9], "you": [1, 2, 4, 8, 9, 10], "want": [8, 9], "progress": 9, "upgrad": [], "your": [1, 4, 7, 8, 9, 10], "chang": [3, 9], "too": [8, 9], "much": [4, 8, 9], "serious": 9, "tini": 9, "3": 8, "5kb": 8, "gzip": [8, 9], "reactiv": [1, 4, 7, 8, 9], "an": [1, 3, 4, 6, 7, 8], "intern": [], "state": [1, 2, 5, 7], "manag": [1, 5], "templat": [0, 2, 3, 4, 9], "languag": 9, "leverag": 9, "liter": 9, "prop": [4, 9], "lifecycl": 9, "comput": 9, "properti": [1, 6, 9], "One": [], "wai": [0, 4, 8, 9, 10], "data": [2, 3, 4, 5, 6, 9], "flow": [], "two": [0, 4, 9], "bind": [6, 9], "event": [0, 1, 9], "handl": 9, "hook": 9, "direct": 9, "e": [1, 3, 4, 9], "g": [1, 3, 9], "els": [2, 7, 9], "style": [1, 4, 6, 7, 9], "class": [7, 9], "No": [8, 9], "depend": 9, "virtual": 9, "dom": [1, 4, 6, 9], "jsx": 9, "build": 9, "tool": 9, "requir": [1, 2, 4, 9], "put": 9, "script": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10], "tag": [4, 6, 7, 9, 10], "go": 9, "compat": 9, "all": [1, 9], "modern": 9, "support": 9, "es2015": 9, "es6": 9, "esm": 9, "proxi": 9, "The": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "easiest": [4, 10], "us": [1, 2, 3, 4, 5, 6, 7, 8, 10], "type": [0, 1, 2, 3, 4, 5, 6, 7, 10], "modul": [0, 1, 2, 3, 4, 5, 6, 7, 10], "import": [0, 1, 2, 3, 4, 5, 6, 7, 10], "from": [0, 1, 2, 3, 4, 5, 6, 8, 9, 10], "unpkg": [0, 1, 2, 3, 4, 5, 6, 7, 10], "com": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10], "also": [1, 2, 4, 10], "via": [1, 4, 5, 6, 10], "Then": 10, "_": [1, 7], "A": [1, 5, 7, 8], "real": 8, "answer": 8, "origin": 8, "author": 8, "litedom": [5, 8, 9], "mardix": [1, 3, 4, 8, 9], "ui": 8, "tech": 8, "lead": 8, "engin": 8, "bank": 8, "america": 8, "who": [], "deal": 8, "mani": 8, "see": [4, 8], "stuff": 8, "sometim": 8, "frustrat": 8, "team": 8, "member": 8, "come": 8, "choic": 8, "so": [1, 4, 6, 8], "one": [4, 8], "week": 8, "end": 8, "afternoon": 8, "4": 8, "20": 8, "weekend": 8, "2019": 8, "while": 8, "person": 8, "project": 8, "gener": 8, "thought": 8, "wa": 8, "overhead": 8, "bring": 8, "someth": 8, "like": 8, "angular": 8, "just": [6, 8], "make": [4, 8], "small": 8, "piec": 8, "decid": 8, "drop": [3, 8], "view": 8, "ani": [2, 8], "section": 8, "stai": 8, "me": [2, 3, 8], "Not": 8, "realli": [], "target": [3, 7, 8], "differ": 8, "set": [2, 4, 8], "app": [0, 1, 2, 3, 4, 5, 6, 8], "some": [1, 2, 8], "time": [1, 8], "littl": 8, "bit": 8, "includ": [4, 6, 8, 9], "huge": 8, "follow": [1, 2, 5, 8], "same": [4, 8], "paradigm": 8, "j": [4, 8], "smaller": 8, "scale": 8, "less": [7, 8], "download": 8, "pars": 8, "faster": 8, "render": [1, 4, 6, 8], "ipso": 8, "facto": 8, "user": 8, "happier": 8, "improv": 8, "world": [1, 3, 4, 7, 8], "fork": [8, 9], "fantast": 9, "done": [5, 9], "code": [1, 8, 9], "great": 9, "http": [1, 9], "github": 9, "bryhoyt": 9, "emerj": [8, 9], "sindresorhu": 9, "For": 8, "ye": 8, "better": 8, "place": [1, 8], "full": [5, 7], "tagnam": [4, 7], "hello": [0, 1, 3, 4, 5, 6, 7], "thi": [0, 2, 4, 5, 6, 7], "name": [0, 1, 2, 4, 5, 6, 7], "Will": 7, "displai": [2, 4, 7], "adam": [], "function": [1, 5, 7], "call": [1, 5, 7], "initi": [1, 7], "remov": [2, 7], "counter": [1, 7], "count": [1, 2, 7], "0": [1, 2, 3, 7], "method": [3, 5, 7], "get": [1, 2, 3, 4, 7, 8], "start": [1, 2, 7], "attribut": [0, 1, 2, 3, 4, 7], "setinterv": 7, "1000": [1, 7], "consol": [1, 3, 4, 7], "log": [1, 3, 4, 7], "5": [1, 2, 7, 9], "up": 7, "1": 7, "everi": 7, "second": 7, "21": 7, "content": 7, "el": [0, 2, 3, 4, 5, 6, 7], "hellowidget": 7, "div": [0, 2, 4, 7], "id": [0, 1, 2, 3, 4, 5, 6, 7], "todai": 7, "": [1, 4, 5, 6, 7], "date": [6, 7], "new": [1, 5, 6, 7], "toisostr": 7, "slice": 7, "10": [2, 7, 9], "extern": [4, 7], "queri": 4, "selector": [1, 4], "increment": 7, "decrement": 7, "const": [1, 3, 4, 5, 7], "document": [1, 7], "queryselector": [1, 7], "counter1": 7, "show": [2, 7], "execut": [5, 7], "There": [], "ar": [1, 2, 4, 6, 8, 9], "loop": [2, 7], "blue": [2, 6, 7], "color": [2, 6, 7], "red": [2, 6, 7], "contain": [1, 5, 7], "car": 7, "bmw": 7, "merced": 7, "audi": 7, "tesla": 7, "background": [2, 7], "yellow": 7, "greater": 7, "than": [4, 7], "ul": [2, 5, 7], "li": [2, 5, 7], "map": [2, 7], "font": [2, 7], "7": [2, 7], "have": [1, 2, 7], "lastnam": [1, 5, 7], "fullnam": [1, 5, 7], "return": [1, 5, 7], "input": [0, 1, 3, 7], "text": [0, 3, 7], "associ": 7, "counterwidget": [], "down": 7, "h4": 7, "button": [3, 5, 7], "click": [3, 7], "outlin": [], "insid": [1, 2, 7], "anoth": [4, 7], "css": [1, 7, 9], "circl": 7, "border": 7, "thin": 7, "solid": 7, "black": 7, "radiu": 7, "60px": 7, "width": 7, "100px": 7, "height": 7, "align": 7, "center": 7, "margin": 7, "bottom": 7, "10px": 7, "circlecompon": 7, "comp": 7, "span": [2, 7], "backgroundcolor": [2, 7], "maincompon": 7, "ff0000": 7, "00ff00": 7, "ffff00": 7, "index": [2, 7], "kei": [1, 2, 4, 7], "although": 8, "hasn": 8, "t": 5, "been": 8, "updat": [0, 5, 7, 8], "sinc": 8, "adamghil": 8, "tri": 8, "out": 8, "2023": 8, "impress": 8, "approach": 8, "he": 8, "hard": 8, "fix": 8, "bug": [8, 9], "re": [1, 5, 8], "write": 8, "doc": 8, "brand": 8, "more": 8, "browser": [4, 9], "librari": 9, "logo": 9, "openmoji": 9, "org": 9, "emoji": 9, "1f4a1": 9, "which": [4, 6, 7], "string": [1, 2, 7], "replac": 7, "help": [1, 7], "implement": [5, 7], "logic": [2, 7], "both": 7, "valu": [0, 1, 2, 5, 7], "adskfj": [], "asdf": [], "htmlelement": 1, "element": [0, 1, 2, 3, 6], "where": [1, 2], "instanc": [1, 5], "innerhtml": [1, 4], "someid": 1, "myid": 1, "custom": [3, 6], "must": [1, 2, 3, 4, 5], "hyphen": 1, "my": 1, "object": [1, 2], "here": [], "whenev": [1, 2], "trigger": 1, "necessari": [1, 2], "expect": 1, "number": 1, "plain": [], "arrai": [1, 2], "boolean": 1, "null": 1, "undefin": 1, "In": [], "case": [], "becom": [], "turn": 4, "compos": 4, "fulli": 4, "compliant": 4, "sure": 4, "specifi": 4, "src": 4, "accept": [1, 4], "argument": [1, 3, 4], "either": 4, "x": 4, "multipl": [4, 5], "onc": 4, "componenton": 4, "componenttwo": 4, "reus": 4, "allow": 4, "javascript": [1, 2, 3, 4], "file": 4, "sebastien": 4, "intend": [], "xvcxd": [], "everyth": [], "defin": 1, "markup": 1, "fals": [1, 2], "By": [], "default": [1, 4, 5, 6, 9], "normal": [2, 4], "To": 5, "true": [1, 2], "interfac": [], "unlik": [], "share": [1, 5], "ie": [], "restat": 1, "redux": [1, 5], "getstat": [1, 5], "subscrib": [1, 5], "callback": 5, "shadow": [1, 6, 9], "litest": 1, "run": [], "each": [1, 4], "along": [], "own": [], "do": [1, 4, 8], "arrow": 1, "sayhello": [1, 3], "result": 1, "error": 1, "uncaught": 1, "typeerror": 1, "cannot": 1, "read": [1, 8], "mymethod": 1, "access": 6, "root": 1, "give": [], "delet": [], "don": [], "pre": [], "methoda": [], "setter": [], "locat": 2, "getter": [], "myarrai": [], "push": [], "length": 1, "were": [], "dure": [], "settimeout": 1, "other": [1, 4], "methodb": [], "methodc": [], "m": [0, 1], "c": [], "base": [1, 3, 6], "usual": [], "assign": [1, 3], "firstnam": 1, "totalchar": 1, "exampl": 1, "abov": [], "we": [], "now": 5, "note": [], "2": [], "mutat": 1, "funcion": [], "nor": [], "current": [1, 2, 3], "onli": [1, 3], "provid": [2, 5, 6], "mutabl": [], "p": [0, 2, 4, 6], "helloworld": 1, "possibl": [1, 2, 5], "litestor": [], "textarea": 0, "select": [0, 3, 4], "bound": 0, "appropri": 0, "salut": 0, "radio": 0, "mr": 0, "listen": 3, "configur": [], "href": 3, "valid": [], "onclick": 3, "invalid": [], "context": [], "instac": [], "invok": [], "first": [], "retriev": [], "etc": [], "sai": 3, "directli": [], "ha": 8, "With": [], "sourc": 2, "getattribut": 3, "shorthand": [], "right": [], "except": 3, "scenario": 3, "below": 3, "htmlanchorel": [], "ahref": [], "void": 3, "htmlinputel": [], "htmltextareael": [], "form": [2, 3], "past": 3, "htmlselectel": [], "option": 3, "htmlformel": [], "submit": 3, "focu": 3, "blur": 3, "hover": 3, "reset": 3, "keydown": 3, "keypress": 3, "keyup": 3, "dblclick": 3, "mouseent": 3, "mouseleav": 3, "mousedown": 3, "mousemov": 3, "mouseout": 3, "mouseov": 3, "mouseup": 3, "contextmenu": 3, "drag": 3, "dragend": 3, "dragent": 3, "dragstart": 3, "dragleav": 3, "cut": 3, "copi": 3, "print": 3, "shortcut": [2, 3], "correct": 3, "convert": [2, 3], "somemethodnam": 3, "list": [2, 9], "thei": [2, 4], "condit": 2, "should": 2, "written": 2, "condition": 2, "immedi": 2, "otherwis": 2, "recogn": 2, "iter": 2, "over": 2, "item": [2, 5], "under": 2, "hood": 2, "special": 2, "syntax": [2, 6], "track": 2, "recommend": [2, 5], "charlott": 2, "atlanta": 2, "concord": 2, "nc": 2, "citi": 2, "raleigh": 2, "florida": 2, "tampa": 2, "miami": 2, "jacksonvil": 2, "south": 2, "carolina": 2, "columbia": 2, "greenvil": 2, "toggl": 2, "customstyl": 2, "none": [2, 4], "size": 2, "12px": 2, "declar": 6, "spec": [], "parser": [], "singl": [], "brace": [], "dollar": [], "sign": [], "todaysd": 6, "tolocalestr": 6, "indic": [], "variabl": [], "fall": [], "global": [], "window": [], "keep": [], "scope": [1, 9], "subscript": 5, "If": [1, 4, 5], "doesn": 5, "extend": 5, "mystatemanag": 5, "somestor": 5, "onchang": 5, "setup": [], "store_inst": 5, "avail": 5, "dosometh": 5, "accountdetail": 5, "setnam": 5, "setlastnam": 5, "async": [1, 5], "loadaccount": 5, "statu": [1, 5], "load": [1, 5], "await": [1, 5], "fetch": [1, 5], "url": 5, "json": [1, 5], "appon": 5, "apptwo": 5, "account": 5, "accountnam": 5, "loaddata": 1, "resp": [], "complet": 1, "api": 1, "bigger": [], "similar": 9, "unsuckj": 9, "blog": [], "brush": [], "co": [], "nz": [], "2017": [], "11": [], "effici": 8, "60": 8, "line": 8, "korynunn": [], "wordpress": [], "2013": [], "03": [], "19": [], "isnt": [], "attach": [1, 6], "encapsul": [1, 6], "regular": [], "advanc": [], "prevent": [], "componentopt": 4, "pass": 4, "find": 4, "alwai": 4, "overrid": [1, 4], "ya": 4, "effect": 4, "befor": 4, "merg": 4, "hidden": 4, "visibl": 4, "invis": 4, "layout": 4, "basic": 4, "still": 4, "affect": [1, 4, 6], "benefici": 4, "shift": 4, "what": 4, "doe": 4, "non": 4, "ridicul": 8, "fast": 8, "goe": 8, "depth": 8, "skip": 8, "spici": 8, "take": 8, "modifi": 8, "about": 8, "perform": 8, "reusabl": 9, "enhanc": 9, "licens": 9, "mit": 9, "pr": 9, "report": 9, "fail": 9, "test": 9, "extrem": 9, "appreci": 9, "Being": [], "being": [], "identifi": [], "mode": [], "cna": [], "let": [], "ref": [], "textbox": [], "need": [], "instead": [], "6kb": [], "refid": [], "rest": 1, "disabl": 1, "behavior": 1, "h1": 6, "kb": 9, "newli": [], "present": 1, "after": 1, "unknown": 1, "externaldata": [], "apidata": 1, "blob": [], "output": 1, "messag": 1, "whether": 1}, "objects": {}, "objtypes": {}, "objnames": {}, "titleterms": {"introduct": 9, "featur": 9, "instal": 10, "browser": 10, "npm": 10, "dlite": 8, "faq": 8, "how": 8, "big": 8, "i": 8, "why": 8, "yet": 8, "anoth": 8, "javascript": [5, 7, 8], "librari": 8, "doe": 8, "replac": 8, "react": 8, "vue": 8, "etc": 8, "size": 8, "matter": 8, "acknowledg": 9, "realli": 8, "exampl": [5, 7], "reactiv": [], "lifecycl": [1, 7], "In": [4, 7], "place": [4, 7], "templat": [1, 5, 6, 7], "access": [1, 5, 7], "custom": [1, 4, 7], "element": [4, 7], "from": 7, "direct": [2, 7], "two": 7, "wai": 7, "data": [0, 1, 7], "bind": [0, 7], "comput": [1, 7], "event": [3, 7], "handl": 7, "nest": 7, "compon": 7, "who": 8, "creat": [1, 8], "thi": [1, 8], "prop": [1, 7], "els": [], "style": 2, "class": 2, "kei": [], "text": 2, "valu": 3, "configur": [1, 4], "properti": [], "el": 1, "tagnam": 1, "initi": 4, "object": 4, "arrai": 4, "method": 1, "index": [], "shadowdom": 1, "store": [1, 5], "updat": 1, "remov": 1, "defin": [], "pass": 3, "call": 3, "name": 3, "list": [], "htmlanchorel": 3, "htmlinputel": 3, "htmltextareael": 3, "htmlselectel": 3, "htmlformel": 3, "all": 3, "interpol": 6, "what": [], "about": [], "us": [], "litest": 5, "setup": 5, "relat": 9, "project": 9, "isn": 8, "t": 8, "dom": 8, "slow": 8, "share": 4, "prevent": 4, "flicker": 4, "refid": [], "scope": 6, "css": 6, "set": 1, "debug": 1}, "envversion": {"sphinx.domains.c": 2, "sphinx.domains.changeset": 1, "sphinx.domains.citation": 1, "sphinx.domains.cpp": 8, "sphinx.domains.index": 1, "sphinx.domains.javascript": 2, "sphinx.domains.math": 2, "sphinx.domains.python": 3, "sphinx.domains.rst": 2, "sphinx.domains.std": 2, "sphinx.ext.intersphinx": 1, "sphinx": 57}, "alltitles": {"Data Binding": [[0, "data-binding"]], "Configuration": [[1, "configuration"], [4, "configuration"]], "Settings": [[1, "settings"]], "el": [[1, "el"]], "tagName": [[1, "tagname"]], "template": [[1, "template"]], "data": [[1, "data"]], "Computed data": [[1, "computed-data"]], "$store": [[1, "store"]], "shadowDOM": [[1, "shadowdom"]], "debug": [[1, "debug"]], "Methods": [[1, "methods"]], "Lifecycle methods": [[1, "lifecycle-methods"]], "created": [[1, "created"]], "updated": [[1, "updated"]], "removed": [[1, "removed"]], "Custom methods": [[1, "custom-methods"]], "Access to this": [[1, "access-to-this"]], "this.el": [[1, "this-el"]], "this.data": [[1, "this-data"]], "this.prop": [[1, "this-prop"]], "Directives": [[2, "directives"], [7, "directives"]], "if": [[2, "if"]], "for": [[2, "for"]], "class": [[2, "class"]], "style": [[2, "style"]], "text": [[2, "text"]], "Events": [[3, "events"]], "Passing values": [[3, "passing-values"]], "@call": [[3, "call"]], "HTMLAnchorElement": [[3, "htmlanchorelement"]], "HTMLInputElement and HTMLTextAreaElement": [[3, "htmlinputelement-and-htmltextareaelement"]], "HTMLSelectElement": [[3, "htmlselectelement"]], "HTMLFormElement": [[3, "htmlformelement"]], "All event names": [[3, "all-event-names"]], "Initialize": [[4, "initialize"]], "Object": [[4, "object"]], "Array of objects": [[4, "array-of-objects"]], "Shared configuration": [[4, "shared-configuration"]], "Custom element": [[4, "custom-element"]], "In-place element": [[4, "in-place-element"]], "Prevent flickering": [[4, "prevent-flickering"]], "Store": [[5, "store"]], "Setup": [[5, "setup"]], "Access the store": [[5, "access-the-store"]], "JavaScript": [[5, "javascript"]], "Template": [[5, "template"], [6, "template"]], "Example with Litestate": [[5, "example-with-litestate"]], "Interpolation": [[6, "interpolation"]], "Scoped CSS": [[6, "scoped-css"]], "Examples": [[7, "examples"]], "Props": [[7, "props"]], "Lifecycle": [[7, "lifecycle"]], "In-place template": [[7, "in-place-template"]], "Access custom element from JavaScript": [[7, "access-custom-element-from-javascript"]], "Two-way data binding and computed data": [[7, "two-way-data-binding-and-computed-data"]], "Event handling": [[7, "event-handling"]], "Nested components": [[7, "nested-components"]], "FAQ": [[8, "faq"]], "How big is dlite?": [[8, "how-big-is-dlite"]], "Why yet another JavaScript library?": [[8, "why-yet-another-javascript-library"]], "Does it replace React, Vue etc?": [[8, "does-it-replace-react-vue-etc"]], "Isn\u2019t the DOM slow?": [[8, "isn-t-the-dom-slow"]], "Does size really matter?": [[8, "does-size-really-matter"]], "Who created this?": [[8, "who-created-this"]], "Introduction": [[9, "introduction"]], "\u2b50 Features": [[9, "features"]], "\ud83e\udde0 Related projects": [[9, "related-projects"]], "\ud83d\ude4c Acknowledgements": [[9, "acknowledgements"]], "Installation": [[10, "installation"]], "Browser": [[10, "browser"]], "NPM": [[10, "npm"]]}, "indexentries": {}}) \ No newline at end of file +Search.setIndex({"docnames": ["components/binding", "components/configuration", "components/directives", "components/events", "components/index", "components/store", "components/template", "examples", "faq", "index", "installation"], "filenames": ["components/binding.md", "components/configuration.md", "components/directives.md", "components/events.md", "components/index.md", "components/store.md", "components/template.md", "examples.md", "faq.md", "index.md", "installation.md"], "titles": ["Data Binding", "Configuration", "Directives", "Events", "Initialize", "Store", "Template", "Examples", "FAQ", "Introduction", "Installation"], "terms": {"dlite": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10], "creat": [0, 4, 6, 7, 9], "web": [4, 8, 9], "compon": [1, 3, 4, 6, 9], "interact": [7, 9], "page": [1, 6, 9], "easili": 9, "without": [3, 8, 9], "bloat": 9, "big": 9, "framework": 9, "It": [1, 2, 4, 8, 9], "can": [1, 2, 4, 6, 7, 8, 9, 10], "effortlessli": 9, "ad": [1, 9], "exist": [4, 9], "html": [1, 2, 3, 4, 6, 7, 8, 9], "add": [2, 3, 4], "throughout": [], "applic": [1, 8, 9], "i": [1, 2, 3, 4, 5, 7, 9, 10], "perfect": 9, "develop": [], "work": [8, 9], "simpl": [8, 9], "dynam": 9, "static": [8, 9], "site": [8, 9], "when": [1, 4, 5, 7, 8, 9], "you": [1, 2, 4, 8, 9, 10], "want": [8, 9], "progress": 9, "upgrad": [], "your": [1, 4, 7, 8, 9, 10], "chang": [3, 9, 10], "too": [8, 9], "much": [4, 8, 9], "serious": 9, "tini": 9, "3": 8, "5kb": 8, "gzip": [8, 9], "reactiv": [1, 4, 7, 8, 9], "an": [1, 3, 4, 6, 7, 8], "intern": [], "state": [1, 2, 5, 7], "manag": [1, 5], "templat": [0, 2, 3, 4, 9], "languag": 9, "leverag": 9, "liter": 9, "prop": [4, 9], "lifecycl": 9, "comput": 9, "properti": [1, 6, 9], "One": [], "wai": [0, 4, 8, 9, 10], "data": [2, 3, 4, 5, 6, 9], "flow": [], "two": [0, 4, 9], "bind": [6, 9], "event": [0, 1, 9], "handl": 9, "hook": 9, "direct": 9, "e": [1, 3, 4, 9], "g": [1, 3, 9], "els": [2, 7, 9], "style": [1, 4, 6, 7, 9], "class": [7, 9], "No": [8, 9], "depend": 9, "virtual": 9, "dom": [1, 4, 6, 9], "jsx": 9, "build": 9, "tool": 9, "requir": [1, 2, 4, 9], "put": 9, "script": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10], "tag": [4, 6, 7, 9, 10], "go": 9, "compat": 9, "all": [1, 9], "modern": 9, "support": 9, "es2015": 9, "es6": 9, "esm": 9, "proxi": 9, "The": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "easiest": [4, 10], "us": [1, 2, 3, 4, 5, 6, 7, 8, 10], "type": [0, 1, 2, 3, 4, 5, 6, 7, 10], "modul": [0, 1, 2, 3, 4, 5, 6, 7, 10], "import": [0, 1, 2, 3, 4, 5, 6, 7, 10], "from": [0, 1, 2, 3, 4, 5, 6, 8, 9, 10], "unpkg": [0, 1, 2, 3, 4, 5, 6, 7, 10], "com": [0, 1, 2, 3, 4, 5, 6, 7, 9, 10], "also": [1, 2, 4, 10], "via": [1, 4, 5, 6, 10], "Then": 10, "_": [1, 7], "A": [1, 5, 7, 8], "real": 8, "answer": 8, "origin": 8, "author": 8, "litedom": [5, 8, 9], "mardix": [1, 3, 4, 8, 9], "ui": 8, "tech": 8, "lead": 8, "engin": 8, "bank": 8, "america": 8, "who": [], "deal": 8, "mani": 8, "see": [4, 8], "stuff": 8, "sometim": 8, "frustrat": 8, "team": 8, "member": 8, "come": 8, "choic": 8, "so": [1, 4, 6, 8], "one": [4, 8], "week": 8, "end": 8, "afternoon": 8, "4": 8, "20": 8, "weekend": 8, "2019": 8, "while": 8, "person": 8, "project": 8, "gener": 8, "thought": 8, "wa": 8, "overhead": 8, "bring": 8, "someth": 8, "like": 8, "angular": 8, "just": [6, 8], "make": [4, 8, 10], "small": 8, "piec": 8, "decid": 8, "drop": [3, 8], "view": 8, "ani": [2, 8], "section": 8, "stai": 8, "me": [2, 3, 8], "Not": 8, "realli": [], "target": [3, 7, 8], "differ": 8, "set": [2, 4, 8], "app": [0, 1, 2, 3, 4, 5, 6, 8], "some": [1, 2, 8], "time": [1, 8], "littl": 8, "bit": 8, "includ": [4, 6, 8, 9], "huge": 8, "follow": [1, 2, 5, 8], "same": [4, 8], "paradigm": 8, "j": [4, 8], "smaller": 8, "scale": 8, "less": [7, 8], "download": [4, 8], "pars": 8, "faster": 8, "render": [1, 4, 6, 8], "ipso": 8, "facto": 8, "user": 8, "happier": 8, "improv": 8, "world": [1, 3, 4, 7, 8], "fork": [8, 9], "fantast": 9, "done": [5, 9], "code": [1, 8, 9], "great": 9, "http": [1, 9], "github": 9, "bryhoyt": 9, "emerj": [8, 9], "sindresorhu": 9, "For": 8, "ye": 8, "better": 8, "place": [1, 8], "full": [5, 7], "tagnam": [4, 7], "hello": [0, 1, 3, 4, 5, 6, 7], "thi": [0, 2, 4, 5, 6, 7], "name": [0, 1, 2, 4, 5, 6, 7], "Will": 7, "displai": [2, 4, 7], "adam": [], "function": [1, 5, 7], "call": [1, 5, 7], "initi": [1, 7], "remov": [2, 7], "counter": [1, 7], "count": [1, 2, 7], "0": [1, 2, 3, 7, 10], "method": [3, 5, 7], "get": [1, 2, 3, 4, 7, 8], "start": [1, 2, 7], "attribut": [0, 1, 2, 3, 4, 7], "setinterv": 7, "1000": [1, 7], "consol": [1, 3, 4, 7], "log": [1, 3, 4, 7], "5": [1, 2, 7, 9], "up": 7, "1": [7, 10], "everi": 7, "second": 7, "21": 7, "content": 7, "el": [0, 2, 3, 4, 5, 6, 7], "hellowidget": 7, "div": [0, 2, 4, 7], "id": [0, 1, 2, 3, 4, 5, 6, 7], "todai": 7, "": [1, 4, 5, 6, 7, 10], "date": [6, 7], "new": [1, 5, 6, 7], "toisostr": 7, "slice": 7, "10": [2, 7, 9], "extern": [4, 7], "queri": 4, "selector": [1, 4], "increment": 7, "decrement": 7, "const": [1, 3, 4, 5, 7], "document": [1, 7], "queryselector": [1, 7], "counter1": 7, "show": [2, 7], "execut": [5, 7], "There": [], "ar": [1, 2, 4, 6, 8, 9], "loop": [2, 7], "blue": [2, 6, 7], "color": [2, 6, 7], "red": [2, 6, 7], "contain": [1, 5, 7], "car": 7, "bmw": 7, "merced": 7, "audi": 7, "tesla": 7, "background": [2, 7], "yellow": 7, "greater": 7, "than": [4, 7], "ul": [2, 5, 7], "li": [2, 5, 7], "map": [2, 7], "font": [2, 7], "7": [2, 7], "have": [1, 2, 7], "lastnam": [1, 5, 7], "fullnam": [1, 5, 7], "return": [1, 5, 7], "input": [0, 1, 3, 7], "text": [0, 3, 7], "associ": 7, "counterwidget": [], "down": 7, "h4": 7, "button": [3, 5, 7], "click": [3, 7], "outlin": [], "insid": [1, 2, 7], "anoth": [4, 7], "css": [1, 7, 9], "circl": 7, "border": 7, "thin": 7, "solid": 7, "black": 7, "radiu": 7, "60px": 7, "width": 7, "100px": 7, "height": 7, "align": 7, "center": 7, "margin": 7, "bottom": 7, "10px": 7, "circlecompon": 7, "comp": 7, "span": [2, 7], "backgroundcolor": [2, 7], "maincompon": 7, "ff0000": 7, "00ff00": 7, "ffff00": 7, "index": [2, 7], "kei": [1, 2, 4, 7], "although": 8, "hasn": 8, "t": 5, "been": 8, "updat": [0, 5, 7, 8], "sinc": 8, "adamghil": 8, "tri": 8, "out": 8, "2023": 8, "impress": 8, "approach": 8, "he": 8, "hard": 8, "fix": 8, "bug": [8, 9], "re": [1, 5, 8], "write": 8, "doc": 8, "brand": 8, "more": 8, "browser": [4, 9], "librari": 9, "logo": 9, "openmoji": 9, "org": 9, "emoji": 9, "1f4a1": 9, "which": [4, 6, 7], "string": [1, 2, 7], "replac": 7, "help": [1, 7], "implement": [5, 7], "logic": [2, 7], "both": 7, "valu": [0, 1, 2, 5, 7], "adskfj": [], "asdf": [], "htmlelement": 1, "element": [0, 1, 2, 3, 6, 10], "where": [1, 2], "instanc": [1, 5], "innerhtml": [1, 4], "someid": 1, "myid": 1, "custom": [3, 6], "must": [1, 2, 3, 4, 5], "hyphen": 1, "my": 1, "object": [1, 2], "here": [], "whenev": [1, 2], "trigger": 1, "necessari": [1, 2], "expect": 1, "number": 1, "plain": [], "arrai": [1, 2], "boolean": 1, "null": 1, "undefin": 1, "In": [], "case": [], "becom": [], "turn": 4, "compos": 4, "fulli": 4, "compliant": 4, "sure": [4, 10], "specifi": [4, 10], "src": 4, "accept": [1, 4], "argument": [1, 3, 4], "either": 4, "x": 4, "multipl": [4, 5], "onc": 4, "componenton": 4, "componenttwo": 4, "reus": 4, "allow": 4, "javascript": [1, 2, 3, 4, 10], "file": 4, "sebastien": 4, "intend": [], "xvcxd": [], "everyth": [], "defin": 1, "markup": 1, "fals": [1, 2], "By": [], "default": [1, 4, 5, 6, 9], "normal": [2, 4], "To": 5, "true": [1, 2], "interfac": [], "unlik": [], "share": [1, 5], "ie": [], "restat": 1, "redux": [1, 5], "getstat": [1, 5], "subscrib": [1, 5], "callback": 5, "shadow": [1, 6, 9], "litest": 1, "run": [], "each": [1, 4], "along": [], "own": [], "do": [1, 4, 8], "arrow": 1, "sayhello": [1, 3], "result": 1, "error": 1, "uncaught": 1, "typeerror": 1, "cannot": 1, "read": [1, 8], "mymethod": 1, "access": 6, "root": 1, "give": [], "delet": [], "don": [], "pre": [], "methoda": [], "setter": [], "locat": 2, "getter": [], "myarrai": [], "push": [], "length": 1, "were": [], "dure": [], "settimeout": 1, "other": [1, 4], "methodb": [], "methodc": [], "m": [0, 1], "c": [], "base": [1, 3, 6], "usual": [], "assign": [1, 3], "firstnam": 1, "totalchar": 1, "exampl": 1, "abov": [], "we": [], "now": 5, "note": [], "2": [], "mutat": 1, "funcion": [], "nor": [], "current": [1, 2, 3], "onli": [1, 3], "provid": [2, 5, 6], "mutabl": [], "p": [0, 2, 4, 6], "helloworld": 1, "possibl": [1, 2, 5], "litestor": [], "textarea": 0, "select": [0, 3, 4], "bound": 0, "appropri": 0, "salut": 0, "radio": 0, "mr": 0, "listen": 3, "configur": [], "href": 3, "valid": [], "onclick": 3, "invalid": [], "context": [], "instac": [], "invok": [], "first": [], "retriev": [], "etc": [], "sai": 3, "directli": [], "ha": 8, "With": [], "sourc": 2, "getattribut": 3, "shorthand": [], "right": [], "except": 3, "scenario": 3, "below": 3, "htmlanchorel": [], "ahref": [], "void": 3, "htmlinputel": [], "htmltextareael": [], "form": [2, 3], "past": 3, "htmlselectel": [], "option": 3, "htmlformel": [], "submit": 3, "focu": 3, "blur": 3, "hover": 3, "reset": 3, "keydown": 3, "keypress": 3, "keyup": 3, "dblclick": 3, "mouseent": 3, "mouseleav": 3, "mousedown": 3, "mousemov": 3, "mouseout": 3, "mouseov": 3, "mouseup": 3, "contextmenu": 3, "drag": 3, "dragend": 3, "dragent": 3, "dragstart": 3, "dragleav": 3, "cut": 3, "copi": 3, "print": 3, "shortcut": [2, 3], "correct": 3, "convert": [2, 3], "somemethodnam": 3, "list": [2, 9], "thei": [2, 4], "condit": 2, "should": 2, "written": 2, "condition": 2, "immedi": 2, "otherwis": 2, "recogn": 2, "iter": 2, "over": 2, "item": [2, 5], "under": 2, "hood": 2, "special": 2, "syntax": [2, 6], "track": 2, "recommend": [2, 5], "charlott": 2, "atlanta": 2, "concord": 2, "nc": 2, "citi": 2, "raleigh": 2, "florida": 2, "tampa": 2, "miami": 2, "jacksonvil": 2, "south": 2, "carolina": 2, "columbia": 2, "greenvil": 2, "toggl": 2, "customstyl": 2, "none": [2, 4], "size": 2, "12px": 2, "declar": 6, "spec": [], "parser": [], "singl": [], "brace": [], "dollar": [], "sign": [], "todaysd": 6, "tolocalestr": 6, "indic": [], "variabl": [], "fall": [], "global": [], "window": [], "keep": [], "scope": [1, 9], "subscript": 5, "If": [1, 4, 5], "doesn": 5, "extend": 5, "mystatemanag": 5, "somestor": 5, "onchang": 5, "setup": [], "store_inst": 5, "avail": 5, "dosometh": 5, "accountdetail": 5, "setnam": 5, "setlastnam": 5, "async": [1, 5], "loadaccount": 5, "statu": [1, 5], "load": [1, 5], "await": [1, 5], "fetch": [1, 5], "url": 5, "json": [1, 5], "appon": 5, "apptwo": 5, "account": 5, "accountnam": 5, "loaddata": 1, "resp": [], "complet": 1, "api": 1, "bigger": [], "similar": 9, "unsuckj": 9, "blog": [], "brush": [], "co": [], "nz": [], "2017": [], "11": [], "effici": 8, "60": 8, "line": 8, "korynunn": [], "wordpress": [], "2013": [], "03": [], "19": [], "isnt": [], "attach": [1, 6], "encapsul": [1, 6], "regular": [], "advanc": [], "prevent": [], "componentopt": 4, "pass": 4, "find": 4, "alwai": 4, "overrid": [1, 4], "ya": 4, "effect": [4, 10], "befor": 4, "merg": 4, "hidden": 4, "visibl": 4, "invis": 4, "layout": 4, "basic": 4, "still": 4, "affect": [1, 4, 6], "benefici": 4, "shift": 4, "what": 4, "doe": 4, "non": 4, "ridicul": 8, "fast": 8, "goe": 8, "depth": 8, "skip": 8, "spici": 8, "take": 8, "modifi": 8, "about": 8, "perform": 8, "reusabl": 9, "enhanc": 9, "licens": 9, "mit": 9, "pr": 9, "report": 9, "fail": 9, "test": 9, "extrem": 9, "appreci": 9, "Being": [], "being": [], "identifi": [], "mode": [], "cna": [], "let": [], "ref": [], "textbox": [], "need": [], "instead": [], "6kb": [], "refid": [], "rest": 1, "disabl": 1, "behavior": 1, "h1": 6, "kb": 9, "newli": [], "present": 1, "after": 1, "unknown": 1, "externaldata": [], "apidata": 1, "blob": [], "output": 1, "messag": 1, "whether": 1, "latest": 10, "version": 10, "cdn": 10, "break": 10, "16": 10, "avoid": [], "minim": 10, "serv": 4, "filesystem": []}, "objects": {}, "objtypes": {}, "objnames": {}, "titleterms": {"introduct": 9, "featur": 9, "instal": 10, "browser": 10, "npm": 10, "dlite": 8, "faq": 8, "how": 8, "big": 8, "i": 8, "why": 8, "yet": 8, "anoth": 8, "javascript": [5, 7, 8], "librari": 8, "doe": 8, "replac": 8, "react": 8, "vue": 8, "etc": 8, "size": 8, "matter": 8, "acknowledg": 9, "realli": 8, "exampl": [5, 7], "reactiv": [], "lifecycl": [1, 7], "In": [4, 7], "place": [4, 7], "templat": [1, 5, 6, 7], "access": [1, 5, 7], "custom": [1, 4, 7], "element": [4, 7], "from": 7, "direct": [2, 7], "two": 7, "wai": 7, "data": [0, 1, 7], "bind": [0, 7], "comput": [1, 7], "event": [3, 7], "handl": 7, "nest": 7, "compon": 7, "who": 8, "creat": [1, 8], "thi": [1, 8], "prop": [1, 7], "els": [], "style": 2, "class": 2, "kei": [], "text": 2, "valu": 3, "configur": [1, 4], "properti": [], "el": 1, "tagnam": 1, "initi": 4, "object": 4, "arrai": 4, "method": 1, "index": [], "shadowdom": 1, "store": [1, 5], "updat": 1, "remov": 1, "defin": [], "pass": 3, "call": 3, "name": 3, "list": [], "htmlanchorel": 3, "htmlinputel": 3, "htmltextareael": 3, "htmlselectel": 3, "htmlformel": 3, "all": 3, "interpol": 6, "what": [], "about": [], "us": [], "litest": 5, "setup": 5, "relat": 9, "project": 9, "isn": 8, "t": 8, "dom": 8, "slow": 8, "share": 4, "prevent": 4, "flicker": 4, "refid": [], "scope": 6, "css": 6, "set": 1, "debug": 1}, "envversion": {"sphinx.domains.c": 2, "sphinx.domains.changeset": 1, "sphinx.domains.citation": 1, "sphinx.domains.cpp": 8, "sphinx.domains.index": 1, "sphinx.domains.javascript": 2, "sphinx.domains.math": 2, "sphinx.domains.python": 3, "sphinx.domains.rst": 2, "sphinx.domains.std": 2, "sphinx.ext.intersphinx": 1, "sphinx": 57}, "alltitles": {"Data Binding": [[0, "data-binding"]], "Configuration": [[1, "configuration"], [4, "configuration"]], "Settings": [[1, "settings"]], "el": [[1, "el"]], "tagName": [[1, "tagname"]], "template": [[1, "template"]], "data": [[1, "data"]], "Computed data": [[1, "computed-data"]], "$store": [[1, "store"]], "shadowDOM": [[1, "shadowdom"]], "debug": [[1, "debug"]], "Methods": [[1, "methods"]], "Lifecycle methods": [[1, "lifecycle-methods"]], "created": [[1, "created"]], "updated": [[1, "updated"]], "removed": [[1, "removed"]], "Custom methods": [[1, "custom-methods"]], "Access to this": [[1, "access-to-this"]], "this.el": [[1, "this-el"]], "this.data": [[1, "this-data"]], "this.prop": [[1, "this-prop"]], "Directives": [[2, "directives"], [7, "directives"]], "if": [[2, "if"]], "for": [[2, "for"]], "class": [[2, "class"]], "style": [[2, "style"]], "text": [[2, "text"]], "Events": [[3, "events"]], "Passing values": [[3, "passing-values"]], "@call": [[3, "call"]], "HTMLAnchorElement": [[3, "htmlanchorelement"]], "HTMLInputElement and HTMLTextAreaElement": [[3, "htmlinputelement-and-htmltextareaelement"]], "HTMLSelectElement": [[3, "htmlselectelement"]], "HTMLFormElement": [[3, "htmlformelement"]], "All event names": [[3, "all-event-names"]], "Initialize": [[4, "initialize"]], "Object": [[4, "object"]], "Array of objects": [[4, "array-of-objects"]], "Shared configuration": [[4, "shared-configuration"]], "Custom element": [[4, "custom-element"]], "In-place element": [[4, "in-place-element"]], "Prevent flickering": [[4, "prevent-flickering"]], "Store": [[5, "store"]], "Setup": [[5, "setup"]], "Access the store": [[5, "access-the-store"]], "JavaScript": [[5, "javascript"]], "Template": [[5, "template"], [6, "template"]], "Example with Litestate": [[5, "example-with-litestate"]], "Interpolation": [[6, "interpolation"]], "Scoped CSS": [[6, "scoped-css"]], "Examples": [[7, "examples"]], "Props": [[7, "props"]], "Lifecycle": [[7, "lifecycle"]], "In-place template": [[7, "in-place-template"]], "Access custom element from JavaScript": [[7, "access-custom-element-from-javascript"]], "Two-way data binding and computed data": [[7, "two-way-data-binding-and-computed-data"]], "Event handling": [[7, "event-handling"]], "Nested components": [[7, "nested-components"]], "FAQ": [[8, "faq"]], "How big is dlite?": [[8, "how-big-is-dlite"]], "Why yet another JavaScript library?": [[8, "why-yet-another-javascript-library"]], "Does it replace React, Vue etc?": [[8, "does-it-replace-react-vue-etc"]], "Isn\u2019t the DOM slow?": [[8, "isn-t-the-dom-slow"]], "Does size really matter?": [[8, "does-size-really-matter"]], "Who created this?": [[8, "who-created-this"]], "Introduction": [[9, "introduction"]], "\u2b50 Features": [[9, "features"]], "\ud83e\udde0 Related projects": [[9, "related-projects"]], "\ud83d\ude4c Acknowledgements": [[9, "acknowledgements"]], "Installation": [[10, "installation"]], "Browser": [[10, "browser"]], "NPM": [[10, "npm"]]}, "indexentries": {}}) \ No newline at end of file diff --git a/src/emerj.js b/src/emerj.js index 0d34a6e..6a38478 100644 --- a/src/emerj.js +++ b/src/emerj.js @@ -3,23 +3,26 @@ * https://github.com/bryhoyt/emerj */ -import { getAttrs, isElement } from './utils.js'; +import { getAttrs, isElement } from "./utils.js"; -const getNodesByKey = (parent, makeKey) => +export const getNodesByKey = (parent, makeKey) => Array.from(parent.childNodes) - .filter(e => makeKey(e)) - .map(e => ({ [makeKey(e)]: e })) + .filter((e) => makeKey(e)) + .map((e) => ({ [makeKey(e)]: e })) .reduce((pV, cK) => ({ ...pV, ...cK }), {}); /** * * @param {HTMLElement} node */ -const nodeRefKey = node => (isElement(node) && node.hasAttribute('ref-key') ? node.getAttribute('ref-key') : node.id); +const nodeRefKey = (node) => + isElement(node) && node.hasAttribute("ref-key") + ? node.getAttribute("ref-key") + : node.id; export default function merge(base, modified, opts = {}) { - opts = { key: node => nodeRefKey(node), ...opts }; - if (typeof modified === 'string') { + opts = { key: (node) => nodeRefKey(node), ...opts }; + if (typeof modified === "string") { const html = modified; modified = document.createElement(base.nodeName); modified.innerHTML = html; @@ -36,13 +39,20 @@ export default function merge(base, modified, opts = {}) { const newKey = opts.key(newNode); if (opts.key(baseNode) || newKey) { - const match = newKey && newKey in nodesByKeyOld ? nodesByKeyOld[newKey] : newNode; + const match = + newKey && newKey in nodesByKeyOld ? nodesByKeyOld[newKey] : newNode; if (match !== baseNode) baseNode = base.insertBefore(match, baseNode); } - if (baseNode.nodeType !== newNode.nodeType || baseNode.tagName !== newNode.tagName) { + if ( + baseNode.nodeType !== newNode.nodeType || + baseNode.tagName !== newNode.tagName + ) { base.replaceChild(newNode, baseNode); - } else if ([Node.TEXT_NODE, Node.COMMENT_NODE].indexOf(baseNode.nodeType) >= 0) { - if (baseNode.textContent !== newNode.textContent) baseNode.textContent = newNode.textContent; + } else if ( + [Node.TEXT_NODE, Node.COMMENT_NODE].indexOf(baseNode.nodeType) >= 0 + ) { + if (baseNode.textContent !== newNode.textContent) + baseNode.textContent = newNode.textContent; } else if (baseNode !== newNode) { const attrsBase = getAttrs(baseNode); const attrsNew = getAttrs(newNode); @@ -50,7 +60,8 @@ export default function merge(base, modified, opts = {}) { if (!(attr in attrsNew)) baseNode.removeAttribute(attr); } for (const attr in attrsNew) { - if (!(attr in attrsBase && attrsBase[attr] === attrsNew[attr])) baseNode.setAttribute(attr, attrsNew[attr]); + if (!(attr in attrsBase && attrsBase[attr] === attrsNew[attr])) + baseNode.setAttribute(attr, attrsNew[attr]); } merge(baseNode, newNode); }