@lynx-js/types 3.2.1 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # CHANGELOG
 
+## 3.3.1
+
+- [Infra][Types] Codegen csstype.d.ts from css_defines
+
+## 3.3.0
+
+### Major Changes
+
+- Update Types Version to 3.3.*
+- Add default properties for PipelineEntry.frameworkRenderingTiming
+- Add some missing typing of event props
+- Add type testing for objects & methods mounted in global
+- Add type testing to lynx react.JSX.IntrinsicElements
+- Add some missing types of built-in element `list`
+- Add some missing types of built-in element `image`
+- Add more events like `LayoutChangeEvent` into `MainThread` namespace
+- Add animate operate function in selectorQuery
+
+In this commit, we add `AnimationEvent`, `TransitionEvent`, `LayoutChangeEvent`, `UIAppearanceEvent` into `MainThread` namespace.
+Now you can use like this:
+
+```
+function handleLayoutChange(e: MainThread.LayoutChangeEvent) {
+  // ...
+}
+
+<view
+  main-thread:bindlayoutchange={handleLayoutChange}
+/>
+```
+
 ## 3.2.1
 
 ### Patch Changes

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@lynx-js/types",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "description": "",
-  "keywords": ["lynx" , "types"],
+  "keywords": [
+    "lynx",
+    "types"
+  ],
   "license": "Apache-2.0",
   "author": "Lynx Authors",
-  "types":"types/index.d.ts",
+  "types": "types/index.d.ts",
   "main": "types/index.d.ts",
   "scripts": {
-    "test": ""
+    "test": "vitest --typecheck --run && tsc --noEmit"
   },
   "exports": {
     ".": {
@@ -38,11 +41,21 @@
       "background": [
         "./types/background-thread/index.d.ts"
       ],
-      "common": ["./types/common/index.d.ts"],
-      "element": ["./types/common/element/index.d.ts"],
-      "events": ["./types/common/events.d.ts"],
-      "props": ["./types/common/props.d.ts"],
-      "main-thread": ["./types/main-thread/index.d.ts"]
+      "common": [
+        "./types/common/index.d.ts"
+      ],
+      "element": [
+        "./types/common/element/index.d.ts"
+      ],
+      "events": [
+        "./types/common/events.d.ts"
+      ],
+      "props": [
+        "./types/common/props.d.ts"
+      ],
+      "main-thread": [
+        "./types/main-thread/index.d.ts"
+      ]
     }
   },
   "files": [
@@ -53,6 +66,9 @@
     "csstype": "3.1.3"
   },
   "devDependencies": {
-    "tsd": "0.30.4"
+    "@types/react": "18.3.5",
+    "typescript": "5.8.3",
+    "tsd": "0.30.4",
+    "vitest": "2.1.9"
   }
 }

package/types/background-thread/animation.d.ts

@@ -45,3 +45,13 @@ export interface Animation {
 
   play(): void;
 }
+
+export interface KeyframeEffectV2 {
+  readonly keyframes: Array<Record<string, any>>;
+  readonly options: Record<string, any>;
+}
+
+export interface AnimationV2 {
+  readonly effect: KeyframeEffectV2;
+  readonly id: string;
+}

package/types/background-thread/lynx-performance-entry.d.ts

@@ -7,6 +7,15 @@ export interface PerformanceEntry {
 }
 
 export interface FrameworkRenderingTiming {
+    vmExecuteStart: number;
+    vmExecuteEnd: number;
+    dataProcessorStart: number;
+    dataProcessorEnd: number;
+    setInitDataStart: number;
+    setInitDataEnd: number;
+}
+
+export interface FrameworkRenderingTimings {
 }
 
 export interface PipelineEntry extends PerformanceEntry {
@@ -24,7 +33,7 @@ export interface PipelineEntry extends PerformanceEntry {
     layoutUiOperationExecuteStart: number;
     layoutUiOperationExecuteEnd: number;
     paintEnd: number;
-    frameworkRenderingTiming: FrameworkRenderingTiming[keyof FrameworkRenderingTiming];
+    frameworkRenderingTiming: FrameworkRenderingTimings[keyof FrameworkRenderingTimings] & FrameworkRenderingTiming;
 }
 
 export interface LoadBundleEntry extends PipelineEntry {
@@ -34,6 +43,10 @@ export interface LoadBundleEntry extends PipelineEntry {
     parseEnd: number;
     loadBackgroundStart: number;
     loadBackgroundEnd: number;
+    verifyTasmStart: number;
+    verifyTasmEnd: number;
+    ffiStart: number;
+    ffiEnd: number;
 }
 
 export interface InitContainerEntry extends PerformanceEntry {
@@ -70,12 +83,6 @@ export interface MetricFcpEntry extends PerformanceEntry {
     totalFcp: PerformanceMetric;
 }
 
-export interface MetricTtiEntry extends PerformanceEntry {
-    tti: PerformanceMetric;
-    lynxTti: PerformanceMetric;
-    totalTti: PerformanceMetric;
-}
-
 export interface MetricActualFmpEntry extends PerformanceEntry {
     actualFmp: PerformanceMetric;
     lynxActualFmp: PerformanceMetric;

package/types/background-thread/lynx.d.ts

@@ -89,10 +89,6 @@ export interface Lynx extends CommonLynx {
 
   getElementById: GetElementByIdFunc;
 
-  // cancelAnimationFrame(animationId: number): void;
-
-  // requestAnimationFrame(callback: () => void): number;
-
   cancelResourcePrefetch(data: ResourcePrefetchData, callback: (res: ResourcePrefetchResult) => void): void;
 
   createIntersectionObserver: CreateIntersectionObserverFunc;

package/types/background-thread/nodes-ref.d.ts

@@ -3,6 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 
 import { AnyObject } from '../common';
+import { AnimationV2 } from './animation';
 
 export enum NODE_REF_INVOKE_ERROR_CODE {
   SUCCESS = 0,
@@ -74,6 +75,14 @@ export interface NodesRef {
     ) => void
   ): SelectorQuery;
 
+  animate(animations: AnimationV2[] | AnimationV2): SelectorQuery;
+
+  playAnimation(ids: string[] | string): SelectorQuery;
+
+  pauseAnimation(ids: string[] | string): SelectorQuery;
+
+  cancelAnimation(ids: string[] | string): SelectorQuery;
+
   setNativeProps(nativeProps: Record<string, any>): SelectorQuery;
 }
 

package/types/common/csstype.d.ts

@@ -2,98 +2,242 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import * as CSS from 'csstype';
+/**
+ * This file is auto-generated from CSS define files in the css_defines directory.
+ * Each property's type is determined by:
+ * 1. For enum types: Uses the values array from the CSS define file
+ * 2. For properties with keywords: Uses the keywords array as enum values, with (string & {}) for open-ended types
+ * 3. For other types: Uses string type
+ */
+
+import type * as CSS from 'csstype';
 
 export type Modify<T, R> = Omit<T, keyof R> & R;
 
 export type CSSProperties = Modify<
   CSS.Properties<string | number>,
   {
-    position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
-    boxSizing?: 'border-box' | 'content-box' | 'auto';
+    // layout
+    flexFlow?: string;
+    marginInlineStart?: string;
+    marginInlineEnd?: string;
+    paddingInlineStart?: string;
+    paddingInlineEnd?: string;
+    gridTemplateColumns?: string;
+    gridTemplateRows?: string;
+    gridAutoColumns?: string;
+    gridAutoRows?: string;
+    gridColumnSpan?: number;
+    gridRowSpan?: number;
+    gridColumnStart?: string;
+    gridColumnEnd?: string;
+    gridRowStart?: string;
+    gridRowEnd?: string;
+    gridColumnGap?: string;
+    gridRowGap?: string;
+    gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+    maskPosition?: string;
     display?: 'none' | 'flex' | 'grid' | 'linear' | 'relative' | 'block' | 'auto';
-    overflow?: 'hidden' | 'visible' | (string & {});
-    whiteSpace?: 'normal' | 'nowrap';
-    textAlign?: 'left' | 'center' | 'right' | 'start' | 'end';
-    textOverflow?: 'clip' | 'ellipsis';
-    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    padding?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingTop?: string;
+    paddingBottom?: string;
+    margin?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    flex?: string;
+    position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: string;
     flexDirection?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
     flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
-    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
+    backgroundPosition?: string;
+
+    // typography
+    outline?: string;
+    outlineColor?: string;
+    outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    outlineWidth?: string;
+    textDecorationColor?: string;
+    linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
+    borderInlineStartColor?: string;
+    borderInlineEndColor?: string;
+    borderInlineStartWidth?: string;
+    borderInlineEndWidth?: string;
+    borderInlineStartStyle?: string;
+    borderInlineEndStyle?: string;
+    relativeAlignInlineStart?: string;
+    relativeAlignInlineEnd?: string;
+    relativeInlineStartOf?: number;
+    relativeInlineEndOf?: number;
+    insetInlineStart?: string;
+    insetInlineEnd?: string;
+    linearDirection?: string;
+    textIndent?: string;
+    textStroke?: string;
+    textStrokeWidth?: string;
+    textStrokeColor?: string;
+    XAutoFontSize?: string;
+    XAutoFontSizePresetSizes?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'start' | 'end' | 'justify';
+    lineHeight?: string;
+    textOverflow?: 'clip' | 'ellipsis';
+    fontSize?: string;
+    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    fontFamily?: string;
     fontStyle?: 'normal' | 'italic' | 'oblique';
-    transform?:
-      | 'translate'
-      | 'translateX'
-      | 'translateY'
-      | 'translateZ'
-      | 'translate'
-      | 'translate3d'
-      | 'translate3D'
-      | 'rotate'
-      | 'rotateX'
-      | 'rotateY'
-      | 'rotateZ'
-      | 'scale'
-      | 'scaleX'
-      | 'scaleY'
-      | (string & {});
-    animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
-    linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
+    lineSpacing?: string;
+    linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    linearWeightSum?: number;
+    linearWeight?: number;
     linearGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'space-between' | 'start' | 'end' | 'center';
-    linearLayoutGravity?:
-      | 'none'
-      | 'top'
-      | 'bottom'
-      | 'left'
-      | 'right'
-      | 'center-vertical'
-      | 'center-horizontal'
-      | 'fill-vertical'
-      | 'fill-horizontal'
-      | 'center'
-      | 'stretch'
-      | 'start'
-      | 'end';
+    linearLayoutGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'fill-vertical' | 'fill-horizontal' | 'center' | 'stretch' | 'start' | 'end';
+    adaptFontSize?: string;
+    textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
+    textShadow?: string;
+
+    // visual
+    borderTopColor?: string;
+    backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';
+    backgroundRepeat?: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat' | 'round' | 'space';
+    backgroundSize?: string;
+    border?: string;
+    borderRight?: string;
+    borderLeft?: string;
+    borderTop?: string;
+    borderBottom?: string;
+    borderBottomColor?: string;
+    borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderRadius?: string;
+    backgroundClip?: 'border-box' | 'content-box' | 'padding-box' | 'text';
+    caretColor?: string;
+    borderTopLeftRadius?: string;
+    borderBottomLeftRadius?: string;
+    borderTopRightRadius?: string;
+    borderBottomRightRadius?: string;
+    borderStartStartRadius?: string;
+    borderEndStartRadius?: string;
+    borderStartEndRadius?: string;
+    borderEndEndRadius?: string;
+    borderWidth?: string;
+    borderLeftWidth?: string;
+    borderRightWidth?: string;
+    borderTopWidth?: string;
+    borderBottomWidth?: string;
+    XAnimationColorInterpolation?: 'auto' | 'sRGB' | 'linearRGB';
+    XHandleColor?: string;
+    color?: string;
+    background?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    backgroundImage?: string;
+
+    // animation
+    transition?: string;
+    transitionProperty?: 'none' | 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | 'width' | 'height' | 'background-color' | 'visibility' | 'left' | 'top' | 'right' | 'bottom' | 'transform' | 'all' | (string & {});
+    transitionDuration?: string;
+    transitionDelay?: string;
+    transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    implicitAnimation?: string;
+    enterTransitionName?: string;
+    exitTransitionName?: string;
+    pauseTransitionName?: string;
+    resumeTransitionName?: string;
+    animation?: string;
+    animationName?: string;
+    animationDuration?: string;
+    animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    animationDelay?: string;
+    animationIterationCount?: string;
+    animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+    animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
+    animationPlayState?: 'paused' | 'running';
+    layoutAnimationCreateDuration?: string;
     layoutAnimationCreateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    layoutAnimationCreateDelay?: string;
     layoutAnimationCreateProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+    layoutAnimationDeleteDuration?: string;
     layoutAnimationDeleteTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    layoutAnimationDeleteDelay?: string;
     layoutAnimationDeleteProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+    layoutAnimationUpdateDuration?: string;
     layoutAnimationUpdateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
+    layoutAnimationUpdateDelay?: string;
+
+    // other
+    top?: string;
     visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
-    transitionProperty?:
-      | 'none'
-      | 'opacity'
-      | 'scaleX'
-      | 'scaleY'
-      | 'scaleXY'
-      | 'width'
-      | 'height'
-      | 'background-color'
-      | 'visibility'
-      | 'left'
-      | 'top'
-      | 'right'
-      | 'bottom'
-      | 'transform'
-      | 'all'
-      | (string & {});
-    transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-    borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-    borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    content?: string;
     overflowX?: 'hidden' | 'visible' | (string & {});
     overflowY?: 'hidden' | 'visible' | (string & {});
     wordBreak?: 'normal' | 'break-all' | 'keep-all';
-    outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
     verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | (string & {});
     direction?: 'normal' | 'lynx-rtl' | 'rtl' | 'ltr';
+    relativeId?: number;
+    relativeAlignTop?: string;
+    relativeAlignRight?: string;
+    relativeAlignBottom?: string;
+    relativeAlignLeft?: string;
+    relativeTopOf?: number;
+    relativeRightOf?: number;
+    relativeBottomOf?: number;
+    relativeLeftOf?: number;
+    relativeLayoutOnce?: string;
     relativeCenter?: 'none' | 'vertical' | 'horizontal' | 'both';
-    linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
+    zIndex?: number;
+    maskImage?: string;
+    justifyItems?: 'start' | 'end' | 'center' | 'stretch' | 'auto';
+    justifySelf?: 'start' | 'end' | 'center' | 'stretch' | 'auto';
+    filter?: string;
     listMainAxisGap?: 'grayscale' | (string & {});
+    listCrossAxisGap?: string;
+    perspective?: 'number' | 'vw' | 'vh' | 'default' | 'px';
+    cursor?: string;
+    clipPath?: string;
+    mask?: string;
+    left?: string;
+    maskRepeat?: string;
+    maskClip?: string;
+    maskOrigin?: string;
+    maskSize?: string;
+    gap?: string;
+    columnGap?: string;
+    rowGap?: string;
+    imageRendering?: 'auto' | 'crisp-edges' | 'pixelated';
+    hyphens?: 'none' | 'manual' | 'auto';
+    XAppRegion?: 'none' | 'drag' | 'no-drag';
+    XHandleSize?: string;
+    opacity?: number;
+    overflow?: 'hidden' | 'visible' | (string & {});
+    height?: string;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    right?: string;
+    maxHeight?: string;
+    minHeight?: string;
+    bottom?: string;
+    whiteSpace?: 'normal' | 'nowrap';
+    letterSpacing?: string;
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'start' | 'end' | 'baseline';
+    alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'start' | 'end' | 'baseline';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
+    boxSizing?: 'border-box' | 'content-box' | 'auto';
+    transform?: 'translate' | 'translateX' | 'translateY' | 'translateZ' | 'translate' | 'translate3d' | 'translate3D' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | (string & {});
+    order?: number;
+    boxShadow?: string;
+    transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
+    aspectRatio?: string;
   }
->;
+>;

package/types/common/element/element.d.ts

@@ -6,7 +6,7 @@ import { StandardProps } from '../props';
 import { NoProps } from '../props';
 import { ComponentProps } from './component';
 import { FilterImageProps } from './filter-image';
-import { ImageProps } from './image';
+import { ImageProps, ImageUIMethods } from './image';
 import { ListItemProps, ListProps, ListRowProps, ListUIMethods } from './list';
 import { PageProps } from './page';
 import { ScrollViewProps, ScrollViewUIMethods } from './scroll-view';
@@ -16,11 +16,14 @@ import { ViewProps } from './view';
 export interface UIMethods {
   'list': ListUIMethods;
   'scroll-view': ScrollViewUIMethods;
+  'image': ImageUIMethods;
 }
 
+type LynxComponentProps = ComponentProps;
+
 // add also to global.JSX.IntrinsicElements
 export interface IntrinsicElements {
-  'component': ComponentProps;
+  'component': LynxComponentProps;
   'filter-image': FilterImageProps;
   'image': ImageProps;
   'inline-image': ImageProps;
@@ -40,7 +43,7 @@ declare module 'react' {
   namespace JSX {
     // Should copy from above IntrinsicElements
     interface IntrinsicElements {
-      'component': ComponentProps;
+      'component': LynxComponentProps;
       'filter-image': FilterImageProps;
       'image': ImageProps;
       'inline-image': ImageProps;

package/types/common/element/image.d.ts

@@ -2,7 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import { BaseEvent, ImageErrorEvent, ImageLoadEvent } from '../events';
+import { BaseEvent, BaseMethod, ImageErrorEvent, ImageLoadEvent } from '../events';
 import { StandardProps } from '../props';
 
 /**
@@ -91,6 +91,46 @@ export interface ImageProps extends StandardProps {
    */
   downsampling?: boolean;
 
+  /**
+   * When set to true and the <image> element has no width or height,
+   * the size of the <image> will be automatically adjusted
+   * to match the image's original dimensions after the image is successfully loaded,
+   * ensuring that the aspect ratio is maintained.
+   * @defaultValue false
+   * @since 2.6
+   */
+  'auto-size'?: boolean;
+
+  /**
+   * When set to true, the <image> will only clear the previously displayed image resource after a new image has successfully loaded.
+   * The default behavior is to clear the image resource before starting a new load.
+   * This can resolve flickering issues when the image src is switched and reloaded. It is not recommended to enable this in scenarios where there is node reuse in views like lists.
+   * @defaultValue false
+   * @since 2.7
+   */
+  'defer-src-invalidation'?: boolean;
+
+  /**
+   * Specifies whether the animated image should start playing automatically once it is loaded.
+   * @defaultValue true
+   * @since 2.11
+   */
+  'autoplay'?: boolean;
+
+  /**
+   * Changes the color of all non-transparent pixels to the tint-color specified. The value is a <color>.
+   * @defaultValue ""
+   * @since 2.12
+   */
+  'tint-color'?: string;
+
+  /**
+   * Support outputting image monitoring information in bindload
+   * @defaultValue false
+   * @since 2.12
+   */
+  'extra-load-info'?: boolean;
+
   /**
    * Disables unexpected iOS built-in animations
    * @defaultValue true
@@ -98,6 +138,12 @@ export interface ImageProps extends StandardProps {
    */
   'implicit-animation'?: boolean;
 
+  /**
+   * Add custom parameters to image
+   * @since 2.17
+   */
+  'additional-custom-info'?: { [key: string]: string };
+
   /**
    * Image load success event
    * @since 0.2
@@ -111,11 +157,65 @@ export interface ImageProps extends StandardProps {
   binderror?: (e: ErrorEvent) => void;
 
   /**
-   * Add custom parameters to image
-   * @since 2.17
+   * The animation will call back when it starts playing.
+   * @since 2.11
    */
-  'additional-custom-info'?: { [key: string]: string };
+  bindstartplay?: (e: BaseEvent) => void;
+
+  /**
+   * Call back after one loop time of the animation is played.
+   * @since 2.11
+   */
+  bindcurrentloopcomplete?: (e: BaseEvent) => void;
+
+  /**
+   * It will be called after the animation has been played for all loop-count times. If the loop-count is not set, it will not be called back.
+   * @since 2.11
+   */
+  bindfinalloopcomplete?: (e: BaseEvent) => void;
 }
 
 export type LoadEvent = BaseEvent<'load', ImageLoadEvent>;
 export type ErrorEvent = BaseEvent<'error', ImageErrorEvent>;
+
+/**
+ * Restart the animation playback method controlled by the front end, and the animation playback progress and loop count will be reset.
+ * @Android
+ * @iOS
+ * @deprecated Deprecated. Some scenarios may not call back the call result. It is recommended to use resumeAnimation instead.
+ */
+export interface ImageStartAnimMethod extends BaseMethod {
+  method: 'startAnimate';
+}
+
+/**
+ * Resumes the animation, without resetting the loop-count.
+ * @Android
+ * @iOS
+ * @since 2.11
+ */
+export interface ImageResumeAnimMethod extends BaseMethod {
+  method: 'resumeAnimation';
+}
+
+/**
+ * Pauses the animation, without resetting the loop-count.
+ * @Android
+ * @iOS
+ * @since 2.11
+ */
+export interface ImagePauseAnimMethod extends BaseMethod {
+  method: 'pauseAnimation';
+}
+
+/**
+ * Stops the animation, and it will reset the loop-count.
+ * @Android
+ * @iOS
+ * @since 2.11
+ */
+export interface ImageStopAnimMethod extends BaseMethod {
+  method: 'stopAnimation';
+}
+
+export type ImageUIMethods = ImageStartAnimMethod | ImageResumeAnimMethod | ImagePauseAnimMethod | ImageStopAnimMethod;

package/types/common/element/list.d.ts

@@ -81,6 +81,12 @@ export interface ListScrollInfo {
    * @iOS
    */
   eventSource: ListEventSource;
+  /**
+   * attached cells
+   * @iOS
+   * @Android
+   */
+  attachedCells: ListAttachedCell[];
 }
 
 export interface ListScrollEvent extends BaseEvent<'scroll', ListScrollInfo> {}

package/types/common/events.d.ts

@@ -146,7 +146,7 @@ export interface BaseAnimationEvent<T> extends BaseEventOrig<{}, T> {
   };
 }
 
-export interface AnimationEvent extends BaseAnimationEvent<Target | MainThreadElement> {}
+export interface AnimationEvent extends BaseAnimationEvent<Target> {}
 
 export interface BaseTransitionEvent<T> extends BaseEventOrig<{}, T> {
   params:
@@ -170,16 +170,31 @@ export interface BaseTransitionEvent<T> extends BaseEventOrig<{}, T> {
           | 'transition-opacity';
       };
 }
-export interface TransitionEvent extends BaseTransitionEvent<Target | MainThreadElement> {}
+export interface TransitionEvent extends BaseTransitionEvent<Target> {}
 
-export interface ImageLoadEvent {
+export interface BaseImageLoadEvent<T> extends BaseEventOrig<{}, T> {
   detail: {
     width: number;
     height: number;
   };
 }
 
-export interface ImageErrorEvent {
+export interface ImageLoadEvent extends BaseImageLoadEvent<Target> {
+  detail: {
+    width: number;
+    height: number;
+  };
+}
+
+export interface BaseImageErrorEvent<T> extends BaseEventOrig<{}, T> {
+  detail: {
+    errMsg: string;
+    error_code: number;
+    lynx_categorized_code: number;
+  };
+}
+
+export interface ImageErrorEvent extends BaseImageErrorEvent<Target> {
   detail: {
     errMsg: string;
     error_code: number;
@@ -310,100 +325,100 @@ export interface BaseEvent<T = string, D = any> {
   detail: D;
 }
 
-export interface LynxEvent<Target> {
+export interface LynxEvent<T> {
   /**
    * Listening for background image loading success.
    * @since since Lynx 2.6
    */
-  BGLoad?: EventHandler<ImageLoadEvent>;
+  BGLoad?: EventHandler<BaseImageLoadEvent<T>>;
 
   /**
    * Failed to load background image for listening.
    * @since since: Android: Lynx 2.6, iOS: Lynx 2.8
    */
-  BGError?: EventHandler<ImageErrorEvent>;
+  BGError?: EventHandler<BaseImageErrorEvent<T>>;
 
   // NodeAppear?: EventHandler<ReactLynx.AppearanceEvent>;
 
   // NodeDisappear?: EventHandler<ReactLynx.AppearanceEvent>;
 
   /** Finger touch action begins. */
-  TouchStart?: EventHandler<BaseTouchEvent<Target>>;
+  TouchStart?: EventHandler<BaseTouchEvent<T>>;
 
   /** Moving after touching with fingers. */
-  TouchMove?: EventHandler<BaseTouchEvent<Target>>;
+  TouchMove?: EventHandler<BaseTouchEvent<T>>;
 
   /** Finger touch actions are interrupted by incoming call reminders and pop-up windows. */
-  TouchCancel?: EventHandler<BaseTouchEvent<Target>>;
+  TouchCancel?: EventHandler<BaseTouchEvent<T>>;
 
   /** Finger touch action ends. */
-  TouchEnd?: EventHandler<BaseTouchEvent<Target>>;
+  TouchEnd?: EventHandler<BaseTouchEvent<T>>;
 
   /** After touching the finger, if it leaves after more than 350ms and the event callback function is specified and triggered, the tap event will not be triggered. */
-  LongPress?: EventHandler<BaseCommonEvent<Target>>;
+  LongPress?: EventHandler<BaseCommonEvent<T>>;
 
   /** It will trigger during a transition animation start. */
-  TransitionStart?: EventHandler<BaseTransitionEvent<Target>>;
+  TransitionStart?: EventHandler<BaseTransitionEvent<T>>;
 
   /** It will trigger when a transition animation is cancelled. */
-  TransitionCancel?: EventHandler<BaseTransitionEvent<Target>>;
+  TransitionCancel?: EventHandler<BaseTransitionEvent<T>>;
 
   /** It will trigger after the transition or createAnimation animation is finished. */
-  TransitionEnd?: EventHandler<BaseTransitionEvent<Target>>;
+  TransitionEnd?: EventHandler<BaseTransitionEvent<T>>;
 
   /** It will trigger at the beginning of an animation. */
-  AnimationStart?: EventHandler<BaseAnimationEvent<Target>>;
+  AnimationStart?: EventHandler<BaseAnimationEvent<T>>;
 
   /** It will trigger during an animation iteration. */
-  AnimationIteration?: EventHandler<BaseAnimationEvent<Target>>;
+  AnimationIteration?: EventHandler<BaseAnimationEvent<T>>;
 
   /** It will trigger when an animation is cancelled. */
-  AnimationCancel?: EventHandler<BaseAnimationEvent<Target>>;
+  AnimationCancel?: EventHandler<BaseAnimationEvent<T>>;
 
   /** It will trigger upon completion of an animation. */
-  AnimationEnd?: EventHandler<BaseAnimationEvent<Target>>;
+  AnimationEnd?: EventHandler<BaseAnimationEvent<T>>;
 
   /** Mouse Clicked. */
-  MouseDown?: EventHandler<BaseMouseEvent<Target>>;
+  MouseDown?: EventHandler<BaseMouseEvent<T>>;
 
   /** Mouse released. */
-  MouseUp?: EventHandler<BaseMouseEvent<Target>>;
+  MouseUp?: EventHandler<BaseMouseEvent<T>>;
 
   /** Mouse movement. */
-  MouseMove?: EventHandler<BaseMouseEvent<Target>>;
+  MouseMove?: EventHandler<BaseMouseEvent<T>>;
 
   /** Mouse click. */
-  MouseClick?: EventHandler<BaseMouseEvent<Target>>;
+  MouseClick?: EventHandler<BaseMouseEvent<T>>;
 
   /** Double-click the mouse.  */
-  MouseDblClick?: EventHandler<BaseMouseEvent<Target>>;
+  MouseDblClick?: EventHandler<BaseMouseEvent<T>>;
 
   /** Long press on the mouse. */
-  MouseLongPress?: EventHandler<BaseMouseEvent<Target>>;
+  MouseLongPress?: EventHandler<BaseMouseEvent<T>>;
 
   /** Mouse (or touchpad) scrolling. */
-  Wheel?: EventHandler<BaseWheelEvent<Target>>;
+  Wheel?: EventHandler<BaseWheelEvent<T>>;
 
   /** Keyboard (or remote control) button pressed. */
-  KeyDown?: EventHandler<BaseKeyEvent<Target>>;
+  KeyDown?: EventHandler<BaseKeyEvent<T>>;
 
   /** Keyboard (or remote control) key released. */
-  KeyUp?: EventHandler<BaseKeyEvent<Target>>;
+  KeyUp?: EventHandler<BaseKeyEvent<T>>;
 
   /** Element gets focus. */
-  Focus?: EventHandler<BaseCommonEvent<Target>>;
+  Focus?: EventHandler<BaseCommonEvent<T>>;
 
   /** Element loses focus. */
-  Blur?: EventHandler<BaseCommonEvent<Target>>;
+  Blur?: EventHandler<BaseCommonEvent<T>>;
 
   /** layout info Change event */
-  LayoutChange?: LayoutChangeEvent;
+  LayoutChange?: EventHandler<LayoutChangeDetailEvent<T>>;
 
   /** UI appear event */
-  UIAppear?: UIAppearanceEvent;
+  UIAppear?: EventHandler<UIAppearanceDetailEvent<T>>;
 
   /** UI disappear event */
-  UIDisappear?: UIAppearanceEvent;
+  UIDisappear?: EventHandler<UIAppearanceDetailEvent<T>>;
   /**
    * The text layout event is triggered when the text layout changes.
    * @since since: Android: Lynx 2.6, iOS: Lynx 2.8
@@ -416,28 +431,27 @@ export interface LynxEvent<Target> {
    * @spec {@link https://developer.apple.com/documentation/appkit/nsaccessibility/2869551-accessibilitycustomactions/ | iOS}
    * @spec {@link https://developer.android.com/reference/androidx/core/view/accessibility/AccessibilityNodeInfoCompat?hl=en#addAction(androidx.core.view.accessibility.AccessibilityNodeInfoCompat.AccessibilityActionCompat) | Android}
    */
-  AccessibilityAction?: EventHandler<AccessibilityActionDetailEvent<Target>>;
+  AccessibilityAction?: EventHandler<AccessibilityActionDetailEvent<T>>;
 }
 
-export type LayoutChangeEvent = EventHandler<LayoutChangeDetailEvent<Target>>;
-
-export type UIAppearanceEvent = EventHandler<UIAppearanceDetailEvent<Target>>;
+export interface LayoutChangeEvent extends LayoutChangeDetailEvent<Target> {}
+export interface UIAppearanceEvent extends UIAppearanceDetailEvent<Target> {}
 
 /**
  * This type is different with LynxEvent that they only have `bind` and `catch` event. But not `on` Event.
  */
-export interface LynxBindCatchEvent<Target = any> {
+export interface LynxBindCatchEvent<T = any> {
   /** Immediately lift your finger after touching. */
-  Tap?: EventHandler<BaseTouchEvent<Target>>;
+  Tap?: EventHandler<BaseTouchEvent<T>>;
 
   /** After touching the finger, leave after more than 350ms (it is recommended to use the longpress event instead). */
-  LongTap?: EventHandler<BaseTouchEvent<Target>>;
+  LongTap?: EventHandler<BaseTouchEvent<T>>;
 }
 
-export type LynxEventPropsBase<Target> = {
-  [K in keyof LynxEvent<Target> as Lowercase<`bind${K}` | `catch${K}` | `capture-bind${K}` | `capture-catch${K}` | `global-bind${K}`>]: LynxEvent<Target>[K];
+export type LynxEventPropsBase<T> = {
+  [K in keyof LynxEvent<T> as Lowercase<`bind${K}` | `catch${K}` | `capture-bind${K}` | `capture-catch${K}` | `global-bind${K}`>]: LynxEvent<T>[K];
 } & {
-  [K in keyof LynxBindCatchEvent<Target> as Lowercase<`bind${K}` | `catch${K}` | `capture-bind${K}` | `capture-catch${K}` | `global-bind${K}`>]: LynxBindCatchEvent<Target>[K];
+  [K in keyof LynxBindCatchEvent<T> as Lowercase<`bind${K}` | `catch${K}` | `capture-bind${K}` | `capture-catch${K}` | `global-bind${K}`>]: LynxBindCatchEvent<T>[K];
 };
 
 export type LynxEventProps = LynxEventPropsBase<Target>;

package/types/common/props.d.ts

@@ -121,6 +121,28 @@ export interface StandardProps extends LynxEventProps {
    * @since Lynx 3.1
    */
   'ios-background-shape-layer'?: boolean;
+  'exposure-id'?: string;
+  'exposure-scene'?: string;
+  'exposure-screen-margin-top'?: string;
+  'exposure-screen-margin-right'?: string;
+  'exposure-screen-margin-bottom'?: string;
+  'exposure-screen-margin-left'?: string;
+  'exposure-ui-margin-top'?: string;
+  'exposure-ui-margin-right'?: string;
+  'exposure-ui-margin-bottom'?: string;
+  'exposure-ui-margin-left'?: string;
+  'exposure-area'?: string;
+  'enable-exposure-ui-margin'?: boolean;
+  'user-interaction-enabled'?: boolean;
+  'native-interaction-enabled'?: boolean;
+  'block-native-event'?: boolean;
+  'block-native-event-areas'?: number[][];
+  'consume-slide-event'?: number[][];
+  'event-through'?: boolean;
+  'enable-touch-pseudo-propagation'?: boolean;
+  'hit-slop'?: object | string;
+  'ignore-focus'?: boolean;
+  'ios-enable-simultaneous-touch'?: boolean;
 }
 
 export interface NoProps {

package/types/main-thread/events.d.ts

@@ -2,7 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-import { LynxEventPropsBase, BaseTouchEvent, BaseMouseEvent, BaseWheelEvent, BaseKeyEvent } from '../common/events';
+import { LynxEventPropsBase, BaseTouchEvent, BaseMouseEvent, BaseWheelEvent, BaseKeyEvent, BaseAnimationEvent, BaseTransitionEvent, LayoutChangeDetailEvent, UIAppearanceDetailEvent  } from '../common/events';
 import { Element } from './element';
 
 // worklet event
@@ -10,11 +10,18 @@ export interface TouchEvent extends BaseTouchEvent<Element> {}
 export interface MouseEvent extends BaseMouseEvent<Element> {}
 export interface WheelEvent extends BaseWheelEvent<Element> {}
 export interface KeyEvent extends BaseKeyEvent<Element> {}
+
+export interface AnimationEvent extends BaseAnimationEvent<Element> {}
+export interface TransitionEvent extends BaseTransitionEvent<Element> {}
+
+export interface LayoutChangeEvent extends LayoutChangeDetailEvent<Element> {}
+export interface UIAppearanceEvent extends UIAppearanceDetailEvent<Element> {}
+
 type LynxWorkletEventPropsImpl = {
   [K in keyof LynxEventPropsBase<Element> as Lowercase<`main-thread:${K}`>]: LynxEventPropsBase<Element>[K];
 };
 export interface LynxWorkletEventProps extends LynxWorkletEventPropsImpl {}
 
-declare module '../common/props.d.ts' {
+declare module '../common/props' {
   interface StandardProps extends LynxWorkletEventProps {}
-}
+}