@tapsioss/client-socket-manager/dist/index.cjs

<div align="center">

"use strict";var D=Object.defineProperty,Ae=Object.defineProperties,Ve=Object.getOwnPropertyDescriptor,qe=Object.getOwnPropertyDescriptors,Fe=Object.getOwnPropertyNames,T=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,ne=Object.prototype.propertyIsEnumerable;var oe=(t,e,o)=>e in t?D(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,v=(t,e)=>{for(var o in e||(e={}))V.call(e,o)&&oe(t,o,e[o]);if(T)for(var o of T(e))ne.call(e,o)&&oe(t,o,e[o]);return t},C=(t,e)=>Ae(t,qe(e));var se=(t,e)=>{var o={};for(var n in t)V.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&T)for(var n of T(t))e.indexOf(n)<0&&ne.call(t,n)&&(o[n]=t[n]);return o};var ie=(t,e)=>{for(var o in e)D(t,o,{get:e[o],enumerable:!0})},Ye=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Fe(e))!V.call(t,i)&&i!==o&&D(t,i,{get:()=>e[i],enumerable:!(n=Ve(e,i))||n.enumerable});return t};var We=t=>Ye(D({},"__esModule",{value:!0}),t);var Qe={};ie(Qe,{ClientSocketManager:()=>Be,ClientSocketManagerStub:()=>Ge,ManagerReservedEvents:()=>N,SocketReservedEvents:()=>f});module.exports=We(Qe);var Ue=require("socket.io-client");var f={CONNECTION:"connect",CONNECTION_ERROR:"connect_error",DISCONNECTION:"disconnect"},N={SERVER_PING:"ping",CONNECTION_ERROR:"error",RECONNECTING:"reconnect_attempt",RECONNECTING_ERROR:"reconnect_error",RECONNECTION_FAILURE:"reconnect_failed",SUCCESSFUL_RECONNECTION:"reconnect"};var s={};ie(s,{LogType:()=>ae,Status:()=>k,dispose:()=>Ze,getDevtoolChannelsElement:()=>fe,getDevtoolCloseIconElement:()=>Se,getDevtoolElement:()=>je,getDevtoolIconElement:()=>Le,getDevtoolInfoElement:()=>P,getDevtoolLogSectionElement:()=>_e,getDevtoolSocketIconElement:()=>be,getDevtoolStatusElement:()=>Xe,getDevtoolWrapperElement:()=>Oe,hide:()=>we,renderChannels:()=>ye,renderChipGroup:()=>me,renderDevtool:()=>ke,renderDevtoolIconButton:()=>Re,renderDevtoolInfo:()=>xe,renderDivider:()=>K,renderLog:()=>Te,renderLogs:()=>De,renderStatus:()=>Ie,setZIndex:()=>Ke,show:()=>Je,update:()=>$e,updateInfoSection:()=>Z});var _="tapsi-socket-client-devtool",q="tapsi-socket-client-devtool-wrapper",O=`${_}-button`,m=`${_}-info`,F=`${m}-status`,Y=`${m}-channels`,R=`${m}-logs`,x=`${O}-socket`,b=`${O}-close`,u={GREEN:"#3fb950",RED:"#f85149",YELLOW:"#d29922",GREY:"#656c7699"},k={RECONNECTING:"RECONNECTING",CONNECTED:"CONNECTED",DISCONNECTED:"DISCONNECTED",UNKNOWN:"UNKNOWN"},re={RECONNECTING:u.YELLOW,CONNECTED:u.GREEN,DISCONNECTED:u.RED,UNKNOWN:u.GREY},ae={SUCCESSFUL_RECONNECTION:"SUCCESSFUL_RECONNECTION",RECONNECTION_FAILURE:"RECONNECTION_FAILURE",RECONNECTING:"RECONNECTING",CONNECTION_ERROR:"CONNECTION_ERROR",RECONNECTING_ERROR:"RECONNECTING_ERROR",SUBSCRIBED:"SUBSCRIBED",UNSUBSCRIBED:"UNSUBSCRIBED",CONNECTED:"CONNECTED",DISCONNECTED:"DISCONNECTED"},W={SUCCESSFUL_RECONNECTION:u.GREEN,SUBSCRIBED:u.GREEN,RECONNECTION_FAILURE:u.RED,RECONNECTING:u.YELLOW,CONNECTION_ERROR:u.RED,RECONNECTING_ERROR:u.RED,UNSUBSCRIBED:u.RED,CONNECTED:u.GREEN,DISCONNECTED:u.RED},ce=`
<svg id="${x}" width="1rem" height="1rem" viewBox="0 -31.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M192.440223,144.644612 L224.220111,144.644612 L224.220111,68.3393384 L188.415329,32.5345562 L165.943007,55.0068785 L192.440223,81.5040943 L192.440223,144.644612 L192.440223,144.644612 Z M224.303963,160.576482 L178.017688,160.576482 L113.451687,160.576482 L86.954471,134.079266 L98.1906322,122.843105 L120.075991,144.728464 L165.104487,144.728464 L120.746806,100.286931 L132.06682,88.9669178 L176.4245,133.324599 L176.4245,88.2961022 L154.622994,66.4945955 L165.775303,55.3422863 L110.684573,0 L56.3485097,0 L56.3485097,0 L0,0 L31.6960367,31.6960367 L31.6960367,31.7798886 L31.8637406,31.7798886 L97.4359646,31.7798886 L120.662954,55.0068785 L86.7029152,88.9669178 L63.4759253,65.7399279 L63.4759253,47.7117589 L31.6960367,47.7117589 L31.6960367,78.9046839 L86.7029152,133.911562 L64.3144448,156.300033 L100.119227,192.104815 L154.45529,192.104815 L256,192.104815 L256,192.104815 L224.303963,160.576482 L224.303963,160.576482 Z" fill="currentcolor">
</path>
</svg>
`,le=`
<svg id="${b}" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="currentcolor"/>
</svg>
`;var w=class{constructor(e){this._queue=[];if(!Number.isInteger(e)||e<=0)throw new Error("maxLength must be a positive integer");this._maxLength=e}enqueue(e){this._queue.length>=this._maxLength&&this._queue.shift(),this._queue.push(e)}get values(){return[...this._queue]}get length(){return this._queue.length}clear(){this._queue=[]}};var S=class{constructor(e){this._savedScrollPosition=0;this._target=null;let{target:o}=e!=null?e:{};o&&(this._target=o)}setTarget(e){e&&(this._target=e)}get savedScrollPosition(){return this._savedScrollPosition}save(){this._target&&(this._savedScrollPosition=this._target.scrollTop)}restore(){this._target&&(this._target.scrollTop=this._savedScrollPosition)}};var M=0,U=0,de=M,pe=U,ue=0,Ee=0,y=!1,$=!1,E=t=>Object.entries(t).map(([e,o])=>`${e}: ${o}`).join("; ");var I=t=>Object.entries(t).map(([e,o])=>typeof o=="boolean"?o?e:"":`${e}="${o}"`).filter(Boolean).join(" "),he=t=>{var e,o;return t instanceof MouseEvent?t.clientX:t instanceof TouchEvent&&(o=(e=t.touches[0])==null?void 0:e.clientX)!=null?o:0},ve=t=>{var e,o;return t instanceof MouseEvent?t.clientY:t instanceof TouchEvent&&(o=(e=t.touches[0])==null?void 0:e.clientY)!=null?o:0},z=(t,e)=>{let o=r=>{y&&(r.stopPropagation(),r.preventDefault())},n=r=>{let l=he(r),d=ve(r);ue=l,Ee=d,de=M,pe=U,y=!1,$=!0,document.addEventListener("click",o,!0)},i=r=>{if(!$)return;let l=he(r),d=ve(r),a=l-ue,p=d-Ee;!y&&(Math.abs(a)>5||Math.abs(p)>5)&&(y=!0),y&&(r.preventDefault(),r.stopPropagation(),M=de+a,U=pe+p,e.style.transform=`translate(${M}px, ${U}px)`)},c=()=>{$&&($=!1,document.removeEventListener("click",o,!0))};t.style.touchAction="none",t.addEventListener("touchstart",n,!1),t.addEventListener("mousedown",n,!1),document.addEventListener("mousemove",i,!1),document.addEventListener("touchmove",i,!1),document.addEventListener("mouseup",c,!1),document.addEventListener("touchend",c,!1)},Ne=t=>{let e=String(t.getHours()).padStart(2,"0"),o=String(t.getMinutes()).padStart(2,"0"),n=String(t.getSeconds()).padStart(2,"0");return`${e}:${o}:${n}`};var He={border:"none",background:"transparent",cursor:"pointer","-webkit-tap-highlight-color":"transparent"},ge={color:"#fff",background:"#000c","backdrop-filter":"blur(0.25rem)","box-shadow":"0 0 1.25rem 0.5rem #0005","font-family":"monospace","font-size":"0.75rem","line-height":"2"},X={"aria-hidden":"true",tabindex:"-1"},L={status:k.UNKNOWN,channels:new Set,logs:new w(20)},B=!1,g=!1,G=NaN,K=()=>'<hr color="#222222" />',me=t=>{let e=E({"background-color":"#fff4","border-radius":"999px",padding:"0 0.5rem","list-style-type":"none",overflow:"hidden","white-space":"nowrap","text-overflow":"ellipsis","overscroll-behavior-y":"contain"}),o=E({margin:"0.5rem 0 0",display:"flex",gap:"0.5rem",padding:"0","flex-wrap":"wrap","overflow-x":"hidden","overflow-y":"auto","max-height":"6rem"});return`<ul id="${Y}" style="${o}">${t.map(n=>`<li style="${e}">${n}</li>`).join("")}</ul>`},je=()=>document.getElementById(_),fe=()=>document.getElementById(Y),Xe=()=>document.getElementById(F),_e=()=>document.getElementById(R),Oe=()=>document.getElementById(q),P=()=>document.getElementById(m),Le=()=>document.getElementById(O),be=()=>document.getElementById(x),Se=()=>document.getElementById(b),H=new S,j=new S,ye=()=>{let{channels:t}=L;return t.size===0?"":`
    ${K()}
    <code>Channels:</code>
    ${me(Array.from(L.channels))}
  `},Ie=()=>{let{status:t}=L,e=re[t],o=E({display:"inline-flex",width:"0.5rem",height:"0.5rem","border-radius":"50%","background-color":e,"box-shadow":`0 0 1.25rem 0.125rem ${e}`});return`<code>Status: <span id="${F}">${t}</span> <span style="${o}"></span></code>`},Te=t=>{let e=E({color:W[t.type],margin:"0"}),o=E({"font-size":"0.625rem","margin-top":"0",color:W[t.type],"overflow-wrap":"break-word"}),n=E({"margin-bottom":"0","font-size":"0.625rem",color:"#777"});return`
  <div class="${R}-item">
    <p style="${n}">${Ne(t.date)}</p>
    <p style="${e}">${t.type}</p>
    <p style="${o}">${t.detail}</p>
  </div>
  `},De=()=>{if(L.logs.length===0)return"";let t=I({id:R,style:E({"max-height":"20rem",overflow:"auto","overscroll-behavior-y":"contain"})});return`
  ${K()}
  <div ${t}>${L.logs.values.map(Te).join("")}</div>
  `},Re=()=>`
    <button ${I(C(v({id:O,"data-testid":O},X),{style:E(C(v(v({},He),ge),{width:"3rem",height:"3rem",display:"flex","justify-content":"center","align-items":"center",position:"relative","border-radius":"1.5rem"}))}))}>
      ${ce}
      ${le}
    </button>
  `,xe=()=>`<div ${I(C(v({id:m,"data-open":"true","data-testid":m},X),{style:E(C(v({},ge),{padding:"1rem",position:"absolute",background:"#000c","border-radius":"0.25rem 1rem 1rem 1rem",top:"0",left:"3.5rem",opacity:"0",transform:"scale(0)","transform-origin":"0 0",transition:"opacity 0.2s, transform 0.2s",width:"14rem"}))}))}></div>`,ke=()=>`
    <div ${I(C(v({id:_,"data-testid":_},X),{style:E({position:"relative","box-sizing":"border-box"})}))}>
      ${Re()}
      ${xe()}
    </div>
  `,Z=()=>{j.save(),H.save();let t=P(),e=E({background:"#000c",padding:"1rem","margin-top":"0.5rem","border-radius":"0.5rem"}),o=E({display:"flex","align-items":"center"});return t.innerHTML=`
    <header style="${o}">
      <b>Client Socket Manager</b>
    </header>
    <div style="${e}">
      ${Ie()}
      ${ye()}
      ${De()}
    </div>
  `,j.setTarget(_e()),H.setTarget(fe()),j.restore(),H.restore(),t},Ke=t=>{G=t},we=()=>{var t;(t=Oe())==null||t.remove(),B=!1,g=!1},Ze=()=>{$e(t=>{t.channels.clear(),t.logs.clear(),t.status=k.UNKNOWN}),G=NaN,we()},Ce=()=>{var n;let t=be(),e=Se(),o=P();g=!g,t.style.opacity=g?"0":"1",e.style.opacity=g?"1":"0",o.style.opacity=g?"1":"0",o.style.transform=`scale(${g?"1":"0"})`,(n=P())==null||n.setAttribute("data-open",g?"true":"false")},$e=t=>{t==null||t(L),B&&Z()},Je=()=>{if(B)return;B=!0;let t=document.createElement("div");if(Number.isNaN(G))throw new Error("No z-index was set for the devtool.");t.style.zIndex=`${G}`,t.style.position="fixed",t.style.top="8px",t.style.left="8px",t.id=q,t.innerHTML=ke(),document.body.appendChild(t);let e=Le();e&&(e.addEventListener("click",Ce),z(e,t)),e&&(e.addEventListener("click",Ce),z(e,t)),[b,x].forEach(o=>{let n=document.getElementById(o);n&&(n.style.position="absolute",n.style.top="50%",n.style.left="50%",n.style.transform="translate(-50%, -50%)",n.style.transition="opacity 0.2s",o===b&&(n.style.opacity="0"))}),Z()};var J=()=>typeof document!="undefined",Me=(t,e)=>{if(typeof t!="function")throw new TypeError(`ClientSocketManager: ${e}`);return!0},h=t=>{t&&console.warn(["ClientSocketManager: Attempted to use a disposed client.","Please reassign the client with a new instance."].join(" "))};var Q=class{constructor(e,o){this._disposed=!1;this._socket=null;this._inputListeners={};var te;let ee=o!=null?o:{},{path:n="/socket.io",reconnectionDelay:i=500,reconnectionDelayMax:c=2e3,eventHandlers:r,devtool:l}=ee,d=se(ee,["path","reconnectionDelay","reconnectionDelayMax","eventHandlers","devtool"]),{enabled:a=!1,zIndex:p=999999}=l!=null?l:{};try{this._socket=(0,Ue.io)(e,C(v({},d),{path:n,reconnectionDelay:i,reconnectionDelayMax:c})),this._inputListeners=r!=null?r:{},this._handleVisibilityChange=this._handleVisibilityChange.bind(this),this._attachPageEvents(),this._attachSocketEvents(),this._attachManagerEvents(),(te=this._inputListeners.onInit)==null||te.call(this),s.setZIndex(p),a&&this.showDevtool()}catch(Pe){console.error("Failed to initialize socket connection",{uri:e,path:n,err:Pe})}}_attachPageEvents(){J()&&document.addEventListener("visibilitychange",this._handleVisibilityChange)}_attachSocketEvents(){this._socket&&(this._socket.on(f.CONNECTION,()=>{var e;(e=this._inputListeners.onSocketConnection)==null||e.call(this),s.update(o=>{o.status=s.Status.CONNECTED})}),this._inputListeners.onSocketConnectionError&&this._socket.on(f.CONNECTION_ERROR,this._inputListeners.onSocketConnectionError.bind(this)),this._socket.on(f.DISCONNECTION,(e,o)=>{var n;(n=this._inputListeners.onSocketDisconnection)==null||n.call(this,e,o),s.update(i=>{i.status=s.Status.DISCONNECTED}),this.autoReconnectable||e==="io server disconnect"&&this.connect()}))}_attachManagerEvents(){var d;let e=(d=this._socket)==null?void 0:d.io;if(!e)return;let{onServerPing:o,onConnectionError:n,onReconnecting:i,onReconnectingError:c,onReconnectionFailure:r,onSuccessfulReconnection:l}=this._inputListeners;e.on(N.CONNECTION_ERROR,a=>{n==null||n.call(this,a),s.update(p=>{p.logs.enqueue({type:s.LogType.CONNECTION_ERROR,date:new Date,detail:a.message})})}),o&&e.on(N.SERVER_PING,o.bind(this)),e.on(N.RECONNECTING,a=>{i==null||i.call(this,a),s.update(p=>{p.status=s.Status.RECONNECTING,p.logs.enqueue({type:s.LogType.RECONNECTING,date:new Date,detail:`Reconnecting... (${a} attempt(s))`})})}),e.on(N.RECONNECTING_ERROR,a=>{c==null||c.call(this,a),s.update(p=>{p.logs.enqueue({type:s.LogType.RECONNECTING_ERROR,date:new Date,detail:a.message})})}),e.on(N.RECONNECTION_FAILURE,()=>{r==null||r.call(this),s.update(a=>{a.logs.enqueue({type:s.LogType.RECONNECTION_FAILURE,date:new Date,detail:"Failed to reconnect."})})}),e.on(N.SUCCESSFUL_RECONNECTION,a=>{l==null||l.call(this,a),s.update(p=>{p.logs.enqueue({type:s.LogType.SUCCESSFUL_RECONNECTION,date:new Date,detail:`Successfully connected after ${a} attempt(s)`})})})}_detachPageEvents(){J()&&document.removeEventListener("visibilitychange",this._handleVisibilityChange)}_detachSocketEvents(){var e;(e=this._socket)==null||e.off()}_detachManagerEvents(){var e;(e=this._socket)==null||e.io.off()}_handleVisibilityChange(){var n,i;let e=document.visibilityState==="visible",o=document.visibilityState==="hidden";!e&&!o||(e?((n=this._inputListeners.onVisiblePage)==null||n.call(this),this.connected||this.connect()):((i=this._inputListeners.onHiddenPage)==null||i.call(this),this.disconnect()))}get disposed(){return this._disposed}emit(e,...o){h(this.disposed),this._socket&&this._socket.emit(e,...o)}get id(){var e,o;return h(this.disposed),(o=(e=this._socket)==null?void 0:e.id)!=null?o:null}get connected(){var e,o;return h(this.disposed),(o=(e=this._socket)==null?void 0:e.connected)!=null?o:!1}get recovered(){var e,o;return h(this.disposed),(o=(e=this._socket)==null?void 0:e.recovered)!=null?o:!1}get autoReconnectable(){var e,o;return h(this.disposed),(o=(e=this._socket)==null?void 0:e.active)!=null?o:!1}subscribe(e,o,n){if(h(this.disposed),!this._socket)return;Me(o,`Expected a valid callback function. Received \`${typeof o}\`.`);let{onSubscriptionComplete:i,signal:c}=n!=null?n:{},r=(...d)=>{var a;h(this.disposed),this._socket&&((a=this._inputListeners.onAnySubscribedMessageReceived)==null||a.call(this,e,d),o.apply(this,d))};this._socket.on(e,r);let l=()=>{this.unsubscribe(e,r),c==null||c.removeEventListener("abort",l)};c==null||c.addEventListener("abort",l),c!=null&&c.aborted&&l(),i==null||i.call(this,e),s.update(d=>{d.channels.add(e),d.logs.enqueue({type:s.LogType.SUBSCRIBED,date:new Date,detail:`subscribed to \`${e}\` channel`})})}unsubscribe(e,o){h(this.disposed),this._socket&&(o?this._socket.off(e,o):this._socket.off(e),s.update(n=>{n.channels.delete(e),n.logs.enqueue({type:s.LogType.UNSUBSCRIBED,date:new Date,detail:`unsubscribed from \`${e}\` channel`})}))}connect(){var e;h(this.disposed),(e=this._socket)==null||e.connect(),s.update(o=>{o.logs.enqueue({type:s.LogType.CONNECTED,date:new Date,detail:"socket was conneced manually"})})}disconnect(){var e;h(this.disposed),(e=this._socket)==null||e.disconnect(),s.update(o=>{o.logs.enqueue({type:s.LogType.DISCONNECTED,date:new Date,detail:"socket was disconneced manually"})})}dispose(){var e,o;h(this.disposed),(e=this._inputListeners.onDispose)==null||e.call(this),this._detachPageEvents(),this._detachSocketEvents(),this._detachManagerEvents(),this.disconnect(),(o=this._socket)==null||o.io.engine.close(),this._socket=null,this._inputListeners={},this._disposed=!0,s.dispose()}showDevtool(){s.show()}hideDevtool(){s.hide()}},Be=Q;var A=class{constructor(e,o){this._connected=!1;this._disposed=!1;var n;this._inputListeners=(n=o==null?void 0:o.eventHandlers)!=null?n:{}}get id(){return this._connected?"__id__":null}get connected(){return this._connected}get recovered(){return!1}get autoReconnectable(){return!1}get disposed(){return this._disposed}emit(){}subscribe(e,o,n){}unsubscribe(e,o){}connect(){var e;this._connected=!0,(e=this._inputListeners.onSocketConnection)==null||e.call(this)}disconnect(){var e;this._connected=!1,(e=this._inputListeners.onSocketDisconnection)==null||e.call(this,"io client disconnect")}dispose(){this.disconnect(),this._disposed=!0,this._inputListeners={}}showDevtool(){}hideDevtool(){}};A.__mock__=!0;var Ge=A;0&&(module.exports={ClientSocketManager,ClientSocketManagerStub,ManagerReservedEvents,SocketReservedEvents});
//# sourceMappingURL=index.cjs.map