@yomo/react-cursor-chat - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/cursor/me.d.ts

@@ -1,5 +0,5 @@
-import Room from '@yomo/presencejs/dist/room';
+import { Presence } from '@yomo/presencejs';
 import Cursor from './cursor';
 export default class Me extends Cursor {
-    private room;
+    private yomo;
     private onlineSubscription;
@@ -15,3 +15,3 @@ private mousemoveSubscription;
     });
-    goOnline(room: Room): void;
+    goOnline(yomo: Presence): void;
     goOffline(): Promise<unknown>;
@@ -18,0 +18,0 @@ sendMessage(message: string): void;

dist/cursor/others.d.ts

@@ -1,2 +0,2 @@
-import Room from '@yomo/presencejs/dist/room';
+import { Presence } from '@yomo/presencejs';
 import Cursor from './cursor';
@@ -13,3 +13,3 @@ export default class Others extends Cursor {
     });
-    goOnline(room: Room): void;
+    goOnline(yomo: Presence): void;
     unsubscribe(): void;
@@ -16,0 +16,0 @@ onTextMessage(_message: string): void;

dist/react-cursor-chat.cjs.development.js

@@ -926,6 +926,6 @@ 'use strict';
 
-  _proto.goOnline = function goOnline(room) {
-    this.room = room;
-    this.online(room);
-    this.onlineSubscription = this.subscribeOnline(room);
+  _proto.goOnline = function goOnline(yomo) {
+    this.yomo = yomo;
+    this.online(yomo);
+    this.onlineSubscription = this.subscribeOnline(yomo);
 
@@ -936,3 +936,3 @@ if (this.mousePositionSubscription) {
 
-    this.mousePositionSubscription = this.subscribeMousePosition(room);
+    this.mousePositionSubscription = this.subscribeMousePosition(yomo);
   };
@@ -946,4 +946,4 @@
             case 0:
-              if (this.room) {
-                this.room.publish('offline', {
+              if (this.yomo) {
+                this.yomo.send('offline', {
                   id: this.id
@@ -992,4 +992,4 @@ });
   _proto.sendMessage = function sendMessage(message) {
-    if (this.room) {
-      this.room.publish('text', {
+    if (this.yomo) {
+      this.yomo.send('text', {
         id: this.id,
@@ -1001,4 +1001,4 @@ message: message
 
-  _proto.online = function online(room) {
-    room.publish('online', {
+  _proto.online = function online(yomo) {
+    yomo.send('online', {
       id: this.id,
@@ -1012,7 +1012,7 @@ x: 0,
 
-  _proto.subscribeOnline = function subscribeOnline(room) {
+  _proto.subscribeOnline = function subscribeOnline(yomo) {
     var _this2 = this;
 
-    return room.fromServer('online').subscribe(function () {
-      room.publish('sync', {
+    return yomo.on$('online').subscribe(function () {
+      yomo.send('sync', {
         id: _this2.id,
@@ -1044,3 +1044,3 @@ x: _this2.x,
 
-  _proto.subscribeMousePosition = function subscribeMousePosition(room) {
+  _proto.subscribeMousePosition = function subscribeMousePosition(yomo) {
     var _this4 = this;
@@ -1060,3 +1060,3 @@
     }));
-    return room.bindServer(movement$, 'movement');
+    return movement$.subscribe(yomo.ofRoom('001', 'movement'));
   };
@@ -1083,5 +1083,5 @@
 
-  _proto.goOnline = function goOnline(room) {
-    this.movementMessageSubscription = this.subscribeMovement(room);
-    this.textMessageSubscription = this.subscribeTextMessage(room);
+  _proto.goOnline = function goOnline(yomo) {
+    this.movementMessageSubscription = this.subscribeMovement(yomo);
+    this.textMessageSubscription = this.subscribeTextMessage(yomo);
   };
@@ -1103,6 +1103,6 @@
 
-  _proto.subscribeTextMessage = function subscribeTextMessage(room) {
+  _proto.subscribeTextMessage = function subscribeTextMessage(yomo) {
     var _this = this;
 
-    return room.fromServer('text').pipe(operators.filter(function (data) {
+    return yomo.on$('text').pipe(operators.filter(function (data) {
       return data.id === _this.id;
@@ -1114,6 +1114,6 @@ })).subscribe(function (data) {
 
-  _proto.subscribeMovement = function subscribeMovement(room) {
+  _proto.subscribeMovement = function subscribeMovement(yomo) {
     var _this2 = this;
 
-    return room.fromServer('movement').pipe(operators.filter(function (data) {
+    return yomo.on$('movement').pipe(operators.filter(function (data) {
       return data.id === _this2.id;
@@ -1161,9 +1161,6 @@ }), operators.map(function (data) {
     setMe(me);
-    var yomoclient = new presencejs.YoMoClient(socketURL, {
-      reconnectInterval: 5000,
-      reconnectAttempts: 5
-    });
-    yomoclient.on('connected', function () {
-      var room = yomoclient.getRoom('001');
-      room.fromServer('online').pipe(operators.filter(function (data) {
+    var yomo = new presencejs.Presence(socketURL);
+    yomo.on('connected', function () {
+      yomo.toRoom('001');
+      yomo.on$('online').pipe(operators.filter(function (data) {
         return data.id !== ID;
@@ -1178,3 +1175,3 @@ })).subscribe(function (data) {
           var others = new Others(data);
-          others.goOnline(room);
+          others.goOnline(yomo);
           cursorMap.set(others.id, others);
@@ -1184,3 +1181,3 @@ return cursorMap;
       });
-      room.fromServer('offline').subscribe(function (data) {
+      yomo.on('offline', function (data) {
         setOthersMap(function (old) {
@@ -1200,3 +1197,3 @@ var cursorMap = new Map(old);
 
-      room.fromServer('sync').pipe(operators.filter(function (data) {
+      yomo.on$('sync').pipe(operators.filter(function (data) {
         return data.id !== ID;
@@ -1211,3 +1208,3 @@ })).subscribe(function (data) {
           var others = new Others(data);
-          others.goOnline(room);
+          others.goOnline(yomo);
           cursorMap.set(others.id, others);
@@ -1217,4 +1214,4 @@ return cursorMap;
       });
-      me.goOnline(room);
-    }); // yomoclient.on('closed', () => {});
+      me.goOnline(yomo);
+    }); // yomo.on('closed', () => {});
 
@@ -1231,3 +1228,3 @@ var clear = /*#__PURE__*/function () {
               case 2:
-                yomoclient.close();
+                yomo.close();
 
@@ -1234,0 +1231,0 @@ case 3:

dist/react-cursor-chat.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),r=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,n=require("rxjs"),o=require("rxjs/operators"),i=require("@yomo/presencejs");function a(t,e,r,n,o,i,a){try{var s=t[i](a),u=s.value}catch(t){return void r(t)}s.done?e(u):Promise.resolve(u).then(n,o)}function s(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function s(t){a(i,n,o,s,u,"next",t)}function u(t){a(i,n,o,s,u,"throw",t)}s(void 0)}))}}function u(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,(Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var c,l=(function(t){var e=function(t){var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function s(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,r){return t[e]=r}}function u(t,e,r,n){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new S(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var s=x(a,r);if(s){if(s===l)continue;return s}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var u=c(t,e,r);if("normal"===u.type){if(n=r.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n="completed",r.method="throw",r.arg=u.arg)}}}(t,r,i),o}function c(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var v={};s(v,o,(function(){return this}));var m=Object.getPrototypeOf,d=m&&m(m(L([])));d&&d!==e&&r.call(d,o)&&(v=d);var y=p.prototype=f.prototype=Object.create(v);function g(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,s){var u=c(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,a,s)}),(function(t){n("throw",t,a,s)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,s)}))}s(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function x(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,x(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=c(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function w(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(w,this),this.reset(!0)}function L(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:M}}function M(){return{value:void 0,done:!0}}return h.prototype=p,s(y,"constructor",p),s(p,"constructor",h),h.displayName=s(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,s(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(b.prototype),s(b.prototype,i,(function(){return this})),t.AsyncIterator=b,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new b(u(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),s(y,a,"Generator"),s(y,o,(function(){return this})),s(y,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=L,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var s=r.call(i,"catchLoc"),u=r.call(i,"finallyLoc");if(s&&u){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),E(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;E(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:L(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}}(c={exports:{}}),c.exports),f=function(){return window.getViewportSize||(window.onresize=function(){window.getViewportSize={width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}},window.onresize()),window.getViewportSize},h=function(){function t(t,e,r,n,o){this.id=t,this.x=e,this.y=r,this.name=n,this.avatar=o,this.color=function(t){for(var e=0,r=0;r<t.length;r++)e=t.charCodeAt(r)+((e<<5)-e);for(var n="#",o=0;o<3;o++)n+=("00"+(e>>8*o&255).toString(16)).slice(-2);return n}(t)}var e=t.prototype;return e.move=function(t,e){this.x=t,this.y=e},e.onMove=function(t){},t}(),p=function(t){function e(e){var r,n=e.name,o=e.avatar;return(r=t.call(this,e.id,e.x,e.y,void 0===n?"":n,void 0===o?"":o)||this).mousemoveSubscription=r.subscribeMousemove(),r}u(e,t);var r=e.prototype;return r.goOnline=function(t){this.room=t,this.online(t),this.onlineSubscription=this.subscribeOnline(t),this.mousePositionSubscription&&this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=this.subscribeMousePosition(t)},r.goOffline=function(){var t=s(l.mark((function t(){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.room&&this.room.publish("offline",{id:this.id}),this.mousemoveSubscription&&(this.mousemoveSubscription.unsubscribe(),this.mousemoveSubscription=void 0),this.mousePositionSubscription&&(this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=void 0),this.onlineSubscription&&(this.onlineSubscription.unsubscribe(),this.onlineSubscription=void 0),t.next=6,new Promise((function(t){setTimeout(t,500)}));case 6:return t.abrupt("return",t.sent);case 7:case"end":return t.stop()}}),t,this)})));return function(){return t.apply(this,arguments)}}(),r.sendMessage=function(t){this.room&&this.room.publish("text",{id:this.id,message:t})},r.online=function(t){t.publish("online",{id:this.id,x:0,y:0,name:this.name,avatar:this.avatar})},r.subscribeOnline=function(t){var e=this;return t.fromServer("online").subscribe((function(){t.publish("sync",{id:e.id,x:e.x,y:e.y,name:e.name,avatar:e.avatar})}))},r.subscribeMousemove=function(){var e=this;return n.fromEvent(document,"mousemove").subscribe((function(r){var n=r.clientX,o=r.clientY;t.prototype.move.call(e,n,o),e.onMove({mouseX:n,mouseY:o})}))},r.subscribeMousePosition=function(t){var e=this,r=n.fromEvent(document,"mousemove").pipe(o.map((function(t){var r,n,o=(r=t.clientY,{scaleX:t.clientX/(n=f()).width,scaleY:r/n.height});return{id:e.id,x:o.scaleX,y:o.scaleY}})));return t.bindServer(r,"movement")},e}(h),v=function(t){function e(e){var r=e.name,n=e.avatar;return t.call(this,e.id,e.x,e.y,void 0===r?"":r,void 0===n?"":n)||this}u(e,t);var r=e.prototype;return r.goOnline=function(t){this.movementMessageSubscription=this.subscribeMovement(t),this.textMessageSubscription=this.subscribeTextMessage(t)},r.unsubscribe=function(){this.textMessageSubscription&&(this.textMessageSubscription.unsubscribe(),this.textMessageSubscription=void 0),this.movementMessageSubscription&&(this.movementMessageSubscription.unsubscribe(),this.movementMessageSubscription=void 0)},r.onTextMessage=function(t){},r.subscribeTextMessage=function(t){var e=this;return t.fromServer("text").pipe(o.filter((function(t){return t.id===e.id}))).subscribe((function(t){e.onTextMessage(t.message)}))},r.subscribeMovement=function(e){var r=this;return e.fromServer("movement").pipe(o.filter((function(t){return t.id===r.id})),o.map((function(t){return e=t.y,{mouseX:t.x*(r=f()).width,mouseY:e*r.height};var e,r}))).subscribe((function(e){var n=e.mouseX,o=e.mouseY;t.prototype.move.call(r,n,o),r.onMove({mouseX:n,mouseY:o})}))},e}(h),m=function(t){var r=t.socketURL,n=t.name,a=t.avatar,u=e.useState(null),c=u[0],f=u[1],h=e.useState(new Map),m=h[0],d=h[1];e.useEffect((function(){var t="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})),e=new p({id:t,x:0,y:0,name:n||"",avatar:a||""});f(e);var u=new i.YoMoClient(r,{reconnectInterval:5e3,reconnectAttempts:5});u.on("connected",(function(){var r=u.getRoom("001");r.fromServer("online").pipe(o.filter((function(e){return e.id!==t}))).subscribe((function(t){d((function(e){if(e.has(t.id))return e;var n=new Map(e),o=new v(t);return o.goOnline(r),n.set(o.id,o),n}))})),r.fromServer("offline").subscribe((function(t){d((function(e){var r=new Map(e),n=r.get(t.id);return n&&n.unsubscribe(),r.delete(t.id),r}))})),r.fromServer("sync").pipe(o.filter((function(e){return e.id!==t}))).subscribe((function(t){d((function(e){if(e.has(t.id))return e;var n=new Map(e),o=new v(t);return o.goOnline(r),n.set(o.id,o),n}))})),e.goOnline(r)}));var c=function(){var t=s(l.mark((function t(){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.goOffline();case 2:u.close();case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}();return window.addEventListener("unload",c),function(){c(),window.removeEventListener("unload",c)}}),[]);var y=[];return m.forEach((function(t){y.push(t)})),{me:c,others:y}},d=function(t){var r=e.useRef(null);return e.useEffect((function(){var e=function(t){r.current&&r.current.setAttribute("style","transform: translate3d("+t.mouseX+"px, "+t.mouseY+"px, 0);")};e({mouseX:t.x,mouseY:t.y}),t.onMove=function(t){e(t)}}),[t]),r},y=function(t){var n=t.cursor,o=t.theme,i=d(n),a=e.useState(!1),s=a[0],u=a[1],c=e.useState(""),l=c[0],f=c[1],h=e.useCallback((function(t){"Slash"===t.code&&u(!0),"Escape"===t.code&&(u(!1),f(""),n.sendMessage(""))}),[]),p=e.useCallback((function(t){var e=t.target.value;"/"!==e&&(f(e),n.sendMessage(e))}),[]);return e.useEffect((function(){return document.addEventListener("keydown",h),function(){document.removeEventListener("keydown",h)}}),[]),e.useMemo((function(){return r.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},r.createElement(b,{color:n.color}),n.avatar&&r.createElement("img",{className:"online-cursor-wrapper__avatar",src:n.avatar,alt:"avatar"}),s&&r.createElement("div",{className:"online-cursor-wrapper__input-box "+("light"===o?"light":"dark")},r.createElement("span",null,l),r.createElement("input",{autoFocus:!0,placeholder:"Say something",value:l,onChange:p})))}),[s,l])},g=function(t){var n=t.cursor,o=t.theme,i=d(n),a=e.useState(n.name),s=a[0],u=a[1];return e.useEffect((function(){n.onTextMessage=function(t){u(t)}}),[]),e.useMemo((function(){return r.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},r.createElement(b,{color:n.color}),n.avatar&&r.createElement("img",{className:"online-cursor-wrapper__avatar",src:n.avatar,alt:"avatar"}),s&&r.createElement("div",{className:"online-cursor-wrapper__text "+("light"===o?"light":"dark")},s))}),[s])};function b(t){var n=t.color;return e.useMemo((function(){return r.createElement("svg",{shapeRendering:"geometricPrecision",xmlns:"http://www.w3.org/2000/svg",fill:n},r.createElement("path",{fill:"#666",d:"M9.63 6.9a1 1 0 011.27-1.27l11.25 3.75a1 1 0 010 1.9l-4.68 1.56a1 1 0 00-.63.63l-1.56 4.68a1 1 0 01-1.9 0L9.63 6.9z"}),r.createElement("path",{stroke:"#fff",strokeWidth:"1.5",d:"M11.13 4.92a1.75 1.75 0 00-2.2 2.21l3.74 11.26a1.75 1.75 0 003.32 0l1.56-4.68a.25.25 0 01.16-.16L22.4 12a1.75 1.75 0 000-3.32L11.13 4.92z"}))}),[n])}exports.default=e.memo((function(t){var e=t.theme,n=void 0===e?"dark":e,o=m({socketURL:t.socketURL,name:t.name,avatar:t.avatar}),i=o.me;return i?r.createElement("div",{className:"online-cursor-wrapper"},o.others.map((function(t){return r.createElement(g,{key:t.id,cursor:t,theme:n})})),r.createElement(y,{cursor:i,theme:n})):null})),exports.useOnlineCursor=m,exports.useRenderPosition=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=require("react"),n=(t=e)&&"object"==typeof t&&"default"in t?t.default:t,r=require("rxjs"),o=require("rxjs/operators"),i=require("@yomo/presencejs");function a(t,e,n,r,o,i,a){try{var s=t[i](a),u=s.value}catch(t){return void n(t)}s.done?e(u):Promise.resolve(u).then(r,o)}function s(t){return function(){var e=this,n=arguments;return new Promise((function(r,o){var i=t.apply(e,n);function s(t){a(i,r,o,s,u,"next",t)}function u(t){a(i,r,o,s,u,"throw",t)}s(void 0)}))}}function u(t,e){t.prototype=Object.create(e.prototype),t.prototype.constructor=t,(Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var c,l=(function(t){var e=function(t){var e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",i=r.asyncIterator||"@@asyncIterator",a=r.toStringTag||"@@toStringTag";function s(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,n){return t[e]=n}}function u(t,e,n,r){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new S(r||[]);return o._invoke=function(t,e,n){var r="suspendedStart";return function(o,i){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===o)throw i;return{value:void 0,done:!0}}for(n.method=o,n.arg=i;;){var a=n.delegate;if(a){var s=x(a,n);if(s){if(s===l)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var u=c(t,e,n);if("normal"===u.type){if(r=n.done?"completed":"suspendedYield",u.arg===l)continue;return{value:u.arg,done:n.done}}"throw"===u.type&&(r="completed",n.method="throw",n.arg=u.arg)}}}(t,n,i),o}function c(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var l={};function f(){}function h(){}function p(){}var v={};s(v,o,(function(){return this}));var m=Object.getPrototypeOf,d=m&&m(m(L([])));d&&d!==e&&n.call(d,o)&&(v=d);var y=p.prototype=f.prototype=Object.create(v);function g(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){var r;this._invoke=function(o,i){function a(){return new e((function(r,a){!function r(o,i,a,s){var u=c(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return r("throw",t,a,s)}))}s(u.arg)}(o,i,r,a)}))}return r=r?r.then(a,a):a()}}function x(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,x(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var r=c(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,l;var o=r.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function w(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(w,this),this.reset(!0)}function L(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:M}}function M(){return{value:void 0,done:!0}}return h.prototype=p,s(y,"constructor",p),s(p,"constructor",h),h.displayName=s(p,a,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,s(t,a,"GeneratorFunction")),t.prototype=Object.create(y),t},t.awrap=function(t){return{__await:t}},g(b.prototype),s(b.prototype,i,(function(){return this})),t.AsyncIterator=b,t.async=function(e,n,r,o,i){void 0===i&&(i=Promise);var a=new b(u(e,n,r,o),i);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},g(y),s(y,a,"Generator"),s(y,o,(function(){return this})),s(y,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=L,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return r("end");if(i.tryLoc<=this.prev){var s=n.call(i,"catchLoc"),u=n.call(i,"finallyLoc");if(s&&u){if(this.prev<i.catchLoc)return r(i.catchLoc,!0);if(this.prev<i.finallyLoc)return r(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return r(i.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return r(i.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),E(n),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;E(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:L(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),l}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}}(c={exports:{}}),c.exports),f=function(){return window.getViewportSize||(window.onresize=function(){window.getViewportSize={width:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,height:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}},window.onresize()),window.getViewportSize},h=function(){function t(t,e,n,r,o){this.id=t,this.x=e,this.y=n,this.name=r,this.avatar=o,this.color=function(t){for(var e=0,n=0;n<t.length;n++)e=t.charCodeAt(n)+((e<<5)-e);for(var r="#",o=0;o<3;o++)r+=("00"+(e>>8*o&255).toString(16)).slice(-2);return r}(t)}var e=t.prototype;return e.move=function(t,e){this.x=t,this.y=e},e.onMove=function(t){},t}(),p=function(t){function e(e){var n,r=e.name,o=e.avatar;return(n=t.call(this,e.id,e.x,e.y,void 0===r?"":r,void 0===o?"":o)||this).mousemoveSubscription=n.subscribeMousemove(),n}u(e,t);var n=e.prototype;return n.goOnline=function(t){this.yomo=t,this.online(t),this.onlineSubscription=this.subscribeOnline(t),this.mousePositionSubscription&&this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=this.subscribeMousePosition(t)},n.goOffline=function(){var t=s(l.mark((function t(){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.yomo&&this.yomo.send("offline",{id:this.id}),this.mousemoveSubscription&&(this.mousemoveSubscription.unsubscribe(),this.mousemoveSubscription=void 0),this.mousePositionSubscription&&(this.mousePositionSubscription.unsubscribe(),this.mousePositionSubscription=void 0),this.onlineSubscription&&(this.onlineSubscription.unsubscribe(),this.onlineSubscription=void 0),t.next=6,new Promise((function(t){setTimeout(t,500)}));case 6:return t.abrupt("return",t.sent);case 7:case"end":return t.stop()}}),t,this)})));return function(){return t.apply(this,arguments)}}(),n.sendMessage=function(t){this.yomo&&this.yomo.send("text",{id:this.id,message:t})},n.online=function(t){t.send("online",{id:this.id,x:0,y:0,name:this.name,avatar:this.avatar})},n.subscribeOnline=function(t){var e=this;return t.on$("online").subscribe((function(){t.send("sync",{id:e.id,x:e.x,y:e.y,name:e.name,avatar:e.avatar})}))},n.subscribeMousemove=function(){var e=this;return r.fromEvent(document,"mousemove").subscribe((function(n){var r=n.clientX,o=n.clientY;t.prototype.move.call(e,r,o),e.onMove({mouseX:r,mouseY:o})}))},n.subscribeMousePosition=function(t){var e=this;return r.fromEvent(document,"mousemove").pipe(o.map((function(t){var n,r,o=(n=t.clientY,{scaleX:t.clientX/(r=f()).width,scaleY:n/r.height});return{id:e.id,x:o.scaleX,y:o.scaleY}}))).subscribe(t.ofRoom("001","movement"))},e}(h),v=function(t){function e(e){var n=e.name,r=e.avatar;return t.call(this,e.id,e.x,e.y,void 0===n?"":n,void 0===r?"":r)||this}u(e,t);var n=e.prototype;return n.goOnline=function(t){this.movementMessageSubscription=this.subscribeMovement(t),this.textMessageSubscription=this.subscribeTextMessage(t)},n.unsubscribe=function(){this.textMessageSubscription&&(this.textMessageSubscription.unsubscribe(),this.textMessageSubscription=void 0),this.movementMessageSubscription&&(this.movementMessageSubscription.unsubscribe(),this.movementMessageSubscription=void 0)},n.onTextMessage=function(t){},n.subscribeTextMessage=function(t){var e=this;return t.on$("text").pipe(o.filter((function(t){return t.id===e.id}))).subscribe((function(t){e.onTextMessage(t.message)}))},n.subscribeMovement=function(e){var n=this;return e.on$("movement").pipe(o.filter((function(t){return t.id===n.id})),o.map((function(t){return e=t.y,{mouseX:t.x*(n=f()).width,mouseY:e*n.height};var e,n}))).subscribe((function(e){var r=e.mouseX,o=e.mouseY;t.prototype.move.call(n,r,o),n.onMove({mouseX:r,mouseY:o})}))},e}(h),m=function(t){var n=t.socketURL,r=t.name,a=t.avatar,u=e.useState(null),c=u[0],f=u[1],h=e.useState(new Map),m=h[0],d=h[1];e.useEffect((function(){var t="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,(function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})),e=new p({id:t,x:0,y:0,name:r||"",avatar:a||""});f(e);var u=new i.Presence(n);u.on("connected",(function(){u.toRoom("001"),u.on$("online").pipe(o.filter((function(e){return e.id!==t}))).subscribe((function(t){d((function(e){if(e.has(t.id))return e;var n=new Map(e),r=new v(t);return r.goOnline(u),n.set(r.id,r),n}))})),u.on("offline",(function(t){d((function(e){var n=new Map(e),r=n.get(t.id);return r&&r.unsubscribe(),n.delete(t.id),n}))})),u.on$("sync").pipe(o.filter((function(e){return e.id!==t}))).subscribe((function(t){d((function(e){if(e.has(t.id))return e;var n=new Map(e),r=new v(t);return r.goOnline(u),n.set(r.id,r),n}))})),e.goOnline(u)}));var c=function(){var t=s(l.mark((function t(){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.goOffline();case 2:u.close();case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}();return window.addEventListener("unload",c),function(){c(),window.removeEventListener("unload",c)}}),[]);var y=[];return m.forEach((function(t){y.push(t)})),{me:c,others:y}},d=function(t){var n=e.useRef(null);return e.useEffect((function(){var e=function(t){n.current&&n.current.setAttribute("style","transform: translate3d("+t.mouseX+"px, "+t.mouseY+"px, 0);")};e({mouseX:t.x,mouseY:t.y}),t.onMove=function(t){e(t)}}),[t]),n},y=function(t){var r=t.cursor,o=t.theme,i=d(r),a=e.useState(!1),s=a[0],u=a[1],c=e.useState(""),l=c[0],f=c[1],h=e.useCallback((function(t){"Slash"===t.code&&u(!0),"Escape"===t.code&&(u(!1),f(""),r.sendMessage(""))}),[]),p=e.useCallback((function(t){var e=t.target.value;"/"!==e&&(f(e),r.sendMessage(e))}),[]);return e.useEffect((function(){return document.addEventListener("keydown",h),function(){document.removeEventListener("keydown",h)}}),[]),e.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(b,{color:r.color}),r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),s&&n.createElement("div",{className:"online-cursor-wrapper__input-box "+("light"===o?"light":"dark")},n.createElement("span",null,l),n.createElement("input",{autoFocus:!0,placeholder:"Say something",value:l,onChange:p})))}),[s,l])},g=function(t){var r=t.cursor,o=t.theme,i=d(r),a=e.useState(r.name),s=a[0],u=a[1];return e.useEffect((function(){r.onTextMessage=function(t){u(t)}}),[]),e.useMemo((function(){return n.createElement("div",{className:"online-cursor-wrapper__cursor",ref:i},n.createElement(b,{color:r.color}),r.avatar&&n.createElement("img",{className:"online-cursor-wrapper__avatar",src:r.avatar,alt:"avatar"}),s&&n.createElement("div",{className:"online-cursor-wrapper__text "+("light"===o?"light":"dark")},s))}),[s])};function b(t){var r=t.color;return e.useMemo((function(){return n.createElement("svg",{shapeRendering:"geometricPrecision",xmlns:"http://www.w3.org/2000/svg",fill:r},n.createElement("path",{fill:"#666",d:"M9.63 6.9a1 1 0 011.27-1.27l11.25 3.75a1 1 0 010 1.9l-4.68 1.56a1 1 0 00-.63.63l-1.56 4.68a1 1 0 01-1.9 0L9.63 6.9z"}),n.createElement("path",{stroke:"#fff",strokeWidth:"1.5",d:"M11.13 4.92a1.75 1.75 0 00-2.2 2.21l3.74 11.26a1.75 1.75 0 003.32 0l1.56-4.68a.25.25 0 01.16-.16L22.4 12a1.75 1.75 0 000-3.32L11.13 4.92z"}))}),[r])}exports.default=e.memo((function(t){var e=t.theme,r=void 0===e?"dark":e,o=m({socketURL:t.socketURL,name:t.name,avatar:t.avatar}),i=o.me;return i?n.createElement("div",{className:"online-cursor-wrapper"},o.others.map((function(t){return n.createElement(g,{key:t.id,cursor:t,theme:r})})),n.createElement(y,{cursor:i,theme:r})):null})),exports.useOnlineCursor=m,exports.useRenderPosition=d;
 //# sourceMappingURL=react-cursor-chat.cjs.production.min.js.map

dist/react-cursor-chat.esm.js

 import React, { useState, useEffect, useRef, memo, useCallback, useMemo } from 'react';
 import { fromEvent } from 'rxjs';
 import { map, filter } from 'rxjs/operators';
-import { YoMoClient } from '@yomo/presencejs';
+import { Presence } from '@yomo/presencejs';
 
@@ -919,6 +919,6 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
 
-  _proto.goOnline = function goOnline(room) {
-    this.room = room;
-    this.online(room);
-    this.onlineSubscription = this.subscribeOnline(room);
+  _proto.goOnline = function goOnline(yomo) {
+    this.yomo = yomo;
+    this.online(yomo);
+    this.onlineSubscription = this.subscribeOnline(yomo);
 
@@ -929,3 +929,3 @@ if (this.mousePositionSubscription) {
 
-    this.mousePositionSubscription = this.subscribeMousePosition(room);
+    this.mousePositionSubscription = this.subscribeMousePosition(yomo);
   };
@@ -939,4 +939,4 @@
             case 0:
-              if (this.room) {
-                this.room.publish('offline', {
+              if (this.yomo) {
+                this.yomo.send('offline', {
                   id: this.id
@@ -985,4 +985,4 @@ });
   _proto.sendMessage = function sendMessage(message) {
-    if (this.room) {
-      this.room.publish('text', {
+    if (this.yomo) {
+      this.yomo.send('text', {
         id: this.id,
@@ -994,4 +994,4 @@ message: message
 
-  _proto.online = function online(room) {
-    room.publish('online', {
+  _proto.online = function online(yomo) {
+    yomo.send('online', {
       id: this.id,
@@ -1005,7 +1005,7 @@ x: 0,
 
-  _proto.subscribeOnline = function subscribeOnline(room) {
+  _proto.subscribeOnline = function subscribeOnline(yomo) {
     var _this2 = this;
 
-    return room.fromServer('online').subscribe(function () {
-      room.publish('sync', {
+    return yomo.on$('online').subscribe(function () {
+      yomo.send('sync', {
         id: _this2.id,
@@ -1037,3 +1037,3 @@ x: _this2.x,
 
-  _proto.subscribeMousePosition = function subscribeMousePosition(room) {
+  _proto.subscribeMousePosition = function subscribeMousePosition(yomo) {
     var _this4 = this;
@@ -1053,3 +1053,3 @@
     }));
-    return room.bindServer(movement$, 'movement');
+    return movement$.subscribe(yomo.ofRoom('001', 'movement'));
   };
@@ -1076,5 +1076,5 @@
 
-  _proto.goOnline = function goOnline(room) {
-    this.movementMessageSubscription = this.subscribeMovement(room);
-    this.textMessageSubscription = this.subscribeTextMessage(room);
+  _proto.goOnline = function goOnline(yomo) {
+    this.movementMessageSubscription = this.subscribeMovement(yomo);
+    this.textMessageSubscription = this.subscribeTextMessage(yomo);
   };
@@ -1096,6 +1096,6 @@
 
-  _proto.subscribeTextMessage = function subscribeTextMessage(room) {
+  _proto.subscribeTextMessage = function subscribeTextMessage(yomo) {
     var _this = this;
 
-    return room.fromServer('text').pipe(filter(function (data) {
+    return yomo.on$('text').pipe(filter(function (data) {
       return data.id === _this.id;
@@ -1107,6 +1107,6 @@ })).subscribe(function (data) {
 
-  _proto.subscribeMovement = function subscribeMovement(room) {
+  _proto.subscribeMovement = function subscribeMovement(yomo) {
     var _this2 = this;
 
-    return room.fromServer('movement').pipe(filter(function (data) {
+    return yomo.on$('movement').pipe(filter(function (data) {
       return data.id === _this2.id;
@@ -1154,9 +1154,6 @@ }), map(function (data) {
     setMe(me);
-    var yomoclient = new YoMoClient(socketURL, {
-      reconnectInterval: 5000,
-      reconnectAttempts: 5
-    });
-    yomoclient.on('connected', function () {
-      var room = yomoclient.getRoom('001');
-      room.fromServer('online').pipe(filter(function (data) {
+    var yomo = new Presence(socketURL);
+    yomo.on('connected', function () {
+      yomo.toRoom('001');
+      yomo.on$('online').pipe(filter(function (data) {
         return data.id !== ID;
@@ -1171,3 +1168,3 @@ })).subscribe(function (data) {
           var others = new Others(data);
-          others.goOnline(room);
+          others.goOnline(yomo);
           cursorMap.set(others.id, others);
@@ -1177,3 +1174,3 @@ return cursorMap;
       });
-      room.fromServer('offline').subscribe(function (data) {
+      yomo.on('offline', function (data) {
         setOthersMap(function (old) {
@@ -1193,3 +1190,3 @@ var cursorMap = new Map(old);
 
-      room.fromServer('sync').pipe(filter(function (data) {
+      yomo.on$('sync').pipe(filter(function (data) {
         return data.id !== ID;
@@ -1204,3 +1201,3 @@ })).subscribe(function (data) {
           var others = new Others(data);
-          others.goOnline(room);
+          others.goOnline(yomo);
           cursorMap.set(others.id, others);
@@ -1210,4 +1207,4 @@ return cursorMap;
       });
-      me.goOnline(room);
-    }); // yomoclient.on('closed', () => {});
+      me.goOnline(yomo);
+    }); // yomo.on('closed', () => {});
 
@@ -1224,3 +1221,3 @@ var clear = /*#__PURE__*/function () {
               case 2:
-                yomoclient.close();
+                yomo.close();
 
@@ -1227,0 +1224,0 @@ case 3:

package.json

 {
   "name": "@yomo/react-cursor-chat",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A react component for cursor chat",
@@ -62,3 +62,3 @@ "keywords": [
   "dependencies": {
-    "@yomo/presencejs": "^0.0.4",
+    "@yomo/presencejs": "^0.0.5",
     "react": ">=16",
@@ -65,0 +65,0 @@ "react-dom": "^17.0.2",

README.md

@@ -117,4 +117,2 @@ # react-cursor-chat
 
-[Example](https://github.com/osdodo/cursor-chat/example)
-
 ### LICENSE
@@ -121,0 +119,0 @@

src/cursor/me.ts

 import { fromEvent, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-import Room from '@yomo/presencejs/dist/room';
+import { Presence } from '@yomo/presencejs';
 import Cursor from './cursor';
 import { getScale } from '../helper';
-import {
-    CursorMessage,
-    MovementMessage,
-    TextMessage,
-    OfflineMessage,
-} from '../types';
+import { CursorMessage, TextMessage, OfflineMessage } from '../types';
 
 export default class Me extends Cursor {
-    private room: Room | undefined;
+    private yomo: Presence | undefined;
     private onlineSubscription: Subscription | undefined;
@@ -36,15 +31,15 @@ private mousemoveSubscription: Subscription | undefined;
 
-    goOnline(room: Room) {
-        this.room = room;
-        this.online(room);
-        this.onlineSubscription = this.subscribeOnline(room);
+    goOnline(yomo: Presence) {
+        this.yomo = yomo;
+        this.online(yomo);
+        this.onlineSubscription = this.subscribeOnline(yomo);
         if (this.mousePositionSubscription) {
             this.mousePositionSubscription.unsubscribe();
         }
-        this.mousePositionSubscription = this.subscribeMousePosition(room);
+        this.mousePositionSubscription = this.subscribeMousePosition(yomo);
     }
 
     async goOffline() {
-        if (this.room) {
-            this.room.publish<OfflineMessage>('offline', {
+        if (this.yomo) {
+            this.yomo.send<OfflineMessage>('offline', {
                 id: this.id,
@@ -75,4 +70,4 @@ });
     sendMessage(message: string) {
-        if (this.room) {
-            this.room.publish<TextMessage>('text', {
+        if (this.yomo) {
+            this.yomo.send<TextMessage>('text', {
                 id: this.id,
@@ -84,4 +79,4 @@ message: message,
 
-    private online(room: Room) {
-        room.publish<CursorMessage>('online', {
+    private online(yomo: Presence) {
+        yomo.send<CursorMessage>('online', {
             id: this.id,
@@ -95,5 +90,5 @@ x: 0,
 
-    private subscribeOnline(room: Room) {
-        return room.fromServer<any>('online').subscribe(() => {
-            room.publish<CursorMessage>('sync', {
+    private subscribeOnline(yomo: Presence) {
+        return yomo.on$('online').subscribe(() => {
+            yomo.send<CursorMessage>('sync', {
                 id: this.id,
@@ -118,3 +113,3 @@ x: this.x,
 
-    private subscribeMousePosition(room: Room) {
+    private subscribeMousePosition(yomo: Presence) {
         const mousemove$ = fromEvent<MouseEvent>(document, 'mousemove');
@@ -136,4 +131,4 @@
 
-        return room.bindServer<MovementMessage>(movement$, 'movement');
+        return movement$.subscribe(yomo.ofRoom('001', 'movement'));
     }
 }

src/cursor/others.ts

 import { Subscription } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import Room from '@yomo/presencejs/dist/room';
+import { Presence } from '@yomo/presencejs';
 import Cursor from './cursor';
@@ -27,5 +27,5 @@ import { getMousePosition } from '../helper';
 
-    goOnline(room: Room) {
-        this.movementMessageSubscription = this.subscribeMovement(room);
-        this.textMessageSubscription = this.subscribeTextMessage(room);
+    goOnline(yomo: Presence) {
+        this.movementMessageSubscription = this.subscribeMovement(yomo);
+        this.textMessageSubscription = this.subscribeTextMessage(yomo);
     }
@@ -47,5 +47,5 @@
 
-    private subscribeTextMessage(room: Room) {
-        return room
-            .fromServer<TextMessage>('text')
+    private subscribeTextMessage(yomo: Presence) {
+        return yomo
+            .on$<TextMessage>('text')
             .pipe(filter(data => data.id === this.id))
@@ -57,5 +57,5 @@ .subscribe(data => {
 
-    private subscribeMovement(room: Room) {
-        return room
-            .fromServer<MovementMessage>('movement')
+    private subscribeMovement(yomo: Presence) {
+        return yomo
+            .on$<MovementMessage>('movement')
             .pipe(
@@ -62,0 +62,0 @@ filter(data => data.id === this.id),

src/hooks/useOnlineCursor.ts

@@ -6,3 +6,3 @@ import { useEffect, useState } from 'react';
 
-import { YoMoClient } from '@yomo/presencejs';
+import { Presence } from '@yomo/presencejs';
 import { uuidv4 } from '../helper';
@@ -34,3 +34,3 @@ import { CursorMessage, OfflineMessage } from '../types';
             name: name || '',
-            avatar: avatar || ''
+            avatar: avatar || '',
         });
@@ -40,11 +40,8 @@
 
-        const yomoclient = new YoMoClient(socketURL, {
-            reconnectInterval: 5000,
-            reconnectAttempts: 5,
-        });
+        const yomo = new Presence(socketURL);
 
-        yomoclient.on('connected', () => {
-            const room = yomoclient.getRoom('001');
+        yomo.on('connected', () => {
+            yomo.toRoom('001');
 
-            room.fromServer<CursorMessage>('online')
+            yomo.on$<CursorMessage>('online')
                 .pipe(filter(data => data.id !== ID))
@@ -58,3 +55,3 @@ .subscribe(data => {
                         const others = new Others(data);
-                        others.goOnline(room);
+                        others.goOnline(yomo);
                         cursorMap.set(others.id, others);
@@ -65,3 +62,3 @@ return cursorMap;
 
-            room.fromServer<OfflineMessage>('offline').subscribe(data => {
+            yomo.on<OfflineMessage>('offline', data => {
                 setOthersMap(old => {
@@ -80,3 +77,3 @@ const cursorMap = new Map(old);
             // this is the response
-            room.fromServer<CursorMessage>('sync')
+            yomo.on$<CursorMessage>('sync')
                 .pipe(filter(data => data.id !== ID))
@@ -90,3 +87,3 @@ .subscribe(data => {
                         const others = new Others(data);
-                        others.goOnline(room);
+                        others.goOnline(yomo);
                         cursorMap.set(others.id, others);
@@ -97,10 +94,10 @@ return cursorMap;
 
-            me.goOnline(room);
+            me.goOnline(yomo);
         });
 
-        // yomoclient.on('closed', () => {});
+        // yomo.on('closed', () => {});
 
         const clear = async () => {
             await me.goOffline();
-            yomoclient.close();
+            yomo.close();
         };
@@ -107,0 +104,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

346512

decreased by-0.52%

Lines of code

3116

decreased by-0.45%

Number of lines in readme file

122

decreased by-1.61%

Dependency changes

• + Added@yomo/presencejs@0.0.5(transitive)

• - Removed@yomo/presencejs@0.0.4(transitive)

• Updated@yomo/presencejs@^0.0.5