Merge pull request #210 from raxjs/feat/support-flex

feat(miniapp): support flex in baidu and kuaishou
raxjs · Aug 31, 2021 · 395d941 · 395d941
2 parents 05c701d + 03046af
commit 395d941
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 119 deletions.
diff --git a/packages/miniapp-render/scripts/platform-plugin.js b/packages/miniapp-render/scripts/platform-plugin.js
@@ -1,13 +1,13 @@
 const t = require('@babel/types');
 // Collect import specifiers
 const specified = [];
-const platformEnvValues = ['isMiniApp', 'isWeChatMiniProgram'];
+const platformEnvValues = ['isMiniApp', 'isWeChatMiniProgram', 'isByteDanceMicroApp', 'isBaiduSmartProgram', 'isKuaiShouMiniProgram'];
 const platformMap = {
   ali: 'isMiniApp',
   wechat: 'isWeChatMiniProgram',
   bytedance: 'isByteDanceMicroApp',
   baidu: 'isBaiduSmartProgram',
-  kuaishou: 'isKuaishouMiniProgram'
+  kuaishou: 'isKuaiShouMiniProgram'
 };
 
 function variableDeclarationMethod(name, value) {

diff --git a/packages/miniapp-render/src/constants.js b/packages/miniapp-render/src/constants.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { isBaiduSmartProgram, isKuaiShouMiniProgram } from 'universal-env';
+
 export const NATIVE_EVENTS_LIST = [
   'onBack',
   'onKeyboardHeight',
@@ -28,11 +31,15 @@ export const BODY_NODE_ID = 'e-body';
 
 export const INDEX_PAGE = 'index-page';
 
-export const STATIC_COMPONENTS = new Set(['view', 'text', 'image']); // With no events components
+/**
+ * In Baidu SmartProgram and KuaiShou MiniProgram, view and h-element template are modified to support flex, so pure, static and catch elements are omitted
+ */
+
+export const STATIC_COMPONENTS = new Set(isBaiduSmartProgram || isKuaiShouMiniProgram ? ['text', 'image'] : ['view', 'text', 'image']); // With no events components
 
-export const PURE_COMPONENTS = new Set(['view', 'h-element']); // With no events or props && equal to TOUCH_COMPONENTS
+export const PURE_COMPONENTS = new Set(isBaiduSmartProgram || isKuaiShouMiniProgram ? [] : ['view', 'h-element']); // With no events or props && equal to TOUCH_COMPONENTS
 
-export const CATCH_COMPONENTS = new Set(['view', 'h-element']); // With catchTouchMove events
+export const CATCH_COMPONENTS = new Set(isBaiduSmartProgram || isKuaiShouMiniProgram ? [] : ['view', 'h-element']); // With catchTouchMove events
 
 export const APPEAR_COMPONENT = 'view'; // Without appear event components
 

diff --git a/packages/miniapp-render/src/node/element.js b/packages/miniapp-render/src/node/element.js
@@ -116,6 +116,8 @@ class Element extends Node {
     if (hasCatchTouchMoveFlag) {
       CATCH_COMPONENTS.has(this.__tmplName) && (nodeTypePrefix = 'catch-');
     }
+
+    // Fix scroll-view shake problem caused by scroll-left or scroll-top
     if (isWeChatMiniProgram && hasAnchorScrollFlag) {
       ANCHOR_COMPONENT === this.__tmplName && (nodeTypePrefix = 'anchor-');
     }

diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/platforms/baidu.js b/packages/rax-miniapp-runtime-webpack-plugin/src/platforms/baidu.js
@@ -37,36 +37,6 @@ const View = {
   }
 };
 
-const CatchView = Object.assign({}, View);
-
-const StaticView = {
-  props: {
-    'hover-class': addSingleQuote('none'),
-    'hover-start-time': '50',
-    'hover-stay-time': '400',
-    'hover-stop-propagation': 'false',
-    animation: ''
-  }
-};
-
-const PureView = {};
-
-const NoTouchView = {
-  props: {
-    'hover-class': addSingleQuote('none'),
-    'hover-start-time': '50',
-    'hover-stay-time': '400',
-    'hover-stop-propagation': 'false',
-    animation: ''
-  },
-  events: {
-    ...animationEvents
-  },
-  basicEvents: {
-    ...tapEvents
-  }
-};
-
 const HElement = {
   props: {
     animation: ''
@@ -77,19 +47,6 @@ const HElement = {
   }
 };
 
-const CatchHElement = Object.assign({}, HElement);
-
-const PureHElement = {};
-
-const NoTouchHElement = {
-  props: {
-    animation: ''
-  },
-  basicEvents: {
-    ...tapEvents
-  }
-};
-
 const HComment = {};
 
 const Swiper = {
@@ -821,10 +778,6 @@ const OfficialAccount = {
 
 exports.internalComponents = {
   View,
-  CatchView,
-  StaticView,
-  PureView,
-  NoTouchView,
   Swiper,
   SwiperItem,
   ScrollView,
@@ -865,20 +818,10 @@ exports.internalComponents = {
   LivePusher,
   OfficialAccount,
   HElement,
-  CatchHElement,
-  PureHElement,
-  NoTouchHElement,
   HComment
 };
 
 exports.derivedComponents = new Map([
-  ['CatchView', 'View'],
-  ['StaticView', 'View'],
-  ['PureView', 'View'],
-  ['NoTouchView', 'View'],
-  ['CatchHElement', 'View'],
-  ['PureHElement', 'View'],
-  ['NoTouchHElement', 'View'],
   ['HElement', 'View'],
   ['StaticText', 'Text'],
   ['StaticImage', 'Image'],
@@ -945,7 +888,35 @@ exports.shouldNotGenerateTemplateComponents = new Set([
   'MovableView'
 ]);
 
+const flattenViewLevel = 8;
+function generateFlattenView(level, component) {
+  if (level === 0) {
+    return '<template is="RAX_TMPL_CHILDREN_0" data="{{{r: item.children}}}" />';
+  }
+  const child = generateFlattenView(level - 1, component);
+  let attributes = 'animation="{{item[\'animation\']}}" bindtap="onTap" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchcancel="onTouchCancel" bindtouchend="onTouchEnd" bindlongtap="onLongTap" style="{{item.style}}" class="{{item.class}}" id="{{item.id}}" data-private-node-id="{{item.nodeId}}"';
+  if (component === 'view') {
+    attributes += ' hover-class="{{item[\'hover-class\']||\'none\'}}" hover-start-time="{{tool.a(item[\'hover-start-time\'],50)}}" hover-stay-time="{{tool.a(item[\'hover-stay-time\'],400)}}" hover-stop-propagation="{{tool.a(item[\'hover-stop-propagation\'],false)}}"';
+  }
+  const template =
+`<block s-for="{{${level === flattenViewLevel ? 'r' : 'item'}.children}}" s-key="nodeId">
+  <view s-if="item.nodeType==='${component}'&&(item.class||item.style)" ${attributes}>
+    ${child}
+  </view>
+  <block s-elif="{{item.nodeId}}">
+    <template is="{{'RAX_TMPL_0_' + item.nodeType}}" data="{{{r: item}}}" />
+  </block>
+  <block s-else>
+    <block>{{item.content}}</block>
+  </block>
+</block>
+`;
+  return template;
+}
+
 exports.needModifyChildrenComponents = {
+  HElement: (children) => `${generateFlattenView(flattenViewLevel, 'h-element')}`,
+  View: (children) => `${generateFlattenView(flattenViewLevel, 'view')}`,
   Swiper: (children, level) => `
     <swiper-item s-for="{{r.children}}" s-if="{{item.nodeType !== 'h-comment'}}" s-key="nodeId">
       <template is="RAX_TMPL_CHILDREN_0" data="{{{r: item.children}}}" />

diff --git a/packages/rax-miniapp-runtime-webpack-plugin/src/platforms/kuaishou.js b/packages/rax-miniapp-runtime-webpack-plugin/src/platforms/kuaishou.js
@@ -37,36 +37,6 @@ const View = {
   }
 };
 
-const CatchView = Object.assign({}, View);
-
-const StaticView = {
-  props: {
-    'hover-class': addSingleQuote('none'),
-    'hover-start-time': '50',
-    'hover-stay-time': '400',
-    'hover-stop-propagation': 'false',
-    animation: ''
-  }
-};
-
-const PureView = {};
-
-const NoTouchView = {
-  props: {
-    'hover-class': addSingleQuote('none'),
-    'hover-start-time': '50',
-    'hover-stay-time': '400',
-    'hover-stop-propagation': 'false',
-    animation: ''
-  },
-  events: {
-    ...animationEvents
-  },
-  basicEvents: {
-    ...tapEvents
-  }
-};
-
 const HElement = {
   props: {
     animation: ''
@@ -77,19 +47,6 @@ const HElement = {
   }
 };
 
-const CatchHElement = Object.assign({}, HElement);
-
-const PureHElement = {};
-
-const NoTouchHElement = {
-  props: {
-    animation: ''
-  },
-  basicEvents: {
-    ...tapEvents
-  }
-};
-
 const HComment = {};
 
 const Swiper = {
@@ -821,10 +778,6 @@ const OfficialAccount = {
 
 exports.internalComponents = {
   View,
-  CatchView,
-  StaticView,
-  PureView,
-  NoTouchView,
   Swiper,
   SwiperItem,
   ScrollView,
@@ -865,20 +818,10 @@ exports.internalComponents = {
   LivePusher,
   OfficialAccount,
   HElement,
-  CatchHElement,
-  PureHElement,
-  NoTouchHElement,
   HComment
 };
 
 exports.derivedComponents = new Map([
-  ['CatchView', 'View'],
-  ['StaticView', 'View'],
-  ['PureView', 'View'],
-  ['NoTouchView', 'View'],
-  ['CatchHElement', 'View'],
-  ['PureHElement', 'View'],
-  ['NoTouchHElement', 'View'],
   ['HElement', 'View'],
   ['StaticText', 'Text'],
   ['StaticImage', 'Image'],
@@ -945,7 +888,35 @@ exports.shouldNotGenerateTemplateComponents = new Set([
   'MovableView'
 ]);
 
+const flattenViewLevel = 8;
+function generateFlattenView(level, component) {
+  if (level === 0) {
+    return '<template is="RAX_TMPL_CHILDREN_0" data="{{r: item.children}}" />';
+  }
+  const child = generateFlattenView(level - 1, component);
+  let attributes = 'animation="{{item[\'animation\']}}" bindtap="onTap" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchcancel="onTouchCancel" bindtouchend="onTouchEnd" bindlongtap="onLongTap" style="{{item.style}}" class="{{item.class}}" id="{{item.id}}" data-private-node-id="{{item.nodeId}}"';
+  if (component === 'view') {
+    attributes += ' hover-class="{{item[\'hover-class\']||\'none\'}}" hover-start-time="{{tool.a(item[\'hover-start-time\'],50)}}" hover-stay-time="{{tool.a(item[\'hover-stay-time\'],400)}}" hover-stop-propagation="{{tool.a(item[\'hover-stop-propagation\'],false)}}"';
+  }
+  const template =
+`<block ks:for="{{${level === flattenViewLevel ? 'r' : 'item'}.children}}" ks:key="nodeId">
+  <view ks:if="item.nodeType==='${component}'&&(item.class||item.style)" ${attributes}>
+    ${child}
+  </view>
+  <block ks:elif="{{item.nodeId}}">
+    <template is="{{'RAX_TMPL_0_' + item.nodeType}}" data="{{r: item}}" />
+  </block>
+  <block ks:else>
+    <block>{{item.content}}</block>
+  </block>
+</block>
+`;
+  return template;
+}
+
 exports.needModifyChildrenComponents = {
+  HElement: (children) => `${generateFlattenView(flattenViewLevel, 'h-element')}`,
+  View: (children) => `${generateFlattenView(flattenViewLevel, 'view')}`,
   Swiper: (children, level) => `
     <swiper-item ks:for="{{r.children}}" ks:if="{{item.nodeType !== 'h-comment'}}" ks:key="nodeId">
       <template is="RAX_TMPL_CHILDREN_0" data="{{r: item.children}}" />