@iconstorm/lol-element - npm Package Compare versions

Comparing version 1.0.0-alpha.3 to 1.0.0-beta.0

dist/lol.js

@@ -51,7 +51,8 @@ import { render } from 'uhtml';
   /**
-   * @returns {string|Object|Node}
+   * @param {Object} [host]
+   * @returns {string|Object|Node} The template result
    */
 
 
-  template() {
+  template(host) {
     return null;
@@ -61,3 +62,3 @@ }
    * Update the DOM.
-   * 
+   *
    * @returns {void}
@@ -68,2 +69,3 @@ */
   render() {
+    // @ts-ignore
     console.log(`The \`render\` method is not defined in ${this.name}`);
@@ -203,3 +205,3 @@ }
    * @param {(value: any) => string} [config.write]
-   * @param {any} config.fallbackValue - The value returned by the property getter when the attribute is missing
+   * @param {any} [config.fallbackValue] - The value returned by the property getter when the attribute is missing
    */
@@ -206,0 +208,0 @@ constructor({

dist/lol.legacy.js

@@ -144,5 +144,6 @@ import { render } from 'uhtml';
   /**
-   * @returns {string|Object|Node}
+   * @param {Object} [host]
+   * @returns {string|Object|Node} The template result
    */
-  _proto.template = function template() {
+  _proto.template = function template(host) {
     return null;
@@ -152,3 +153,3 @@ }
    * Update the DOM.
-   * 
+   *
    * @returns {void}
@@ -159,2 +160,3 @@ */
   _proto.render = function render() {
+    // @ts-ignore
     console.log("The `render` method is not defined in " + this.name);
@@ -337,3 +339,3 @@ }
  * @param {(value: any) => string} [config.write]
- * @param {any} config.fallbackValue - The value returned by the property getter when the attribute is missing
+ * @param {any} [config.fallbackValue] - The value returned by the property getter when the attribute is missing
  */
@@ -340,0 +342,0 @@ function AttributeConfig(_ref) {

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(){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=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});
 //# sourceMappingURL=lol.umd.js.map

package.json

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

README.md

 # lol element
 
-> A base class for creating Web Components like you know what you're doing
+![npm (scoped)](https://img.shields.io/npm/v/@iconstorm/lol-element) ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@iconstorm/lol-element)
 
-TODO
+A JavaScript base class for creating Web Components like you know what you're doing.
 
-(hint: hide verbose/advanced stuff and/or further explanations inside "toggles" and the end of each section, à la Josh Comeau)
+## Install
 
----
+With npm (or similar):
 
+```
+npm install @iconstorm/lol-element
+```
+
+Via CDN, you can use a script tag:
+
+```html
+<script src="https://unpkg.com/@iconstorm/lol-element"></script>
+<script>
+  const { LOL, css, html } = lol // global window.lol is made available
+</script>
+```
+
+or hotlink in your ES modules:
+
 ```js
-import { LOL, html, css } from 'lol-element/lol.js'
+import { LOL, css, html } from 'https://unpkg.com/@iconstorm/lol-element?module'
+```
 
+## Usage
+
+<details>
+  <summary>Starting with Web Components and custom HTML elements?</summary>
+
+  Please go read the chapter dedicated to them on [the great javascript.info site](https://javascript.info/custom-elements). Once you're familiar with custom elements in general, you'll be enjoying LOL within minutes.
+  
+  Also the [Classes chapter](https://javascript.info/classes) is a recommended read.
+</details>
+
+No build step or transpiling is necessary. All of this just works in the browser.
+
+Define a component:
+
+```js
+import { LOL, html, css } from 'https://unpkg.com/@iconstorm/lol-element'
+
 class HelloWorld extends LOL {
-  static attributes = [
-    { name: 'with-exclamation-mark', boolean: true }
-  ]
+  static get attributes () {
+    return { name: 'with-exclamation-mark', boolean: true }
+  }
 
   static get styles () {
     return css`
-      :host { font-size: 300%; }
+      span { font-size: 300%; }
     `
@@ -35,39 +68,198 @@ }
 
+Use it in your markup:
+
+```html
+<lol-hello-world with-exclamation-mark></lol-hello-world>
+```
+
+🍩 [Try this on CodePen.](https://codepen.io/acstll/pen/oNWNrgb)
+
+## API
+
+- [`LOL` class](#the-lol-class)
+  - [static `shadowOptions`](#static-shadowoptions-static-getter-or-property)
+  - [static `attributes`](#static-attributes-static-getter-or-property)
+  - [static `styles`](#static-styles-static-getter-or-property)
+  - [`template()`](#template-method)
+  - [`changed()`](#changed-method)
+  - [`{propertyName}Changed()`](#propertynamechanged-method)
+  - [`emit()`](#emit-method)
+  - [`render()`](#render-method)
+  - [`renderRoot`](#renderroot-property)
+- [Lifecycle callbacks](#lifecycle-callbacks)
+- [Template syntax](#template-syntax)
+- [Named exports](#named-exports)
+
+### The `LOL` class
+
+#### static `shadowOptions` _static (getter or property)_
+
+Define the [Shadow DOM options](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#syntax) being passed to the `attachShadow()` call.
+
+Defaults to `{ mode: 'open' }`. Use `null` to not use Shadow DOM.
+
 ---
 
-## API draft
+#### static `attributes` _static (getter or property)_
 
-### component class
+Define the element's attributes to be observed with an array of names or [config objects](https://github.com/iconstorm/lol-element/blob/main/src/lol-element.js#L157), with following keys:
 
-#### config
-- static `shadowOptions`
-- static `styles`
-- static `attributes`
-- `template()`
+- `name` string: The name of the attribute
+- `reflect` boolean (default: `true`): Whether the attribute should be reflected in a property 
+- `boolean` boolean (default: `false`): Whether the attribute is a [boolean type of attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#boolean_attributes)
+- `read` function (default: `x => x`): A function to process the property value being accessed
+- `write` function (default: `x => x`): A function to process the value being set in the attribute
+- `fallbackValue`: The value returned by the property getter when the attribute is missing
 
-#### lifecycle
+Except for `name`, all options are optional.
+
+An attribute being reflected means that for a given `foo-bar` attribute, a `fooBar` getter/setter property will be created. So assigning a value to `fooBar` will set the same value to the `foo-bar` attribute. `LOL` has no observable/reactivity system, for simplicity's sake, it leverages the browser's via `attributeChangedCallback`.
+
+<details>
+  <summary>Attributes and props?</summary>
+
+  Attributes live in HTML, properties belong in JavaScript objects. If the different is not clear, [stack overflow is your friend](https://stackoverflow.com/a/6004028). This can create some confusion. This [post by Rich Harris](https://dev.to/richharris/why-i-don-t-use-web-components-2cia) can be interesting (scroll down to part 6).
+</details>
+
+---
+
+#### static `styles` _static (getter or property)_
+
+Define the styles for the component with CSS. The ` css`` ` template literal tag must be used.
+
+<details>
+  <summary>Example</summary>
+
+  ```js
+  import { css } from '@iconstorm/lol-element'
+  
+  // ..
+  
+  static get styles() {
+    return css`
+      :host {
+        font-size: 100%;
+      }
+    `
+  }
+  ```
+</details>
+
+---
+
+#### `template()` _method_
+
+Define the markup of the component, the ` html`` ` template literal tag must be used.
+
+Parameters:
+- `host` object: The element instance
+
+🔥 This method is usually called `render()` in many libraries and frameworks.
+
+<details>
+  <summary>Example</summary>
+
+  ```js
+  import { html } from '@iconstorm/lol-element'
+  
+  // ..
+  
+  template() {
+    return html`
+      <p>Loren ipsum</p>
+    `
+  }
+  ```
+</details>
+
+---
+
+#### `changed()` _method_
+
+Fires every time an attribute is added, removed, or changed. This is only an alias for `attributeChangedCallback` for the convenience of avoiding `super.attributeChangedCallback()`.
+
+Parameters:
+- `name` string: The name of the attribute the changed
+- `oldValue` string
+- `newValue` string
+
+---
+
+#### `{propertyName}Changed()` _method_
+
+An individual callback for every observed attribute, when implemented. For example, every time the `foo-bar` attribute changes, if there's a `fooBarChanged()` method defined, it will be called.
+
+Parameters:
+- `oldValue` string
+- `newValue` string
+
+---
+
+#### `emit()` _method_
+
+A helper to dispatch custom events from within the element.
+
+Parameters:
+- `eventName` string: The name of the event
+- `detail` any: The thing being emitted, available in `event.detail`
+- `options` object: any other options for the event, defaults to `{ bubbles: true, cancelable: true }`
+
+---
+
+#### `render()` _method_
+
+Call this method to trigger a DOM update. You shouldn't need to implement this method.
+
+---
+
+#### `renderRoot` _property_ 
+
+The DOM node where rendering happens. This is either the element's [`shadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) (when using Shadow DOM) or the host element itself (when not).
+
+### Lifecycle callbacks
+
+Apart from `changed()` and `{propertyName}Changed()`, no other lifecycle callbacks are provided other than the ones offered by default in HTMLElement:
+
 - `constructor()`
 - `connectedCallback()`
+- `attributeChangedCallback()`
 - `disconnectedCallback()`
-- `attributeChangedCallback()`
-- `changed()`
-- `{propertyName}Changed()`
-- `render()`
 
-#### helpers
-- `emit()`
+> See [Using the lifecycle callbacks](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks) in MDN.
 
-#### props
-- renderRoot
+<details>
+  <summary>⚠️ Don't forget the `super` keyword when using these.</summary>
 
-### template syntax
+  If you don't call `super` on `constructor`, `connectedCallback` and `attributeChangedCallback`, things will break.
 
-- attributes/properties
-- events
-- refs
+  ```js
+  class MyComponent extends LOL {
+    constructor() {
+      super()
+      // ..
+    }
 
-### exports
+    connectedCallback() {
+      super.connectedCallback()
+      // ..
+    }
 
-- `LOL`
-- `LOLElement`
+    attributeChangedCallback() {
+      super.attributeChangedCallback()
+      // ..
+    }
+  } 
+  ```
+
+  More info: https://javascript.info/class-inheritance#overriding-a-method
+</details>
+
+### Template syntax
+
+See [µhtml](https://www.npmjs.com/package/uhtml) for now.
+
+### Named exports
+
+- `LOL` - extends `LOLElement`, 
+- `LOLElement` - extends `HTMLELement`, `render()` is not implemented
 - `css`
@@ -77,19 +269,18 @@ - `html`*
 
-flavors (view layer)
-- default ([µhtml](https://www.npmjs.com/package/uhtml)) 3K
-- lit-html 4K
-- Preact 4K
-- roll your own
+```js
+import { LOL, LOLElement, css, html, svg } from '@iconstorm/lol-element'
+```
 
----
+*implementation may vary depending on _flavor_ (more on this soon).
 
-https://www.urbandictionary.com/define.php?term=lol (4)
+## Thank-yous (prior art)
 
-used to make something sound less serious or more of a joke even if it's not. similarly used: haha, lmao, lmfao  
-are you okay?  
-yeah lol
+- [FAST](https://github.com/microsoft/fast/)
+- [swiss](https://github.com/luwes/swiss)
+- [Lit](https://github.com/lit/lit/)
+- [Stencil](https://github.com/ionic-team/stencil)
+- [hybrids](https://github.com/hybridsjs/hybrids)
 
-ur not mad right?  
-no lol
+## License
 
-🍩
+MIT

src/lol-element.js

@@ -28,5 +28,6 @@ // @ts-check
   /**
-   * @returns {string|Object|Node}
+   * @param {Object} [host]
+   * @returns {string|Object|Node} The template result
    */
-  template () {
+  template (host) {
     return null
@@ -37,6 +38,7 @@ }
    * Update the DOM.
-   * 
+   *
    * @returns {void}
    */
   render () {
+    // @ts-ignore
     console.log(`The \`render\` method is not defined in ${this.name}`)
@@ -165,3 +167,3 @@ }
    * @param {(value: any) => string} [config.write]
-   * @param {any} config.fallbackValue - The value returned by the property getter when the attribute is missing
+   * @param {any} [config.fallbackValue] - The value returned by the property getter when the attribute is missing
    */
@@ -168,0 +170,0 @@ constructor ({

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

129177

increased by5.77%

Lines of code

1638

increased by0.49%

Number of lines in readme file

285

increased by206.45%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes