@motiadev/stream-client-browser 0.2.1-beta.73 → 0.2.1-beta.74

package/dist/__tests__/stream-group.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/stream-group.spec.js

@@ -0,0 +1,105 @@
+import { StreamGroupSubscription } from '../src/stream-group';
+describe('StreamGroupSubscription', () => {
+    const joinMessage = {
+        streamName: 'test-stream',
+        groupId: 'test-group',
+        subscriptionId: 'sub-1',
+    };
+    function makeMessage(type, data, timestamp = Date.now()) {
+        return {
+            streamName: 'test-stream',
+            groupId: 'test-group',
+            timestamp,
+            event: { type, ...(type === 'event' ? { event: data } : { data }) },
+        };
+    }
+    it('notifies change listeners on state change', () => {
+        const sub = new StreamGroupSubscription(joinMessage);
+        const listener = jest.fn();
+        sub.addChangeListener(listener);
+        const syncData = [
+            { id: '1', name: 'A' },
+            { id: '2', name: 'B' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        expect(listener).toHaveBeenCalledWith(syncData);
+    });
+    it('should be able to sort by a key', () => {
+        const sub = new StreamGroupSubscription(joinMessage, 'name');
+        const listener = jest.fn();
+        sub.addChangeListener(listener);
+        const syncData = [
+            { id: '1', name: 'B' },
+            { id: '2', name: 'A' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        expect(listener).toHaveBeenCalledWith(syncData);
+        expect(sub.getState()).toEqual([
+            { id: '2', name: 'A' },
+            { id: '1', name: 'B' },
+        ]);
+    });
+    it('should discard old events', () => {
+        const sub = new StreamGroupSubscription(joinMessage);
+        const listener = jest.fn();
+        sub.addChangeListener(listener);
+        const syncData = [
+            { id: '1', name: 'A' },
+            { id: '2', name: 'B' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        const oldSyncData = [
+            { id: '3', name: 'C' },
+            { id: '4', name: 'D' },
+        ];
+        sub.listener(makeMessage('sync', oldSyncData, Date.now() - 1000));
+        expect(sub.getState()).toEqual(syncData);
+    });
+    it('should add items', () => {
+        const sub = new StreamGroupSubscription(joinMessage);
+        const syncData = [
+            { id: '1', name: 'A' },
+            { id: '2', name: 'B' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('create', { id: '3', name: 'C' }));
+        expect(sub.getState()).toEqual([...syncData, { id: '3', name: 'C' }]);
+    });
+    it('should update items', () => {
+        const sub = new StreamGroupSubscription(joinMessage);
+        const syncData = [
+            { id: '1', name: 'A' },
+            { id: '2', name: 'B' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('update', { id: '1', name: 'A1' }));
+        expect(sub.getState()).toEqual([
+            { id: '1', name: 'A1' },
+            { id: '2', name: 'B' },
+        ]);
+    });
+    it('should remove items', () => {
+        const sub = new StreamGroupSubscription(joinMessage);
+        const syncData = [
+            { id: '1', name: 'A' },
+            { id: '2', name: 'B' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('delete', { id: '1' }));
+        expect(sub.getState()).toEqual([{ id: '2', name: 'B' }]);
+    });
+    it('should discard old on event on a particular item', () => {
+        const sub = new StreamGroupSubscription(joinMessage);
+        const syncData = [
+            { id: '1', name: 'A' },
+            { id: '2', name: 'B' },
+        ];
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('update', { id: '1', name: 'A1' }));
+        sub.listener(makeMessage('update', { id: '1', name: 'A2' }, Date.now() - 1000));
+        expect(sub.getState()).toEqual([
+            { id: '1', name: 'A1' },
+            { id: '2', name: 'B' },
+        ]);
+    });
+});

package/dist/__tests__/stream-item.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/stream-item.spec.js

@@ -0,0 +1,46 @@
+import { StreamItemSubscription } from '../src/stream-item';
+describe('StreamItemSubscription', () => {
+    const joinMessage = {
+        streamName: 'test-stream',
+        groupId: 'test-group',
+        subscriptionId: 'sub-1',
+    };
+    function makeMessage(type, data, timestamp = Date.now()) {
+        return {
+            streamName: 'test-stream',
+            groupId: 'test-group',
+            timestamp,
+            event: { type, ...(type === 'event' ? { event: data } : { data }) },
+        };
+    }
+    it('notifies change listeners on state change', () => {
+        const sub = new StreamItemSubscription(joinMessage);
+        const listener = jest.fn();
+        sub.addChangeListener(listener);
+        const syncData = { id: '1', name: 'A', value: 1 };
+        sub.listener(makeMessage('sync', syncData));
+        expect(listener).toHaveBeenCalledWith(syncData);
+    });
+    it('should discard old events', () => {
+        const sub = new StreamItemSubscription(joinMessage);
+        const syncData = { id: '1', name: 'A', value: 1 };
+        const oldSyncData = { id: '1', name: 'B', value: 3 };
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('sync', oldSyncData, Date.now() - 1000));
+        expect(sub.getState()).toEqual(syncData);
+    });
+    it('should update item', () => {
+        const sub = new StreamItemSubscription(joinMessage);
+        const syncData = { id: '1', name: 'A', value: 1 };
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('update', { id: '1', name: 'A1', value: 2 }, Date.now() + 1000));
+        expect(sub.getState()).toEqual({ id: '1', name: 'A1', value: 2 });
+    });
+    it('should remove item', () => {
+        const sub = new StreamItemSubscription(joinMessage);
+        const syncData = { id: '1', name: 'A', value: 1 };
+        sub.listener(makeMessage('sync', syncData));
+        sub.listener(makeMessage('delete', { id: '1' }, Date.now() + 1000));
+        expect(sub.getState()).toEqual(null);
+    });
+});

package/dist/src/stream-group.d.ts

@@ -3,6 +3,11 @@ import { GroupEventMessage, JoinMessage } from './stream.types';
 export declare class StreamGroupSubscription<TData extends {
     id: string;
 }> extends StreamSubscription<TData[], GroupEventMessage<TData>> {
-    constructor(sub: JoinMessage);
+    private sortKey?;
+    private lastTimestamp;
+    private lastTimestampMap;
+    constructor(sub: JoinMessage, sortKey?: keyof TData | undefined);
+    private sort;
+    protected setState(state: TData[]): void;
     listener(message: GroupEventMessage<TData>): void;
 }

package/dist/src/stream-group.js

@@ -1,10 +1,35 @@
 import { StreamSubscription } from './stream-subscription';
 export class StreamGroupSubscription extends StreamSubscription {
-    constructor(sub) {
+    constructor(sub, sortKey) {
         super(sub, []);
+        this.sortKey = sortKey;
+        this.lastTimestamp = 0;
+        this.lastTimestampMap = new Map();
+    }
+    sort(state) {
+        const sortKey = this.sortKey;
+        if (sortKey) {
+            return state.sort((a, b) => {
+                const aValue = a[sortKey];
+                const bValue = b[sortKey];
+                if (aValue && bValue) {
+                    return aValue.toString().localeCompare(bValue.toString());
+                }
+                return 0;
+            });
+        }
+        return state;
+    }
+    setState(state) {
+        super.setState(this.sort(state));
     }
     listener(message) {
         if (message.event.type === 'sync') {
+            if (message.timestamp < this.lastTimestamp) {
+                return;
+            }
+            this.lastTimestampMap = new Map();
+            this.lastTimestamp = message.timestamp;
             this.setState(message.event.data);
         }
         else if (message.event.type === 'create') {
@@ -18,11 +43,19 @@ export class StreamGroupSubscription extends StreamSubscription {
             const messageData = message.event.data;
             const messageDataId = messageData.id;
             const state = this.getState();
+            const currentItemTimestamp = this.lastTimestampMap.get(messageDataId);
+            if (currentItemTimestamp && currentItemTimestamp >= message.timestamp) {
+                return;
+            }
+            this.lastTimestamp = message.timestamp;
+            this.lastTimestampMap.set(messageDataId, message.timestamp);
             this.setState(state.map((item) => (item.id === messageDataId ? messageData : item)));
         }
         else if (message.event.type === 'delete') {
             const messageDataId = message.event.data.id;
             const state = this.getState();
+            this.lastTimestamp = message.timestamp;
+            this.lastTimestampMap.set(messageDataId, message.timestamp);
             this.setState(state.filter((item) => item.id !== messageDataId));
         }
         else if (message.event.type === 'event') {

package/dist/src/stream-item.d.ts

@@ -3,6 +3,7 @@ import { ItemEventMessage, JoinMessage } from './stream.types';
 export declare class StreamItemSubscription<TData extends {
     id: string;
 }> extends StreamSubscription<TData | null, ItemEventMessage<TData>> {
+    private lastEventTimestamp;
     constructor(sub: JoinMessage);
     listener(message: ItemEventMessage<TData>): void;
 }

package/dist/src/stream-item.js

@@ -2,8 +2,13 @@ import { StreamSubscription } from './stream-subscription';
 export class StreamItemSubscription extends StreamSubscription {
     constructor(sub) {
         super(sub, null);
+        this.lastEventTimestamp = 0;
     }
     listener(message) {
+        if (message.timestamp <= this.lastEventTimestamp) {
+            return;
+        }
+        this.lastEventTimestamp = message.timestamp;
         if (message.event.type === 'sync' || message.event.type === 'create' || message.event.type === 'update') {
             this.setState(message.event.data);
         }

package/dist/src/stream.d.ts

@@ -24,7 +24,7 @@ export declare class Stream {
      */
     subscribeGroup<TData extends {
         id: string;
-    }>(streamName: string, groupId: string): StreamGroupSubscription<TData>;
+    }>(streamName: string, groupId: string, sortKey?: keyof TData): StreamGroupSubscription<TData>;
     close(): void;
     private onSocketClose;
     private onSocketOpen;

package/dist/src/stream.js

@@ -34,10 +34,10 @@ export class Stream {
      * @argument streamName - The name of the stream to subscribe to.
      * @argument groupId - The id of the group to subscribe to.
      */
-    subscribeGroup(streamName, groupId) {
+    subscribeGroup(streamName, groupId, sortKey) {
         const subscriptionId = uuidv4();
         const sub = { streamName, groupId, subscriptionId };
-        const subscription = new StreamGroupSubscription(sub);
+        const subscription = new StreamGroupSubscription(sub, sortKey);
         this.subscribe(subscription);
         return subscription;
     }

package/dist/src/stream.types.d.ts

@@ -2,8 +2,9 @@ export type BaseMessage = {
     streamName: string;
     groupId: string;
     id?: string;
+    timestamp: number;
 };
-export type JoinMessage = BaseMessage & {
+export type JoinMessage = Omit<BaseMessage, 'timestamp'> & {
     subscriptionId: string;
 };
 export type CustomEvent = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@motiadev/stream-client-browser",
   "description": "Motia Stream Client Package – Responsible for managing streams of data.",
-  "version": "0.2.1-beta.73",
+  "version": "0.2.1-beta.74",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,11 +12,12 @@
     "@types/jest": "^29.5.14",
     "@types/ws": "^8.18.1",
     "jest": "^29.7.0",
-    "ts-jest": "^29.2.5",
+    "ts-jest": "^29.3.2",
     "typescript": "^5.7.2"
   },
   "scripts": {
     "build": "rm -rf dist && tsc",
-    "lint": "eslint --config ../../eslint.config.js"
+    "lint": "eslint --config ../../eslint.config.js",
+    "test": "jest"
   }
 }

package/src/stream-group.ts

@@ -1,37 +0,0 @@
-import { StreamSubscription } from './stream-subscription'
-import { GroupEventMessage, JoinMessage } from './stream.types'
-
-export class StreamGroupSubscription<TData extends { id: string }> extends StreamSubscription<
-  TData[],
-  GroupEventMessage<TData>
-> {
-  constructor(sub: JoinMessage) {
-    super(sub, [])
-  }
-
-  listener(message: GroupEventMessage<TData>): void {
-    if (message.event.type === 'sync') {
-      this.setState(message.event.data)
-    } else if (message.event.type === 'create') {
-      const id = message.event.data.id
-      const state = this.getState()
-
-      if (!state.find((item) => item.id === id)) {
-        this.setState([...state, message.event.data])
-      }
-    } else if (message.event.type === 'update') {
-      const messageData = message.event.data
-      const messageDataId = messageData.id
-      const state = this.getState()
-
-      this.setState(state.map((item) => (item.id === messageDataId ? messageData : item)))
-    } else if (message.event.type === 'delete') {
-      const messageDataId = message.event.data.id
-      const state = this.getState()
-
-      this.setState(state.filter((item) => item.id !== messageDataId))
-    } else if (message.event.type === 'event') {
-      this.onEventReceived(message.event.event)
-    }
-  }
-}

package/src/stream-item.ts

@@ -1,21 +0,0 @@
-import { StreamSubscription } from './stream-subscription'
-import { ItemEventMessage, JoinMessage } from './stream.types'
-
-export class StreamItemSubscription<TData extends { id: string }> extends StreamSubscription<
-  TData | null,
-  ItemEventMessage<TData>
-> {
-  constructor(sub: JoinMessage) {
-    super(sub, null)
-  }
-
-  listener(message: ItemEventMessage<TData>): void {
-    if (message.event.type === 'sync' || message.event.type === 'create' || message.event.type === 'update') {
-      this.setState(message.event.data)
-    } else if (message.event.type === 'delete') {
-      this.setState(null)
-    } else if (message.event.type === 'event') {
-      this.onEventReceived(message.event.event)
-    }
-  }
-}

package/src/stream-subscription.ts

@@ -1,84 +0,0 @@
-import { CustomEvent, JoinMessage, Listener } from './stream.types'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type CustomEventListener = (event: any) => void
-
-export abstract class StreamSubscription<TData = unknown, TEventData = unknown> {
-  private customEventListeners: Map<string, CustomEventListener[]> = new Map()
-  private closeListeners: Set<() => void> = new Set()
-
-  private onChangeListeners: Set<Listener<TData>> = new Set()
-  private state: TData
-
-  readonly sub: JoinMessage
-
-  constructor(sub: JoinMessage, state: TData) {
-    this.sub = sub
-    this.state = state
-  }
-
-  abstract listener(message: TEventData): void
-
-  protected onEventReceived(event: CustomEvent) {
-    const customEventListeners = this.customEventListeners.get(event.type)
-
-    if (customEventListeners) {
-      const eventData = event.data
-      customEventListeners.forEach((listener) => listener(eventData))
-    }
-  }
-
-  /**
-   * Add a custom event listener. This listener will be called whenever the custom event is received.
-   */
-  onEvent(type: string, listener: CustomEventListener) {
-    const listeners = this.customEventListeners.get(type) || []
-    this.customEventListeners.set(type, [...listeners, listener])
-  }
-
-  /**
-   * Remove a custom event listener.
-   */
-  offEvent(type: string, listener: CustomEventListener) {
-    const listeners = this.customEventListeners.get(type) || []
-    this.customEventListeners.set(
-      type,
-      listeners.filter((l) => l !== listener),
-    )
-  }
-
-  onClose(listener: () => void) {
-    this.closeListeners.add(listener)
-  }
-
-  close() {
-    this.closeListeners.forEach((listener) => listener())
-    this.closeListeners.clear()
-  }
-
-  /**
-   * Add a change listener. This listener will be called whenever the state of the group changes.
-   */
-  addChangeListener(listener: Listener<TData>) {
-    this.onChangeListeners.add(listener)
-  }
-
-  /**
-   * Remove a change listener.
-   */
-  removeChangeListener(listener: Listener<TData>) {
-    this.onChangeListeners.delete(listener)
-  }
-
-  /**
-   * Get the current state of the group.
-   */
-  getState(): TData {
-    return this.state
-  }
-
-  protected setState(state: TData) {
-    this.state = state
-    this.onChangeListeners.forEach((listener) => listener(state))
-  }
-}

package/src/stream.ts

@@ -1,130 +0,0 @@
-import { v4 as uuidv4 } from 'uuid'
-import { StreamGroupSubscription } from './stream-group'
-import { StreamItemSubscription } from './stream-item'
-import { StreamSubscription } from './stream-subscription'
-import { BaseMessage } from './stream.types'
-
-export class Stream {
-  private ws: WebSocket
-  private listeners: { [channelId: string]: Set<StreamSubscription> } = {}
-
-  constructor(private address: string) {
-    this.ws = this.createSocket()
-  }
-
-  createSocket(): WebSocket {
-    this.ws = new WebSocket(this.address)
-    this.ws.addEventListener('message', (message) => this.messageListener(message))
-    this.ws.addEventListener('open', () => this.onSocketOpen())
-    this.ws.addEventListener('close', () => this.onSocketClose())
-
-    return this.ws
-  }
-
-  /**
-   * Subscribe to an item in a stream.
-   *
-   * @argument streamName - The name of the stream to subscribe to.
-   * @argument groupId - The id of the group to subscribe to.
-   * @argument id - The id of the item to subscribe to.
-   */
-  subscribeItem<TData extends { id: string }>(
-    streamName: string,
-    groupId: string,
-    id: string,
-  ): StreamItemSubscription<TData> {
-    const subscriptionId = uuidv4()
-    const sub = { streamName, groupId, id, subscriptionId }
-    const subscription = new StreamItemSubscription<TData>(sub)
-
-    this.subscribe(subscription)
-
-    return subscription
-  }
-
-  /**
-   * Subscribe to a group in a stream.
-   *
-   * @argument streamName - The name of the stream to subscribe to.
-   * @argument groupId - The id of the group to subscribe to.
-   */
-  subscribeGroup<TData extends { id: string }>(streamName: string, groupId: string): StreamGroupSubscription<TData> {
-    const subscriptionId = uuidv4()
-    const sub = { streamName, groupId, subscriptionId }
-    const subscription = new StreamGroupSubscription<TData>(sub)
-
-    this.subscribe(subscription)
-
-    return subscription
-  }
-
-  close() {
-    this.listeners = {} // clean up all listeners
-    this.ws.removeEventListener('message', this.messageListener)
-    this.ws.removeEventListener('open', this.onSocketOpen)
-    this.ws.removeEventListener('close', this.onSocketClose)
-    this.ws.close()
-  }
-
-  private onSocketClose(): void {
-    // retry to connect
-    setTimeout(() => this.createSocket(), 2000)
-  }
-
-  private onSocketOpen(): void {
-    Object.values(this.listeners).forEach((listeners) => {
-      listeners.forEach((subscription) => this.join(subscription))
-    })
-  }
-
-  messageListener(event: MessageEvent<string>): void {
-    const message: BaseMessage = JSON.parse(event.data)
-    const room = this.roomName(message)
-
-    this.listeners[room]?.forEach((listener) => listener.listener(message))
-
-    if (message.id) {
-      const groupRoom = this.roomName({
-        streamName: message.streamName,
-        groupId: message.groupId,
-      })
-
-      this.listeners[groupRoom]?.forEach((listener) => listener.listener(message))
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private subscribe(subscription: StreamSubscription<any, any>): void {
-    const room = this.roomName(subscription.sub)
-
-    if (!this.listeners[room]) {
-      this.listeners[room] = new Set()
-    }
-
-    this.listeners[room].add(subscription)
-    this.join(subscription)
-
-    subscription.onClose(() => {
-      this.listeners[room]?.delete(subscription)
-      this.leave(subscription)
-    })
-  }
-
-  private join(subscription: StreamSubscription): void {
-    if (this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({ type: 'join', data: subscription.sub }))
-    }
-  }
-
-  private leave(subscription: StreamSubscription): void {
-    if (this.ws.readyState === WebSocket.OPEN) {
-      this.ws.send(JSON.stringify({ type: 'leave', data: subscription.sub }))
-    }
-  }
-
-  private roomName(message: BaseMessage): string {
-    return message.id
-      ? `${message.streamName}:group:${message.groupId}:item:${message.id}`
-      : `${message.streamName}:group:${message.groupId}`
-  }
-}

package/src/stream.types.ts

@@ -1,18 +0,0 @@
-export type BaseMessage = { streamName: string; groupId: string; id?: string }
-export type JoinMessage = BaseMessage & { subscriptionId: string }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type CustomEvent = { type: string; data: any }
-export type StreamEvent<TData extends { id: string }> =
-  | { type: 'create'; data: TData }
-  | { type: 'update'; data: TData }
-  | { type: 'delete'; data: TData }
-  | { type: 'event'; event: CustomEvent }
-export type ItemStreamEvent<TData extends { id: string }> = StreamEvent<TData> | { type: 'sync'; data: TData }
-export type GroupStreamEvent<TData extends { id: string }> = StreamEvent<TData> | { type: 'sync'; data: TData[] }
-export type ItemEventMessage<TData extends { id: string }> = BaseMessage & { event: ItemStreamEvent<TData> }
-export type GroupEventMessage<TData extends { id: string }> = BaseMessage & { event: GroupStreamEvent<TData> }
-
-export type Message = { type: 'join' | 'leave'; data: JoinMessage }
-
-export type Listener<TData> = (state: TData | null) => void
-export type CustomEventListener<TData> = (event: TData) => void

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "allowJs": true,
-    "outDir": "dist",
-    "rootDir": ".",
-    "baseUrl": ".",
-    "declaration": true,
-    "lib": ["dom"]
-  },
-  "include": ["src/*.ts", "index.ts"],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}