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
207 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 { /* ... */ }"
]
}
}
]
}