Update README.md (#327)

Add type declarations for optional options as it throws error.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,25 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,17 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

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>Vue-Socket.io is a socket.io integration for Vuejs, easy to use, supporting Vuex and component level socket consumer managements<p>
+<p align="center">
+<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>
@@ -58,6 +62,7 @@ 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
 
@@ -89,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({
@@ -122,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>
 

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,7 +1,7 @@
 {
   "name": "vue-socket.io",
   "author": "Metin Seylan <metinsyln@gmail.com>",
-  "version": "3.0.7",
+  "version": "3.0.10",
   "description": "socket.io implementation for Vue.js and Vuex",
   "main": "dist/vue-socketio.js",
   "scripts": {

src/index.js

@@ -28,8 +28,16 @@ export default class VueSocketIO {
      */
     install(Vue){
 
-        Vue.prototype.$socket = this.io;
-        Vue.prototype.$vueSocketIo = this;
+        const version = Number(Vue.version.split('.')[0])
+
+        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');