fix: 字节跳动小程序自定义组件支持 v-show 指令

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

 const compiler = require('../lib')
 
 function assertCodegen (template, templateCode, renderCode = 'with(this){}', options = {}) {
-  const res = compiler.compile(template, {
+  const res = compiler.compile(template, {
     resourcePath: 'test.wxml',
     mp: Object.assign({
-      minified: true,
+      minified: true,
       isTest: true,
       platform: 'mp-toutiao'
     }, options)
@@ -20,13 +20,13 @@ describe('mp:compiler-mp-toutiao', () => {
       '<view><view v-for="(item,index) in items" :key="index"></view></view>',
       '<view><block tt:for="{{items}}" tt:for-item="item" tt:for-index="index" tt:key="index"><view></view></block></view>'
     )
-  })
-
-  it('generate ref', () => {
-    assertCodegen(
-      '<my-component ref="ref"></my-component>',
-      '<my-component class="vue-ref" vue-id="551070e6-1" data-ref="ref" bind:__l="__l"></my-component>'
-    )
+  })
+
+  it('generate ref', () => {
+    assertCodegen(
+      '<my-component ref="ref"></my-component>',
+      '<my-component class="vue-ref" vue-id="551070e6-1" data-ref="ref" bind:__l="__l"></my-component>'
+    )
   })
 
   it('generate class binding', () => {
@@ -49,10 +49,10 @@ describe('mp:compiler-mp-toutiao', () => {
     assertCodegen(
       '<p class="static" :class="[{ active: isActive }, errorClass]">5</p>',
       '<view class="{{(((\'static _p\')+\' \'+[(isActive)?\'active\':\'\'])+\' \'+errorClass)}}">5</view>'
-    )
-    assertCodegen(
-      '<div class="container" :class="computedClassObject">6</div>',
-      '<view class="{{((\'container _div\')+\' \'+computedClassObject)}}">6</view>'
+    )
+    assertCodegen(
+      '<div class="container" :class="computedClassObject">6</div>',
+      '<view class="{{((\'container _div\')+\' \'+computedClassObject)}}">6</view>'
     )
     //     assertCodegen(
     //       `<div class="container" :class="computedClassObject">6</div>`,
@@ -72,4 +72,11 @@ describe('mp:compiler-mp-toutiao', () => {
       '<view class="{{((\'bg _p\')+\' \'+(classStr1||classStr2))}}">9</view>'
     )
   })
+
+  it('generate v-show directive', () => {
+    assertCodegen(
+      '<test v-show="shown">hello world</test>',
+      '<test bind:-data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
+    )
+  })
 })

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

@@ -132,4 +132,11 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen('<test :obj="{x:0}"></test>', '<test vue-id="551070e6-1" obj="{{({x:0})}}" bind:__l="__l"></test>')
   })
+
+  it('generate v-show directive', () => {
+    assertCodegen(
+      '<test v-show="shown">hello world</test>',
+      '<test data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
+    )
+  })
 })

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

@@ -277,10 +277,6 @@ describe('mp:compiler', () => {
       '<view v-show="shown">hello world</view>',
       '<view hidden="{{!(shown)}}">hello world</view>'
     )
-    assertCodegen(
-      '<test v-show="shown">hello world</test>',
-      '<test data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
-    )
   })
 
   it('generate DOM props with v-bind directive', () => {

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

@@ -227,9 +227,17 @@ function traverseDataNode (dataNode, state, node) {
               objectExpression.properties.find(valueProperty => {
                 const isValue = valueProperty.key.name === 'value'
                 if (isValue) {
+                  let key
                   // 自定义组件不支持 hidden 属性
-                  const platforms = ['mp-weixin', 'mp-qq']
-                  ret[platforms.includes(state.options.platform.name) && isComponent(node.type) ? ATTE_DATA_CUSTOM_HIDDEN : 'hidden'] = genCode(valueProperty.value, false, true)
+                  const platform = state.options.platform.name
+                  const platforms = ['mp-weixin', 'mp-qq', 'mp-toutiao']
+                  if (isComponent(node.type) && platforms.includes(platform)) {
+                    // 字节跳动小程序自定义属性不会反应在DOM上，只能使用事件格式
+                    key = `${platform === 'mp-toutiao' ? 'bind:-' : ''}${ATTE_DATA_CUSTOM_HIDDEN}`
+                  } else {
+                    key = 'hidden'
+                  }
+                  ret[key] = genCode(valueProperty.value, false, true)
                 }
                 return isValue
               })

packages/webpack-uni-mp-loader/lib/plugin/generate-app.js

@@ -46,8 +46,9 @@ module.exports = function generateApp (compilation) {
   }
 
   // 框架预设样式 用于隐藏自定义组件
-  const platforms = ['mp-weixin', 'mp-qq']
-  const presetStyle = platforms.includes(process.env.UNI_PLATFORM) ? '[data-custom-hidden="true"]{display: none !important;}' : ''
+  // TODO 分平台 import 不同 css
+  const platforms = ['mp-weixin', 'mp-qq', 'mp-toutiao']
+  const presetStyle = platforms.includes(process.env.UNI_PLATFORM) ? '[data-custom-hidden="true"],[bind-data-custom-hidden="true"]{display: none !important;}' : ''
 
   if (compilation.assets[`common/main${ext}`]) { // 是否存在 main.css
     importMainCss = `@import './common/main${ext}';`