Throw a clear error if more than 1 root Element is found

Author: weaverryan

src/LiveComponent/assets/src/Component/index.ts

@@ -359,7 +359,14 @@ export default class Component {
             modifiedModelValues[modelName] = this.valueStore.get(modelName);
         });
 
-        const newElement = htmlToElement(html);
+        let newElement;
+        try {
+            newElement = htmlToElement(html);
+        } catch (error) {
+            console.error('There was a problem with the component HTML returned:');
+
+            throw error;
+        }
         // normalize new element into non-loading state before diff
         this.hooks.triggerHook('loading.state:finished', newElement);
 

src/LiveComponent/assets/src/dom_utils.ts

@@ -220,6 +220,10 @@ export function htmlToElement(html: string): HTMLElement {
     html = html.trim();
     template.innerHTML = html;
 
+    if (template.content.childElementCount > 1) {
+        throw new Error(`Component HTML contains ${template.content.childElementCount} elements, but only 1 root element is allowed.`);
+    }
+
     const child = template.content.firstElementChild;
     if (!child) {
         throw new Error('Child not found');

src/LiveComponent/assets/test/controller/render.test.ts

@@ -365,4 +365,24 @@ describe('LiveController rendering Tests', () => {
 
         await waitFor(() => expect(test.element).toHaveTextContent('123'));
     });
+
+    it('can understand comment in the response', async () => {
+        const test = await createTest({ season: 'summer' }, (data: any) => `
+            <!-- messy comment -->
+            <div ${initComponent(data)}>
+                The season is: ${data.season}
+            </div>
+        `);
+
+        test.expectsAjaxCall('get')
+            .expectSentData(test.initialData)
+            .serverWillChangeData((data) => {
+                data.season = 'autumn';
+            })
+            .init();
+
+        await test.component.render();
+        // verify the component *did* render ok
+        expect(test.element).toHaveTextContent('The season is: autumn');
+    });
 });