diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js index ce8068371e..17897db214 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js @@ -1201,7 +1201,7 @@ function get_template_function(namespace, state) { return namespace === 'svg' ? contains_script_tag ? '$.svg_template_with_script' - : '$.svg_template' + : '$.ns_template' : namespace === 'mathml' ? '$.mathml_template' : contains_script_tag diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js index 49acde2403..a64ef3a48b 100644 --- a/packages/svelte/src/internal/client/dom/template.js +++ b/packages/svelte/src/internal/client/dom/template.js @@ -94,12 +94,13 @@ export function template_with_script(content, flags) { /** * @param {string} content * @param {number} flags + * @param {'svg' | 'math'} ns * @returns {() => Node | Node[]} */ /*#__NO_SIDE_EFFECTS__*/ -export function svg_template(content, flags) { +export function ns_template(content, flags, ns = 'svg') { var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0; - var fn = template(`${content}`, 0); // we don't need to worry about using importNode for SVGs + var fn = template(`<${ns}>${content}`, 0); // we don't need to worry about using importNode for namespaced elements /** @type {Element | DocumentFragment} */ var node; @@ -110,14 +111,14 @@ export function svg_template(content, flags) { } if (!node) { - var svg = /** @type {Element} */ (fn()); + var wrapper = /** @type {Element} */ (fn()); if ((flags & TEMPLATE_FRAGMENT) === 0) { - node = /** @type {Element} */ (svg.firstChild); + node = /** @type {Element} */ (wrapper.firstChild); } else { node = document.createDocumentFragment(); - while (svg.firstChild) { - node.appendChild(svg.firstChild); + while (wrapper.firstChild) { + node.appendChild(wrapper.firstChild); } } } @@ -142,7 +143,7 @@ export function svg_template(content, flags) { /*#__NO_SIDE_EFFECTS__*/ export function svg_template_with_script(content, flags) { var first = true; - var fn = svg_template(content, flags); + var fn = ns_template(content, flags); return () => { if (hydrating) return fn(); @@ -165,40 +166,7 @@ export function svg_template_with_script(content, flags) { */ /*#__NO_SIDE_EFFECTS__*/ export function mathml_template(content, flags) { - var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0; - var fn = template(`${content}`, 0); // we don't need to worry about using importNode for MathML - - /** @type {Element | DocumentFragment} */ - var node; - - return () => { - if (hydrating) { - return push_template_node(is_fragment ? hydrate_nodes : hydrate_nodes[0]); - } - - if (!node) { - var math = /** @type {Element} */ (fn()); - - if ((flags & TEMPLATE_FRAGMENT) === 0) { - node = /** @type {Element} */ (math.firstChild); - } else { - node = document.createDocumentFragment(); - while (math.firstChild) { - node.appendChild(math.firstChild); - } - } - } - - var clone = node.cloneNode(true); - - push_template_node( - is_fragment - ? /** @type {import('#client').TemplateNode[]} */ ([...clone.childNodes]) - : /** @type {import('#client').TemplateNode} */ (clone) - ); - - return clone; - }; + return ns_template(content, flags, 'math'); } /** diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js index 8b42493219..73a36d4e9e 100644 --- a/packages/svelte/src/internal/client/index.js +++ b/packages/svelte/src/internal/client/index.js @@ -80,7 +80,7 @@ export { export { append, comment, - svg_template, + ns_template, svg_template_with_script, mathml_template, template,