Moving from Ably to IOC

.esbuild/watch.js

@@ -1,15 +1,22 @@
 const baseConfig = require('./config');
+const esbuild = require('esbuild');
 
 const config = Object.assign({}, baseConfig, {
-  watch: true,
+  outfile: 'dist/index.js',
 });
 
-require('esbuild')
-  .build({
-    ...config,
-    outfile: 'dist/index.js',
-  })
-  .catch((error) => {
+(async () => {
+  try {
+    const context = await esbuild.context(config);
+    context.watch();
+  } catch (error) {
     console.error(error);
     process.exit(1);
-  });
+  }
+})();
+
+// .build(config)
+// .catch((error) => {
+//   console.error(error);
+//   process.exit(1);
+// });

.github/workflows/checks.yml

@@ -20,7 +20,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn install
       - name: Create a .version.js file
@@ -42,7 +42,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn install
       - name: Create a .version.js file
@@ -62,7 +62,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn install
       - name: Create a .version.js file

.github/workflows/publish-beta-release.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/publish-lab-release.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn install
         env:

.github/workflows/publish-prod-release.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - name: Install dependencies
         run: yarn install
         env:

__mocks__/io.mock.ts

@@ -2,6 +2,14 @@ import { jest } from '@jest/globals';
 import { Room } from '@superviz/socket-client';
 
 export const MOCK_IO = {
+  ClientState: {
+    CONNECTED: 'CONNECTED',
+    CONNECTING: 'CONNECTING',
+    DISCONNECTED: 'DISCONNECTED',
+    CONNECTION_ERROR: 'CONNECTION_ERROR',
+    RECONNECTING: 'RECONNECTING',
+    RECONNECT_ERROR: 'RECONNECT_ERROR',
+  },
   PresenceEvents: {
     JOINED_ROOM: 'presence.joined-room',
     LEAVE: 'presence.leave',

__mocks__/participants.mock.ts

@@ -1,7 +1,6 @@
 import { Avatar, Group, Participant } from '../src';
 import { MeetingColors, MeetingColorsHex } from '../src/common/types/meeting-colors.types';
 import { ParticipantByGroupApi } from '../src/common/types/participant.types';
-import { AblyParticipant } from '../src/services/realtime/ably/types';
 
 export const MOCK_AVATAR: Avatar = {
   imageUrl: 'unit-test-avatar-thumbnail.png',
@@ -50,17 +49,6 @@ export const MOCK_ABLY_PARTICIPANT_DATA_2 = {
   color: MeetingColorsHex[1],
 };
 
-export const MOCK_ABLY_PARTICIPANT: AblyParticipant = {
-  extras: null,
-  clientId: MOCK_LOCAL_PARTICIPANT.id,
-  action: 'present',
-  connectionId: 'connection1',
-  encoding: 'h264',
-  id: 'unit-test-participant1-ably-id',
-  timestamp: new Date().getTime(),
-  data: MOCK_ABLY_PARTICIPANT_DATA_1,
-};
-
 export const MOCK_PARTICIPANT_LIST: ParticipantByGroupApi[] = [
   {
     id: 'unit-test-participant1-id',

package.json

@@ -39,55 +39,54 @@
   },
   "homepage": "https://github.com/SuperViz/sdk#readme",
   "devDependencies": {
-    "@commitlint/cli": "^18.0.0",
-    "@commitlint/config-conventional": "^18.0.0",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@jest/globals": "^29.7.0",
-    "@open-wc/testing-helpers": "^2.3.0",
-    "@types/debug": "^4.1.10",
-    "@types/jest": "^29.5.6",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/luxon": "^3.3.3",
-    "@types/node": "^20.8.8",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@open-wc/testing-helpers": "^3.0.1",
+    "@types/debug": "^4.1.12",
+    "@types/jest": "^29.5.12",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^20.14.8",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "@web/dev-server-esbuild": "^0.4.3",
     "@web/dev-server-import-maps": "^0.2.0",
     "@web/dev-server-legacy": "^2.0.3",
     "@web/test-runner": "^0.17.2",
     "@web/test-runner-playwright": "^0.10.2",
-    "concurrently": "^7.2.2",
+    "concurrently": "^8.2.2",
     "cz-conventional-changelog": "^3.3.0",
-    "dotenv": "^16.0.1",
-    "esbuild": "^0.14.48",
-    "eslint": "^8.52.0",
+    "dotenv": "^16.4.5",
+    "esbuild": "^0.21.5",
+    "eslint": "^9.5.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.0",
-    "husky": "^8.0.3",
+    "eslint-plugin-import": "^2.29.1",
+    "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-browser-globals": "^25.1.0-beta",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
-    "rimraf": "^5.0.5",
-    "semantic-release": "^22.0.5",
-    "ts-jest": "^29.1.2",
+    "rimraf": "^5.0.7",
+    "semantic-release": "^24.0.0",
+    "ts-jest": "^29.1.5",
     "tsc": "^2.0.4",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.2",
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "@superviz/socket-client": "1.5.1",
-    "ably": "^1.2.45",
+    "@superviz/socket-client": "1.8.0",
     "bowser": "^2.11.0",
     "bowser-jr": "^1.0.6",
     "debug": "^4.3.4",
-    "lit": "^3.0.0",
+    "lit": "^3.1.4",
     "lodash": "^4.17.21",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
-    "luxon": "^3.4.3",
+    "luxon": "^3.4.4",
     "rxjs": "^7.8.1",
     "semantic-release-version-file": "^1.0.2"
   },

src/common/types/participant.types.ts

@@ -25,6 +25,7 @@ export interface Participant {
   // @NOTE - this is a hack to make the participant info work with the 3D avatar
   avatarConfig?: unknown;
   activeComponents?: ComponentNames[];
+  timestamp?: number;
 }
 
 export type ParticipantByGroupApi = {

src/components/base/index.test.ts

@@ -2,16 +2,13 @@ import { MOCK_CONFIG } from '../../../__mocks__/config.mock';
 import { EVENT_BUS_MOCK } from '../../../__mocks__/event-bus.mock';
 import { MOCK_OBSERVER_HELPER } from '../../../__mocks__/observer-helper.mock';
 import { MOCK_GROUP, MOCK_LOCAL_PARTICIPANT } from '../../../__mocks__/participants.mock';
-import { ABLY_REALTIME_MOCK } from '../../../__mocks__/realtime.mock';
-import { ROOM_STATE_MOCK } from '../../../__mocks__/roomState.mock';
 import { StoreType } from '../../common/types/stores.types';
 import { Logger } from '../../common/utils';
 import { useStore } from '../../common/utils/use-store';
 import { Configuration } from '../../services/config/types';
 import { EventBus } from '../../services/event-bus';
 import { IOC } from '../../services/io';
 import { Presence3DManager } from '../../services/presence-3d-manager';
-import { AblyRealtimeService } from '../../services/realtime';
 import { useGlobalStore } from '../../services/stores';
 import { ComponentNames } from '../types';
 
@@ -37,8 +34,6 @@ class DummyComponent extends BaseComponent {
   }
 }
 
-const REALTIME_MOCK = Object.assign({}, ABLY_REALTIME_MOCK, { hasJoinedRoom: true });
-
 jest.mock('../../common/utils/observer', () => ({
   Observer: jest.fn().mockImplementation(() => MOCK_OBSERVER_HELPER),
 }));
@@ -72,7 +67,6 @@ describe('BaseComponent', () => {
 
       DummyComponentInstance.attach({
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
-        realtime: ABLY_REALTIME_MOCK,
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
         Presence3DManagerService: Presence3DManager,
@@ -91,14 +85,9 @@ describe('BaseComponent', () => {
     });
 
     test('should not start if domain is not whitelisted', () => {
-      const ablyMock = { ...ABLY_REALTIME_MOCK };
-
-      ablyMock['isDomainWhitelisted'] = false;
-
       DummyComponentInstance.attach({
         Presence3DManagerService: Presence3DManager,
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
-        realtime: ablyMock as AblyRealtimeService,
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
         useStore,
@@ -118,15 +107,13 @@ describe('BaseComponent', () => {
       DummyComponentInstance.attach({
         Presence3DManagerService: Presence3DManager,
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
-        realtime: REALTIME_MOCK,
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
         useStore,
       });
 
-      expect(DummyComponentInstance['realtime']).toEqual(REALTIME_MOCK);
       expect(DummyComponentInstance['isAttached']).toBeTruthy();
-      expect(DummyComponentInstance['start']).toBeCalled();
+      expect(DummyComponentInstance['start']).toHaveBeenCalled();
     });
 
     test('should throw error if realtime is not provided', () => {
@@ -136,7 +123,6 @@ describe('BaseComponent', () => {
         DummyComponentInstance.attach({
           ioc: null as unknown as IOC,
           Presence3DManagerService: Presence3DManager,
-          realtime: null as unknown as AblyRealtimeService,
           config: null as unknown as Configuration,
           eventBus: null as unknown as EventBus,
           useStore: null as unknown as typeof useStore,
@@ -153,7 +139,6 @@ describe('BaseComponent', () => {
       DummyComponentInstance.attach({
         Presence3DManagerService: Presence3DManager,
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
-        realtime: REALTIME_MOCK,
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
         useStore,
@@ -175,7 +160,6 @@ describe('BaseComponent', () => {
       DummyComponentInstance.attach({
         Presence3DManagerService: Presence3DManager,
         ioc: new IOC(MOCK_LOCAL_PARTICIPANT),
-        realtime: REALTIME_MOCK,
         config: MOCK_CONFIG,
         eventBus: EVENT_BUS_MOCK,
         useStore,