@tma.js/sdk 1.4.3 → 1.4.6

package/src/init/css/bindViewportCSSVars.ts

@@ -1,36 +0,0 @@
-import type { Viewport } from '~/viewport/index.js';
-
-import { setCSSVar } from './setCSSVar.js';
-
-/**
- * Accepts Viewport instance and sets CSS variables connected with viewport
- * sizes.
- *
- * Be careful using this function as long as it can impact application
- * performance. Viewport size is changing rather often, this makes CSS
- * variables update, which leads to possible layout redraw.
- *
- * Variables:
- * - `--tg-viewport-height`
- * - `--tg-viewport-width`
- * - `--tg-viewport-stable-height`
- *
- * Variables are being automatically updated in case, corresponding properties
- * updated in passed Viewport instance.
- *
- * @param viewport - Viewport instance.
- */
-export function bindViewportCSSVars(viewport: Viewport): void {
-  const setHeight = () => setCSSVar('--tg-viewport-height', `${viewport.height}px`);
-  const setWidth = () => setCSSVar('--tg-viewport-width', `${viewport.width}px`);
-  const setStableHeight = () => setCSSVar('--tg-viewport-height', `${viewport.stableHeight}px`);
-
-  // TODO: Should probably add debounce or throttle.
-  viewport.on('change:height', setHeight);
-  viewport.on('change:width', setWidth);
-  viewport.on('change:stableHeight', setStableHeight);
-
-  setHeight();
-  setWidth();
-  setStableHeight();
-}

package/src/init/css/index.ts

@@ -1 +0,0 @@
-export * from './processCSSVarsOption.js';

package/src/init/css/processCSSVarsOption.ts

@@ -1,57 +0,0 @@
-import type { MiniApp } from '~/mini-app/index.js';
-import type { ThemeParams } from '~/theme-params/index.js';
-import type { Viewport } from '~/viewport/index.js';
-
-import { bindMiniAppCSSVars } from './bindMiniAppCSSVars.js';
-import { bindThemeCSSVars } from './bindThemeCSSVars.js';
-import { bindViewportCSSVars } from './bindViewportCSSVars.js';
-import type { InitCSSVarsOption, InitCSSVarsSpecificOption } from '../types.js';
-
-/**
- * Converts init cssVars option to more narrow type.
- * @param option - option value.
- */
-function parseCSSVarsOptions(option: InitCSSVarsOption): InitCSSVarsSpecificOption {
-  if (typeof option === 'object') {
-    return option;
-  }
-  return option
-    ? {
-      themeParams: true,
-      viewport: true,
-      miniApp: true,
-    }
-    : {};
-}
-
-/**
- * Process initialization CSS vars option.
- * @param option - option value.
- * @param miniApp - MiniApp instance.
- * @param themeParams - ThemeParams instance.
- * @param viewportOrPromise - Viewport instance or promise resolving it.
- */
-export function processCSSVars(
-  option: InitCSSVarsOption,
-  miniApp: MiniApp,
-  themeParams: ThemeParams,
-  viewportOrPromise: Viewport | Promise<Viewport>,
-): void {
-  const cssVarsOptions = parseCSSVarsOptions(option);
-
-  if (cssVarsOptions.miniApp) {
-    bindMiniAppCSSVars(miniApp, themeParams);
-  }
-
-  if (cssVarsOptions.themeParams) {
-    bindThemeCSSVars(themeParams);
-  }
-
-  if (cssVarsOptions.viewport) {
-    if (viewportOrPromise instanceof Promise) {
-      viewportOrPromise.then(bindViewportCSSVars);
-    } else {
-      bindViewportCSSVars(viewportOrPromise);
-    }
-  }
-}

package/src/init/css/setCSSVar.ts

@@ -1,8 +0,0 @@
-/**
- * Sets CSS variable.
- * @param name - variable name.
- * @param value - variable value.
- */
-export function setCSSVar(name: string, value: string): void {
-  document.documentElement.style.setProperty(name, value);
-}

package/src/init/index.ts

@@ -1,2 +0,0 @@
-export * from './init.js';
-export * from './types.js';

package/src/init/init.ts

@@ -1,134 +0,0 @@
-import { createPostEvent, isIframe, on } from '~/bridge/index.js';
-import { CloudStorage } from '~/cloud-storage/index.js';
-import { HapticFeedback } from '~/haptic-feedback/index.js';
-import { catchCustomStyles } from '~/init/catchCustomStyles.js';
-import {
-  createBackButton,
-  createClosingBehavior,
-  createMainButton,
-  createMiniApp,
-  createRequestIdGenerator,
-  createSettingsButton,
-  createThemeParams,
-  createViewport,
-} from '~/init/creators/index.js';
-import { processCSSVars } from '~/init/css/index.js';
-import { InitData } from '~/init-data/index.js';
-import { Invoice } from '~/invoice/index.js';
-import { retrieveLaunchData } from '~/launch-params/index.js';
-import { Popup } from '~/popup/index.js';
-import { QRScanner } from '~/qr-scanner/index.js';
-import { Utils } from '~/utils/index.js';
-
-import type { InitOptions, InitResult } from './types.js';
-
-type ComputedInitResult<O> = O extends { async: true } | { complete: true }
-  ? Promise<InitResult>
-  : InitResult;
-
-export function init(): InitResult;
-export function init<O extends InitOptions>(options: O): ComputedInitResult<O>;
-export function init(options: InitOptions = {}): InitResult | Promise<InitResult> {
-  const {
-    async = false,
-    complete = async,
-    cssVars = false,
-    acceptCustomStyles = false,
-  } = options;
-
-  try {
-    // Retrieve launch data.
-    const {
-      launchParams: {
-        initData,
-        initDataRaw,
-        version,
-        platform,
-        themeParams,
-        botInline = false,
-      },
-      isPageReload,
-    } = retrieveLaunchData();
-
-    const createRequestId = createRequestIdGenerator();
-    const postEvent = createPostEvent(version);
-
-    // In Telegram web version we should listen to special event sent from the Telegram application
-    // to know, when we should reload the Mini App.
-    if (isIframe()) {
-      if (acceptCustomStyles) {
-        catchCustomStyles();
-      }
-
-      // Notify Telegram, iframe is ready. This will result in sending style tag html from native
-      // application which is used in catchCustomStyles function. We should call this method also
-      // to start receiving "reload_iframe" events from the Telegram application.
-      postEvent('iframe_ready', { reload_supported: true });
-      on('reload_iframe', () => window.location.reload());
-    }
-
-    const result: Omit<InitResult, 'viewport'> = {
-      backButton: createBackButton(isPageReload, version, postEvent),
-      closingBehavior: createClosingBehavior(isPageReload, postEvent),
-      cloudStorage: new CloudStorage(version, createRequestId, postEvent),
-      createRequestId,
-      hapticFeedback: new HapticFeedback(version, postEvent),
-      invoice: new Invoice(version, postEvent),
-      mainButton: createMainButton(
-        isPageReload,
-        themeParams.buttonColor || '#000000',
-        themeParams.buttonTextColor || '#ffffff',
-        postEvent,
-      ),
-      miniApp: createMiniApp(
-        isPageReload,
-        themeParams.backgroundColor || '#ffffff',
-        version,
-        botInline,
-        createRequestId,
-        postEvent,
-      ),
-      popup: new Popup(version, postEvent),
-      postEvent,
-      qrScanner: new QRScanner(version, postEvent),
-      settingsButton: createSettingsButton(isPageReload, version, postEvent),
-      themeParams: createThemeParams(themeParams),
-      utils: new Utils(version, createRequestId, postEvent),
-      ...(initData
-        // Init data could be missing in case, application was launched via InlineKeyboardButton.
-        ? {
-          initData: new InitData(initData),
-          initDataRaw,
-        }
-        : {}),
-    };
-
-    const viewport = createViewport(isPageReload, platform, postEvent, complete);
-    if (viewport instanceof Promise || complete) {
-      return Promise.resolve(viewport).then((vp) => {
-        processCSSVars(
-          cssVars,
-          result.miniApp,
-          result.themeParams,
-          vp,
-        );
-
-        return { ...result, viewport: vp };
-      });
-    }
-
-    processCSSVars(
-      cssVars,
-      result.miniApp,
-      result.themeParams,
-      viewport,
-    );
-
-    return { ...result, viewport };
-  } catch (e) {
-    if (complete) {
-      return Promise.reject(e);
-    }
-    throw e;
-  }
-}

package/src/init/types.ts

@@ -1,94 +0,0 @@
-import type { BackButton } from '~/back-button/index.js';
-import type { PostEvent } from '~/bridge/index.js';
-import type { ClosingBehavior } from '~/closing-behavior/index.js';
-import type { CloudStorage } from '~/cloud-storage/index.js';
-import type { HapticFeedback } from '~/haptic-feedback/index.js';
-import type { InitData } from '~/init-data/index.js';
-import type { Invoice } from '~/invoice/index.js';
-import type { MainButton } from '~/main-button/index.js';
-import type { MiniApp } from '~/mini-app/index.js';
-import type { Popup } from '~/popup/index.js';
-import type { QRScanner } from '~/qr-scanner/index.js';
-import type { SettingsButton } from '~/settings-button/index.js';
-import type { ThemeParams } from '~/theme-params/index.js';
-import type { CreateRequestIdFunc } from '~/types/index.js';
-import type { Utils } from '~/utils/index.js';
-import type { Viewport } from '~/viewport/index.js';
-
-export interface InitResult {
-  backButton: BackButton;
-  closingBehavior: ClosingBehavior;
-  cloudStorage: CloudStorage;
-  createRequestId: CreateRequestIdFunc;
-  hapticFeedback: HapticFeedback;
-  initData?: InitData;
-  initDataRaw?: string;
-  invoice: Invoice;
-  mainButton: MainButton;
-  miniApp: MiniApp;
-  popup: Popup;
-  postEvent: PostEvent;
-  qrScanner: QRScanner;
-  settingsButton: SettingsButton;
-  themeParams: ThemeParams;
-  utils: Utils;
-  viewport: Viewport;
-}
-
-export interface InitCSSVarsSpecificOption {
-  /**
-   * Enables theme parameters CSS variables.
-   * @see bindThemeCSSVars
-   * @default false
-   */
-  themeParams?: boolean;
-
-  /**
-   * Enables viewport CSS variables.
-   * @see bindViewportCSSVars
-   * @default false
-   */
-  viewport?: boolean;
-
-  /**
-   * Enables mini app CSS variables.
-   * @see bindMiniAppCSSVars
-   * @default false
-   */
-  miniApp?: boolean;
-}
-
-export type InitCSSVarsOption = boolean | InitCSSVarsSpecificOption;
-
-export interface InitOptions {
-  /**
-   * @deprecated This option name was considered inappropriate. Use `complete` instead.
-   */
-  async?: boolean;
-
-  /**
-   * True if SDK should accept styles sent from the Telegram web application. This option is only
-   * used in web versions of Telegram.
-   * @default false
-   */
-  acceptCustomStyles?: boolean;
-
-  /**
-   * Should SDK create global CSS variables related to current Telegram application colors.
-   *
-   * Possible values:
-   * - `false` - no CSS variables will be created.
-   * - `true` - all CSS variables will be created.
-   * - object - applies specific CSS variables.
-   *
-   * @default false
-   */
-  cssVars?: InitCSSVarsOption;
-
-  /**
-   * True if initialization must be performed completely. This includes retrieving some components
-   * state from the Telegram application, and as a result, this makes initialization asynchronous.
-   * @default false
-   */
-  complete?: boolean;
-}

package/src/init-data/InitData.ts

@@ -1,96 +0,0 @@
-import type {
-  Chat,
-  ChatType,
-  InitDataParsed,
-  User,
-} from './types.js';
-
-/**
- * Class which is responsible for displaying Mini Apps init data.
- */
-export class InitData {
-  constructor(private readonly initData: InitDataParsed) {
-  }
-
-  /**
-   * @see InitDataParsed.authDate
-   */
-  get authDate(): Date {
-    return this.initData.authDate;
-  }
-
-  /**
-   * @see InitDataParsed.canSendAfter
-   */
-  get canSendAfter(): number | undefined {
-    return this.initData.canSendAfter;
-  }
-
-  /**
-   * Date after which it is allowed to call
-   * the [answerWebAppQuery](https://core.telegram.org/bots/api#answerwebappquery) method.
-   */
-  get canSendAfterDate(): Date | undefined {
-    const { canSendAfter } = this;
-
-    return canSendAfter === undefined
-      ? undefined
-      : new Date(this.authDate.getTime() + canSendAfter * 1000);
-  }
-
-  /**
-   * @see InitDataParsed.chat
-   */
-  get chat(): Chat | undefined {
-    return this.initData.chat;
-  }
-
-  /**
-   * @see InitDataParsed.chatType
-   */
-  get chatType(): ChatType | undefined {
-    return this.initData.chatType;
-  }
-
-  /**
-   * @see InitDataParsed.chatInstance
-   */
-  get chatInstance(): string | undefined {
-    return this.initData.chatInstance;
-  }
-
-  /**
-   * @see InitDataParsed.hash
-   */
-  get hash(): string {
-    return this.initData.hash;
-  }
-
-  /**
-   * @see InitDataParsed.queryId
-   */
-  get queryId(): string | undefined {
-    return this.initData.queryId;
-  }
-
-  /**
-   * @see InitDataParsed.receiver
-   */
-  get receiver(): User | undefined {
-    return this.initData.receiver;
-  }
-
-  /**
-   * @see InitDataParsed.startParam
-   */
-  get startParam(): string | undefined {
-    return this.initData.startParam;
-  }
-
-  /**
-   * @see InitDataParsed.user
-   */
-  get user(): User | undefined {
-    return this.initData.user;
-  }
-}

package/src/init-data/__tests__/InitData.ts

@@ -1,98 +0,0 @@
-import { expect, it } from 'vitest';
-
-import { InitData } from '../InitData';
-
-it('should return fields specified in constructor', () => {
-  const authDate = new Date(123);
-  const data1 = new InitData({ authDate, hash: 'hash' });
-  expect(data1.authDate).toBe(authDate);
-  expect(data1.canSendAfter).toBeUndefined();
-  expect(data1.chat).toBeUndefined();
-  expect(data1.chatType).toBeUndefined();
-  expect(data1.chatInstance).toBeUndefined();
-  expect(data1.hash).toBe('hash');
-  expect(data1.queryId).toBeUndefined();
-  expect(data1.receiver).toBeUndefined();
-  expect(data1.startParam).toBeUndefined();
-  expect(data1.user).toBeUndefined();
-
-  const canSendAfter = 1;
-  const data2 = new InitData({
-    authDate,
-    canSendAfter,
-    chat: {
-      id: 999,
-      photoUrl: 'photo',
-      type: 'group',
-      title: 'Title',
-    },
-    chatType: 'sender',
-    chatInstance: 'abc',
-    hash: 'joke',
-    queryId: 'query id',
-    receiver: {
-      id: 1000,
-      photoUrl: 'receiver photo',
-      firstName: 'a',
-      lastName: 'b',
-      username: 'c',
-      isBot: false,
-      isPremium: false,
-      languageCode: 'en',
-    },
-    startParam: 'param',
-    user: {
-      id: 2000,
-      photoUrl: 'user photo',
-      firstName: 'a',
-      lastName: 'b',
-      username: 'c',
-      languageCode: 'en',
-    },
-  });
-  expect(data2.authDate).toBe(authDate);
-  expect(data2.canSendAfter).toBe(canSendAfter);
-  expect(data2.chat).toStrictEqual({
-    id: 999,
-    photoUrl: 'photo',
-    type: 'group',
-    title: 'Title',
-  });
-  expect(data2.chatType).toBe('sender');
-  expect(data2.chatInstance).toBe('abc');
-  expect(data2.hash).toBe('joke');
-  expect(data2.queryId).toBe('query id');
-  expect(data2.receiver).toStrictEqual({
-    id: 1000,
-    photoUrl: 'receiver photo',
-    firstName: 'a',
-    lastName: 'b',
-    username: 'c',
-    isBot: false,
-    isPremium: false,
-    languageCode: 'en',
-  });
-  expect(data2.startParam).toBe('param');
-  expect(data2.user).toStrictEqual({
-    id: 2000,
-    photoUrl: 'user photo',
-    firstName: 'a',
-    lastName: 'b',
-    username: 'c',
-    languageCode: 'en',
-  });
-});
-
-it('should have canSendAfterData equal to authDate + canSendAfter seconds', () => {
-  const authDate = new Date();
-  const initData = new InitData({
-    authDate,
-    hash: 'abc',
-    canSendAfter: 32000,
-  });
-
-  expect(initData.canSendAfter).toBe(32000);
-  expect(initData.canSendAfterDate).toStrictEqual(
-    new Date(authDate.getTime() + 32000000),
-  );
-});

package/src/init-data/__tests__/chatParser.ts

@@ -1,102 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { chatParser } from '../chatParser';
-
-describe('id', () => {
-  it('should throw an error in case, this property is missing', () => {
-    expect(
-      () => chatParser().parse({
-        type: 'group chat',
-        title: 'My chat',
-      }),
-    ).toThrow();
-  });
-
-  it('should parse source property as number and pass it to the "id" property', () => {
-    expect(
-      chatParser().parse({
-        id: 882,
-        type: 'group chat',
-        title: 'My chat',
-      }),
-    ).toMatchObject({
-      id: 882,
-    });
-  });
-});
-
-describe('type', () => {
-  it('should throw an error in case, this property is missing', () => {
-    expect(
-      () => chatParser().parse({
-        id: 223,
-        title: 'My chat',
-      }),
-    ).toThrow();
-  });
-
-  it('should parse source property as number and pass it to the "type" property', () => {
-    expect(
-      chatParser().parse({
-        id: 882,
-        type: 'group chat',
-        title: 'My chat',
-      }),
-    ).toMatchObject({
-      type: 'group chat',
-    });
-  });
-});
-
-describe('title', () => {
-  it('should throw an error in case, this property is missing', () => {
-    expect(
-      () => chatParser().parse({
-        id: 223,
-        type: 'group chat',
-      }),
-    ).toThrow();
-  });
-
-  it('should parse source property as number and pass it to the "title" property', () => {
-    expect(
-      chatParser().parse({
-        id: 882,
-        type: 'group chat',
-        title: 'My chat',
-      }),
-    ).toMatchObject({
-      title: 'My chat',
-    });
-  });
-});
-
-describe('photo_url', () => {
-  it('should parse source property as number and pass it to the "photoUrl" property', () => {
-    expect(
-      chatParser().parse({
-        id: 882,
-        type: 'group chat',
-        title: 'My chat',
-        photo_url: 'https://image.com',
-      }),
-    ).toMatchObject({
-      photoUrl: 'https://image.com',
-    });
-  });
-});
-
-describe('username', () => {
-  it('should parse source property as number and pass it to the "username" property', () => {
-    expect(
-      chatParser().parse({
-        id: 882,
-        type: 'group chat',
-        title: 'My chat',
-        username: 'Johny Bravo',
-      }),
-    ).toMatchObject({
-      username: 'Johny Bravo',
-    });
-  });
-});