Enhancing TypeScript Applications with WebRTC for Real-Time Communication
Learn how to integrate WebRTC into TypeScript applications to enable real-time communication features.
0 likes
12 views
Rule Content
{ "title": "Enhancing TypeScript Applications with WebRTC for Real-Time Communication", "description": "Guidelines for integrating WebRTC into TypeScript applications to enable real-time communication features.", "category": "TypeScript Cursor Rules", "rules": [ { "name": "Strict Type Definitions", "description": "Ensure all WebRTC-related variables and functions have explicit and strict type definitions to leverage TypeScript's static type checking.", "applyTo": ["**/*.ts"], "enforcement": "error", "examples": { "good": [ "const peerConnection: RTCPeerConnection = new RTCPeerConnection(configuration);", "function handleIceCandidate(event: RTCPeerConnectionIceEvent): void { /* ... */ }" ], "bad": [ "const peerConnection = new RTCPeerConnection(configuration);", "function handleIceCandidate(event): void { /* ... */ }" ] } }, { "name": "Avoid 'any' Type", "description": "Prohibit the use of the 'any' type in WebRTC implementations to maintain type safety and code clarity.", "applyTo": ["**/*.ts"], "enforcement": "error", "examples": { "good": [ "let dataChannel: RTCDataChannel | null = null;" ], "bad": [ "let dataChannel: any = null;" ] } }, { "name": "Use Interfaces for RTC Configuration", "description": "Define interfaces for RTC configurations to ensure consistency and readability.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "interface RTCConfiguration { iceServers: RTCIceServer[]; }", "const config: RTCConfiguration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };" ], "bad": [ "const config = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };" ] } }, { "name": "Implement Error Handling", "description": "Ensure all WebRTC operations include proper error handling to manage exceptions and maintain application stability.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "peerConnection.createOffer().then(offer => { /* ... */ }).catch(error => { console.error(error); });" ], "bad": [ "peerConnection.createOffer().then(offer => { /* ... */ });" ] } }, { "name": "Use Enums for Signaling States", "description": "Utilize TypeScript enums to represent WebRTC signaling states for better code clarity and maintainability.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "enum SignalingState { Stable = 'stable', HaveLocalOffer = 'have-local-offer', HaveRemoteOffer = 'have-remote-offer' }", "if (peerConnection.signalingState === SignalingState.Stable) { /* ... */ }" ], "bad": [ "if (peerConnection.signalingState === 'stable') { /* ... */ }" ] } }, { "name": "Consistent Naming Conventions", "description": "Adhere to consistent naming conventions: camelCase for variables and functions, PascalCase for classes and interfaces.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "class PeerConnectionHandler { /* ... */ }", "function handleIceCandidate(event: RTCPeerConnectionIceEvent): void { /* ... */ }" ], "bad": [ "class peerConnectionHandler { /* ... */ }", "function HandleIceCandidate(event: RTCPeerConnectionIceEvent): void { /* ... */ }" ] } }, { "name": "Modular Code Structure", "description": "Organize WebRTC functionalities into modular components to enhance code maintainability and scalability.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "// peerConnection.ts\nexport class PeerConnection { /* ... */ }", "// signaling.ts\nexport class Signaling { /* ... */ }" ], "bad": [ "// app.ts\nclass PeerConnection { /* ... */ }\nclass Signaling { /* ... */ }" ] } }, { "name": "Use Optional Chaining", "description": "Employ optional chaining to safely access nested properties in WebRTC objects, preventing runtime errors.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "const iceConnectionState = peerConnection?.iceConnectionState;" ], "bad": [ "const iceConnectionState = peerConnection.iceConnectionState;" ] } }, { "name": "Leverage Utility Types", "description": "Utilize TypeScript utility types like Partial and Readonly to manage WebRTC object properties effectively.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "type PartialRTCConfiguration = Partial<RTCConfiguration>;" ], "bad": [ "type PartialRTCConfiguration = { iceServers?: RTCIceServer[]; };" ] } }, { "name": "Document WebRTC Functions", "description": "Provide clear documentation for all WebRTC-related functions and classes to facilitate understanding and maintenance.", "applyTo": ["**/*.ts"], "enforcement": "warning", "examples": { "good": [ "/**\n * Initializes a new RTCPeerConnection with the given configuration.\n * @param config - The RTC configuration.\n */\nfunction initializePeerConnection(config: RTCConfiguration): RTCPeerConnection { /* ... */ }" ], "bad": [ "function initializePeerConnection(config: RTCConfiguration): RTCPeerConnection { /* ... */ }" ] } } ] }