@lynx-js/types 3.6.0 → 3.7.0

package/CHANGELOG.md

@@ -1,9 +1,25 @@
 # CHANGELOG
 
+## 3.7.0
+
+### Minor Changes
+
+- Add `experimental-search-ref-anchor-strategy` property for `<list>` element.
+
+- Add `bindstartplay`, `bindcurrentloopcomplete` and `bindfinalloopcomplete` callback for animated image.
+
+- Add global `getNapiLoader()` function.
+
+- Add `<svg>` element types.
+
+- Update `image` typings.
+
 ## 3.6.0
 
 ### Minor Changes
 
+- Add `experimental-update-sticky-for-diff` property for list.
+
 - Add new reporting fields for `ImageLoadEvent`
 
 - Add `lynx.stopExposure` and `lynx.resumeExposure` APIs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/types",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "",
   "keywords": [
     "lynx",

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

@@ -4,6 +4,7 @@
 export interface PerformanceEntry {
     name: string;
     entryType: string;
+    typeResolved: boolean;
 }
 
 export interface FrameworkRenderingTiming {
@@ -35,6 +36,9 @@ export interface PipelineEntry extends PerformanceEntry {
     paintEnd: number;
     frameworkRenderingTiming: FrameworkRenderingTimings[keyof FrameworkRenderingTimings] & FrameworkRenderingTiming;
     hostPlatformTiming: HostPlatformTiming;
+    actualFmp?: PerformanceMetric;
+    lynxActualFmp?: PerformanceMetric;
+    totalActualFmp?: PerformanceMetric;
 }
 
 export interface LoadBundleEntry extends PipelineEntry {
@@ -48,8 +52,23 @@ export interface LoadBundleEntry extends PipelineEntry {
     verifyTasmEnd: number;
     ffiStart: number;
     ffiEnd: number;
+    createLynxStart: number;
+    createLynxEnd: number;
+    loadCoreStart: number;
+    loadCoreEnd: number;
+    openTime: number;
+    containerInitStart: number;
+    containerInitEnd: number;
+    prepareTemplateStart: number;
+    prepareTemplateEnd: number;
+    fcp?: PerformanceMetric;
+    lynxFcp: PerformanceMetric;
+    totalFcp?: PerformanceMetric;
 }
 
+/**
+ * @deprecated LoadBundleEntry and ReloadBundleEntry contain all properties of InitContainerEntry
+ **/
 export interface InitContainerEntry extends PerformanceEntry {
     openTime: number;
     containerInitStart: number;
@@ -59,11 +78,17 @@ export interface InitContainerEntry extends PerformanceEntry {
     extraTiming: Record<string, number>;
 }
 
+/**
+ * @deprecated LoadBundleEntry and ReloadBundleEntry contain all properties of InitLynxviewEntry
+ **/
 export interface InitLynxviewEntry extends PerformanceEntry {
     createLynxStart: number;
     createLynxEnd: number;
 }
 
+/**
+ * @deprecated LoadBundleEntry and ReloadBundleEntry contain all properties of InitBackgroundRuntimeEntry
+ **/
 export interface InitBackgroundRuntimeEntry extends PerformanceEntry {
     loadCoreStart: number;
     loadCoreEnd: number;
@@ -78,6 +103,9 @@ export interface PerformanceMetric {
     endTimestamp: number;
 }
 
+/**
+ * @deprecated LoadBundleEntry and ReloadBundleEntry contain all properties of MetricFcpEntry
+ **/
 export interface MetricFcpEntry extends PerformanceEntry {
     fcp: PerformanceMetric;
     lynxFcp: PerformanceMetric;
@@ -89,11 +117,15 @@ export interface MetricFspEntry extends PerformanceEntry {
     lynxFsp: PerformanceMetric;
     totalFsp: PerformanceMetric;
     fspStatus: string;
-    contentFillRatioX: number;
-    contentFillRatioY: number;
-    contentFillRatioTotalArea: number;
+    contentFillPercentageX: number;
+    contentFillPercentageY: number;
+    contentFillPercentageTotalArea: number;
+    containerFillPercentageContainerArea: number;
 }
 
+/**
+ * @deprecated PipelineEntry contain all properties of MetricActualFmpEntry
+ **/
 export interface MetricActualFmpEntry extends PerformanceEntry {
     actualFmp: PerformanceMetric;
     lynxActualFmp: PerformanceMetric;
@@ -118,16 +150,28 @@ export interface ReloadBundleEntry extends PipelineEntry {
     reloadBackgroundEnd: number;
     ffiStart: number;
     ffiEnd: number;
+    createLynxStart: number;
+    createLynxEnd: number;
+    loadCoreStart: number;
+    loadCoreEnd: number;
+    openTime: number;
+    containerInitStart: number;
+    containerInitEnd: number;
+    prepareTemplateStart: number;
+    prepareTemplateEnd: number;
+    fcp?: PerformanceMetric;
+    lynxFcp: PerformanceMetric;
+    totalFcp?: PerformanceMetric;
 }
 
 export interface MemoryUsageEntry extends PerformanceEntry {
-    sizeBytes: any;
+    sizeBytes: number;
     detail: Record<string, MemoryUsageItem>;
 }
 
 export interface MemoryUsageItem {
     category: string;
-    sizeBytes: any;
+    sizeBytes: number;
     detail: Record<string, string>;
 }
 

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

@@ -17,6 +17,7 @@ import { InputProps, InputUIMethods } from './input';
 import { TextAreaProps, TextAreaUIMethods } from './textarea';
 import { FrameProps } from './frame';
 import { OverlayProps} from './overlay';
+import { SVGProps } from './svg';
 
 
 export interface UIMethods {
@@ -50,6 +51,7 @@ export interface IntrinsicElements {
   'textarea': TextAreaProps;
   'frame': FrameProps;
   'overlay': OverlayProps;
+  'svg': SVGProps;
 }
 
 declare module 'react' {
@@ -74,6 +76,7 @@ declare module 'react' {
       'textarea': TextAreaProps;
       'frame': FrameProps;
       'overlay': OverlayProps;
+      'svg': SVGProps;
     }
   }
 }

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

@@ -31,7 +31,7 @@ export interface FrameProps extends StandardProps {
   bindload?: (e: FrameLoadEvent) => void;
 
   /**
-   * Pass global props to the nested Lynx page within the frame.
+   * Passes `globalProps` to the Lynx page embedded in the frame. The embedded page can read it via `lynx.__globalProps`.
    * @iOS
    * @Android
    * @since 3.6

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

@@ -18,7 +18,7 @@ export interface ImageProps extends StandardProps {
    * @PC
    * @since 0.2
    */
-  src?: string;
+  'src'?: string;
 
   /**
    * Specifies image cropping/scaling mode
@@ -33,12 +33,30 @@ export interface ImageProps extends StandardProps {
    * @Harmony
    * @PC
    */
-  mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center';
+  'mode'?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'center';
 
   /**
-   * ARGB_8888: 32-bit memory per pixel, supports semi-transparent images
-   * RGB_565: 16-bit memory per pixel, reduces memory usage but loses transparency
+   * `ARGB_8888`: 32-bit memory per pixel, supports semi-transparent images.
+   * `RGB_565`: 16-bit memory per pixel, reduces memory usage but loses transparency.
+   *
    * Support PC platform since 3.5
+   *
+   * :::note
+   *
+   * Affects the actual memory usage of the image bitmap.
+   *
+   * Taking an image with a resolution of 1024*768 as an example, the actual memory usage is (1024 * 768 * bits per pixel / 8) Bytes.
+   *
+   * The default is ARGB_8888. Frontend developers can optimize image memory usage by setting it to RGB_565.
+   *
+   * ARGB_8888: Each pixel occupies 32 bits of memory and includes an alpha channel.
+   * RGB_565: Each pixel occupies 16 bits of memory, which reduces memory usage but results in the loss of transparency.
+   * Setting RGB_565 may affect the display of `<image>`'s border-radius. You can set border-radius on the parent view of the `<image>` and add the clip-radius attribute to the parent view.
+   *
+   * It is not recommended to use RGB_565 when mode="aspectFit", as it may cause black borders in the cropped area.
+   *
+   * :::
+   *
    * @defaultValue "ARGB_8888"
    * @Android
    * @PC
@@ -54,7 +72,7 @@ export interface ImageProps extends StandardProps {
    * @PC
    * @since 1.4
    */
-  placeholder?: string;
+  'placeholder'?: string;
 
   /**
    * Image blur radius
@@ -68,6 +86,11 @@ export interface ImageProps extends StandardProps {
 
   /**
    * Stretchable area for 9patch images, in percentage or decimal, four values for top, right, bottom, left
+   *
+   * :::note
+   * Using cap-insets does not require the original image to be a 9-patch image.
+   * :::
+   *
    * @iOS
    * @Android
    * @Harmony
@@ -161,6 +184,7 @@ export interface ImageProps extends StandardProps {
    * @iOS
    * @Android
    * @Harmony
+   * @PC
    * @since 2.12
    */
   'tint-color'?: string;
@@ -184,6 +208,33 @@ export interface ImageProps extends StandardProps {
    * @since 0.2
    */
   binderror?: (e: ErrorEvent) => void;
+
+  /**
+   * Triggered when the animated image starts playing.
+   * @iOS
+   * @Android
+   * @Harmony
+   * @since 3.7
+   */
+  bindstartplay?: (e: BaseEvent) => void;
+
+  /**
+   * Triggered when one loop of the animated image finishes playing.
+   * @iOS
+   * @Android
+   * @Harmony
+   * @since 3.7
+   */
+  bindcurrentloopcomplete?: (e: BaseEvent) => void;
+
+  /**
+   * Triggered when the animated image finishes playing all `loop-count` loops. If `loop-count` is not set, this callback will not be triggered.
+   * @iOS
+   * @Android
+   * @Harmony
+   * @since 3.7
+   */
+  bindfinalloopcomplete?: (e: BaseEvent) => void;
 }
 
 export type LoadEvent = BaseEvent<'load', ImageLoadEvent>;

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

@@ -13,6 +13,7 @@ export * from './text';
 export * from './view';
 export * from './input';
 export * from './textarea';
+export * from './svg';
 export * from './element';
 export * from './methods';
 export * from './attributes';

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

@@ -36,6 +36,22 @@ export enum ListEventSource {
   SCROLL = 2,
 }
 
+/**
+ * The strategy to search the reference anchor for removed on-screen children.
+ * NONE: Do not search the reference anchor.
+ * TO_START: Search the reference anchor to the start of the list.
+ * TO_END: Search the reference anchor to the end of the list.
+ * @Android
+ * @iOS
+ * @Harmony
+ * @PC
+ */
+export enum ListSearchRefAnchorStrategy {
+  NONE = 0,
+  TO_START = 1,
+  TO_END = 2,
+}
+
 export interface ListAttachedCell {
   /**
    * id of list item
@@ -546,6 +562,16 @@ export interface ListProps extends StandardProps {
    */
   'preload-buffer-count'?: number;
 
+  /**
+   * Determine the strategy to search the reference anchor for removed on-screen children. If set to TO_START or TO_END, we will update reference anchor child for all removed on-screen children before consuming diff info. And in list layout pass, if no valid anchor child can be found from all on screen children, we use the reference anchor child in layout.
+   * @defaultValue ListSearchRefAnchorStrategy.NONE
+   * @Android
+   * @iOS
+   * @Harmony
+   * @PC
+   */
+  'experimental-search-ref-anchor-strategy'?: ListSearchRefAnchorStrategy;
+
   /**
    * Whether to display the scroll bar of the list, with false on Harmony platform and true on other platforms.
    * @defaultValue undefined
@@ -565,6 +591,16 @@ export interface ListProps extends StandardProps {
    */
   'experimental-recycle-sticky-item'?: boolean;
 
+  /**
+   * Whether to using operation from c++ list to insert list-item's platform view. The default value is false, but we recommend to set it to true in the case with MOST_ON_TASM or MULTI_THREAD thread strategy.
+   * @defaultValue false
+   * @Android
+   * @iOS
+   * @Harmony
+   * @PC
+   */
+  'enable-insert-platform-view-operation'?: boolean;
+
   /**
    * When the content size of a component is smaller than the component itself, decide whether to enable scrolling.
    * @defaultValue false

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

@@ -0,0 +1,30 @@
+import { BaseEvent } from '../events';
+import { StandardProps } from '../props';
+export interface SVGProps extends StandardProps {
+  /**
+   * SVG resource URL
+   * @iOS
+   * @Android
+   * @Harmony
+   * @PC
+   */
+  'src'?: string;
+
+  /**
+   * SVG XML content
+   * @iOS
+   * @Android
+   * @Harmony
+   * @PC
+   */
+  'content'?: string;
+
+    /**
+     * SVG Loaded
+     * @Android
+     * @iOS
+     * @Harmony
+     * @PC
+     */
+    bindload?: (e: BaseEvent) => void;
+}

package/types/common/global.d.ts

@@ -13,6 +13,10 @@ export type LynxClearTimeout = (timeoutId: number) => void;
 
 export type AnyObject = Record<string, any>;
 
+export interface LynxNapiLoader {
+  load: (moduleName: string) => any;
+}
+
 export interface GlobalProps {}
 
 export type UnsafeLynx = BackgroundLynx & MainThreadLynx;
@@ -40,6 +44,8 @@ declare global {
    * below Lynx 3.0, use lynx.cancelAnimationFrame.
    */
   function cancelAnimationFrame(requestID?: number): void;
+
+  function getNapiLoader(): LynxNapiLoader | undefined;
 }
 
 declare function setTimeout(callback: (...args: unknown[]) => unknown, number: number): number;