feat(alita): 简化Text类型标签的处理

Author: ykforerlang

docs/组件差异-Text.md

@@ -1,4 +1,28 @@
 ## Text
 
 * numberOfLines 最好和 height 配合使用，否则可能会出现文字显示不全。
-  
+  
+* Text 标签的子元素，如果是变量，那么这个变量需要为 简单类型
+   
+   合法
+   
+   ```javascript
+   
+   x = 1  
+ 
+   <Text>
+       <Text>{x}</Text>
+   </Text>
+   ```  
+   
+   非法
+   
+   ```javascript
+      
+    x = <Text>1</Text>
+
+     <Text>
+       {1}
+     </Text>
+   ```  
+   

packages/wx-react/src/render.js

@@ -712,12 +712,25 @@ function updateTemplate(vnode, parentInst, parentContext, data, oldData, dataPat
     ) {
         // do nothing
         data[datakey] = ''
-    } else if (typeof tempVnode === 'string'
+        return
+    }
+
+    if (typeof tempVnode === 'string'
         || typeof tempVnode === 'number'
     ) {
         // 不是jsx的情况
         data[datakey] = tempVnode
-    } else if (Array.isArray(tempVnode)) {
+        return
+    }
+
+    if (vnode.props.isTextElement) {
+        let message = "Text子元素JSX表达式的值只能是简单类型！"
+        console.error(message)
+        data[datakey] = ''
+        return
+    }
+
+    if (Array.isArray(tempVnode)) {
         // key必须明确指定，对于不知道key的情况， React和小程序处理可能存在差异，造成两个平台的行为差异
 
         let oldSubDataKeyMap = {}

src/misc/transformJSX.js

@@ -131,6 +131,7 @@ const transformJSX = (api, options) => {
                 return attr.type === 'JSXAttribute'
                     && (attr.name.name === 'datakey'
                         || attr.name.name === 'tempVnode'
+                        || attr.name.name === 'isTextElement'
                     )
             })
         }

src/tran/childrenToTemplate.js

@@ -10,7 +10,7 @@ import traverse from "@babel/traverse";
 import * as t from "@babel/types"
 
 import {geneOrder} from '../util/util'
-import {isChildComp} from '../util/uast'
+import {isChildComp, isTextElement} from '../util/uast'
 
 import {ChildTemplateDataKeyPrefix, ChildTemplateNamePrefix} from '../constants'
 
@@ -96,6 +96,7 @@ export default function childrenToTemplate(ast, info) {
     traverse(ast, {
 
         exit: path => {
+
             if (path.type === 'JSXElement'
                 && !isChildComp(path.node.openingElement.name.name)
             ) {
@@ -111,16 +112,23 @@ export default function childrenToTemplate(ast, info) {
 
                         const datakey = `${ChildTemplateDataKeyPrefix}${goForCTDK.next}`
 
+
+                        const templateAttris = [
+                            t.jsxAttribute(t.jsxIdentifier('datakey'), t.stringLiteral(datakey)),
+                            t.jsxAttribute(t.jsxIdentifier('tempVnode'), ele),
+                            t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${datakey}}} !== undefined`)),
+                            t.jsxAttribute(t.jsxIdentifier('is'), t.stringLiteral(tempName)),
+                            t.jsxAttribute(t.jsxIdentifier('data'), t.stringLiteral(`{{d: ${datakey}}}`))
+                        ]
+
+                        if (isTextElement(path.node.openingElement)) {
+                            templateAttris.push(t.jsxAttribute(t.jsxIdentifier('isTextElement')))
+                        }
+
                         return t.jsxElement(
                             t.jsxOpeningElement(
                                 t.jsxIdentifier('template'),
-                                [
-                                    t.jsxAttribute(t.jsxIdentifier('datakey'), t.stringLiteral(datakey)),
-                                    t.jsxAttribute(t.jsxIdentifier('tempVnode'), ele),
-                                    t.jsxAttribute(t.jsxIdentifier('wx:if'), t.stringLiteral(`{{${datakey}}} !== undefined`)),
-                                    t.jsxAttribute(t.jsxIdentifier('is'), t.stringLiteral(tempName)),
-                                    t.jsxAttribute(t.jsxIdentifier('data'), t.stringLiteral(`{{d: ${datakey}}}`))
-                                ]
+                                templateAttris
                             ),
                             t.jsxClosingElement(
                                 t.jsxIdentifier('template')

src/tran/literalTemplate.js

@@ -8,6 +8,7 @@
 
 import traverse from "@babel/traverse";
 import * as t from "@babel/types"
+import {isTextElement} from '../util/uast'
 
 /**
  * 如果 由childrenToTemplate生成的template 最终运行的结果是literal，那直接展示
@@ -22,34 +23,26 @@ export default function literalTemplate (ast, info) {
             if (path.type === 'JSXElement'
                 && isTextElement(path.node.openingElement)
             ) {
-                const newChildren = []
-                path.node.children.forEach(item => {
+
+                const children = path.node.children
+                path.node.children = children.map(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="{{t.l(${datakey})}}">{{${datakey}}}</block>`)
-                        )
+                        return t.jsxText(`{{${datakey}}}`)
+                    } else {
+                        return item
                     }
-
-                    newChildren.push(item)
                 })
-
-                path.node.children = newChildren
             }
 
         }
@@ -59,11 +52,3 @@ export default function literalTemplate (ast, info) {
     return ast
 }
 
-function isTextElement(openingElement) {
-    if (openingElement.name.name !== 'view') return false
-
-    return openingElement.attributes.some(item =>
-        item.type === 'JSXAttribute'
-        && item.name.name === 'original'
-        && (item.value.value === 'OuterText' || item.value.value === 'InnerText'))
-}

src/util/uast.js

@@ -292,5 +292,15 @@ export function isBindElementByName(name) {
 }
 
 
+export function isTextElement(openingElement) {
+    if (openingElement.name.name !== 'view') return false
+
+    return openingElement.attributes.some(item =>
+        item.type === 'JSXAttribute'
+        && item.name.name === 'original'
+        && (item.value.value === 'OuterText' || item.value.value === 'InnerText'))
+}
+
+