fix(mp-weixin): template with array length #1827

packages/uni-template-compiler/__tests__/compiler-extra.spec.js

@@ -850,19 +850,19 @@ describe('mp:compiler-extra', () => {
       'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item?getValue(item):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
-      '<view v-for="(item,index) in list" :key="index"><view v-if="item.length">{{getValue(item)}}</view></view>',
-      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig.length}}"><view>{{item.m0}}</view></block></view></block>',
-      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item.length?getValue(item):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      '<view v-for="(item,index) in list" :key="index"><view v-if="item.num">{{getValue(item)}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig.num}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item.num?getValue(item):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
-      '<view v-for="(item,index) in list" :key="index"><view v-if="item.length>0">{{getValue(item)}}</view></view>',
-      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig.length>0}}"><view>{{item.m0}}</view></block></view></block>',
-      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item.length>0?getValue(item):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      '<view v-for="(item,index) in list" :key="index"><view v-if="item.num>0">{{getValue(item)}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig.num>0}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item.num>0?getValue(item):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
-      '<view v-for="(item,index) in list" :key="index"><view v-if="item.length>0">{{test(\'item\')}}</view></view>',
-      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig.length>0}}"><view>{{item.m0}}</view></block></view></block>',
-      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item.length>0?test("item"):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      '<view v-for="(item,index) in list" :key="index"><view v-if="item.num>0">{{test(\'item\')}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.$orig.num>0}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=item.num>0?test("item"):null;return{$orig:$orig,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
       '<view v-for="(item,index) in list" :key="index"><view v-if="test(item)">{{test(\'item\')}}</view></view>',
@@ -875,9 +875,9 @@ describe('mp:compiler-extra', () => {
       'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var m0=test(item.id);var m1=m0?test(item.type):null;var m2=m0&&m1?test("item"):null;return{$orig:$orig,m0:m0,m1:m1,m2:m2}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
     assertCodegen(
-      '<view v-for="(item,index) in list" :key="index"><view v-if="Object.values(item.list).length">{{test(item.list)}}</view></view>',
-      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.g0.length}}"><view>{{item.m0}}</view></block></view></block>',
-      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var g0=Object.values(item.list);var m0=g0.length?test(item.list):null;return{$orig:$orig,g0:g0,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+      '<view v-for="(item,index) in list" :key="index"><view v-if="Object.values(item.list)[0]">{{test(item.list)}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.g0[0]}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var g0=Object.values(item.list);var m0=g0[0]?test(item.list):null;return{$orig:$orig,g0:g0,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
     )
   })
 })

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

@@ -288,4 +288,10 @@ describe('mp:compiler-mp-alipay', () => {
       '<life-follow data-event-opts="{{[[\'close\',[[\'close\',[\'$event\']]]]]}}" onClose="__e"></life-follow>'
     )
   })
+  it('template with array length', () => {
+    assertCodegen(
+      '<view>{{array.length}}</view>',
+      '<view>{{array.length}}</view>'
+    )
+  })
 })

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

@@ -359,4 +359,52 @@ describe('mp:compiler-mp-weixin', () => {
       '<test data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
     )
   })
+
+  it('template with array length', () => {
+    assertCodegen(
+      '<view>{{array.length}}</view>',
+      '<view>{{$root.g0}}</view>',
+      'with(this){var g0=array.length;$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<view>{{array[\'length\']}}</view>',
+      '<view>{{$root.g0}}</view>',
+      'with(this){var g0=array["length"];$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<button :disabled="array.length===0">hello world</button>',
+      '<button disabled="{{$root.g0===0}}">hello world</button>',
+      'with(this){var g0=array.length;$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<view :class="\'c\'+array.length">hello world</view>',
+      '<view class="{{[\'c\'+$root.g0]}}">hello world</view>',
+      'with(this){var g0=array.length;$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<view :style="array.length===0?\'height:30px;\':\'height:10px;\'">hello world</view>',
+      '<view style="{{($root.g0===0?\'height:30px;\':\'height:10px;\')}}">hello world</view>',
+      'with(this){var g0=array.length;$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<view v-if="array.length">hello</view>',
+      '<block wx:if="{{$root.g0}}"><view>hello</view></block>',
+      'with(this){var g0=array.length;$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<view v-show="array.length">hello</view>',
+      '<view hidden="{{!($root.g0)}}">hello</view>',
+      'with(this){var g0=array.length;$mp.data=Object.assign({},{$root:{g0:g0}})}'
+    )
+    assertCodegen(
+      '<view v-for="(item,index) in list" :key="index"><view v-if="item.length">{{getValue(item)}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.g0}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var g0=item.length;var m0=g0?getValue(item):null;return{$orig:$orig,g0:g0,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+    )
+    assertCodegen(
+      '<view v-for="(item,index) in list" :key="index"><view v-if="Object.values(item.list).length">{{test(item.list)}}</view></view>',
+      '<block wx:for="{{$root.l0}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view><block wx:if="{{item.g0}}"><view>{{item.m0}}</view></block></view></block>',
+      'with(this){var l0=__map(list,function(item,index){var $orig=__get_orig(item);var g0=Object.values(item.list).length;var m0=g0?test(item.list):null;return{$orig:$orig,g0:g0,m0:m0}});$mp.data=Object.assign({},{$root:{l0:l0}})}'
+    )
+  })
 })

packages/uni-template-compiler/lib/script/traverse/visitor.js

@@ -25,6 +25,7 @@ const {
   traverseFilter,
   getComponentName,
   hasEscapeQuote,
+  hasLengthProperty,
   isRootElement
 } = require('../../util')
 
@@ -148,6 +149,10 @@ module.exports = {
     ) {
       path.skip()
     }
+    // 微信小程序平台无法观测 Array length 访问：https://developers.weixin.qq.com/community/develop/doc/000c8ee47d87a0d5b6685a8cb57000
+    if (this.options.platform.name === 'mp-weixin' && hasLengthProperty(path)) {
+      path.replaceWith(getMemberExpr(path, IDENTIFIER_GLOBAL, path.node, this))
+    }
   },
   CallExpression (path) {
     const callee = path.node.callee

packages/uni-template-compiler/lib/util.js

@@ -270,6 +270,33 @@ function hasEscapeQuote (path) {
   }
   return has
 }
+/**
+ * 是否包含属性 length 访问
+ * @param {*} path
+ * @returns {boolean}
+ */
+function hasLengthProperty (path) {
+  let has = false
+  function hasLengthProperty (node) {
+    const property = node.property
+    // 暂不考虑动态拼接和模板字符串
+    return t.isIdentifier(property, { name: 'length' }) || t.isStringLiteral(property, { value: 'length' })
+  }
+  if (path.isMemberExpression()) {
+    return hasLengthProperty(path.node)
+  } else {
+    path.traverse({
+      noScope: true,
+      MemberExpression (path) {
+        if (hasLengthProperty(path.node)) {
+          has = true
+          path.stop()
+        }
+      }
+    })
+  }
+  return has
+}
 
 function isRootElement (path) {
   const result = path.findParent(path => (path.isCallExpression() && path.get('callee').isIdentifier({ name: METHOD_CREATE_ELEMENT })) || path.isReturnStatement())
@@ -308,5 +335,6 @@ module.exports = {
   getForIndexIdentifier,
   isSimpleObjectExpression,
   hasEscapeQuote,
+  hasLengthProperty,
   isRootElement
 }