feat(js): handling the web socket connection and events

packages/client/src/api/api.service.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   ButtonTypeEnum,
   MessageActionStatusEnum,
   CustomDataType,
@@ -222,7 +222,7 @@ export class ApiService {
   }
 
   async getPreferences({
-    level = PreferenceLevelEnum.TEMPLATE,
+    level,
   }: {
     level?: `${PreferenceLevelEnum}`;
   }): Promise<Array<IUserPreferenceSettings | IUserGlobalPreferenceSettings>> {

packages/client/src/http-client/http-client.ts

@@ -1,5 +1,5 @@
 import { ApiOptions } from '..';
-import { CustomDataType } from '@novu/shared';
+import type { CustomDataType } from '@novu/shared';
 
 const DEFAULT_API_VERSION = 'v1';
 const DEFAULT_BACKEND_URL = 'https://api.novu.co';

packages/client/src/index.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   IPreferenceChannels,
   NotificationTemplateCustomData,
 } from '@novu/shared';

packages/js/package.json

@@ -6,33 +6,35 @@
   "author": "",
   "license": "ISC",
   "main": "dist/cjs/index.cjs",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
-  "type": "module",
+  "module": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
-      }
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.cjs",
+      "import": "./dist/esm/index.mjs",
+      "default": "./dist/esm/index.mjs"
     },
-    "./package.json": "./package.json"
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "require": "./dist/ui/index.js",
+      "import": "./dist/ui/index.mjs",
+      "default": "./dist/ui/index.mjs"
+    }
   },
   "files": [
-    "dist/*",
-    "dist/esm/*",
-    "dist/cjs/*"
+    "dist/cjs",
+    "dist/esm",
+    "dist/types",
+    "dist/ui"
   ],
   "sideEffects": false,
   "private": true,
   "scripts": {
     "start": "pnpm run build -- --watch --sourcemap",
-    "build": "tsup && pnpm run post:build",
-    "post:build": "node scripts/size-limit.js",
+    "build": "tsup && pnpm run build:umd && pnpm run post:build",
+    "build:umd": "webpack --config webpack.config.cjs",
+    "post:build": "node scripts/size-limit.mjs",
     "lint": "eslint --ext .ts,.tsx src",
     "test": "jest"
   },
@@ -41,15 +43,26 @@
     "@types/node": "^18.11.12",
     "bytes-iec": "^3.1.1",
     "chalk": "^5.3.0",
+    "compression-webpack-plugin": "^10.0.0",
     "esbuild-plugin-compress": "^1.0.1",
+    "esbuild-plugin-solid": "^0.6.0",
     "jest": "^29.3.1",
+    "solid-devtools": "^0.29.2",
+    "terser-webpack-plugin": "^5.3.9",
     "tiny-glob": "^0.2.9",
     "ts-jest": "^29.0.3",
+    "ts-loader": "~9.4.0",
     "tsup": "^8.0.2",
-    "typescript": "4.9.5"
+    "tsup-preset-solid": "^2.2.0",
+    "typescript": "4.9.5",
+    "webpack": "^5.74.0",
+    "webpack-bundle-analyzer": "^4.9.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@novu/client": "workspace:*",
-    "mitt": "^3.0.1"
+    "mitt": "^3.0.1",
+    "socket.io-client": "4.7.2",
+    "solid-js": "^1.8.11"
   }
 }

packages/js/scripts/size-limit.js → packages/js/scripts/size-limit.mjs

@@ -15,14 +15,12 @@ const modules = [
   {
     name: 'UMD minified',
     filePath: umdPath,
-    limit: '90 kb',
-    limitInBytes: 90_000,
+    limitInBytes: 70_000,
   },
   {
     name: 'UMD gzip',
     filePath: umdGzipPath,
-    limit: '25 kb',
-    limitInBytes: 25_000,
+    limitInBytes: 20_000,
   },
 ];
 

packages/js/src/base-module.ts

@@ -1,6 +1,7 @@
-import { ApiService } from '@novu/client';
+import type { ApiService } from '@novu/client';
 
 import { NovuEventEmitter } from './event-emitter';
+import { Session } from './types';
 import { ApiServiceSingleton } from './utils/api-service-singleton';
 
 interface CallQueueItem {
@@ -19,13 +20,15 @@ export class BaseModule {
   constructor() {
     this._emitter = NovuEventEmitter.getInstance();
     this._apiService = ApiServiceSingleton.getInstance();
-    this._emitter.on('session.initialize.success', () => {
+    this._emitter.on('session.initialize.success', ({ result }) => {
+      this.onSessionSuccess(result);
       this.#callsQueue.forEach(async ({ fn, resolve }) => {
         resolve(await fn());
       });
       this.#callsQueue = [];
     });
     this._emitter.on('session.initialize.error', ({ error }) => {
+      this.onSessionError(error);
       this.#sessionError = error;
       this.#callsQueue.forEach(({ reject }) => {
         reject(error);
@@ -34,6 +37,10 @@ export class BaseModule {
     });
   }
 
+  protected onSessionSuccess(_: Session): void {}
+
+  protected onSessionError(_: unknown): void {}
+
   async callWithSession<T>(fn: () => Promise<T>): Promise<T> {
     if (this._apiService.isAuthenticated) {
       return fn();

packages/js/src/event-emitter/novu-event-emitter.ts

@@ -25,7 +25,7 @@ export class NovuEventEmitter {
   }
 
   off<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
-    this.#mittEmitter.on(eventName, listener);
+    this.#mittEmitter.off(eventName, listener);
   }
 
   emit<Key extends EventNames>(type: Key, event?: Events[Key]): void {

packages/js/src/event-emitter/types.ts

@@ -13,7 +13,7 @@ import type {
 import { Preference } from '../preferences/preference';
 import { FetchPreferencesArgs, UpdatePreferencesArgs } from '../preferences/types';
 import type { InitializeSessionArgs } from '../session';
-import type { PaginatedResponse, Session } from '../types';
+import { PaginatedResponse, Session, WebSocketEvent } from '../types';
 
 type NovuPendingEvent<A, O = undefined> = {
   args: A;
@@ -94,6 +94,17 @@ type NotificationRemoveEvents = BaseEvents<
 >;
 type PreferencesFetchEvents = BaseEvents<'preferences.fetch', FetchPreferencesArgs, Preference[]>;
 type PreferencesUpdateEvents = BaseEvents<'preferences.update', UpdatePreferencesArgs, Preference>;
+type SocketConnectEvents = BaseEvents<'socket.connect', { socketUrl: string }, undefined>;
+export type NotificationReceivedEvent = `notifications.${WebSocketEvent.RECEIVED}`;
+export type NotificationUnseenEvent = `notifications.${WebSocketEvent.UNSEEN}`;
+export type NotificationUnreadEvent = `notifications.${WebSocketEvent.UNREAD}`;
+type SocketEvents = {
+  [key in NotificationReceivedEvent]: { result: Notification };
+} & {
+  [key in NotificationUnseenEvent]: { result: number };
+} & {
+  [key in NotificationUnreadEvent]: { result: number };
+};
 
 /**
  * Events that are emitted by Novu Event Emitter.
@@ -119,8 +130,11 @@ export type Events = SessionInitializeEvents &
   NotificationMarkActionAsEvents &
   NotificationRemoveEvents &
   PreferencesFetchEvents &
-  PreferencesUpdateEvents;
+  PreferencesUpdateEvents &
+  SocketConnectEvents &
+  SocketEvents;
 
 export type EventNames = keyof Events;
+export type SocketEventNames = keyof SocketEvents;
 
 export type EventHandler<T = unknown> = (event: T) => void;

packages/js/src/feeds/helpers.ts

@@ -1,4 +1,4 @@
-import { ApiService } from '@novu/client';
+import type { ApiService } from '@novu/client';
 
 import type { NovuEventEmitter } from '../event-emitter';
 import { NotificationActionStatus, NotificationButton, NotificationStatus, TODO } from '../types';

packages/js/src/feeds/notification.ts

@@ -1,4 +1,4 @@
-import { ApiService } from '@novu/client';
+import type { ApiService } from '@novu/client';
 
 import { EventHandler, EventNames, Events, NovuEventEmitter } from '../event-emitter';
 import { Avatar, NotificationActionStatus, NotificationButton, Cta, NotificationStatus, TODO } from '../types';
@@ -122,6 +122,6 @@ export class Notification implements Pick<NovuEventEmitter, 'on' | 'off'> {
   }
 
   off<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
-    this.#emitter.on(eventName, listener);
+    this.#emitter.off(eventName, listener);
   }
 }

packages/js/src/index.ts

@@ -1 +1,2 @@
-export * from './novu';
+export { Novu } from './novu';
+export { InboxUI } from './ui';

packages/js/src/novu.ts

@@ -4,19 +4,22 @@ import { Feeds } from './feeds';
 import { Session } from './session';
 import { Preferences } from './preferences';
 import { ApiServiceSingleton } from './utils/api-service-singleton';
+import { Socket } from './ws';
 
 const PRODUCTION_BACKEND_URL = 'https://api.novu.co';
 
-type NovuOptions = {
+export type NovuOptions = {
   applicationIdentifier: string;
   subscriberId: string;
   subscriberHash?: string;
   backendUrl?: string;
+  socketUrl?: string;
 };
 
 export class Novu implements Pick<NovuEventEmitter, 'on' | 'off'> {
   #emitter: NovuEventEmitter;
   #session: Session;
+  #socket: Socket;
 
   public readonly feeds: Feeds;
   public readonly preferences: Preferences;
@@ -32,13 +35,17 @@ export class Novu implements Pick<NovuEventEmitter, 'on' | 'off'> {
     this.#session.initialize();
     this.feeds = new Feeds();
     this.preferences = new Preferences();
+    this.#socket = new Socket({ socketUrl: options.socketUrl });
   }
 
   on<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
+    if (this.#socket.isSocketEvent(eventName)) {
+      this.#socket.initialize();
+    }
     this.#emitter.on(eventName, listener);
   }
 
   off<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
-    this.#emitter.on(eventName, listener);
+    this.#emitter.off(eventName, listener);
   }
 }

packages/js/src/preferences/helpers.ts

@@ -1,4 +1,4 @@
-import { ApiService } from '@novu/client';
+import type { ApiService } from '@novu/client';
 
 import type { NovuEventEmitter } from '../event-emitter';
 import type { TODO } from '../types';

packages/js/src/preferences/preference.ts

@@ -1,4 +1,4 @@
-import { ApiService } from '@novu/client';
+import type { ApiService } from '@novu/client';
 
 import { NovuEventEmitter } from '../event-emitter';
 import { ChannelPreference, ChannelType, PreferenceLevel, Workflow } from '../types';

packages/js/src/session/session.ts

@@ -1,4 +1,4 @@
-import { ApiService } from '@novu/client';
+import type { ApiService } from '@novu/client';
 
 import { NovuEventEmitter } from '../event-emitter';
 import { ApiServiceSingleton } from '../utils/api-service-singleton';

packages/js/src/types.ts

@@ -45,6 +45,12 @@ export enum PreferenceOverrideSource {
   WORKFLOW_OVERRIDE = 'workflowOverride',
 }
 
+export enum WebSocketEvent {
+  RECEIVED = 'notification_received',
+  UNREAD = 'unread_count_changed',
+  UNSEEN = 'unseen_count_changed',
+}
+
 export type Session = {
   token: string;
   profile: {

packages/js/src/ui/Inbox.tsx

@@ -0,0 +1,36 @@
+import { For, createSignal, onMount, type Component } from 'solid-js';
+import { Notification } from '../feeds';
+import { Novu } from '../novu';
+import type { NovuOptions } from '../novu';
+
+const Inbox: Component<{
+  name: string;
+  options: NovuOptions;
+}> = (props) => {
+  const [feeds, setFeeds] = createSignal<Notification[]>([]);
+
+  onMount(() => {
+    const novu = new Novu(props.options);
+
+    // eslint-disable-next-line promise/always-return
+    novu.feeds.fetch().then((data) => {
+      setFeeds(data.data);
+    });
+  });
+
+  return (
+    <div>
+      <header>Hello {props.name} </header>
+      <For each={feeds()}>
+        {(feed) => (
+          <div>
+            <h2>{feed.body}</h2>
+            <p>{feed.createdAt}</p>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+};
+
+export default Inbox;

packages/js/src/ui/index.tsx

@@ -0,0 +1,37 @@
+import { render } from 'solid-js/web';
+import Inbox from './Inbox';
+import type { NovuOptions } from '../novu';
+
+export class InboxUI {
+  #dispose: { (): void } | null = null;
+  #rootElement: HTMLElement;
+
+  mount(
+    el: HTMLElement,
+    {
+      name = 'novu',
+      options,
+    }: {
+      name?: string;
+      options: NovuOptions;
+    }
+  ): void {
+    if (this.#dispose !== null) {
+      return;
+    }
+
+    this.#rootElement = document.createElement('div');
+    this.#rootElement.setAttribute('id', 'novu-ui');
+    el.appendChild(this.#rootElement);
+
+    const dispose = render(() => <Inbox name={name} options={options} />, this.#rootElement);
+
+    this.#dispose = dispose;
+  }
+
+  unmount(): void {
+    this.#dispose?.();
+    this.#dispose = null;
+    this.#rootElement.remove();
+  }
+}

packages/js/src/umd.ts

@@ -1,4 +1,5 @@
 import { Novu } from './novu';
+import { InboxUI } from './ui';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore