feat: add component whiteList and span of mp_weixin (#4823)

* feat: add component whiteList and span of mp_weixin

* style: lint

---------
Co-authored-by: Nqiang <guoshengqiang@live.com>

packages/uni-mp-weixin/dist/index.js

@@ -2084,15 +2084,10 @@ function handleEvent (event) {
 
 const eventChannels = {};
 
-const eventChannelStack = [];
-
 function getEventChannel (id) {
-  if (id) {
-    const eventChannel = eventChannels[id];
-    delete eventChannels[id];
-    return eventChannel
-  }
-  return eventChannelStack.shift()
+  const eventChannel = eventChannels[id];
+  delete eventChannels[id];
+  return eventChannel
 }
 
 const hooks = [
@@ -2224,7 +2219,10 @@ function parseBaseApp (vm, {
 
       delete this.$options.mpType;
       delete this.$options.mpInstance;
-      if (this.mpType === 'page' && typeof getApp === 'function') { // hack vue-i18n
+      if (
+        ( this.mpType === 'page') &&
+        typeof getApp === 'function'
+      ) { // hack vue-i18n
         const app = getApp();
         if (app.$vm && app.$vm.$i18n) {
           this._i18n = app.$vm.$i18n;
@@ -2606,7 +2604,7 @@ if (typeof Proxy !== 'undefined' && "mp-weixin" !== 'app-plus') {
       uni[name] = promisify(name, todoApis[name]);
     });
     Object.keys(extraApi).forEach(name => {
-      uni[name] = promisify(name, todoApis[name]);
+      uni[name] = promisify(name, extraApi[name]);
     });
   }
 

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

@@ -348,4 +348,10 @@ describe('mp:compiler-mp-alipay', () => {
       '<view>{{array.length}}</view>'
     )
   })
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<label class="_span"></label>'
+    )
+  })
 })

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

@@ -216,4 +216,10 @@ describe('mp:compiler-mp-baidu', () => {
       '<text>{{"我是第一行3\\\\n    我的第二行2"+title}}</text>'
     )
   })
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<label class="_span"></label>'
+    )
+  })
 })

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

@@ -93,4 +93,10 @@ describe('mp:compiler-mp-kuaishou', () => {
       }
     )
   })
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<label class="_span"></label>'
+    )
+  })
 })

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

@@ -91,4 +91,10 @@ describe('mp:compiler-mp-lark', () => {
       '<test bind:-data-custom-hidden="{{!(shown)}}" vue-id="551070e6-1" bind:__l="__l" vue-slots="{{[\'default\']}}">hello world</test>'
     )
   })
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<label class="_span"></label>'
+    )
+  })
 })

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

@@ -40,4 +40,11 @@ describe('mp:compiler-mp-qq', () => {
       '<text>{{"我是第一行3\\\\n    我的第二行2"+title}}</text>'
     )
   })
+
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<label class="_span"></label>'
+    )
+  })
 })

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

@@ -103,4 +103,11 @@ describe('mp:compiler-mp-toutiao', () => {
       }
     )
   })
+
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<label class="_span"></label>'
+    )
+  })
 })

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

@@ -365,14 +365,14 @@ describe('mp:compiler-mp-weixin', () => {
     )
     assertCodegen( // TODO vue-id
       '<span><slot v-bind:user="user">{{ user.lastName }}</slot></span>',
-      '<label class="_span"><block wx:if="{{$slots.default}}"><slot></slot><scoped-slots-default user="{{user}}" class="scoped-ref" bind:__l="__l"></scoped-slots-default></block><block wx:else>{{user.lastName}}</block></label>',
+      '<span><block wx:if="{{$slots.default}}"><slot></slot><scoped-slots-default user="{{user}}" class="scoped-ref" bind:__l="__l"></scoped-slots-default></block><block wx:else>{{user.lastName}}</block></span>',
       function (res) {
         expect(res.componentGenerics['scoped-slots-default']).toBe(true)
       }
     )
     assertCodegen(
       '<span><slot name="header" v-bind:user="user">{{ user.lastName }}</slot></span>',
-      '<label class="_span"><block wx:if="{{$slots.header}}"><slot name="header"></slot><scoped-slots-header user="{{user}}" class="scoped-ref" bind:__l="__l"></scoped-slots-header></block><block wx:else>{{user.lastName}}</block></label>',
+      '<span><block wx:if="{{$slots.header}}"><slot name="header"></slot><scoped-slots-header user="{{user}}" class="scoped-ref" bind:__l="__l"></scoped-slots-header></block><block wx:else>{{user.lastName}}</block></span>',
       function (res) {
         expect(res.componentGenerics['scoped-slots-header']).toBe(true)
       }
@@ -517,4 +517,11 @@ describe('mp:compiler-mp-weixin', () => {
       '<vertical-drag-gesture-handler onGestureEvent="handlePan" native-view="scroll-view" shouldResponseOnMove="shouldResponse" shouldAcceptGesture="shouldAccept"></vertical-drag-gesture-handler>'
     )
   })
+
+  it('span', () => {
+    assertCodegen(
+      '<span></span>',
+      '<span></span>'
+    )
+  })
 })

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

@@ -777,7 +777,7 @@ describe('mp:compiler', () => {
     // TODO vue的数字 item 是从1，小程序是从0，后续考虑抹平差异
     assertCodegen(
       '<div><div v-for="i in 10"><p><span></span></p></div></div>',
-      '<view class="_div"><block wx:for="{{10}}" wx:for-item="i" wx:for-index="__i0__"><view class="_div"><view class="_p"><label class="_span"></label></view></view></block></view>'
+      '<view class="_div"><block wx:for="{{10}}" wx:for-item="i" wx:for-index="__i0__"><view class="_div"><view class="_p"><span></span></view></view></block></view>'
     )
   })
 

packages/uni-template-compiler/lib/auto-components.js

@@ -111,7 +111,7 @@ const compilerModule = {
     if (process.env.UNI_PLATFORM === 'quickapp-native') {
       // 排查所有标签
       (options.isUnaryTag.autoComponents || (options.isUnaryTag.autoComponents = new Set())).add(el.tag)
-    } else if (isComponent(el.tag) && el.tag !== 'App') { // App.vue
+    } else if (isComponent(el.tag, options.mp.platform) && el.tag !== 'App') { // App.vue
       // 挂在 isUnaryTag 上边,可以保证外部访问到
       (options.isUnaryTag.autoComponents || (options.isUnaryTag.autoComponents = new Set())).add(el.tag)
     }
@@ -120,4 +120,4 @@ const compilerModule = {
 module.exports = {
   compileTemplate,
   module: compilerModule
-}
+}

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

+import getCompilerOptions from './mp.js'
 const TAGS = {
   br: 'view',
   hr: 'view',
@@ -121,7 +122,17 @@ const TAGS = {
   param: 'view'
 }
 module.exports = {
-  getTagName (tagName) {
+  /**
+   * getTagName
+   * @param {string} tagName
+   * @param {string} [platform]
+   * @returns {boolean}
+   */
+  getTagName (tagName, platform) {
+    // 排除各平台内置组件
+    if (platform && getCompilerOptions(platform).isNativeTag(tagName)) {
+      return tagName
+    }
     return TAGS[tagName] || tagName
   }
-}
+}

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

@@ -15,7 +15,7 @@ const generateScript = require('./script/generate')
 const traverseTemplate = require('./template/traverse')
 const generateTemplate = require('./template/generate')
 
-const compilerModule = require('./module')
+const compilerModule = require('./module')
 const compilerModuleUniad = require('./module.uniad')
 
 const compilerAlipayModule = require('./module-alipay')
@@ -38,10 +38,10 @@ const isWin = /^win/.test(process.platform)
 const normalizePath = path => (isWin ? path.replace(/\\/g, '/') : path)
 
 module.exports = {
-  compile (source, options = {}) {
-    if (Array.isArray(options.modules)) {
-      options.modules.push(compilerModuleUniad)
-    }
+  compile (source, options = {}) {
+    if (Array.isArray(options.modules)) {
+      options.modules.push(compilerModuleUniad)
+    }
 
     if ( // 启用摇树优化后,需要过滤内置组件
       !options.autoComponentResourcePath ||
@@ -51,7 +51,7 @@ module.exports = {
     }
     if (!options.modules) {
       options.modules = []
-    }
+    }
 
     // transformAssetUrls
     options.modules.push(require('./asset-url'))
@@ -67,7 +67,7 @@ module.exports = {
       options.optimize = false // 启用 staticRenderFns
       // domProps => attrs
       options.mustUseProp = () => false
-      options.isReservedTag = (tagName) => !isComponent(tagName) // 非组件均为内置
+      options.isReservedTag = (tagName) => !isComponent(tagName, options.mp.platform) // 非组件均为内置
       options.getTagNamespace = () => false
 
       try {
@@ -96,7 +96,7 @@ module.exports = {
       return compileTemplate(source, options, compile)
     }
 
-    options.modules.push(compilerModule)
+    options.modules.push(compilerModule)
 
     if (options.mp.platform === 'mp-alipay') {
       options.modules.push(compilerAlipayModule)
@@ -124,9 +124,9 @@ module.exports = {
     options.mp.filterModules = Object.keys(options.filterModules || {})
 
     // (可用的原生微信小程序组件，global+scoped)
-    options.mp.wxComponents = options.wxComponents || Object.create(null)
-    Object.assign(options.mp.wxComponents, {
-      'uniad-plugin': 'plugin://uni-ad/ad'
+    options.mp.wxComponents = options.wxComponents || Object.create(null)
+    Object.assign(options.mp.wxComponents, {
+      'uniad-plugin': 'plugin://uni-ad/ad'
     })
 
     const state = {

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

@@ -99,8 +99,18 @@ const tags = {
     'vertical-drag-gesture-handler',
     'horizontal-drag-gesture-handler',
     'long-press-gesture-handler',
+    // 其他
+    'draggable-sheet',
+    'grid-builder',
     'grid-view',
     'list-view',
+    'list-builder',
+    'nested-scroll-body',
+    'nested-scroll-header',
+    'open-container',
+    'share-element',
+    'snapshot',
+    'span',
     'sticky-header',
     'sticky-section'
   ],
@@ -146,7 +156,10 @@ const baseCompiler = {
    * 目前 template 在前，script 在后，要做的话，就需要把 wxml 的生成机制放到 plugin 中才可以拿到真实的组件列表
    */
   isComponent (tagName) {
-    return !tags.base.concat(tags[this.name] || []).includes(tagName)
+    return !this.isNativeTag(tagName)
+  },
+  isNativeTag (tagName) {
+    return tags.base.concat(tags[this.name] || []).includes(tagName)
   },
   createFilterTag (filterTag, {
     content,

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

@@ -175,7 +175,7 @@ module.exports = {
             const tagNode = path.node.arguments[0]
             if (t.isStringLiteral(tagNode)) {
               // 需要把标签增加到 class 样式中
-              const tagName = getTagName(tagNode.value)
+              const tagName = getTagName(tagNode.value, this.options.platform.name)
               if (tagName !== tagNode.value) {
                 addStaticClass(path, '_' + tagNode.value)
               }

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

@@ -237,7 +237,7 @@ function traverseDataNode (dataNode, state, node) {
                   // 自定义组件不支持 hidden 属性
                   const platform = state.options.platform.name
                   const platforms = ['mp-weixin', 'mp-qq', 'mp-jd', 'mp-xhs', 'mp-toutiao', 'mp-lark']
-                  if (isComponent(node.type) && platforms.includes(platform)) {
+                  if (platforms.includes(platform) && isComponent(node.type, platform)) {
                     // 字节跳动|飞书小程序自定义属性不会反应在DOM上，只能使用事件格式
                     key = `${platform === 'mp-toutiao' || platform === 'mp-lark' ? 'bind:-' : ''}${ATTR_DATA_CUSTOM_HIDDEN}`
                   } else {

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

@@ -222,7 +222,13 @@ const {
   getTagName
 } = require('./h5')
 
-function isComponent (tagName) {
+/**
+ * isComponent
+ * @param {string} tagName
+ * @param {string} [platform]
+ * @returns {boolean}
+ */
+function isComponent (tagName, platform) {
   if (
     tagName === 'block' ||
     tagName === 'component' ||
@@ -237,7 +243,7 @@ function isComponent (tagName) {
       return false
     }
   }
-  return !hasOwn(tags, getTagName(tagName.replace(/^v-uni-/, '')))
+  return !hasOwn(tags, getTagName(tagName.replace(/^v-uni-/, ''), platform))
 }
 
 function makeMap (str, expectsLowerCase) {