From e02d7fe16eb19a10d37f7c332f2883f238fb5ae3 Mon Sep 17 00:00:00 2001
From: "lihao.ylh" <lihao.ylh@alibaba-inc.com>
Date: Mon, 28 Jun 2021 13:55:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor(perf):=20=E4=B8=8D=E5=86=8D=E4=B8=BA?=
 =?UTF-8?q?=E6=97=A0=E6=A0=B7=E5=BC=8F=E7=9A=84=E8=8A=82=E7=82=B9=E5=88=9B?=
 =?UTF-8?q?=E5=BB=BA=20style=20=E6=A0=87=E7=AD=BE,=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=A0=B7=E5=BC=8F=E5=90=8E=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=20style=20=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/props-reducers/style-reducer.ts       | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/vision-polyfill/src/props-reducers/style-reducer.ts b/packages/vision-polyfill/src/props-reducers/style-reducer.ts
index e9b05d708..b6856f439 100644
--- a/packages/vision-polyfill/src/props-reducers/style-reducer.ts
+++ b/packages/vision-polyfill/src/props-reducers/style-reducer.ts
@@ -1,25 +1,27 @@
 import { project } from '@ali/lowcode-engine';
+import { isPlainObject } from '@ali/lowcode-utils';
 import { toCss } from '@ali/vu-css-style';
 
 export function stylePropsReducer(props: any, node: any) {
   let cssId;
   let cssClass;
   let styleProp;
-  if (props && typeof props === 'object' && props.__style__) {
-    cssId = `_style_pesudo_${node.id.replace(/\$/g, '_')}`;
-    cssClass = `_css_pesudo_${node.id.replace(/\$/g, '_')}`;
+  if (!props || typeof props !== 'object') return props;
+  if (props.__style__) {
+    cssId = `_style_pseudo_${node.id.replace(/\$/g, '_')}`;
+    cssClass = `_css_pseudo_${node.id.replace(/\$/g, '_')}`;
     styleProp = props.__style__;
     appendStyleNode(props, styleProp, cssClass, cssId);
   }
-  if (props && typeof props === 'object' && props.pageStyle) {
-    cssId = '_style_pesudo_engine-document';
+  if (props.pageStyle) {
+    cssId = '_style_pseudo_engine-document';
     cssClass = 'engine-document';
     styleProp = props.pageStyle;
     appendStyleNode(props, styleProp, cssClass, cssId);
   }
-  if (props && typeof props === 'object' && props.containerStyle) {
-    cssId = `_style_pesudo_${node.id}`;
-    cssClass = `_css_pesudo_${node.id.replace(/\$/g, '_')}`;
+  if (props.containerStyle) {
+    cssId = `_style_pseudo_${node.id}`;
+    cssClass = `_css_pseudo_${node.id.replace(/\$/g, '_')}`;
     styleProp = props.containerStyle;
     appendStyleNode(props, styleProp, cssClass, cssId);
   }
@@ -33,26 +35,35 @@ function appendStyleNode(props: any, styleProp: any, cssClass: string, cssId: st
   if (!doc) {
     return;
   }
-  const dom = doc.getElementById(cssId) as HTMLStyleElement;
-  if (typeof styleProp === 'object') {
-    styleProp = toCss(styleProp);
+  if (isPlainObject(styleProp)) {
+    styleProp = isEmptyObject(styleProp) ? '' : toCss(styleProp);
   }
-  if (typeof styleProp === 'string') {
+  if (typeof styleProp === 'string' && styleProp) {
+    const dom = doc.getElementById(cssId) as HTMLStyleElement;
     const newStyleStr = transformStyleStr(styleProp, cssClass);
-    if (dom && stringEquals(dom.textContent!, newStyleStr)) {
+    if (!dom) {
+      const s = doc.createElement('style');
+      s.setAttribute('type', 'text/css');
+      s.setAttribute('id', cssId);
+      doc.getElementsByTagName('head')[0].appendChild(s);
+      s.appendChild(doc.createTextNode(newStyleStr));
       return;
     }
-    if (dom) {
-      dom.parentNode?.removeChild(dom);
+    if (!stringEquals(dom.innerHTML!, newStyleStr)) {
+      dom.innerHTML = newStyleStr;
     }
-    const s = doc.createElement('style');
-    s.setAttribute('type', 'text/css');
-    s.setAttribute('id', cssId);
-    doc.getElementsByTagName('head')[0].appendChild(s);
-    s.appendChild(doc.createTextNode(newStyleStr));
   }
 }
 
+function isEmptyObject(obj: any) {
+  if (!isPlainObject(obj)) return false;
+  let empty = true;
+  for (let k in obj) {
+    empty = false;
+  }
+  return empty;
+}
+
 function stringEquals(str: string, targetStr: string): boolean {
   return removeWhitespace(str) === removeWhitespace(targetStr);
 }