React/Vue Typescript Hooks

[tnylea]

This PR will add React and Vue typescript hooks. This will make make it easier to work with Echo using the React/Vue Starter Kit or any other application that utilizes React/Vue with Typescript.

To use within a React application, you'll import and use like so:

import { useEcho } from 'laravel-echo/react';

useEcho({
    channel: 'test-channel',
    event: 'test.event',
    callback: (payload) => console.log(payload),
    dependencies: [],
    visibility: 'public'
});

This will also function the same way for Vue applications except that you will import laravel-echo/vue:

import { useEcho } from 'laravel-echo/vue';

useEcho({
    channel: 'test-channel',
    event: 'test.event',
    callback: (payload) => console.log(payload),
    dependencies: [],
    visibility: 'public'
});

Configuring

When you install echo via the install:broadcast command the echo config will automatically be injected into the app.tsx or app.ts file, like so:

import { configureEcho } from 'laravel-echo/vue'; // or 'laravel-echo/react' for react

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'],
});

This PR should go hand in hand with this PR, which will add the correct echo configuration during the install:broadcast command.

[joetannenbaum]

Converting to draft while we review.

[tnylea]

Hey @joetannenbaum, thanks for all the updates and Type improvement. I'll commit it to memory to never use any types 👍 You're much stronger than me on Typescript, so feel free to give me as much advice as possible. I appreciate it 😊

In my latest commit, I've removed the exports for leaveChannel and subscribeToChannel. Each hook/composable exports are configureEcho, echo (instance), and useEcho.

I've also reorganized a little bit so that the types and exports are grouped together in each file. You are right that the Composable does not need a dependencies array, so perhaps we can remove that.

I did want to ask if you think these files should be compiled from .ts to .js or if it's good the way it is. I'm open to hopping on a call to chat more about it tomorrow 👍

Thanks again!