@flows/js-components
Version:
Built-in components for Flows JS SDK
2 lines (1 loc) • 1.69 kB
JavaScript
var i=[],g=o=>{i.forEach(t=>{t.cleanup(),t.el&&t.el.remove()}),i=[],o.blocks.forEach(t=>{let s=t.type==="component"?o.components[t.component]:t.type==="tour-component"?o.tourComponents[t.component]:null;if(s){let{cleanup:p,element:e}=s(t.props);i.push({el:e,cleanup:p,blockId:t.id}),e&&document.body.appendChild(e)}})};import{addSlotBlocksChangeListener as c,getCurrentSlotBlocks as a}from"@flows/js";var m={},d={},u=o=>{if(typeof window=="undefined"||customElements.get("flows-slot"))return;class t extends HTMLElement{constructor(){super(...arguments);this.mountedElements=[];this.blocks=[]}get slotId(){var e;return(e=this.getAttribute("data-slot-id"))!=null?e:""}get placeholderElement(){return this.querySelector("[data-placeholder]")}connectedCallback(){var n;this.blocks=a(this.slotId);let e=(n=o.addSlotBlocksChangeListener)!=null?n:c;this.changeListenerDispose=e(this.slotId,r=>{this.blocks=r,this.render()}),this.render()}disconnectedCallback(){var e;(e=this.changeListenerDispose)==null||e.call(this),this.unmount()}render(){this.unmount(),this.placeholderElement&&(this.blocks.length?this.placeholderElement.hidden=!0:this.placeholderElement.hidden=!1),this.blocks.forEach(e=>{let n=e.type==="component"?m[e.component]:e.type==="tour-component"?d[e.component]:null;if(n){let{cleanup:r,element:l}=n(e.props);this.mountedElements.push({el:l,cleanup:r,blockId:e.id}),l&&this.appendChild(l)}})}unmount(){this.mountedElements.forEach(e=>{e.cleanup(),e.el&&e.el.remove()}),this.mountedElements=[]}}customElements.define("flows-slot",t)},E=o=>{u({addSlotBlocksChangeListener:o.addSlotBlocksChangeListener}),m=o.components,d=o.tourComponents};export{g as render,E as updateSlotComponents};