Merge pull request #655 from SuperViz/beta

Introducing collaborative form elements 🎉

.esbuild/build.js

@@ -8,22 +8,9 @@ const config = Object.assign({}, baseConfig, {
 require('esbuild')
   .build({
     ...config,
-    platform: 'node', // for CJS
     outfile: 'lib/index.js',
   })
   .catch((error) => {
     console.error(error);
     process.exit(1);
   });
-
-require('esbuild')
-  .build({
-    ...config,
-    platform: 'neutral', // for ESM
-    format: 'esm',
-    outfile: 'lib/index.esm.js',
-  })
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });

.esbuild/config.js

@@ -1,6 +1,5 @@
 require('dotenv').config();
 const { style } = require('./plugins/style-loader');
-const { dependencies } = require('../package.json');
 
 const entries = Object.entries(process.env).filter((key) => key[0].startsWith('SDK_'));
 const env = Object.fromEntries(entries);
@@ -19,7 +18,6 @@ module.exports = {
   bundle: true,
   target: 'es6',
   format: 'esm',
-  external: Object.keys(dependencies),
   define: {
     'process.env': JSON.stringify(env),
   },

.esbuild/watch.js

@@ -7,22 +7,9 @@ const config = Object.assign({}, baseConfig, {
 require('esbuild')
   .build({
     ...config,
-    platform: 'node', // for CJS
     outfile: 'dist/index.js',
   })
   .catch((error) => {
     console.error(error);
     process.exit(1);
   });
-
-require('esbuild')
-  .build({
-    ...config,
-    platform: 'neutral', // for ESM
-    format: 'esm',
-    outfile: 'dist/index.esm.js',
-  })
-  .catch((error) => {
-    console.error(error);
-    process.exit(1);
-  });

.releaserc

@@ -7,7 +7,6 @@
   "plugins": [
     "@semantic-release/commit-analyzer",
     "semantic-release-version-file",
-    "@semantic-release/release-notes-generator",
     "@semantic-release/github",
     "@semantic-release/npm"
   ]

__mocks__/io.mock.ts

@@ -1,32 +1,38 @@
 import { jest } from '@jest/globals';
-import * as Socket from '@superviz/socket-client';
 
 export const MOCK_IO = {
+  PresenceEvents: {
+    JOINED_ROOM: 'presence.joined-room',
+    LEAVE: 'presence.leave',
+    ERROR: 'presence.error',
+    UPDATE: 'presence.update',
+  },
   Realtime: class {
-    public connection: {
-      on: (state: string) => void;
-      off: () => void;
-    };
+    connection;
 
-    constructor(apiKey: string, environment: string, participant: any) {
+    constructor(apiKey, environment, participant) {
       this.connection = {
         on: jest.fn(),
         off: jest.fn(),
       };
     }
 
-    public connect() {
+    connect() {
       return {
         on: jest.fn(),
         off: jest.fn(),
         emit: jest.fn(),
+        disconnect: jest.fn(),
+        history: jest.fn(),
         presence: {
           on: jest.fn(),
           off: jest.fn(),
+          get: jest.fn(),
+          update: jest.fn(),
         },
       };
     }
 
-    public destroy() {}
+    destroy() {}
   },
 };

jest.setup.js

@@ -1,6 +1,9 @@
+/* eslint-disable no-undef */
 const fs = require('fs');
+require('jest-canvas-mock');
 
 const { MOCK_CONFIG } = require('./__mocks__/config.mock');
+const { MOCK_IO } = require('./__mocks__/io.mock');
 const config = require('./src/services/config');
 
 config.default.setConfig(MOCK_CONFIG);
@@ -32,3 +35,5 @@ global.DOMPoint = class {
     return this;
   }
 };
+
+jest.mock('@superviz/socket-client', () => MOCK_IO);

package.json

@@ -3,7 +3,6 @@
   "version": "0.0.0-development",
   "description": "SuperViz SDK",
   "main": "./lib/index.js",
-  "module": "./lib/index.esm.js",
   "types": "./lib/index.d.ts",
   "files": [
     "lib"
@@ -68,6 +67,7 @@
     "husky": "^8.0.3",
     "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",

src/common/types/cdn.types.ts

@@ -6,6 +6,7 @@ import {
   Realtime,
   VideoConference,
   WhoIsOnline,
+  FormElements,
 } from '../../components';
 import { RealtimeComponentEvent, RealtimeComponentState } from '../../components/realtime/types';
 import { LauncherFacade } from '../../core/launcher/types';
@@ -55,6 +56,7 @@ export interface SuperVizCdn {
   CanvasPin: typeof CanvasPin;
   HTMLPin: typeof HTMLPin;
   WhoIsOnline: typeof WhoIsOnline;
+  FormElements: typeof FormElements;
   RealtimeComponentState: typeof RealtimeComponentState;
   RealtimeComponentEvent: typeof RealtimeComponentEvent;
 }

src/common/types/stores.types.ts

@@ -8,14 +8,19 @@ export enum StoreType {
   WHO_IS_ONLINE = 'who-is-online-store',
 }
 
-type StoreApi<T extends (...args: any[]) => any> = {
+type Subject<T extends (...args: any[]) => any, K extends keyof ReturnType<T>> = ReturnType<T>[K]
+
+type StoreApiWithoutDestroy<T extends (...args: any[]) => any> = {
   [K in keyof ReturnType<T>]: {
-    subscribe(callback?: (value: keyof T) => void): void;
-    subject: PublicSubject<keyof T>;
-    publish<T>(value: T): void;
-    value: any;
+    subscribe(callback?: (value: Subject<T, K>['value']) => void): void;
+    subject: Subject<T, K>;
+    publish(value: Subject<T, K>['value']): void;
+    value: Subject<T, K>['value'];
   };
-};
+}
+
+type StoreApi<T extends (...args: any[]) => any> = Omit<StoreApiWithoutDestroy<T>, 'destroy'> & { destroy(): void };
+
 
 // When creating new Stores, expand the ternary with the new Store. For example:
 // ...T extends StoreType.GLOBAL ? StoreApi<typeof useGlobalStore> : T extends StoreType.WHO_IS_ONLINE ? StoreApi<typeof useWhoIsOnlineStore> : never;

src/common/utils/use-store.ts

@@ -38,21 +38,22 @@ function subscribeTo<T>(
  * @description Returns a proxy of the global store data and a subscribe function to be used in the components
  */
 export function useStore<T extends StoreType>(name: T): Store<T> {
-  // @TODO - Improve types to get better sugestions when writing code
   const storeData = stores[name as StoreType]();
   const bindedSubscribeTo = subscribeTo.bind(this);
 
   const proxy = new Proxy(storeData, {
-    get(store: Store<T>, valueName: string) {
+    get(store, valueName: string) {
+      if (valueName === 'destroy') return store.destroy;
+
       return {
-        subscribe<K extends Store<T>>(callback?: (value: K) => void) {
+        subscribe(callback?) {
           bindedSubscribeTo(valueName, store[valueName], callback);
         },
-        subject: store[valueName] as typeof storeData,
+        subject: store[valueName],
         get value() {
           return this.subject.value;
         },
-        publish(newValue: keyof Store<T>) {
+        publish(newValue) {
           this.subject.value = newValue;
         },
       };

src/components/base/index.ts

@@ -8,6 +8,7 @@ import config from '../../services/config';
 import { EventBus } from '../../services/event-bus';
 import { IOC } from '../../services/io';
 import { AblyRealtimeService } from '../../services/realtime';
+import { useGlobalStore } from '../../services/stores';
 import { ComponentNames } from '../types';
 
 import { DefaultAttachComponentOptions } from './types';
@@ -85,6 +86,8 @@ export abstract class BaseComponent extends Observable {
     this.logger.log('detached');
     this.publish(ComponentLifeCycleEvent.UNMOUNT);
     this.destroy();
+    this.room.disconnect();
+
     this.unsubscribeFrom.forEach((unsubscribe) => unsubscribe(this));
 
     Object.values(this.observers).forEach((observer) => {

src/components/comments/index.ts

@@ -37,7 +37,7 @@ export class Comments extends BaseComponent {
   private localParticipantId: string;
   private offset: Offset;
 
-  constructor(pinAdapter: PinAdapter, options?: CommentsOptions) {
+  constructor(pinAdapter: any, options?: CommentsOptions) {
     super();
     this.name = ComponentNames.COMMENTS;
     this.logger = new Logger('@superviz/sdk/comments-component');
@@ -61,7 +61,7 @@ export class Comments extends BaseComponent {
     const { group, localParticipant } = this.useStore(StoreType.GLOBAL);
     group.subscribe();
 
-    localParticipant.subscribe((participant: Participant) => {
+    localParticipant.subscribe((participant) => {
       this.localParticipantId = participant.id;
     });
   }