Merge branch 'next' into feat/wx-snapshot

packages/shared/src/native-apis.ts

@@ -388,7 +388,6 @@ function equipCommonApis (taro, global, apis: Record<string, any> = {}) {
     }
   }
   taro.createSelectorQuery = delayRef(taro, global, 'createSelectorQuery', 'exec')
-  taro.createIntersectionObserver = delayRef(taro, global, 'createIntersectionObserver', 'observe')
 }
 
 /**

packages/shared/src/template.ts

@@ -221,7 +221,7 @@ export class BaseTemplate {
   protected buildBaseTemplate () {
     const Adapter = this.Adapter
     const data = !this.isSupportRecursive && this.supportXS
-      ? `${this.dataKeymap('i:item,c:1,l:\'\'')}`
+      ? `${this.dataKeymap(`i:item,c:1,l:xs.f('',item.${Shortcuts.NodeName})`)}`
       : this.isSupportRecursive
         ? this.dataKeymap('i:item')
         : this.dataKeymap('i:item,c:1')
@@ -509,7 +509,7 @@ export class BaseTemplate {
   public buildCustomComponentTemplate = (ext: string) => {
     const Adapter = this.Adapter
     const data = !this.isSupportRecursive && this.supportXS
-      ? `${this.dataKeymap('i:item,c:1,l:\'\'')}`
+      ? `${this.dataKeymap(`i:item,c:1,l:xs.f('',item.${Shortcuts.NodeName})`)}`
       : this.isSupportRecursive
         ? this.dataKeymap('i:item')
         : this.dataKeymap('i:item,c:1')

packages/taro-components-react/src/components/scroll-view/index.tsx

@@ -30,11 +30,11 @@ function easeOutScroll (from = 0, to = 0, callback) {
   step()
 }
 
-function scrollIntoView (id) {
+function scrollIntoView (id = '', isHorizontal = false, animated = true, scrollIntoViewAlignment?: ScrollLogicalPosition) {
   document.querySelector(`#${id}`)?.scrollIntoView({
-    behavior: 'smooth',
-    block: 'center',
-    inline: 'start'
+    behavior: animated ? 'smooth' : 'auto',
+    block: !isHorizontal ? (scrollIntoViewAlignment || 'center') : 'center',
+    inline: isHorizontal ? (scrollIntoViewAlignment || 'start') : 'start'
   })
 }
 
@@ -68,6 +68,7 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
   scrollTop: number
   scrollLeft: number
   scrollIntoView?: string
+  scrollIntoViewAlignment?: ScrollLogicalPosition
   scrollWithAnimation: boolean
   enableBackToTop?: boolean
   onScrollToUpper: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void
@@ -93,7 +94,7 @@ class ScrollView extends React.Component<IProps> {
     this.handleScroll(nextProps)
   }
 
-  handleScroll (props, isInit = false) {
+  handleScroll (props: IProps, isInit = false) {
     // scrollIntoView
     if (
       props.scrollIntoView &&
@@ -102,10 +103,11 @@ class ScrollView extends React.Component<IProps> {
       document.querySelector &&
       document.querySelector(`#${props.scrollIntoView}`)
     ) {
+      const isHorizontal = props.scrollX && !props.scrollY
       if (isInit) {
-        setTimeout(() => scrollIntoView(props.scrollIntoView), 500)
+        setTimeout(() => scrollIntoView(props.scrollIntoView, props.scrollWithAnimation, isHorizontal, props.scrollIntoViewAlignment), 500)
       } else {
-        scrollIntoView(props.scrollIntoView)
+        scrollIntoView(props.scrollIntoView, props.scrollWithAnimation, isHorizontal, props.scrollIntoViewAlignment)
       }
     } else {
       const isAnimation = !!props.scrollWithAnimation

packages/taro-components/__tests__/view.e2e.ts

@@ -9,8 +9,9 @@ describe('View e2e', () => {
     })
   })
 
-  it('screenshot', async () => {
+  // Note: E2E 测试的文件，不能包含引入，否则会导致测试失败
+  it.skip('screenshot', async () => {
     await page.waitForChanges()
     await page.compareScreenshot()
   })
-})
+})

packages/taro-components/scripts/stencil/stencil.config.ts

@@ -130,7 +130,7 @@ export const config: Config = {
     after: [{
       name: 'add-external',
       options: opts => {
-        opts.external = ['@tarojs/taro']
+        opts.external = [/^@tarojs[\\/][a-z]+/]
 
         return opts
       }

packages/taro-components/src/components/scroll-view/scroll-view.tsx

@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, h } from '@stencil/core'
 import classNames from 'classnames'
 
-import { debounce } from '../../utils'
+import { debounce, handleStencilNodes } from '../../utils'
 
 import type { ScrollViewContext } from '@tarojs/taro'
 
@@ -94,7 +94,7 @@ export class ScrollView implements ComponentInterface {
     this.mpScrollIntoViewMethod(newVal)
   }
 
-  @Listen('scroll', { capture: true })
+  @Listen('scroll')
   handleScroll (e: Event) {
     if (e instanceof CustomEvent) return
     e.stopPropagation()
@@ -118,6 +118,12 @@ export class ScrollView implements ComponentInterface {
     })
   }
 
+  @Listen('touchmove')
+  handleTouchMove (e: Event) {
+    if (e instanceof CustomEvent) return
+    e.stopPropagation()
+  }
+
   @Method()
   async mpScrollToMethod(object: ScrollViewContext.scrollTo.Option) {
     let { top, left, duration, animated = false } = object
@@ -196,6 +202,10 @@ export class ScrollView implements ComponentInterface {
     }
   }, 200)
 
+  componentDidRender () {
+    handleStencilNodes(this.el)
+  }
+
   render () {
     const { scrollX, scrollY } = this
 

packages/taro-components/src/components/swiper/swiper.tsx

@@ -167,9 +167,9 @@ export class Swiper implements ComponentInterface {
     this.el.removeChild = <T extends Node>(oldChild: T): T => {
       return newVal.removeChild(oldChild)
     }
-    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSize)
-    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSize)
-    this.el.addEventListener('MutationObserver', this.handleSwiperSize)
+    this.el.addEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce)
+    this.el.addEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce)
+    this.el.addEventListener('MutationObserver', this.handleSwiperSizeDebounce)
   }
 
   @Watch("circular")
@@ -221,9 +221,9 @@ export class Swiper implements ComponentInterface {
   }
 
   disconnectedCallback () {
-    this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSize)
-    this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSize)
-    this.el.removeEventListener('MutationObserver', this.handleSwiperSize)
+    this.el.removeEventListener('DOMNodeInserted', this.handleSwiperSizeDebounce)
+    this.el.removeEventListener('DOMNodeRemoved', this.handleSwiperSizeDebounce)
+    this.el.removeEventListener('MutationObserver', this.handleSwiperSizeDebounce)
     this.observer?.disconnect?.()
     this.observerFirst?.disconnect?.()
     this.observerLast?.disconnect?.()
@@ -232,8 +232,8 @@ export class Swiper implements ComponentInterface {
   handleSwiperLoopListen = () => {
     this.observerFirst?.disconnect && this.observerFirst.disconnect()
     this.observerLast?.disconnect && this.observerLast.disconnect()
-    this.observerFirst = new MutationObserver(this.handleSwiperLoop)
-    this.observerLast = new MutationObserver(this.handleSwiperLoop)
+    this.observerFirst = new MutationObserver(this.handleSwiperLoopDebounce)
+    this.observerLast = new MutationObserver(this.handleSwiperLoopDebounce)
     const wrapper = this.swiper.$wrapperEl?.[0]
     const list = wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)')
     if (list.length >= 1) {
@@ -247,20 +247,22 @@ export class Swiper implements ComponentInterface {
     }
   }
 
-  handleSwiperLoop = debounce(() => {
+  handleSwiperLoop = () => {
     if (!this.swiper || !this.circular) return
     const swiper = this.swiper as any // Note: loop 相关的方法 swiper 未声明
     const duplicates = this.swiperWrapper?.querySelectorAll('.swiper-slide-duplicate') || []
     if (duplicates.length < 2) {
       // Note: 循环模式下，但是前后垫片未注入
-      swiper.loopDestroy()
-      swiper.loopCreate()
+      swiper.loopDestroy?.()
+      swiper.loopCreate?.()
     } else {
-      swiper.loopFix()
+      swiper.loopFix?.()
     }
-  }, 50)
+  }
+
+  handleSwiperLoopDebounce = debounce(this.handleSwiperLoop, 50)
 
-  handleSwiperSize = debounce(() => {
+  handleSwiperSizeDebounce = debounce(() => {
     if (this.swiper && !this.circular) {
       this.swiper.updateSlides()
     }

packages/taro-components/src/components/tabbar/style/index.scss

@@ -3,6 +3,10 @@ body {
   height: 100%;
 }
 
+:root {
+  --taro-tabbar-height: 50px;
+}
+
 #app {
   height: 100%;
 }
@@ -33,7 +37,7 @@ body {
   &__tabbar {
     position: relative;
     width: 100%;
-    height: 50px;
+    height: var(--taro-tabbar-height);
     transition: bottom 0.2s, top 0.2s;
 
     &-top {

packages/taro-components/src/components/view/view.tsx

@@ -1,6 +1,8 @@
 import { Component, Prop, h, ComponentInterface, Host, Listen, State, Event, EventEmitter, Element } from '@stencil/core'
 import classNames from 'classnames'
 
+import { handleStencilNodes } from '../../utils'
+
 @Component({
   tag: 'taro-view-core',
   styleUrl: './style/index.scss'
@@ -61,13 +63,7 @@ export class View implements ComponentInterface {
   }
 
   componentDidRender () {
-    const el = this.el
-    el.childNodes.forEach(item => {
-      // Note: ['s-cn'] Content Reference Node
-      if (item.nodeType === document.COMMENT_NODE && item['s-cn']) item['s-cn'] = false
-      // Note: ['s-sr'] Is a slot reference node (渲染完成后禁用 slotRelocation 特性, 避免 Stencil 组件相互调用时内置排序与第三方 UI 框架冲突导致组件顺序混乱)
-      if (item.nodeType !== document.COMMENT_NODE && item['s-sr']) item['s-sr'] = false
-    })
+    handleStencilNodes(this.el)
   }
 
   render() {

packages/taro-components/src/utils/helper.ts

@@ -10,3 +10,12 @@ export function notSupport (name = '', instance = {}) {
     category: 'temporarily',
   })
 }
+
+export function handleStencilNodes (el: HTMLElement) {
+  el?.childNodes?.forEach(item => {
+    // Note: ['s-cn'] Content Reference Node
+    if (item.nodeType === document.COMMENT_NODE && item['s-cn']) item['s-cn'] = false
+    // Note: ['s-sr'] Is a slot reference node (渲染完成后禁用 slotRelocation 特性, 避免 Stencil 组件相互调用时内置排序与第三方 UI 框架冲突导致组件顺序混乱)
+    if (item.nodeType !== document.COMMENT_NODE && item['s-sr']) item['s-sr'] = false
+  })
+}

packages/taro-components/types/Button.d.ts

@@ -127,8 +127,10 @@ interface ButtonProps extends StandardProps {
    * @supported swan
    */
   subscribeId?: string
-  /** 打开群资料卡时，传递的群号
-   * @supported qq
+  /**
+   * @qq 打开群资料卡时，传递的群号
+   * @tt 群聊 id，通过创建聊天群、查询群信息获取
+   * @supported qq, tt
    */
   groupId?: string
   /** 打开频道页面时，传递的频道号
@@ -169,6 +171,11 @@ interface ButtonProps extends StandardProps {
    * @supported tt
    */
   dataAwemeId?: string
+  /**
+   * 是否开启半屏模式
+   * @supported tt
+   */
+  dataIsHalfPage?: boolean
   /** 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与 Taro.getUserInfo 返回的一致
    *
    * 生效时机: `open-type="getUserInfo"`
@@ -271,6 +278,11 @@ interface ButtonProps extends StandardProps {
    * @supported tt
    */
   onOpenAwemeUserProfile?: CommonEventFunction
+  /**
+   * 加群后触发
+   * @supported tt
+   */
+  onJoinGroup?: CommonEventFunction<{ errMsg: string; errNo: number }>
 }
 declare namespace ButtonProps {
   /** size 的合法值 */

packages/taro-components/types/Video.d.ts

@@ -192,8 +192,9 @@ interface VideoProps extends StandardProps {
   nativeProps?: Record<string, unknown>
   /** 是否展示底部进度条
    * @supported weapp
+   * @default true
    */
-  showBottomProgress?: string
+  showBottomProgress?: boolean
   /** 是否在小窗模式下显示播放进度
    * @supported weapp
    */
@@ -205,7 +206,7 @@ interface VideoProps extends StandardProps {
   /** 是否是 DRM 视频源
    * @supported weapp
    */
-  isDrm?: string
+  isDrm?: boolean
   /** DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android)
    * @supported weapp
    */

packages/taro-h5/src/api/canvas/CanvasContext.ts

@@ -161,17 +161,24 @@ export class CanvasContext implements Taro.CanvasContext {
   moveTo (...args) { return this.enqueueActions(this.ctx.moveTo, ...args) }
   quadraticCurveTo (...args) { return this.enqueueActions(this.ctx.quadraticCurveTo, ...args) }
   rect (...args) { return this.enqueueActions(this.ctx.rect, ...args) }
-  restore (...args) { return this.enqueueActions(this.ctx.restore, ...args) }
+  // @ts-ignore
+  reset () { return this.ctx.reset() }
+  restore () { return this.ctx.restore() }
   rotate (...args) { return this.enqueueActions(this.ctx.rotate, ...args) }
-  save (...args) { return this.enqueueActions(this.ctx.save, ...args) }
+  save () { return this.ctx.save() }
   scale (...args) { return this.enqueueActions(this.ctx.scale, ...args) }
 
   setFillStyle (color: string | CanvasGradient): void {
     this.enqueueActions(() => { this.ctx.fillStyle = color })
   }
 
   setFontSize (fontSize: number): void {
-    this.font = `${fontSize}px`
+    const arr = this.font.split(/\s/)
+    const idx = arr.findIndex(e => /^\d+px$/.test(e))
+    if (idx !== -1) {
+      arr[idx] = `${fontSize}px`
+      this.font = arr.join(' ')
+    }
   }
 
   setGlobalAlpha (alpha: number): void {

packages/taro-mini-runner/src/__tests__/__snapshots__/babel.spec.ts.snap

@@ -276,6 +276,7 @@ require("./taro");
                 "auto-pause-if-open-native": _true,
                 "vslide-gesture": _false,
                 "vslide-gesture-in-fullscreen": _true,
+                "show-bottom-progress": _true,
                 "ad-unit-id": _empty,
                 "poster-for-crawler": _empty,
                 "show-casting-button": _false,
@@ -285,12 +286,22 @@ require("./taro");
                 "show-snapshot-button": _false,
                 "show-background-playback-button": _false,
                 "background-poster": _empty,
+                "referrer-policy": "'no-referrer'",
+                "is-drm": _false,
+                "is-live": _false,
+                "provision-url": _empty,
+                "certificate-url": _empty,
+                "license-url": _empty,
+                "preferred-peak-bit-rate": _empty,
                 bindProgress: _empty,
                 bindLoadedMetadata: _empty,
                 bindControlsToggle: _empty,
                 bindEnterPictureInPicture: _empty,
                 bindLeavePictureInPicture: _empty,
                 bindSeekComplete: _empty,
+                bindCastingUserSelect: _empty,
+                bindCastingStateChange: _empty,
+                bindCastingInterrupt: _empty,
                 bindAdLoad: _empty,
                 bindAdError: _empty,
                 bindAdClose: _empty,
@@ -369,6 +380,7 @@ require("./taro");
                 "video-height": "640",
                 "beauty-style": "'smooth'",
                 filter: "'standard'",
+                "picture-in-picture-mode": "[]",
                 animation: _empty,
                 bindStateChange: _empty,
                 bindNetStatus: _empty,
@@ -545,7 +557,7 @@ require("./taro");
 <wxs module="xs" src="./utils.wxs" />
 <template name="taro_tmpl">
   <block wx:for="{{root.cn}}" wx:key="sid">
-    <template is="{{xs.a(0, item.nn, '')}}" data="{{i:item,c:1,l:''}}" />
+    <template is="{{xs.a(0, item.nn, '')}}" data="{{i:item,c:1,l:xs.f('',item.nn)}}" />
   </block>
 </template>