From 8a5ea74f6f19616840855ede612902939c02b0ff Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 20 Feb 2024 13:09:39 +0100 Subject: [PATCH] fix: only escape characters in SSR template Adjusts the escaping mechanism done for server compilation. For template literals it's now only applied when explicitly told, which is the case for generated literals from the html template. Fixes a bug where a template literal string inside the `@html` tag was wrongfully escaped (https://github.com/sveltejs/svelte/issues/10359#issuecomment-1949678228) --- .changeset/neat-boats-shake.md | 5 +++++ .../phases/3-transform/server/transform-server.js | 10 ++++++---- .../src/compiler/phases/3-transform/server/types.d.ts | 1 + .../runtime-runes/samples/html-tag-escaping/_config.js | 5 +++++ .../samples/html-tag-escaping/main.svelte | 5 +++++ 5 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 .changeset/neat-boats-shake.md create mode 100644 packages/svelte/tests/runtime-runes/samples/html-tag-escaping/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/html-tag-escaping/main.svelte diff --git a/.changeset/neat-boats-shake.md b/.changeset/neat-boats-shake.md new file mode 100644 index 000000000000..0df653d14c69 --- /dev/null +++ b/.changeset/neat-boats-shake.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: only escape characters in SSR template diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js index d197ae3e8567..1492a9045a39 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js +++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js @@ -32,10 +32,11 @@ function t_string(value) { /** * @param {import('estree').Expression} value + * @param {boolean} [needs_escaping] * @returns {import('./types').TemplateExpression} */ -function t_expression(value) { - return { type: 'expression', value }; +function t_expression(value, needs_escaping = false) { + return { type: 'expression', value, needs_escaping }; } /** @@ -94,7 +95,8 @@ function serialize_template(template, out = b.id('out')) { } else if (template_item.type === 'expression') { const value = template_item.value; if (value.type === 'TemplateLiteral') { - last.value.raw += sanitize_template_string(value.quasis[0].value.raw); + const raw = value.quasis[0].value.raw; + last.value.raw += template_item.needs_escaping ? sanitize_template_string(raw) : raw; quasis.push(...value.quasis.slice(1)); expressions.push(...value.expressions); continue; @@ -198,7 +200,7 @@ function process_children(nodes, parent, { visit, state }) { } } - state.template.push(t_expression(b.template(quasis, expressions))); + state.template.push(t_expression(b.template(quasis, expressions), true)); } for (let i = 0; i < nodes.length; i += 1) { diff --git a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts index b982c1e0c095..7f38932807e0 100644 --- a/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts +++ b/packages/svelte/src/compiler/phases/3-transform/server/types.d.ts @@ -12,6 +12,7 @@ import type { ComponentAnalysis } from '../../types.js'; export type TemplateExpression = { type: 'expression'; value: Expression; + needs_escaping: boolean; }; export type TemplateString = { diff --git a/packages/svelte/tests/runtime-runes/samples/html-tag-escaping/_config.js b/packages/svelte/tests/runtime-runes/samples/html-tag-escaping/_config.js new file mode 100644 index 000000000000..f28077cbfbff --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/html-tag-escaping/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + html: `s s s \\u73` +}); diff --git a/packages/svelte/tests/runtime-runes/samples/html-tag-escaping/main.svelte b/packages/svelte/tests/runtime-runes/samples/html-tag-escaping/main.svelte new file mode 100644 index 000000000000..52ad0d8d1e24 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/html-tag-escaping/main.svelte @@ -0,0 +1,5 @@ +{@html `\u{73}`} +{@html '\u{73}'} +{@html "\u{73}"} + +\u{73}