@drayman/framework 2.4.0 → 2.5.0

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 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})}}))}})()})();
+(()=>{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 v={create:f,update:f},p="undefined"!=typeof window&&window.requestAnimationFrame.bind(window)||setTimeout;let m=!1;function h(e,t,n){var o;o=function(){e[t]=n},p((function(){p(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)}function O(e={},t={}){let n=!0;for(const o in t)n="object"==typeof t[o]?n&&O(e[o],t[o]):n&&e[o]===t[o];return n}const E=function(c,u){let f,v;const p={create:[],update:[],remove:[],destroy:[],pre:[],post:[]},m=o;for(f=0;f<d.length;++f)for(p[d[f]]=[],v=0;v<c.length;++v){const e=c[v][d[f]];void 0!==e&&p[d[f]].push(e)}function h(t){const n=t.id?"#"+t.id:"",o=t.className?"."+t.className.split(" ").join("."):"";return e(m.tagName(t).toLowerCase()+n+o,{},[],void 0,t)}function y(e,t){return function(){if(0==--t){const t=m.parentNode(e);m.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=m.createComment(e.text);else if(void 0!==f){const i=f.indexOf("#"),l=f.indexOf(".",i),v=i>0?i:f.length,h=l>0?l:f.length,y=-1!==i||-1!==l?f.slice(0,Math.min(v,h)):f,w=e.elm=r(c)&&r(d=c.ns)?m.createElementNS(d,y,c):m.createElement(y,c);for(v<h&&w.setAttribute("id",f.slice(v+1,h)),l>0&&w.setAttribute("class",f.slice(h+1).replace(/\./g," ")),d=0;d<p.create.length;++d)p.create[d](s,e);if(t(u))for(d=0;d<u.length;++d){const e=u[d];null!=e&&m.appendChild(w,g(e,o))}else n(e.text)&&m.appendChild(w,m.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=m.createTextNode(e.text);return e.elm}function w(e,t,n,o,i,r){for(;o<=i;++o){const i=n[o];null!=i&&m.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<p.destroy.length;++t)p.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=p.remove.length+1,l=y(a.elm,o);for(let e=0;e<p.remove.length;++e)p.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 m.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 v=t.elm=e.elm,h=e.children,y=t.children;if(e!==t){if(void 0!==t.data){for(let n=0;n<p.update.length;++n)p.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,v=t.length-1,p=t[0],h=t[v],y=n.length-1,b=n[0],x=n[y];for(;u<=v&&f<=y;)null==p?p=t[++u]:null==h?h=t[--v]:null==b?b=n[++f]:null==x?x=n[--y]:l(p,b)?(I(p,b,o),p=t[++u],b=n[++f]):l(h,x)?(I(h,x,o),h=t[--v],x=n[--y]):l(p,x)?(I(p,x,o),m.insertBefore(e,p.elm,m.nextSibling(h.elm)),p=t[++u],x=n[--y]):l(h,b)?(I(h,b,o),m.insertBefore(e,h.elm,p.elm),h=t[--v],b=n[++f]):(void 0===r&&(r=a(t,u,v)),s=r[b.key],i(s)?m.insertBefore(e,g(b,o),p.elm):(d=t[s],d.sel!==b.sel?m.insertBefore(e,g(b,o),p.elm):(I(d,b,o),t[s]=void 0,m.insertBefore(e,d.elm,p.elm))),b=n[++f]);(u<=v||f<=y)&&(u>v?(c=null==n[y+1]?null:n[y+1].elm,w(e,c,n,f,y,o)):C(e,t,u,v))}(v,h,y,n):r(y)?(r(e.text)&&m.setTextContent(v,""),w(v,null,y,0,y.length-1,n)):r(h)?C(v,h,0,h.length-1):r(e.text)&&m.setTextContent(v,""):e.text!==t.text&&(r(h)&&C(v,h,0,h.length-1),m.setTextContent(v,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<p.pre.length;++n)p.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=m.parentNode(o),g(t,r),null!==i&&(m.insertBefore(i,t.elm,m.nextSibling(o)),C(i,[e],0,0))),n=0;n<r.length;++n)r[n].data.hook.insert(r[n]);for(n=0;n<p.post.length;++n)p.post[n]();return t}}([{update:k,create:k},u,v,{pre:function(){m=!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;m||(e.elm.offsetLeft,m=!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 N(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 T={};customElements.define("drayman-element",class extends HTMLElement{constructor(){super(),this.previouslySerializedTree=[],this.events={},this.rootEvents={},this.emit=(e,t,n={},o={},i=[],r={})=>x(this,void 0,void 0,(function*(){var s,l,a,d;const c=null===(s=r.eventGuards)||void 0===s?void 0:s.find((e=>O(o,e.mask)));if(!(null===(l=r.eventGuards)||void 0===l?void 0:l.length)||c){(null==c?void 0:c.preventDefault)&&(null===(a=null==e?void 0:e.preventDefault)||void 0===a||a.call(e));const r=new FormData;r.append("eventName",t),r.append("componentInstanceId",this.componentInstanceId),r.append("options",JSON.stringify(Object.assign(Object.assign({},n),o)));for(let e of i)r.append("file",e.file,e.fileName);return yield null===(d=window.draymanConfig)||void 0===d?void 0:d.connection.postFormData(r)}})),this.once=!1,this.updateId=0,this.initSent=!1}get options(){return this.getAttribute("options")}set options(e){if(e&&"string"!=typeof e){const t={};for(const n of Object.keys(e))j(n)?(this.rootEvents[n]=e[n],t[n]=!0):t[n]=e[n];this.setAttribute("options",JSON.stringify(t))}else this.setAttribute("options",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,o){let i,r;return(s,l,a)=>new Promise(((d,c)=>x(this,void 0,void 0,(function*(){let u=n.leading&&!i;clearTimeout(i),r&&r(),i=setTimeout((()=>x(this,void 0,void 0,(function*(){i=null,n.trailing&&d(yield this.emit(s,e,{trailing:!0},l,a,o))}))),t),r=c,u&&d(yield this.emit(s,e,{leading:!0},l,a,o))})))).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},n)}return(e,o,i)=>x(this,void 0,void 0,(function*(){return e instanceof Event?yield this.emit(e,t,null,Object.assign(Object.assign({},N(e)),o||{}),i,n):yield this.emit(null,t,null,e,o,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))j(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||{}))j(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)&&!T[e.sel]){T[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}`](n,N(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))));E(o,e),o=e,this.initSent||(null===(i=this.onInit)||void 0===i||i.call(this),this.initSent=!0)}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 j=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.4.0",
+  "version": "2.5.0",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@drayman/core": "^2.4.0",
+    "@drayman/core": "^2.5.0",
     "cup-readdir": "^1.0.3",
     "express": "^4.17.1",
     "fs-extra": "^9.1.0",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@drayman/elements": "latest",
-    "@drayman/types": "^2.0.0",
+    "@drayman/types": "^2.5.0",
     "@types/express": "^4.17.11",
     "@types/fs-extra": "^9.0.11",
     "@types/multer": "^1.4.5",
@@ -47,5 +47,5 @@
     "npm": "^7.10.0",
     "start-server-and-test": "^1.12.1"
   },
-  "gitHead": "dc915749c069ea9e44167c00ee7553b578668a90"
+  "gitHead": "f8c24792f8efc97610cc88d21b4760882c600347"
 }