Vue 3 composition-API support

[e-tobi]

It would be nice to have a useSocket() to get the $socket within setup(). The basic steps would be:

• declare a TS interface with $subscribe, $unsubscribe etc
• declare an injection symbol and make it available to TS declared as InjectionKey<interface-defined-above>
• declare a function useSocket() (TS return type is interface defined above) - implementation calls inject(symbol-defined-above)
• in install do app.provide(symbol-defined-above, $socket)

I tried to provide a PR, but I fail to get the new exports working, always get a warning export 'useSocket' was not found in 'vue-socket.io-extended' and I have no clue why - this is not my comfort zone.

This is what I added to index.d.ts:

export interface SocketIO {
  client: SocketIOClient.Socket;
  $subscribe: (event: string, fn: Function) => void;
  $unsubscribe: (event: string) => void;
  connected: boolean;
  disconnected: boolean;
}

export declare const SocketKey: InjectionKey<SocketIO>;

export declare function useSocket(): SocketIO;

And plugin.js just has (provided in the export):

const SocketKey = Symbol('$socket');

function useSocket() {
  return inject(SocketKey);
}

And app.provide(SocketKey, $socket); was added to the install function.

May workaround for now is to do this in main.ts of the application using vue-socket.io-extended.

[probil]

Hey @e-tobi Thanks for your effort. I'd like to bring all the goodies of composition API to vue-socket.io-extended.

I tried to provide a PR, but I fail to get the new exports working, always get a warning export 'useSocket' was not found in 'vue-socket.io-extended' and I have no clue why - this is not my comfort zone.

Could you create that PR you've mentioned with the warning anyway? I believe I can help you with it. TS on the other hand is not my strongest side so I need your help

NB: create your branch out of alpha tag, since it already has vue 3 support. I will backport it later to vue 2 + composition api but for the time being it's better to focus on vue 3

[e-tobi]

I've tried again to make this work, but I can't figure this out. The mix of a default export with the plugin install function and the named exports required for this to work (useSocket() and SocketExtensionKey) seems to make things difficult.

PR is: #520 , but it doesn't work this way. Should be enough to get an idea about what I'm trying to do.

[e-tobi]

Ok - stupid me. Just when I was about to give up, the scales fell from my eyes. I totally missed to fix the exports in index.js sigh. It works now, but it breaks some unit tests. I will look into this later.

[e-tobi]

Ok, updated the PR - tests pass now and I've also added tests for the $socket injection via SocketExtensionKey and useSocket().

[TheTimmaeh]

I'd love to see this in alpha. Any update?

[sQuarecoW]

What is the status on this issue?

[fjeddy]

Hellloooooo @probil

[max-feroot]

Sorry due to the war in my country 🇺🇦 I wouldn't able to support the package anytime soon. Thanks for understanding 🙏

[ManiMatter]

Has anybody figured out how to use the $socket in setup()? I'm stuck and created a question on stackoverflow. Now reading this thread not even sure there's a solution with vue-socket.io-extended.. Any pointers appreciated how you've solved it.

https://stackoverflow.com/questions/77493427/vue-socket-io-extended-socket-within-setup-composition-api

Update: I've solved it (without vue-socket.io-extended; will post the answer above)