From 3e86911b1f233cf0e2721241de01d4193185575b Mon Sep 17 00:00:00 2001
From: Steffen Deusch <steffen@deusch.me>
Date: Sat, 25 Jan 2025 22:47:11 +0100
Subject: [PATCH] warn when phx-update="stream" is missing (#3645)

This logs an error to the JS console when debug mode is enabled to warn
users when they forgot to add phx-update="stream" to the direct parent of
an inserted stream item.
---
 assets/js/phoenix_live_view/dom_patch.js |  2 ++
 assets/js/phoenix_live_view/utils.js     | 11 +++++++++++
 2 files changed, 13 insertions(+)

diff --git a/assets/js/phoenix_live_view/dom_patch.js b/assets/js/phoenix_live_view/dom_patch.js
index 664e9c8367..135fb91843 100644
--- a/assets/js/phoenix_live_view/dom_patch.js
+++ b/assets/js/phoenix_live_view/dom_patch.js
@@ -18,6 +18,7 @@ import {
 
 import {
   detectDuplicateIds,
+  detectInvalidStreamInserts,
   isCid
 } from "./utils"
 
@@ -341,6 +342,7 @@ export default class DOMPatch {
 
     if(liveSocket.isDebugEnabled()){
       detectDuplicateIds()
+      detectInvalidStreamInserts(this.streamInserts)
       // warn if there are any inputs named "id"
       Array.from(document.querySelectorAll("input[name=id]")).forEach(node => {
         if(node.form){
diff --git a/assets/js/phoenix_live_view/utils.js b/assets/js/phoenix_live_view/utils.js
index 1eda3960f9..221a6d8b01 100644
--- a/assets/js/phoenix_live_view/utils.js
+++ b/assets/js/phoenix_live_view/utils.js
@@ -23,6 +23,17 @@ export function detectDuplicateIds(){
   }
 }
 
+export function detectInvalidStreamInserts(inserts){
+  const errors = new Set()
+  Object.keys(inserts).forEach((id) => {
+    const streamEl = document.getElementById(id)
+    if(streamEl && streamEl.parentElement && streamEl.parentElement.getAttribute("phx-update") !== "stream"){
+      errors.add(`The stream container with id "${streamEl.parentElement.id}" is missing the phx-update="stream" attribute. Ensure it is set for streams to work properly.`)
+    }
+  })
+  errors.forEach(error => console.error(error))
+}
+
 export let debug = (view, kind, msg, obj) => {
   if(view.liveSocket.isDebugEnabled()){
     console.log(`${view.id} ${kind}: ${msg} - `, obj)