feat(vue): add vue style diff

Tencent · Oct 18, 2023 · fa579d1 · fa579d1
1 parent aa93c41
commit fa579d1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 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
@@ -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
@@ -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);
   }