diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index db26b6673c..52e099b42f 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -388,9 +388,11 @@ export default class ElementWrapper extends Wrapper { ? this.node.name : this.node.name.toUpperCase(); - const svg = this.node.namespace === namespaces.svg ? 1 : null; - - return x`@claim_element(${nodes}, "${name}", { ${attributes} }, ${svg})`; + if (this.node.namespace === namespaces.svg) { + return x`@claim_svg_element(${nodes}, "${name}", { ${attributes} })`; + } else { + return x`@claim_element(${nodes}, "${name}", { ${attributes} })`; + } } add_directives_in_order (block: Block) { diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 3cf2ca7c48..88df1eebc1 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -432,7 +432,7 @@ function claim_node(nodes: ChildNodeArray, predicate: (no return resultNode; } -export function claim_element(nodes: ChildNodeArray, name: string, attributes: {[key: string]: boolean}, svg) { +function claim_element_base(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }, create_element: (name: string) => Element | SVGElement) { return claim_node( nodes, (node: ChildNode): node is Element | SVGElement => node.nodeName === name, @@ -447,10 +447,18 @@ export function claim_element(nodes: ChildNodeArray, name: string, attributes: { remove.forEach(v => node.removeAttribute(v)); return undefined; }, - () => svg ? svg_element(name as keyof SVGElementTagNameMap) : element(name as keyof HTMLElementTagNameMap) + () => create_element(name) ); } +export function claim_element(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }) { + return claim_element_base(nodes, name, attributes, element); +} + +export function claim_svg_element(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }) { + return claim_element_base(nodes, name, attributes, svg_element); +} + export function claim_text(nodes: ChildNodeArray, data) { return claim_node( nodes, diff --git a/test/js/samples/hydrated-void-svg-element/_config.js b/test/js/samples/hydrated-void-svg-element/_config.js new file mode 100644 index 0000000000..af1bf11a52 --- /dev/null +++ b/test/js/samples/hydrated-void-svg-element/_config.js @@ -0,0 +1,5 @@ +export default { + options: { + hydratable: true + } +}; diff --git a/test/js/samples/hydrated-void-svg-element/expected.js b/test/js/samples/hydrated-void-svg-element/expected.js new file mode 100644 index 0000000000..e3b525bcdd --- /dev/null +++ b/test/js/samples/hydrated-void-svg-element/expected.js @@ -0,0 +1,58 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + append_hydration, + children, + claim_svg_element, + claim_text, + detach, + init, + insert_hydration, + noop, + safe_not_equal, + svg_element, + text +} from "svelte/internal"; + +function create_fragment(ctx) { + let svg; + let title; + let t; + + return { + c() { + svg = svg_element("svg"); + title = svg_element("title"); + t = text("a title"); + }, + l(nodes) { + svg = claim_svg_element(nodes, "svg", {}); + var svg_nodes = children(svg); + title = claim_svg_element(svg_nodes, "title", {}); + var title_nodes = children(title); + t = claim_text(title_nodes, "a title"); + title_nodes.forEach(detach); + svg_nodes.forEach(detach); + }, + m(target, anchor) { + insert_hydration(target, svg, anchor); + append_hydration(svg, title); + append_hydration(title, t); + }, + p: noop, + i: noop, + o: noop, + d(detaching) { + if (detaching) detach(svg); + } + }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, null, create_fragment, safe_not_equal, {}); + } +} + +export default Component; diff --git a/test/js/samples/hydrated-void-svg-element/input.svelte b/test/js/samples/hydrated-void-svg-element/input.svelte new file mode 100644 index 0000000000..7ec3f98b64 --- /dev/null +++ b/test/js/samples/hydrated-void-svg-element/input.svelte @@ -0,0 +1,3 @@ + + a title + \ No newline at end of file