warn when phx-update="stream" is missing

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

@@ -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){

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)