create svg element if {@html} tag is inside of svg

src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts

@@ -1,8 +1,10 @@
+import { namespaces } from './../../../utils/namespaces';
 import { b, x } from 'code-red';
 import Renderer from '../Renderer';
 import Block from '../Block';
 import Tag from './shared/Tag';
 import Wrapper from './shared/Wrapper';
+import Element from '../../nodes/Element';
 import MustacheTag from '../../nodes/MustacheTag';
 import RawMustacheTag from '../../nodes/RawMustacheTag';
 import { is_head } from './shared/is_head';
@@ -51,9 +53,12 @@ export default class RawMustacheTagWrapper extends Tag {
 
 			const update_anchor = needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
 
-			block.chunks.create.push(b`${html_tag} = new @HtmlTag();`);
+			const parent_element = this.node.find_nearest(/^Element/) as Element;
+			const is_svg = parent_element && parent_element.namespace === namespaces.svg;
+			block.chunks.create.push(b`${html_tag} = new @HtmlTag(${is_svg ? 'true' : 'false'});`);
+
 			if (this.renderer.options.hydratable) {
-				block.chunks.claim.push(b`${html_tag} = @claim_html_tag(${_parent_nodes});`);
+				block.chunks.claim.push(b`${html_tag} = ${is_svg ? '@claim_svg_tag' : '@claim_html_tag'}(${_parent_nodes});`);
 			}
 			block.chunks.hydrate.push(b`${html_tag}.a = ${update_anchor};`);
 			block.chunks.mount.push(b`${html_tag}.m(${init}, ${parent_node || '#target'}, ${parent_node ? null : '#anchor'});`);

src/runtime/internal/dom.ts

@@ -493,11 +493,19 @@ function find_comment(nodes, text, start) {
 }
 
 export function claim_html_tag(nodes) {
+	return claim_tag(nodes, false);
+}
+
+export function claim_svg_tag(nodes) {
+	return claim_tag(nodes, true);
+}
+
+function claim_tag(nodes, is_svg: boolean) {
 	// find html opening tag
 	const start_index = find_comment(nodes, 'HTML_TAG_START', 0);
 	const end_index = find_comment(nodes, 'HTML_TAG_END', start_index);
 	if (start_index === end_index) {
-		return new HtmlTagHydration();
+		return new HtmlTagHydration(undefined, is_svg);
 	}
 
 	init_claim_info(nodes);
@@ -509,7 +517,7 @@ export function claim_html_tag(nodes) {
 		n.claim_order = nodes.claim_info.total_claimed;
 		nodes.claim_info.total_claimed += 1;
 	}
-	return new HtmlTagHydration(claimed_nodes);
+	return new HtmlTagHydration(claimed_nodes, is_svg);
 }
 
 export function set_data(text, data) {
@@ -645,16 +653,18 @@ export function query_selector_all(selector: string, parent: HTMLElement = docum
 }
 
 export class HtmlTag {
+	private is_svg = false;
 	// parent for creating node
-	e: HTMLElement;
+	e: HTMLElement | SVGElement;
 	// html tag nodes
 	n: ChildNode[];
 	// target
-	t: HTMLElement;
+	t: HTMLElement | SVGElement;
 	// anchor
-	a: HTMLElement;
+	a: HTMLElement | SVGElement;
 
-	constructor() {
+	constructor(is_svg: boolean = false) {
+		this.is_svg = is_svg;
 		this.e = this.n = null;
 	}
 
@@ -662,9 +672,14 @@ export class HtmlTag {
 		this.h(html);
 	}
 
-	m(html: string, target: HTMLElement, anchor: HTMLElement = null) {
+	m(
+		html: string,
+		target: HTMLElement | SVGElement,
+		anchor: HTMLElement | SVGElement = null
+	) {
 		if (!this.e) {
-			this.e = element(target.nodeName as keyof HTMLElementTagNameMap);
+			if (this.is_svg) this.e = svg_element(target.nodeName as keyof SVGElementTagNameMap);
+			else this.e = element(target.nodeName as keyof HTMLElementTagNameMap);
 			this.t = target;
 			this.c(html);
 		}
@@ -698,8 +713,8 @@ export class HtmlTagHydration extends HtmlTag {
 	// hydration claimed nodes
 	l: ChildNode[] | void;
 
-	constructor(claimed_nodes?: ChildNode[]) {
+	constructor(claimed_nodes?: ChildNode[], is_svg: boolean = false) {
-		super();
+		super(is_svg);
 		this.e = this.n = null;
 		this.l = claimed_nodes;
 	}