@owlmeans/client-socket 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 OwlMeans Common — Fullstack typescript framework
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,582 @@
+# @owlmeans/client-socket
+
+The **@owlmeans/client-socket** package provides client-side WebSocket integration for OwlMeans Common Libraries, enabling real-time communication between React frontend applications and backend services through WebSocket connections.
+
+## Purpose
+
+This package serves as the client-side WebSocket implementation, specifically designed for:
+
+- **React WebSocket Integration**: Seamless WebSocket connections in React applications
+- **Module-based Socket Management**: Integration with the OwlMeans module system for WebSocket endpoints
+- **Connection Lifecycle Management**: Automatic connection establishment, maintenance, and cleanup
+- **Authentication Integration**: Built-in authentication support for secure WebSocket connections
+- **Real-time Communication**: Enable real-time features like chat, notifications, and live updates
+- **TypeScript Support**: Full TypeScript support with proper type safety
+
+## Key Concepts
+
+### Client-side WebSocket Management
+This package provides client-side WebSocket functionality that integrates with the OwlMeans module system, allowing WebSocket connections to be defined as modules.
+
+### Connection Abstraction
+Wraps native WebSocket connections in a unified `Connection` interface that provides consistent API for message handling, authentication, and lifecycle management.
+
+### React Integration
+Provides React hooks for managing WebSocket connections with automatic cleanup and re-connection logic.
+
+### Module-driven Connections
+WebSocket endpoints are defined as modules, ensuring consistent URL generation and authentication handling across the application.
+
+## Installation
+
+```bash
+npm install @owlmeans/client-socket
+```
+
+## API Reference
+
+### Types
+
+#### `Config`
+Configuration interface extending ClientConfig.
+
+```typescript
+interface Config extends ClientConfig { }
+```
+
+#### `Context<C extends Config = Config>`
+Context interface for client applications with socket support.
+
+```typescript
+interface Context<C extends Config = Config> extends ClientContext<C> { }
+```
+
+### Core Functions
+
+#### `ws(module: ClientModule<string>, request?: AbstractRequest<{ token?: string }>): Promise<Connection>`
+
+Creates a WebSocket connection using a client module.
+
+**Parameters:**
+- `module`: Client module that defines the WebSocket endpoint
+- `request`: Optional request object with authentication token
+
+**Returns:** Promise that resolves to a Connection instance
+
+```typescript
+import { ws } from '@owlmeans/client-socket'
+
+const socketModule = context.module<ClientModule>('chat-socket')
+const connection = await ws(socketModule, {
+  query: { token: authToken }
+})
+```
+
+### React Hooks
+
+#### `useWs(module: string | ClientModule<any>, request?: Partial<AbstractRequest<any>>): Connection | null`
+
+React hook for managing WebSocket connections with automatic lifecycle management.
+
+**Parameters:**
+- `module`: Module alias or ClientModule instance
+- `request`: Optional request parameters
+
+**Returns:** Connection instance or null if not connected
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+
+function ChatComponent() {
+  const connection = useWs('chat-socket', {
+    query: { room: 'general' }
+  })
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('message', handleMessage)
+    }
+  }, [connection])
+  
+  return <div>Chat interface</div>
+}
+```
+
+### Utility Functions
+
+#### `makeConnection<C extends Config = Config, T extends Context<C> = Context<C>>(conn: WebSocket, context: T): Connection`
+
+Creates a Connection wrapper around a native WebSocket instance.
+
+**Parameters:**
+- `conn`: Native WebSocket instance
+- `context`: Application context
+
+**Returns:** Connection wrapper with enhanced functionality
+
+## Usage Examples
+
+### Basic WebSocket Connection
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useContext } from '@owlmeans/client'
+import { useEffect, useState } from 'react'
+
+function WebSocketExample() {
+  const [messages, setMessages] = useState<string[]>([])
+  const connection = useWs('websocket-endpoint')
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('message', (message) => {
+        setMessages(prev => [...prev, message.payload])
+      })
+      
+      // Send a message
+      connection.send({ 
+        type: 'text',
+        payload: 'Hello WebSocket!'
+      })
+    }
+  }, [connection])
+  
+  return (
+    <div>
+      <h3>Messages:</h3>
+      {messages.map((msg, idx) => (
+        <div key={idx}>{msg}</div>
+      ))}
+    </div>
+  )
+}
+```
+
+### Authenticated WebSocket Connection
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useAuth } from '@owlmeans/client-auth'
+import { useEffect } from 'react'
+
+function AuthenticatedSocket() {
+  const auth = useAuth()
+  const connection = useWs('secure-socket', {
+    query: { 
+      token: auth.getToken() 
+    }
+  })
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('authenticated', () => {
+        console.log('Socket authenticated successfully')
+      })
+      
+      connection.on('auth-error', (error) => {
+        console.error('Socket authentication failed:', error)
+      })
+    }
+  }, [connection])
+  
+  return <div>Authenticated WebSocket connection</div>
+}
+```
+
+### Chat Application
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useState, useEffect } from 'react'
+
+interface ChatMessage {
+  id: string
+  user: string
+  message: string
+  timestamp: number
+}
+
+function ChatRoom({ roomId }: { roomId: string }) {
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [inputMessage, setInputMessage] = useState('')
+  
+  const connection = useWs('chat-socket', {
+    query: { room: roomId }
+  })
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('chat-message', (event) => {
+        const message: ChatMessage = event.payload
+        setMessages(prev => [...prev, message])
+      })
+      
+      connection.on('user-joined', (event) => {
+        console.log(`${event.payload.user} joined the room`)
+      })
+      
+      connection.on('user-left', (event) => {
+        console.log(`${event.payload.user} left the room`)
+      })
+    }
+  }, [connection, roomId])
+  
+  const sendMessage = () => {
+    if (connection && inputMessage.trim()) {
+      connection.send({
+        type: 'chat-message',
+        payload: {
+          message: inputMessage,
+          room: roomId
+        }
+      })
+      setInputMessage('')
+    }
+  }
+  
+  return (
+    <div>
+      <div className="messages">
+        {messages.map(msg => (
+          <div key={msg.id}>
+            <strong>{msg.user}:</strong> {msg.message}
+          </div>
+        ))}
+      </div>
+      <div className="input">
+        <input
+          value={inputMessage}
+          onChange={(e) => setInputMessage(e.target.value)}
+          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
+        />
+        <button onClick={sendMessage}>Send</button>
+      </div>
+    </div>
+  )
+}
+```
+
+### Real-time Notifications
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useEffect, useState } from 'react'
+
+interface Notification {
+  id: string
+  type: 'info' | 'warning' | 'error' | 'success'
+  title: string
+  message: string
+}
+
+function NotificationSystem() {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+  const connection = useWs('notification-socket')
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('notification', (event) => {
+        const notification: Notification = event.payload
+        setNotifications(prev => [notification, ...prev])
+        
+        // Auto-remove after 5 seconds
+        setTimeout(() => {
+          setNotifications(prev => 
+            prev.filter(n => n.id !== notification.id)
+          )
+        }, 5000)
+      })
+      
+      connection.on('notification-clear', (event) => {
+        const { notificationId } = event.payload
+        setNotifications(prev => 
+          prev.filter(n => n.id !== notificationId)
+        )
+      })
+    }
+  }, [connection])
+  
+  return (
+    <div className="notification-container">
+      {notifications.map(notification => (
+        <div key={notification.id} className={`notification ${notification.type}`}>
+          <h4>{notification.title}</h4>
+          <p>{notification.message}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+```
+
+### Live Data Updates
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useState, useEffect } from 'react'
+
+interface LiveData {
+  timestamp: number
+  value: number
+  status: string
+}
+
+function LiveDataDashboard() {
+  const [data, setData] = useState<LiveData[]>([])
+  const connection = useWs('live-data-socket')
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('data-update', (event) => {
+        const newData: LiveData = event.payload
+        setData(prev => {
+          const updated = [newData, ...prev.slice(0, 99)] // Keep last 100 entries
+          return updated
+        })
+      })
+      
+      // Request initial data
+      connection.send({
+        type: 'request-initial-data',
+        payload: {}
+      })
+    }
+  }, [connection])
+  
+  return (
+    <div>
+      <h2>Live Data Stream</h2>
+      <div className="data-grid">
+        {data.map((item, idx) => (
+          <div key={idx} className="data-item">
+            <span>Value: {item.value}</span>
+            <span>Status: {item.status}</span>
+            <span>Time: {new Date(item.timestamp).toLocaleTimeString()}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+### Connection Status Management
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useState, useEffect } from 'react'
+
+function ConnectionStatusProvider({ children }: { children: React.ReactNode }) {
+  const [isConnected, setIsConnected] = useState(false)
+  const [connectionError, setConnectionError] = useState<string | null>(null)
+  const connection = useWs('main-socket')
+  
+  useEffect(() => {
+    if (connection) {
+      setIsConnected(true)
+      setConnectionError(null)
+      
+      connection.on('close', () => {
+        setIsConnected(false)
+        setConnectionError('Connection lost')
+      })
+      
+      connection.on('error', (event) => {
+        setConnectionError(event.payload.message)
+      })
+    } else {
+      setIsConnected(false)
+    }
+  }, [connection])
+  
+  return (
+    <div>
+      <div className={`connection-status ${isConnected ? 'connected' : 'disconnected'}`}>
+        {isConnected ? 'Connected' : 'Disconnected'}
+        {connectionError && <span>: {connectionError}</span>}
+      </div>
+      {children}
+    </div>
+  )
+}
+```
+
+### Manual Connection Management
+
+```typescript
+import { ws } from '@owlmeans/client-socket'
+import { useContext } from '@owlmeans/client'
+import { useEffect, useState } from 'react'
+
+function ManualConnectionComponent() {
+  const context = useContext()
+  const [connection, setConnection] = useState<Connection | null>(null)
+  const [status, setStatus] = useState<'disconnected' | 'connecting' | 'connected'>('disconnected')
+  
+  const connect = async () => {
+    try {
+      setStatus('connecting')
+      const socketModule = context.module<ClientModule>('manual-socket')
+      const conn = await ws(socketModule)
+      
+      conn.on('close', () => {
+        setStatus('disconnected')
+        setConnection(null)
+      })
+      
+      setConnection(conn)
+      setStatus('connected')
+    } catch (error) {
+      console.error('Connection failed:', error)
+      setStatus('disconnected')
+    }
+  }
+  
+  const disconnect = async () => {
+    if (connection) {
+      await connection.close()
+      setConnection(null)
+      setStatus('disconnected')
+    }
+  }
+  
+  useEffect(() => {
+    return () => {
+      if (connection) {
+        connection.close()
+      }
+    }
+  }, [])
+  
+  return (
+    <div>
+      <div>Status: {status}</div>
+      <button onClick={connect} disabled={status !== 'disconnected'}>
+        Connect
+      </button>
+      <button onClick={disconnect} disabled={status === 'disconnected'}>
+        Disconnect
+      </button>
+    </div>
+  )
+}
+```
+
+## Error Handling
+
+```typescript
+import { useWs } from '@owlmeans/client-socket'
+import { useEffect, useState } from 'react'
+
+function ErrorHandlingExample() {
+  const [error, setError] = useState<string | null>(null)
+  const connection = useWs('error-prone-socket')
+  
+  useEffect(() => {
+    if (connection) {
+      connection.on('error', (event) => {
+        setError(event.payload.message || 'Unknown error occurred')
+      })
+      
+      connection.on('close', (event) => {
+        if (event.payload.code !== 1000) { // Not a normal closure
+          setError(`Connection closed unexpectedly (Code: ${event.payload.code})`)
+        }
+      })
+      
+      // Clear error when reconnected
+      connection.on('open', () => {
+        setError(null)
+      })
+    }
+  }, [connection])
+  
+  return (
+    <div>
+      {error && (
+        <div className="error-message">
+          Error: {error}
+        </div>
+      )}
+      <div>
+        Connection Status: {connection ? 'Connected' : 'Disconnected'}
+      </div>
+    </div>
+  )
+}
+```
+
+## Integration Patterns
+
+### Module Definition
+
+```typescript
+// Define WebSocket module in your module configuration
+import { module } from '@owlmeans/client-module'
+import { route } from '@owlmeans/route'
+
+const chatSocketModule = module(
+  route('chat-socket', '/ws/chat'),
+  guard('authenticated')
+)
+
+// Register the module with your context
+context.registerModule(chatSocketModule)
+```
+
+### Context Provider Pattern
+
+```typescript
+import React, { createContext, useContext as useReactContext } from 'react'
+import { Connection } from '@owlmeans/socket'
+import { useWs } from '@owlmeans/client-socket'
+
+const SocketContext = createContext<Connection | null>(null)
+
+export function SocketProvider({ children }: { children: React.ReactNode }) {
+  const connection = useWs('global-socket')
+  
+  return (
+    <SocketContext.Provider value={connection}>
+      {children}
+    </SocketContext.Provider>
+  )
+}
+
+export function useGlobalSocket() {
+  const connection = useReactContext(SocketContext)
+  if (!connection) {
+    throw new Error('useGlobalSocket must be used within SocketProvider')
+  }
+  return connection
+}
+```
+
+## Best Practices
+
+1. **Connection Management**: Always handle connection lifecycle properly with cleanup
+2. **Error Handling**: Implement comprehensive error handling for network issues
+3. **Reconnection Logic**: Consider implementing automatic reconnection for critical connections
+4. **Message Validation**: Validate incoming messages to ensure data integrity
+5. **Performance**: Avoid creating too many simultaneous WebSocket connections
+6. **Authentication**: Securely handle authentication tokens in WebSocket connections
+7. **Memory Leaks**: Ensure proper cleanup of event listeners and connections
+
+## Dependencies
+
+This package depends on:
+- `@owlmeans/auth` - Authentication framework
+- `@owlmeans/client` - Client framework
+- `@owlmeans/client-context` - Client context management
+- `@owlmeans/client-module` - Client module system
+- `@owlmeans/context` - Context management
+- `@owlmeans/module` - Module system
+- `@owlmeans/socket` - Core socket functionality
+- `react` - React framework
+
+## Related Packages
+
+- [`@owlmeans/socket`](../socket) - Core socket functionality
+- [`@owlmeans/server-socket`](../server-socket) - Server-side WebSocket implementation
+- [`@owlmeans/client`](../client) - Client framework
+- [`@owlmeans/client-module`](../client-module) - Client module system

package/build/helper.d.ts

@@ -0,0 +1,8 @@
+import type { ClientModule } from '@owlmeans/client-module';
+import type { AbstractRequest } from '@owlmeans/module';
+import type { Connection } from '@owlmeans/socket';
+export declare const ws: (module: ClientModule<string>, request?: AbstractRequest<{
+    token?: string;
+}>) => Promise<Connection>;
+export declare const useWs: (module: string | ClientModule<any>, request?: Partial<AbstractRequest<any>>) => Connection | null;
+//# sourceMappingURL=helper.d.ts.map

package/build/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../src/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAUlD,eAAO,MAAM,EAAE,WAAkB,YAAY,CAAC,MAAM,CAAC,YAAY,eAAe,CAAC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,KAAG,OAAO,CAAC,UAAU,CAexH,CAAA;AAED,eAAO,MAAM,KAAK,WAAY,MAAM,GAAG,YAAY,CAAC,GAAG,CAAC,YAAY,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,KAAG,UAAU,GAAG,IAqBhH,CAAA"}

package/build/helper.js

@@ -0,0 +1,41 @@
+import { provideRequest } from '@owlmeans/client-module';
+import { ModuleOutcome } from '@owlmeans/module';
+import { SocketInitializationError } from '@owlmeans/socket';
+import { makeConnection } from './utils/connection.js';
+import { assertContext } from '@owlmeans/context';
+import { useContext, useValue } from '@owlmeans/client';
+import { AUTH_QUERY } from '@owlmeans/auth';
+import { urlCall } from '@owlmeans/client-module/utils';
+import { useEffect, useMemo } from 'react';
+export const ws = async (module, request) => {
+    const ctx = assertContext(module.ctx, 'client-ws');
+    request = request ?? provideRequest(module.getAlias(), module.getPath());
+    const [url, state] = await urlCall({ ref: module })(request);
+    if (state !== ModuleOutcome.Ok) {
+        throw new SocketInitializationError;
+    }
+    const socket = new WebSocket(url);
+    return new Promise(resolve => {
+        socket.onopen = () => {
+            resolve(makeConnection(socket, ctx));
+        };
+    });
+};
+export const useWs = (module, request) => {
+    const ctx = useContext();
+    const mod = useMemo(() => typeof module === 'string' ? ctx.module(module) : module, [module]);
+    const connection = useValue(async () => {
+        const _request = provideRequest(mod.getAlias(), mod.getPath());
+        Object.assign(_request, request);
+        return await ws(mod, _request);
+    }, [mod.getAlias(), request?.query?.[AUTH_QUERY]]);
+    useEffect(() => {
+        if (connection != null) {
+            return () => {
+                void connection.close();
+            };
+        }
+    }, [connection]);
+    return connection;
+};
+//# sourceMappingURL=helper.js.map

package/build/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sourceRoot":"","sources":["../src/helper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAEhD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,CAAC,MAAM,EAAE,GAAG,KAAK,EAAE,MAA4B,EAAE,OAA6C,EAAuB,EAAE;IAC3H,MAAM,GAAG,GAAG,aAAa,CAAkB,MAAM,CAAC,GAAc,EAAE,WAAW,CAAC,CAAA;IAC9E,OAAO,GAAG,OAAO,IAAI,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;IACxE,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,MAAM,OAAO,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;IAE5D,IAAI,KAAK,KAAK,aAAa,CAAC,EAAE,EAAE,CAAC;QAC/B,MAAM,IAAI,yBAAyB,CAAA;IACrC,CAAC;IACD,MAAM,MAAM,GAAG,IAAI,SAAS,CAAC,GAAG,CAAC,CAAA;IAEjC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QAC3B,MAAM,CAAC,MAAM,GAAG,GAAG,EAAE;YACnB,OAAO,CAAC,cAAc,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;QACtC,CAAC,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,MAAkC,EAAE,OAAuC,EAAqB,EAAE;IACtH,MAAM,GAAG,GAAG,UAAU,EAAE,CAAA;IACxB,MAAM,GAAG,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAe,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,EAC5E,CAAC,MAAM,CAAC,CACT,CAAA;IACD,MAAM,UAAU,GAAG,QAAQ,CAAa,KAAK,IAAI,EAAE;QACjD,MAAM,QAAQ,GAAG,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC,CAAA;QAC9D,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;QAChC,OAAO,MAAM,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAA;IAChC,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC;YACvB,OAAO,GAAG,EAAE;gBACV,KAAK,UAAU,CAAC,KAAK,EAAE,CAAA;YACzB,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

package/build/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './types.js';
+export * from './helper.js';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,mBAAmB,YAAY,CAAA;AAC/B,cAAc,aAAa,CAAA"}

package/build/index.js

@@ -0,0 +1,2 @@
+export * from './helper.js';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAA"}

package/build/types.d.ts

@@ -0,0 +1,7 @@
+import type { ClientConfig } from '@owlmeans/client-context';
+import type { ClientContext } from '@owlmeans/client';
+export interface Config extends ClientConfig {
+}
+export interface Context<C extends Config = Config> extends ClientContext<C> {
+}
+//# sourceMappingURL=types.d.ts.map

package/build/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAErD,MAAM,WAAW,MAAO,SAAQ,YAAY;CAAI;AAEhD,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,aAAa,CAAC,CAAC,CAAC;CAAI"}

package/build/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/build/utils/connection.d.ts

@@ -0,0 +1,4 @@
+import type { Config, Context } from '../types.js';
+import type { Connection } from '@owlmeans/socket';
+export declare const makeConnection: <C extends Config = Config, T extends Context<C> = Context<C>>(conn: WebSocket, _context: T) => Connection;
+//# sourceMappingURL=connection.d.ts.map

package/build/utils/connection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection.d.ts","sourceRoot":"","sources":["../../src/utils/connection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,UAAU,EAA4B,MAAM,kBAAkB,CAAA;AAG5E,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,MAAM,WAAW,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,qBACtE,SAAS,YAAY,CAAC,KAC3B,UA+CF,CAAA"}

package/build/utils/connection.js

@@ -0,0 +1,44 @@
+import { createBasicConnection, MessageType } from '@owlmeans/socket';
+export const makeConnection = (conn, _context) => {
+    const model = createBasicConnection();
+    model.send = async (message) => {
+        if (typeof message !== 'string') {
+            model.prepare?.(message);
+        }
+        conn.send(typeof message === 'string' ? message : JSON.stringify(message));
+    };
+    model.close = async () => {
+        // await closeHandler(new CloseEvent('close', { code: 1000, wasClean: true }))
+        conn.close();
+        // @TODO Make sure it trigger close observers
+    };
+    model.authenticate = async (_stage, _payload) => {
+        // @TODO Provide authentication flow logic here
+        return [];
+    };
+    model.prepare = (message, _isRequest) => {
+        // @TODO add sender / recipient metadata
+        message.dt = message.dt ?? Date.now();
+        return message;
+    };
+    const messageHandler = async (message) => {
+        await model.receive(message.data);
+    };
+    const closeHandler = async (event) => {
+        const msg = {
+            type: MessageType.System,
+            event: 'close',
+            payload: { code: event.code }
+        };
+        if (model.prepare != null) {
+            model.prepare(msg);
+        }
+        await Promise.all(model.getListeners().map(async (listener) => listener(msg)));
+        conn.removeEventListener('message', messageHandler);
+        conn.removeEventListener('close', closeHandler);
+    };
+    conn.addEventListener('message', messageHandler);
+    conn.addEventListener('close', closeHandler);
+    return model;
+};
+//# sourceMappingURL=connection.js.map

package/build/utils/connection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection.js","sourceRoot":"","sources":["../../src/utils/connection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAErE,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAe,EAAE,QAAW,EAChB,EAAE;IACd,MAAM,KAAK,GAAG,qBAAqB,EAAE,CAAA;IAErC,KAAK,CAAC,IAAI,GAAG,KAAK,EAAC,OAAO,EAAC,EAAE;QAC3B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,KAAK,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAA;QAC1B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAC5E,CAAC,CAAA;IAED,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE;QACvB,8EAA8E;QAC9E,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,6CAA6C;IAC/C,CAAC,CAAA;IAED,KAAK,CAAC,YAAY,GAAG,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE;QAC9C,+CAA+C;QAC/C,OAAO,EAAS,CAAA;IAClB,CAAC,CAAA;IAED,KAAK,CAAC,OAAO,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE;QACtC,wCAAwC;QACxC,OAAO,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,IAAI,CAAC,GAAG,EAAE,CAAA;QACrC,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,EAAE,OAAqB,EAAE,EAAE;QACrD,MAAM,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACnC,CAAC,CAAA;IACD,MAAM,YAAY,GAAG,KAAK,EAAE,KAAiB,EAAE,EAAE;QAC/C,MAAM,GAAG,GAA+B;YACtC,IAAI,EAAE,WAAW,CAAC,MAAM;YACxB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE;SAC9B,CAAA;QACD,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE,CAAC;YAC1B,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;QACpB,CAAC;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;QAC5E,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;QACnD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IACjD,CAAC,CAAA;IACD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAA;IAChD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;IAE5C,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/build/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './connection.js';
+//# sourceMappingURL=index.d.ts.map

package/build/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA"}

package/build/utils/index.js

@@ -0,0 +1,2 @@
+export * from './connection.js';
+//# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAA"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@owlmeans/client-socket",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "sleep 132 && nodemon -e ts,tsx,json --watch src --exec \"tsc -p ./tsconfig.json\"",
+    "watch": "tsc -b -w --preserveWatchOutput --pretty"
+  },
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js",
+      "module": "./build/index.js",
+      "types": "./build/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "nodemon": "^3.1.7",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@owlmeans/auth": "^0.1.0",
+    "@owlmeans/basic-envelope": "^0.1.0",
+    "@owlmeans/client": "^0.1.0",
+    "@owlmeans/client-context": "^0.1.0",
+    "@owlmeans/client-module": "^0.1.0",
+    "@owlmeans/context": "^0.1.0",
+    "@owlmeans/module": "^0.1.0",
+    "@owlmeans/socket": "^0.1.0"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/helper.ts

@@ -0,0 +1,53 @@
+import type { ClientModule } from '@owlmeans/client-module'
+import type { AbstractRequest } from '@owlmeans/module'
+import { provideRequest } from '@owlmeans/client-module'
+import { ModuleOutcome } from '@owlmeans/module'
+import type { Connection } from '@owlmeans/socket'
+import { SocketInitializationError } from '@owlmeans/socket'
+import { makeConnection } from './utils/connection.js'
+import { assertContext } from '@owlmeans/context'
+import type { Config, Context } from './types.js'
+import { useContext, useValue } from '@owlmeans/client'
+import { AUTH_QUERY } from '@owlmeans/auth'
+import { urlCall } from '@owlmeans/client-module/utils'
+import { useEffect, useMemo } from 'react'
+
+export const ws = async (module: ClientModule<string>, request?: AbstractRequest<{ token?: string }>): Promise<Connection> => {
+  const ctx = assertContext<Config, Context>(module.ctx as Context, 'client-ws')
+  request = request ?? provideRequest(module.getAlias(), module.getPath())
+  const [url, state] = await urlCall({ ref: module })(request)
+
+  if (state !== ModuleOutcome.Ok) {
+    throw new SocketInitializationError
+  }
+  const socket = new WebSocket(url)
+
+  return new Promise(resolve => {
+    socket.onopen = () => {
+      resolve(makeConnection(socket, ctx))
+    }
+  })
+}
+
+export const useWs = (module: string | ClientModule<any>, request?: Partial<AbstractRequest<any>>): Connection | null => {
+  const ctx = useContext()
+  const mod = useMemo(
+    () => typeof module === 'string' ? ctx.module<ClientModule>(module) : module,
+    [module]
+  )
+  const connection = useValue<Connection>(async () => {
+    const _request = provideRequest(mod.getAlias(), mod.getPath())
+    Object.assign(_request, request)
+    return await ws(mod, _request)
+  }, [mod.getAlias(), request?.query?.[AUTH_QUERY]])
+
+  useEffect(() => {
+    if (connection != null) {
+      return () => {
+        void connection.close()
+      }
+    }
+  }, [connection])
+
+  return connection
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+
+export type * from './types.js'
+export * from './helper.js'

package/src/types.ts

@@ -0,0 +1,7 @@
+
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from '@owlmeans/client'
+
+export interface Config extends ClientConfig { }
+
+export interface Context<C extends Config = Config> extends ClientContext<C> { }

package/src/utils/connection.ts

@@ -0,0 +1,54 @@
+import type { Config, Context } from '../types.js'
+import type { Connection, EventMessage as EMessage } from '@owlmeans/socket'
+import { createBasicConnection, MessageType } from '@owlmeans/socket'
+
+export const makeConnection = <C extends Config = Config, T extends Context<C> = Context<C>>(
+  conn: WebSocket, _context: T
+): Connection => {
+  const model = createBasicConnection()
+
+  model.send = async message => {
+    if (typeof message !== 'string') {
+      model.prepare?.(message)
+    }
+    conn.send(typeof message === 'string' ? message : JSON.stringify(message))
+  }
+
+  model.close = async () => {
+    // await closeHandler(new CloseEvent('close', { code: 1000, wasClean: true }))
+    conn.close()
+    // @TODO Make sure it trigger close observers
+  }
+
+  model.authenticate = async (_stage, _payload) => {
+    // @TODO Provide authentication flow logic here
+    return [] as any
+  }
+
+  model.prepare = (message, _isRequest) => {
+    // @TODO add sender / recipient metadata
+    message.dt = message.dt ?? Date.now()
+    return message
+  }
+
+  const messageHandler = async (message: MessageEvent) => {
+    await model.receive(message.data)
+  }
+  const closeHandler = async (event: CloseEvent) => {
+    const msg: EMessage<{ code: number }> = {
+      type: MessageType.System,
+      event: 'close',
+      payload: { code: event.code }
+    }
+    if (model.prepare != null) {
+      model.prepare(msg)
+    }
+    await Promise.all(model.getListeners().map(async listener => listener(msg)))
+    conn.removeEventListener('message', messageHandler)
+    conn.removeEventListener('close', closeHandler)
+  }
+  conn.addEventListener('message', messageHandler)
+  conn.addEventListener('close', closeHandler)
+
+  return model
+}

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+
+export * from './connection.js'

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "../tsconfig.default.json",
+    "../tsconfig.react.json",
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/", /* Specify the root folder within your source files. */
+    "outDir": "./build/", /* Specify an output folder for all emitted files. */
+    "moduleResolution": "Bundler"
+  },
+  "exclude": [
+    "./dist/**/*",
+    "./build/**/*",
+    "./*.ts"
+  ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/helper.ts","./src/index.ts","./src/types.ts","./src/utils/connection.ts","./src/utils/index.ts"],"version":"5.6.3"}