@drayman/framework 2.3.0 → 2.4.1

package/client/dist/index.js

@@ -1 +1 @@
-(()=>{var e={173:()=>{(()=>{"use strict";function e(e,t,n,o,i){return{sel:e,data:t,children:n,text:o,elm:i,key:void 0===t?void 0:t.key}}const t=Array.isArray;function n(e){return"string"==typeof e||"number"==typeof e}const o={createElement:function(e,t){return document.createElement(e,t)},createElementNS:function(e,t,n){return document.createElementNS(e,t,n)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},getTextContent:function(e){return e.textContent},isElement:function(e){return 1===e.nodeType},isText:function(e){return 3===e.nodeType},isComment:function(e){return 8===e.nodeType}};function i(e){return void 0===e}function r(e){return void 0!==e}const l=e("",{},[],void 0,void 0);function s(e,t){var n,o;const i=e.key===t.key,r=(null===(n=e.data)||void 0===n?void 0:n.is)===(null===(o=t.data)||void 0===o?void 0:o.is);return e.sel===t.sel&&i&&r}function a(e,t,n){var o;const i={};for(let r=t;r<=n;++r){const t=null===(o=e[r])||void 0===o?void 0:o.key;void 0!==t&&(i[t]=r)}return i}const d=["create","update","remove","destroy","pre","post"];function c(e,t){let n;const o=t.elm;let i=e.data.attrs,r=t.data.attrs;if((i||r)&&i!==r){for(n in i=i||{},r=r||{},r){const e=r[n];i[n]!==e&&(!0===e?o.setAttribute(n,""):!1===e?o.removeAttribute(n):120!==n.charCodeAt(0)?o.setAttribute(n,e):58===n.charCodeAt(3)?o.setAttributeNS("http://www.w3.org/XML/1998/namespace",n,e):58===n.charCodeAt(5)?o.setAttributeNS("http://www.w3.org/1999/xlink",n,e):o.setAttribute(n,e))}for(n in i)n in r||o.removeAttribute(n)}}const u={create:c,update:c};function f(e,t){let n,o,i;const r=t.elm;let l=e.data.props,s=t.data.props;if((l||s)&&l!==s)for(n in l=l||{},s=s||{},s)o=s[n],i=l[n],i===o||"value"===n&&r[n]===o||(r[n]=o)}const p={create:f,update:f},m="undefined"!=typeof window&&window.requestAnimationFrame.bind(window)||setTimeout;let v=!1;function h(e,t,n){var o;o=function(){e[t]=n},m((function(){m(o)}))}function y(e,t){let n,o;const i=t.elm;let r=e.data.style,l=t.data.style;if(!r&&!l)return;if(r===l)return;r=r||{},l=l||{};const s="delayed"in r;for(o in r)l[o]||("-"===o[0]&&"-"===o[1]?i.style.removeProperty(o):i.style[o]="");for(o in l)if(n=l[o],"delayed"===o&&l.delayed)for(const e in l.delayed)n=l.delayed[e],s&&n===r.delayed[e]||h(i.style,e,n);else"remove"!==o&&n!==r[o]&&("-"===o[0]&&"-"===o[1]?i.style.setProperty(o,n):i.style[o]=n)}function g(e,t,n){if("function"==typeof e)e.call(t,n,t);else if("object"==typeof e)for(let o=0;o<e.length;o++)g(e[o],t,n)}function w(e,t){const n=e.type,o=t.data.on;o&&o[n]&&g(o[n],t,e)}function b(e,t){const n=e.data.on,o=e.listener,i=e.elm,r=t&&t.data.on,l=t&&t.elm;let s;if(n!==r){if(n&&o)if(r)for(s in n)r[s]||i.removeEventListener(s,o,!1);else for(s in n)i.removeEventListener(s,o,!1);if(r){const o=t.listener=e.listener||function e(t){w(t,e.vnode)};if(o.vnode=t,n)for(s in r)n[s]||l.addEventListener(s,o,!1);else for(s in r)l.addEventListener(s,o,!1)}}}function C(e,t,n){if(e.ns="http://www.w3.org/2000/svg","foreignObject"!==n&&void 0!==t)for(let e=0;e<t.length;++e){const n=t[e].data;void 0!==n&&C(n,t[e].children,t[e].sel)}}function I(o,i,r){let l,s,a,d={};if(void 0!==r?(null!==i&&(d=i),t(r)?l=r:n(r)?s=r:r&&r.sel&&(l=[r])):null!=i&&(t(i)?l=i:n(i)?s=i:i&&i.sel?l=[i]:d=i),void 0!==l)for(a=0;a<l.length;++a)n(l[a])&&(l[a]=e(void 0,void 0,void 0,l[a],void 0));return"s"!==o[0]||"v"!==o[1]||"g"!==o[2]||3!==o.length&&"."!==o[3]&&"#"!==o[3]||C(d,l,o),e(o,d,l,s,void 0)}var x=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{a(o.next(e))}catch(e){r(e)}}function s(e){try{a(o.throw(e))}catch(e){r(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,s)}a((o=o.apply(e,t||[])).next())}))};function k(e,t){var n,o,i,r;const l=t.elm;let s=(null===(n=e.data)||void 0===n?void 0:n.props)||{},a=(null===(o=t.data)||void 0===o?void 0:o.props)||{};for(const e of Object.keys(s))void 0===a[e]&&(a[e]=null);l instanceof HTMLInputElement&&l===document.activeElement&&(null===(r=null===(i=null==t?void 0:t.data)||void 0===i?void 0:i.props)||void 0===r||delete r.value)}const O=function(c,u){let f,p;const m={create:[],update:[],remove:[],destroy:[],pre:[],post:[]},v=o;for(f=0;f<d.length;++f)for(m[d[f]]=[],p=0;p<c.length;++p){const e=c[p][d[f]];void 0!==e&&m[d[f]].push(e)}function h(t){const n=t.id?"#"+t.id:"",o=t.className?"."+t.className.split(" ").join("."):"";return e(v.tagName(t).toLowerCase()+n+o,{},[],void 0,t)}function y(e,t){return function(){if(0==--t){const t=v.parentNode(e);v.removeChild(t,e)}}}function g(e,o){var s,a;let d,c=e.data;if(void 0!==c){const t=null===(s=c.hook)||void 0===s?void 0:s.init;r(t)&&(t(e),c=e.data)}const u=e.children,f=e.sel;if("!"===f)i(e.text)&&(e.text=""),e.elm=v.createComment(e.text);else if(void 0!==f){const i=f.indexOf("#"),s=f.indexOf(".",i),p=i>0?i:f.length,h=s>0?s:f.length,y=-1!==i||-1!==s?f.slice(0,Math.min(p,h)):f,w=e.elm=r(c)&&r(d=c.ns)?v.createElementNS(d,y,c):v.createElement(y,c);for(p<h&&w.setAttribute("id",f.slice(p+1,h)),s>0&&w.setAttribute("class",f.slice(h+1).replace(/\./g," ")),d=0;d<m.create.length;++d)m.create[d](l,e);if(t(u))for(d=0;d<u.length;++d){const e=u[d];null!=e&&v.appendChild(w,g(e,o))}else n(e.text)&&v.appendChild(w,v.createTextNode(e.text));const b=e.data.hook;r(b)&&(null===(a=b.create)||void 0===a||a.call(b,l,e),b.insert&&o.push(e))}else e.elm=v.createTextNode(e.text);return e.elm}function w(e,t,n,o,i,r){for(;o<=i;++o){const i=n[o];null!=i&&v.insertBefore(e,g(i,r),t)}}function b(e){var t,n;const o=e.data;if(void 0!==o){null===(n=null===(t=null==o?void 0:o.hook)||void 0===t?void 0:t.destroy)||void 0===n||n.call(t,e);for(let t=0;t<m.destroy.length;++t)m.destroy[t](e);if(void 0!==e.children)for(let t=0;t<e.children.length;++t){const n=e.children[t];null!=n&&"string"!=typeof n&&b(n)}}}function C(e,t,n,o){for(var i,l;n<=o;++n){let o,s;const a=t[n];if(null!=a)if(r(a.sel)){b(a),o=m.remove.length+1,s=y(a.elm,o);for(let e=0;e<m.remove.length;++e)m.remove[e](a,s);const e=null===(l=null===(i=null==a?void 0:a.data)||void 0===i?void 0:i.hook)||void 0===l?void 0:l.remove;r(e)?e(a,s):s()}else v.removeChild(e,a.elm)}}function I(e,t,n){var o,l,d,c,u;const f=null===(o=t.data)||void 0===o?void 0:o.hook;null===(l=null==f?void 0:f.prepatch)||void 0===l||l.call(f,e,t);const p=t.elm=e.elm,h=e.children,y=t.children;if(e!==t){if(void 0!==t.data){for(let n=0;n<m.update.length;++n)m.update[n](e,t);null===(c=null===(d=t.data.hook)||void 0===d?void 0:d.update)||void 0===c||c.call(d,e,t)}i(t.text)?r(h)&&r(y)?h!==y&&function(e,t,n,o){let r,l,d,c,u=0,f=0,p=t.length-1,m=t[0],h=t[p],y=n.length-1,b=n[0],x=n[y];for(;u<=p&&f<=y;)null==m?m=t[++u]:null==h?h=t[--p]:null==b?b=n[++f]:null==x?x=n[--y]:s(m,b)?(I(m,b,o),m=t[++u],b=n[++f]):s(h,x)?(I(h,x,o),h=t[--p],x=n[--y]):s(m,x)?(I(m,x,o),v.insertBefore(e,m.elm,v.nextSibling(h.elm)),m=t[++u],x=n[--y]):s(h,b)?(I(h,b,o),v.insertBefore(e,h.elm,m.elm),h=t[--p],b=n[++f]):(void 0===r&&(r=a(t,u,p)),l=r[b.key],i(l)?v.insertBefore(e,g(b,o),m.elm):(d=t[l],d.sel!==b.sel?v.insertBefore(e,g(b,o),m.elm):(I(d,b,o),t[l]=void 0,v.insertBefore(e,d.elm,m.elm))),b=n[++f]);(u<=p||f<=y)&&(u>p?(c=null==n[y+1]?null:n[y+1].elm,w(e,c,n,f,y,o)):C(e,t,u,p))}(p,h,y,n):r(y)?(r(e.text)&&v.setTextContent(p,""),w(p,null,y,0,y.length-1,n)):r(h)?C(p,h,0,h.length-1):r(e.text)&&v.setTextContent(p,""):e.text!==t.text&&(r(h)&&C(p,h,0,h.length-1),v.setTextContent(p,t.text)),null===(u=null==f?void 0:f.postpatch)||void 0===u||u.call(f,e,t)}}return function(e,t){let n,o,i;const r=[];for(n=0;n<m.pre.length;++n)m.pre[n]();for(function(e){return void 0!==e.sel}(e)||(e=h(e)),s(e,t)?I(e,t,r):(o=e.elm,i=v.parentNode(o),g(t,r),null!==i&&(v.insertBefore(i,t.elm,v.nextSibling(o)),C(i,[e],0,0))),n=0;n<r.length;++n)r[n].data.hook.insert(r[n]);for(n=0;n<m.post.length;++n)m.post[n]();return t}}([{update:k,create:k},u,p,{pre:function(){v=!1},create:y,update:y,destroy:function(e){let t,n;const o=e.elm,i=e.data.style;if(i&&(t=i.destroy))for(n in t)o.style[n]=t[n]},remove:function(e,t){const n=e.data.style;if(!n||!n.remove)return void t();let o;v||(e.elm.offsetLeft,v=!0);const i=e.elm;let r=0;const l=n.remove;let s=0;const a=[];for(o in l)a.push(o),i.style[o]=l[o];const d=getComputedStyle(i)["transition-property"].split(", ");for(;r<d.length;++r)-1!==a.indexOf(d[r])&&s++;i.addEventListener("transitionend",(function(e){e.target===i&&--s,0===s&&t()}))}},{create:b,update:b,destroy:b}]);function E(e){if(e instanceof KeyboardEvent)return{altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,code:e.code,key:e.key,location:e.location,repeat:e.repeat};if(e instanceof MouseEvent)return{altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,x:e.x,y:e.y,pageX:e.pageX,pageY:e.pageY,screenX:e.screenX,screenY:e.screenY,offsetX:e.offsetX,offsetY:e.offsetY};if(["input","change"].includes(e.type)){const t=e.target;if("select"===t.tagName.toLowerCase()){const t=e.target,n=[...t.options].filter((e=>e.selected)).map((e=>e.value));return{value:t.multiple?n:n[0]}}return"checkbox"===t.type?{value:t.checked}:{value:t.value}}}const N={};customElements.define("drayman-element",class extends HTMLElement{constructor(){super(),this.previouslySerializedTree=[],this.events={},this.emit=(e,t={},n={},o=[])=>x(this,void 0,void 0,(function*(){var i;const r=new FormData;r.append("eventName",e),r.append("componentInstanceId",this.componentInstanceId),r.append("options",JSON.stringify(Object.assign(Object.assign({},t),n)));for(let e of o)r.append("file",e.file,e.fileName);return yield null===(i=window.draymanConfig)||void 0===i?void 0:i.connection.postFormData(r)})),this.once=!1,this.updateId=0}get options(){return this.getAttribute("options")}set options(e){this.setAttribute("options",JSON.stringify(e))}get component(){return this.getAttribute("component")}set component(e){this.setAttribute("component",e)}static get observedAttributes(){return["options"]}attributeChangedCallback(e,t,n){"options"===e&&window.draymanConfig&&window.draymanConfig.connection.updateComponentInstanceProps({componentInstanceId:this.componentInstanceId,options:this.options})}debounce(e,t,n){let o,i;return(r,l)=>new Promise(((s,a)=>x(this,void 0,void 0,(function*(){let d=n.leading&&!o;clearTimeout(o),i&&i(),o=setTimeout((()=>x(this,void 0,void 0,(function*(){o=null,n.trailing&&s(yield this.emit(e,{trailing:!0},r,l))}))),t),i=a,d&&s(yield this.emit(e,{leading:!0},r,l))})))).catch((()=>{}))}getFn(e,t,n){var o,i;if("object"==typeof n&&n.debounce){let e="number"==typeof n.debounce?n.debounce:n.debounce.wait,r="number"==typeof n.debounce||!!(null===(o=n.debounce)||void 0===o?void 0:o.trailing),l=!!(null===(i=n.debounce)||void 0===i?void 0:i.leading);return this.debounce(t,e,{trailing:r,leading:l})}return(e,n)=>x(this,void 0,void 0,(function*(){return yield this.emit(t,null,e,n)}))}traverseTree(e){var t,n,o;if(window.draymanConfig.elementOptions)for(const[n,o]of Object.entries(window.draymanConfig.elementOptions))if(e.sel===n)if(null===(t=e.sel)||void 0===t?void 0:t.includes("-"))e.data.props=Object.assign(Object.assign({},e.data.props),o);else{const t={},n={};for(const e of Object.keys(o))T(e)?n[e.substring(2)]=o[e]:t[e]=o[e];e.data.props=Object.assign(Object.assign({},e.data.props),t),e.data.on=Object.assign(Object.assign({},e.data.on),n)}if(null===(n=e.sel)||void 0===n?void 0:n.includes("-")){for(const t of Object.keys(e.data.props||{}))T(t)&&(this.events[`${e.key}/${t}`]||(this.events[`${e.key}/${t}`]=this.getFn(e.sel,`${e.key}/${t}`,e.data.props[t])),e.data.props[t]=this.events[`${e.key}/${t}`]);if(!customElements.get(e.sel)&&!N[e.sel]){N[e.sel]=!0;const t=document.createElement("script");t.setAttribute("src",`${window.draymanConfig.elementUrl}${e.sel}`),document.head.appendChild(t)}return I(e.sel,e.data,e.children.map((e=>e.sel?this.traverseTree(e):e.text)))}for(const t of Object.keys((null===(o=e.data)||void 0===o?void 0:o.on)||{})){if(!this.events[`${e.key}/${t}`]){const n=e.data.on[t];this.events[`${e.key}/${t}`]=this.getFn(e.sel,`${e.key}/${t}`,n)}e.data.on[t]=n=>{var o;const i=[];if(null===(o=n.target)||void 0===o?void 0:o.files)for(const e of n.target.files)i.push({file:e,fileName:e.name});this.events[`${e.key}/${t}`](E(n),i)}}return I(e.sel,e.data,e.children.map((e=>e.sel?this.traverseTree(e):e.text)))}connectedCallback(){var e,t;return x(this,void 0,void 0,(function*(){for(;!window.draymanConfig||!this.component;)console.log("waiting for config"),yield new Promise((e=>setTimeout(e,100)));const n=(null===(t=(e=window.draymanConfig).browserCommands)||void 0===t?void 0:t.call(e,((e,t)=>{var n;return null===(n=window.draymanConfig)||void 0===n?void 0:n.connection.handleBrowserCallback({callbackId:e,data:t})})))||{};let o=document.createElement("drayman-element-container");this.appendChild(o),this.componentInstanceId=yield window.draymanConfig.connection.initializeComponent({componentId:this.component,componentOptions:this.options,browserCommands:Object.keys(n)}),window.draymanConfig.connection.onEvent(this.componentInstanceId,(({type:e,payload:t})=>x(this,void 0,void 0,(function*(){var i,r;if("view"===e&&t.updateId>this.updateId){this.updateId=t.updateId;const e=I("drayman-element-container",{attrs:{componentInstanceId:this.componentInstanceId}},t.view.map((e=>this.traverseTree(e))));O(o,e),o=e,1===this.updateId&&(null===(i=this.onInit)||void 0===i||i.call(this))}else if("browserCommand"===e){const{data:e,callbackId:o,command:i,elements:l}=t;let s=[];l&&(s=l.map((e=>document.querySelector(`drayman-element-container[componentinstanceid="${this.componentInstanceId}"] [ref="${e}"]`))));const a=yield n[i](e,s);null===(r=window.draymanConfig)||void 0===r||r.connection.handleBrowserCallback({callbackId:o,data:a})}}))))}))}disconnectedCallback(){var e,t,n;this.updateId&&(null===(e=this.onDestroy)||void 0===e||e.call(this)),null===(n=null===(t=window.draymanConfig)||void 0===t?void 0:t.connection)||void 0===n||n.destroyComponentInstance({componentInstanceId:this.componentInstanceId})}});const T=e=>(null==e?void 0:e.length)>2&&"on"===e.slice(0,2)})()}},t={};function n(o){var i=t[o];if(void 0!==i)return i.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";n(173);var e=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{a(o.next(e))}catch(e){r(e)}}function s(e){try{a(o.throw(e))}catch(e){r(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,s)}a((o=o.apply(e,t||[])).next())}))};window.initializeDraymanFramework=function(t){return e(this,void 0,void 0,(function*(){const n={};let o=1;const i=null==t?void 0:t.browserCommands,r={},l=yield new Promise(((t,n)=>{const o=new WebSocket(`${"https:"===window.location.protocol?"wss":"ws"}://${window.location.host}/`);o.onerror=()=>o.close(),o.onclose=t=>e(void 0,void 0,void 0,(function*(){setTimeout((()=>e(void 0,void 0,void 0,(function*(){return window.location.reload()}))),500)})),o.addEventListener("open",(e=>{t(o)}))}));l.onmessage=e=>{const{id:t,data:o,type:i}=JSON.parse(e.data);if(t&&(n[t](o),delete n[t]),"event"===i){const{payload:e,type:t,componentInstanceId:n}=o;for(const o of r[n]||[])o({payload:e,type:t,componentInstanceId:n})}};const s=(e,t,i)=>{const r={type:e,data:t,id:void 0};i&&(r.id=o,n[o]=i,o++),l.send(JSON.stringify(r))};return window.draymanConfig={browserCommands:i,elementOptions:null==t?void 0:t.elementOptions,elementUrl:"/elements/",connection:{onEvent:(e,t)=>{r[e]?r[e].push(t):r[e]=[t]},initializeComponent:e=>new Promise(((t,n)=>{s("initializeComponentInstance",e,(({componentInstanceId:e})=>{t(e)}))})),postFormData:t=>e(this,void 0,void 0,(function*(){return(yield fetch("/api/componentEvent",{method:"POST",body:t})).json()})),handleBrowserCallback:e=>{s("handleBrowserCallback",e)},destroyComponentInstance:({componentInstanceId:e})=>{s("destroyComponentInstance",{componentInstanceId:e}),delete r[e]},updateComponentInstanceProps:e=>{s("updateComponentInstanceProps",e)}}},{emit:(e,t)=>s("eventHubEvent",{type:e,data:t})}}))}})()})();
+(()=>{var e={173:()=>{(()=>{"use strict";function e(e,t,n,o,i){return{sel:e,data:t,children:n,text:o,elm:i,key:void 0===t?void 0:t.key}}const t=Array.isArray;function n(e){return"string"==typeof e||"number"==typeof e}const o={createElement:function(e,t){return document.createElement(e,t)},createElementNS:function(e,t,n){return document.createElementNS(e,t,n)},createTextNode:function(e){return document.createTextNode(e)},createComment:function(e){return document.createComment(e)},insertBefore:function(e,t,n){e.insertBefore(t,n)},removeChild:function(e,t){e.removeChild(t)},appendChild:function(e,t){e.appendChild(t)},parentNode:function(e){return e.parentNode},nextSibling:function(e){return e.nextSibling},tagName:function(e){return e.tagName},setTextContent:function(e,t){e.textContent=t},getTextContent:function(e){return e.textContent},isElement:function(e){return 1===e.nodeType},isText:function(e){return 3===e.nodeType},isComment:function(e){return 8===e.nodeType}};function i(e){return void 0===e}function r(e){return void 0!==e}const s=e("",{},[],void 0,void 0);function l(e,t){var n,o;const i=e.key===t.key,r=(null===(n=e.data)||void 0===n?void 0:n.is)===(null===(o=t.data)||void 0===o?void 0:o.is);return e.sel===t.sel&&i&&r}function a(e,t,n){var o;const i={};for(let r=t;r<=n;++r){const t=null===(o=e[r])||void 0===o?void 0:o.key;void 0!==t&&(i[t]=r)}return i}const d=["create","update","remove","destroy","pre","post"];function c(e,t){let n;const o=t.elm;let i=e.data.attrs,r=t.data.attrs;if((i||r)&&i!==r){for(n in i=i||{},r=r||{},r){const e=r[n];i[n]!==e&&(!0===e?o.setAttribute(n,""):!1===e?o.removeAttribute(n):120!==n.charCodeAt(0)?o.setAttribute(n,e):58===n.charCodeAt(3)?o.setAttributeNS("http://www.w3.org/XML/1998/namespace",n,e):58===n.charCodeAt(5)?o.setAttributeNS("http://www.w3.org/1999/xlink",n,e):o.setAttribute(n,e))}for(n in i)n in r||o.removeAttribute(n)}}const u={create:c,update:c};function f(e,t){let n,o,i;const r=t.elm;let s=e.data.props,l=t.data.props;if((s||l)&&s!==l)for(n in s=s||{},l=l||{},l)o=l[n],i=s[n],i===o||"value"===n&&r[n]===o||(r[n]=o)}const p={create:f,update:f},m="undefined"!=typeof window&&window.requestAnimationFrame.bind(window)||setTimeout;let v=!1;function h(e,t,n){var o;o=function(){e[t]=n},m((function(){m(o)}))}function y(e,t){let n,o;const i=t.elm;let r=e.data.style,s=t.data.style;if(!r&&!s)return;if(r===s)return;r=r||{},s=s||{};const l="delayed"in r;for(o in r)s[o]||("-"===o[0]&&"-"===o[1]?i.style.removeProperty(o):i.style[o]="");for(o in s)if(n=s[o],"delayed"===o&&s.delayed)for(const e in s.delayed)n=s.delayed[e],l&&n===r.delayed[e]||h(i.style,e,n);else"remove"!==o&&n!==r[o]&&("-"===o[0]&&"-"===o[1]?i.style.setProperty(o,n):i.style[o]=n)}function g(e,t,n){if("function"==typeof e)e.call(t,n,t);else if("object"==typeof e)for(let o=0;o<e.length;o++)g(e[o],t,n)}function w(e,t){const n=e.type,o=t.data.on;o&&o[n]&&g(o[n],t,e)}function b(e,t){const n=e.data.on,o=e.listener,i=e.elm,r=t&&t.data.on,s=t&&t.elm;let l;if(n!==r){if(n&&o)if(r)for(l in n)r[l]||i.removeEventListener(l,o,!1);else for(l in n)i.removeEventListener(l,o,!1);if(r){const o=t.listener=e.listener||function e(t){w(t,e.vnode)};if(o.vnode=t,n)for(l in r)n[l]||s.addEventListener(l,o,!1);else for(l in r)s.addEventListener(l,o,!1)}}}function C(e,t,n){if(e.ns="http://www.w3.org/2000/svg","foreignObject"!==n&&void 0!==t)for(let e=0;e<t.length;++e){const n=t[e].data;void 0!==n&&C(n,t[e].children,t[e].sel)}}function I(o,i,r){let s,l,a,d={};if(void 0!==r?(null!==i&&(d=i),t(r)?s=r:n(r)?l=r:r&&r.sel&&(s=[r])):null!=i&&(t(i)?s=i:n(i)?l=i:i&&i.sel?s=[i]:d=i),void 0!==s)for(a=0;a<s.length;++a)n(s[a])&&(s[a]=e(void 0,void 0,void 0,s[a],void 0));return"s"!==o[0]||"v"!==o[1]||"g"!==o[2]||3!==o.length&&"."!==o[3]&&"#"!==o[3]||C(d,s,o),e(o,d,s,l,void 0)}var x=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function s(e){try{a(o.next(e))}catch(e){r(e)}}function l(e){try{a(o.throw(e))}catch(e){r(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,l)}a((o=o.apply(e,t||[])).next())}))};function k(e,t){var n,o,i,r;const s=t.elm;let l=(null===(n=e.data)||void 0===n?void 0:n.props)||{},a=(null===(o=t.data)||void 0===o?void 0:o.props)||{};for(const e of Object.keys(l))void 0===a[e]&&(a[e]=null);s instanceof HTMLInputElement&&s===document.activeElement&&(null===(r=null===(i=null==t?void 0:t.data)||void 0===i?void 0:i.props)||void 0===r||delete r.value)}const O=function(c,u){let f,p;const m={create:[],update:[],remove:[],destroy:[],pre:[],post:[]},v=o;for(f=0;f<d.length;++f)for(m[d[f]]=[],p=0;p<c.length;++p){const e=c[p][d[f]];void 0!==e&&m[d[f]].push(e)}function h(t){const n=t.id?"#"+t.id:"",o=t.className?"."+t.className.split(" ").join("."):"";return e(v.tagName(t).toLowerCase()+n+o,{},[],void 0,t)}function y(e,t){return function(){if(0==--t){const t=v.parentNode(e);v.removeChild(t,e)}}}function g(e,o){var l,a;let d,c=e.data;if(void 0!==c){const t=null===(l=c.hook)||void 0===l?void 0:l.init;r(t)&&(t(e),c=e.data)}const u=e.children,f=e.sel;if("!"===f)i(e.text)&&(e.text=""),e.elm=v.createComment(e.text);else if(void 0!==f){const i=f.indexOf("#"),l=f.indexOf(".",i),p=i>0?i:f.length,h=l>0?l:f.length,y=-1!==i||-1!==l?f.slice(0,Math.min(p,h)):f,w=e.elm=r(c)&&r(d=c.ns)?v.createElementNS(d,y,c):v.createElement(y,c);for(p<h&&w.setAttribute("id",f.slice(p+1,h)),l>0&&w.setAttribute("class",f.slice(h+1).replace(/\./g," ")),d=0;d<m.create.length;++d)m.create[d](s,e);if(t(u))for(d=0;d<u.length;++d){const e=u[d];null!=e&&v.appendChild(w,g(e,o))}else n(e.text)&&v.appendChild(w,v.createTextNode(e.text));const b=e.data.hook;r(b)&&(null===(a=b.create)||void 0===a||a.call(b,s,e),b.insert&&o.push(e))}else e.elm=v.createTextNode(e.text);return e.elm}function w(e,t,n,o,i,r){for(;o<=i;++o){const i=n[o];null!=i&&v.insertBefore(e,g(i,r),t)}}function b(e){var t,n;const o=e.data;if(void 0!==o){null===(n=null===(t=null==o?void 0:o.hook)||void 0===t?void 0:t.destroy)||void 0===n||n.call(t,e);for(let t=0;t<m.destroy.length;++t)m.destroy[t](e);if(void 0!==e.children)for(let t=0;t<e.children.length;++t){const n=e.children[t];null!=n&&"string"!=typeof n&&b(n)}}}function C(e,t,n,o){for(var i,s;n<=o;++n){let o,l;const a=t[n];if(null!=a)if(r(a.sel)){b(a),o=m.remove.length+1,l=y(a.elm,o);for(let e=0;e<m.remove.length;++e)m.remove[e](a,l);const e=null===(s=null===(i=null==a?void 0:a.data)||void 0===i?void 0:i.hook)||void 0===s?void 0:s.remove;r(e)?e(a,l):l()}else v.removeChild(e,a.elm)}}function I(e,t,n){var o,s,d,c,u;const f=null===(o=t.data)||void 0===o?void 0:o.hook;null===(s=null==f?void 0:f.prepatch)||void 0===s||s.call(f,e,t);const p=t.elm=e.elm,h=e.children,y=t.children;if(e!==t){if(void 0!==t.data){for(let n=0;n<m.update.length;++n)m.update[n](e,t);null===(c=null===(d=t.data.hook)||void 0===d?void 0:d.update)||void 0===c||c.call(d,e,t)}i(t.text)?r(h)&&r(y)?h!==y&&function(e,t,n,o){let r,s,d,c,u=0,f=0,p=t.length-1,m=t[0],h=t[p],y=n.length-1,b=n[0],x=n[y];for(;u<=p&&f<=y;)null==m?m=t[++u]:null==h?h=t[--p]:null==b?b=n[++f]:null==x?x=n[--y]:l(m,b)?(I(m,b,o),m=t[++u],b=n[++f]):l(h,x)?(I(h,x,o),h=t[--p],x=n[--y]):l(m,x)?(I(m,x,o),v.insertBefore(e,m.elm,v.nextSibling(h.elm)),m=t[++u],x=n[--y]):l(h,b)?(I(h,b,o),v.insertBefore(e,h.elm,m.elm),h=t[--p],b=n[++f]):(void 0===r&&(r=a(t,u,p)),s=r[b.key],i(s)?v.insertBefore(e,g(b,o),m.elm):(d=t[s],d.sel!==b.sel?v.insertBefore(e,g(b,o),m.elm):(I(d,b,o),t[s]=void 0,v.insertBefore(e,d.elm,m.elm))),b=n[++f]);(u<=p||f<=y)&&(u>p?(c=null==n[y+1]?null:n[y+1].elm,w(e,c,n,f,y,o)):C(e,t,u,p))}(p,h,y,n):r(y)?(r(e.text)&&v.setTextContent(p,""),w(p,null,y,0,y.length-1,n)):r(h)?C(p,h,0,h.length-1):r(e.text)&&v.setTextContent(p,""):e.text!==t.text&&(r(h)&&C(p,h,0,h.length-1),v.setTextContent(p,t.text)),null===(u=null==f?void 0:f.postpatch)||void 0===u||u.call(f,e,t)}}return function(e,t){let n,o,i;const r=[];for(n=0;n<m.pre.length;++n)m.pre[n]();for(function(e){return void 0!==e.sel}(e)||(e=h(e)),l(e,t)?I(e,t,r):(o=e.elm,i=v.parentNode(o),g(t,r),null!==i&&(v.insertBefore(i,t.elm,v.nextSibling(o)),C(i,[e],0,0))),n=0;n<r.length;++n)r[n].data.hook.insert(r[n]);for(n=0;n<m.post.length;++n)m.post[n]();return t}}([{update:k,create:k},u,p,{pre:function(){v=!1},create:y,update:y,destroy:function(e){let t,n;const o=e.elm,i=e.data.style;if(i&&(t=i.destroy))for(n in t)o.style[n]=t[n]},remove:function(e,t){const n=e.data.style;if(!n||!n.remove)return void t();let o;v||(e.elm.offsetLeft,v=!0);const i=e.elm;let r=0;const s=n.remove;let l=0;const a=[];for(o in s)a.push(o),i.style[o]=s[o];const d=getComputedStyle(i)["transition-property"].split(", ");for(;r<d.length;++r)-1!==a.indexOf(d[r])&&l++;i.addEventListener("transitionend",(function(e){e.target===i&&--l,0===l&&t()}))}},{create:b,update:b,destroy:b}]);function E(e){if(e instanceof KeyboardEvent)return{altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,code:e.code,key:e.key,location:e.location,repeat:e.repeat};if(e instanceof MouseEvent)return{altKey:e.altKey,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey,x:e.x,y:e.y,pageX:e.pageX,pageY:e.pageY,screenX:e.screenX,screenY:e.screenY,offsetX:e.offsetX,offsetY:e.offsetY};if(["input","change"].includes(e.type)){const t=e.target;if("select"===t.tagName.toLowerCase()){const t=e.target,n=[...t.options].filter((e=>e.selected)).map((e=>e.value));return{value:t.multiple?n:n[0]}}return"checkbox"===t.type?{value:t.checked}:{value:t.value}}}const N={};customElements.define("drayman-element",class extends HTMLElement{constructor(){super(),this.previouslySerializedTree=[],this.events={},this.rootEvents={},this.emit=(e,t={},n={},o=[])=>x(this,void 0,void 0,(function*(){var i;const r=new FormData;r.append("eventName",e),r.append("componentInstanceId",this.componentInstanceId),r.append("options",JSON.stringify(Object.assign(Object.assign({},t),n)));for(let e of o)r.append("file",e.file,e.fileName);return yield null===(i=window.draymanConfig)||void 0===i?void 0:i.connection.postFormData(r)})),this.once=!1,this.updateId=0}get options(){return this.getAttribute("options")}set options(e){if("string"!=typeof e)for(const t of Object.keys(e))T(t)&&(this.rootEvents[t]=e[t],e[t]=!0);this.setAttribute("options",JSON.stringify(e))}get component(){return this.getAttribute("component")}set component(e){this.setAttribute("component",e)}static get observedAttributes(){return["options"]}attributeChangedCallback(e,t,n){"options"===e&&window.draymanConfig&&window.draymanConfig.connection.updateComponentInstanceProps({componentInstanceId:this.componentInstanceId,options:this.options})}debounce(e,t,n){let o,i;return(r,s)=>new Promise(((l,a)=>x(this,void 0,void 0,(function*(){let d=n.leading&&!o;clearTimeout(o),i&&i(),o=setTimeout((()=>x(this,void 0,void 0,(function*(){o=null,n.trailing&&l(yield this.emit(e,{trailing:!0},r,s))}))),t),i=a,d&&l(yield this.emit(e,{leading:!0},r,s))})))).catch((()=>{}))}getFn(e,t,n){var o,i;if("object"==typeof n&&n.debounce){let e="number"==typeof n.debounce?n.debounce:n.debounce.wait,r="number"==typeof n.debounce||!!(null===(o=n.debounce)||void 0===o?void 0:o.trailing),s=!!(null===(i=n.debounce)||void 0===i?void 0:i.leading);return this.debounce(t,e,{trailing:r,leading:s})}return(e,n)=>x(this,void 0,void 0,(function*(){return yield this.emit(t,null,e,n)}))}traverseTree(e){var t,n,o;if(window.draymanConfig.elementOptions)for(const[n,o]of Object.entries(window.draymanConfig.elementOptions))if(e.sel===n)if(null===(t=e.sel)||void 0===t?void 0:t.includes("-"))e.data.props=Object.assign(Object.assign({},e.data.props),o);else{const t={},n={};for(const e of Object.keys(o))T(e)?n[e.substring(2)]=o[e]:t[e]=o[e];e.data.props=Object.assign(Object.assign({},e.data.props),t),e.data.on=Object.assign(Object.assign({},e.data.on),n)}if(null===(n=e.sel)||void 0===n?void 0:n.includes("-")){for(const t of Object.keys(e.data.props||{}))T(t)&&(this.events[`${e.key}/${t}`]||(this.events[`${e.key}/${t}`]=this.getFn(e.sel,`${e.key}/${t}`,e.data.props[t])),e.data.props[t]=this.events[`${e.key}/${t}`]);if(!customElements.get(e.sel)&&!N[e.sel]){N[e.sel]=!0;const t=document.createElement("script");t.setAttribute("src",`${window.draymanConfig.elementUrl}${e.sel}`),document.head.appendChild(t)}return I(e.sel,e.data,e.children.map((e=>e.sel?this.traverseTree(e):e.text)))}for(const t of Object.keys((null===(o=e.data)||void 0===o?void 0:o.on)||{})){if(!this.events[`${e.key}/${t}`]){const n=e.data.on[t];this.events[`${e.key}/${t}`]=this.getFn(e.sel,`${e.key}/${t}`,n)}e.data.on[t]=n=>{var o;const i=[];if(null===(o=n.target)||void 0===o?void 0:o.files)for(const e of n.target.files)i.push({file:e,fileName:e.name});this.events[`${e.key}/${t}`](E(n),i)}}return I(e.sel,e.data,e.children.map((e=>e.sel?this.traverseTree(e):e.text)))}connectedCallback(){var e,t;return x(this,void 0,void 0,(function*(){for(;!window.draymanConfig||!this.component;)console.log("waiting for config"),yield new Promise((e=>setTimeout(e,100)));const n=(null===(t=(e=window.draymanConfig).browserCommands)||void 0===t?void 0:t.call(e,((e,t)=>{var n;return null===(n=window.draymanConfig)||void 0===n?void 0:n.connection.handleBrowserCallback({callbackId:e,data:t})})))||{};let o=document.createElement("drayman-element-container");this.appendChild(o),this.componentInstanceId=yield window.draymanConfig.connection.initializeComponent({componentId:this.component,componentOptions:this.options,browserCommands:Object.keys(n)}),window.draymanConfig.connection.onEvent(this.componentInstanceId,(({type:e,payload:t})=>x(this,void 0,void 0,(function*(){var i,r;if("view"===e&&t.updateId>this.updateId){this.updateId=t.updateId;const e=I("drayman-element-container",{attrs:{componentInstanceId:this.componentInstanceId}},t.view.map((e=>this.traverseTree(e))));O(o,e),o=e,1===this.updateId&&(null===(i=this.onInit)||void 0===i||i.call(this))}else if("browserCommand"===e){const{data:e,callbackId:o,command:i,elements:s}=t;let l=[];s&&(l=s.map((e=>document.querySelector(`drayman-element-container[componentinstanceid="${this.componentInstanceId}"] [ref="${e}"]`))));const a=yield n[i](e,l);null===(r=window.draymanConfig)||void 0===r||r.connection.handleBrowserCallback({callbackId:o,data:a})}else"rootEvent"===e&&(yield this.rootEvents[t.event](t.data))}))))}))}disconnectedCallback(){var e,t,n;this.updateId&&(null===(e=this.onDestroy)||void 0===e||e.call(this)),null===(n=null===(t=window.draymanConfig)||void 0===t?void 0:t.connection)||void 0===n||n.destroyComponentInstance({componentInstanceId:this.componentInstanceId})}});const T=e=>(null==e?void 0:e.length)>2&&"on"===e.slice(0,2)})()}},t={};function n(o){var i=t[o];if(void 0!==i)return i.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";n(173);var e=function(e,t,n,o){return new(n||(n=Promise))((function(i,r){function s(e){try{a(o.next(e))}catch(e){r(e)}}function l(e){try{a(o.throw(e))}catch(e){r(e)}}function a(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(s,l)}a((o=o.apply(e,t||[])).next())}))};window.initializeDraymanFramework=function(t){return e(this,void 0,void 0,(function*(){const n={};let o=1;const i=null==t?void 0:t.browserCommands,r={},s=yield new Promise(((t,n)=>{const o=new WebSocket(`${"https:"===window.location.protocol?"wss":"ws"}://${window.location.host}/`);o.onerror=()=>o.close(),o.onclose=t=>e(void 0,void 0,void 0,(function*(){setTimeout((()=>e(void 0,void 0,void 0,(function*(){return window.location.reload()}))),500)})),o.addEventListener("open",(e=>{t(o)}))}));s.onmessage=e=>{const{id:t,data:o,type:i}=JSON.parse(e.data);if(t&&(n[t](o),delete n[t]),"event"===i){const{payload:e,type:t,componentInstanceId:n}=o;for(const o of r[n]||[])o({payload:e,type:t,componentInstanceId:n})}};const l=(e,t,i)=>{const r={type:e,data:t,id:void 0};i&&(r.id=o,n[o]=i,o++),s.send(JSON.stringify(r))};return window.draymanConfig={browserCommands:i,elementOptions:null==t?void 0:t.elementOptions,elementUrl:"/elements/",connection:{onEvent:(e,t)=>{r[e]?r[e].push(t):r[e]=[t]},initializeComponent:e=>new Promise(((t,n)=>{l("initializeComponentInstance",e,(({componentInstanceId:e})=>{t(e)}))})),postFormData:t=>e(this,void 0,void 0,(function*(){return(yield fetch("/api/componentEvent",{method:"POST",body:t})).json()})),handleBrowserCallback:e=>{l("handleBrowserCallback",e)},destroyComponentInstance:({componentInstanceId:e})=>{l("destroyComponentInstance",{componentInstanceId:e}),delete r[e]},updateComponentInstanceProps:e=>{l("updateComponentInstanceProps",e)}}},{emit:(e,t)=>l("eventHubEvent",{type:e,data:t})}}))}})()})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/framework",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@drayman/core": "^2.3.0",
+    "@drayman/core": "^2.4.1",
     "cup-readdir": "^1.0.3",
     "express": "^4.17.1",
     "fs-extra": "^9.1.0",
@@ -47,5 +47,5 @@
     "npm": "^7.10.0",
     "start-server-and-test": "^1.12.1"
   },
-  "gitHead": "5f8c0e0f6ce06deb55a8f761ef1dd229f487c9e4"
+  "gitHead": "d1cde531e974bf390bec00c6a9f4d697ad343481"
 }