perf(alita wx-react): 基本组件view/text的默认样式改为class实现

Author: ykforerlang

mptemp/commonwxs.wxs

@@ -10,11 +10,30 @@ var DEFAULTCONTAINERSTYLE =
 
 
 var getFinalStyle = function (d) {
-  return d.replace('_1_', DEFAULTVIEWSTYLE)
-          .replace('_2_', DEFAULTTEXTWSTYLE)
-          .replace('_3_', DEFAULTINNERTEXTWSTYLE)
-          .replace('_4_', DEFAULTSCROLLVIEWSTYLE)
-          .replace('_5_', DEFAULTCONTAINERSTYLE)
+  if (!d) return ''
+
+  if (d === '_5_') return DEFAULTCONTAINERSTYLE
+
+  if (d.charAt(0) !== '_') {
+     return d
+  }
+
+
+  if (d.charAt(1) === '1') {
+     return d.replace('_1_', DEFAULTVIEWSTYLE)
+  }
+
+  if (d.charAt(1) === '2') {
+     return d.replace('_2_', DEFAULTTEXTWSTYLE)
+  }
+
+  if (d.charAt(1) === '3') {
+     return d.replace('_3_', DEFAULTINNERTEXTWSTYLE)
+  }
+
+  if (d.charAt(1) === '4') {
+     return d.replace('_4_', DEFAULTSCROLLVIEWSTYLE)
+  }
 }
 
 var lite = function(v) {

mptemp/compCommon.wxss

@@ -1,3 +1,67 @@
+.view {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    min-width: 0;
+    min-height: 0;
+}
+
+.text {
+    display: inline-block;
+    flex-grow: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    flex-direction: column;
+    box-sizing: border-box ;
+    border-width: 0;
+    border-style: solid;
+    min-width: 0;
+    min-height: 0;
+}
+
+.textInner {
+    display: inline;
+    min-width: 0;
+    min-height: 0;
+}
+
+.scroll {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    box-sizing: border-box;
+    flex: 1 ;
+    border-width: 0;
+    border-style: solid;
+    min-width: 0;
+    min-height: 0;
+}
+
+.container {
+    display: flex;
+    flex: 1;
+    flex-basis: 100%;
+    width: 100%;
+    height: 100%;
+    justify-content: inherit;
+    align-items: inherit;
+    flex-wrap: inherit;
+    box-sizing: border-box;
+    border:none;
+    flex-direction: inherit;
+    border-radius: inherit;
+    position: static;
+    min-width: 0;
+    min-height: 0;
+}
+
+
 /*TouchableOpacity TouchableHighlight 使用*/
 .thFabricate {
     display: none;

packages/wx-react/miniprogram_dist/render.js

@@ -71,7 +71,7 @@ export default function render(vnode, parentInst, parentContext, data, oldData,
                 } else if (k === 'mode') {
                     data[`${vnodeDiuu}${k}`] = resizeMode(v)
                 } else if (k === 'style' && finalNodeType !== 'TouchableWithoutFeedback') {
-                    data[`${vnodeDiuu}${k}`] = tackleWithStyleObj(v, finalNodeType)
+                    data[`${vnodeDiuu}${k}`] = tackleWithStyleObj(v, isFirstEle ? finalNodeType : null)
                 } else if (k === 'activeOpacity') {
                     data[`${vnodeDiuu}hoverClass`] = activeOpacityHandler(v)
                 } else {
@@ -93,11 +93,6 @@ export default function render(vnode, parentInst, parentContext, data, oldData,
                 })
             }
 
-
-            if (!props.style && finalNodeType !== 'TouchableWithoutFeedback') {
-                data[`${vnodeDiuu}style`] = tackleWithStyleObj('', finalNodeType)
-            }
-
             if (props.activeOpacity === undefined && finalNodeType === 'TouchableOpacity') {
                 data[`${vnodeDiuu}hoverClass`] = activeOpacityHandler(0.2)
             }
@@ -124,6 +119,10 @@ export default function render(vnode, parentInst, parentContext, data, oldData,
                 }
             }
 
+            if (props.original === 'TouchableWithoutFeedback') {
+                // isFirstEle 需要往外上报样式
+                children[0].isFirstEle = true
+            }
 
             for (let i = 0; i < children.length; i++) {
                 const childVnode = children[i]

src/tran/classNameHandler.js

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Areslabs.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import traverse from "@babel/traverse";
+import * as t from "@babel/types"
+
+/**
+ * 统一处理节点的类名添加
+ * @param ast
+ * @param info
+ * @returns {*}
+ */
+export default function classNameHandler (ast,info) {
+
+    traverse(ast, {
+        exit: path => {
+            if (path.type === 'JSXOpeningElement'
+                && path.node.name.name === 'view'
+            ) {
+                const attris = path.node.attributes
+                const original = (attris.filter(item => item.type === 'JSXAttribute' && item.name.name === 'original'))[0].value.value
+
+                if (original === 'View'
+                    || original === 'AnimatedView'
+                    || original === 'AnimatedText'
+                    || original === 'TouchableOpacity'
+                    || original === 'TouchableHighlight'
+                ) {
+                    attris.push(
+                        t.jsxAttribute(t.jsxIdentifier('class'), t.stringLiteral('view'))
+                    )
+                } else if (
+                    original === 'OuterText'
+                ) {
+                    attris.push(
+                        t.jsxAttribute(t.jsxIdentifier('class'), t.stringLiteral('text'))
+                    )
+                } else if (
+                    original === 'InnerText'
+                ) {
+                    attris.push(
+                        t.jsxAttribute(t.jsxIdentifier('class'), t.stringLiteral('textInner'))
+                    )
+                } else if (
+                    original === 'TouchableWithoutFeedback'
+                ) {
+                    // do nothing
+                } else {
+                    attris.push(
+                        t.jsxAttribute(t.jsxIdentifier('class'), t.stringLiteral('view'))
+                    )
+                }
+            }
+
+            if (path.type === 'JSXOpeningElement'
+                && path.node.name.name === 'image'
+            ) {
+                // image 不支持包裹元素了，so, do nothing!
+            }
+
+        }
+
+    })
+
+    return ast
+}
+

src/tran/index.js

@@ -24,6 +24,7 @@ import addEventHandler from './addEventHandler'
 import addWXPrefixHandler from './addWXPrefixHandler'
 import cptCompHandler from './cptCompHandler'
 import literalTemplate from './literalTemplate'
+import classNameHandler from './classNameHandler'
 
 export default function (ast, filepath, isFuncComp, entryFilePath, isPageComp, isStatelessComp) {
     const info = {
@@ -70,6 +71,8 @@ export default function (ast, filepath, isFuncComp, entryFilePath, isPageComp, i
 
     ast = addEventHandler(ast, info)
 
+    ast = classNameHandler(ast, info)
+
     ast = geneAllTemplate(ast, info)
 
     geneWxml(info)