diff --git a/.changeset/shaggy-feet-kick.md b/.changeset/shaggy-feet-kick.md new file mode 100644 index 0000000000..1e6d52a031 --- /dev/null +++ b/.changeset/shaggy-feet-kick.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: always use document.importNode for template cloning 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 082a6c4dee..bb4989869a 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 @@ -28,7 +28,6 @@ import { EACH_ITEM_REACTIVE, EACH_KEYED, TEMPLATE_FRAGMENT, - TEMPLATE_USE_IMPORT_NODE, TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT @@ -1077,10 +1076,6 @@ function create_block(parent, name, nodes, context) { /** @type {import('estree').Expression[]} */ const args = [b.template([b.quasi(state.template.join(''), true)], [])]; - if (state.metadata.context.template_needs_import_node) { - args.push(b.literal(TEMPLATE_USE_IMPORT_NODE)); - } - add_template(template_name, args); body.push(b.var(id, b.call(template_name)), ...state.before_init, ...state.init); @@ -1121,10 +1116,6 @@ function create_block(parent, name, nodes, context) { } else { let flags = TEMPLATE_FRAGMENT; - if (state.metadata.context.template_needs_import_node) { - flags |= TEMPLATE_USE_IMPORT_NODE; - } - add_template(template_name, [ b.template([b.quasi(state.template.join(''), true)], []), b.literal(flags) diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js index 0e3a1737ab..521e89325c 100644 --- a/packages/svelte/src/constants.js +++ b/packages/svelte/src/constants.js @@ -17,7 +17,6 @@ export const TRANSITION_OUT = 1 << 1; export const TRANSITION_GLOBAL = 1 << 2; export const TEMPLATE_FRAGMENT = 1; -export const TEMPLATE_USE_IMPORT_NODE = 1 << 1; export const HYDRATION_START = '['; export const HYDRATION_END = ']'; diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js index 3c3ca4f7fd..cd53f213c9 100644 --- a/packages/svelte/src/internal/client/dom/operations.js +++ b/packages/svelte/src/internal/client/dom/operations.js @@ -17,8 +17,8 @@ var text_prototype; /** @type {typeof Node.prototype.appendChild} */ var append_child_method; -/** @type {typeof Node.prototype.cloneNode} */ -var clone_node_method; +/** @type {typeof document.importNode} */ +export var import_node; /** @type {(this: Node) => ChildNode | null} */ var first_child_get; @@ -56,7 +56,7 @@ export function init_operations() { text_prototype = Text.prototype; append_child_method = node_prototype.appendChild; - clone_node_method = node_prototype.cloneNode; + import_node = document.importNode; $window = window; $document = document; @@ -106,18 +106,6 @@ export function init_operations() { export function append_child(element, child) { append_child_method.call(element, child); } - -/** - * @template {Node} N - * @param {N} node - * @param {boolean} deep - * @returns {N} - */ -/*#__NO_SIDE_EFFECTS__*/ -export function clone_node(node, deep) { - return /** @type {N} */ (clone_node_method.call(node, deep)); -} - /** @returns {Text} */ export function empty() { return document.createTextNode(''); diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js index 8f754248e7..e92d9704e5 100644 --- a/packages/svelte/src/internal/client/dom/template.js +++ b/packages/svelte/src/internal/client/dom/template.js @@ -1,8 +1,8 @@ import { hydrate_nodes, hydrating } from './hydration.js'; -import { clone_node, empty } from './operations.js'; +import { import_node, empty } from './operations.js'; import { create_fragment_from_html } from './reconciler.js'; import { current_effect } from '../runtime.js'; -import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js'; +import { TEMPLATE_FRAGMENT } from '../../../constants.js'; import { effect } from '../reactivity/effects.js'; import { is_array } from '../utils.js'; @@ -41,7 +41,6 @@ export function push_template_node( /*#__NO_SIDE_EFFECTS__*/ export function template(content, flags) { var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0; - var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0; /** @type {Node} */ var node; @@ -55,7 +54,7 @@ export function template(content, flags) { node = create_fragment_from_html(content); if (!is_fragment) node = /** @type {Node} */ (node.firstChild); } - var clone = use_import_node ? document.importNode(node, true) : clone_node(node, true); + var clone = import_node(node, true); push_template_node( is_fragment @@ -122,7 +121,7 @@ export function svg_template(content, flags) { } } - var clone = clone_node(node, true); + var clone = import_node(node, true); push_template_node( is_fragment @@ -189,7 +188,7 @@ export function mathml_template(content, flags) { } } - var clone = clone_node(node, true); + var clone = import_node(node, true); push_template_node( is_fragment