Easily implement broadcasting in a React/Vue Typescript app (Starter Kits)

src/Illuminate/Foundation/Console/BroadcastingInstallCommand.php

@@ -47,32 +47,45 @@ public function handle()
         // Install channel routes file...
         if (! file_exists($broadcastingRoutesPath = $this->laravel->basePath('routes/channels.php')) || $this->option('force')) {
             $this->components->info("Published 'channels' route file.");
-
             copy(__DIR__.'/stubs/broadcasting-routes.stub', $broadcastingRoutesPath);
         }
 
         $this->uncommentChannelsRoutesFile();
         $this->enableBroadcastServiceProvider();
 
-        // Install bootstrapping...
-        if (! file_exists($echoScriptPath = $this->laravel->resourcePath('js/echo.js'))) {
-            if (! is_dir($directory = $this->laravel->resourcePath('js'))) {
-                mkdir($directory, 0755, true);
+        // We have a specific echo version for React and Vue with Typescript,
+        // so check if this app contains React or Vue with Typescript
+        if ($reactOrVue = $this->appContainsReactOrVueWithTypescript()) {
+            if($reactOrVue === 'react') {
+                $this->installReactTypescriptEcho();
+            } elseif($reactOrVue === 'vue') {
+                $this->installVueTypescriptEcho();
             }
+
+            // Inject Echo configuration for both React and Vue applications
+            $this->injectEchoConfigurationInApp($reactOrVue);
+        } else {
+            // Standard JavaScript implementation
+            if (! file_exists($echoScriptPath = $this->laravel->resourcePath('js/echo.js'))) {
+                if (! is_dir($directory = $this->laravel->resourcePath('js'))) {
+                    mkdir($directory, 0755, true);
+                }
 
-            copy(__DIR__.'/stubs/echo-js.stub', $echoScriptPath);
-        }
-
-        if (file_exists($bootstrapScriptPath = $this->laravel->resourcePath('js/bootstrap.js'))) {
-            $bootstrapScript = file_get_contents(
-                $bootstrapScriptPath
-            );
+                copy(__DIR__.'/stubs/echo-js.stub', $echoScriptPath);
+            }
 
-            if (! str_contains($bootstrapScript, './echo')) {
-                file_put_contents(
-                    $bootstrapScriptPath,
-                    trim($bootstrapScript.PHP_EOL.file_get_contents(__DIR__.'/stubs/echo-bootstrap-js.stub')).PHP_EOL,
+            // Only add the bootstrap import for the standard JS implementation
+            if (file_exists($bootstrapScriptPath = $this->laravel->resourcePath('js/bootstrap.js'))) {
+                $bootstrapScript = file_get_contents(
+                    $bootstrapScriptPath
                 );
+
+                if (! str_contains($bootstrapScript, './echo')) {
+                    file_put_contents(
+                        $bootstrapScriptPath,
+                        trim($bootstrapScript.PHP_EOL.file_get_contents(__DIR__.'/stubs/echo-bootstrap-js.stub')).PHP_EOL,
+                    );
+                }
             }
         }
 
@@ -81,6 +94,27 @@ public function handle()
         $this->installNodeDependencies();
     }
 
+    /**
+     * Detect if the user is using React or Vue with Typescript and then install the corresponding Echo implementation
+     *
+     * @return null | 'react' | 'vue'
+     */
+    protected function appContainsReactOrVueWithTypescript()
+    {
+        $packageJsonPath = $this->laravel->basePath('package.json');
+        if (!file_exists($packageJsonPath)) {
+            return null;
+        }
+        $packageJson = json_decode(file_get_contents($packageJsonPath), true);
+        if (isset($packageJson['dependencies']['react']) || isset($packageJson['dependencies']['vue'])) {
+            // Check if dependencies also contains typescript
+            if (isset($packageJson['dependencies']['typescript'])) {
+                return isset($packageJson['dependencies']['react']) ? 'react' : 'vue';
+            }
+        }
+        return null;
+    }
+
     /**
      * Uncomment the "channels" routes file in the application bootstrap file.
      *
@@ -134,6 +168,122 @@ protected function enableBroadcastServiceProvider()
         }
     }
 
+    /**
+     * Install the React TypeScript Echo implementation.
+     *
+     * @return void
+     */
+    protected function installReactTypescriptEcho()
+    {
+        $hooksDirectory = $this->laravel->resourcePath('js/hooks');
+        $echoScriptPath = $hooksDirectory.'/use-echo.ts';
+
+        if (! file_exists($echoScriptPath)) {
+            // Create the hooks directory if it doesn't exist
+            if (! is_dir($hooksDirectory)) {
+                if (! is_dir($this->laravel->resourcePath('js'))) {
+                    mkdir($this->laravel->resourcePath('js'), 0755, true);
+                }
+                mkdir($hooksDirectory, 0755, true);
+            }
+
+            copy(__DIR__.'/stubs/use-echo-ts.stub', $echoScriptPath);
+            $this->components->info("Created React TypeScript Echo implementation at [resources/js/hooks/use-echo.ts].");
+        }   
+    }
+
+    /**
+     * Install the Vue TypeScript Echo implementation.
+     *
+     * @return void
+     */
+    protected function installVueTypescriptEcho()
+    {
+        $echoScriptPath = $this->laravel->resourcePath('js/composables/useEcho.ts');
+
+        if (! file_exists($echoScriptPath)) {
+            $composablesDirectory = $this->laravel->resourcePath('js/composables');
+
+            if (! is_dir($composablesDirectory)) {
+                if (! is_dir($this->laravel->resourcePath('js'))) {
+                    mkdir($this->laravel->resourcePath('js'), 0755, true);
+                }
+                mkdir($composablesDirectory, 0755, true);
+            }
+
+            copy(__DIR__.'/stubs/useEcho-ts.stub', $echoScriptPath);
+            $this->components->info("Created Vue TypeScript Echo implementation at [resources/js/composables/useEcho.ts].");
+        }
+    }
+
+    /**
+     * Inject Echo configuration into the application's main file.
+     *
+     * @param  string|null  $appType  The application type ('react', 'vue', or null)
+     * @return void
+     */
+    protected function injectEchoConfigurationInApp(string $appType = null)
+    {
+        // If app type is not provided, detect it
+        if ($appType === null) {
+            $appType = $this->appContainsReactOrVueWithTypescript();
+        }
+
+        // Determine file path and import path based on app type
+        if ($appType === 'vue') {
+            $filePath = resource_path('js/app.ts');
+            $importPath = './composables/useEcho';
+            $fileExtension = 'ts';
+        } else { // Default to React
+            $filePath = resource_path('js/app.tsx');
+            $importPath = './hooks/use-echo';
+            $fileExtension = 'tsx';
+        }
+
+        // Check if file exists
+        if (!file_exists($filePath)) {
+            $this->components->warn("Could not find {$filePath}. Echo configuration not added.");
+            return;
+        }
+
+        $contents = file_get_contents($filePath);
+
+        // Prepare Echo configuration code
+        $echoCode = <<<JS
+        import { configureEcho } from '{$importPath}';
+
+        configureEcho({
+            broadcaster: 'reverb',
+            key: import.meta.env.VITE_REVERB_APP_KEY,
+            wsHost: import.meta.env.VITE_REVERB_HOST,
+            wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
+            wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
+            forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
+            enabledTransports: ['ws', 'wss'],
+        });
+        JS;
+
+        // Match all imports
+        preg_match_all('/^import .+;$/m', $contents, $matches);
+
+        if (!empty($matches[0])) {
+            $lastImport = end($matches[0]);
+            $pos = strrpos($contents, $lastImport);
+            if ($pos !== false) {
+                $insertPos = $pos + strlen($lastImport);
+                $newContents = substr($contents, 0, $insertPos) . "\n" . $echoCode . substr($contents, $insertPos);
+                file_put_contents($filePath, $newContents);
+                $this->components->info("Echo configuration added to app.{$fileExtension} after imports.");
+            }
+        } else {
+            // Add the Echo configuration to the top of the file if no import statements are found
+            $newContents = $echoCode . "\n" . $contents;
+            file_put_contents($filePath, $newContents);
+            $this->components->info("Echo configuration added to the top of app.{$fileExtension}.");
+        }
+    }
+
+
     /**
      * Install Laravel Reverb into the application if desired.
      *

src/Illuminate/Foundation/Console/stubs/use-echo-ts.stub

@@ -0,0 +1,158 @@
+import { useEffect, useRef } from 'react';
+import Echo, { EchoOptions } from 'laravel-echo';
+import Pusher from 'pusher-js';
+
+// Define types for Echo channels
+interface Channel {
+  listen(event: string, callback: (payload: any) => void): Channel;
+  stopListening(event: string, callback?: (payload: any) => void): Channel;
+}
+
+interface EchoInstance extends Echo<any> {
+  channel(channel: string): Channel;
+  private(channel: string): Channel;
+  leaveChannel(channel: string): void;
+}
+
+interface ChannelData {
+  count: number;
+  channel: Channel;
+}
+
+interface Channels {
+  [channelName: string]: ChannelData;
+}
+
+// Create a singleton Echo instance
+let echoInstance: EchoInstance | null = null;
+let echoConfig: EchoOptions<any> | null = null;
+
+// Configure Echo with custom options
+export const configureEcho = (config: EchoOptions<any>): void => {
+  echoConfig = config;
+  // Reset the instance if it was already created
+  if (echoInstance) {
+    echoInstance = null;
+  }
+};
+
+// Initialize Echo only once
+const getEchoInstance = (): EchoInstance | null => {
+  if (!echoInstance) {
+    if (!echoConfig) {
+      console.error('Echo has not been configured. Please call configureEcho() with your configuration options before using Echo.');
+      return null;
+    }
+
+    // Temporarily add Pusher to window object for Echo initialization
+    // This is a compromise - we're still avoiding permanent global namespace pollution
+    // by only adding it temporarily during initialization
+    const originalPusher = (window as any).Pusher;
+    (window as any).Pusher = Pusher;
+
+    // Configure Echo with provided config
+    echoInstance = new Echo(echoConfig) as EchoInstance;
+
+    // Restore the original Pusher value to avoid side effects
+    if (originalPusher) {
+      (window as any).Pusher = originalPusher;
+    } else {
+      delete (window as any).Pusher;
+    }
+  }
+  return echoInstance;
+};
+
+// Keep track of all active channels
+const channels: Channels = {};
+
+// Export Echo instance for direct access if needed
+export const echo = (): EchoInstance | null => getEchoInstance();
+
+// Helper functions to interact with Echo
+export const subscribeToChannel = (channelName: string, isPrivate = false): Channel | null => {
+  const instance = getEchoInstance();
+  if (!instance) return null;
+  return isPrivate ? instance.private(channelName) : instance.channel(channelName);
+};
+
+export const leaveChannel = (channelName: string): void => {
+  const instance = getEchoInstance();
+  if (!instance) return;
+  instance.leaveChannel(channelName);
+};
+
+// The main hook for using Echo in React components
+export const useEcho = (
+  channel: string, 
+  event: string | string[], 
+  callback: (payload: any) => void, 
+  dependencies = [], 
+  visibility: 'private' | 'public' = 'private'
+) => {
+  const eventRef = useRef(callback);
+
+  useEffect(() => {
+    // Always use the latest callback
+    eventRef.current = callback;
+
+    const channelName = visibility === 'public' ? channel : `${visibility}-${channel}`;
+    const isPrivate = visibility === 'private';
+
+    // Reuse existing channel subscription or create a new one
+    if (!channels[channelName]) {
+      const channelSubscription = subscribeToChannel(channel, isPrivate);
+      if (!channelSubscription) return;
+
+      channels[channelName] = {
+        count: 1,
+        channel: channelSubscription,
+      };
+    } else {
+      channels[channelName].count += 1;
+    }
+
+    const subscription = channels[channelName].channel;
+
+    const listener = (payload: any) => {
+      eventRef.current(payload);
+    };
+
+    const events = Array.isArray(event) ? event : [event];
+
+    // Subscribe to all events
+    events.forEach((e) => {
+      subscription.listen(e, listener);
+    });
+
+    // Cleanup function
+    return () => {
+      events.forEach((e) => {
+        subscription.stopListening(e, listener);
+      });
+
+      if (channels[channelName]) {
+        channels[channelName].count -= 1;
+        if (channels[channelName].count === 0) {
+          leaveChannel(channelName);
+          delete channels[channelName];
+        }
+      }
+    };
+  }, [...dependencies]); // eslint-disable-line
+
+  // Return the Echo instance for additional control if needed
+  return {
+    echo: getEchoInstance(),
+    leaveChannel: () => {
+      const channelName = visibility === 'public' ? channel : `${visibility}-${channel}`;
+      if (channels[channelName]) {
+        channels[channelName].count -= 1;
+        if (channels[channelName].count === 0) {
+          leaveChannel(channelName);
+          delete channels[channelName];
+        }
+      }
+    }
+  };
+};