From 1964535adf607edc4312a213b640d82dc14006e1 Mon Sep 17 00:00:00 2001
From: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Date: Tue, 18 Apr 2023 21:12:43 +0545
Subject: [PATCH] fix: interpolated style directive updates properly with
spread (#8505)
fixes #8438
---
.../render_dom/wrappers/Element/index.ts | 26 ++++++++++++-------
.../_config.js | 18 +++++++++++++
.../main.svelte | 5 ++++
3 files changed, 40 insertions(+), 9 deletions(-)
create mode 100644 test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/_config.js
create mode 100644 test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/main.svelte
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index cefebfcff3..e2c0ece733 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -1240,19 +1240,27 @@ export default class ElementWrapper extends Wrapper {
block.chunks.hydrate.push(updater);
+ const self_deps = expression.dynamic_dependencies();
+ const all_deps = new Set([
+ ...self_deps,
+ ...this.dynamic_style_dependencies
+ ]);
+
+ let condition = block.renderer.dirty([...all_deps]);
+
// Assume that style has changed through the spread attribute
if (has_spread) {
+ if (should_cache && all_deps.size) {
+ // Update the cached value
+ block.chunks.update.push(b`
+ if (${condition}) {
+ ${cached_snippet} = ${snippet};
+ }`
+ );
+ }
block.chunks.update.push(updater);
} else {
- const self_deps = expression.dynamic_dependencies();
- const all_deps = new Set([
- ...self_deps,
- ...this.dynamic_style_dependencies
- ]);
-
- if (all_deps.size === 0) return;
-
- let condition = block.renderer.dirty([...all_deps]);
+ if (all_deps.size === 0) return;
if (should_cache) {
condition = x`${condition} && ${cached_snippet} !== (${cached_snippet} = ${snippet})`;
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/_config.js b/test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/_config.js
new file mode 100644
index 0000000000..af1030c25a
--- /dev/null
+++ b/test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/_config.js
@@ -0,0 +1,18 @@
+export default {
+ html: `
+
+ `,
+
+ test({ assert, target, window, component }) {
+ const div = target.querySelector('div');
+ const styles = window.getComputedStyle(div);
+ assert.equal(styles.backgroundColor, 'rgb(255, 0, 0)');
+
+ {
+ component.backgroundColor = 128;
+ const div = target.querySelector('div');
+ const styles = window.getComputedStyle(div);
+ assert.equal(styles.backgroundColor, 'rgb(128, 0, 0)');
+ }
+ }
+};
diff --git a/test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/main.svelte b/test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/main.svelte
new file mode 100644
index 0000000000..4f44ae2e67
--- /dev/null
+++ b/test/runtime-puppeteer/samples/inline-style-directive-update-with-spread/main.svelte
@@ -0,0 +1,5 @@
+
+
+