@polight/lego/dist/lego.min.js

Tiny Web-Components lib for future-proof HTML mentors

const e={},t=1,n=2,r=4,i=e=>null===e||Array.isArray(e)&&0===e.length,o=e=>Array.isArray(e)&&e.length>0,s=e=>"string"==typeof e||"number"==typeof e,c=e=>e?.vtype===t,l=e=>e?.vtype===n,d=e=>e?.vtype===r,h=e=>"function"==typeof e?.mount;function u(i,o,...s){return o=o??e,function(e,i,o){if(o!=o)throw new Error("Invalid NaN key");const s="string"==typeof e?t:h(e)?r:"function"==typeof e?n:void 0;if(void 0===s)throw new Error("Invalid VNode type");return{vtype:s,type:e,key:o,props:i}}(i,o=s.length>1?Object.assign({},o,{children:s}):1===s.length?Object.assign({},o,{children:s[0]}):o,o.key)}const f=1,p=4,a=8,y="http://www.w3.org/2000/svg";function v(e){return{mount(t,n){t[e]=n},patch(t,n,r){n!==r&&(t[e]=n)},unmount(t,n){t[e]=null}}}const m={selected:v("selected"),checked:v("checked"),value:v("value"),innerHTML:v("innerHTML")},w="http://www.w3.org/1999/xlink",g={show:w,actuate:w,href:w};function S(e){if(e.type===f)return e.node;if(e.type===p)return S(e.children[0]);if(e.type===a)return S(e.childRef);throw new Error("Unkown ref type "+JSON.stringify(e))}function E(e){if(e.type===f)return e.node.parentNode;if(e.type===p)return E(e.children[0]);if(e.type===a)return E(e.childRef);throw new Error("Unkown ref type "+e)}function b(e){if(e.type===f)return e.node.nextSibling;if(e.type===p)return b(e.children[e.children.length-1]);if(e.type===a)return b(e.childRef);throw new Error("Unkown ref type "+JSON.stringify(e))}function k(e,t,n){if(t.type===f)e.insertBefore(t.node,n);else if(t.type===p)t.children.forEach((t=>{k(e,t,n)}));else{if(t.type!==a)throw new Error("Unkown ref type "+JSON.stringify(t));k(e,t.childRef,n)}}function N(e,t){if(t.type===f)e.removeChild(t.node);else if(t.type===p)t.children.forEach((t=>{N(e,t)}));else{if(t.type!==a)throw new Error("Unkown ref type "+t);N(e,t.childRef)}}function A(e,t,n,r){if(!0===n)e.setAttribute(t,"");else if(!1===n)e.removeAttribute(t);else{var i=r?g[t]:void 0;void 0!==i?e.setAttributeNS(i,t,n):e.setAttribute(t,n)}}const T={isSvg:!1,directives:m};class O{constructor(e,t){this.props=e,this._STATE_={env:t,vnode:null,parentDomNode:null,ref:C(null)},this.render=this.render.bind(this)}setProps(e){this.oldProps=this.props,this.props=e}render(e){const t=this._STATE_,n=t.vnode;if(t.vnode=e,null==t.parentDomNode){let n=E(t.ref);if(null==n)return void(t.ref=C(e,t.env));t.parentDomNode=n}t.ref=j(t.parentDomNode,e,n,t.ref,t.env)}}function C(e,t=T){if(i(e))return{type:f,node:document.createComment("NULL")};if(s(e))return{type:f,node:document.createTextNode(e)};if(c(e)){let n,{type:r,props:i}=e;"svg"!==r||t.isSvg||(t=Object.assign({},t,{isSVG:!0})),n=t.isSVG?document.createElementNS(y,r):document.createElement(r),function(e,t,n){for(var r in t)"key"===r||"children"===r||r in n.directives||(r.startsWith("on")?e[r.toLowerCase()]=t[r]:A(e,r,t[r],n.isSVG))}(n,i,t);let o=null==i.children?i.children:C(i.children,t);return null!=o&&k(n,o),function(e,t,n){for(let r in t)r in n.directives&&n.directives[r].mount(e,t[r])}(n,i,t),{type:f,node:n,children:o}}if(o(e))return{type:p,children:e.map((e=>C(e,t)))};if(l(e)){let n=e.type(e.props),r=C(n,t);return{type:a,childRef:r,childState:n}}if(d(e)){let n=new O(e.props,t);return e.type.mount(n),{type:a,childRef:n._STATE_.ref,childState:n}}if(e instanceof Node)return{type:f,node:e};if(void 0===e)throw new Error("mount: vnode is undefined!");throw new Error("mount: Invalid Vnode!")}function R(e,t,n,r,h=T){if(n===t)return r;if(i(t)&&i(n))return r;if(s(t)&&s(n))return r.node.nodeValue=t,r;if(c(t)&&c(n)&&t.type===n.type){"svg"!==t.type||h.isSvg||(h=Object.assign({},h,{isSVG:!0})),function(e,t,n,r){for(var i in t)if("key"!==i&&"children"!==i&&!(i in r.directives)){var o=n[i],s=t[i];o!==s&&(i.startsWith("on")?e[i.toLowerCase()]=s:A(e,i,s,r.isSVG))}for(i in n)"key"===i||"children"===i||i in r.directives||i in t||(i.startsWith("on")?e[i.toLowerCase()]=null:e.removeAttribute(i))}(r.node,t.props,n.props,h);let e=n.props.children,i=t.props.children;return null==e?null!=i&&(r.children=C(i,h),k(r.node,r.children)):null==i?(r.node.textContent="",_(e,r.children,h),r.children=null):r.children=j(r.node,i,e,r.children,h),function(e,t,n,r){for(let i in t)i in r.directives&&r.directives[i].patch(e,t[i],n[i]);for(let i in n)i in r.directives&&!(i in t)&&r.directives[i].unmount(e,n[i])}(r.node,t.props,n.props,h),r}if(o(t)&&o(n))return function(e,t,n,r,i){const o=b(r),s=Array(t.length);let c,l,d,h,u,f=r.children,p=0,a=0,y=t.length-1,v=n.length-1;for(;p<=y&&a<=v;){if(null===f[a]){a++;continue}if(null===f[v]){v--;continue}if(c=n[a],l=t[p],l?.key===c?.key){d=f[a],h=s[p]=j(e,l,c,d,i),p++,a++;continue}if(c=n[v],l=t[y],l?.key===c?.key){d=f[v],h=s[y]=j(e,l,c,d,i),y--,v--;continue}if(null==u){u={};for(let e=a;e<=v;e++)c=n[e],null!=c?.key&&(u[c.key]=e)}l=t[p];const r=null!=l?.key?u[l.key]:null;null!=r?(c=n[r],d=f[r],h=s[p]=R(e,l,c,d,i),k(e,h,S(f[a])),h!==d&&(N(e,d),_(c,d,i)),f[r]=null):(h=s[p]=C(l,i),k(e,h,S(f[a]))),p++}const m=y<t.length-1?S(s[y+1]):o;for(;p<=y;){const n=C(t[p],i);s[p]=n,k(e,n,m),p++}for(;a<=v;)d=f[a],null!=d&&(N(e,d),_(n[a],d,i)),a++;r.children=s}(e,t,n,r,h),r;if(l(t)&&l(n)&&t.type===n.type){let i=t.type;if(null!=i.shouldUpdate?i.shouldUpdate(n.props,t.props):function(e,t){if(e===t)return!1;for(let n in t)if(e[n]!==t[n])return!0;return!1}(n.props,t.props)){let n=i(t.props),o=R(e,n,r.childState,r.childRef,h);return o!==r.childRef?{type:a,childRef:o,childState:n}:(r.childState=n,r)}return r}if(d(t)&&d(n)&&t.type===n.type){const n=r.childState,i=n._STATE_;return i.env=h,i.parentNode=e,n.setProps(t.props),t.type.patch(n),r.childRef!==i.ref?{type:a,childRef:i.ref,childState:n}:r}return t instanceof Node&&n instanceof Node?(r.node=t,r):C(t,h)}function _(e,t,n){c(e)?(!function(e,t,n){for(let r in t)r in n.directives&&n.directives[r].unmount(e,t[r])}(t.node,e.props,n),null!=e.props.children&&_(e.props.children,t.children,n)):o(e)?e.forEach(((e,r)=>_(e,t.children[r],n))):l(e)?_(t.childState,t.childRef,n):d(e)&&e.type.unmount(t.childState)}function j(e,t,n,r,i){const o=R(e,t,n,r,i);return o!==r&&(!function(e,t,n){k(e,t,S(n)),N(e,n)}(e,o,r),_(n,r,i)),o}function L(e,t,n={}){let r=t.$$PETIT_DOM_REF,i=Object.assign({},T);if(Object.assign(i.directives,n.directives),null==r){const n=C(e,i);t.$$PETIT_DOM_REF={ref:n,vnode:e},t.textContent="",k(t,n,null)}else r.ref=j(t,e,r.vnode,r.ref,i),r.vnode=e}function P(e){return e.includes("-")?e.replace(/-([a-z])/g,((e,t)=>t.toUpperCase())):e}function U(e,t){return"object"===e?function(e){try{return JSON.parse(e)}catch(t){return e}}(t):"boolean"===e?""===t||!!t:"number"===e?Number(t):t}class D extends HTMLElement{state={};useShadowDOM=!0;#e=[];#t=!1;#n=!1;#r=[];#i(){this.init?.(),this.#e=Object.keys(this.state),this.#o(),this.document=this.useShadowDOM?this.attachShadow({mode:"open"}):this,this.#n=!0}#o(){this.state=Array.from(this.attributes).reduce(((e,t)=>{const n=P(t.name),r=typeof this.state[n];return{...e,[n]:U(r,t.value)}}),this.state)}get vdom(){return({state:e})=>""}get vstyle(){return({state:e})=>""}setAttribute(e,t){if(e.match(/@[a-z]+(?:-[a-z]+)*/))return this.#r.push([e.slice(1),t]);super.setAttribute(e,"object"==typeof t?JSON.stringify(t):t);const n=P(e),r=typeof this.state[n];this.#e.includes(n)&&this.render({[n]:U(r,t)})}removeAttribute(e){super.removeAttribute(e);const t=P(e),n=typeof this.state[t];this.#e.includes(t)&&t in this.state&&this.render({[t]:U(n,null)})}connectedCallback(){this.#n||this.#i(),this.#t=!0,this.render(),this.#r.forEach((([e,t])=>this.addEventListener(e,t))),this.connected?.()}disconnectedCallback(){this.#t=!1,this.#r.forEach((([e,t])=>this.removeEventListener(e,t))),this.disconnected?.()}setState(e={}){Object.assign(this.state,e),this.changed&&this.#t&&this.changed(e)}set state(e){this.setState(e)}get state(){return this.state}render(e){e&&this.setState(e),this.#t&&(L([this.vdom({state:this.state}),this.vstyle({state:this.state})],this.document),this.rendered?.(e))}}export{D as Component,u as h,L as render};