From 1b675c0264f260b217bf159befb7065f16b62f52 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Mon, 15 Jan 2024 15:20:17 +0100 Subject: [PATCH] fix: transform textarea and contenteditable binding expressions (#10187) fixes #10185 --- .changeset/big-cars-serve.md | 5 +++++ .../3-transform/client/visitors/template.js | 10 +++------- .../3-transform/server/transform-server.js | 17 ++++++++++++----- .../samples/binding-store/_config.js | 8 ++++++++ .../samples/binding-store/main.svelte | 4 +++- 5 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 .changeset/big-cars-serve.md diff --git a/.changeset/big-cars-serve.md b/.changeset/big-cars-serve.md new file mode 100644 index 0000000000..ada0f61ba9 --- /dev/null +++ b/.changeset/big-cars-serve.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: transform textarea and contenteditable binding expressions 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 6b07a5afd2..3e7cc21403 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 @@ -2595,16 +2595,14 @@ export const template_visitors = { ); } - const getter = b.thunk( - /** @type {import('estree').Expression} */ (context.visit(node.expression)) - ); + const getter = b.thunk(/** @type {import('estree').Expression} */ (visit(node.expression))); const assignment = b.assignment('=', node.expression, b.id('$$value')); const setter = b.arrow( [b.id('$$value')], serialize_set_binding( assignment, context, - () => /** @type {import('estree').Expression} */ (context.visit(assignment)), + () => /** @type {import('estree').Expression} */ (visit(assignment)), { skip_proxy_and_freeze: true } @@ -2767,9 +2765,7 @@ export const template_visitors = { group_getter = b.thunk( b.block([ b.stmt(serialize_attribute_value(value, context)[1]), - b.return( - /** @type {import('estree').Expression} */ (context.visit(node.expression)) - ) + b.return(/** @type {import('estree').Expression} */ (visit(node.expression))) ]) ); } 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 e068802b7c..49b92191ff 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 @@ -1452,9 +1452,6 @@ const template_visitors = { context.state.init.push(b.stmt(b.call('$.add_snippet_symbol', node.expression))); } }, - BindDirective(node, context) { - // TODO - }, Component(node, context) { const state = context.state; const [dec, id] = serialize_anchor(state); @@ -1694,9 +1691,19 @@ function serialize_element_attributes(node, context) { if (binding?.omit_in_ssr) continue; if (ContentEditableBindings.includes(attribute.name)) { - content = { escape: false, expression: attribute.expression }; + content = { + escape: false, + expression: /** @type {import('estree').Expression} */ ( + context.visit(attribute.expression) + ) + }; } else if (attribute.name === 'value' && node.name === 'textarea') { - content = { escape: true, expression: attribute.expression }; + content = { + escape: true, + expression: /** @type {import('estree').Expression} */ ( + context.visit(attribute.expression) + ) + }; } else if (attribute.name === 'group') { const value_attribute = /** @type {import('#compiler').Attribute | undefined} */ ( node.attributes.find((attr) => attr.type === 'Attribute' && attr.name === 'value') diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js index 81c83d73de..b8c4ab1f9a 100644 --- a/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/binding-store/_config.js @@ -4,11 +4,15 @@ export default test({ html: `

hello world

+ +
world
`, ssrHtml: `

hello world

+ +
world
`, async test({ assert, component, target, window }) { @@ -34,6 +38,8 @@ export default test({ `

hello everybody

+ +
everybody
` ); @@ -44,6 +50,8 @@ export default test({ `

hello goodbye

+ +
goodbye
` ); diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte index fd022a34b3..2bcf939af5 100644 --- a/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte +++ b/packages/svelte/tests/runtime-legacy/samples/binding-store/main.svelte @@ -6,4 +6,6 @@ -

hello {$name}

\ No newline at end of file +

hello {$name}

+