fix: 解决组件属性使用复杂的对象表达式在小程序编译报错的问题 question/103944

packages/uni-template-compiler/__tests__/compiler-mp-weixin.spec.js

@@ -131,6 +131,7 @@ describe('mp:compiler-mp-weixin', () => {
       '<block wx:for="{{({list1,list2})}}" wx:for-item="item" wx:for-index="key"></block>'
     )
     assertCodegen('<test :obj="{x:0}"></test>', '<test vue-id="551070e6-1" obj="{{({x:0})}}" bind:__l="__l"></test>')
+    assertCodegen('<test :obj="{\'x\':0}"></test>', '<test vue-id="551070e6-1" obj="{{$root.a0}}" bind:__l="__l"></test>', 'with(this){var a0={"x":0};$mp.data=Object.assign({},{$root:{a0:a0}})}')
   })
 
   it('generate v-show directive', () => {

packages/uni-template-compiler/lib/script/traverse/data/attrs.js

-// const {
-//   IDENTIFIER_ATTR
-// } = require('../../../constants')
+const t = require('@babel/types')
 
-// const getMemberExpr = require('../member-expr')
+const {
+  IDENTIFIER_ATTR
+} = require('../../../constants')
+
+const getMemberExpr = require('../member-expr')
 
 module.exports = function processAttrs (paths, path, state, isComponent, tagName) {
-  // 不再单独处理ObjectExpression，改为在转换temlplte时用()包裹（微信、QQ）
-  // const attrsPath = paths.attrs
-  // if (attrsPath) {
-  //   attrsPath.get('value.properties').forEach(propertyPath => {
-  //     const valuePath = propertyPath.get('value')
-  //     if (valuePath.isObjectExpression()) {
-  //       valuePath.replaceWith(getMemberExpr(null, IDENTIFIER_ATTR, valuePath.node, state))
-  //     }
-  //   })
-  // }
+  const attrsPath = paths.attrs
+  if (attrsPath) {
+    attrsPath.get('value.properties').forEach(propertyPath => {
+      const valuePath = propertyPath.get('value')
+      // 对于普通的ObjectExpression不再单独处理，改为在转换temlplte时用()包裹（微信、QQ）
+      if (valuePath.isObjectExpression() && valuePath.node.properties.find(({ key }) => !t.isIdentifier(key))) {
+        valuePath.replaceWith(getMemberExpr(path, IDENTIFIER_ATTR, valuePath.node, state))
+      }
+    })
+  }
   return []
 }

packages/uni-template-compiler/lib/script/traverse/member-expr.js

@@ -42,41 +42,43 @@ function findScoped (path, state) {
 
 function findTest (path, state) {
   let tests
-  while (path.parentPath && path.key !== 'body') {
-    if (path.key === 'consequent' || path.key === 'alternate') {
-      const testOrig = path.container.test
-      let test = t.arrayExpression([t.cloneDeep(testOrig)])
-      traverse(test, {
-        noScope: true,
-        MemberExpression (memberExpressionPath) {
-          const names = state.scoped.map(scoped => scoped.forItem)
-          const node = memberExpressionPath.node
-          const objectName = node.object.name
-          const property = node.property
-          const propertyName = property.name
-          if (objectName === VAR_ROOT || (names.includes(objectName) && (propertyName === IDENTIFIER_METHOD || propertyName === IDENTIFIER_FILTER))) {
-            let property
-            traverse(testOrig, {
-              noScope: true,
-              Identifier (identifierPath) {
-                const node = identifierPath.node
-                if (node.name === propertyName) {
-                  property = node
-                  identifierPath.stop()
+  if (path) {
+    while (path.parentPath && path.key !== 'body') {
+      if (path.key === 'consequent' || path.key === 'alternate') {
+        const testOrig = path.container.test
+        let test = t.arrayExpression([t.cloneDeep(testOrig)])
+        traverse(test, {
+          noScope: true,
+          MemberExpression (memberExpressionPath) {
+            const names = state.scoped.map(scoped => scoped.forItem)
+            const node = memberExpressionPath.node
+            const objectName = node.object.name
+            const property = node.property
+            const propertyName = property.name
+            if (objectName === VAR_ROOT || (names.includes(objectName) && (propertyName === IDENTIFIER_METHOD || propertyName === IDENTIFIER_FILTER))) {
+              let property
+              traverse(testOrig, {
+                noScope: true,
+                Identifier (identifierPath) {
+                  const node = identifierPath.node
+                  if (node.name === propertyName) {
+                    property = node
+                    identifierPath.stop()
+                  }
                 }
-              }
-            })
-            memberExpressionPath.replaceWith(property)
+              })
+              memberExpressionPath.replaceWith(property)
+            }
           }
+        })
+        test = test.elements[0]
+        if (path.key === 'alternate') {
+          test = t.unaryExpression('!', test)
         }
-      })
-      test = test.elements[0]
-      if (path.key === 'alternate') {
-        test = t.unaryExpression('!', test)
+        tests = tests ? t.logicalExpression('&&', test, tests) : test
       }
-      tests = tests ? t.logicalExpression('&&', test, tests) : test
+      path = path.parentPath
     }
-    path = path.parentPath
   }
   return tests
 }