@lynx-js/types 3.3.0 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 3.3.1
+
+- [Infra][Types] Codegen csstype.d.ts from css_defines
+
 ## 3.3.0
 
 ### Major Changes
@@ -12,6 +16,7 @@
 - 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:

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@lynx-js/types",
-  "version": "3.3.0",
+  "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": "vitest --typecheck --run & tsc --noEmit"
+    "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": [

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,12 +7,12 @@ export interface PerformanceEntry {
 }
 
 export interface FrameworkRenderingTiming {
-    vmExecuteStart?: number;
-    vmExecuteEnd?: number;
-    dataProcessorStart?: number;
-    dataProcessorEnd?: number;
-    setInitDataStart?: number;
-    setInitDataEnd?: number;
+    vmExecuteStart: number;
+    vmExecuteEnd: number;
+    dataProcessorStart: number;
+    dataProcessorEnd: number;
+    setInitDataStart: number;
+    setInitDataEnd: number;
 }
 
 export interface FrameworkRenderingTimings {
@@ -43,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 {
@@ -79,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/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,100 +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 & {});
-    linearDirection?: 'column' | 'row' | 'column-reverse' | 'row-reverse';
-    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;
   }
->;
+>;