@tma.js/sdk 1.4.4 → 1.4.6

package/src/index.ts

@@ -1,185 +0,0 @@
-export {
-  BackButton,
-  type BackButtonEventName,
-  type BackButtonEventListener,
-} from './back-button/index.js';
-export {
-  createPostEvent,
-  isIframe,
-  invokeCustomMethod,
-  on,
-  off,
-  once,
-  parseMessage,
-  postEvent,
-  request,
-  subscribe,
-  unsubscribe,
-  MethodUnsupportedError,
-  ParameterUnsupportedError,
-  type HeaderColorKey,
-  type InvoiceStatus,
-  type ImpactHapticFeedbackStyle,
-  type MiniAppsMethodName,
-  type MiniAppsEventName,
-  type MiniAppsEventParams,
-  type MiniAppsEventListener,
-  type MiniAppsGlobalEventListener,
-  type MiniAppsEmptyMethodName,
-  type MiniAppsMethodAcceptParams,
-  type MiniAppsMethodParams,
-  type MiniAppsNonEmptyMethodName,
-  type MiniAppsMethods,
-  type MiniAppsEventEmitter,
-  type MiniAppsEventHasParams,
-  type MiniAppsEvents,
-  type NotificationHapticFeedbackType,
-  type PhoneRequestedStatus,
-  type PostEvent,
-  type RequestOptions,
-  type RequestOptionsAdvanced,
-  type SwitchInlineQueryChatType,
-  type WriteAccessRequestedStatus,
-} from './bridge/index.js';
-export { classNames, mergeClassNames } from './classnames/index.js';
-export {
-  ClosingBehavior,
-  type ClosingBehaviorEventListener,
-  type ClosingBehaviorEventName,
-  type ClosingBehaviorEvents,
-} from './closing-behavior/index.js';
-export { CloudStorage } from './cloud-storage/index.js';
-export {
-  isRGB,
-  isRGBShort,
-  isColorDark,
-  toRGB,
-  type RGB,
-  type RGBShort,
-} from './colors/index.js';
-export {
-  setCSSVar,
-  bindMiniAppCSSVars,
-  bindThemeCSSVars,
-  bindViewportCSSVars,
-} from './css/index.js';
-export { HapticFeedback } from './haptic-feedback/index.js';
-export {
-  init,
-  type InitOptions,
-  type InitResult,
-} from './init/index.js';
-export {
-  chatParser,
-  InitData,
-  initDataParser,
-  parseInitData,
-  userParser,
-  type Chat,
-  type ChatType,
-  type InitDataParsed,
-  type User,
-} from './init-data/index.js';
-export {
-  Invoice,
-  type InvoiceEvents,
-  type InvoiceEventListener,
-  type InvoiceEventName,
-} from './invoice/index.js';
-export {
-  launchParamsParser,
-  parseLaunchParams,
-  retrieveLaunchData,
-  serializeLaunchParams,
-  type LaunchParams,
-  type LaunchData,
-} from './launch-params/index.js';
-export {
-  MainButton,
-  type MainButtonParams,
-  type MainButtonProps,
-  type MainButtonEvents,
-  type MainButtonEventName,
-  type MainButtonEventListener,
-} from './main-button/index.js';
-export {
-  MiniApp,
-  type MiniAppHeaderColor,
-  type MiniAppEventName,
-  type MiniAppEventListener,
-  type MiniAppEvents,
-  type MiniAppProps,
-} from './mini-app/index.js';
-export { isTMA, isRecord } from './misc/index.js';
-export {
-  getHash,
-  HashNavigator,
-  Navigator,
-  type NavigationEntry,
-  type NavigatorConEntry,
-  type NavigatorOptions,
-  type HashNavigatorOptions,
-  type HashNavigatorEventsMap,
-  type HashNavigatorEventListener,
-  type HashNavigatorEventName,
-} from './navigation/index.js';
-export {
-  boolean,
-  searchParams,
-  string,
-  rgb,
-  array,
-  date,
-  json,
-  number,
-  ParseError,
-  ParseSchemaFieldError,
-} from './parsing/index.js';
-export {
-  Popup,
-  type PopupEventName,
-  type PopupEventListener,
-  type PopupEvents,
-  type OpenPopupOptions,
-  type OpenPopupOptionsButton,
-} from './popup/index.js';
-export {
-  QRScanner,
-  type QRScannerEventListener,
-  type QRScannerEventName,
-  type QRScannerEvents,
-} from './qr-scanner/index.js';
-export {
-  SettingsButton,
-  type SettingsButtonEventName,
-  type SettingsButtonEventListener,
-  type SettingsButtonEvents,
-} from './settings-button/index.js';
-export { supports } from './supports/index.js';
-export {
-  parseThemeParams,
-  requestThemeParams,
-  serializeThemeParams,
-  themeParamsParser,
-  ThemeParams,
-  type ThemeParamsEventListener,
-  type ThemeParamsEventName,
-  type ThemeParamsEvents,
-  type ThemeParamsKey,
-  type ThemeParamsParsed,
-} from './theme-params/index.js';
-export { withTimeout, TimeoutError, isTimeoutError } from './timeout/index.js';
-export type { RequestId, CreateRequestIdFunc } from './types/index.js';
-export { Utils } from './utils/index.js';
-export { compareVersions, type Version } from './version/index.js';
-export {
-  isStableViewportPlatform,
-  requestViewport,
-  Viewport,
-  type RequestViewportResult,
-  type ViewportProps,
-  type ViewportEventName,
-  type ViewportEventListener,
-  type ViewportEvents,
-} from './viewport/index.js';
-export { setTargetOrigin, setDebug } from './globals.js';

package/src/init/catchCustomStyles.ts

@@ -1,17 +0,0 @@
-import { on } from '~/bridge/index.js';
-
-/**
- * Creates style html element which contains styles sent from the Telegram application.
- */
-export function catchCustomStyles(): void {
-  const element = document.createElement('style');
-  element.id = 'telegram-custom-styles';
-  document.head.appendChild(element);
-
-  on('set_custom_style', (html) => {
-    // It is safe to use innerHTML here as long as style tag has a special behavior related
-    // to the specified content. In case, any script will be passed here, it will not be
-    // executed.
-    element.innerHTML = html;
-  });
-}

package/src/init/creators/__tests__/createViewport.ts

@@ -1,96 +0,0 @@
-import { mockSessionStorageGetItem } from 'test-utils';
-import type { SpyInstance } from 'vitest';
-import { afterEach, expect, it, vi } from 'vitest';
-
-import { createWindow } from '../../../../test-utils/createWindow';
-import { requestViewport } from '../../../viewport/requestViewport';
-import { createViewport } from '../createViewport';
-
-vi.mock('../../../viewport/requestViewport', () => {
-  return {
-    requestViewport: vi.fn(),
-  };
-});
-
-type RequestViewport = typeof requestViewport;
-
-const requestViewportMock = requestViewport as unknown as SpyInstance<Parameters<RequestViewport>, ReturnType<RequestViewport>>;
-
-afterEach(() => {
-  vi.restoreAllMocks();
-  requestViewportMock.mockReset();
-});
-
-it('should create Viewport from the data located in the storage if page was reloaded and storage has viewport data', () => {
-  mockSessionStorageGetItem('{"height":992,"isExpanded":false,"stableHeight":992,"width":320}');
-  expect(createViewport(true, 'macos', vi.fn(), false)).toMatchObject({
-    height: 992,
-    isExpanded: false,
-    stableHeight: 992,
-    width: 320,
-  });
-});
-
-it('should return viewport with window data if page was not reloaded or storage is missing required data, and platform has a stable viewport', () => {
-  createWindow({ innerHeight: 1000, innerWidth: 2000 });
-  expect(createViewport(false, 'macos', vi.fn(), false)).toMatchObject({
-    height: 1000,
-    isExpanded: true,
-    stableHeight: 1000,
-    width: 2000,
-  });
-
-  expect(createViewport(true, 'macos', vi.fn(), false)).toMatchObject({
-    height: 1000,
-    isExpanded: true,
-    stableHeight: 1000,
-    width: 2000,
-  });
-});
-
-it('should create Viewport instance from the result of calling requestViewport function if page was not reloaded, platform has no stable viewport and initialization is complete', () => {
-  requestViewportMock.mockImplementation(async () => ({
-    height: 922,
-    isStateStable: false,
-    width: 800,
-    isExpanded: false,
-  }));
-
-  expect(createViewport(false, 'android', vi.fn(), true)).resolves.toMatchObject({
-    height: 922,
-    isExpanded: false,
-    stableHeight: 0,
-    width: 800,
-  });
-
-  requestViewportMock.mockImplementation(async () => ({
-    height: 111,
-    isStateStable: true,
-    width: 222,
-    isExpanded: true,
-  }));
-
-  expect(createViewport(false, 'android', vi.fn(), true)).resolves.toMatchObject({
-    height: 111,
-    isExpanded: true,
-    stableHeight: 111,
-    width: 222,
-  });
-});
-
-it('should return viewport with zeroes if page was reloaded, storage doesnt contain data, platform has no stable viewport and initialization is not complete', () => {
-  requestViewportMock.mockImplementation(async () => ({
-    height: 922,
-    isStateStable: false,
-    width: 800,
-    isExpanded: false,
-  }));
-
-  mockSessionStorageGetItem(null);
-  expect(createViewport(true, 'android', vi.fn(), false)).toMatchObject({
-    height: 0,
-    isExpanded: false,
-    stableHeight: 0,
-    width: 0,
-  });
-});

package/src/init/creators/createBackButton.ts

@@ -1,25 +0,0 @@
-import { BackButton } from '~/back-button/index.js';
-import { getStorageValue, saveStorageValue } from '~/storage.js';
-import type { PostEvent } from '~/bridge/index.js';
-
-/**
- * Creates BackButton instance using last locally saved data also saving each state in
- * the storage.
- * @param isPageReload - was current page reloaded.
- * @param version - platform version.
- * @param postEvent - Bridge postEvent function
- */
-export function createBackButton(
-  isPageReload: boolean,
-  version: string,
-  postEvent: PostEvent,
-): BackButton {
-  const { isVisible = false } = isPageReload ? getStorageValue('back-button') || {} : {};
-  const component = new BackButton(isVisible, version, postEvent);
-
-  component.on('change', () => {
-    saveStorageValue('back-button', { isVisible: component.isVisible });
-  });
-
-  return component;
-}

package/src/init/creators/createClosingBehavior.ts

@@ -1,24 +0,0 @@
-import { ClosingBehavior } from '~/closing-behavior/index.js';
-import { getStorageValue, saveStorageValue } from '~/storage.js';
-import type { PostEvent } from '~/bridge/index.js';
-
-/**
- * Creates ClosingBehaviour instance using last locally saved data also saving each state in
- * the storage.
- * @param isPageReload - was current page reloaded.
- * @param postEvent - Bridge postEvent function
- */
-export function createClosingBehavior(
-  isPageReload: boolean,
-  postEvent: PostEvent,
-): ClosingBehavior {
-  const { isConfirmationNeeded = false } = isPageReload ? getStorageValue('closing-behavior') || {} : {};
-
-  const component = new ClosingBehavior(isConfirmationNeeded, postEvent);
-
-  component.on('change', () => saveStorageValue('closing-behavior', {
-    isConfirmationNeeded: component.isConfirmationNeeded,
-  }));
-
-  return component;
-}

package/src/init/creators/createMainButton.ts

@@ -1,51 +0,0 @@
-import { MainButton } from '~/main-button/index.js';
-import { getStorageValue, saveStorageValue } from '~/storage.js';
-import type { PostEvent } from '~/bridge/index.js';
-import type { RGB } from '~/colors/index.js';
-
-/**
- * Creates MainButton instance using last locally saved data also saving each state in
- * the storage.
- * @param isPageReload - was current page reloaded.
- * @param backgroundColor - background color.
- * @param textColor - text color.
- * @param postEvent - Bridge postEvent function
- */
-export function createMainButton(
-  isPageReload: boolean,
-  backgroundColor: RGB,
-  textColor: RGB,
-  postEvent: PostEvent,
-): MainButton {
-  const {
-    backgroundColor: stateBackgroundColor = backgroundColor,
-    isEnabled = false,
-    isVisible = false,
-    isLoaderVisible = false,
-    textColor: stateTextColor = textColor,
-    text = '',
-  } = isPageReload ? getStorageValue('main-button') || {} : {};
-
-  const component = new MainButton({
-    backgroundColor: stateBackgroundColor,
-    isEnabled,
-    isLoaderVisible,
-    isVisible,
-    postEvent,
-    text,
-    textColor: stateTextColor,
-  });
-
-  const saveState = () => saveStorageValue('main-button', {
-    backgroundColor: component.backgroundColor,
-    isEnabled: component.isEnabled,
-    isLoaderVisible: component.isLoaderVisible,
-    isVisible: component.isVisible,
-    text: component.text,
-    textColor: component.textColor,
-  });
-
-  component.on('change', saveState);
-
-  return component;
-}

package/src/init/creators/createMiniApp.ts

@@ -1,48 +0,0 @@
-import { MiniApp } from '~/mini-app/index.js';
-import { getStorageValue, saveStorageValue } from '~/storage.js';
-import type { PostEvent } from '~/bridge/index.js';
-import type { RGB } from '~/colors/index.js';
-import type { CreateRequestIdFunc } from '~/types/index.js';
-import type { Version } from '~/version/index.js';
-
-/**
- * Creates MiniApp instance using last locally saved data also saving each state in
- * the storage.
- * @param isPageReload - was current page reloaded.
- * @param backgroundColor - web app background color.
- * @param version - platform version.
- * @param botInline - is Mini App launched in inline mode.
- * @param createRequestId - function which generates request identifiers.
- * @param postEvent - Bridge postEvent function
- */
-export function createMiniApp(
-  isPageReload: boolean,
-  backgroundColor: RGB,
-  version: Version,
-  botInline: boolean,
-  createRequestId: CreateRequestIdFunc,
-  postEvent: PostEvent,
-): MiniApp {
-  const {
-    backgroundColor: stateBackgroundColor = backgroundColor,
-    headerColor = 'bg_color',
-  } = isPageReload ? getStorageValue('mini-app') || {} : {};
-
-  const component = new MiniApp({
-    headerColor,
-    backgroundColor: stateBackgroundColor,
-    version,
-    botInline,
-    createRequestId,
-    postEvent,
-  });
-
-  const saveState = () => saveStorageValue('mini-app', {
-    backgroundColor: component.backgroundColor,
-    headerColor: component.headerColor,
-  });
-
-  component.on('change', saveState);
-
-  return component;
-}

package/src/init/creators/createRequestIdGenerator.ts

@@ -1,13 +0,0 @@
-import type { CreateRequestIdFunc } from '~/types/index.js';
-
-/**
- * Creates function which generated request identifiers.
- */
-export function createRequestIdGenerator(): CreateRequestIdFunc {
-  let requestId = 0;
-
-  return () => {
-    requestId += 1;
-    return requestId.toString();
-  };
-}

package/src/init/creators/createSettingsButton.ts

@@ -1,25 +0,0 @@
-import { SettingsButton } from '~/settings-button/index.js';
-import { getStorageValue, saveStorageValue } from '~/storage.js';
-import type { PostEvent } from '~/bridge/index.js';
-
-/**
- * Creates SettingsButton instance using last locally saved data also saving each state in
- * the storage.
- * @param isPageReload - was current page reloaded.
- * @param version - platform version.
- * @param postEvent - Bridge postEvent function
- */
-export function createSettingsButton(
-  isPageReload: boolean,
-  version: string,
-  postEvent: PostEvent,
-): SettingsButton {
-  const { isVisible = false } = isPageReload ? getStorageValue('settings-button') || {} : {};
-  const component = new SettingsButton(isVisible, version, postEvent);
-
-  component.on('change', () => {
-    saveStorageValue('settings-button', { isVisible: component.isVisible });
-  });
-
-  return component;
-}

package/src/init/creators/createThemeParams.ts

@@ -1,11 +0,0 @@
-import { ThemeParams, type ThemeParamsParsed } from '~/theme-params/index.js';
-
-/**
- * Creates synced instance of ThemeParams.
- * @param params - theme parameters.
- */
-export function createThemeParams(params: ThemeParamsParsed): ThemeParams {
-  const themeParams = new ThemeParams(params);
-  themeParams.listen();
-  return themeParams;
-}

package/src/init/creators/createViewport.ts

@@ -1,94 +0,0 @@
-import { getStorageValue, saveStorageValue } from '~/storage.js';
-import {
-  isStableViewportPlatform,
-  requestViewport,
-  Viewport,
-  type ViewportProps,
-} from '~/viewport/index.js';
-import type { PostEvent } from '~/bridge/index.js';
-import type { Platform } from '~/types/index.js';
-
-/**
- * Creates new bound instance of the Viewport component.
- * @param props - properties to create new instance.
- */
-function instantiate(props: ViewportProps): Viewport {
-  const viewport = new Viewport(props);
-
-  // TODO: Should probably use throttle for height.
-  viewport.on('change', () => saveStorageValue('viewport', {
-    height: viewport.height,
-    isExpanded: viewport.isExpanded,
-    stableHeight: viewport.stableHeight,
-    width: viewport.width,
-  }));
-
-  viewport.listen();
-
-  return viewport;
-}
-
-/**
- * Creates Viewport instance using its actual state from the Telegram application.
- * @param isPageReload - was page reloaded.
- * @param platform - platform identifier.
- * @param postEvent - Bridge postEvent function.
- * @param complete - is initialization complete.
- */
-export function createViewport(
-  isPageReload: boolean,
-  platform: Platform,
-  postEvent: PostEvent,
-  complete: boolean,
-): Viewport | Promise<Viewport> {
-  // If page was reloaded, we expect viewport to be restored from the storage.
-  const state = isPageReload ? getStorageValue('viewport') : null;
-  if (state) {
-    return instantiate({ ...state, postEvent });
-  }
-
-  // If platform has a stable viewport, it means we could instantiate Viewport using
-  // the window global object properties.
-  if (isStableViewportPlatform(platform)) {
-    return instantiate({
-      height: window.innerHeight,
-      isExpanded: true,
-      postEvent,
-      stableHeight: window.innerHeight,
-      width: window.innerWidth,
-    });
-  }
-
-  // If initialization is complete, we have to create Viewport instance using its actual
-  // state from the Telegram application.
-  if (complete) {
-    return requestViewport({
-      postEvent,
-      timeout: 5000,
-    })
-      .then(({ height, isStateStable, ...rest }) => instantiate({
-        ...rest,
-        height,
-        stableHeight: isStateStable ? height : 0,
-      }));
-  }
-
-  // Otherwise we have no sources to get viewport properties from. In this case we just
-  // return some "empty" Viewport instance and synchronize it in the background.
-  const viewport = instantiate({
-    width: 0,
-    height: 0,
-    isExpanded: false,
-    postEvent,
-    stableHeight: 0,
-  });
-
-  /* c8 ignore start */
-  viewport.sync({ postEvent, timeout: 5000 }).catch((e) => {
-    // eslint-disable-next-line no-console
-    console.error('Unable to actualize viewport state', e);
-  });
-  /* c8 ignore stop */
-
-  return viewport;
-}

package/src/init/creators/index.ts

@@ -1,8 +0,0 @@
-export * from './createBackButton.js';
-export * from './createClosingBehavior.js';
-export * from './createMainButton.js';
-export * from './createMiniApp.js';
-export * from './createRequestIdGenerator.js';
-export * from './createSettingsButton.js';
-export * from './createThemeParams.js';
-export * from './createViewport.js';

package/src/init/css/index.ts

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

package/src/init/css/processCSSVarsOption.ts

@@ -1,55 +0,0 @@
-import { bindMiniAppCSSVars, bindThemeCSSVars, bindViewportCSSVars } from '~/css/index.js';
-import type { MiniApp } from '~/mini-app/index.js';
-import type { ThemeParams } from '~/theme-params/index.js';
-import type { Viewport } from '~/viewport/index.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/index.ts

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