@iconstorm/lol-element - npm Package Compare versions

Comparing version 1.0.0-beta.0 to 1.0.0-beta.1

dist/lol.js

@@ -23,2 +23,3 @@ import { render } from 'uhtml';
 // @ts-check
+const p = Promise.resolve();
 class LOLElement extends HTMLElement {
@@ -100,2 +101,6 @@ /* "public" API */
   }
+
+  tick(fn = () => {}) {
+    return p.then(fn);
+  }
   /* "private" stuff */
@@ -122,4 +127,5 @@
   connectedCallback() {
+    // Order is important
+    this.render();
     this.adoptStyles();
-    this.render();
   }
@@ -126,0 +132,0 @@ /**

dist/lol.legacy.js

@@ -138,2 +138,3 @@ import { render } from 'uhtml';
 // @ts-check
+var p = Promise.resolve();
 var LOLElement = /*#__PURE__*/function (_HTMLElement) {
@@ -194,2 +195,10 @@ _inheritsLoose(LOLElement, _HTMLElement);
     this.dispatchEvent(event);
+  };
+
+  _proto.tick = function tick(fn) {
+    if (fn === void 0) {
+      fn = function fn() {};
+    }
+
+    return p.then(fn);
   }
@@ -213,4 +222,5 @@ /* "private" stuff */
   _proto.connectedCallback = function connectedCallback() {
+    // Order is important
+    this.render();
     this.adoptStyles();
-    this.render();
   }
@@ -217,0 +227,0 @@ /**

dist/lol.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).lol={})}(this,function(e){function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function n(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,s(e,t)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function u(e,t,n){return(u=l()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&s(o,n.prototype),o}).apply(null,arguments)}function a(e){var t="function"==typeof Map?new Map:void 0;return(a=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return u(e,arguments,i(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),s(n,e)})(e)}var c=function(e){o(i,e);var t=i.prototype;function i(){var t,n=(t=e.call(this)||this).constructor.shadowOptions;return null!==n&&t.attachShadow(n),t.renderRoot=t.shadowRoot||function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t),t}return t.template=function(e){return null},t.render=function(){console.log("The `render` method is not defined in "+this.name)},t.changed=function(e,t,n){},t.emit=function(e,t,n){void 0===n&&(n={});var o=new CustomEvent(e,r({detail:t},{bubbles:!0,cancelable:!0},n));this.dispatchEvent(o)},t.connectedCallback=function(){this.adoptStyles(),this.render()},t.attributeChangedCallback=function(e,t,n){var r=p(e)+"Changed";this.changed(e,t,n),r in this&&!1===this[r](t,n)||this.isConnected&&this.render()},t.adoptStyles=function(){var e=this.constructor,t=e.name,n=e.styles;if(null!=n){var r=n.styleSheet;if(null!==r&&this.shadowRoot)this.shadowRoot.adoptedStyleSheets=[r];else if(null===r||this.shadowRoot){var o=document.createElement("style");if(o.textContent=n.toString(),this.shadowRoot)this.shadowRoot.appendChild(o);else{if(o.setAttribute("data-custom-element",t),null!==document.getElementById(o.id))return;document.head.appendChild(o)}}else{if(document.adoptedStyleSheets.indexOf(r)>-1)return;document.adoptedStyleSheets=[].concat(document.adoptedStyleSheets,[r])}}},n(i,null,[{key:"shadowOptions",get:function(){return{mode:"open"}}},{key:"styles",get:function(){return null}},{key:"attributes",get:function(){return[]}},{key:"observedAttributes",get:function(){return(e=this.prototype,t=this.attributes,n=t.map(function(e){return new d("string"==typeof e?{name:e}:e)}),n.forEach(function(t){if(!1!==t.reflect){var n=t.name,r=t.propertyName,o=t.boolean,i=t.read,s=t.write,l=t.fallbackValue,u=Object.getOwnPropertyDescriptor(e,r);if(!(u&&u.get&&u.set)){var a={enumerable:!1,configurable:!0,get:function(){return o?this.hasAttribute(n):null==this.getAttribute(n)&&void 0!==l?l:i(this.getAttribute(n))},set:function(e){o?e?this.setAttribute(n,""):this.removeAttribute(n):this.setAttribute(n,s(e))}};u&&u.get&&(a.get=u.get),u&&u.set&&(a.set=u.set),Object.defineProperty(e,r,a)}}}),n).map(function(e){return e.name});var e,t,n}}]),i}(a(HTMLElement)),f=function(e){return e},d=function(e){var t=e.name,n=e.reflect,r=void 0===n||n,o=e.boolean,i=void 0!==o&&o,s=e.read,l=void 0===s?f:s,u=e.write,a=void 0===u?f:u,c=e.fallbackValue,d=void 0===c?void 0:c;this.name=t,this.reflect=r,this.boolean=i,this.read=l,this.write=a,this.fallbackValue=d,this.propertyName=p(t)};function p(e){return e.replace(/[-_]\w/gi,function(e){return e[1].toUpperCase()})}var h=window.ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,y=Symbol("styles"),m=function(){function e(e,t){if(t!==y)throw new Error("CSSResult is not constructable, use `css` instead.");Object.defineProperty(this,"cssText",{writable:!1,enumerable:!1,value:e})}return e.prototype.toString=function(){return this.cssText},n(e,[{key:"styleSheet",get:function(){return void 0===this._styleSheet&&(h?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}}]),e}();function b(e){if(e instanceof m)return e.cssText;if("number"==typeof e)return e;throw new Error("Value passed to 'css' function must be a 'css' function result: "+e+".")}var v=e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)});const g=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,w=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,S=/<[a-z][^>]+$/i,x=/>[^<>]*$/,C=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,O=/\s+$/,k=(e,t)=>0<t--&&(S.test(e[t])||!x.test(e[t])&&k(e,t)),N=(e,t,n)=>w.test(t)?e:`<${t}${n.replace(O,"")}></${t}>`,{isArray:A}=Array,{indexOf:E,slice:T}=[],$=(e,t)=>111===e.nodeType?1/t<0?t?(({firstChild:e,lastChild:t})=>{const n=document.createRange();return n.setStartAfter(e),n.setEndAfter(t),n.deleteContents(),e})(e):e.lastChild:t?e.valueOf():e.firstChild:e,R=(e,t)=>{let n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),t=>{const o=A(t)?t:[t,!1];n!==o[0]&&(n&&e.removeEventListener(r,n,o[1]),(n=o[0])&&e.addEventListener(r,n,o[1]))}};var j=function(e){var t="fragment",n="template",r="content"in i(n)?function(e){var t=i(n);return t.innerHTML=e,t.content}:function(e){var r=i(t),s=i(n),l=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var u=RegExp.$1;s.innerHTML="<table>"+e+"</table>",l=s.querySelectorAll(u)}else s.innerHTML=e,l=s.childNodes;return o(r,l),r};return function(e,t){return("svg"===t?s:r)(e)};function o(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function i(n){return n===t?e.createDocumentFragment():e.createElementNS("http://www.w3.org/1999/xhtml",n)}function s(e){var n=i(t),r=i("div");return r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>",o(n,r.firstChild.childNodes),n}}(document);const _=({childNodes:e},t)=>e[t],L=e=>{const t=[];let{parentNode:n}=e;for(;n;)t.push(E.call(n.childNodes,e)),n=(e=n).parentNode;return t},{createTreeWalker:M,importNode:P}=document,B=1!=P.length,D=B?(e,t,n)=>P.call(document,j(e,t,n),!0):j,H=B?e=>M.call(document,e,129,null,!1):e=>M.call(document,e,129),V=(e,t,n)=>((e,t,n,r,o)=>{const i=n.length;let s=t.length,l=i,u=0,a=0,c=null;for(;u<s||a<l;)if(s===u){const t=l<i?a?r(n[a-1],-0).nextSibling:r(n[l-a],0):o;for(;a<l;)e.insertBefore(r(n[a++],1),t)}else if(l===a)for(;u<s;)c&&c.has(t[u])||e.removeChild(r(t[u],-1)),u++;else if(t[u]===n[a])u++,a++;else if(t[s-1]===n[l-1])s--,l--;else if(t[u]===n[l-1]&&n[a]===t[s-1]){const o=r(t[--s],-1).nextSibling;e.insertBefore(r(n[a++],1),r(t[u++],-1).nextSibling),e.insertBefore(r(n[--l],1),o),t[s]=n[l]}else{if(!c){c=new Map;let e=a;for(;e<l;)c.set(n[e],e++)}if(c.has(t[u])){const o=c.get(t[u]);if(a<o&&o<l){let i=u,f=1;for(;++i<s&&i<l&&c.get(t[i])===o+f;)f++;if(f>o-a){const i=r(t[u],0);for(;a<o;)e.insertBefore(r(n[a++],1),i)}else e.replaceChild(r(n[a++],1),r(t[u++],-1))}else u++}else e.removeChild(r(t[u++],-1))}return n})(e.parentNode,t,n,$,e);function W(e){const{type:t,path:n}=e,r=n.reduceRight(_,this);return"node"===t?(e=>{let t,n,r=[];const o=i=>{switch(typeof i){case"string":case"number":case"boolean":t!==i&&(t=i,n||(n=document.createTextNode("")),n.data=i,r=V(e,r,[n]));break;case"object":case"undefined":if(null==i){t!=i&&(t=i,r=V(e,r,[]));break}if(A(i)){t=i,0===i.length?r=V(e,r,[]):"object"==typeof i[0]?r=V(e,r,i):o(String(i));break}t!==i&&"ELEMENT_NODE"in i&&(t=i,r=V(e,r,11===i.nodeType?T.call(i.childNodes):[i]));break;case"function":o(i(e))}};return o})(r):"attr"===t?((e,t)=>{switch(t[0]){case"?":return((e,t,n)=>r=>{n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1),!1);case".":return((e,t)=>"dataset"===t?(({dataset:e})=>t=>{for(const n in t){const r=t[n];null==r?delete e[n]:e[n]=r}})(e):n=>{e[t]=n})(e,t.slice(1));case"@":return R(e,"on"+t.slice(1));case"o":if("n"===t[1])return R(e,t)}switch(t){case"ref":return(e=>{let t;return n=>{t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}})(e);case"aria":return(e=>t=>{for(const n in t){const r="role"===n?n:`aria-${n}`,o=t[n];null==o?e.removeAttribute(r):e.setAttribute(r,o)}})(e)}return((e,t)=>{let n,r=!0;const o=document.createAttributeNS(null,t);return t=>{n!==t&&(n=t,null==n?r||(e.removeAttributeNode(o),r=!0):(o.value=t,r&&(e.setAttributeNodeNS(o),r=!1)))}})(e,t)})(r,e.name):(e=>{let t;return n=>{t!=n&&(t=n,e.textContent=null==n?"":n)}})(r)}const z=v(new WeakMap),F=/^(?:plaintext|script|style|textarea|title|xmp)$/i,q=(e,{type:t,template:n,values:r})=>{const{length:o}=r;I(e,r,o);let{entry:i}=e;i&&i.template===n&&i.type===t||(e.entry=i=((e,t)=>{const{content:n,updates:r}=((e,t)=>{const{content:n,nodes:r}=z.get(t)||z.set(t,((e,t)=>{const n=((e,t,n)=>{const r=[],{length:o}=e;for(let t=1;t<o;t++){const n=e[t-1];r.push(g.test(n)&&k(e,t)?n.replace(g,(e,n,r)=>`isµ${t-1}=${r||'"'}${n}${r?"":'"'}`):`${n}\x3c!--isµ${t-1}--\x3e`)}r.push(e[o-1]);const i=r.join("").trim();return n?i:i.replace(C,N)})(t,0,"svg"===e),r=D(n,e),o=H(r),i=[],s=t.length-1;let l=0,u=`isµ${l}`;for(;l<s;){const e=o.nextNode();if(!e)throw`bad template: ${n}`;if(8===e.nodeType)e.data===u&&(i.push({type:"node",path:L(e)}),u="isµ"+ ++l);else{for(;e.hasAttribute(u);)i.push({type:"attr",path:L(e),name:e.getAttribute(u)}),e.removeAttribute(u),u="isµ"+ ++l;F.test(e.tagName)&&e.textContent.trim()===`\x3c!--${u}--\x3e`&&(e.textContent="",i.push({type:"text",path:L(e)}),u="isµ"+ ++l)}}return{content:r,nodes:i}})(e,t)),o=P.call(document,n,!0);return{content:o,updates:r.map(W,o)}})(e,t);return{type:e,template:t,content:n,updates:r,wire:null}})(t,n));const{content:s,updates:l,wire:u}=i;for(let e=0;e<o;e++)l[e](r[e]);return u||(i.wire=(e=>{const{childNodes:t}=e,{length:n}=t;if(n<2)return n?t[0]:e;const r=T.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf(){if(t.length!==n){let t=0;for(;t<n;)e.appendChild(r[t++])}return e}}})(s))},I=({stack:e},t,n)=>{for(let r=0;r<n;r++){const n=t[r];n instanceof U?t[r]=q(e[r]||(e[r]={stack:[],entry:null,wire:null}),n):A(n)?I(e[r]||(e[r]={stack:[],entry:null,wire:null}),n,n.length):e[r]=null}n<e.length&&e.splice(n)};function U(e,t,n){this.type=e,this.template=t,this.values=n}const{create:G,defineProperties:J}=Object,K=e=>{const t=v(new WeakMap);return J((t,...n)=>new U(e,t,n),{for:{value(n,r){const o=t.get(n)||t.set(n,G(null));return o[r]||(o[r]=(t=>(n,...r)=>q(t,{type:e,template:n,values:r}))({stack:[],entry:null,wire:null}))}},node:{value:(t,...n)=>q({stack:[],entry:null,wire:null},{type:e,template:t,values:n}).valueOf()}})},Q=v(new WeakMap),X=K("html"),Y=K("svg");e.LOL=function(e){function t(){return e.apply(this,arguments)||this}return o(t,e),t.prototype.render=function(){var e=this.template(this);((e,t)=>{const n="function"==typeof t?t():t,r=Q.get(e)||Q.set(e,{stack:[],entry:null,wire:null}),o=n instanceof U?q(r,n):n;o!==r.wire&&(r.wire=o,e.textContent="",e.appendChild(o.valueOf()))})(this.renderRoot,e)},t}(c),e.css=function(e){var t=[].slice.call(arguments,1).reduce(function(t,n,r){return t+b(n)+e[r+1]},e[0]);return new m(t,y)},e.html=X,e.svg=Y});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).lol={})}(this,function(e){function t(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function n(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function o(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,s(e,t)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function l(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(e){return!1}}function u(e,t,n){return(u=l()?Reflect.construct:function(e,t,n){var r=[null];r.push.apply(r,t);var o=new(Function.bind.apply(e,r));return n&&s(o,n.prototype),o}).apply(null,arguments)}function a(e){var t="function"==typeof Map?new Map:void 0;return(a=function(e){if(null===e||-1===Function.toString.call(e).indexOf("[native code]"))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,n)}function n(){return u(e,arguments,i(this).constructor)}return n.prototype=Object.create(e.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),s(n,e)})(e)}var c=Promise.resolve(),f=function(e){o(i,e);var t=i.prototype;function i(){var t,n=(t=e.call(this)||this).constructor.shadowOptions;return null!==n&&t.attachShadow(n),t.renderRoot=t.shadowRoot||function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t),t}return t.template=function(e){return null},t.render=function(){console.log("The `render` method is not defined in "+this.name)},t.changed=function(e,t,n){},t.emit=function(e,t,n){void 0===n&&(n={});var o=new CustomEvent(e,r({detail:t},{bubbles:!0,cancelable:!0},n));this.dispatchEvent(o)},t.tick=function(e){return void 0===e&&(e=function(){}),c.then(e)},t.connectedCallback=function(){this.render(),this.adoptStyles()},t.attributeChangedCallback=function(e,t,n){var r=h(e)+"Changed";this.changed(e,t,n),r in this&&!1===this[r](t,n)||this.isConnected&&this.render()},t.adoptStyles=function(){var e=this.constructor,t=e.name,n=e.styles;if(null!=n){var r=n.styleSheet;if(null!==r&&this.shadowRoot)this.shadowRoot.adoptedStyleSheets=[r];else if(null===r||this.shadowRoot){var o=document.createElement("style");if(o.textContent=n.toString(),this.shadowRoot)this.shadowRoot.appendChild(o);else{if(o.setAttribute("data-custom-element",t),null!==document.getElementById(o.id))return;document.head.appendChild(o)}}else{if(document.adoptedStyleSheets.indexOf(r)>-1)return;document.adoptedStyleSheets=[].concat(document.adoptedStyleSheets,[r])}}},n(i,null,[{key:"shadowOptions",get:function(){return{mode:"open"}}},{key:"styles",get:function(){return null}},{key:"attributes",get:function(){return[]}},{key:"observedAttributes",get:function(){return(e=this.prototype,t=this.attributes,n=t.map(function(e){return new p("string"==typeof e?{name:e}:e)}),n.forEach(function(t){if(!1!==t.reflect){var n=t.name,r=t.propertyName,o=t.boolean,i=t.read,s=t.write,l=t.fallbackValue,u=Object.getOwnPropertyDescriptor(e,r);if(!(u&&u.get&&u.set)){var a={enumerable:!1,configurable:!0,get:function(){return o?this.hasAttribute(n):null==this.getAttribute(n)&&void 0!==l?l:i(this.getAttribute(n))},set:function(e){o?e?this.setAttribute(n,""):this.removeAttribute(n):this.setAttribute(n,s(e))}};u&&u.get&&(a.get=u.get),u&&u.set&&(a.set=u.set),Object.defineProperty(e,r,a)}}}),n).map(function(e){return e.name});var e,t,n}}]),i}(a(HTMLElement)),d=function(e){return e},p=function(e){var t=e.name,n=e.reflect,r=void 0===n||n,o=e.boolean,i=void 0!==o&&o,s=e.read,l=void 0===s?d:s,u=e.write,a=void 0===u?d:u,c=e.fallbackValue,f=void 0===c?void 0:c;this.name=t,this.reflect=r,this.boolean=i,this.read=l,this.write=a,this.fallbackValue=f,this.propertyName=h(t)};function h(e){return e.replace(/[-_]\w/gi,function(e){return e[1].toUpperCase()})}var y=window.ShadowRoot&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,m=Symbol("styles"),b=function(){function e(e,t){if(t!==m)throw new Error("CSSResult is not constructable, use `css` instead.");Object.defineProperty(this,"cssText",{writable:!1,enumerable:!1,value:e})}return e.prototype.toString=function(){return this.cssText},n(e,[{key:"styleSheet",get:function(){return void 0===this._styleSheet&&(y?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}}]),e}();function v(e){if(e instanceof b)return e.cssText;if("number"==typeof e)return e;throw new Error("Value passed to 'css' function must be a 'css' function result: "+e+".")}var g=e=>({get:t=>e.get(t),set:(t,n)=>(e.set(t,n),n)});const w=/([^\s\\>"'=]+)\s*=\s*(['"]?)$/,S=/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i,x=/<[a-z][^>]+$/i,C=/>[^<>]*$/,O=/<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/>)/gi,k=/\s+$/,N=(e,t)=>0<t--&&(x.test(e[t])||!C.test(e[t])&&N(e,t)),A=(e,t,n)=>S.test(t)?e:`<${t}${n.replace(k,"")}></${t}>`,{isArray:E}=Array,{indexOf:T,slice:$}=[],R=(e,t)=>111===e.nodeType?1/t<0?t?(({firstChild:e,lastChild:t})=>{const n=document.createRange();return n.setStartAfter(e),n.setEndAfter(t),n.deleteContents(),e})(e):e.lastChild:t?e.valueOf():e.firstChild:e,j=(e,t)=>{let n,r=t.slice(2);return!(t in e)&&t.toLowerCase()in e&&(r=r.toLowerCase()),t=>{const o=E(t)?t:[t,!1];n!==o[0]&&(n&&e.removeEventListener(r,n,o[1]),(n=o[0])&&e.addEventListener(r,n,o[1]))}};var _=function(e){var t="fragment",n="template",r="content"in i(n)?function(e){var t=i(n);return t.innerHTML=e,t.content}:function(e){var r=i(t),s=i(n),l=null;if(/^[^\S]*?<(col(?:group)?|t(?:head|body|foot|r|d|h))/i.test(e)){var u=RegExp.$1;s.innerHTML="<table>"+e+"</table>",l=s.querySelectorAll(u)}else s.innerHTML=e,l=s.childNodes;return o(r,l),r};return function(e,t){return("svg"===t?s:r)(e)};function o(e,t){for(var n=t.length;n--;)e.appendChild(t[0])}function i(n){return n===t?e.createDocumentFragment():e.createElementNS("http://www.w3.org/1999/xhtml",n)}function s(e){var n=i(t),r=i("div");return r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg">'+e+"</svg>",o(n,r.firstChild.childNodes),n}}(document);const L=({childNodes:e},t)=>e[t],M=e=>{const t=[];let{parentNode:n}=e;for(;n;)t.push(T.call(n.childNodes,e)),n=(e=n).parentNode;return t},{createTreeWalker:P,importNode:B}=document,D=1!=B.length,H=D?(e,t,n)=>B.call(document,_(e,t,n),!0):_,V=D?e=>P.call(document,e,129,null,!1):e=>P.call(document,e,129),W=(e,t,n)=>((e,t,n,r,o)=>{const i=n.length;let s=t.length,l=i,u=0,a=0,c=null;for(;u<s||a<l;)if(s===u){const t=l<i?a?r(n[a-1],-0).nextSibling:r(n[l-a],0):o;for(;a<l;)e.insertBefore(r(n[a++],1),t)}else if(l===a)for(;u<s;)c&&c.has(t[u])||e.removeChild(r(t[u],-1)),u++;else if(t[u]===n[a])u++,a++;else if(t[s-1]===n[l-1])s--,l--;else if(t[u]===n[l-1]&&n[a]===t[s-1]){const o=r(t[--s],-1).nextSibling;e.insertBefore(r(n[a++],1),r(t[u++],-1).nextSibling),e.insertBefore(r(n[--l],1),o),t[s]=n[l]}else{if(!c){c=new Map;let e=a;for(;e<l;)c.set(n[e],e++)}if(c.has(t[u])){const o=c.get(t[u]);if(a<o&&o<l){let i=u,f=1;for(;++i<s&&i<l&&c.get(t[i])===o+f;)f++;if(f>o-a){const i=r(t[u],0);for(;a<o;)e.insertBefore(r(n[a++],1),i)}else e.replaceChild(r(n[a++],1),r(t[u++],-1))}else u++}else e.removeChild(r(t[u++],-1))}return n})(e.parentNode,t,n,R,e);function z(e){const{type:t,path:n}=e,r=n.reduceRight(L,this);return"node"===t?(e=>{let t,n,r=[];const o=i=>{switch(typeof i){case"string":case"number":case"boolean":t!==i&&(t=i,n||(n=document.createTextNode("")),n.data=i,r=W(e,r,[n]));break;case"object":case"undefined":if(null==i){t!=i&&(t=i,r=W(e,r,[]));break}if(E(i)){t=i,0===i.length?r=W(e,r,[]):"object"==typeof i[0]?r=W(e,r,i):o(String(i));break}t!==i&&"ELEMENT_NODE"in i&&(t=i,r=W(e,r,11===i.nodeType?$.call(i.childNodes):[i]));break;case"function":o(i(e))}};return o})(r):"attr"===t?((e,t)=>{switch(t[0]){case"?":return((e,t,n)=>r=>{n!==!!r&&((n=!!r)?e.setAttribute(t,""):e.removeAttribute(t))})(e,t.slice(1),!1);case".":return((e,t)=>"dataset"===t?(({dataset:e})=>t=>{for(const n in t){const r=t[n];null==r?delete e[n]:e[n]=r}})(e):n=>{e[t]=n})(e,t.slice(1));case"@":return j(e,"on"+t.slice(1));case"o":if("n"===t[1])return j(e,t)}switch(t){case"ref":return(e=>{let t;return n=>{t!==n&&(t=n,"function"==typeof n?n(e):n.current=e)}})(e);case"aria":return(e=>t=>{for(const n in t){const r="role"===n?n:`aria-${n}`,o=t[n];null==o?e.removeAttribute(r):e.setAttribute(r,o)}})(e)}return((e,t)=>{let n,r=!0;const o=document.createAttributeNS(null,t);return t=>{n!==t&&(n=t,null==n?r||(e.removeAttributeNode(o),r=!0):(o.value=t,r&&(e.setAttributeNodeNS(o),r=!1)))}})(e,t)})(r,e.name):(e=>{let t;return n=>{t!=n&&(t=n,e.textContent=null==n?"":n)}})(r)}const F=g(new WeakMap),q=/^(?:plaintext|script|style|textarea|title|xmp)$/i,I=(e,{type:t,template:n,values:r})=>{const{length:o}=r;U(e,r,o);let{entry:i}=e;i&&i.template===n&&i.type===t||(e.entry=i=((e,t)=>{const{content:n,updates:r}=((e,t)=>{const{content:n,nodes:r}=F.get(t)||F.set(t,((e,t)=>{const n=((e,t,n)=>{const r=[],{length:o}=e;for(let t=1;t<o;t++){const n=e[t-1];r.push(w.test(n)&&N(e,t)?n.replace(w,(e,n,r)=>`isµ${t-1}=${r||'"'}${n}${r?"":'"'}`):`${n}\x3c!--isµ${t-1}--\x3e`)}r.push(e[o-1]);const i=r.join("").trim();return n?i:i.replace(O,A)})(t,0,"svg"===e),r=H(n,e),o=V(r),i=[],s=t.length-1;let l=0,u=`isµ${l}`;for(;l<s;){const e=o.nextNode();if(!e)throw`bad template: ${n}`;if(8===e.nodeType)e.data===u&&(i.push({type:"node",path:M(e)}),u="isµ"+ ++l);else{for(;e.hasAttribute(u);)i.push({type:"attr",path:M(e),name:e.getAttribute(u)}),e.removeAttribute(u),u="isµ"+ ++l;q.test(e.tagName)&&e.textContent.trim()===`\x3c!--${u}--\x3e`&&(e.textContent="",i.push({type:"text",path:M(e)}),u="isµ"+ ++l)}}return{content:r,nodes:i}})(e,t)),o=B.call(document,n,!0);return{content:o,updates:r.map(z,o)}})(e,t);return{type:e,template:t,content:n,updates:r,wire:null}})(t,n));const{content:s,updates:l,wire:u}=i;for(let e=0;e<o;e++)l[e](r[e]);return u||(i.wire=(e=>{const{childNodes:t}=e,{length:n}=t;if(n<2)return n?t[0]:e;const r=$.call(t,0);return{ELEMENT_NODE:1,nodeType:111,firstChild:r[0],lastChild:r[n-1],valueOf(){if(t.length!==n){let t=0;for(;t<n;)e.appendChild(r[t++])}return e}}})(s))},U=({stack:e},t,n)=>{for(let r=0;r<n;r++){const n=t[r];n instanceof G?t[r]=I(e[r]||(e[r]={stack:[],entry:null,wire:null}),n):E(n)?U(e[r]||(e[r]={stack:[],entry:null,wire:null}),n,n.length):e[r]=null}n<e.length&&e.splice(n)};function G(e,t,n){this.type=e,this.template=t,this.values=n}const{create:J,defineProperties:K}=Object,Q=e=>{const t=g(new WeakMap);return K((t,...n)=>new G(e,t,n),{for:{value(n,r){const o=t.get(n)||t.set(n,J(null));return o[r]||(o[r]=(t=>(n,...r)=>I(t,{type:e,template:n,values:r}))({stack:[],entry:null,wire:null}))}},node:{value:(t,...n)=>I({stack:[],entry:null,wire:null},{type:e,template:t,values:n}).valueOf()}})},X=g(new WeakMap),Y=Q("html"),Z=Q("svg");e.LOL=function(e){function t(){return e.apply(this,arguments)||this}return o(t,e),t.prototype.render=function(){var e=this.template(this);((e,t)=>{const n="function"==typeof t?t():t,r=X.get(e)||X.set(e,{stack:[],entry:null,wire:null}),o=n instanceof G?I(r,n):n;o!==r.wire&&(r.wire=o,e.textContent="",e.appendChild(o.valueOf()))})(this.renderRoot,e)},t}(f),e.css=function(e){var t=[].slice.call(arguments,1).reduce(function(t,n,r){return t+v(n)+e[r+1]},e[0]);return new b(t,m)},e.html=Y,e.svg=Z});
 //# sourceMappingURL=lol.umd.js.map

package.json

 {
   "name": "@iconstorm/lol-element",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "A base class for creating Web Components like you know what you're doing",
@@ -5,0 +5,0 @@ "publishConfig": {

src/lol-element.js

 // @ts-check
 
+const p = Promise.resolve()
+
 export class LOLElement extends HTMLElement {
@@ -74,2 +76,6 @@ /* "public" API */
 
+  tick (fn = () => {}) {
+    return p.then(fn)
+  }
+
   /* "private" stuff */
@@ -95,4 +101,5 @@
   connectedCallback () {
+    // Order is important
+    this.render()
     this.adoptStyles()
-    this.render()
   }
@@ -99,0 +106,0 @@

No alert changes

Improved metrics

Total package byte prevSize

130079

increased by0.7%

Lines of code

1665

increased by1.65%

No dependency changes