feat!: remove vue2 support

foxxyz · Dec 31, 2023 · cd910c0 · cd910c0
1 parent 80c53a8
commit cd910c0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -10,8 +10,8 @@ Dead simple WebSocket communication for both Node.js and in-browser.
 * Automatic reconnections
 * Automatic connection support
 * [Subscription support](#subscriptions)
-* ES7 / Async support
-* [Vue](https://vuejs.org/) plugin support (Vue 3 supported!)
+* Async support
+* [Vue](https://vuejs.org/) plugin support
 * Fully tested
 
 ##### Contents
@@ -129,20 +129,6 @@ client.send('unsubscribe', ['specialMessage', 'anotherAction'])
 
 When creating your app:
 
-##### Vue 2
-
-```javascript
-import { Client } from 'ws-plus'
-
-// Create your client
-const socketClient = new Client('ws://localhost:8082')
-
-// Make socket available to all components
-Vue.use(socketClient, { name: 'ws' })
-```
-
-##### Vue 3
-
 ```javascript
 import { createSocket } from 'ws-plus/vue'
 
@@ -153,7 +139,7 @@ const socketClient = createSocket('ws://localhost:8082')
 app.use(socketClient)
 ```
 
-#### Usage in a Component
+#### Usage in a Component (Options API)
 
 ```javascript
 export default {
@@ -164,28 +150,24 @@ export default {
 }
 ```
 
-#### Using with the Vue 3 Component API
+#### Using in a Component (Composition API)
 
 The [`listen` helper](#listenactions--object-options---name--string-subscribe--boolean-) automatically calls `.on` and `.off` for specified actions when the component is mounted and unmounted. Subscriptions can also be made automatically if desired.
 
 ```javascript
 import { inject } from 'vue'
 import { listen } from 'ws-plus/vue'
 
-export default {
-    setup() {
-        function receive({ ticket }) {
-            console.info(`Ticket received: ${ticket}`)
-        }
+function receive({ ticket }) {
+    console.info(`Ticket received: ${ticket}`)
+}
 
-        listen({
-            'ticket/receive': receive
-        })
+listen({
+    'ticket/receive': receive
+})
 
-        const ws = inject('$ws')
-        ws.send('ticket/request', { data: ... })
-    }
-}
+const ws = inject('$ws')
+ws.send('ticket/request', { data: ... })
 ```
 
 #### Multiple Clients

diff --git a/test/vue-plugin-behavior.test.js b/test/vue-plugin-behavior.test.js
diff --git a/test/vue-plugin.test.js b/test/vue-plugin.test.js
@@ -1,40 +1,22 @@
 import { jest } from '@jest/globals'
 import { JSDOM } from 'jsdom'
 
+import { MockSocket } from './mocks/socket'
+
 // Set up DOM globals before importing any modules that need it
 const dom = new JSDOM('<body><div id="app" /></body>')
 global.window = dom.window
 global.Element = dom.window.Element
 global.SVGElement = dom.window.SVGElement
 global.document = dom.window.document
 global.WebSocket = dom.window.WebSocket
-const { createApp } = await import('vue')
-const { Client, Server } = await import('..')
+const { createApp, watch } = await import('vue')
+const { Server } = await import('..')
 const { createSocket, listen } = await import('../vue.js')
 
 const delay = ms => new Promise(res => setTimeout(res, ms))
 
-describe('Vue 2 Plugin', () => {
-    let MockFramework
-    beforeEach(() => {
-        MockFramework = class {}
-        MockFramework.util = { defineReactive: () => {} }
-    })
-    it('can be installed', () => {
-        const client = new Client('ws://localhost:8888', { autoConnect: false, verbosity: 0 })
-        client.install(MockFramework)
-        const app = new MockFramework()
-        expect(app.$ws).toBe(client)
-    })
-    it('allows overriding global reference name', () => {
-        const client = new Client('ws://localhost:8888', { autoConnect: false, verbosity: 0 })
-        client.install(MockFramework, { name: 'anotherSocket' })
-        const app = new MockFramework()
-        expect(app.$anotherSocket).toBe(client)
-    })
-})
-
-describe('Vue 3 Plugin', () => {
+describe('Vue Plugin', () => {
     let server, app
     afterEach(async() => {
         app.unmount()
@@ -139,4 +121,16 @@ describe('Vue 3 Plugin', () => {
         client2.close()
         await Promise.all([closing, closing2])
     })
+})
+
+describe('Vue Plugin Behavior', () => {
+    it('makes the connected attribute reactive', async() => {
+        global.WebSocket = MockSocket
+        const client = createSocket('ws://localhost:8888')
+        const listener = jest.fn()
+        watch(() => client.connected, listener)
+        await delay(100)
+        expect(client.connected).toBe(true)
+        expect(listener).toHaveBeenCalledWith(true, false, expect.anything())
+    })
 })