feat(component): 新增 H5 组件，并新增共同样式 (#10841)

* feat(component): add h5 component error tips

* feat(types): 补齐新增组件相关类型

* feat(route): taro-page 滚动条共享问题 fix #7974

Co-authored-by: chenjiajian <[email protected]>

packages/taro-components/src/components/ad-custom/ad-custom.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-ad-custom-core'
+})
+export class AdCustom {
+  componentDidLoad () {
+    console.error('H5 暂不支持 AdCustom 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-ad-core'
+})
+export class Ad {
+  componentDidLoad () {
+    console.error('H5 暂不支持 Ad 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-editor-core'
+})
+export class Editor {
+  componentDidLoad () {
+    console.error('H5 暂不支持 Editor 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/functional-page-navigator/functional-page-navigator.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-functional-page-navigator-core'
+})
+export class FunctionalPageNavigator {
+  componentDidLoad () {
+    console.error('H5 暂不支持 FunctionalPageNavigator 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/keyboard-accessory/keyboard-accessory.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-keyboard-accessory-core'
+})
+export class KeyboardAccessory {
+  componentDidLoad () {
+    console.error('H5 暂不支持 KeyboardAccessory 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/live-player/live-player.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-live-player-core'
+})
+export class LivePlayer {
+  componentDidLoad () {
+    console.error('H5 暂不支持 LivePlayer 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/live-pusher/live-pusher.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-live-pusher-core'
+})
+export class LivePusher {
+  componentDidLoad () {
+    console.error('H5 暂不支持 LivePusher 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-map-core'
+})
+export class Map {
+  componentDidLoad () {
+    console.error('H5 暂不支持 Map 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/match-media/match-media.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-match-media-core'
+})
+export class MatchMedia {
+  componentDidLoad () {
+    console.error('H5 暂不支持 MatchMedia 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/navigation-bar/navigation-bar.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-navigation-bar-core'
+})
+export class NavigationBar {
+  componentDidLoad () {
+    console.error('H5 暂不支持 NavigationBar 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/official-account/official-account.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-official-account-core'
+})
+export class OfficialAccount {
+  componentDidLoad () {
+    console.error('H5 暂不支持 OfficialAccount 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/page-container/page-container.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-page-container-core'
+})
+export class PageContainer {
+  componentDidLoad () {
+    console.error('H5 暂不支持 PageContainer 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/page-meta/page-meta.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-page-meta-core'
+})
+export class PageMeta {
+  componentDidLoad () {
+    console.error('H5 暂不支持 PageMeta 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/share-element/share-element.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-share-element-core'
+})
+export class ShareElement {
+  componentDidLoad () {
+    console.error('H5 暂不支持 ShareElement 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

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

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-slot-core'
+})
+export class Slot {
+  componentDidLoad () {
+    console.error('H5 暂不支持 Slot 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/components/voip-room/voip-room.tsx

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Component, h, Host } from '@stencil/core'
+
+@Component({
+  tag: 'taro-voip-room-core'
+})
+export class VoipRoom {
+  componentDidLoad () {
+    console.error('H5 暂不支持 VoipRoom 组件！')
+  }
+
+  render () {
+    return (
+      <Host />
+    )
+  }
+}

packages/taro-components/src/global.css

@@ -0,0 +1,7 @@
+@import url(../node_modules/weui/dist/style/weui.min.css);
+
+.taro_page {
+  max-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}

packages/taro-components/stencil.config.ts

@@ -4,7 +4,7 @@ const { jsWithTs: tsjPreset } = require('ts-jest/presets')
 
 export const config: Config = {
   namespace: 'taro-components',
-  globalStyle: './node_modules/weui/dist/style/weui.min.css',
+  globalStyle: './src/global.css',
   plugins: [
     sass()
   ],

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

@@ -11,12 +11,12 @@ interface AdProps extends StandardProps {
    * @supported weapp
    */
   adIntervals?: number
-  
+
   /** 广告类型，默认为展示`banner`，可通过设置该属性为`video`展示视频广告, `grid`为格子广告
    * @supported weapp
    */
   adType?: 'banner' | 'video' | 'grid'
-  
+
   /** 广告主题样式设置
    * @supported weapp
    */
@@ -42,9 +42,9 @@ declare namespace AdProps {
   interface onErrorEventDetail {
     errCode: keyof AdErrCode
   }
-  /** 
+  /**
    * 广告错误码
-   * 
+   *
    * 错误码是通过onError获取到的错误信息。调试期间，可以通过异常返回来捕获信息。
    * 在小程序发布上线之后，如果遇到异常问题，可以在[“运维中心“](https://mp.weixin.qq.com/)里面搜寻错误日志，还可以针对异常返回加上适当的监控信息。
    */
@@ -116,8 +116,8 @@ declare namespace AdProps {
  *   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')}

packages/taro-components/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 }