From fb2eb2cab28fe67f5ab35daf7d34168a214bc66a Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Thu, 4 Aug 2022 09:01:01 -0400
Subject: [PATCH] Make `StreamElement.templateElement` more flexible

Prior to this commit, the `StreamElement.templateElement` property would
raise an error if it were called without a `<template>` descendant.

However, a `<turbo-stream action="remove">` element without a descendant
`<template>` element is valid and supported.

When called on a `<turbo-stream>` that has a `firstElementChild` that
_is not_ a `<template>` element will continue to raise an exception.

When called without _any_ child elements,
`StreamElement.templateElement` will create and append a `<template>`
element.

Since listeners to the `turbo:before-stream-render` event now have
access to the `StreamElement` creating, appending, and returning a
`<template>` element will provide them with an opportunity to manipulate
the element from their event listener if they choose to.
---
 src/elements/stream_element.ts       |  6 +++++-
 src/tests/functional/stream_tests.ts | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/elements/stream_element.ts b/src/elements/stream_element.ts
index 5c8654aa4..30b9e3010 100644
--- a/src/elements/stream_element.ts
+++ b/src/elements/stream_element.ts
@@ -109,7 +109,11 @@ export class StreamElement extends HTMLElement {
    * Gets the main `<template>` used for rendering
    */
   get templateElement() {
-    if (this.firstElementChild instanceof HTMLTemplateElement) {
+    if (this.firstElementChild === null) {
+      const template = this.ownerDocument.createElement("template")
+      this.appendChild(template)
+      return template
+    } else if (this.firstElementChild instanceof HTMLTemplateElement) {
       return this.firstElementChild
     }
     this.raise("first child element must be a <template> element")
diff --git a/src/tests/functional/stream_tests.ts b/src/tests/functional/stream_tests.ts
index 55501bfc1..372fc7012 100644
--- a/src/tests/functional/stream_tests.ts
+++ b/src/tests/functional/stream_tests.ts
@@ -40,6 +40,16 @@ test("test receiving a stream message with css selector target", async ({ page }
   assert.deepEqual(await messages3.allTextContents(), ["Third", "Hello CSS!"])
 })
 
+test("test receiving a message without a template", async ({ page }) => {
+  await page.evaluate(() =>
+    window.Turbo.renderStreamMessage(`
+      <turbo-stream action="remove" target="messages"></turbo-stream>
+    `)
+  )
+
+  assert.equal(await await page.locator("#messages").count(), 0, "removes target element")
+})
+
 test("test receiving a message with a <script> element", async ({ page }) => {
   const messages = await page.locator("#messages .message")