Merge pull request #202 from raxjs/release/miniapp-0811

release/miniapp@0811
raxjs · Aug 11, 2021 · 7c57668 · 7c57668
2 parents 058bd46 + 59d8011
commit 7c57668
Show file tree

Hide file tree

Showing 22 changed files with 163 additions and 133 deletions.
diff --git a/packages/miniapp-render/CHANGELOG.md b/packages/miniapp-render/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## [2.8.0] - 2021-08-11
+
+### Added
+
+- Support passing css variables in style
+
+### Changed
+
+- Refactor DOM API in non-ali miniapp to improve performance and fix render error bug
+- Do not update scroll info from jscore to renderview to fix scroll-view shake
+
 ## [2.7.2] - 2021-07-27
 
 ### Added

diff --git a/packages/miniapp-render/package.json b/packages/miniapp-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "miniapp-render",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "DOM simulator for MiniApp",
   "files": [
     "dist"

diff --git a/packages/miniapp-render/rollup.config.js b/packages/miniapp-render/rollup.config.js
@@ -28,6 +28,7 @@ function getBabelConfig(platform) {
     plugins: [
       '@babel/plugin-proposal-class-properties',
       ['@babel/plugin-proposal-private-methods', { 'loose': false }],
+      ['@babel/plugin-proposal-private-property-in-object', { 'loose': false }],
       ['./scripts/platform-plugin', { platform }]
     ]
   };

diff --git a/packages/miniapp-render/src/builtInComponents/input.js b/packages/miniapp-render/src/builtInComponents/input.js
@@ -15,7 +15,7 @@ const input = {
     eventName: 'input',
     middleware(evt, domNode, nodeId) {
       const value = '' + evt.detail.value;
-      domNode._setAttributeWithOutUpdate('value', value);
+      domNode._setAttributeWithDelayUpdate('value', value);
 
       this.callEvent('input', evt, null, nodeId);
     }
@@ -25,7 +25,7 @@ const input = {
     eventName: 'focus',
     middleware(evt, domNode, nodeId) {
       domNode.__inputOldValue = domNode.value || '';
-      domNode._setAttributeWithOutUpdate('focus-state', true);
+      domNode._setAttributeWithDelayUpdate('focus-state', true);
 
       this.callSimpleEvent('focus', evt, domNode);
     }
@@ -34,7 +34,7 @@ const input = {
     name: 'onInputBlur',
     eventName: 'blur',
     middleware(evt, domNode, nodeId) {
-      domNode._setAttributeWithOutUpdate('focus-state', false);
+      domNode._setAttributeWithDelayUpdate('focus-state', false);
 
       if (!isUndef(domNode.__inputOldValue) && domNode.value !== domNode.__inputOldValue) {
         domNode.__inputOldValue = undefined;

diff --git a/packages/miniapp-render/src/builtInComponents/movable-view.js b/packages/miniapp-render/src/builtInComponents/movable-view.js
@@ -16,17 +16,17 @@ const movableView = {
       name: 'onMovableViewChange',
       eventName: 'change',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('x', evt.detail.x);
-        domNode._setAttributeWithOutUpdate('y', evt.detail.y);
+        domNode._setAttributeWithDelayUpdate('x', evt.detail.x);
+        domNode._setAttributeWithDelayUpdate('y', evt.detail.y);
       }
     },
     {
       name: 'onMovableViewScale',
       eventName: 'scale',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('x', evt.detail.x);
-        domNode._setAttributeWithOutUpdate('y', evt.detail.y);
-        domNode._setAttributeWithOutUpdate('scale-value', evt.detail.scale);
+        domNode._setAttributeWithDelayUpdate('x', evt.detail.x);
+        domNode._setAttributeWithDelayUpdate('y', evt.detail.y);
+        domNode._setAttributeWithDelayUpdate('scale-value', evt.detail.scale);
       }
     }
   ]
@@ -37,8 +37,8 @@ if (isMiniApp) {
     name: 'onMovableViewChangeEnd',
     eventName: 'changeend',
     middleware(evt, domNode) {
-      domNode._setAttributeWithOutUpdate('x', evt.detail.x);
-      domNode._setAttributeWithOutUpdate('y', evt.detail.y);
+      domNode._setAttributeWithDelayUpdate('x', evt.detail.x);
+      domNode._setAttributeWithDelayUpdate('y', evt.detail.y);
     }
   });
 }

diff --git a/packages/miniapp-render/src/builtInComponents/picker-view.js b/packages/miniapp-render/src/builtInComponents/picker-view.js
@@ -13,7 +13,7 @@ export default {
       name: 'onPickerViewChange',
       eventName: 'change',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('value', evt.detail.value);
+        domNode._setAttributeWithDelayUpdate('value', evt.detail.value);
       }
     }
   ]

diff --git a/packages/miniapp-render/src/builtInComponents/picker.js b/packages/miniapp-render/src/builtInComponents/picker.js
@@ -12,7 +12,7 @@ const picker = {
       name: 'onPickerChange',
       eventName: 'change',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('value', evt.detail.value);
+        domNode._setAttributeWithDelayUpdate('value', evt.detail.value);
       }
     }
   ]

diff --git a/packages/miniapp-render/src/builtInComponents/scroll-view.js b/packages/miniapp-render/src/builtInComponents/scroll-view.js
@@ -16,9 +16,9 @@ const ScrollView = {
       name: 'onScrollViewScroll',
       eventName: 'scroll',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('scroll-into-view', '');
-        domNode._setAttributeWithOutUpdate('scroll-top', evt.detail.scrollTop);
-        domNode._setAttributeWithOutUpdate('scroll-left', evt.detail.scrollLeft);
+        domNode._setAttributeWithoutUpdate('scroll-into-view', '');
+        domNode._setAttributeWithoutUpdate('scroll-top', evt.detail.scrollTop);
+        domNode._setAttributeWithoutUpdate('scroll-left', evt.detail.scrollLeft);
       }
     }
   ]

diff --git a/packages/miniapp-render/src/builtInComponents/slider.js b/packages/miniapp-render/src/builtInComponents/slider.js
@@ -9,7 +9,7 @@ export default {
       name: 'onSliderChange',
       eventName: 'change',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('value', evt.detail.value);
+        domNode._setAttributeWithDelayUpdate('value', evt.detail.value);
         domNode.__oldValues = domNode.__oldValues || {};
         domNode.__oldValues.value = evt.detail.value;
       }

diff --git a/packages/miniapp-render/src/builtInComponents/swiper.js b/packages/miniapp-render/src/builtInComponents/swiper.js
@@ -12,7 +12,7 @@ const swiper = {
       name: 'onSwiperChange',
       eventName: 'change',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('current', evt.detail.current);
+        domNode._setAttributeWithDelayUpdate('current', evt.detail.current);
       }
     }
   ]

diff --git a/packages/miniapp-render/src/builtInComponents/switch.js b/packages/miniapp-render/src/builtInComponents/switch.js
@@ -5,7 +5,7 @@ export default {
       name: 'onSwitchChange',
       eventName: 'change',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('checked', evt.detail.value);
+        domNode._setAttributeWithDelayUpdate('checked', evt.detail.value);
       }
     }
   ]

diff --git a/packages/miniapp-render/src/builtInComponents/textarea.js b/packages/miniapp-render/src/builtInComponents/textarea.js
@@ -17,15 +17,15 @@ const textarea = {
     eventName: 'input',
     middleware(evt, domNode, nodeId) {
       domNode.__textareaOldValue = domNode.value || '';
-      domNode._setAttributeWithOutUpdate('focus-state', true);
+      domNode._setAttributeWithDelayUpdate('focus-state', true);
       this.callSimpleEvent('focus', evt, domNode);
     }
   },
   {
     name: 'onTextareaBlur',
     eventName: 'blur',
     middleware(evt, domNode, nodeId) {
-      domNode._setAttributeWithOutUpdate('focus-state', false);
+      domNode._setAttributeWithDelayUpdate('focus-state', false);
       if (!isUndef(domNode.__textareaOldValue) && domNode.value !== domNode.__textareaOldValue) {
         domNode.__textareaOldValue = undefined;
         this.callEvent('change', evt, null, nodeId);
@@ -38,7 +38,7 @@ const textarea = {
     eventName: 'input',
     middleware(evt, domNode, nodeId) {
       const value = '' + evt.detail.value;
-      domNode._setAttributeWithOutUpdate('value', value);
+      domNode._setAttributeWithDelayUpdate('value', value);
 
       this.callEvent('input', evt, null, nodeId);
     }

diff --git a/packages/miniapp-render/src/builtInComponents/video.js b/packages/miniapp-render/src/builtInComponents/video.js
@@ -29,14 +29,14 @@ export default {
       name: 'onVideoTimeUpdate',
       eventName: 'timeupdate',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('currentTime', evt.detail.currentTime);
+        domNode._setAttributeWithDelayUpdate('currentTime', evt.detail.currentTime);
       }
     },
     {
       name: 'onVideoProgress',
       eventName: 'progress',
       middleware(evt, domNode) {
-        domNode._setAttributeWithOutUpdate('buffered', evt.detail.buffered);
+        domNode._setAttributeWithDelayUpdate('buffered', evt.detail.buffered);
       }
     }
   ]

diff --git a/packages/miniapp-render/src/node/attribute.js b/packages/miniapp-render/src/node/attribute.js
@@ -8,6 +8,10 @@ class Attribute {
     this.__value = {};
   }
 
+  setWithoutUpdate(name, value) {
+    this.__value[name] = value;
+  }
+
   set(name, value, immediate = true) {
     const element = this.__element;
     this.__value[name] = value;

diff --git a/packages/miniapp-render/src/node/element.js b/packages/miniapp-render/src/node/element.js
@@ -48,7 +48,7 @@ class Element extends Node {
   // Init attribute
   _initAttributes(attrs = {}) {
     Object.keys(attrs).forEach(name => {
-      this._setAttributeWithOutUpdate(name, attrs[name]);
+      this._setAttributeWithDelayUpdate(name, attrs[name]);
     });
   }
 
@@ -156,7 +156,12 @@ class Element extends Node {
   }
 
   // Sets properties, but does not trigger updates
-  _setAttributeWithOutUpdate(name, value) {
+  _setAttributeWithoutUpdate(name, value) {
+    this.__attrs.setWithoutUpdate(name, value);
+  }
+
+  // Sets properties, and trigger later
+  _setAttributeWithDelayUpdate(name, value) {
     this.__attrs.set(name, value, false);
   }
 
@@ -222,12 +227,21 @@ class Element extends Node {
 
     // An empty string does not add a textNode node
     if (!text) {
-      const payload = {
-        type: 'children',
-        path: `${this._path}.children`,
-        start: 0,
-        deleteCount: this.childNodes.length
-      };
+      let payload;
+      if (isMiniApp) {
+        payload = {
+          type: 'children',
+          path: `${this._path}.children`,
+          start: 0,
+          deleteCount: this.childNodes.length
+        };
+      } else {
+        payload = {
+          type: 'children',
+          path: `${this._path}.children`,
+          value: () => []
+        };
+      }
       this.childNodes.length = 0;
       this._triggerUpdate(payload);
     } else {
@@ -294,13 +308,21 @@ class Element extends Node {
     if (this._isRendered()) {
       node.__rendered = true;
       // Trigger update
-      const payload = {
-        type: 'children',
-        path: `${this._path}.children`,
-        start: this.childNodes.length - 1,
-        deleteCount: 0,
-        item: simplifyDomTree(node)
-      };
+      let payload;
+      if (isMiniApp) {
+        payload = {
+          type: 'children',
+          path: `${this._path}.children`,
+          start: this.childNodes.length - 1,
+          deleteCount: 0,
+          item: simplifyDomTree(node)
+        };
+      } else {
+        payload = {
+          path: node._path,
+          value: () => simplifyDomTree(node)
+        };
+      }
       this._triggerUpdate(payload);
       this._adjustDocument(node);
     }
@@ -322,12 +344,21 @@ class Element extends Node {
       if (this._isRendered()) {
         node.__rendered = false;
         // Trigger update
-        const payload = {
-          type: 'children',
-          path: `${this._path}.children`,
-          start: index,
-          deleteCount: 1
-        };
+        let payload;
+        if (isMiniApp) {
+          payload = {
+            type: 'children',
+            path: `${this._path}.children`,
+            start: index,
+            deleteCount: 1
+          };
+        } else {
+          payload = {
+            type: 'children',
+            path: `${this._path}.children`,
+            value: () => this.childNodes.map(simplifyDomTree)
+          };
+        }
         this._triggerUpdate(payload);
       }
     }
@@ -355,13 +386,29 @@ class Element extends Node {
     }
     if (this._isRendered()) {
       node.__rendered = true;
-      const payload = {
-        type: 'children',
-        path: `${this._path}.children`,
-        deleteCount: 0,
-        item: simplifyDomTree(node),
-        start: insertIndex === -1 ? this.childNodes.length - 1 : insertIndex
-      };
+      let payload;
+      if (isMiniApp) {
+        payload = {
+          type: 'children',
+          path: `${this._path}.children`,
+          deleteCount: 0,
+          item: simplifyDomTree(node),
+          start: insertIndex === -1 ? this.childNodes.length - 1 : insertIndex
+        };
+      } else {
+        if (insertIndex === -1) {
+          payload = {
+            path: node._path,
+            value: () => simplifyDomTree(node)
+          };
+        } else {
+          payload = {
+            type: 'children',
+            path: `${this._path}.children`,
+            value: () => this.childNodes.map(simplifyDomTree)
+          };
+        }
+      }
 
       // Trigger update
       this._triggerUpdate(payload);
@@ -392,13 +439,21 @@ class Element extends Node {
     if (this._isRendered()) {
       node.__rendered = true;
       // Trigger update
-      const payload = {
-        type: 'children',
-        path: `${this._path}.children`,
-        start: replaceIndex === -1 ? this.childNodes.length - 1 : replaceIndex,
-        deleteCount: replaceIndex === -1 ? 0 : 1,
-        item: simplifyDomTree(node)
-      };
+      let payload;
+      if (isMiniApp) {
+        payload = {
+          type: 'children',
+          path: `${this._path}.children`,
+          start: replaceIndex === -1 ? this.childNodes.length - 1 : replaceIndex,
+          deleteCount: replaceIndex === -1 ? 0 : 1,
+          item: simplifyDomTree(node)
+        };
+      } else {
+        payload = {
+          path: node._path,
+          value: () => simplifyDomTree(node)
+        };
+      }
       this._triggerUpdate(payload);
       this._adjustDocument(node);
     }

diff --git a/packages/miniapp-render/src/node/element/input.js b/packages/miniapp-render/src/node/element/input.js
@@ -34,15 +34,15 @@ class HTMLInputElement extends Element {
   }
 
   // Sets properties, but does not trigger updates
-  _setAttributeWithOutUpdate(name, value) {
+  _setAttributeWithDelayUpdate(name, value) {
     if (name === 'focus' || name === 'autofocus' || name === 'autoFocus') {
       // autoFocus is passed by rax-textinput
       name = 'focus-state';
     }
     if (name === 'value') {
       this.__changed = true;
     }
-    super._setAttributeWithOutUpdate(name, value);
+    super._setAttributeWithDelayUpdate(name, value);
   }
 
   getAttribute(name) {