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