@tma.js/sdk 0.13.2 → 1.0.0

package/src/components/InitData/InitData.ts

@@ -1,139 +0,0 @@
-import type { HasUndefined, If } from '@tma.js/util-types';
-import type {
-  Chat,
-  ChatType,
-  InitData as InitDataType,
-  User,
-} from '@tma.js/init-data';
-
-import { State } from '../../state/index.js';
-
-type InitDataState = {
-  [K in keyof InitDataType]-?: 'canSendAfter' extends K
-    ? Date | null
-    : If<
-      HasUndefined<InitDataType[K]>,
-      Exclude<InitDataType[K], undefined> | null,
-      InitDataType[K]
-    >;
-};
-
-/**
- * Class which is responsible for displaying Mini Apps init data.
- */
-export class InitData {
-  private readonly state: State<InitDataState>;
-
-  constructor(
-    authDate: Date,
-    hash: string,
-    options: Omit<InitDataType, 'authDate' | 'hash'> = {},
-  ) {
-    const {
-      chat = null,
-      canSendAfter = null,
-      chatType = null,
-      chatInstance = null,
-      user = null,
-      queryId = null,
-      receiver = null,
-      startParam = null,
-    } = options;
-    this.state = new State({
-      authDate,
-      canSendAfter: canSendAfter === null
-        ? null
-        : new Date(authDate.getTime() + canSendAfter * 1000),
-      chat,
-      chatType,
-      chatInstance,
-      user,
-      queryId,
-      receiver,
-      startParam,
-      hash,
-    });
-  }
-
-  /**
-   * Init data generation date.
-   */
-  get authDate(): Date {
-    return this.state.get('authDate');
-  }
-
-  /**
-   * Date after which a message can be sent via the
-   * [answerWebAppQuery](https://core.telegram.org/bots/api#answerwebappquery) method.
-   */
-  get canSendAfter(): Date | null {
-    return this.state.get('canSendAfter');
-  }
-
-  /**
-   * An object containing data about the chat where the bot was launched via the attachment
-   * menu. Returned for supergroups, channels and group chats – only for Mini Apps launched via
-   * the attachment menu.
-   */
-  get chat(): Chat | null {
-    return this.state.get('chat');
-  }
-
-  /**
-   * The type of chat from which Mini App was opened.
-   */
-  get chatType(): ChatType | null {
-    return this.state.get('chatType');
-  }
-
-  /**
-   * A global identifier indicating the chat from which Mini App was opened. Returned only for
-   * applications opened by direct link.
-   */
-  get chatInstance(): string | null {
-    return this.state.get('chatInstance');
-  }
-
-  /**
-   * A hash of all passed parameters, which the bot server can use to
-   * check their validity.
-   * @see https://core.telegram.org/bots/webapps#validating-data-received-via-the-web-app
-   */
-  get hash(): string {
-    return this.state.get('hash');
-  }
-
-  /**
-   * A unique identifier for the Mini App session, required for sending
-   * messages via the `answerWebAppQuery` method.
-   * @see https://core.telegram.org/bots/api#answerwebappquery
-   */
-  get queryId(): string | null {
-    return this.state.get('queryId');
-  }
-
-  /**
-   * An object containing data about the chat partner of the current
-   * user in the chat where the bot was launched via the attachment menu.
-   * Returned only for private chats and only for Mini Apps launched
-   * via the attachment menu.
-   */
-  get receiver(): User | null {
-    return this.state.get('receiver');
-  }
-
-  /**
-   * The value of the `startattach` parameter, passed via link. Only
-   * returned for Mini Apps when launched from the attachment menu via link.
-   */
-  get startParam(): string | null {
-    return this.state.get('startParam');
-  }
-
-  /**
-   * An object containing data about the current user.
-   */
-  get user(): User | null {
-    return this.state.get('user');
-  }
-}

package/src/components/InitData/index.ts

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

package/src/components/MainButton/MainButton.ts

@@ -1,242 +0,0 @@
-import { EventEmitter } from '@tma.js/event-emitter';
-import { on, off, postEvent as defaultPostEvent, type PostEvent } from '@tma.js/bridge';
-
-import type { RGB } from '@tma.js/colors';
-
-import { State } from '../../state/index.js';
-
-import type { MainButtonEventListener, MainButtonEvents, MainButtonState } from './types.js';
-
-/**
- * Controls the main button, which is displayed at the bottom
- * of the Mini App in the Telegram interface.
- */
-export class MainButton {
-  private readonly ee = new EventEmitter<MainButtonEvents>();
-
-  private readonly state: State<MainButtonState>;
-
-  constructor(
-    backgroundColor: RGB,
-    isEnabled: boolean,
-    isVisible: boolean,
-    isProgressVisible: boolean,
-    text: string,
-    textColor: RGB,
-    private readonly postEvent: PostEvent = defaultPostEvent,
-  ) {
-    this.state = new State({
-      backgroundColor,
-      isEnabled,
-      isVisible,
-      isProgressVisible,
-      text,
-      textColor,
-    }, this.ee);
-  }
-
-  private set isEnabled(value: boolean) {
-    this.state.set('isEnabled', value);
-    this.commit();
-  }
-
-  /**
-   * Returns true in case, MainButton is currently enabled.
-   */
-  get isEnabled(): boolean {
-    return this.state.get('isEnabled');
-  }
-
-  private set isProgressVisible(value: boolean) {
-    this.state.set('isProgressVisible', value);
-    this.commit();
-  }
-
-  /**
-   * Returns true in case, MainButton loading progress is currently visible.
-   */
-  get isProgressVisible(): boolean {
-    return this.state.get('isProgressVisible');
-  }
-
-  private set isVisible(value: boolean) {
-    this.state.set('isVisible', value);
-    this.commit();
-  }
-
-  /**
-   * Returns true in case, MainButton is currently visible.
-   */
-  get isVisible(): boolean {
-    return this.state.get('isVisible');
-  }
-
-  /**
-   * Sends current local button state to Telegram application.
-   */
-  private commit(): void {
-    // We should not commit changes until payload is correct. We could
-    // have some invalid values in case, button instance was created
-    // with empty values. Otherwise, an unexpected behaviour could be received.
-    if (this.text === '') {
-      return;
-    }
-
-    this.postEvent('web_app_setup_main_button', {
-      is_visible: this.isVisible,
-      is_active: this.isEnabled,
-      is_progress_visible: this.isProgressVisible,
-      text: this.text,
-      color: this.backgroundColor,
-      text_color: this.textColor,
-    });
-  }
-
-  /**
-   * Returns current main button background color.
-   */
-  get backgroundColor(): RGB {
-    return this.state.get('backgroundColor');
-  }
-
-  /**
-   * Returns current main button text.
-   */
-  get text(): string {
-    return this.state.get('text');
-  }
-
-  /**
-   * Returns current main button text color.
-   */
-  get textColor(): RGB {
-    return this.state.get('textColor');
-  }
-
-  /**
-   * Disables button. Returns current button instance for chaining.
-   */
-  disable(): this {
-    // FIXME: This method does not work on Android. Event "main_button_pressed"
-    //  keeps getting received even in case, button is disabled.
-    //  Issue: https://github.com/Telegram-Mini-Apps/documentation/issues/1
-    this.isEnabled = false;
-    return this;
-  }
-
-  /**
-   * Enables button. Returns current button instance for chaining.
-   */
-  enable(): this {
-    this.isEnabled = true;
-    return this;
-  }
-
-  /**
-   * Hides button. Returns current button instance for chaining.
-   */
-  hide(): this {
-    this.isVisible = false;
-    return this;
-  }
-
-  /**
-   * Hides button progress. Returns current button instance for chaining.
-   */
-  hideProgress(): this {
-    this.isProgressVisible = false;
-    return this;
-  }
-
-  /**
-   * Adds new event listener.
-   * FIXME: Event 'main_button_pressed' is still being received on Android
-   *  even if the main button is disabled.
-   *  Issue: https://github.com/Telegram-Mini-Apps/tma.js/issues/3
-   * @param event - event name.
-   * @param listener - event listener.
-   */
-  on: typeof this.ee.on = (event, listener) => (
-    event === 'click'
-      ? on('main_button_pressed', listener as MainButtonEventListener<'click'>)
-      : this.ee.on(event, listener)
-  );
-
-  /**
-   * Removes event listener.
-   * @param event - event name.
-   * @param listener - event listener.
-   */
-  off: typeof this.ee.off = (event, listener) => {
-    if (event === 'click') {
-      return off('main_button_pressed', listener as MainButtonEventListener<'click'>);
-    }
-    this.ee.off(event, listener);
-  };
-
-  /**
-   * Shows the button. Note that opening the Mini App from the attachment
-   * menu hides the main button until the user interacts with the Mini App
-   * interface.
-   *
-   * Returns current button instance for chaining.
-   */
-  show(): this {
-    this.isVisible = true;
-    return this;
-  }
-
-  /**
-   * A method to show a loading indicator on the button.
-   * It is recommended to display loading progress if the action tied to the
-   * button may take a long time.
-   *
-   * Returns current button instance for chaining.
-   */
-  showProgress(): this {
-    this.isProgressVisible = true;
-    return this;
-  }
-
-  /**
-   * Sets new main button text. Returns current button instance for chaining.
-   * Minimal length for text is 1 symbol, and maximum is 64 symbols.
-   *
-   * Returns current button instance for chaining.
-   * @param value - new text.
-   */
-  setText(value: string): this {
-    this.state.set('text', value);
-    this.commit();
-
-    return this;
-  }
-
-  /**
-   * Sets new main button text color. Returns current button instance for
-   * chaining.
-   *
-   * Returns current button instance for chaining.
-   * @param value - new text color.
-   */
-  setTextColor(value: RGB): this {
-    this.state.set('textColor', value);
-    this.commit();
-
-    return this;
-  }
-
-  /**
-   * Updates current button color. Returns current button instance for
-   * chaining.
-   *
-   * Returns current button instance for chaining.
-   * @param value - color to set.
-   */
-  setBackgroundColor(value: RGB): this {
-    this.state.set('backgroundColor', value);
-    this.commit();
-
-    return this;
-  }
-}

package/src/components/MainButton/index.ts

@@ -1,2 +0,0 @@
-export * from './MainButton.js';
-export type { MainButtonEvents, MainButtonEventListener, MainButtonEventName } from './types.js';

package/src/components/MainButton/types.ts

@@ -1,20 +0,0 @@
-import type { RGB } from '@tma.js/colors';
-
-import type { StateEvents } from '../../state/index.js';
-
-export interface MainButtonState {
-  backgroundColor: RGB;
-  isEnabled: boolean;
-  isVisible: boolean;
-  isProgressVisible: boolean;
-  text: string;
-  textColor: RGB;
-}
-
-export interface MainButtonEvents extends StateEvents<MainButtonState> {
-  click: () => void;
-}
-
-export type MainButtonEventName = keyof MainButtonEvents;
-
-export type MainButtonEventListener<E extends MainButtonEventName> = MainButtonEvents[E];

package/src/components/Popup/index.ts

@@ -1,8 +0,0 @@
-export * from './Popup.js';
-export type {
-  PopupParams,
-  PopupEvents,
-  PopupEventListener,
-  PopupEventName,
-  PopupButton,
-} from './types.js';

package/src/components/QRScanner/index.ts

@@ -1,2 +0,0 @@
-export * from './QRScanner.js';
-export type { QRScannerEvents, QRScannerEventName, QRScannerEventListener } from './types.js';

package/src/components/ThemeParams/ThemeParams.ts

@@ -1,166 +0,0 @@
-import { EventEmitter } from '@tma.js/event-emitter';
-import { parse, type ThemeParams as ThemeParamsType } from '@tma.js/theme-params';
-import { on, request, type RequestOptions } from '@tma.js/bridge';
-import { isColorDark } from '@tma.js/colors';
-
-import type { RGB } from '@tma.js/colors';
-
-import { State } from '../../state/index.js';
-
-import type { ThemeParamsEvents, ThemeParamsState } from './types.js';
-
-function prepareThemeParams(value: ThemeParamsType): ThemeParamsState {
-  const {
-    accentTextColor = null,
-    backgroundColor = null,
-    buttonColor = null,
-    buttonTextColor = null,
-    destructiveTextColor = null,
-    headerBackgroundColor = null,
-    hintColor = null,
-    linkColor = null,
-    secondaryBackgroundColor = null,
-    sectionBackgroundColor = null,
-    sectionHeaderTextColor = null,
-    subtitleTextColor = null,
-    textColor = null,
-  } = value;
-
-  return {
-    accentTextColor,
-    backgroundColor,
-    buttonColor,
-    buttonTextColor,
-    destructiveTextColor,
-    headerBackgroundColor,
-    hintColor,
-    linkColor,
-    secondaryBackgroundColor,
-    sectionBackgroundColor,
-    sectionHeaderTextColor,
-    subtitleTextColor,
-    textColor,
-  };
-}
-
-/**
- * Contains information about currently used theme by application.
- * @see https://core.telegram.org/bots/webapps#themeparams
- */
-export class ThemeParams {
-  /**
-   * Requests fresh information about current theme.
-   * FIXME: Be careful using this function in desktop version of Telegram as
-   *  long as method web_app_request_theme does not work on `macos` platform.
-   * @param options - method options.
-   */
-  static async request(options: RequestOptions = {}): Promise<ThemeParamsType> {
-    const { timeout = 1000, ...restOptions } = options;
-    const result = await request('web_app_request_theme', 'theme_changed', {
-      ...restOptions,
-      timeout,
-    });
-
-    return parse(result.theme_params);
-  }
-
-  /**
-   * Synchronizes specified instance of ThemeParams with the actual value in the native
-   * application.
-   * @param themeParams - ThemeParams instance.
-   */
-  static sync(themeParams: ThemeParams): void {
-    on('theme_changed', (event) => {
-      themeParams.state.set(prepareThemeParams(parse(event.theme_params)));
-    });
-  }
-
-  /**
-   * Returns instance of ThemeParams which is synchronized with external
-   * environment.
-   * @param options - method options.
-   */
-  static async synced(options?: RequestOptions): Promise<ThemeParams> {
-    const params = await this.request(options);
-    const tp = new ThemeParams(params);
-
-    this.sync(tp);
-
-    return tp;
-  }
-
-  private readonly ee = new EventEmitter<ThemeParamsEvents>();
-
-  private readonly state: State<ThemeParamsState>;
-
-  constructor(params: ThemeParamsType) {
-    this.state = new State(prepareThemeParams(params), this.ee);
-  }
-
-  /**
-   * Returns background color.
-   */
-  get backgroundColor(): RGB | null {
-    return this.state.get('backgroundColor');
-  }
-
-  /**
-   * Returns button color.
-   */
-  get buttonColor(): RGB | null {
-    return this.state.get('buttonColor');
-  }
-
-  /**
-   * Returns button text color.
-   */
-  get buttonTextColor(): RGB | null {
-    return this.state.get('buttonTextColor');
-  }
-
-  /**
-   * Returns hint color.
-   */
-  get hintColor(): RGB | null {
-    return this.state.get('hintColor');
-  }
-
-  /**
-   * Returns true in case, current color scheme is recognized as dark. This
-   * value is calculated according to theme background color.
-   */
-  get isDark(): boolean {
-    return this.backgroundColor === null || isColorDark(this.backgroundColor);
-  }
-
-  /**
-   * Returns current link color.
-   */
-  get linkColor(): RGB | null {
-    return this.state.get('linkColor');
-  }
-
-  /**
-   * Adds new event listener.
-   */
-  on = this.ee.on.bind(this.ee);
-
-  /**
-   * Removes event listener.
-   */
-  off = this.ee.off.bind(this.ee);
-
-  /**
-   * Returns secondary background color.
-   */
-  get secondaryBackgroundColor(): RGB | null {
-    return this.state.get('secondaryBackgroundColor');
-  }
-
-  /**
-   * Returns text color.
-   */
-  get textColor(): RGB | null {
-    return this.state.get('textColor');
-  }
-}

package/src/components/ThemeParams/index.ts

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

package/src/components/ThemeParams/types.ts

@@ -1,18 +0,0 @@
-import type { HasUndefined, If } from '@tma.js/util-types';
-import type { ThemeParams } from '@tma.js/theme-params';
-
-import type { StateEvents } from '../../state/index.js';
-
-export type ThemeParamsState = {
-  [K in keyof ThemeParams]-?: If<
-    HasUndefined<ThemeParams[K]>,
-    Exclude<ThemeParams[K], undefined> | null,
-    ThemeParams[K]
-  >;
-};
-
-export type ThemeParamsEvents = StateEvents<ThemeParamsState>;
-
-export type ThemeParamsEventName = keyof ThemeParamsEvents;
-
-export type ThemeParamsEventListener<E extends ThemeParamsEventName> = ThemeParamsEvents[E];

package/src/components/Viewport/index.ts

@@ -1,2 +0,0 @@
-export * from './Viewport.js';
-export type { ViewportEvents, ViewportEventListener, ViewportEventName } from './types.js';