Implement SSR/SSG build native support

src/components/comments/index.test.ts

@@ -11,7 +11,7 @@ import ApiService from '../../services/api';
 import { IOC } from '../../services/io';
 import { Presence3DManager } from '../../services/presence-3d-manager';
 import { useGlobalStore } from '../../services/stores';
-import { CommentsFloatButton } from '../../web-components';
+import type { CommentsFloatButton } from '../../web-components/comments/components/float-button';
 import { ComponentNames } from '../types';
 
 import { PinAdapter, CommentsSide, Annotation, PinCoordinates } from './types';

src/components/comments/index.ts

@@ -5,7 +5,7 @@ import { Logger } from '../../common/utils';
 import ApiService from '../../services/api';
 import config from '../../services/config';
 import subject from '../../services/stores/subject';
-import type { Comments as CommentElement } from '../../web-components';
+import type { Comments as CommentElement } from '../../web-components/comments';
 import { CommentsFloatButton } from '../../web-components/comments/components/float-button';
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';
@@ -152,6 +152,7 @@ export class Comments extends BaseComponent {
    * @returns {void}
    */
   protected start(): void {
+    if (typeof window === 'undefined') return;
     this.clientUrl = window.location.href;
 
     this.positionComments();

src/components/presence-mouse/html/index.ts

@@ -205,6 +205,8 @@ export class PointersHTML extends BaseComponent {
    * @returns {void}
    */
   private onMyParticipantMouseLeave = (event: MouseEvent): void => {
+    if (typeof window === 'undefined') return;
+
     const { left, top, right, bottom } = this.container.getBoundingClientRect();
     const isInsideContainer =
       event.x > left && event.y > top && event.x < right && event.y < bottom;

src/components/who-is-online/index.ts

@@ -5,7 +5,7 @@ import { Participant, Avatar } from '../../common/types/participant.types';
 import { StoreType } from '../../common/types/stores.types';
 import { Logger } from '../../common/utils';
 import { Following } from '../../services/stores/who-is-online/types';
-import { WhoIsOnline as WhoIsOnlineElement } from '../../web-components';
+import type { WhoIsOnline as WhoIsOnlineElement } from '../../web-components/who-is-online';
 import { DropdownOption } from '../../web-components/dropdown/types';
 import { BaseComponent } from '../base';
 import { ComponentNames } from '../types';

src/core/launcher/index.ts

@@ -207,7 +207,9 @@ export class Launcher extends Observable implements DefaultLauncher {
     this.isDestroyed = true;
 
     // clean window object
-    window.SUPERVIZ = undefined;
+    if (typeof window !== 'undefined') {
+      window.SUPERVIZ = undefined;
+    }
   };
 
   /**
@@ -455,7 +457,7 @@ export class Launcher extends Observable implements DefaultLauncher {
  * @returns {LauncherFacade}
  */
 export default (options: LauncherOptions): LauncherFacade => {
-  if (window.SUPERVIZ) {
+  if (typeof window !== 'undefined' && window.SUPERVIZ) {
     console.warn('[SUPERVIZ] Room already initialized');
 
     return {
@@ -469,7 +471,9 @@ export default (options: LauncherOptions): LauncherFacade => {
 
   const launcher = new Launcher(options);
 
-  window.SUPERVIZ = launcher;
+  if (typeof window !== 'undefined') {
+    window.SUPERVIZ = launcher;
+  }
 
   return {
     destroy: launcher.destroy,

src/index.ts

@@ -58,7 +58,7 @@ import type {
 } from './components/comments/types';
 import type { Transform } from './components/presence-mouse/types';
 
-if (window) {
+if (typeof window !== 'undefined') {
   window.SuperVizRoom = {
     init,
     CommentEvent,

src/services/connection-status/index.ts

@@ -23,8 +23,10 @@ export class ConnectionService implements DefaultConnectionService {
    * @returns {void}
    */
   public addListeners(): void {
-    window.addEventListener('online', this.onUpdateBrowserOnlineStatus);
-    window.addEventListener('offline', this.onUpdateBrowserOnlineStatus);
+    if (typeof window !== 'undefined') {
+      window.addEventListener('online', this.onUpdateBrowserOnlineStatus);
+      window.addEventListener('offline', this.onUpdateBrowserOnlineStatus);
+    }
   }
 
   /**
@@ -33,8 +35,10 @@ export class ConnectionService implements DefaultConnectionService {
    * @returns {void}
    */
   public removeListeners(): void {
-    window.removeEventListener('online', this.onUpdateBrowserOnlineStatus);
-    window.removeEventListener('offline', this.onUpdateBrowserOnlineStatus);
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('online', this.onUpdateBrowserOnlineStatus);
+      window.removeEventListener('offline', this.onUpdateBrowserOnlineStatus);
+    }
   }
 
   /**

src/services/message-bridge/index.ts

@@ -62,7 +62,9 @@ export class MessageBridge {
       delete this.observers[type];
     });
 
-    window.removeEventListener('message', this.onReceiveMessage);
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', this.onReceiveMessage);
+    }
 
     delete this.logger;
     delete this.allowedOrigins;

src/services/video-conference-manager/index.ts

@@ -161,8 +161,11 @@ export default class VideoConfereceManager {
       locales,
     };
     this.meetingAvatars = avatars;
-    window.addEventListener('resize', this.onWindowResize);
-    window.addEventListener('orientationchange', this.onWindowResize);
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', this.onWindowResize);
+      window.addEventListener('orientationchange', this.onWindowResize);
+    }
   }
 
   get isWaterMarkEnabled(): boolean {
@@ -372,6 +375,8 @@ export default class VideoConfereceManager {
    * @returns {void}
    */
   private onFrameDimensionsUpdate = ({ width, height }: Dimensions): void => {
+    if (typeof window === 'undefined') return;
+
     const frame = document.getElementById(FRAME_ID);
     const {
       bottom: offsetBottom,
@@ -661,8 +666,10 @@ export default class VideoConfereceManager {
     this.bricklayer = null;
     this.frameState = null;
 
-    window.removeEventListener('resize', this.onWindowResize);
-    window.removeEventListener('orientationchange', this.onWindowResize);
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', this.onWindowResize);
+      window.removeEventListener('orientationchange', this.onWindowResize);
+    }
   }
 
   /**