chore: merge url options (#16)

* chore: unify url options

* docs: update info

* chore: ensure consistency in the references to WebSocket

* chore: supply runtime config via websocket key

* test: update test suite

* feat: update readme (#18)

* feat: update readme

* chore: update readme title

Co-authored-by: James George <james@deepsource.io>

Co-authored-by: James George <james@deepsource.io>

* chore: update metadaa

* docs: update info

Co-authored-by: Yash Dave <87606277+yash-deepsource@users.noreply.github.com>

Co-authored-by: Shivam Mishra <77610151+shivam-deepsource@users.noreply.github.com>
Co-authored-by: Yash Dave <87606277+yash-deepsource@users.noreply.github.com>

Author: 3 people

README.md

@@ -1,23 +1,29 @@
-# nuxt-websocket
+<div align="center">
+<br>
+<br>
+  
+  <h1>@deepsource/nuxt-websocket</h1>
 
 [![DeepSource](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket.svg/?label=active+issues&show_trend=true&token=aDA1Tz2a_4FxFsxvu4by_loF)](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket/?ref=repository-badge) [![DeepSource](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket.svg/?label=resolved+issues&show_trend=true&token=aDA1Tz2a_4FxFsxvu4by_loF)](https://deepsource.io/gh/deepsourcelabs/nuxt-websocket/?ref=repository-badge)
 
-> Nuxt.js module for websocket interactions.
+  <p>A tiny Nuxt.js module for WebSocket interactions.</p>
+
+</div>
 
 ## Setup
 
-1. Add `@deepsourcelabs/nuxt-websocket` dependency to your project
+1. Add `@deepsource/nuxt-websocket` dependency to your project.
 
 ```bash
-yarn add @deepsourcelabs/nuxt-websocket # or npm install @deepsourcelabs/nuxt-websocket
+yarn add @deepsource/nuxt-websocket # or npm install @deepsource/nuxt-websocket
 ```
 
-2. Add `@deepsourcelabs/nuxt-websocket` to the `modules` section of `nuxt.config.js`
+2. Add `@deepsource/nuxt-websocket` to the `modules` section of `nuxt.config.js`.
 
 ```js
 {
   modules: [
-    '@deepsourcelabs/nuxt-websocket',
+    '@deepsource/nuxt-websocket',
   ],
   websocket: {
     // module options
@@ -27,44 +33,35 @@ yarn add @deepsourcelabs/nuxt-websocket # or npm install @deepsourcelabs/nuxt-we
 
 ## Options
 
-You can pass different options using the `websocket` property in your `nuxt.config.js`:
+You can pass different options using the `websocket` property in your `nuxt.config.js`.
 
 ```js
 // nuxt.config.js
 export default {
   websocket: {
-    // module options
+    url: 'wss://echo.websocket.events/'
+    reconnectInterval: 1000
   }
 };
 ```
 
-### `urlForDev`
-
-- Default: `wss://echo.websocket.events/`
-
-Defines the websocket URL to connect for local development.
-
-### `urlForProd`
-
-Defines the websocket URL to connect for production.
-
-### `reconnectInterval`
-
-- Default: `1000`
-
-Defines the time interval after which a reconnection attempt takes place for a close event that isn't normal (code !== 1000). It should be less than 3s.
+| Parameter           | Default | Description                                                                                                    |
+| ------------------- | ------- | -------------------------------------------------------------------------------------------------------------- |
+| `url`               | -       | WebSocket URL to connect                                                                                       |
+| `reconnectInterval` | 1000    | The time interval after which a reconnection attempt takes place for a close event. It should be less than 3s. |
 
 ### Runtime Config
 
-URL's for dev and prod supplied via runtime config takes priority:-
+You can also provide the URL via [runtime config](https://nuxtjs.org/docs/configuration-glossary/configuration-runtime-config/). It always takes precedence over the URL provided via options.
 
 ```js
 // nuxt.config.js
 export default {
   // Via Runtime config
   publicRuntimeConfig: {
-    webSocketUrlForDev: process.env.WEBSOCKET_URL_FOR_DEV,
-    webSocketUrlForProd: process.env.WEBSOCKET_URL_FOR_PROD
+    websocket: {
+      url: process.env.WEBSOCKET_URL
+    }
   }
 };
 ```
@@ -78,12 +75,12 @@ The following two plugins are injected into the Vue instance and are accessible
 
 ### `$socket`
 
-Defines a global event bus.
+It's a Vue instance that's used as an event bus.
 
 ```js
 mounted() {
   this.$socket.$on('socket', (data) => {
-    console.log(`got ${data} from websocket`);
+    console.log(`got ${data} from WebSocket`);
   });
 }
 
@@ -100,7 +97,7 @@ The WebSocketManager instance has access to the following methods:-
 
 #### `connect(): void`
 
-Establishes websocket connection. It defines handlers for message, close and error events.
+Establishes WebSocket connection. It defines handlers for message, close and error events.
 
 ```js
 this.$socketManager.connect();
@@ -110,7 +107,7 @@ this.$socketManager.connect();
 
 #### `ready(): Promise<void>`
 
-Returns a promise that resolves straightaway if the websocket connection is open. Or else, waits until the open event is fired.
+Returns a promise that resolves straightaway if the WebSocket connection is open. Or else, waits until the open event is fired.
 
 ```js
 await this.$socketManager.ready();
@@ -120,7 +117,7 @@ await this.$socketManager.ready();
 
 #### `send (message: string | Record<string, unknown>): Promise<void>`
 
-Waits for the websocket connection to be open if not already and transmits the data received.
+Waits for the WebSocket connection to be open if not already and transmits the data received.
 
 ```js
 await this.$socketManager.send({ event: "socket", data: "Hello world" });
@@ -134,7 +131,7 @@ Closes the WebSocket connection, optionally using code as the the WebSocket conn
 this.$socketManager.close();
 ```
 
-> The [onmessage](https://github.com/deepsourcelabs/nuxt-websocket/blob/main/src/templates/WebSocketManager.ts#L38-L45) handler expects data received from the server as either a string or an object of the shape `{ event: string, data: string }`.
+> The [message event handler](https://github.com/deepsourcelabs/nuxt-websocket/blob/main/src/templates/WebSocketManager.ts#L39-L46) expects data received from the server as either a string or an object of the shape `{ event: string, data: string }`.
 
 ```js
 // Data received of the type string.
@@ -147,6 +144,8 @@ this.$socket.on("message", () => {});
 this.$socket.on("socket", () => {});
 ```
 
+> The [close event handler](https://github.com/deepsourcelabs/nuxt-websocket/blob/main/src/templates/WebSocketManager.ts#L48-L64) attempts reconnection for a close event that is not normal ([connection close code](https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent/code) other than 1000).
+
 ## Development
 
 1. Clone this repository.

example/nuxt.config.js

@@ -1,7 +1,4 @@
 export default {
   buildModules: ['@nuxtjs/tailwindcss'],
-  modules: ['@nuxt/typescript-build', '../src/module.ts'],
-  websocket: {
-    urlForProd: 'wss://sockets.deepsource.io/'
-  }
+  modules: ['@nuxt/typescript-build', '../src/module.ts']
 }

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@deepsourcelabs/nuxt-websocket",
+  "name": "@deepsource/nuxt-websocket",
   "version": "0.0.0",
-  "description": "Nuxt.js module for websocket interactions.",
+  "description": "A tiny Nuxt.js module for WebSocket interactions.",
   "keywords": [
     "nuxt",
     "module",

src/templates/WebSocketManager.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 /**
- * The WebSocketManager class that defines methods for websocket interaction.
+ * The WebSocketManager class that defines methods for WebSocket interaction.
  */
 export default class WebSocketManager {
   url: string;
@@ -13,7 +13,7 @@ export default class WebSocketManager {
    * Constructor function for the WebSocketManager class.
    * Initializes properties and invokes connect method.
    *
-   * @param {string} url The websocket URL to connect.
+   * @param {string} url The WebSocket URL to connect.
    * @param {number} reconnectInterval Time in ms to reconnect.
    * @returns {WebSocketManager} The WebSocketManager instance.
    */
@@ -71,7 +71,7 @@ export default class WebSocketManager {
   }
 
   /**
-   * Ensures the websocket connection is open.
+   * Ensures the WebSocket connection is open.
    *
    * @returns {Promise<void>} A promise that resolves with no return value straightaway if the WebSocket connection is open.
    * Or else, waits until the open event is fired.
@@ -103,7 +103,7 @@ export default class WebSocketManager {
   }
 
   /**
-   * Closes the websocket connection.
+   * Closes the WebSocket connection.
    *
    * @param {number | undefined} [code] The connection close code.
    * @param {string | undefined} [reason] The connection close reason.

src/templates/plugin.ts

@@ -8,25 +8,22 @@ import WebSocketManager from './WebSocketManager'
 
 // mounted() {
 //   this.$socket.$on(<event-name>, (data) => {
-//     console.log(`got ${data} from websocket`)
+//     console.log(`got ${data} from WebSocket`)
 //   })
 // }
 //
 // Sending message
 // this.$socketManager.send({ event: 'socket', data: 'Hello' })
 
 const reconnectInterval = Number('<%= options.reconnectInterval %>') || 1000
-const urlForProdFromOptions = '<%= options.urlForProd %>'
-const urlForDevFromOptions = '<%= options.urlForDev %>'
-
+const urlFromOptions = '<%= options.url %>'
 export default ({ app }: { app: NuxtAppOptions }, inject: Inject): void => {
+  /* istanbul ignore next */
+  const runtimeConfig = (app.$config && app.$config.websocket) || {}
+
   /* istanbul ignore next */
   const url =
-  process.env.NODE_ENV === 'development'
-    ? app.$config.webSocketUrlForDev ||
-        urlForDevFromOptions ||
-        'wss://echo.websocket.events/'
-    : app.$config.webSocketUrlForProd || urlForProdFromOptions
+    runtimeConfig.url || urlFromOptions || 'wss://echo.websocket.events/'
 
   const emitter = new Vue()
   const manager = new WebSocketManager(url, emitter, reconnectInterval)

test/module.test.ts

@@ -1,8 +1,4 @@
-import {
-  expectModuleToBeCalledWith,
-  getNuxt,
-  setupTest
-} from '@nuxt/test-utils'
+import { expectModuleToBeCalledWith, setupTest } from '@nuxt/test-utils'
 
 describe('module', () => {
   setupTest({
@@ -14,15 +10,15 @@ describe('module', () => {
     expectModuleToBeCalledWith('addPlugin', {
       src: 'src/templates/plugin.ts',
       fileName: 'nuxt-websocket/websocket.client.ts',
-      options: getNuxt().options.websocket
+      options: {}
     })
   })
 
   test('should render the template', () => {
     expectModuleToBeCalledWith('addTemplate', {
       src: 'src/templates/WebSocketManager.ts',
       fileName: 'nuxt-websocket/WebSocketManager.ts',
-      options: getNuxt().options.websocket
+      options: {}
     })
   })
 })

test/plugin.test.ts

@@ -7,18 +7,16 @@ import plugin from '../src/templates/plugin'
 const ctx = {
   app: {
     $config: {
-      webSocketUrlForDev: 'wss://echo.websocket.events/'
+      websocket: {
+        url: 'wss://echo.websocket.events/'
+      }
     }
   } as NuxtAppOptions
 }
 const inject: jest.MockedFunction<Inject> = jest.fn()
 
 describe('plugin', () => {
   test('injects socket and socketManager plugins', () => {
-    Object.defineProperty(process.env, 'NODE_ENV', {
-      value: 'development'
-    })
-
     // Invoke plugin function.
     plugin(ctx, inject)