Improvements

.babelrc

@@ -1,10 +1,10 @@
 {
-  "presets": ["@babel/preset-env"],
-  "ignore": ["node_modules"],
-  "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-classes"
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "ignore": [
+    "node_modules"
   ],
   "sourceMaps": true,
   "retainLines": true
-}
+}

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: CI
+on:
+  push:
+    branches: master
+  pull_request:
+    branches: master
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        uses: borales/[email protected]
+        with:
+          cmd: install
+
+      - name: Run tests
+        run: yarn test

.gitignore

@@ -1,24 +1,11 @@
 .DS_Store
 node_modules
-coverage
-# dist
 
-# local env files
-.env.local
-.env.*.local
-*.map
 
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-package-lock.json
 
 # Editor directories and files
-.bitmap
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
+.vscode

.npmignore

@@ -2,7 +2,6 @@
 src/
 tests/
 coverage/
-.travis.yml
 .babelrc
 node_modules/
 npm-debug.log*

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://travis-ci.org/mclintprojects/actioncable-vue"><img src="https://travis-ci.org/mclintprojects/actioncable-vue.svg?branch=master" /></a>
+  <a href="https://github.com/mclintprojects/actioncable-vue/"><img src="https://github.com/mclintprojects/actioncable-vue/actions/workflows/test.yml/badge.svg" /></a>
   <img alt="Last Commit" src="https://badgen.net/github/last-commit/mclintprojects/actioncable-vue" />
   <img alt="All Contributors Count" src="https://img.shields.io/github/contributors/mclintprojects/actioncable-vue"/>
   <a href="https://www.npmjs.com/package/actioncable-vue"><img src="https://img.shields.io/npm/v/actioncable-vue.svg"/></a>
@@ -50,6 +50,7 @@ const actionCableVueOptions = {
   debugLevel: "error",
   connectionUrl: "ws://localhost:5000/api/cable",
   connectImmediately: true,
+  unsubscribeOnUnmount: true,
 };
 
 createApp(App)
@@ -59,13 +60,14 @@ createApp(App)
   .mount("#app");
 ```
 
-| **Parameters**     | **Type**        | **Default** | **Required** | **Description**                                                                                                                                  |
-| ------------------ | --------------- | ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| debug              | Boolean         | `false`     | Optional     | Enable logging for debug                                                                                                                         |
-| debugLevel         | String          | `error`     | Optional     | Debug level required for logging. Either `info`, `error`, or `all`                                                                               |
-| connectionUrl      | String/Function | `null`      | Optional     | ActionCable websocket server url. Omit it for the [default behavior](https://guides.rubyonrails.org/action_cable_overview.html#connect-consumer) |
-| connectImmediately | Boolean         | `true`      | Optional     | ActionCable connects to your server immediately. If false, ActionCable connects on the first subscription.                                       |
-| store              | Object          | null        | Optional     | Vuex store                                                                                                                                       |
+| **Parameters**       | **Type**        | **Default** | **Required** | **Description**                                                                                                                                  |
+| ---------------------| --------------- | ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| debug                | Boolean         | `false`     | Optional     | Enable logging for debug                                                                                                                         |
+| debugLevel           | String          | `error`     | Optional     | Debug level required for logging. Either `info`, `error`, or `all`                                                                               |
+| connectionUrl        | String/Function | `null`      | Optional     | ActionCable websocket server url. Omit it for the [default behavior](https://guides.rubyonrails.org/action_cable_overview.html#connect-consumer) |
+| connectImmediately   | Boolean         | `true`      | Optional     | ActionCable connects to your server immediately. If false, ActionCable connects on the first subscription.                                       |
+| unsubscribeOnUnmount | Boolean         | `true`      | Optional     | Unsubscribe from channels when component is unmounted.                                                                                           |
+| store                | Object          | null        | Optional     | Vuex store                                                                                                                                       |
 
 #### Table of content
 
@@ -89,7 +91,12 @@ If you'd like to donate to support the continued development and maintenance of
 
 #### 🌈 Component Level Usage
 
-If you want to listen to channel events from your Vue component, you need to either add a `channels` object in the Vue component, or if you're using `vue-class-component` define a `channels` property. Each defined object in `channels` will start to receive events provided you subscribe correctly.
+If you want to listen to channel events from your Vue component:
+1. You need to either add a `channels` object in the Vue component
+2. If you're using `vue-class-component` define a `channels` property.
+3. If you're using Vue 3 `defineComponent` define a `channels` property.
+
+Each defined object in `channels` will start to receive events provided you subscribe correctly.
 
 ```javascript
 new Vue({
@@ -165,6 +172,34 @@ export default class ChatComponent extends Vue {
 }
 ```
 
+Alternative definition for Vue 3 `defineComponent` users.
+
+```typescript
+import { onMounted } from 'vue';
+
+export default defineComponent({
+  channels: {
+    ChatChannel: {
+      connected() {
+        console.log('connected');
+      },
+      rejected() {
+        console.log('rejected');
+      },
+      received(data) {},
+      disconnected() {},
+    },
+  },
+  setup() {
+    onMounted(() => {
+      this.$cable.subscribe({
+        channel: "ChatChannel",
+      });
+    });
+  },
+});
+```
+
 #### ✨ Subscriptions
 
 ###### 1. Subscribing to a channel

jest.setup.js

@@ -0,0 +1 @@
+global.self = global;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "actioncable-vue",
-  "version": "2.5.1",
+  "version": "3.0.0",
   "description": "A Vue plugin that makes integrating ActionCable easy.",
   "main": "dist/actioncablevue.js",
   "keywords": [
@@ -13,17 +13,13 @@
     "websocket"
   ],
   "scripts": {
-    "prepare": "husky install",
-    "build": "webpack --mode=production --progress --hide-modules",
+    "build": "webpack --mode=production",
     "commit-build": "git add . && git commit -m \"updated lib\"",
     "publish-minor": "npm run build && npm run commit-build && npm version minor && npm publish",
     "publish-patch": "npm run build && npm run commit-build && npm version patch && npm publish",
     "publish-major": "npm run build && npm run commit-build && npm version major && npm publish",
     "test": "cross-env VUE_VER=3 jest",
-    "test-vue2": "cross-env VUE_VER=2 jest",
-    "format:fix": "prettier --write ./**/*.{js,css,md,vue,ts,json}",
-    "lint:fix": "eslint --fix ./**/*.{js,vue,ts}",
-    "lint-staged": "lint-staged"
+    "test-vue2": "cross-env VUE_VER=2 jest"
   },
   "files": [
     "dist/*.js",
@@ -41,42 +37,27 @@
   },
   "homepage": "https://github.com/mclintprojects/actioncable-vue#readme",
   "dependencies": {
-    "@rails/actioncable": "^6.0.2",
+    "@rails/actioncable": "^7.2.100",
     "@types/actioncable": "^5.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-transform-classes": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
-    "@vue/test-utils": "^1.0.0-beta.28",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.4",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-class-properties": "^7.25.4",
+    "@babel/plugin-transform-classes": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
     "cross-env": "^7.0.3",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^7.16.0",
-    "husky": "^7.0.2",
-    "jest": "^25.1.0",
-    "lint-staged": "^11.1.2",
-    "prettier": "^2.3.2",
+    "jest": "^29.7.0",
     "typescript": "^4.3.5",
     "vue": "^3.0.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
   },
   "jest": {
-    "testURL": "http://localhost/"
-  },
-  "lint-staged": {
-    "*.{js,vue}": "eslint --fix",
-    "*.{js,css,md,vue,ts,json}": "prettier --write"
+    "testURL": "http://localhost/",
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ]
   }
 }