Update README.md (#327)

Add type declarations for optional options as it throws error.

README.md

@@ -12,13 +12,17 @@
   <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/npm/l/vue-socket.io.svg"/></a>
   <a href="https://github.com/MetinSeylan/Vue-Socket.io/"><img src="https://img.shields.io/github/stars/MetinSeylan/Vue-Socket.io.svg"/></a>
 </p>
-
+<p align="center">
-<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
+<a href="https://www.patreon.com/MetinSeylan">
+	<img alt="Patreon" src="https://c5.patreon.com/external/logo/become_a_patron_button.png" height="50" />
+</a>
+</p>
+<p>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements.<p>
 
 ###### Demo
 - <a href="http://metinseylan.com/vuesocketio/" target="_blank">Chat Application</a>
 - <a href="http://metinseylan.com" target="_blank">Car Tracking Application</a>
-
+<p>You can also check my other npm library <a href="https://github.com/MetinSeylan/Nestjs-OpenTelemetry">Nestjs OpenTelemetry</a></p>
 <p>
 are you looking for old documentation? <a href="https://github.com/MetinSeylan/Vue-Socket.io/blob/master/docs/OLD_README.md">it's here</a>
 </p>
@@ -27,7 +31,7 @@ are you looking for old documentation? <a href="https://github.com/MetinSeylan/V
 ``` bash
 npm install vue-socket.io --save
 ```
-
+##### Using Connection String
 ``` javascript
 import Vue from 'vue'
 import store from './store'
@@ -41,7 +45,8 @@ Vue.use(new VueSocketIO({
         store,
         actionPrefix: 'SOCKET_',
         mutationPrefix: 'SOCKET_'
-    }
+    },
+    options: { path: "/my-app/" } //Optional options
 }))
 
 new Vue({
@@ -51,6 +56,34 @@ new Vue({
 }).$mount('#app')
 ```
 
+##### Using socket.io-client Instance
+``` javascript
+import Vue from 'vue'
+import store from './store'
+import App from './App.vue'
+import VueSocketIO from 'vue-socket.io'
+import SocketIO from 'socket.io-client'
+
+const options = { path: '/my-app/' }; //Options object to pass into SocketIO
+
+Vue.use(new VueSocketIO({
+    debug: true,
+    connection: SocketIO('http://metinseylan.com:1992', options), //options object is Optional
+    vuex: {
+      store,
+      actionPrefix: "SOCKET_",
+      mutationPrefix: "SOCKET_"
+    }
+  })
+);
+
+new Vue({
+    router,
+    store,
+    render: h => h(App)
+}).$mount('#app')
+```
+
 **Parameters**|**Type's**|**Default**|**Required**|**Description**
 -----|-----|-----|-----|-----
 debug|Boolean|`false`|Optional|Enable logging for debug
@@ -61,7 +94,7 @@ vuex.mutationPrefix|String |`null`|Optional|Prefix for emitting server side vuex
 
 #### 🌈 Component Level Usage
 
-<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component, and every function will start to listen events, depends on object key</p>
+<p>If you want to listen socket events from component side, you need to add `sockets` object in Vue component. After that every function will start to listen events, depends on object key</p>
 
 ``` javascript
 new Vue({
@@ -94,6 +127,35 @@ this.sockets.subscribe('EVENT_NAME', (data) => {
 this.sockets.unsubscribe('EVENT_NAME');
 ```
 
+##### Defining handlers for events with special characters
+
+<p>If you want to handle 'kebab-case', or "event with space inside it" events, then you have to define it via the following way</p>
+
+``` javascript
+export default {
+  name: 'Test',
+  sockets: {
+    connect: function () {
+      console.log('socket to notification channel connected')
+    },
+  },
+
+  data () {
+    return {
+      something: [
+         // ... something here for the data if you need.
+      ]
+    }
+  },
+
+  mounted () {
+    this.$socket.subscribe("kebab-case", function(data) {
+        console.log("This event was fired by eg. sio.emit('kebab-case')", data)
+    })
+  }
+}
+```
+
 #### 🏆 Vuex Integration
 <p>When you set store parameter in installation, `Vue-Socket.io` will start sending events to Vuex store. If you set both prefix for vuex, you can use `actions` and `mutations` at the same time. But, best way to use is just `actions`</p>
 
@@ -118,6 +180,11 @@ export default new Vuex.Store({
 })
 ```
 
+## Stargazers over time
+
+[![Stargazers over time](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io.svg)](https://starcharts.herokuapp.com/MetinSeylan/Vue-Socket.io)
+   
+
 <p align="center">
     <a href="https://github.com/MetinSeylan/Vue-Socket.io" target="_blank">
     <img src="https://media.giphy.com/media/11jlnltQgUi2mQ/giphy.gif">

index.d.ts

@@ -0,0 +1,63 @@
+import SocketIOClient from "socket.io-client";
+import {
+    DefaultComputed,
+    DefaultData,
+    DefaultMethods,
+    DefaultProps,
+    PropsDefinition,
+} from "vue/types/options";
+import { Vue } from "vue/types/vue";
+import { PluginFunction, PluginObject } from "vue";
+import { Store } from "vuex";
+
+interface socketHandler<T> {
+    (this: T, ...args: any[]): void
+}
+
+interface Sockets<V> {
+    [key: string]: socketHandler<V>
+}
+
+declare module 'vue/types/vue' {
+    interface Vue {
+        $socket: SocketIOClient.Socket,
+        sockets: {
+            subscribe(eventName: string, handler: socketHandler<Vue>): void,
+            unsubscribe(eventName: string): void,
+        }
+    }
+}
+
+declare module 'vue/types/options' {
+    interface ComponentOptions<
+        V extends Vue,
+        Data=DefaultData<V>,
+        Methods=DefaultMethods<V>,
+        Computed=DefaultComputed,
+        PropsDef=PropsDefinition<DefaultProps>,
+        Props=DefaultProps> {
+        sockets?: Sockets<V>
+    }
+}
+
+export interface VueSocketOptions {
+    debug?: boolean;
+    connection: string | SocketIOClient.Socket,
+    vuex?: {
+        store?: Store<any>,
+        actionPrefix?: string,
+        mutationPrefix?: string,
+        options?: {
+            useConnectionNamespace?: boolean
+        }
+    },
+        // type declarations for optional options
+    options?:{
+        path?: string;
+    }
+}
+
+export default class VueSocketIO<T> implements PluginObject<T> {
+    constructor (options: VueSocketOptions);
+    install: PluginFunction<T>
+}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "vue-socket.io",
   "author": "Metin Seylan <metinsyln@gmail.com>",
-  "version": "3.0.3",
+  "version": "3.0.10",
-  "description": "socket.io implemantation for vuejs and vuex",
+  "description": "socket.io implementation for Vue.js and Vuex",
   "main": "dist/vue-socketio.js",
   "scripts": {
     "build": "webpack --mode=production --progress --hide-modules"

src/emitter.js

@@ -77,7 +77,9 @@ export default class EventEmitter{
 
         }
 
-        this.dispatchStore(event, args);
+        if(event !== 'ping' && event !== 'pong') {
+            this.dispatchStore(event, args);
+        }
 
     }
 
@@ -91,11 +93,13 @@ export default class EventEmitter{
 
         if(this.store && this.store._actions){
 
+            let prefixed_event = this.actionPrefix + event;
+
             for (let key in this.store._actions) {
 
                 let action = key.split('/').pop();
 
-                if(action === this.actionPrefix+event) {
+                if(action === prefixed_event) {
 
                     Logger.info(`Dispatching Action: ${key}, Data:`, args);
 
@@ -107,11 +111,13 @@ export default class EventEmitter{
 
             if(this.mutationPrefix) {
 
+                let prefixed_event = this.mutationPrefix + event;
+
                 for (let key in this.store._mutations) {
 
                     let mutation = key.split('/').pop();
 
-                    if(mutation === this.mutationPrefix+event) {
+                    if(mutation === prefixed_event) {
 
                         Logger.info(`Commiting Mutation: ${key}, Data:`, args);
 

src/index.js

@@ -1,6 +1,6 @@
 import Mixin from './mixin';
 import Logger from './logger';
-import Listenler from './listenler';
+import Listener from './listener';
 import Emitter from './emitter';
 import SocketIO from 'socket.io-client';
 
@@ -11,24 +11,33 @@ export default class VueSocketIO {
      * @param io
      * @param vuex
      * @param debug
+     * @param options
      */
-    constructor({connection, vuex, debug}){
+    constructor({connection, vuex, debug, options}){
 
         Logger.debug = debug;
-        this.io = this.connect(connection);
+        this.io = this.connect(connection, options);
         this.emitter = new Emitter(vuex);
-        this.listener = new Listenler(this.io, this.emitter);
+        this.listener = new Listener(this.io, this.emitter);
 
     }
 
     /**
-     * Vuejs entrypoint
+     * Vue.js entry point
      * @param Vue
      */
     install(Vue){
 
-        Vue.prototype.$socket = this.io;
+        const version = Number(Vue.version.split('.')[0])
-        Vue.prototype.$vueSocketIo = this;
+
+        if (version >= 3) {
+            Vue.config.globalProperties.$socket = this.io;
+            Vue.config.globalProperties.$vueSocketIo = this;
+        } else {
+            Vue.prototype.$socket = this.io;
+            Vue.prototype.$vueSocketIo = this;
+        }
+
         Vue.mixin(Mixin);
 
         Logger.info('Vue-Socket.io plugin enabled');
@@ -37,10 +46,11 @@ export default class VueSocketIO {
 
 
     /**
-     * registering socketio instance
+     * registering SocketIO instance
      * @param connection
+     * @param options
      */
-    connect(connection){
+    connect(connection, options){
 
         if(connection && typeof connection === 'object'){
 
@@ -52,7 +62,7 @@ export default class VueSocketIO {
 
             Logger.info('Received connection string');
 
-            return this.io = SocketIO(connection);
+            return this.io = SocketIO(connection, options);
 
         } else {
 

src/listener.js

@@ -1,5 +1,5 @@
 
-export default class VueSocketIOListenler {
+export default class VueSocketIOListener {
 
     /**
      * socket.io-client reserved event keywords
@@ -38,7 +38,7 @@ export default class VueSocketIOListenler {
 
             this.onEvent(event, args)
         };
-        VueSocketIOListenler.staticEvents.forEach(event => this.io.on(event, () => this.onEvent(event)))
+        VueSocketIOListener.staticEvents.forEach(event => this.io.on(event, args => this.onEvent(event, args)))
     }
 
     /**

src/mixin.js

@@ -1,9 +1,26 @@
 export default {
 
     /**
-     * lets collect all socket callback functions then register
+     *  Assign runtime callbacks
      */
-    created(){
+    beforeCreate(){
+
+        if(!this.sockets) this.sockets = {};
+
+        this.sockets.subscribe = (event, callback) => {
+            this.$vueSocketIo.emitter.addListener(event, callback, this);
+        };
+
+        this.sockets.unsubscribe = (event) => {
+            this.$vueSocketIo.emitter.removeListener(event, this);
+        };
+
+    },
+
+    /**
+     * Register all socket events
+     */
+    mounted(){
 
         if(this.$options.sockets){
 
@@ -15,19 +32,6 @@ export default {
 
             });
 
-            this.sockets = {
-                subscribe: (event, callback) => {
-
-                    this.$vueSocketIo.emitter.addListener(event, callback, this);
-
-                },
-                unsubscribe: (event) => {
-
-                    this.$vueSocketIo.emitter.removeListener(event, this);
-
-                }
-            };
-
         }
 
     },