feat(alita wx-react): 减少JSX是文本的时候，生成的小程序的结构

Author: ykforerlang

mptemp/commonwxs.wxs

@@ -17,6 +17,11 @@ var getFinalStyle = function (d) {
           .replace('_5_', DEFAULTCONTAINERSTYLE)
 }
 
+var lite = function(v) {
+    return v.constructor === 'Number' || v.constructor === 'String'
+}
+
 module.exports = {
-    getFinalStyle: getFinalStyle
+    getFinalStyle: getFinalStyle,
+    lite: lite
 };

packages/wx-react/miniprogram_dist/render.js

@@ -147,17 +147,14 @@ export default function render(vnode, parentInst, parentContext, data, oldData,
                 || tempVnode === null
             ) {
                 // do nothing
-                return
+                data[datakey] = ''
             } else if (typeof tempVnode === 'string'
                 || typeof tempVnode === 'number'
             ) {
                 // 不是jsx的情况
-                data[datakey] = {
-                    isLiteral: true,
-                    v: tempVnode
-                }
+                data[datakey] = tempVnode
             } else if (Array.isArray(tempVnode)) {
-                // key必须明确指定，对于不知道key的情况， React和小程序处理可能存在差异，照成两个平台的行为差异
+                // key必须明确指定，对于不知道key的情况， React和小程序处理可能存在差异，造成两个平台的行为差异
 
                 let oldSubDataKeyMap = {}
                 if (oldData && oldData[datakey] && oldData[datakey].isArray) {
@@ -180,10 +177,7 @@ export default function render(vnode, parentInst, parentContext, data, oldData,
                     if (typeof subVnode === 'string'
                         || typeof subVnode === 'number'
                     ) {
-                        data[datakey].v.push({
-                            isLiteral: true,
-                            v: subVnode
-                        })
+                        data[datakey].v.push(subVnode)
                         continue
                     }
 

src/tran/addWXPrefixHandler.js

@@ -62,6 +62,7 @@ export default function addWXPrefixHandler (ast) {
 }
 
 function addWXPrefix(path) {
+    const {textComp} = global.execArgs
 
     // Picker.Item
     if (path.node.name.type === 'JSXMemberExpression') {
@@ -95,13 +96,13 @@ function addWXPrefix(path) {
     }
 
     // Text 特殊需要处理
-    if (name === 'Text' && isInText(path)) {
+    if (textComp.has(name) && isInText(path)) {
         path.node.name.name = `view`
         addViewOriginalAttri(path, "InnerText")
         return
     }
 
-    if (name === 'Text' && !isInText(path)) {
+    if (textComp.has(name) && !isInText(path)) {
         path.node.name.name = `view`
         addViewOriginalAttri(path, "OuterText")
         return
@@ -113,6 +114,7 @@ function addWXPrefix(path) {
 }
 
 function isInText(path) {
+    const {textComp} = global.execArgs
     if (path.parentPath.parentPath.node.openingElement) {
         const op = path.parentPath.parentPath.node.openingElement
 
@@ -124,10 +126,7 @@ function isInText(path) {
             })
         }
 
-
-        return (
-            op.name.name === 'Text'
-        )
+        return textComp.has(op.name.name)
     }
     return false
 }

src/tran/geneWxml.js

@@ -69,18 +69,12 @@ export default function(info) {
 <template name="${name}">
     <block wx:if="{{isArray}}">
         <block wx:for="{{v}}" wx:key="key">
-            <template wx:if="{{item.tempName}}" is="{{item.tempName}}" data="{{...item}}"></template>
-            <block wx:if="{{item.isLiteral}}">
-                {{item.v}}
-            </block>
+            <block wx:if="{{tools.lite(item)}}">{{item}}</block> 
+            <template wx:else is="{{item.tempName}}" data="{{...item}}"></template>
         </block>
     </block>
-    <block wx:elif="{{isJSX}}">
-        <template is="{{v.tempName}}" data="{{...v}}"></template>
-    </block>
-    <block wx:elif="{{isLiteral}}">{{v}}</block>
+    <template wx:elif="{{isJSX}}" is="{{v.tempName}}" data="{{...v}}"></template>
 </template>
-
         `;
 
         templateWxml = subT + templateWxml;

src/tran/index.js

@@ -23,6 +23,7 @@ import compOutElementToBlock from './compOutElementToBlock'
 import addEventHandler from './addEventHandler'
 import addWXPrefixHandler from './addWXPrefixHandler'
 import cptCompHandler from './cptCompHandler'
+import literalTemplate from './literalTemplate'
 
 export default function (ast, filepath, isFuncComp, entryFilePath, isPageComp, isStatelessComp) {
     const info = {
@@ -65,6 +66,8 @@ export default function (ast, filepath, isFuncComp, entryFilePath, isPageComp, i
 
     geneReactJS(ast, info)
 
+    ast = literalTemplate(ast, info)
+
     ast = addEventHandler(ast, info)
 
     ast = geneAllTemplate(ast, info)

src/tran/literalTemplate.js

@@ -0,0 +1,59 @@
+/**
+ * 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"
+
+/**
+ * 如果 由childrenToTemplate生成的template 最终运行的结果是literal，那直接展示
+ * @param ast
+ * @param info
+ * @returns {*}
+ */
+export default function literalTemplate (ast,info) {
+
+    traverse(ast, {
+        exit: path => {
+            if (path.type === 'JSXElement') {
+
+                const newChildren = []
+                path.node.children.forEach(item => {
+                    if (
+                        item.type === 'JSXElement'
+                        && item.openingElement.name.name === 'template'
+                    ) {
+
+                        let datakey = null
+                        item.openingElement.attributes.forEach(attr => {
+                            if (attr.type === 'JSXAttribute' && attr.name.name === 'wx:if') {
+                                attr.name.name = 'wx:else'
+                                attr.value = null
+                            }
+
+                            if (attr.type === 'JSXAttribute' && attr.name.name === 'datakey') {
+                                datakey = attr.value.value
+                            }
+                        })
+
+                        newChildren.push(
+                            t.jsxText(`<block wx:if="{{tools.lite(${datakey})}}">{{${datakey}}}</block>`)
+                        )
+                    }
+
+                    newChildren.push(item)
+                })
+
+                path.node.children = newChildren
+            }
+
+        }
+
+    })
+
+    return ast
+}

src/util/getExtCompPathMaps.js

@@ -14,6 +14,7 @@
  * jsxPropsMap： 属性是JSX片段，包括方法返回JSX片段等，Alita需要特殊处理这些属性
  * extChildComp： 需要处理children 为childrencpt的集合
  * extReactComp：一般来说对齐的组件 需要继承于 RNBaseComponent，但是有些复杂的组件需要继承于Component/PureComponent，比如FlatList
+ * textComp: Text节点，一般来说只要官方的Text组件
  * allExtComp：所有组件，包括RN官方组件，配置在extCompLibs里的组件，这些组件在Alita转化的时候，会当做基本组件，基本组件的属性处理和自定义组件有一些区别
  * @param extCompLibs
  * @returns {{extCompPathMaps, extChildComp: Set, extReactComp: Set, allExtComp: Set, jsxPropsMap}}
@@ -23,6 +24,7 @@ export default function getExtCompPathMaps(extCompLibs) {
     const jsxPropsMap = {}
     const extChildComp = new Set([])
     const extReactComp = new Set([])
+    const textComp = new Set(['Text'])
     const allExtComp = new Set([])
     for(let i = 0; i < extCompLibs.length; i ++) {
         const extLib = extCompLibs[i]
@@ -44,7 +46,13 @@ export default function getExtCompPathMaps(extCompLibs) {
                 compPathMap[compName] = `${wxLibName}${compDir}${compName}/index`
                 allExtComp.add(compName)
             } else {
-                const {name, extendsComponent, needOperateChildren, jsxProps} = compName
+                const {
+                    name,
+                    extendsComponent,
+                    needOperateChildren,
+                    jsxProps,
+                    textChildren
+                } = compName
                 compPathMap[name] = `${wxLibName}${compDir}${name}/index`
 
                 if (needOperateChildren === true) {
@@ -59,6 +67,10 @@ export default function getExtCompPathMaps(extCompLibs) {
                     jsxPropsMap[name] = jsxProps
                 }
 
+                if (textChildren === true) {
+                    textComp.add(name)
+                }
+
                 allExtComp.add(name)
             }
 
@@ -70,6 +82,7 @@ export default function getExtCompPathMaps(extCompLibs) {
         extChildComp,
         extReactComp,
         allExtComp,
+        textComp,
         jsxPropsMap
     }
 }