Upgrade @anycable/core and use it w/o Action Cable interface

anycable · Apr 2, 2024 · 7b2111f · 7b2111f
1 parent 2c8de92
commit 7b2111f
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 51 deletions.
diff --git a/frontend/controllers/chat_controller.js b/frontend/controllers/chat_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { createChannel } from "../utils/cable";
+import { createCable } from "../utils/cable";
 import { currentUser } from "../utils/current_user";
 import { isPreview as isTurboPreview } from "../utils/turbo";
 
@@ -9,21 +9,16 @@ export default class extends Controller {
   connect() {
     if (isTurboPreview()) return;
 
-    const channel = "ChatChannel";
     const id = this.data.get("id");
-    this.channel = createChannel(
-      { channel, id },
-      {
-        received: (data) => {
-          this.handleMessage(data);
-        },
-      }
-    );
+    const cable = createCable();
+
+    this.channel = cable.subscribeTo("ChatChannel", { id });
+    this.channel.on("message", (data) => this.handleMessage(data));
   }
 
   disconnect() {
     if (this.channel) {
-      this.channel.unsubscribe();
+      this.channel.disconnect();
       delete this.channel;
     }
   }

diff --git a/frontend/controllers/connection_controller.js b/frontend/controllers/connection_controller.js
@@ -13,7 +13,7 @@ export default class extends Controller {
   connect() {
     if (isTurboPreview()) return;
 
-    this.cable = createCable().cable;
+    this.cable = createCable();
 
     this.unbind = [];
 

diff --git a/frontend/controllers/list_controller.js b/frontend/controllers/list_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { createChannel } from "../utils/cable";
+import { createCable } from "../utils/cable";
 import { isPreview as isTurboPreview } from "../utils/turbo";
 import { DELETE, PATCH } from "../utils/api";
 
@@ -9,23 +9,18 @@ export default class extends Controller {
   connect() {
     if (isTurboPreview()) return;
 
-    const channel = "ListChannel";
     const id = this.data.get("id");
     const workspace = this.data.get("workspace");
 
-    this.channel = createChannel(
-      { channel, id, workspace },
-      {
-        received: (data) => {
-          this.handleUpdate(data);
-        },
-      }
-    );
+    const cable = createCable();
+
+    this.channel = cable.subscribeTo("ListChannel", { id, workspace });
+    this.channel.on("message", (data) => this.handleUpdate(data));
   }
 
   disconnect() {
     if (this.channel) {
-      this.channel.unsubscribe();
+      this.channel.disconnect();
       delete this.channel;
     }
   }

diff --git a/frontend/controllers/workspace_controller.js b/frontend/controllers/workspace_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { createChannel } from "../utils/cable";
+import { createCable } from "../utils/cable";
 import { isPreview as isTurboPreview } from "../utils/turbo";
 
 export default class extends Controller {
@@ -8,22 +8,17 @@ export default class extends Controller {
   connect() {
     if (isTurboPreview()) return;
 
-    const channel = "WorkspaceChannel";
     const id = this.data.get("id");
 
-    this.channel = createChannel(
-      { channel, id },
-      {
-        received: (data) => {
-          this.handleUpdate(data);
-        },
-      }
-    );
+    const cable = createCable();
+
+    this.channel = cable.subscribeTo("WorkspaceChannel", { id });
+    this.channel.on("message", (data) => this.handleUpdate(data));
   }
 
   disconnect() {
     if (this.channel) {
-      this.channel.unsubscribe();
+      this.channel.disconnect();
       delete this.channel;
     }
   }

diff --git a/frontend/utils/cable.js b/frontend/utils/cable.js
@@ -1,18 +1,18 @@
-import { createConsumer } from "@anycable/web";
+import { createCable as create } from "@anycable/web";
 
-let consumer;
+let instance;
 
 export const createCable = () => {
-  if (!consumer) {
-    consumer = createConsumer({
+  if (!instance) {
+    instance = create({
       protocol: "actioncable-v1-ext-json",
     });
   }
 
-  return consumer;
+  return instance;
 };
 
 export const createChannel = (...args) => {
-  const consumer = createCable();
-  return consumer.subscriptions.create(...args);
+  const cable = createCable();
+  return cable.subscribeTo(...args);
 };
diff --git a/package.json b/package.json
@@ -2,7 +2,8 @@
   "name": "anycable_rails_demo",
   "private": "true",
   "dependencies": {
-    "@anycable/web": "^0.7.0",
+    "@anycable/core": "^0.8.1",
+    "@anycable/web": "^0.8.0",
     "@hotwired/stimulus": "^3.2.1",
     "@hotwired/turbo-rails": "^7.2.4",
     "@rails/actioncable": "^7.0.4",

diff --git a/yarn.lock b/yarn.lock
@@ -2,19 +2,19 @@
 # yarn lockfile v1
 
 
-"@anycable/core@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@anycable/core/-/core-0.7.0.tgz#8b607b35f82fe8ae996a279c6cc2dbb90e44161a"
-  integrity sha512-S+hlxPapGq7PLN+wHPiBZbQP86nNkS6eFityXqcUCnIvXXumFCq3INUzzFhfZCYLmbwD3r6kbRTYwvJaw0P6WA==
+"@anycable/core@^0.8.0", "@anycable/core@^0.8.1":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@anycable/core/-/core-0.8.2.tgz#518c964047b5b2650c527ea3baafab3b229c8882"
+  integrity sha512-TKgqoLjDteH87jDQklejUGWaV3Ftcb3SRX2QKQXRvxX0oXDc21BiUDl01SAJFQz74BUgm7XMu+kvRrKceCA2sg==
   dependencies:
     nanoevents "^7.0.1"
 
-"@anycable/web@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@anycable/web/-/web-0.7.0.tgz#d74d3c546fc9807d236130e2f24d5928a9e8e394"
-  integrity sha512-v/KESqA7DP8PY2WM9BDpPSB9/4OLdfPFipW4LDl9/5fkOOHIlcwL6so20BoxNQLE4gg3E/e6Ey8UtQgO2Aa2XA==
+"@anycable/web@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@anycable/web/-/web-0.8.0.tgz#923cd575a87194e4047b90ca56f234ba0f16c397"
+  integrity sha512-w6yT0BGoLoaCzNrpT/Inj+AU2cRgWimEQq65t7tG6KBR9kLWyFLQzQ/FULyiExEUSEsWkEwSzYSyB2U/O5mgMw==
   dependencies:
-    "@anycable/core" "^0.7.0"
+    "@anycable/core" "^0.8.0"
 
 "@esbuild/[email protected]":
   version "0.17.5"