diff --git a/.changeset/fifty-llamas-know.md b/.changeset/fifty-llamas-know.md new file mode 100644 index 0000000000..f11c975f3d --- /dev/null +++ b/.changeset/fifty-llamas-know.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +chore: simplify `
` cleaning diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/to-functions.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/to-functions.js index ff6dafb527..888f7adb7f 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/to-functions.js +++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/to-functions.js @@ -1,7 +1,7 @@ /** @import { TemplateOperation } from '../types.js' */ /** @import { ObjectExpression, Identifier, ArrayExpression, Property, Expression, Literal } from 'estree' */ import * as b from '../../../../utils/builders.js'; -import { regex_is_valid_identifier } from '../../../patterns.js'; +import { regex_is_valid_identifier, regex_starts_with_newline } from '../../../patterns.js'; import fix_attribute_casing from './fix-attribute-casing.js'; /** @@ -127,6 +127,18 @@ function create_anchor(element, data = '') { */ function create_text(element, value) { if (!element) return b.literal(value); + + // TODO this is temporary, but i want the tests to keep passing in the meantime + // @ts-expect-error + const name = element?.properties[0].value.value; + + if ((name === 'pre' || name === 'textarea') && regex_starts_with_newline.test(value)) { + // @ts-expect-error + if (!element.properties.find((prop) => prop.key.name === 'c')) { + value = value.replace(regex_starts_with_newline, ''); + } + } + const c = get_or_create_prop(element, 'c', b.array([])); /** @type {ArrayExpression} */ (c.value).elements.push(b.literal(value)); } diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js index 89d434dc20..eefa869287 100644 --- a/packages/svelte/src/compiler/phases/3-transform/utils.js +++ b/packages/svelte/src/compiler/phases/3-transform/utils.js @@ -273,27 +273,12 @@ export function clean_nodes( var first = trimmed[0]; - // initial newline inside a `` is disregarded, if not followed by another newline - if ( - parent.type === 'RegularElement' && - // we also want to do the replacement on the textarea if we are in functional template mode because createTextNode behave differently - // then template.innerHTML - (parent.name === 'pre' || (is_functional_template_mode && parent.name === 'textarea')) && - first?.type === 'Text' - ) { - const text = first.data.replace(regex_starts_with_newline, ''); - if (text !== first.data) { - const tmp = text.replace(regex_starts_with_newline, ''); - // do an extra replacement if we are in functional template mode because createTextNode behave differently - // then template.innerHTML - if (text === tmp || is_functional_template_mode) { - first.data = text; - first.raw = first.raw.replace(regex_starts_with_newline, ''); - if (first.data === '') { - trimmed.shift(); - first = trimmed[0]; - } - } + // if first text node inside ais a single newline, discard it, because otherwise + // the browser will do it for us which could break hydration + if (parent.type === 'RegularElement' && parent.name === 'pre' && first?.type === 'Text') { + if (first.data === '\n' || first.data === '\r\n') { + trimmed.shift(); + first = trimmed[0]; } }