@tarojs/components 3.5.7-alpha.9 → 3.5.8

package/{dist/react/component-lib → dist-h5/react/utils}/reactify-wc.js

@@ -20,7 +20,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * https://github.com/BBKolton/reactify-wc/
  * modified event naming
  **/
-import React, { createElement, createRef } from 'react';
+import React, { createElement, createRef } from 'react'; // eslint-disable-next-line
+
 var h = React.createElement;
 var SCROLL_VIEW = 'taro-scroll-view-core';
 var IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i; // 为了不要覆盖 wc 中 host 内置的 class 和 stencil 加入的 class
@@ -120,8 +121,18 @@ function updateProp(ctx, comp, propKey, prevProps, props) {
 
   if (typeof val === 'function' && propKey.match(/^on[A-Z]/)) {
     var event = propKey.substr(2).toLowerCase();
-    ctx.eventHandlers.push([event, val]);
-    return dom.addEventListener(event, val);
+    var fn = val; // 解决用户监听 ScrollView 的 onScroll 会监听到原生 onScroll 的问题
+
+    if (comp === SCROLL_VIEW && event === 'scroll') {
+      fn = function fn(e) {
+        if (e instanceof CustomEvent) {
+          val.apply(null, Array.from(arguments));
+        }
+      };
+    }
+
+    ctx.eventHandlers.push([event, fn]);
+    return dom.addEventListener(event, fn);
   }
 
   if (typeof val === 'string' || typeof val === 'number') {
@@ -156,7 +167,7 @@ var reactifyWebComponent = function reactifyWebComponent(WC) {
 
       _this = _super.call(this, props);
       _this.eventHandlers = [];
-      _this.ref = createRef();
+      _this.ref = /*#__PURE__*/createRef();
       return _this;
     }
 
@@ -194,7 +205,7 @@ var reactifyWebComponent = function reactifyWebComponent(WC) {
           console.warn('内置组件不支持字符串 ref');
         }
 
-        this.update(undefined);
+        this.update();
       }
     }, {
       key: "componentWillUnmount",
@@ -227,16 +238,15 @@ var reactifyWebComponent = function reactifyWebComponent(WC) {
           ref: this.ref
         };
         if (dangerouslySetInnerHTML) props.dangerouslySetInnerHTML = dangerouslySetInnerHTML;
-        return createElement(WC, props, children);
+        return /*#__PURE__*/createElement(WC, props, children);
       }
     }]);
 
     return Index;
-  }(React.Component); // eslint-disable-next-line react/display-name
-
+  }(React.Component);
 
-  return React.forwardRef(function (props, ref) {
-    return h(Index, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/React.forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(Index, _objectSpread(_objectSpread({}, props), {}, {
       forwardRef: ref
     }));
   });

package/{dist/vue2/component-lib → dist-h5/vue/components}/icon.js

@@ -1,5 +1,5 @@
-import { listeners } from './mixins/listeners';
-import { refs } from './mixins/refs';
+import { listeners } from '../mixins/listeners';
+import { refs } from '../mixins/refs';
 export default {
   name: 'taro-icon',
   mixins: [listeners, refs],

package/{dist/vue2/component-lib → dist-h5/vue/components}/image.js

@@ -1,5 +1,5 @@
-import { listeners } from './mixins/listeners';
-import { refs } from './mixins/refs';
+import { listeners } from '../mixins/listeners';
+import { refs } from '../mixins/refs';
 export default {
   name: 'taro-image',
   mixins: [listeners, refs],

package/{dist/vue2/component-lib → dist-h5/vue/components}/picker.js

@@ -4,8 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { listeners } from './mixins/listeners';
-import { refs } from './mixins/refs';
+import { listeners } from '../mixins/listeners';
+import { refs } from '../mixins/refs';
 export default {
   name: 'taro-picker',
   mixins: [listeners, refs],

package/{dist/vue2/component-lib → dist-h5/vue/components}/scroll-view.js

@@ -4,8 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { listeners } from './mixins/listeners';
-import { refs } from './mixins/refs';
+import { listeners } from '../mixins/listeners';
+import { refs } from '../mixins/refs';
 export default {
   name: 'taro-scroll-view',
   mixins: [listeners, refs],

package/{dist/vue2/component-lib → dist-h5/vue/components}/text.js

@@ -1,5 +1,5 @@
-import { listeners } from './mixins/listeners';
-import { refs } from './mixins/refs';
+import { listeners } from '../mixins/listeners';
+import { refs } from '../mixins/refs';
 export default {
   name: 'taro-text',
   mixins: [listeners, refs],

package/{dist/vue2/component-lib → dist-h5/vue}/index.js

@@ -7,10 +7,9 @@ components.forEach(function (params) {
   if (typeof params === 'string') {
     Vue.component(params, createComponent(params));
   } else if (params instanceof Array) {
-    var _ref = params,
-        _ref2 = _slicedToArray(_ref, 2),
-        name = _ref2[0],
-        props = _ref2[1];
+    var _params = _slicedToArray(params, 2),
+        name = _params[0],
+        props = _params[1];
 
     var classNames = props.classNames,
         _props$type = props.type,

package/{dist/vue3/component-lib → dist-h5/vue3/components}/icon.js

@@ -1,8 +1,8 @@
 import { h } from 'vue';
-import { useForwardRef } from './forwardRef';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap'],
-  setup: function setup(__props, _ref) {
+  setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;

package/{dist/vue3/component-lib → dist-h5/vue3/components}/image.js

@@ -1,8 +1,8 @@
 import { h } from 'vue';
-import { useForwardRef } from './forwardRef';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap'],
-  setup: function setup(__props, _ref) {
+  setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;

package/{dist/vue3/component-lib → dist-h5/vue3/components}/index.js

@@ -1,5 +1,5 @@
-import createComponent from './createComponent';
-import createFormsComponent from './createFormsComponent'; // 视图容器
+import createComponent from '../createComponent';
+import createFormsComponent from '../createFormsComponent'; // 视图容器
 
 export var CoverImage = createComponent('taro-cover-image');
 export var CoverView = createComponent('taro-cover-view');

package/{dist/vue3/component-lib → dist-h5/vue3/components}/scroll-view.js

@@ -1,8 +1,8 @@
 import { h } from 'vue';
-import { useForwardRef } from './forwardRef';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap', 'scroll'],
-  setup: function setup(__props, _ref) {
+  setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;

package/{dist/vue3/component-lib → dist-h5/vue3/components}/text.js

@@ -1,8 +1,8 @@
 import { h } from 'vue';
-import { useForwardRef } from './forwardRef';
+import { useForwardRef } from '../forwardRef';
 export default {
   emits: ['tap'],
-  setup: function setup(__props, _ref) {
+  setup: function setup(props, _ref) {
     var slots = _ref.slots,
         emit = _ref.emit,
         attrs = _ref.attrs;

package/{dist/vue3/component-lib → dist-h5/vue3}/createComponent.js

@@ -5,7 +5,7 @@ export default function createComponent(name) {
   var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return {
     emits: ['tap'],
-    setup: function setup(__props, _ref) {
+    setup: function setup(props, _ref) {
       var slots = _ref.slots,
           emit = _ref.emit;
       var forwardRef = useForwardRef();

package/loader/package.json

@@ -1,6 +1,5 @@
 {
   "name": "taro-components-loader",
-  "private": true,
   "typings": "./index.d.ts",
   "module": "./index.js",
   "main": "./index.cjs.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/components",
-  "version": "3.5.7-alpha.9",
+  "version": "3.5.8",
   "description": "Taro 组件库",
   "browser": "dist/index.js",
   "main:h5": "dist/index.js",
@@ -16,6 +16,7 @@
     "loader",
     "mini",
     "types",
+    "dist-h5",
     "virtual-list",
     "vue3.d.ts"
   ],
@@ -29,30 +30,36 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@tarojs/router": "3.5.7-alpha.9",
-    "@tarojs/taro": "3.5.7-alpha.9",
     "classnames": "^2.2.5",
     "hls.js": "^1.1.5",
     "intersection-observer": "^0.7.0",
     "resolve-pathname": "^3.0.0",
     "swiper": "6.8.0",
-    "weui": "^1.1.2"
+    "weui": "^1.1.2",
+    "@tarojs/router": "3.5.8",
+    "@tarojs/taro": "3.5.8"
   },
   "devDependencies": {
-    "@stencil/core": "^2.18.1",
-    "@stencil/react-output-target": "0.3.1",
-    "@stencil/sass": "^2.0.0",
-    "@stencil/vue-output-target": "0.6.2",
-    "@types/jest": "^27.4.1",
+    "@babel/generator": "^7.14.5",
+    "@babel/parser": "^7.14.5",
+    "@babel/traverse": "^7.14.5",
+    "@babel/types": "^7.14.5",
+    "@stencil/core": "~2.13.0",
+    "@stencil/sass": "1.5.2",
     "@types/node": "^14.14.31",
-    "humps": "^2.0.1",
+    "change-case": "^4.1.2",
+    "css-loader": "3.4.2",
+    "csstype": "^3.1.1",
     "jquery": "^3.4.1",
+    "karmatic": "^2.1.0",
     "lodash": "^4.17.21",
-    "miniapp-types": "latest",
-    "puppeteer": "^19.2.0",
-    "stencil-vue2-output-target": "0.0.4",
+    "miniapp-types": "1.1.20",
+    "simulant": "^0.2.2",
+    "style-loader": "1.3.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "webpack": "4.46.0",
+    "workbox-build": "4.3.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -66,17 +73,13 @@
     }
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production run-s build:components build:library",
-    "build:components": "stencil build --config stencil.config.ts",
-    "build:library": "pnpm --filter @tarojs/components-library-react --filter @tarojs/components-library-vue2 --filter @tarojs/components-library-vue3 run build:ci",
-    "dev:components": "cross-env NODE_ENV=development pnpm run build:components --watch",
-    "dev:library-react": "cross-env NODE_ENV=development pnpm --filter @tarojs/components-library-react run build:ci --watch",
-    "dev:library-vue2": "cross-env NODE_ENV=development pnpm --filter @tarojs/components-library-vue2 run build:ci --watch",
-    "dev:library-vue3": "cross-env NODE_ENV=development pnpm --filter @tarojs/components-library-vue3 run build:ci --watch",
-    "test": "cross-env NODE_ENV=test stencil test --spec --e2e",
-    "test:ci": "pnpm run test --ci --no-build",
-    "test:coverage": "pnpm run test --ci --screenshot --coverage",
-    "test:watch": "pnpm run test --screenshot --watch",
+    "build-h5": "babel -d dist-h5 h5",
+    "build": "pnpm run build-h5 & cross-env NODE_ENV=production stencil build --config stencil.config.ts",
+    "dev": "cross-env NODE_ENV=development stencil build --config stencil.config.ts --watch",
+    "test": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
+    "test:ci": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
+    "test:debug": "karmatic debug --files '__tests__/setup.js,__tests__/**.spec.js' --coverage false",
+    "test:coverage": "karmatic --files '__tests__/setup.js,__tests__/**.spec.js'",
     "sync:types": "ts-node scripts/json-schema-to-types.ts"
   }
 }

package/types/AnimationVideo.d.ts

@@ -0,0 +1,62 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface AnimationVideoProps extends StandardProps {
+  /** 组件使用的 video 视频资源的宽度（单位：px）
+   * @supported swan
+   * @default 800
+   */
+  resourceWidth?: number
+
+  /** 组件使用的 video 视频资源的高度（单位：px）
+   * @supported swan
+   * @default 400
+   */
+  resourceHeight?: number
+
+  /** 用于设置动画画布的 CSS 样式
+   * @supported swan
+   * @default "width: 400px;height: 400px"
+   */
+  canvasStyle?: string
+
+  /** 动画资源地址，支持相对路径以及远程地址。如果是远程路径，注意 response header 里需要设置 Access-Control-Allow-Origin 来防止跨域问题
+   * @supported swan
+   */
+  path?: string
+
+  /** 动画是否循环播放
+   * @supported swan
+   * @default false
+   */
+  loop?: boolean
+
+  /** 动画是否自动播放
+   * @supported swan
+   * @default false
+   */
+  autoplay?: boolean
+
+  /** 视频资源中 alpha 通道的方向，left 表示 alpha 通道在资源的左边，right 表示 alpha 通道在资源的右边。详情请参考透明视频设计资源示例
+   * @supported swan
+   * @default "left"
+   */
+  alphaDirection?: string
+
+  /** 动画开始播放的回调
+   * @supported swan
+   */
+  onStarted?: CommonEventFunction
+
+  /** 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及暂停动画不会触发）
+   * @supported swan
+   */
+  onEnded?: CommonEventFunction
+}
+
+/** 透明视频动画
+ * @classification media
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/animation-video/
+ */
+declare const AnimationVideo: ComponentType<AnimationVideoProps>
+export { AnimationVideo, AnimationVideoProps }

package/types/AnimationView.d.ts

@@ -0,0 +1,45 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface AnimationViewProps extends StandardProps {
+  /** 动画资源地址，目前只支持绝对路径
+   * @supported swan
+   */
+  path?: string
+
+  /** 动画是否循环播放
+   * @supported swan
+   * @default false
+   */
+  loop?: boolean
+
+  /** 动画是否自动播放
+   * @supported swan
+   * @default true
+   */
+  autoplay?: boolean
+
+  /** 动画操作，可取值 play、pause、stop
+   * @supported swan
+   * @default "play"
+   */
+  action?: 'play' | 'pause' | 'stop'
+
+  /** 是否隐藏动画
+   * @supported swan
+   * @default true
+   */
+  hidden?: boolean
+
+  /** 当播放到末尾时触发 ended 事件（自然播放结束会触发回调，循环播放结束及手动停止动画不会触发）
+   * @supported swan
+   */
+  onEnded?: CommonEventFunction
+}
+
+/** Lottie 动画
+ * @classification media
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/animation-view-Lottie/
+ */
+declare const AnimationView: ComponentType<AnimationViewProps>
+export { AnimationView, AnimationViewProps }

package/types/ArCamera.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface ArCameraProps extends StandardProps {
+  /** AR 项目唯一标识，在 DuMixAR 内容开放平台上传生成 AR 项目后获取 AR Key
+   * @supported swan
+   */
+  key?: string
+
+  /** AR 相机类型，在 DuMixAR 内容开放平台上传生成 AR 项目后获取 AR Type：
+   * 2D 跟踪类型：0
+   * SLAM 类型：5
+   * IMU 类型：8
+   * @supported swan
+   */
+  type?: '0' | '5' | '8'
+
+  /** 闪光灯，值为 auto、on、off
+   * @supported swan
+   * @default "off"
+   */
+  flash?: 'auto' | 'on' | 'off'
+
+  /** 用户不允许使用摄像头或扫码失败时触发
+   * @supported swan
+   */
+  onError?: CommonEventFunction
+
+  /** AR 加载成功时触发
+   * @supported swan
+   */
+  onLoad?: CommonEventFunction
+
+  /** 开发者制作 AR 项目时可自定义按键，用户点击时会收到事件和数据，用户自定义事件格式参见代码示例 2：用户自定义事件
+   * @supported swan
+   */
+  onMessage?: CommonEventFunction
+
+  /** 扫描识图结束后触发
+   * @supported swan
+   */
+  onScanCode?: CommonEventFunction
+}
+
+/** AR 相机
+ * @classification media
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/component/media_ar-camera/
+ */
+declare const ArCamera: ComponentType<ArCameraProps>
+export { ArCamera, ArCameraProps }

package/types/AwemeData.d.ts

@@ -0,0 +1,43 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface AwemeDataProps extends StandardProps {
+  /** 用户的抖音号，可以进入抖音 App 用户个人主页查看
+   * @supported tt
+   */
+  awemeId?: string
+
+  /** 类型，可以选择头像或昵称
+   * @supported tt
+   * @default "avatar"
+   */
+  type?: string
+
+  /** 禁用默认行为。点击头像时，如果用户处于直播状态下默认会跳转到直播间，非直播状态下跳转到个人主页。如果为 true，点击头像时不会有默认行为。
+   * @supported tt
+   * @default false
+   */
+  disableDefault?: boolean
+
+  /** 获取信息失败时显示的默认头像 url
+   * @supported tt
+   */
+  defaultAvatar?: string
+
+  /** 获取信息失败时显示的默认昵称文本
+   * @supported tt
+   */
+  defaultText?: string
+
+  /** 当错误发生时触发
+   * @supported tt
+   */
+  onError?: CommonEventFunction
+}
+
+/** 直播间状态组件
+ * @classification open
+ * @supported tt
+ * @see https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/open-capacity/aweme-data/
+ */
+declare const AwemeData: ComponentType<AwemeDataProps>
+export { AwemeData, AwemeDataProps }

package/types/CommentDetail.d.ts

@@ -0,0 +1,72 @@
+import { ComponentType } from 'react'
+import { StandardProps } from './common'
+interface CommentDetailProps extends StandardProps {
+  /** 评论核心参数
+   * @supported swan
+   */
+  commentParam: CommentDetailProps.ICommentParam
+
+  /** 评论 ID
+   * @supported swan
+   */
+  srid: string
+
+  /** 滚动方式为页面滚动，若组件作为浮层使用，该参数需设为 false
+   * @supported swan
+   * @default true
+   */
+  isPageScroll?: boolean
+
+  /** 是否需要底部 toolbar，若使用开发者自定义的底部 toolbar，该参数需设为 false
+   * @supported swan
+   * @default true
+   */
+  needToolbar?: boolean
+
+  /** 是否需要详情顶部父级评论的点赞按钮，默认显示
+   * @supported swan
+   * @default true
+   */
+  needLikeBtn?: boolean
+
+  /** 删除详情后是否返回列表项，默认一站式逻辑。若使用浮层，请设置改属性为 false
+   * @supported swan
+   * @default true
+   */
+  backListAfterDelete?: boolean
+
+  /** 用于调起评论发布器发布评论
+   * @supported swan
+   * @default false
+   */
+  addComment?: boolean
+
+  /** 删除整体详情内容时触发，返回数据为{status, data:{srid}}
+   * @supported swan
+   */
+  onDelete?: CommonEventFunction
+}
+namespace CommentDetailProps {
+  interface ICommentParam {
+    /** 被点赞的文章的 id，与 path 参数一一对应
+     * @example "20200101"
+     */
+    snid: string
+
+    /** 文章标题 */
+    title: string
+
+    /** 智能小程序内页链接，最长不能超过 194 字符
+     * @example "/pages/index/index"
+     */
+    path: string
+  }
+}
+
+/** 评论详情
+ * @classification open
+ * @supported swan
+ * @see https://smartprogram.baidu.com/docs/develop/extended/component-content/comment-detail/
+ */
+declare const CommentDetail: ComponentType<CommentDetailProps>
+export { CommentDetail, CommentDetailProps }