feat(@hippy/react-web): add build config for the declaration

Tencent · Apr 3, 2023 · a826351 · a826351
1 parent 2274aeb
commit a826351
Show file tree

Hide file tree

Showing 21 changed files with 378 additions and 323 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "rimraf": "^2.6.3",
     "rollup": "^2.79.1",
     "rollup-plugin-api-extractor": "^0.2.5",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-flow-no-whitespace": "^1.0.0",
     "rollup-plugin-typescript2": "^0.34.0",
     "shelljs": "^0.8.5",

diff --git a/packages/hippy-react-web/package-lock.json b/packages/hippy-react-web/package-lock.json
diff --git a/packages/hippy-react-web/package.json b/packages/hippy-react-web/package.json
@@ -4,6 +4,7 @@
   "description": "Web Adapter for Hippy React",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "homepage": "https://hippyjs.org",
   "repository": "https://github.com/Tencent/Hippy",
   "author": "OpenHippy Team",
@@ -18,8 +19,8 @@
     "Web"
   ],
   "dependencies": {
-    "@hippy/rmc-list-view": ">=1.0.0",
-    "@hippy/rmc-pull-to-refresh": ">=1.1.1",
+    "@hippy/rmc-list-view": "^1.0.0",
+    "@hippy/rmc-pull-to-refresh": "^1.1.1",
     "animated-scroll-to": "^2.2.0",
     "bezier-easing": "^2.1.0",
     "normalize-css-color": "^1.0.2",

diff --git a/packages/hippy-react-web/src/adapters/image-loader.ts b/packages/hippy-react-web/src/adapters/image-loader.ts
@@ -34,6 +34,7 @@ const ImageLoader = {
     image.setAttribute('crossOrigin', 'Anonymous');
     image.src = url;
     image.onerror = (e) => {
+      // @ts-ignore
       onError(e);
     };
     image.onload = (e) => {

diff --git a/packages/hippy-react-web/src/components/image.tsx b/packages/hippy-react-web/src/components/image.tsx
@@ -21,15 +21,14 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { formatWebStyle } from '../adapters/transfer';
 import ImageLoader, { LoadError } from '../adapters/image-loader';
-import { LayoutEvent } from '../types';
-import { TouchEvent } from '../modules/use-responder-events/types';
+import { LayoutableProps, TouchableProps, ClickableProps } from '../types';
 import useResponderEvents from '../modules/use-responder-events';
 import useElementLayout from '../modules/use-element-layout';
 import { isFunc, noop } from '../utils';
 
 
 type ImageResizeMode = 'cover' | 'contain' | 'stretch' | 'center' | 'none';
-export interface ImageProps {
+export interface ImageProps extends LayoutableProps, TouchableProps, ClickableProps {
   [key: string]: any;
   style: HippyTypes.Style;
   tintColor?: HippyTypes.color;
@@ -40,14 +39,9 @@ export interface ImageProps {
   capInsets?: any;
   resizeMode?: ImageResizeMode;
   onLoad?: (e: { width: number; height: number; url: string }) => void;
-  onLayout?: (e: LayoutEvent) => void;
   onLoadStart?: Function;
   onLoadEnd?: Function;
   onProgress?: Function;
-  onTouchDown?: (e: TouchEvent) => void;
-  onTouchMove?: (e: TouchEvent) => void;
-  onTouchEnd?: (e: TouchEvent) => void;
-  onTouchCancel?: (e: TouchEvent) => void;
 }
 
 const ImageResizeMode = {

diff --git a/packages/hippy-react-web/src/components/list-view.tsx b/packages/hippy-react-web/src/components/list-view.tsx
@@ -32,7 +32,7 @@ import View from './view';
 
 interface ListViewItemProps {
   style?: any;
-  height: any;
+  height?: any;
   children?: any;
   type?: any;
   observer?: IntersectionObserver | null;
@@ -142,6 +142,7 @@ function ListViewItem(props: ListViewItemProps) {
   delete liElementProps.rowShouldSticky;
 
   return (
+    // @ts-ignore
     <li {...liElementProps} ref={listItemRef} rowid={getRowKey()} />
   );
 }

diff --git a/packages/hippy-react-web/src/components/text-input.tsx b/packages/hippy-react-web/src/components/text-input.tsx
@@ -21,7 +21,7 @@
 /* eslint-disable no-unneeded-ternary */
 
 import React, { useImperativeHandle, useEffect, useRef } from 'react';
-
+import { LayoutableProps, ClickableProps } from '../types';
 import { formatWebStyle } from '../adapters/transfer';
 import useElementLayout from '../modules/use-element-layout';
 import { isFunc } from '../utils';
@@ -32,7 +32,7 @@ import { isFunc } from '../utils';
  * placeholder text, and different keyboard types, such as a numeric keypad.
  * @noInheritDoc
  */
-export interface TextInputProps {
+export interface TextInputProps extends LayoutableProps, ClickableProps {
   style?: HippyTypes.Style;
   caretColor?: string;
   defaultValue?: string;
@@ -52,7 +52,6 @@ export interface TextInputProps {
   onChangeText?: any;
   onKeyboardWillShow?: any;
   onEndEditing?: any;
-  onLayout?: any;
   onSelectionChange?: any;
 };
 const TextInput: React.FC<TextInputProps> = React.forwardRef<any, TextInputProps>((props, ref) => {

diff --git a/packages/hippy-react-web/src/components/text.tsx b/packages/hippy-react-web/src/components/text.tsx
@@ -21,10 +21,9 @@
 // @ts-nocheck
 import React, { createContext, useRef } from 'react';
 import { formatWebStyle } from '../adapters/transfer';
-import { LayoutEvent } from '../types';
+import { LayoutableProps, TouchableProps, ClickableProps } from '../types';
 import useResponderEvents from '../modules/use-responder-events';
 import useElementLayout from '../modules/use-element-layout';
-import { TouchEvent } from '../modules/use-responder-events/types';
 import { DEFAULT_CONTAINER_STYLE } from '../constants';
 
 const baseTextStyle = {
@@ -71,16 +70,11 @@ const styles = {
 
 const TextAncestorContext = createContext(false);
 
-interface TextProps {
+interface TextProps extends LayoutableProps, TouchableProps, ClickableProps {
   style?: HippyTypes.Style | HippyTypes.Style[];
   numberOfLines?: number;
   opacity?: number;
   ellipsizeMode?: 'clip' | 'ellipsis';
-  onLayout: (e: LayoutEvent) => void;
-  onTouchDown?: (e: TouchEvent) => void;
-  onTouchMove?: (e: TouchEvent) => void;
-  onTouchEnd?: (e: TouchEvent) => void;
-  onTouchCancel?: (e: TouchEvent) => void;
 }
 
 /**

diff --git a/packages/hippy-react-web/src/components/view.tsx b/packages/hippy-react-web/src/components/view.tsx
@@ -21,8 +21,7 @@ import React, { useEffect, useRef, useImperativeHandle } from 'react';
 import { formatWebStyle } from '../adapters/transfer';
 import useResponderEvents from '../modules/use-responder-events';
 import useElementLayout from '../modules/use-element-layout';
-import { TouchEvent } from '../modules/use-responder-events/types';
-import { LayoutEvent } from '../types';
+import { LayoutableProps, TouchableProps, ClickableProps } from '../types';
 import { warn } from '../utils';
 import { DEFAULT_CONTAINER_STYLE } from '../constants';
 
@@ -40,7 +39,7 @@ const styles = {
   },
 };
 
-interface ViewProps {
+interface ViewProps extends LayoutableProps, TouchableProps, ClickableProps {
   [key: string]: any;
   ref?: any;
   accessible?: boolean;
@@ -55,12 +54,7 @@ interface ViewProps {
     rippleRadius: number;
   };
   onScroll?: (e: any) => void;
-  onLayout?: (e: LayoutEvent) => void;
   onAttachedToWindow?: Function;
-  onTouchDown?: (e: TouchEvent) => void;
-  onTouchMove?: (e: TouchEvent) => void;
-  onTouchEnd?: (e: TouchEvent) => void;
-  onTouchCancel?: (e: TouchEvent) => void;
 }
 
 /**

diff --git a/packages/hippy-react-web/src/modules/use-responder-events/index.ts b/packages/hippy-react-web/src/modules/use-responder-events/index.ts
@@ -20,16 +20,12 @@
 
 import React from 'react';
 import { useStable } from '../../utils';
+import { TouchableProps } from '../../types';
 import ResponderEvent from './responder-events';
-import { TouchEvent } from './types';
 
 let idCounter = 0;
 
-export interface ResponderConfig {
-  onTouchDown?: (e: TouchEvent) => void;
-  onTouchMove?: (e: TouchEvent) => void;
-  onTouchEnd?: (e: TouchEvent) => void;
-  onTouchCancel?: (e: TouchEvent) => void;
+export interface ResponderConfig extends TouchableProps {
   onScroll?: (e: any) => void;
 };
 

diff --git a/packages/hippy-react-web/src/modules/use-responder-events/responder-events.ts b/packages/hippy-react-web/src/modules/use-responder-events/responder-events.ts
@@ -19,11 +19,11 @@
  */
 
 import { canUseDOM } from '../../utils';
+import { TouchEvent } from '../../types';
 import {
   getResponderPaths, setResponderId, TOUCH_CANCEL, TOUCH_END, TOUCH_MOVE, TOUCH_START, SCROLL_EVENT,
   isScrollEvent,
 } from './utils';
-import { TouchEvent } from './types';
 import { ResponderConfig } from './index';
 
 interface ResponderEvent {

diff --git a/packages/hippy-react-web/src/modules/use-responder-events/types.ts b/packages/hippy-react-web/src/modules/use-responder-events/types.ts
diff --git a/packages/hippy-react-web/src/types/index.ts b/packages/hippy-react-web/src/types/index.ts
@@ -17,6 +17,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export interface TouchEvent {
+  pageX: number;
+  pageY: number;
+  target: any;
+  currentTarget: any;
+  force: number;
+  identifier: number;
+  stopPropagation: () => void;
+};
 
 export interface LayoutValue {
   x: number,
@@ -50,3 +59,21 @@ export interface NetInfoModule {
   removeEventListener: (eventName: string, listener?: NetworkInfoCallback) => void;
   fetch: () => Promise<NetworkChangeEventData>;
 };
+
+export interface LayoutableProps {
+  onLayout?: (evt: LayoutEvent) => void;
+}
+
+export interface ClickableProps {
+  /**
+   * Called when the touch is released.
+   */
+  onClick?: () => void;
+}
+
+export interface TouchableProps {
+  onTouchDown?: (e: TouchEvent) => void;
+  onTouchMove?: (e: TouchEvent) => void;
+  onTouchEnd?: (e: TouchEvent) => void;
+  onTouchCancel?: (e: TouchEvent) => void;
+}
diff --git a/scripts/build.js b/scripts/build.js
@@ -22,10 +22,11 @@ const path = require('path');
 const fs = require('fs');
 const { rollup } = require('rollup');
 const reactBuilds = require('./react-configs').getAllBuilds();
+const reactWebBuilds = require('./react-web-configs').getAllBuilds();
 const vueBuilds = require('./vue-configs').getAllBuilds();
 const vueNextBuilds = require('./vue-next-configs').getAllBuilds();
 const webRendererBuilds = require('./web-renderer-configs').getAllBuilds();
-let builds = [...reactBuilds, ...vueBuilds, ...vueNextBuilds, ...webRendererBuilds];
+let builds = [...reactBuilds, ...reactWebBuilds, ...vueBuilds, ...vueNextBuilds, ...webRendererBuilds];
 
 // filter builds via command line arg
 if (process.argv[2]) {
@@ -50,7 +51,7 @@ function logError(e) {
  * remove typescript declaration files that generated by rollup plugin.
  *
  * 1. auto generate typescript declaration files by rollup-plugin-typescript2
- * 2. declaration files rollup to index.d.ts by api-extractor
+ * 2. declaration files rollup to index.d.ts by rollup-plugin-dts
  * 3. remove auto generated declaration files
  *
  * @param filePath