Allow SVG elements in LiveComponent

Author: norkunas

src/LiveComponent/assets/dist/live_controller.js

@@ -973,7 +973,7 @@ function normalizeAttributesForComparison(element) {
 
 function cloneHTMLElement(element) {
     const newElement = element.cloneNode(true);
-    if (!(newElement instanceof HTMLElement)) {
+    if (!(newElement instanceof HTMLElement) && !(newElement instanceof SVGElement)) {
         throw new Error('Could not clone element');
     }
     return newElement;
@@ -1273,7 +1273,7 @@ class default_1 extends Controller {
     _getLoadingDirectives() {
         const loadingDirectives = [];
         this.element.querySelectorAll('[data-loading]').forEach((element => {
-            if (!(element instanceof HTMLElement)) {
+            if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
                 throw new Error('Invalid Element Type');
             }
             const directives = parseDirectives(element.dataset.loading || 'show');

src/LiveComponent/assets/src/clone_html_element.ts

@@ -1,6 +1,6 @@
-export function cloneHTMLElement(element: HTMLElement): HTMLElement {
+export function cloneHTMLElement(element: HTMLElement|SVGElement): HTMLElement|SVGElement {
     const newElement = element.cloneNode(true);
-    if (!(newElement instanceof HTMLElement)) {
+    if (!(newElement instanceof HTMLElement) && !(newElement instanceof SVGElement)) {
         throw new Error('Could not clone element');
     }
 

src/LiveComponent/assets/src/live_controller.ts

@@ -8,7 +8,7 @@ import { normalizeAttributesForComparison } from './normalize_attributes_for_com
 import { cloneHTMLElement } from './clone_html_element';
 
 interface ElementLoadingDirectives {
-    element: HTMLElement,
+    element: HTMLElement|SVGElement,
     directives: Directive[]
 }
 
@@ -419,7 +419,7 @@ export default class extends Controller {
     /**
      * @private
      */
-    _handleLoadingDirective(element: HTMLElement, isLoading: boolean, directive: Directive) {
+    _handleLoadingDirective(element: HTMLElement|SVGElement, isLoading: boolean, directive: Directive) {
         const finalAction = parseLoadingAction(directive.action, isLoading);
 
         let loadingDirective: (() => void);
@@ -490,7 +490,7 @@ export default class extends Controller {
         const loadingDirectives: ElementLoadingDirectives[] = [];
 
         this.element.querySelectorAll('[data-loading]').forEach((element => {
-            if (!(element instanceof HTMLElement)) {
+            if (!(element instanceof HTMLElement) && !(element instanceof SVGElement)) {
                 throw new Error('Invalid Element Type');
             }
 
@@ -506,19 +506,19 @@ export default class extends Controller {
         return loadingDirectives;
     }
 
-    _showElement(element: HTMLElement) {
+    _showElement(element: HTMLElement|SVGElement) {
         element.style.display = 'inline-block';
     }
 
-    _hideElement(element: HTMLElement) {
+    _hideElement(element: HTMLElement|SVGElement) {
         element.style.display = 'none';
     }
 
-    _addClass(element: HTMLElement, classes: string[]) {
+    _addClass(element: HTMLElement|SVGElement, classes: string[]) {
         element.classList.add(...combineSpacedArray(classes));
     }
 
-    _removeClass(element: HTMLElement, classes: string[]) {
+    _removeClass(element: HTMLElement|SVGElement, classes: string[]) {
         element.classList.remove(...combineSpacedArray(classes));
 
         // remove empty class="" to avoid morphdom "diff" problem

src/LiveComponent/assets/src/normalize_attributes_for_comparison.ts

@@ -5,14 +5,14 @@
  * and sets that onto the value attribute. This is useful to compare
  * if two nodes are identical.
  */
-export function normalizeAttributesForComparison(element: HTMLElement): void {
+export function normalizeAttributesForComparison(element: HTMLElement|SVGElement): void {
     if (element.value) {
         element.setAttribute('value', element.value);
     } else if (element.hasAttribute('value')) {
         element.setAttribute('value', '');
     }
 
-    Array.from(element.children).forEach((child: HTMLElement) => {
+    Array.from(element.children).forEach((child: HTMLElement|SVGElement) => {
         normalizeAttributesForComparison(child);
     });
 }

src/LiveComponent/assets/test/clone_html_element.test.ts

@@ -0,0 +1,30 @@
+import { cloneHTMLElement } from '../src/clone_html_element';
+
+const createElement = function(html: string): HTMLElement|SVGElement {
+    const template = document.createElement('template');
+    html = html.trim();
+    template.innerHTML = html;
+
+    const child = template.content.firstChild;
+    if (!child || (!(child instanceof HTMLElement) && !(child instanceof SVGElement))) {
+        throw new Error('Child not found');
+    }
+
+    return child;
+}
+
+describe('cloneHTMLElement', () => {
+    it('allows to clone HTMLElement', () => {
+        const element = createElement('<div class="foo"></div>');
+        const clone = cloneHTMLElement(element);
+
+        expect(clone.outerHTML).toEqual('<div class="foo"></div>');
+    });
+
+    it('allows to clone SVGElement', () => {
+        const element = createElement('<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"></svg>');
+        const clone = cloneHTMLElement(element);
+
+        expect(clone.outerHTML).toEqual('<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"></svg>');
+    });
+});