From 05419a85b6c67e70e96e3afddb907fba3fbcf28e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20de=20Dios=20Mart=C3=ADnez=20Vallejo?= Date: Sat, 15 Apr 2023 18:50:56 +0200 Subject: [PATCH 1/4] fix style undefined with hmr --- src/renderer/modules/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/modules/style.ts b/src/renderer/modules/style.ts index 40a631a6..3dc3df71 100644 --- a/src/renderer/modules/style.ts +++ b/src/renderer/modules/style.ts @@ -44,7 +44,7 @@ function removeStyleProperty(el: NSVElement, property: string) { property = normalizeProperty(property); // only delete styles we added - if (_sov.has(property)) { + if (_sov.has(property) && _sov.get(property)) { const originalValue = _sov.get(property); _sov.delete(property); // edge case: if a style property also exists as an attribute (ie backgroundColor) From 0d7f8564f62d29eb0da94bab2ec313929b188430 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20de=20Dios=20Mart=C3=ADnez=20Vallejo?= Date: Sat, 15 Apr 2023 23:17:19 +0200 Subject: [PATCH 2/4] fix set value on internal style --- src/renderer/modules/style.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/modules/style.ts b/src/renderer/modules/style.ts index 3dc3df71..e9eeccb6 100644 --- a/src/renderer/modules/style.ts +++ b/src/renderer/modules/style.ts @@ -1,7 +1,7 @@ import { NSVElement } from "../../dom"; import { NormalizedStyle } from "@vue/shared"; -type Style = string | null; +type Style = string | Record | null; function normalizeStyle(style: NormalizedStyle | Style): NormalizedStyle { if (!style) { @@ -32,7 +32,7 @@ function addStyleProperty(el: NSVElement, property: string, value: any) { property = normalizeProperty(property); if (!_sov.has(property)) { - _sov.set(property, el.style[property]); + _sov.set(property, value); } el.style[property] = value; @@ -44,7 +44,7 @@ function removeStyleProperty(el: NSVElement, property: string) { property = normalizeProperty(property); // only delete styles we added - if (_sov.has(property) && _sov.get(property)) { + if (_sov.has(property)) { const originalValue = _sov.get(property); _sov.delete(property); // edge case: if a style property also exists as an attribute (ie backgroundColor) From 6958c28b90fe99546221535ced4ab7159e89e95c Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Tue, 18 Apr 2023 17:11:46 +0200 Subject: [PATCH 3/4] refactor: try restoring values and set to null in catch --- src/renderer/modules/style.ts | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/renderer/modules/style.ts b/src/renderer/modules/style.ts index e9eeccb6..81f309f0 100644 --- a/src/renderer/modules/style.ts +++ b/src/renderer/modules/style.ts @@ -1,15 +1,18 @@ import { NSVElement } from "../../dom"; import { NormalizedStyle } from "@vue/shared"; -type Style = string | Record | null; +type Style = string | Record | null; function normalizeStyle(style: NormalizedStyle | Style): NormalizedStyle { if (!style) { return null; } - if (typeof style === "string" && style?.trim().charAt(0) === "{") { - return JSON.parse(style); + if (typeof style === "string") { + if (style?.trim().charAt(0) === "{") { + return JSON.parse(style); + } + // todo: check if a style can be a string but not json? } return style as NormalizedStyle; @@ -32,7 +35,7 @@ function addStyleProperty(el: NSVElement, property: string, value: any) { property = normalizeProperty(property); if (!_sov.has(property)) { - _sov.set(property, value); + _sov.set(property, el.style[property]); } el.style[property] = value; @@ -51,7 +54,14 @@ function removeStyleProperty(el: NSVElement, property: string) { // changing the attribute will not update our originalValue, so when removing // the previous color will be applied. Fixing this would involve listening to // individual attribute changes, and it's not worth the overhead. - el.style[property] = originalValue; + try { + el.style[property] = originalValue; + } catch (err) { + // hack: if the original value is invalid, we can't set it back to it's original value + // instead we set it to null, which will remove the style, however this may + // still lead to incorrect styling in some cases. + el.style[property] = null; + } } } From b84a0bc00bf68ef28ddd4070b18cfc7bc5e37db7 Mon Sep 17 00:00:00 2001 From: Igor Randjelovic Date: Tue, 18 Apr 2023 17:25:11 +0200 Subject: [PATCH 4/4] fix: support string and array style bindings --- src/renderer/modules/style.ts | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/renderer/modules/style.ts b/src/renderer/modules/style.ts index 81f309f0..fc490ded 100644 --- a/src/renderer/modules/style.ts +++ b/src/renderer/modules/style.ts @@ -1,5 +1,11 @@ import { NSVElement } from "../../dom"; -import { NormalizedStyle } from "@vue/shared"; +import { + NormalizedStyle, + parseStringStyle, + isArray, + isString, + isObject, +} from "@vue/shared"; type Style = string | Record | null; @@ -8,14 +14,31 @@ function normalizeStyle(style: NormalizedStyle | Style): NormalizedStyle { return null; } - if (typeof style === "string") { - if (style?.trim().charAt(0) === "{") { + if (isString(style)) { + if (style.trim().charAt(0) === "{") { return JSON.parse(style); } - // todo: check if a style can be a string but not json? + + return parseStringStyle(style); + } + + if (isArray(style)) { + return style.reduce( + ( + normalizedStyle: NormalizedStyle, + currentStyle: NormalizedStyle | Style + ) => { + return Object.assign(normalizedStyle, normalizeStyle(currentStyle)); + }, + {} + ); + } + + if (isObject(style)) { + return style as NormalizedStyle; } - return style as NormalizedStyle; + return {}; } function normalizeProperty(property: string) {