Allow a single stream response to update multiple elements

hotwired · Jan 16, 2021 · 8bb56d7 · 8bb56d7
1 parent 178c817
commit 8bb56d7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/core/streams/stream_actions.ts b/src/core/streams/stream_actions.ts
@@ -2,25 +2,25 @@ import { StreamElement } from "../../elements/stream_element"
 
 export const StreamActions: { [action: string]: (this: StreamElement) => void } = {
   append() {
-    this.targetElement?.append(this.templateContent)
+    this.targetElements?.forEach(e => e.append(this.templateContent))
   },
 
   prepend() {
-    this.targetElement?.prepend(this.templateContent)
+    this.targetElements?.forEach(e => e.prepend(this.templateContent))
   },
 
   remove() {
-    this.targetElement?.remove()
+    this.targetElements?.forEach(e => e.remove())
   },
 
   replace() {
-    this.targetElement?.replaceWith(this.templateContent)
+    this.targetElements?.forEach(e => e.replaceWith(this.templateContent))
   },
 
   update() {
-    if (this.targetElement) {
-      this.targetElement.innerHTML = ""
-      this.targetElement.append(this.templateContent)
+    if (this.targetElements) {
+      this.targetElements.forEach(e => e.innerHTML = "")
+      this.targetElements.forEach(e => e.append(this.templateContent))
     }
   }
 }
diff --git a/src/elements/stream_element.ts b/src/elements/stream_element.ts
@@ -40,15 +40,15 @@ export class StreamElement extends HTMLElement {
     this.raise("action attribute is missing")
   }
 
-  get targetElement() {
+  get targetElements() {
     if (this.target) {
-      return this.ownerDocument?.getElementById(this.target)
+      return this.ownerDocument?.querySelectorAll(`#${this.target}`)
     }
     this.raise("target attribute is missing")
   }
 
   get templateContent() {
-    return this.templateElement.content
+    return this.templateElement.content.cloneNode(true)
   }
 
   get templateElement() {