From 2572f0b87749d9502a48abc6e3a412d8722488a3 Mon Sep 17 00:00:00 2001 From: Tee Ming Date: Sun, 6 Aug 2023 23:31:58 +0800 Subject: [PATCH 1/3] allow setting files binding --- .../docs/02-template-syntax/05-element-directives.md | 2 +- .../svelte/src/compiler/compile/nodes/Binding.js | 5 ++--- .../compiler/compile/render_ssr/handlers/Element.js | 9 +++++++++ .../js/samples/bindings-readonly-order/expected.js | 12 +++++++++++- .../svelte/test/js/samples/input-files/expected.js | 7 ++++++- 5 files changed, 29 insertions(+), 6 deletions(-) diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/02-template-syntax/05-element-directives.md index ee24c97e5134..f08df276be26 100644 --- a/documentation/docs/02-template-syntax/05-element-directives.md +++ b/documentation/docs/02-template-syntax/05-element-directives.md @@ -121,7 +121,7 @@ Numeric input values are coerced; even though `input.value` is a string as far a ``` -On `` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). It is readonly. +On `` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList). ```svelte diff --git a/packages/svelte/src/compiler/compile/nodes/Binding.js b/packages/svelte/src/compiler/compile/nodes/Binding.js index 0c69ada0d794..89890f17a40e 100644 --- a/packages/svelte/src/compiler/compile/nodes/Binding.js +++ b/packages/svelte/src/compiler/compile/nodes/Binding.js @@ -94,13 +94,12 @@ export default class Binding extends Node { return; } } - const type = parent.get_static_attribute_value('type'); this.is_readonly = regex_dimensions.test(this.name) || regex_box_size.test(this.name) || (isElement(parent) && - ((parent.is_media_node() && read_only_media_attributes.has(this.name)) || - (parent.name === 'input' && type === 'file'))) /* TODO others? */; + parent.is_media_node() && + read_only_media_attributes.has(this.name)) /* TODO others? */; } is_readonly_media_attribute() { return read_only_media_attributes.has(this.name); diff --git a/packages/svelte/src/compiler/compile/render_ssr/handlers/Element.js b/packages/svelte/src/compiler/compile/render_ssr/handlers/Element.js index 41f2abfceda8..c79de6137a58 100644 --- a/packages/svelte/src/compiler/compile/render_ssr/handlers/Element.js +++ b/packages/svelte/src/compiler/compile/render_ssr/handlers/Element.js @@ -176,6 +176,15 @@ export default function (node, renderer, options) { node_contents = x`@escape(${snippet} || "")`; } else if (binding.name === 'value' && node.name === 'select') { // NOTE: do not add "value" attribute on + } } else { const snippet = expression.node; renderer.add_expression( diff --git a/packages/svelte/test/js/samples/bindings-readonly-order/expected.js b/packages/svelte/test/js/samples/bindings-readonly-order/expected.js index 2f2a779d933d..765ab4c004ef 100644 --- a/packages/svelte/test/js/samples/bindings-readonly-order/expected.js +++ b/packages/svelte/test/js/samples/bindings-readonly-order/expected.js @@ -30,8 +30,10 @@ function create_fragment(ctx) { }, m(target, anchor) { insert(target, input0, anchor); + input0.files = /*files*/ ctx[0]; insert(target, t, anchor); insert(target, input1, anchor); + input1.files = /*files*/ ctx[0]; if (!mounted) { dispose = [ @@ -42,7 +44,15 @@ function create_fragment(ctx) { mounted = true; } }, - p: noop, + p(ctx, [dirty]) { + if (dirty & /*files*/ 1) { + input0.files = /*files*/ ctx[0]; + } + + if (dirty & /*files*/ 1) { + input1.files = /*files*/ ctx[0]; + } + }, i: noop, o: noop, d(detaching) { diff --git a/packages/svelte/test/js/samples/input-files/expected.js b/packages/svelte/test/js/samples/input-files/expected.js index 7fea84563247..55405571faee 100644 --- a/packages/svelte/test/js/samples/input-files/expected.js +++ b/packages/svelte/test/js/samples/input-files/expected.js @@ -24,13 +24,18 @@ function create_fragment(ctx) { }, m(target, anchor) { insert(target, input, anchor); + input.files = /*files*/ ctx[0]; if (!mounted) { dispose = listen(input, "change", /*input_change_handler*/ ctx[1]); mounted = true; } }, - p: noop, + p(ctx, [dirty]) { + if (dirty & /*files*/ 1) { + input.files = /*files*/ ctx[0]; + } + }, i: noop, o: noop, d(detaching) { From 3e08d2a69ef55a4d9b9a84edb2e763d4c7a71f88 Mon Sep 17 00:00:00 2001 From: Tee Ming Date: Sun, 6 Aug 2023 23:36:23 +0800 Subject: [PATCH 2/3] changeset --- .changeset/long-foxes-glow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/long-foxes-glow.md diff --git a/.changeset/long-foxes-glow.md b/.changeset/long-foxes-glow.md new file mode 100644 index 000000000000..15216a3b0928 --- /dev/null +++ b/.changeset/long-foxes-glow.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: allow setting files binding for `` From 1b2dba69ccf435e51547c826912e1e62b0146481 Mon Sep 17 00:00:00 2001 From: Tee Ming Date: Fri, 20 Oct 2023 18:56:07 +0800 Subject: [PATCH 3/3] merge conflict --- packages/svelte/src/compiler/compile/nodes/Binding.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte/src/compiler/compile/nodes/Binding.js b/packages/svelte/src/compiler/compile/nodes/Binding.js index 5e1749910e26..53c922f82ce3 100644 --- a/packages/svelte/src/compiler/compile/nodes/Binding.js +++ b/packages/svelte/src/compiler/compile/nodes/Binding.js @@ -97,7 +97,7 @@ export default class Binding extends Node { this.is_readonly = regex_dimensions.test(this.name) || regex_box_size.test(this.name) || - (isElement(parent) && + (is_element(parent) && parent.is_media_node() && read_only_media_attributes.has(this.name)) /* TODO others? */; }