fix(vue): support static style diff in updateNode

Tencent · Apr 24, 2023 · 1f4abfd · 1f4abfd
1 parent cc966f7
commit 1f4abfd
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 53 deletions.
diff --git a/packages/hippy-vue/src/renderer/element-node.js b/packages/hippy-vue/src/renderer/element-node.js
@@ -135,7 +135,10 @@ function getLinearGradientColorStop(value) {
  * @param {string|Object|number|boolean} value
  * @returns {(string|{})[]}
  */
-function parseBackgroundImage(property, value) {
+function parseBackgroundImage(property, value, style) {
+  // reset the backgroundImage and linear gradient property
+  delete style[property];
+  removeLinearGradient(property, value, style);
   let processedValue = value;
   let processedProperty = property;
   if (value.indexOf('linear-gradient') === 0) {
@@ -178,7 +181,7 @@ function parseBackgroundImage(property, value) {
  * @param value
  * @param style
  */
-function removeBackgroundImage(property, value, style) {
+function removeLinearGradient(property, value, style) {
   if (property === 'backgroundImage' && style.linearGradient) {
     delete style.linearGradient;
   }
@@ -227,7 +230,7 @@ function removeTextShadowOffset(property, value, style) {
 function removeStyle(property, value, style) {
   if (value === undefined) {
     delete style[property];
-    removeBackgroundImage(property, value, style);
+    removeLinearGradient(property, value, style);
     removeTextShadowOffset(property, value, style);
   }
 }
@@ -389,7 +392,7 @@ class ElementNode extends ViewNode {
   }
 
   setStyles(batchStyles) {
-    if (!batchStyles || typeof batchStyles !== 'object') {
+    if (!batchStyles || typeof batchStyles !== 'object' || Object.keys(batchStyles).length === 0) {
       return;
     }
     Object.keys(batchStyles).forEach((styleKey) => {
@@ -423,7 +426,7 @@ class ElementNode extends ViewNode {
         }
         break;
       case 'backgroundImage': {
-        [key, value] = parseBackgroundImage(key, value);
+        [key, value] = parseBackgroundImage(key, value, this.style);
         break;
       }
       case 'textShadowOffsetX':

diff --git a/packages/hippy-vue/src/runtime/modules/style.js b/packages/hippy-vue/src/runtime/modules/style.js
@@ -36,10 +36,47 @@ function toObject(arr) {
   return res;
 }
 
-function patchStyle(oldVNode, vNode) {
-  if (!oldVNode.data.style && !vNode.data.style) {
-    return;
+function isStyleExisted(oldVNode, vNode) {
+  if (!oldVNode.data && !vNode.data) {
+    return false;
   }
+  if (!oldVNode.data.style
+    && !vNode.data.style
+    && !oldVNode.data.staticStyle
+    && !vNode.data.staticStyle) {
+    return false;
+  };
+  return true;
+}
+
+function mergeStyle(oldStyle, newStyle) {
+  const mergedStyle = {};
+  Object.keys(oldStyle).forEach((name) => {
+    const oldStyleValue = oldStyle[name];
+    const newStyleValue = newStyle[name];
+    if (!isNullOrUndefined(oldStyleValue) && isNullOrUndefined(newStyleValue)) {
+      mergedStyle[normalize(name)] = undefined;
+    }
+  });
+  Object.keys(newStyle).forEach((name) => {
+    const oldStyleValue = oldStyle[name];
+    const newStyleValue = newStyle[name];
+    if (!isNullOrUndefined(newStyleValue) && newStyleValue !== oldStyleValue) {
+      mergedStyle[normalize(name)] = newStyleValue;
+    }
+  });
+  return mergedStyle;
+}
+
+function patchStyle(oldVNode, vNode) {
+  if (!vNode.elm || !isStyleExisted(oldVNode, vNode)) return;
+
+  // get static style, i.e. style defined in the component, style="background-color: red"
+  const oldStaticStyle = oldVNode.data.staticStyle || {};
+  const newStaticStyle = vNode.data.staticStyle || {};
+  const batchedStaticStyle = mergeStyle(oldStaticStyle, newStaticStyle);
+
+  // get dynamic style
   const oldStyle = oldVNode.data.style || {};
   let style = vNode.data.style || {};
   const needClone = style.__ob__;
@@ -54,50 +91,10 @@ function patchStyle(oldVNode, vNode) {
     style = extend({}, style);
     vNode.data.style = style;
   }
-  const batchedStyles = {};
-  // Remove the deleted styles at first
-  Object.keys(oldStyle).forEach((name) => {
-    const oldStyleValue = oldStyle[name];
-    const newStyleValue = style[name];
-    if (!isNullOrUndefined(oldStyleValue) && isNullOrUndefined(newStyleValue)) {
-      batchedStyles[normalize(name)] = undefined;
-    }
-  });
-  // Then set the new styles.
-  Object.keys(style).forEach((name) => {
-    const styleValue = style[name];
-    if (!isNullOrUndefined(styleValue)) {
-      batchedStyles[normalize(name)] = styleValue;
-    }
-  });
-  return batchedStyles;
-}
+  const batchedStyle = mergeStyle(oldStyle, style);
 
-function updateStyle(oldVNode, vNode) {
-  if (!vNode.elm) return;
-  const styles = patchStyle(oldVNode, vNode);
-  vNode.elm.setStyles(styles);
-}
-
-function createStyle(oldVNode, vNode) {
-  if (!vNode.elm) return;
-  if (!vNode.data.staticStyle) {
-    updateStyle(oldVNode, vNode);
-    return;
-  }
-  const batchStyles = {};
-  const { staticStyle } = vNode.data;
-  Object.keys(staticStyle).forEach((name) => {
-    const styleValue = staticStyle[name];
-    if (!isNullOrUndefined(styleValue)) {
-      batchStyles[normalize(name)] = styleValue;
-    }
-  });
-  const styles = patchStyle(oldVNode, vNode);
-  if (styles) {
-    Object.assign(batchStyles, styles);
-  }
-  vNode.elm.setStyles(batchStyles);
+  // set merged styles
+  vNode.elm.setStyles({ ...batchedStaticStyle, ...batchedStyle });;
 }
 
 export function setStyle(vNode, customElem, options = {}) {
@@ -140,6 +137,6 @@ export function setStyle(vNode, customElem, options = {}) {
 }
 
 export default {
-  create: createStyle,
-  update: updateStyle,
+  create: patchStyle,
+  update: patchStyle,
 };