@tarojs/components 3.5.0-canary.0 → 3.5.0-theta.1

package/dist-h5/vue3/createFormsComponent.js

@@ -1,11 +1,12 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 { h, toRefs, computed } from 'vue';
+import { computed, h, toRefs } from 'vue';
+import { useForwardRef } from './forwardRef';
 export default function createFormsComponent(name, eventName) {
   var modelValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'value';
   var classNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
@@ -33,8 +34,10 @@ export default function createFormsComponent(name, eventName) {
 
         return name === 'taro-input' ? (_ref2 = {}, _defineProperty(_ref2, modelValue, model.value), _defineProperty(_ref2, 'auto-focus', focus.value), _ref2) : _defineProperty({}, modelValue, model.value);
       });
+      var forwardRef = useForwardRef();
       return function () {
         return h("".concat(name, "-core"), _objectSpread(_objectSpread({
+          ref: forwardRef,
           class: ['hydrated'].concat(_toConsumableArray(classNames))
         }, attrs.value), {}, _defineProperty({
           onClick: function onClick(e) {

package/dist-h5/vue3/forwardRef.js

@@ -0,0 +1,11 @@
+import { getCurrentInstance } from 'vue';
+export function useForwardRef() {
+  var instance = getCurrentInstance();
+
+  function forwardRef(ref) {
+    instance.exposed = ref;
+    instance.exposeProxy = ref;
+  }
+
+  return forwardRef;
+}

package/dist-h5/vue3/index.js

@@ -1,36 +1,19 @@
-import createComponent from './createComponent';
-import { simpleComponents } from '../vue/simpleComponents';
-import createFormsComponent from './createFormsComponent';
-import Text from './components/text';
-import Image from './components/image';
-import Icon from './components/icon';
-import ScrollView from './components/scroll-view';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as components from './components';
 export function initVue3Components(app) {
   app.config.isCustomElement = function (tag) {
     return /^taro-/.test(tag) || tag === 'root' || tag === 'block';
   };
 
-  simpleComponents.map(function (component) {
-    if (typeof component === 'string') {
-      app.component(component, createComponent(component));
-    } else {
-      var name = component.name,
-          classNames = component.classNames;
-      app.component(name, createComponent(name, classNames));
+  Object.entries(components).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        name = _ref2[0],
+        component = _ref2[1];
+
+    if (component) {
+      var tagName = 'taro-' + name.replace(/(?<=[a-z])([A-Z])/g, '-$1').toLowerCase();
+      app.component(tagName, component);
     }
   });
-  var Input = createFormsComponent('taro-input', 'input');
-  var Textarea = createFormsComponent('taro-textarea', 'input');
-  var Picker = createFormsComponent('taro-picker', 'change');
-  var Switch = createFormsComponent('taro-switch', 'change', 'checked');
-  var Slider = createFormsComponent('taro-slider', 'change', 'value', ['weui-slider-box']);
-  app.component('taro-input', Input);
-  app.component('taro-textarea', Textarea);
-  app.component('taro-picker', Picker);
-  app.component('taro-switch', Switch);
-  app.component('taro-slider', Slider);
-  app.component('taro-text', Text);
-  app.component('taro-image', Image);
-  app.component('taro-icon', Icon);
-  app.component('taro-scroll-view', ScrollView);
-}
+}
+export * from './components';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@tarojs/components",
-  "version": "3.5.0-canary.0",
+  "version": "3.5.0-theta.1",
   "description": "",
-  "main:h5": "src/index.js",
+  "browser": "dist/index.js",
+  "main:h5": "dist/index.js",
   "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "module": "dist/index.cjs.js",
   "types": "types/index.d.ts",
   "sideEffects": [
     "*.scss",
@@ -16,19 +17,11 @@
     "mini",
     "types",
     "dist-h5",
-    "virtual-list"
+    "virtual-list",
+    "vue3.d.ts"
   ],
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "scripts": {
-    "build-h5": "babel -d dist-h5 h5",
-    "build": "npm run build-h5 & stencil build --config stencil.config.ts",
-    "dev": "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'"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/NervJS/taro.git"
@@ -37,10 +30,12 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@stencil/core": "2.9.0",
-    "@tarojs/taro": "3.5.0-canary.0",
+    "@stencil/core": "~2.13.0",
+    "@stencil/sass": "1.5.2",
+    "@tarojs/taro": "3.5.0-theta.1",
     "better-scroll": "^1.14.1",
     "classnames": "^2.2.5",
+    "hls.js": "^1.1.5",
     "intersection-observer": "^0.7.0",
     "omit.js": "^1.0.0",
     "resolve-pathname": "^3.0.0",
@@ -48,12 +43,33 @@
     "weui": "^1.1.2"
   },
   "devDependencies": {
-    "@stencil/sass": "1.4.1",
-    "@types/react-native": "0.66.5",
     "jquery": "^3.4.1",
     "karmatic": "^2.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "simulant": "^0.2.2",
+    "style-loader": "1.3.0",
+    "webpack": "4.46.0",
     "workbox-build": "4.3.1"
   },
-  "gitHead": "a0222bc41bc05b0e34413d6db3de963d777a5015"
-}
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-native": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build-h5": "babel -d dist-h5 h5",
+    "build": "pnpm run build-h5 & stencil build --config stencil.config.ts",
+    "dev": "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'"
+  }
+}

package/types/Ad.d.ts

@@ -3,37 +3,37 @@ import { StandardProps, CommonEventFunction } from './common'
 
 interface AdProps extends StandardProps {
   /** 广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建
-   * @supported weapp
+   * @supported weapp, tt
    */
   unitId: string
 
   /** 广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新）
-   * @supported weapp
+   * @supported weapp, tt
    */
   adIntervals?: number
-  
+
   /** 广告类型，默认为展示`banner`，可通过设置该属性为`video`展示视频广告, `grid`为格子广告
    * @supported weapp
    */
   adType?: 'banner' | 'video' | 'grid'
-  
+
   /** 广告主题样式设置
    * @supported weapp
    */
   adTheme?: 'white' | 'black'
 
   /** 广告加载成功的回调
-   * @supported weapp
+   * @supported weapp, tt
    */
   onLoad?: CommonEventFunction
 
   /** 当广告发生错误时，触发的事件，可以通过该事件获取错误码及原因，事件对象event.detail = {errCode: 1002}
-   * @supported weapp
+   * @supported weapp, tt
    */
   onError?: CommonEventFunction<AdProps.onErrorEventDetail>
 
   /** 广告关闭的回调
-   * @supported weapp
+   * @supported weapp, tt
    */
   onClose?: CommonEventFunction
 }
@@ -42,63 +42,63 @@ declare namespace AdProps {
   interface onErrorEventDetail {
     errCode: keyof AdErrCode
   }
-  /** 
+  /**
    * 广告错误码
-   * 
+   *
    * 错误码是通过onError获取到的错误信息。调试期间，可以通过异常返回来捕获信息。
    * 在小程序发布上线之后，如果遇到异常问题，可以在[“运维中心“](https://mp.weixin.qq.com/)里面搜寻错误日志，还可以针对异常返回加上适当的监控信息。
    */
   interface AdErrCode {
     /**
-     * @abnormal 后端错误调用失败
+     * @illustrate 后端错误调用失败
      * @reason 该项错误不是开发者的异常情况
      * @solution 一般情况下忽略一段时间即可恢复。
      */
     1000
     /**
-     * @abnormal 参数错误
+     * @illustrate 参数错误
      * @reason 使用方法错误
      * @solution 可以前往 developers.weixin.qq.com 确认具体教程（小程序和小游戏分别有各自的教程，可以在顶部选项中，“设计”一栏的右侧进行切换。
      */
     1001
     /**
-     * @abnormal 广告单元无效
+     * @illustrate 广告单元无效
      * @reason 可能是拼写错误、或者误用了其他APP的广告ID
      * @solution 请重新前往 mp.weixin.qq.com 确认广告位ID。
      */
     1002
     /**
-     * @abnormal 内部错误
+     * @illustrate 内部错误
      * @reason 该项错误不是开发者的异常情况
      * @solution 一般情况下忽略一段时间即可恢复。
      */
     1003
     /**
-     * @abnormal 无合适的广告
+     * @illustrate 无合适的广告
      * @reason 广告不是每一次都会出现，这次没有出现可能是由于该用户不适合浏览广告
      * @solution 属于正常情况，且开发者需要针对这种情况做形态上的兼容。
      */
     1004
     /**
-     * @abnormal 广告组件审核中
+     * @illustrate 广告组件审核中
      * @reason 你的广告正在被审核，无法展现广告
      * @solution 请前往 mp.weixin.qq.com 确认审核状态，且开发者需要针对这种情况做形态上的兼容。
      */
     1005
     /**
-     * @abnormal 广告组件被驳回
+     * @illustrate 广告组件被驳回
      * @reason 你的广告审核失败，无法展现广告
      * @solution 请前往 mp.weixin.qq.com 确认审核状态，且开发者需要针对这种情况做形态上的兼容。
      */
     1006
     /**
-     * @abnormal 广告组件被封禁
+     * @illustrate 广告组件被封禁
      * @reason 你的广告能力已经被封禁，封禁期间无法展现广告
      * @solution 请前往 mp.weixin.qq.com 确认小程序广告封禁状态。
      */
     1007
     /**
-     * @abnormal 广告单元已关闭
+     * @illustrate 广告单元已关闭
      * @reason 该广告位的广告能力已经被关闭
      * @solution 请前往 mp.weixin.qq.com 重新打开对应广告位的展现。
      */
@@ -109,15 +109,15 @@ declare namespace AdProps {
 
 /** Banner 广告
  * @classification open
- * @supported weapp
- * @example
+ * @supported weapp, tt
+ * @example_react
  * ```tsx
  * class App extends Component {
  *   render () {
  *     return (
  *       <Ad
- *         unit-id=''
- *         ad-intervals={60}
+ *         unitId=''
+ *         adIntervals={60}
  *         onLoad={() => console.log('ad onLoad')}
  *         onError={() => console.log('ad onError')}
  *         onClose={() => console.log('ad onClose')}
@@ -126,6 +126,18 @@ declare namespace AdProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <ad
+ *     unit-id=""
+ *     ad-intervals="60"
+ *     `@load="onLoad"
+ *     `@error="onError"
+ *     `@close="onClose"
+ *   />
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/ad.html
  */
 declare const Ad: ComponentType<AdProps>

package/types/AdCustom.d.ts

@@ -0,0 +1,50 @@
+import { ComponentType } from 'react'
+import { StandardProps, CommonEventFunction } from './common'
+import { AdProps } from './Ad'
+
+interface AdCustomProps extends StandardProps {
+  /** 广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建
+   * @supported weapp
+   */
+  unitId: string
+
+  /** 广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新）
+   * @supported weapp
+   */
+  adIntervals?: number
+
+  /** 广告加载成功的回调
+   * @supported weapp
+   */
+  onLoad?: CommonEventFunction
+
+  /** 当广告发生错误时，触发的事件，可以通过该事件获取错误码及原因，事件对象event.detail = {errCode: 1002}
+   * @supported weapp
+   */
+  onError?: CommonEventFunction<AdProps.onErrorEventDetail>
+}
+
+/** Banner 广告
+ * @classification open
+ * @supported weapp
+ * @example
+ * ```tsx
+ * class App extends Component {
+ *   render () {
+ *     return (
+ *       <AdCustom
+ *         unitId=''
+ *         adIntervals={60}
+ *         onLoad={() => console.log('ad onLoad')}
+ *         onError={() => console.log('ad onError')}
+ *         onClose={() => console.log('ad onClose')}
+ *       />
+ *     )
+ *   }
+ * }
+ * ```
+ * @see https://developers.weixin.qq.com/miniprogram/dev/component/ad.html
+ */
+declare const AdCustom: ComponentType<AdCustomProps>
+
+export { AdCustom, AdCustomProps }

package/types/Audio.d.ts

@@ -72,11 +72,16 @@ interface AudioProps extends StandardProps {
    * @supported weapp, h5, swan
    */
   onEnded?: CommonEventFunction
+
+  /** 用于透传 `WebComponents` 上的属性到内部 H5 标签上
+   * @supported h5
+   */
+  nativeProps?: Record<string, unknown>
 }
 
 declare namespace AudioProps {
   interface onErrorEventDetail {
-    errMsg: keyof MediaError.code
+    errMsg: keyof MediaError.Code
   }
   interface onTimeUpdateEventDetail {
     /** 当前时间 */
@@ -85,7 +90,7 @@ declare namespace AudioProps {
     duration: number
   }
   namespace MediaError {
-    interface code {
+    interface Code {
       /** 获取资源被用户禁止 */
       1
       /** 网络错误 */
@@ -102,18 +107,18 @@ declare namespace AudioProps {
  * @classification media
  * @deprecated
  * @supported weapp, h5, swan
- * @example
+ * @example_react
  * ```tsx
  * export default class PageView extends Component {
  *   constructor() {
  *     super(...arguments)
  *   }
- * 
+ *
  *   render() {
  *     return (
  *       <View className='components-page'>
  *         <Audio
- *           src='http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
+ *           src='https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
  *           controls={true}
  *           autoplay={false}
  *           loop={false}
@@ -126,6 +131,21 @@ declare namespace AudioProps {
  *   }
  * }
  * ```
+ * @example_vue
+ * ```html
+ * <template>
+ *   <view class="components-page">
+ *     <audio
+ *       id="video"
+ *       src="https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46"
+ *       :controls="true"
+ *       :autoplay="false"
+ *       :loop="false"
+ *       :muted="true"
+ *     />
+ *   </view>
+ * </template>
+ * ```
  * @see https://developers.weixin.qq.com/miniprogram/dev/component/audio.html
  */
 declare const Audio: ComponentType<AudioProps>

package/types/Block.d.ts

@@ -1,8 +1,11 @@
 import { ComponentType } from 'react'
+import { StandardProps } from './common'
+
+type BlockProps = StandardProps
 
 /**
  * @ignore
  */
-declare const Block: ComponentType
+declare const Block: ComponentType<BlockProps>
 
-export { Block }
+export { Block, BlockProps }