extml
Version:
Converts html tagged templates to ExtJS component object.
2 lines (1 loc) • 15.1 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).extml={})}(this,(function(t){"use strict";const e="extml-style-";function s(t,e){if("string"!=typeof t)return;let s=e.replace(/\w/g,"");return t=(t=t.replace(/<\/?style>/g,"").replace(/{/g,"{\n").replace(/}/g,"}\n").replace(/^(\s+)?:(component)(\s+)?{/gm,e+" {").replace(/:(component)/g,"").replace(/(@(?:[\w-]+-)?keyframes\s+)([\w-_]+)/g,`$1 ${s}-$2`).replace(/((?:[\w-]+-)?animation(?:-name)?(?:\s+)?:(?:\s+))([\w-_]+)/g,`$1 ${s}-$2`).replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm,"").replace(/\S.*{/gm,(t=>{if(/^(@|:host|(from|to|\d+%)[^-_])/.test(t))return t;let s=t.split(",");const n=new RegExp(`^${e.replace(/[[\]]/g,"\\$&")}(\\s+)?{`);for(let t=0;t<s.length;t++)s[t]=s[t].trim(),n.test(s[t])||(/^:global/.test(s[t])?s[t]=s[t].replace(":global",""):s[t]=`${e} ${s[t]}`);return t=s.join(",")}))).replace(/\s{2,}/g," ").replace(/{ /g,"{").replace(/ }/g,"}").replace(/\s:/g,":").replace(/\n/g,"").trim()}function n(){if(!this.stylesheet)return;let t=this.getId(),n=document.createElement("style");n.id=e+t,this.stylesheetStateListeners=[];let i="";if(this.stylesheet.some((t=>"function"==typeof t&&!0===t.$$isState))){let e=[],r=()=>this.stylesheet.map((t=>"function"==typeof t&&t.$$isState?(e.push(t),t()):t)).join("");i=r(),e.forEach((e=>{this.stylesheetStateListeners.push(e.$$subscribe((e=>{n.innerHTML=s(r(),"#"+t)})))}))}else i=this.stylesheet.join("");n.innerHTML=s(i,"#"+t),document.head.appendChild(n)}function i(){this.stylesheet&&(this.stylesheetStateListeners&&this.stylesheetStateListeners.forEach((t=>t())),document.getElementById(e+this.getId()).remove())}function r(){Ext.getApplication().appContext=Ext.getApplication().appContext||{},this.appContext=Ext.getApplication().appContext;let t=this.getController(),e=this.query?this.query("*"):[];this.contextName&&(void 0!==this.appContext[this.contextName]&&console.error("A context with this name already exists: "+this.contextName,"itemId:",this.getItemId()),this.appContext[this.contextName]={},this.appContext[this.contextName][this.getItemId()]=this,e.forEach((t=>{this.appContext[this.contextName][t.getItemId()]=t,t.appContext=this.appContext}))),this.context||(this.context={},this.context[this.getItemId()]=this,e.forEach((t=>{this.context[t.getItemId()]=t,t.context=this.context}))),t&&(t.appContext=this.appContext,t.context=this.context,t.props=t.view.props)}function o(){Ext.getApplication().appContext=Ext.getApplication().appContext||{},this.contextName&&delete Ext.getApplication().appContext[this.contextName];let t=this.getItemId();Ext.getApplication().appContext[t]&&delete Ext.getApplication().appContext[t]}function l(){n.apply(this),r.apply(this)}function a(){i.apply(this),o.apply(this)}const c=["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","bgsound","big","blink","blockquote","body","br","button","canvas","caption","center","cite","code","col","colgroup","command","content","data","datalist","dd","del","details","dfn","dialog","dir","div","dl","dt","element","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","image","img","input","ins","isindex","kbd","keygen","label","legend","li","link","listing","main","map","mark","marquee","math","menu","menuitem","meta","meter","multicol","nav","nextid","nobr","noembed","noframes","noscript","object","ol","optgroup","option","output","p","param","picture","plaintext","pre","progress","q","rb","rbc","rp","rt","rtc","ruby","s","samp","script","section","select","shadow","slot","small","source","spacer","span","strike","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr","xmp","x-s","x-h","x-f"];function u(t){let e="html-"+t;window.__extHtmlClass[e]||(window.__extHtmlClass[e]=window.Ext.define(e,{extend:"Ext.Container",xtype:e,element:{tag:t,reference:"element"},template:[{tag:"ghost-tag",reference:"bodyElement",cls:"",uiCls:""}],getInnerHtmlElement(){return this.getRenderTarget()},doHack(){this.el&&this.el.dom&&(this.el.dom.removeAttribute("class"),this.stylesheet||this.el.dom.removeAttribute("id"),this.el.dom.removeAttribute("data-componentid"),this.el.dom.removeAttribute("data-xid"),this._propsAttributes&&Object.keys(this._propsAttributes).forEach((t=>{if("ref"===t&&this._propsAttributes[t].$$isRef)this._propsAttributes[t].$$isExtRef?this._propsAttributes[t](this):this._propsAttributes[t](this.el.dom);else if(this._propsAttributes[t].$$isState)this.el.dom.setAttribute(t,String(this._propsAttributes[t]())),this.$$stateListener=this._propsAttributes[t].$$subscribe((e=>{this.el.dom.setAttribute(t,String(e))}));else if(t.startsWith("on")&&"function"==typeof this._propsAttributes[t])this.el.dom.addEventListener(t.substring(2),this._propsAttributes[t]);else if(Array.isArray(this._propsAttributes[t])&&this._propsAttributes[t].$$hasState){let e=()=>this.el.dom.setAttribute(t,this._propsAttributes[t].map((t=>"function"==typeof t&&t.$$isState?t():t)).join(""));e(),this.$$attributesStateListeners=[],this._propsAttributes[t].forEach((t=>{"function"==typeof t&&t.$$isState&&this.$$attributesStateListeners.push(t.$$subscribe((t=>{e()})))}))}else this.el.dom.setAttribute(t,String(this._propsAttributes[t]))})))},removeMonitorsElements(){let t=this.el.dom.childNodes[1],e=this.el.dom.childNodes[2];t&&t.remove(),e&&e.remove()},moveElementsToNewParent(){let t=this.el.dom,e=this.innerElement.dom;if(t&&e){function s(){for(;e.childNodes.length>0;)t.appendChild(e.childNodes[0])}s(),this.innerElement.dom=this.el.dom,e.remove()}},listeners:[{initialize(){requestAnimationFrame((()=>this.doHack())),this.removeMonitorsElements(),this.moveElementsToNewParent()}},{destroy(t){t.$$stateListener&&t.$$stateListener(),t.$$attributesStateListeners&&t.$$attributesStateListeners.forEach((t=>t()))}}]}))}function p(){window.__extHtmlClass||(window.__extHtmlClass={},c.forEach((t=>u(t))))}const h=(t,e,s,n)=>{let i;e[0]=0;for(let r=1;r<e.length;r++){const o=e[r++],l=e[r]?(e[0]|=o?1:2,s[e[r++]]):e[++r];3===o?n[0]=l:4===o?n[1]=Object.assign(n[1]||{},l):5===o?(n[1]=n[1]||{})[e[++r]]=l:6===o?(++r,"function"==typeof l&&l.$$isState&&(Array.isArray(n[1][e[r]])||(n[1][e[r]]=[n[1][e[r]]],n[1][e[r]].$$hasState=!0)),Array.isArray(n[1][e[r]])?n[1][e[r]].push(l):n[1][e[r]]+=l+""):o?(i=t.apply(l,h(t,l,s,["",null])),n.push(i),l[0]?e[0]|=2:(e[r-2]=0,e[r]=i)):n.push(l)}return n},f=function(t){let e,s,n=1,i="",r="",o=[0];const l=t=>{1===n&&(t||(i=i.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?o.push(0,t,i):3===n&&(t||i)?(o.push(3,t,i),n=2):2===n&&"..."===i&&t?o.push(4,t,0):2===n&&i&&!t?o.push(5,0,!0,i):n>=5&&((i||!t&&5===n)&&(o.push(n,0,i,s),n=6),t&&(o.push(n,t,0,s),n=6)),i=""};for(let a=0;a<t.length;a++){a&&(1===n&&l(),l(a));for(let c=0;c<t[a].length;c++)e=t[a][c],1===n?"<"===e?(l(),o=[o],n=3):i+=e:4===n?"--"===i&&">"===e?(n=1,i=""):i=e+i[0]:r?e===r?r="":i+=e:'"'===e||"'"===e?r=e:">"===e?(l(),n=1):n&&("="===e?(n=5,s=i,i=""):"/"===e&&(n<5||">"===t[a][c+1])?(l(),3===n&&(o=o[0]),n=o,(o=o[0]).push(2,0,n),n=0):" "===e||"\t"===e||"\n"===e||"\r"===e?(l(),n=2):i+=e),3===n&&"!--"===i&&(n=4,o=o[0])}return l(),o},m=new Map;var d=function(t){let e=m.get(this);return e||(e=new Map,m.set(this,e)),e=h(this,e.get(t)||(e.set(t,e=f(t)),e),arguments,[]),e.length>1?e:e[0]};function $(t){return t.startsWith("on")}function b(t){return t.substring(2)}function y(t,e){let s={};return s[t]=e,s}function g(t,e){t.listeners.push(e)}function x(t){return t.startsWith("html-")}const E=["gridcolumn","column","templatecolumn","booleancolumn","checkcolumn","datecolumn","numbercolumn","rownumberer","textcolumn","treecolumn"];function w(t,e,s,n,i){let r=function(t){return{xtype:t.toLowerCase(),listeners:[y("initialize",l),y("destroy",a)]}}(t),o=Object.assign({},e,n);return x(o.xtype||t)&&(r._propsAttributes=e),function(t,e){for(let s in e)if($(s))g(t,y(b(s),e[s]));else if("controller"===s&&"function"==typeof e[s])t[s]=e[s]();else if("bindState"===s&&e[s]&&e[s].$$setState)t.listeners.push(y("initialize",(t=>{e[s].$$setState(t.getValue())}))),t.listeners.push(y("change",((t,n)=>{e[s].$$setState(n)})));else if("ref"===s&&e[s]&&e[s].$$isRef)t.listeners.push(y("initialize",(t=>{e[s].$$isExtRef?e[s](t):e[s](t.el.dom)})));else if(Array.isArray(e[s])&&e[s].$$hasState){let n=()=>e[s].map((t=>"function"==typeof t&&t.$$isState?t():t)).join("");t[s]=n(),t.listeners.push(y("initialize",(t=>{function i(){let e=C(s);"class"!==s||x(t.xtype)||(e="setCls"),"function"!=typeof t[e]||t.destroyed||t[e](n())}t.$$attributesStateListeners=[],e[s].forEach((e=>{"function"==typeof e&&e.$$isState&&(i(),t.$$attributesStateListeners.push(e.$$subscribe((t=>{i()}))))}))}))),t.listeners.push(y("destroy",(t=>{t.$$attributesStateListeners&&t.$$attributesStateListeners.forEach((t=>t()))})))}else if("function"==typeof e[s]){let n=e[s];n.$$isState&&(t.listeners=t.listeners||[],t.listeners.push(y("initialize",(t=>{t.$$stateListener=n.$$subscribe((e=>{let n=C(s);"class"!==s||x(t.xtype)||(n="setCls"),"function"!=typeof t[n]||t.destroyed||t[n](e)}))}))),t.listeners.push(y("destroy",(t=>{t.$$stateListener&&t.$$stateListener()}))),e[s]=e[s]()),t[s]=e[s]}else"class"===s?t.cls=e[s]:t[s]=e[s]}(r,o),function(t,e,s){e.forEach((n=>{if(void 0!==n)if(n.xtype&&E.includes(n.xtype))S(t,"columns",n);else if("menu"===n.xtype&&"button"===s)A(t,"menu",n);else if("widgetcell"!==n.xtype&&E.includes(s))A(t,"cell",{xtype:"widgetcell",forceWidth:!0,widget:{xtype:"container",items:[]}}),S(t.cell.widget,"items",n);else if("widgetcell"!==n.xtype&&"widgetcell"===s)A(t,"widget",{xtype:"container",items:[]}),S(t.widget,"items",n);else if("widgetcell"===n.xtype)A(t,"cell",n);else if(n.xtype)S(t,"items",n);else if(n.$$isState)S(t,"items",{xtype:"html-x-s",html:String(n()),listeners:[y("initialize",(t=>{t.$$stateListener=n.$$subscribe((e=>{t.bodyElement.el.dom.innerHTML=String(e)}))})),y("destroy",(t=>{t.$$stateListener&&t.$$stateListener()}))]});else{let s=function(t){const e=["string","number","boolean"];if(e.includes(typeof t))return String(t);if("function"==typeof t){const s=t();return e.includes(typeof s)?String(s):""}return console.warn("Unhandled value type:",t),""}(n);!/<[^>]*>/g.test(s)&&(e.length>1||e.some((t=>"function"==typeof t&&!0===t.$$isState)))?S(t,"items",{xtype:"html-x-h",html:s,listeners:[y("initialize",l),y("destroy",a)]}):(t.html=t.html||"",t.html+=s)}}))}(r,s,t),r}function S(t,e,s){t[e]||(t[e]=[]),t[e].push(s)}function A(t,e,s){t[e]||(t[e]=s)}function C(t){return`set${t.charAt(0).toUpperCase()}${t.slice(1)}`}function v(t){return t.startsWith("ext-")?t=t.split("ext-")[1]:t.startsWith("html-")||(t="html-"+t),t}function _(t,e,...s){return"style"===t?{isStyle:!0,content:s}:"context"===t?{isContext:!0,props:e,children:s[0]}:"function"==typeof t?w(v(t.name),t(e),s,e):w(v(t),e,s)}function L(t,...e){let s=d.bind(_)(t,...e);if(s.length>1&&s[0].isStyle){let t=s[0].content;s=s[1],s.stylesheet=t}if(s.isContext){s.props=s.props||{};let t=s.props.name,e=s.stylesheet;s=s.children,s.stylesheet=e,s.contextName=t,s.isContext=!0}return s}let j=null;function k(){return j}function I(t){j=t}function N(t,e=null,s=!1,n=!1){const i=N.stateCache||(N.stateCache=new WeakMap);if(e)return((t,e)=>(i.has(t)||i.set(t,e()),i.get(t)))(e,(()=>N(t,null,s,n)));const r=!("object"!=typeof t||null===t||Array.isArray(t)||t instanceof Date||s);let o=r?{...t}:t;const l=new Set,a=r?Object.fromEntries(Object.keys(o).map((t=>[t,new Set]))):null;let c=[],u=!1;const p=()=>{const t=k();return t&&t.add(p),o};p.$$isState=!0,p.$$subscribe=t=>(l.add(t),()=>l.delete(t));const h=t=>("function"==typeof t&&(t=t(o)),n?(f(t),Promise.resolve()):(c.push(t),u?Promise.resolve():(u=!0,new Promise((t=>{queueMicrotask((()=>{u=!1,m(),t()}))})))));p.$$setState=h;const f=t=>{let e=!1;if(r){const s={...o};Object.keys(t).forEach((n=>{t[n]!==o[n]&&(s[n]=t[n],e=!0,a[n].forEach((t=>t(s[n]))))})),e&&(o=s)}else t!==o&&(o=t,e=!0);e&&l.forEach((t=>t(o)))},m=()=>{c.forEach((t=>f(t))),c=[]};r&&Object.keys(o).forEach((t=>{h[t]=e=>{const s="function"==typeof e?e(o[t]):e;o[t]!==s&&(o={...o,[t]:s},a[t].forEach((e=>e(o[t]))),l.forEach((t=>t(o))))}}));const d=r?Object.fromEntries(Object.keys(o).map((t=>{const e=()=>{const s=k();return s&&s.add(e),o[t]};return e.$$isState=!0,e.$$setState=h[t],e.$$subscribe=e=>(a[t].add(e),()=>a[t].delete(e)),[t,e]}))):p;return[r?d:p,h,p.$$subscribe]}function O(t=null,e=!1){let s=null;const n=[],i=function(e){if(0===arguments.length)return s;s!==e&&(s=e,"function"==typeof t&&t(e),n.forEach((t=>t(e))))};return i.$$isRef=!0,i.$$isExtRef=e,i.$$subscribe=function(t){if("function"==typeof t)return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)};throw new Error("Listener must be a function")},i}function M(t,e=!1,...s){const n=new Set,i=(...e)=>{I(n);try{return t(...e.map((t=>t.$$isState?t():t)))}finally{I(null)}},[r,o]=N(i(...s),null,!1,e),l=()=>{e?o(i(...s)):queueMicrotask((()=>{o(i(...s))}))};return n.forEach((t=>{t.$$subscribe(l)})),r}try{window&&p()}catch(t){}t.For=function({each:t,effect:e,getKey:s=(t=>t.id||t.key||t.time||t.name),tag:n="ext-container",attributes:i={}}){return t=t||[],L`<${n} ...${i} oninitialize="${function(n){const i=new Map,r=t=>{const r=new Map;for(t.forEach(((t,o)=>{const l=s(t),a=i.get(l)||{};r.set(l,a);const c=e(t,o,a);n.items.getAt(o)?(n.removeAt(o),n.insert(o,c)):n.add(c)}));n.items.length>t.length;)n.removeAt(n.items.length-1);i.clear();for(const[t,e]of r.entries())i.set(t,e)};Array.isArray(t)?r(t):(r(t()),t.$$isState&&t.$$subscribe(r))}}"></>`},t.conditionalState=function(t,e=!0,s=!1){return M((()=>t()?e:s))},t.createDerivedState=M,t.createEffect=function(t,e,s=!1){if("function"!=typeof t)throw new Error("Effect must be a function");if(!Array.isArray(e))throw new Error("Dependencies must be an array");let n;const i=()=>{"function"==typeof n&&n(),n=t()};s&&i();const r=e.map((t=>{if(t&&"function"==typeof t.$$subscribe)return t.$$subscribe(i);throw new Error("Dependencies must be objects with the method $$subscribe")}));return()=>{"function"==typeof n&&n(),r.forEach((t=>t?.()))}},t.createExtRef=function(t=null){return O(t,!0)},t.createPropertyObserver=function(t,e,s=null){if("object"!=typeof t||null===t)throw new Error("Target must be an object");const n=e.split(".");let i=t;for(let t=0;t<n.length-1;t++)if(i=i[n[t]],"object"!=typeof i||null===i)throw new Error(`Invalid property path: ${e}`);const r=n[n.length-1],o=[];let l=i[r];return Object.defineProperty(i,r,{get:()=>l,set(t){const e=l;l=t,o.forEach((s=>s(t,e))),s&&s(t,e)},configurable:!0,enumerable:!0}),{$$subscribe:t=>(o.push(t),()=>{const e=o.indexOf(t);-1!==e&&o.splice(e,1)})}},t.createRef=O,t.createState=N,t.defineExtClass=u,t.destroy=a,t.generateHtmlClass=p,t.h=L,t.initialize=l,t.toggleState=function(t){return t.$$setState((t=>!t))}}));