@divkitframework/divkit 24.2.0 → 24.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@divkitframework/divkit",
-    "version": "24.2.0",
+    "version": "24.3.0",
     "description": "DivKit for the web",
     "keywords": [
         "server-driven-ui",
@@ -112,6 +112,7 @@
         "jest": "28.1.3",
         "jest-environment-jsdom": "28.0.0",
         "jest-html-reporter": "3.6.0",
+        "lottie-web": "5.11.0",
         "mini-css-extract-plugin": "2.6.1",
         "peggy": "2.0.1",
         "postcss": "8.4.14",

package/typings/client-devtool.d.ts

@@ -7,7 +7,8 @@ import type {
     ComponentCallback,
     CustomActionCallback,
     Theme,
-    Customization
+    Customization,
+    DivExtensionClass
 } from './common';
 import type { GlobalVariablesController, Variable } from './variables';
 import type { WrappedError } from './common';
@@ -30,12 +31,18 @@ export function render(opts: {
     platform?: Platform;
     customization?: Customization;
     builtinProtocols?: string[];
+    extensions?: Map<string, DivExtensionClass>;
     /** EXPERIMENTAL SUPPORT */
     theme?: Theme;
 }): DivkitDebugInstance;
 
 export { createVariable, createGlobalVariablesController } from './variables';
 
+export {
+    SizeProvider,
+    lottieExtensionBuilder
+} from './extensions';
+
 export interface EvalValueBase {
     type: string;
     value: unknown;

package/typings/client-hydratable.d.ts

@@ -6,7 +6,8 @@ import type {
     Platform,
     CustomActionCallback,
     Theme,
-    Customization
+    Customization,
+    DivExtensionClass
 } from './common';
 import type { GlobalVariablesController } from './variables';
 
@@ -23,8 +24,14 @@ export function render(opts: {
     platform?: Platform;
     customization?: Customization;
     builtinProtocols?: string[];
+    extensions?: Map<string, DivExtensionClass>;
     /** EXPERIMENTAL SUPPORT */
     theme?: Theme;
 }): DivkitInstance;
 
 export { createVariable, createGlobalVariablesController } from './variables';
+
+export {
+    SizeProvider,
+    lottieExtensionBuilder
+} from './extensions';

package/typings/client.d.ts

@@ -6,7 +6,8 @@ import type {
     Platform,
     CustomActionCallback,
     Theme,
-    Customization
+    Customization,
+    DivExtensionClass
 } from './common';
 import type { GlobalVariablesController } from './variables';
 
@@ -22,8 +23,14 @@ export function render(opts: {
     platform?: Platform;
     customization?: Customization;
     builtinProtocols?: string[];
+    extensions?: Map<string, DivExtensionClass>;
     /** EXPERIMENTAL SUPPORT */
     theme?: Theme;
 }): DivkitInstance;
 
 export { createVariable, createGlobalVariablesController } from './variables';
+
+export {
+    SizeProvider,
+    lottieExtensionBuilder
+} from './extensions';

package/typings/common.d.ts

@@ -1,3 +1,5 @@
+import type { Variable } from './variables';
+
 export type BooleanInt = 0 | 1 | false | true;
 
 export type TemplateContext = Record<string, unknown>;
@@ -151,3 +153,19 @@ export interface Customization {
     galleryLeftClass?: string;
     galleryRightClass?: string;
 }
+
+export interface DivExtensionContext {
+    variables: Map<string, Variable>;
+    logError(error: WrappedError): void;
+}
+
+export interface DivExtensionClass {
+    new(params: object): DivExtension;
+    prototype: DivExtension;
+}
+
+export interface DivExtension {
+    mountView?(node: HTMLElement, context: DivExtensionContext): void;
+
+    unmountView?(node: HTMLElement, context: DivExtensionContext): void;
+}

package/typings/extensions.d.ts

@@ -0,0 +1,40 @@
+import type { DivExtension } from './common';
+
+export class SizeProvider implements DivExtension {}
+
+declare class Lottie implements DivExtension {}
+
+interface Params {
+    lottie_url?: string;
+    lottie_json?: object;
+    repeat_count?: number;
+    repeat_mode?: 'restart' | 'reverse';
+}
+
+interface AnimationItem {
+    totalFrames: number;
+
+    addEventListener(type: string, cb: () => void): void;
+    destroy(): void;
+    stop(): void;
+    setDirection(direction: number): void;
+    goToAndPlay(value: number, isFrame?: boolean): void;
+}
+
+interface LoadAnimationParamsWidthPath {
+    container: HTMLElement;
+    path: string;
+    renderer: 'svg' | 'html' | 'canvas';
+    loop: boolean | number | undefined;
+}
+
+interface LoadAnimationParamsWidthData {
+    container: HTMLElement;
+    animationData: any;
+    renderer: 'svg' | 'html' | 'canvas';
+    loop: boolean | number | undefined;
+}
+
+type LoadAnimation = (opts: LoadAnimationParamsWidthPath | LoadAnimationParamsWidthData) => AnimationItem;
+
+export function lottieExtensionBuilder(loadAnimation: LoadAnimation): typeof Lottie;