[LiveComponent] Fix svg re-render

Author: norkunas

src/LiveComponent/assets/dist/live_controller.js

@@ -1208,7 +1208,7 @@ function executeMorphdom(rootFromElement, rootToElement, modifiedFieldElements,
             if (fromEl === rootFromElement) {
                 return true;
             }
-            if (!(fromEl instanceof HTMLElement) || !(toEl instanceof HTMLElement)) {
+            if (!(fromEl instanceof HTMLElement || fromEl instanceof SVGElement) || !(toEl instanceof HTMLElement || toEl instanceof SVGElement)) {
                 return false;
             }
             const childComponent = childComponentMap.get(fromEl) || false;

src/LiveComponent/assets/src/morphdom.ts

@@ -40,7 +40,10 @@ export function executeMorphdom(
                 return true;
             }
 
-            if (!(fromEl instanceof HTMLElement) || !(toEl instanceof HTMLElement)) {
+            if (
+                !(fromEl instanceof HTMLElement || fromEl instanceof SVGElement) ||
+                !(toEl instanceof HTMLElement || toEl instanceof SVGElement)
+            ) {
                 return false;
             }
 

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

@@ -342,4 +342,27 @@ describe('LiveController rendering Tests', () => {
 
         await waitFor(() => expect(test.element).toHaveTextContent('Title: "greetings to you"'));
     });
+
+    it('can update svg', async () => {
+        const test = await createTest({ text: 'SVG' }, (data: any) => `
+            <div ${initComponent(data)}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
+                    <text x="150" y="125" font-size="60" text-anchor="middle" fill="red">${data.text}</text>
+                </svg>
+                <button data-action="live#$render">Reload</button>
+            </div>
+        `);
+
+        test.expectsAjaxCall('get')
+            .expectSentData(test.initialData)
+            .serverWillChangeData((data: any) => {
+                // change the data on the server so the template renders differently
+                data.text = '123';
+            })
+            .init();
+
+        getByText(test.element, 'Reload').click();
+
+        await waitFor(() => expect(test.element).toHaveTextContent('123'));
+    });
 });