chore: stencil update

packages/taro-components-react/src/components/input/index.tsx

@@ -48,12 +48,12 @@ class Input extends React.Component<IProps, null> {
     this.handleComposition = this.handleComposition.bind(this)
     this.handleBeforeInput = this.handleBeforeInput.bind(this)
     this.isOnComposition = false
-    this.onInputExcuted = false
+    this.onInputExecuted = false
   }
 
   inputRef: HTMLInputElement
   isOnComposition: boolean
-  onInputExcuted: boolean
+  onInputExecuted: boolean
 
   componentDidMount () {
     // 修复无法选择文件
@@ -90,10 +90,10 @@ class Input extends React.Component<IProps, null> {
       onInput
     } = this.props
 
-    if (!this.isOnComposition && !this.onInputExcuted) {
+    if (!this.isOnComposition && !this.onInputExecuted) {
       let { value } = e.target
       const inputType = getTrueType(type, confirmType, password)
-      this.onInputExcuted = true
+      this.onInputExecuted = true
       /* 修复 number 类型 maxLength 无效 */
       if (inputType === 'number' && value && maxlength <= value.length) {
         value = value.substring(0, maxlength)
@@ -115,14 +115,14 @@ class Input extends React.Component<IProps, null> {
       // }
 
       typeof onInput === 'function' && onInput(e)
-      this.onInputExcuted = false
+      this.onInputExecuted = false
     }
   }
 
   handlePaste (e) {
     e.stopPropagation()
     const { onPaste } = this.props
-    this.onInputExcuted = false
+    this.onInputExecuted = false
     Object.defineProperty(e, 'detail', {
       value: {
         value: e.target.value
@@ -134,7 +134,7 @@ class Input extends React.Component<IProps, null> {
   handleFocus (e) {
     e.stopPropagation()
     const { onFocus } = this.props
-    this.onInputExcuted = false
+    this.onInputExecuted = false
     Object.defineProperty(e, 'detail', {
       value: {
         value: e.target.value
@@ -159,7 +159,7 @@ class Input extends React.Component<IProps, null> {
     const { onConfirm, onKeyDown } = this.props
     const { value } = e.target
     const keyCode = e.keyCode || e.code
-    this.onInputExcuted = false
+    this.onInputExecuted = false
 
     if (typeof onKeyDown === 'function') {
       Object.defineProperty(e, 'detail', {

packages/taro-components/package.json

@@ -56,42 +56,42 @@
     "node": ">= 18"
   },
   "dependencies": {
-    "@stencil/core": "2.22.3",
-    "hammerjs": "^2.0.8",
+    "@stencil/core": "3.4.2",
     "@tarojs/runtime": "workspace:*",
     "@tarojs/shared": "workspace:*",
     "@tarojs/taro": "workspace:*",
     "classnames": "^2.2.5",
+    "hammerjs": "^2.0.8",
     "hls.js": "^1.1.5",
     "resolve-pathname": "^3.0.0",
     "swiper": "11.1.15",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@tarojs/helper": "workspace:*",
     "@babel/generator": "^7.21.4",
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.21.4",
     "@babel/types": "^7.23.0",
     "@stencil/react-output-target": "0.4.0",
     "@stencil/vue-output-target": "0.7.0",
+    "@tarojs/helper": "workspace:*",
     "@types/jest": "^27.4.1",
     "change-case": "^4.1.2",
     "csstype": "^3.1.1",
     "esbuild": "~0.21.0",
+    "jest": "27.5.1",
+    "jest-cli": "27.5.1",
+    "jest-environment-node": "27.5.1",
+    "jest-runner": "27.5.1",
     "lightningcss": "^1.22.1",
     "lodash": "^4.17.21",
     "miniapp-types": "1.6.0",
     "mkdirp": "^1.0.4",
-    "puppeteer": "^19.2.0",
-    "sass": "^1.58.3",
-    "tsconfig-paths": "^3.14.1",
-    "rollup-plugin-node-externals": "^5.0.0",
+    "puppeteer": "^20.9.0",
     "rollup": "^3.29.4",
-    "jest": "27.5.1",
-    "jest-cli": "27.5.1",
-    "jest-runner": "27.5.1",
-    "jest-environment-node": "27.5.1"
+    "rollup-plugin-node-externals": "^5.0.0",
+    "sass": "^1.58.3",
+    "tsconfig-paths": "^3.14.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {

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

@@ -47,7 +47,6 @@ const outputTargets: OutputTarget[] = [
     type: 'dist-custom-elements',
     minify: isProd,
     // inlineDynamicImports: true,
-    autoDefineCustomElements: false,
     generateTypeDeclarations: false,
   },
   {
@@ -89,8 +88,8 @@ export const config: Config = {
     { components: ['taro-video-core', 'taro-video-control', 'taro-video-danmu'] }
   ],
   /**
-   * Note: Taro内部有很多地方都直接引用了dist/components，最终的编译产物中有很多super()，导致低版安装白屏
-   * 为彻底解决此包导致的白屏问题，故暂不在包构建是转为es5，而是将此包加入到项目的babel编译中
+   * Note: Taro 内部有很多地方都直接引用了 dist/components，最终的编译产物中有很多 super()，导致低版安装白屏
+   * 为彻底解决此包导致的白屏问题，故暂不在包构建是转为 es5，而是将此包加入到项目的 babel 编译中
    */
   // buildEs5: 'prod',
   /**

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

@@ -28,7 +28,7 @@ export class Input implements ComponentInterface {
   private inputRef: HTMLInputElement
   private isOnComposition = false
   private isOnPaste = false
-  private onInputExcuted = false
+  private onInputExecuted = false
   private fileListener: EventHandler
 
   @Prop({ mutable: true }) value: string = ''
@@ -118,18 +118,18 @@ export class Input implements ComponentInterface {
     }
   }
 
-  handleInput = (e: TaroEvent<HTMLInputElement>) => {
+  handleInput = (e: TaroEvent<HTMLInputElement> & InputEvent) => {
     e.stopPropagation()
     const {
       type,
       maxlength,
       confirmType,
       password
     } = this
-    if (!this.isOnComposition && !this.onInputExcuted) {
+    if (!this.isOnComposition && !this.onInputExecuted) {
       let value = e.target.value
       const inputType = getTrueType(type, confirmType, password)
-      this.onInputExcuted = true
+      this.onInputExecuted = true
       /* 修复 number 类型 maxlength 无效 */
       if (inputType === 'number' && value && maxlength > -1 && maxlength <= value.length) {
         value = value.substring(0, maxlength)
@@ -152,7 +152,7 @@ export class Input implements ComponentInterface {
         value,
         cursor: value.length
       })
-      this.onInputExcuted = false
+      this.onInputExecuted = false
     }
   }
 
@@ -166,7 +166,7 @@ export class Input implements ComponentInterface {
 
   handleFocus = (e: TaroEvent<HTMLInputElement> & FocusEvent) => {
     e.stopPropagation()
-    this.onInputExcuted = false
+    this.onInputExecuted = false
     this.onFocus.emit({
       value: e.target.value
     })
@@ -199,7 +199,7 @@ export class Input implements ComponentInterface {
     e.stopPropagation()
     const { value } = e.target
     const keyCode = e.keyCode || e.code
-    this.onInputExcuted = false
+    this.onInputExecuted = false
 
     this.onKeyDown.emit({
       value,
@@ -274,8 +274,8 @@ export class Input implements ComponentInterface {
         onChange={this.handleChange}
         onKeyDown={this.handleKeyDown}
         onPaste={this.handlePaste}
-        onCompositionStart={this.handleComposition}
-        onCompositionEnd={this.handleComposition}
+        onCompositionstart={this.handleComposition}
+        onCompositionend={this.handleComposition}
         {...nativeProps}
         value={fixControlledValue(value)}
       />

packages/taro-components/src/components/pull-to-refresh/pull-to-refresh.tsx

@@ -116,7 +116,7 @@ export class PullToRefresh implements ComponentInterface {
 
   triggerPullDownRefresh = (flag: boolean) => {
     // 在初始化时、用代码 自动 触发 pullDownRefresh
-    // 添加this._isMounted的判断，否则组建一实例化，currSt就会是finish
+    // 添加 this._isMounted 的判断，否则组件一实例化，currSt 就会是 finish
     if (!this.dragOnEdge && this._isMounted) {
       if (flag) {
         this._lastScreenY = this.distanceToRefresh + 1
@@ -136,7 +136,14 @@ export class PullToRefresh implements ComponentInterface {
     this.el.appendChild = child?.appendChild.bind(child)
     this.el.insertBefore = child?.insertBefore.bind(child)
     this.el.replaceChild = child?.replaceChild.bind(child)
-    this.el.removeChild = child?.removeChild.bind(child)
+
+    const originalRemoveChild = this.el.removeChild.bind(this.el)
+    this.el.removeChild = (node: Node) => {
+      if (child && node.parentNode === child) {
+        return child.removeChild(node)
+      }
+      return originalRemoveChild(node)
+    }
     this._to = {
       touchstart: this.onTouchStart.bind(this, ele),
       touchmove: this.onTouchMove.bind(this, ele),
@@ -151,7 +158,7 @@ export class PullToRefresh implements ComponentInterface {
   destroy = () => {
     // fix 频繁切换页面，可能会导致 this._to 为空造成报错
     if(!this._to) return
-    
+
     const ele = this.scrollContainer
     Object.keys(this._to).forEach(key => {
       ele.removeEventListener(key, this._to[key])
@@ -196,7 +203,7 @@ export class PullToRefresh implements ComponentInterface {
 
     if (this.isEdge(ele)) {
       if (!this.dragOnEdge) {
-        // 当用户开始往上滑的时候isEdge还是false的话，会导致this._ScreenY不是想要的，只有当isEdge为true时，再上滑，才有意义
+        // 当用户开始往上滑的时候 isEdge 还是 false 的话，会导致 this._ScreenY 不是想要的，只有当 isEdge 为 true 时，再上滑，才有意义
         // 下面这行代码解决了上面这个问题
         this._ScreenY = this._startScreenY = e.touches[0].screenY
         this.dragOnEdge = true

packages/taro-components/src/components/scroll-view/readme.md

@@ -25,13 +25,15 @@
 | Property                    | Attribute                    | Description | Type                                        | Default     |
 | --------------------------- | ---------------------------- | ----------- | ------------------------------------------- | ----------- |
 | `animated`                  | `scroll-with-animation`      |             | `boolean`                                   | `false`     |
+| `enhanced`                  | `enhanced`                   |             | `boolean`                                   | `false`     |
 | `lowerThreshold`            | `lower-threshold`            |             | `number \| string`                          | `50`        |
 | `mpScrollIntoView`          | `scroll-into-view`           |             | `string`                                    | `undefined` |
 | `mpScrollIntoViewAlignment` | `scroll-into-view-alignment` |             | `"center" \| "end" \| "nearest" \| "start"` | `undefined` |
 | `mpScrollLeft`              | `scroll-left`                |             | `number \| string`                          | `undefined` |
 | `mpScrollTop`               | `scroll-top`                 |             | `number \| string`                          | `undefined` |
 | `scrollX`                   | `scroll-x`                   |             | `boolean`                                   | `false`     |
 | `scrollY`                   | `scroll-y`                   |             | `boolean`                                   | `false`     |
+| `showScrollbar`             | `show-scrollbar`             |             | `boolean`                                   | `true`      |
 | `upperThreshold`            | `upper-threshold`            |             | `number \| string`                          | `50`        |
 
 

packages/taro-router/src/tabbar.ts

@@ -1,4 +1,4 @@
-import { defineCustomElementTaroTabbar } from '@tarojs/components/dist/components'
+import { defineCustomElement as defineCustomElementTaroTabbar } from '@tarojs/components/dist/components/taro-tabbar'
 import { AppConfig, initTabBarApis } from '@tarojs/taro'
 
 import type { History } from 'history'