From fa579d1a26c39f9d0a3f3feee660f5586403955d Mon Sep 17 00:00:00 2001
From: zealotchen <zealotchen@tencent.com>
Date: Wed, 18 Oct 2023 19:12:24 +0800
Subject: [PATCH] feat(vue): add vue style diff

---
 .../hippy-vue/src/renderer/element-node.js    |  2 +-
 .../hippy-vue/src/renderer/native/index.js    | 35 ++++++++++++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/driver/js/packages/hippy-vue/src/renderer/element-node.js b/driver/js/packages/hippy-vue/src/renderer/element-node.js
index d6891496161..a25e1f6f34d 100644
--- a/driver/js/packages/hippy-vue/src/renderer/element-node.js
+++ b/driver/js/packages/hippy-vue/src/renderer/element-node.js
@@ -405,7 +405,7 @@ class ElementNode extends ViewNode {
       if (typeof this.filterAttribute === 'function') {
         this.filterAttribute(this.attributes);
       }
-      !options.notToNative && updateChild(this);
+      !options.notToNative && updateChild(this, options.notUpdateStyle);
     } catch (err) {
       // Throw error in development mode
       if (isDev()) {
diff --git a/driver/js/packages/hippy-vue/src/renderer/native/index.js b/driver/js/packages/hippy-vue/src/renderer/native/index.js
index 8438475025a..82c18710a37 100644
--- a/driver/js/packages/hippy-vue/src/renderer/native/index.js
+++ b/driver/js/packages/hippy-vue/src/renderer/native/index.js
@@ -422,6 +422,24 @@ function getEventNode(targetNode) {
   return eventNode;
 }
 
+/**
+ * getEventNode - translate to native node.
+ * @param targetNode
+ */
+function getNativeNode(rootViewId, targetNode, refInfo = {}, style) {
+  const nativeNode = {
+    id: targetNode.nodeId,
+    pId: (targetNode.parentNode && targetNode.parentNode.nodeId) || rootViewId,
+    name: targetNode.meta.component.name,
+    props: {
+      ...getNativeProps(targetNode),
+      style,
+    },
+    tagName: targetNode.tagName,
+  };
+  return [nativeNode, refInfo, { skipStyleDiff: true }];
+}
+
 /**
  * Render Element to native
  */
@@ -638,19 +656,26 @@ function updateEvent(parentNode) {
   endBatch(app);
 }
 
-function updateChild(parentNode) {
+function updateChild(parentNode, notUpdateStyle = false) {
   if (!parentNode.isMounted) {
     return;
   }
   const app = getApp();
   const { $options: { rootViewId } } = app;
-  const  [nativeNode, eventNode, printedNode] = renderToNative(rootViewId, parentNode);
+  let nativeNode;
+  let eventNode;
+  let printedNode;
+  if (notUpdateStyle) {
+    nativeNode = getNativeNode(rootViewId, parentNode, refInfo);
+  } else {
+    [nativeNode, eventNode, printedNode] = renderToNative(rootViewId, parentNode);
+  }
   if (nativeNode) {
     batchNodes.push({
       type: NODE_OPERATION_TYPES.updateNode,
-      nodes: [nativeNode],
-      eventNodes: [eventNode],
-      printedNodes: isDev() ? [printedNode] : [],
+      nodes: nativeNode ? [nativeNode] : [],
+      eventNodes: eventNode ? [eventNode] : [],
+      printedNodes: isDev() && printedNode ? [printedNode] : [],
     });
     endBatch(app);
   }