complain when trying to bind an element to a second view (#3805)

This could happen when a project's app.js is loaded twice.
See #3721.
See https://elixirforum.com/t/how-do-you-debug-state-changes-using-liveviews/70044/21.

Author: SteffenDE

assets/js/phoenix_live_view/view.js

@@ -167,6 +167,23 @@ export default class View {
     this.parent = parentView;
     this.root = parentView ? parentView.root : this;
     this.el = el;
+    // see https://github.com/phoenixframework/phoenix_live_view/pull/3721
+    // check if the element is already bound to a view
+    const boundView = DOM.private(this.el, "view");
+    if (boundView !== undefined && boundView.isDead !== true) {
+      logError(
+        `The DOM element for this view has already been bound to a view.
+        
+        An element can only ever be associated with a single view!
+        Please ensure that you are not trying to initialize multiple LiveSockets on the same page.
+        This could happen if you're accidentally trying to render your root layout more than once.
+        Ensure that the template set on the LiveView is different than the root layout.
+      `,
+        { view: boundView },
+      );
+      throw new Error("Cannot bind multiple views to the same DOM element.");
+    }
+    // bind the view to the element
     DOM.putPrivate(this.el, "view", this);
     this.id = this.el.id;
     this.ref = 0;
@@ -252,6 +269,7 @@ export default class View {
   destroy(callback = function () {}) {
     this.destroyAllChildren();
     this.destroyed = true;
+    DOM.deletePrivate(this.el, "view");
     delete this.root.children[this.id];
     if (this.parent) {
       delete this.root.children[this.parent.id][this.id];

assets/test/live_socket_test.ts

@@ -26,16 +26,23 @@ const prepareLiveViewDOM = (document) => {
 };
 
 describe("LiveSocket", () => {
+  let liveSocket;
+
   beforeEach(() => {
     prepareLiveViewDOM(global.document);
   });
 
+  afterEach(() => {
+    liveSocket && liveSocket.destroyAllViews();
+    liveSocket = null;
+  });
+
   afterAll(() => {
     global.document.body.innerHTML = "";
   });
 
   test("sets defaults", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
     expect(liveSocket.socket).toBeDefined();
     expect(liveSocket.socket.onOpen).toBeDefined();
     expect(liveSocket.viewLogger).toBeUndefined();
@@ -45,7 +52,7 @@ describe("LiveSocket", () => {
   });
 
   test("sets defaults with socket", async () => {
-    const liveSocket = new LiveSocket(new Socket("//example.org/chat"), Socket);
+    liveSocket = new LiveSocket(new Socket("//example.org/chat"), Socket);
     expect(liveSocket.socket).toBeDefined();
     expect(liveSocket.socket.onOpen).toBeDefined();
     expect(liveSocket.unloaded).toBe(false);
@@ -54,27 +61,28 @@ describe("LiveSocket", () => {
   });
 
   test("viewLogger", async () => {
-    const viewLogger = (view, kind, msg, obj) => {
-      expect(view.id).toBe("container1");
-      expect(kind).toBe("updated");
-      expect(msg).toBe("");
-      expect(obj).toBe('"<div>"');
-    };
-    const liveSocket = new LiveSocket("/live", Socket, { viewLogger });
+    const viewLogger = jest.fn();
+    liveSocket = new LiveSocket("/live", Socket, { viewLogger });
     expect(liveSocket.viewLogger).toBe(viewLogger);
     liveSocket.connect();
     const view = liveSocket.getViewByEl(container(1));
     liveSocket.log(view, "updated", () => ["", JSON.stringify("<div>")]);
+    expect(viewLogger).toHaveBeenCalledWith(
+      view,
+      "updated",
+      "",
+      JSON.stringify("<div>"),
+    );
   });
 
   test("connect", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
     const _socket = liveSocket.connect();
     expect(liveSocket.getViewByEl(container(1))).toBeDefined();
   });
 
   test("disconnect", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     liveSocket.connect();
     liveSocket.disconnect();
@@ -83,7 +91,7 @@ describe("LiveSocket", () => {
   });
 
   test("channel", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     liveSocket.connect();
     const channel = liveSocket.channel("lv:def456", function () {
@@ -94,7 +102,7 @@ describe("LiveSocket", () => {
   });
 
   test("getViewByEl", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     liveSocket.connect();
 
@@ -113,7 +121,7 @@ describe("LiveSocket", () => {
     `;
     document.body.appendChild(secondLiveView);
 
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
     liveSocket.connect();
 
     const el = container(1);
@@ -129,27 +137,27 @@ describe("LiveSocket", () => {
   });
 
   test("binding", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     expect(liveSocket.binding("value")).toBe("phx-value");
   });
 
   test("getBindingPrefix", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     expect(liveSocket.getBindingPrefix()).toEqual("phx-");
   });
 
   test("getBindingPrefix custom", async () => {
-    const liveSocket = new LiveSocket("/live", Socket, {
+    liveSocket = new LiveSocket("/live", Socket, {
       bindingPrefix: "company-",
     });
 
     expect(liveSocket.getBindingPrefix()).toEqual("company-");
   });
 
   test("owner", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
     liveSocket.connect();
 
     const _view = liveSocket.getViewByEl(container(1));
@@ -161,7 +169,7 @@ describe("LiveSocket", () => {
   });
 
   test("getActiveElement default before LiveSocket activeElement is set", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     const input = document.querySelector("input");
     input.focus();
@@ -170,7 +178,7 @@ describe("LiveSocket", () => {
   });
 
   test("blurActiveElement", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     const input = document.querySelector("input");
     input.focus();
@@ -184,7 +192,7 @@ describe("LiveSocket", () => {
   });
 
   test("restorePreviouslyActiveFocus", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     const input = document.querySelector("input");
     input.focus();
@@ -201,7 +209,7 @@ describe("LiveSocket", () => {
   });
 
   test("dropActiveElement unsets prevActive", async () => {
-    const liveSocket = new LiveSocket("/live", Socket);
+    liveSocket = new LiveSocket("/live", Socket);
 
     liveSocket.connect();
 
@@ -225,7 +233,7 @@ describe("LiveSocket", () => {
       },
     };
 
-    const liveSocket = new LiveSocket("/live", Socket, {
+    liveSocket = new LiveSocket("/live", Socket, {
       sessionStorage: override,
     });
     liveSocket.getLatencySim();
@@ -252,6 +260,8 @@ describe("liveSocket.js()", () => {
   });
 
   afterEach(() => {
+    liveSocket && liveSocket.destroyAllViews();
+    liveSocket = null;
     jest.useRealTimers();
   });
 

assets/test/test_helpers.ts

@@ -66,6 +66,14 @@ export const stubChannel = (view) => {
     },
   };
   view.channel.push = () => fakePush;
+  view.channel.leave = () => ({
+    receive(kind, cb) {
+      if (kind === "ok") {
+        cb();
+      }
+      return this;
+    },
+  });
 };
 
 export function liveViewDOM(content?: string) {