@tma.js/sdk 1.4.4 → 1.4.6

package/src/storage.ts

@@ -1,69 +0,0 @@
-import type { HeaderColorKey } from '~/bridge/index.js';
-import type { RGB } from '~/colors/index.js';
-
-// fixme: components-related. Should probably rename
-
-/**
- * Describes storage keys and according values.
- */
-interface StorageParams {
-  'back-button': {
-    isVisible: boolean
-  };
-  'closing-behavior': {
-    isConfirmationNeeded: boolean;
-  };
-  'main-button': {
-    backgroundColor: RGB;
-    isEnabled: boolean;
-    isLoaderVisible: boolean;
-    isVisible: boolean;
-    text: string;
-    textColor: RGB;
-  };
-  'settings-button': {
-    isVisible: boolean
-  };
-  viewport: {
-    height: number;
-    isExpanded: boolean;
-    stableHeight: number;
-    width: number;
-  };
-  'mini-app': {
-    backgroundColor: RGB;
-    headerColor: HeaderColorKey | RGB;
-  };
-}
-
-/**
- * Key which could be used to store data in storage.
- */
-type StorageKey = keyof StorageParams;
-
-/**
- * Formats key which could be used during the communication with the storage.
- * @param key - session storage key.
- */
-function formatKey(key: StorageKey): string {
-  return `telegram-mini-apps-${key}`;
-}
-
-/**
- * Saves value in sessionStorage.
- * @param key - storage key.
- * @param value - storage value.
- */
-export function saveStorageValue<K extends StorageKey>(key: K, value: StorageParams[K]): void {
-  sessionStorage.setItem(formatKey(key), JSON.stringify(value));
-}
-
-/**
- * Extracts value from the sessionStorage.
- * @param key - storage key.
- */
-export function getStorageValue<K extends StorageKey>(key: K): StorageParams[K] | null {
-  const value = sessionStorage.getItem(formatKey(key));
-
-  return value ? JSON.parse(value) : null;
-}

package/src/supports/__tests__/supports.ts

@@ -1,123 +0,0 @@
-import { expect, it } from 'vitest';
-
-import type {
-  MiniAppsMethodName,
-  MiniAppsMethodVersionedParams,
-  MiniAppsMethodWithVersionedParams,
-} from '../../bridge';
-import type { Version } from '../../version';
-import { supports } from '../supports';
-
-type HaveCheckSupportMethodTuple = {
-  [M in MiniAppsMethodWithVersionedParams]: [M, MiniAppsMethodVersionedParams<M>]
-}[MiniAppsMethodWithVersionedParams];
-
-/**
- * Increases specified version by amount of updates.
- * @param version - initial version.
- * @param amount - count of bumps.
- */
-function increaseVersion(version: Version, amount: number): string {
-  const match = version.match(/(.+\.)(\d+)$/);
-  if (!match) {
-    throw new Error(`Invalid version: ${version}`);
-  }
-  return `${match[1]}${parseInt(match[2], 10) + amount}`;
-}
-
-const tests: [
-  version: Version | 'any',
-  methods: (MiniAppsMethodName | HaveCheckSupportMethodTuple)[],
-][] = [
-  ['any', [
-    'iframe_ready',
-    'iframe_will_reload',
-    'web_app_close',
-    'web_app_data_send',
-    'web_app_expand',
-    'web_app_open_link',
-    'web_app_ready',
-    'web_app_request_theme',
-    'web_app_request_viewport',
-    'web_app_setup_main_button',
-    'web_app_setup_closing_behavior',
-  ]],
-  ['6.1', [
-    'web_app_open_tg_link',
-    'web_app_open_invoice',
-    'web_app_setup_back_button',
-    'web_app_set_background_color',
-    'web_app_set_header_color',
-    'web_app_trigger_haptic_feedback',
-  ]],
-  ['6.2', [
-    'web_app_open_popup',
-  ]],
-  ['6.4', [
-    'web_app_read_text_from_clipboard',
-    'web_app_close_scan_qr_popup',
-    'web_app_close_scan_qr_popup',
-    ['web_app_open_link', 'try_instant_view'],
-  ]],
-  ['6.7', [
-    'web_app_switch_inline_query',
-  ]],
-  ['6.9', [
-    'web_app_invoke_custom_method',
-    'web_app_request_write_access',
-    'web_app_request_phone',
-    ['web_app_set_header_color', 'color'],
-  ]],
-  ['6.10', [
-    'web_app_setup_settings_button',
-  ]],
-];
-
-tests.forEach(([version, methods]) => {
-  if (version === 'any') {
-    methods.forEach((methodOrTuple) => {
-      if (Array.isArray(methodOrTuple)) {
-        const [method, param] = methodOrTuple;
-        it(`should return true in case, passed method is "${method}", parameter is "${param}" and version is 1`, () => {
-          expect(supports(method, param, '1')).toBe(true);
-        });
-
-        return;
-      }
-
-      const method = methodOrTuple;
-      it(`should return true in case, passed method is "${method}" and version is 1`, () => {
-        expect(supports(method, '1')).toBe(true);
-      });
-    });
-    return;
-  }
-
-  methods.forEach((methodOrTuple) => {
-    if (Array.isArray(methodOrTuple)) {
-      const [method, param] = methodOrTuple;
-
-      it(`should return true in case, passed method is "${method}", parameter is "${param}" and version is ${version} or higher`, () => {
-        expect(supports(method, param, version)).toBe(true);
-        expect(supports(method, param, increaseVersion(version, 1))).toBe(true);
-      });
-
-      it(`should return false in case, passed method is "${method}", parameter is "${param}" and version is lower than ${version}`, () => {
-        expect(supports(method, param, increaseVersion(version, -1))).toBe(false);
-      });
-
-      return;
-    }
-
-    const method = methodOrTuple;
-
-    it(`should return true in case, passed method is "${method}" and version is ${version} or higher`, () => {
-      expect(supports(method, version)).toBe(true);
-      expect(supports(method, increaseVersion(version, 1))).toBe(true);
-    });
-
-    it(`should return false in case, passed method is "${method}" and version is lower than ${version}`, () => {
-      expect(supports(method, increaseVersion(version, -1))).toBe(false);
-    });
-  });
-});

package/src/supports/createSupportsFunc.ts

@@ -1,18 +0,0 @@
-import type { MiniAppsMethodName } from '~/bridge/index.js';
-import type { Version } from '~/version/index.js';
-
-import { supports } from './supports.js';
-import type { SupportsFunc } from './types.js';
-
-/**
- * Returns function, which accepts predefined method name and checks if it is supported
- * via passed schema and version.
- * @param schema - object which contains methods names and TWA method as a dependency.
- * @param version - platform version.
- */
-export function createSupportsFunc<M extends string>(
-  version: Version,
-  schema: Record<M, MiniAppsMethodName>,
-): SupportsFunc<M> {
-  return (method) => supports(schema[method], version);
-}

package/src/supports/createSupportsParamFunc.ts

@@ -1,27 +0,0 @@
-import type { MiniAppsMethodVersionedParams, MiniAppsMethodWithVersionedParams } from '~/bridge/index.js';
-import type { Version } from '~/version/index.js';
-
-import { supports } from './supports.js';
-import type { SupportsFunc } from './types.js';
-
-type HasCheckSupportMethodTuple = {
-  [M in MiniAppsMethodWithVersionedParams]: [M, MiniAppsMethodVersionedParams<M>]
-}[MiniAppsMethodWithVersionedParams];
-
-/**
- * Returns function, which accepts predefined method name and checks if it is supported
- * via passed schema and version.
- * @param schema - object which contains methods names and TWA methods with specified parameter
- * as a dependency.
- * @param version - platform version.
- */
-export function createSupportsParamFunc<P extends string>(
-  version: Version,
-  schema: Record<P, HasCheckSupportMethodTuple>,
-): SupportsFunc<P> {
-  return (method) => {
-    const [tmaMethod, param] = schema[method];
-
-    return supports(tmaMethod, param, version);
-  };
-}

package/src/supports/index.ts

@@ -1,4 +0,0 @@
-export * from './createSupportsFunc.js';
-export * from './createSupportsParamFunc.js';
-export * from './supports.js';
-export * from './types.js';

package/src/supports/supports.ts

@@ -1,84 +0,0 @@
-import {
-  compareVersions,
-  type Version,
-} from '~/version/index.js';
-import type {
-  MiniAppsMethodName,
-  MiniAppsMethodVersionedParams,
-  MiniAppsMethodWithVersionedParams,
-} from '~/bridge/methods/index.js';
-
-/**
- * Returns true if "a" version is less than or equal to "b" version.
- * @param a
- * @param b
- */
-function versionLessOrEqual(a: Version, b: Version): boolean {
-  return compareVersions(a, b) <= 0;
-}
-
-/**
- * Returns true in case, passed parameter in specified method is supported.
- * @param method - method name
- * @param param - method parameter
- * @param inVersion - platform version.
- */
-export function supports<M extends MiniAppsMethodWithVersionedParams>(
-  method: M,
-  param: MiniAppsMethodVersionedParams<M>,
-  inVersion: Version,
-): boolean;
-
-/**
- * Returns true in case, specified method is supported in passed version.
- * @param method - method name.
- * @param inVersion - platform version.
- */
-export function supports(method: MiniAppsMethodName, inVersion: Version): boolean;
-
-export function supports(
-  method: MiniAppsMethodName,
-  paramOrVersion: Version | string,
-  inVersion?: string,
-): boolean {
-  // Method name, parameter, target version.
-  if (typeof inVersion === 'string') {
-    if (method === 'web_app_open_link') {
-      if (paramOrVersion === 'try_instant_view') {
-        return versionLessOrEqual('6.4', inVersion);
-      }
-    }
-
-    if (method === 'web_app_set_header_color') {
-      if (paramOrVersion === 'color') {
-        return versionLessOrEqual('6.9', inVersion);
-      }
-    }
-  }
-
-  switch (method) {
-    case 'web_app_open_tg_link':
-    case 'web_app_open_invoice':
-    case 'web_app_setup_back_button':
-    case 'web_app_set_background_color':
-    case 'web_app_set_header_color':
-    case 'web_app_trigger_haptic_feedback':
-      return versionLessOrEqual('6.1', paramOrVersion);
-    case 'web_app_open_popup':
-      return versionLessOrEqual('6.2', paramOrVersion);
-    case 'web_app_close_scan_qr_popup':
-    case 'web_app_open_scan_qr_popup':
-    case 'web_app_read_text_from_clipboard':
-      return versionLessOrEqual('6.4', paramOrVersion);
-    case 'web_app_switch_inline_query':
-      return versionLessOrEqual('6.7', paramOrVersion);
-    case 'web_app_invoke_custom_method':
-    case 'web_app_request_write_access':
-    case 'web_app_request_phone':
-      return versionLessOrEqual('6.9', paramOrVersion);
-    case 'web_app_setup_settings_button':
-      return versionLessOrEqual('6.10', paramOrVersion);
-    default:
-      return true;
-  }
-}

package/src/supports/types.ts

@@ -1 +0,0 @@
-export type SupportsFunc<M extends string> = (method: M) => boolean;

package/src/theme-params/ThemeParams.ts

@@ -1,131 +0,0 @@
-import { on } from '~/bridge/index.js';
-import { isColorDark, type RGB } from '~/colors/index.js';
-import { EventEmitter } from '~/event-emitter/index.js';
-import { State } from '~/state/index.js';
-
-import { parseThemeParams } from './parseThemeParams.js';
-import type {
-  ThemeParamsEvents,
-  ThemeParamsParsed,
-  ThemeParamsState,
-} from './types.js';
-
-export class ThemeParams {
-  private readonly ee = new EventEmitter<ThemeParamsEvents>();
-
-  private readonly state: State<ThemeParamsState>;
-
-  constructor(params: ThemeParamsParsed) {
-    this.state = new State(params, this.ee);
-  }
-
-  /**
-   * @since v6.10
-   */
-  get accentTextColor(): RGB | undefined {
-    return this.get('accentTextColor');
-  }
-
-  get backgroundColor(): RGB | undefined {
-    return this.get('backgroundColor');
-  }
-
-  get buttonColor(): RGB | undefined {
-    return this.get('buttonColor');
-  }
-
-  get buttonTextColor(): RGB | undefined {
-    return this.get('buttonTextColor');
-  }
-
-  get destructiveTextColor(): RGB | undefined {
-    return this.get('destructiveTextColor');
-  }
-
-  /**
-   * Retrieves palette color value by its name.
-   * @param key - palette key name.
-   */
-  get(key: Extract<keyof ThemeParamsParsed, string>): RGB | undefined {
-    return this.state.get(key);
-  }
-
-  /**
-   * Returns the copy of the internal state of the current component instance.
-   */
-  getState(): ThemeParamsParsed {
-    return this.state.clone();
-  }
-
-  /**
-   * @since v6.10
-   */
-  get headerBackgroundColor(): RGB | undefined {
-    return this.get('headerBackgroundColor');
-  }
-
-  get hintColor(): RGB | undefined {
-    return this.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 || isColorDark(this.backgroundColor);
-  }
-
-  get linkColor(): RGB | undefined {
-    return this.get('linkColor');
-  }
-
-  /**
-   * Adds new event listener.
-   */
-  on = this.ee.on.bind(this.ee);
-
-  /**
-   * Removes event listener.
-   */
-  off = this.ee.off.bind(this.ee);
-
-  get secondaryBackgroundColor(): RGB | undefined {
-    return this.get('secondaryBackgroundColor');
-  }
-
-  /**
-   * @since v6.10
-   */
-  get sectionBackgroundColor(): RGB | undefined {
-    return this.get('sectionBackgroundColor');
-  }
-
-  /**
-   * @since v6.10
-   */
-  get sectionHeaderTextColor(): RGB | undefined {
-    return this.get('sectionHeaderTextColor');
-  }
-
-  /**
-   * Starts listening to theme changes and applies them.
-   * @returns Function to stop listening.
-   */
-  listen() {
-    return on('theme_changed', (event) => {
-      this.state.set(parseThemeParams(event.theme_params));
-    });
-  }
-
-  /**
-   * @since v6.10
-   */
-  get subtitleTextColor(): RGB | undefined {
-    return this.get('subtitleTextColor');
-  }
-
-  get textColor(): RGB | undefined {
-    return this.get('textColor');
-  }
-}

package/src/theme-params/__tests__/keys.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { keyToExternal, keyToLocal } from '../keys';
-
-describe('keyToLocal', () => {
-  it('should replace "^bg" and "_bg" with "background" and "_background". Then replace _[a-z] with [A-Z]', () => {
-    expect(keyToLocal('bg_color')).toBe('backgroundColor');
-    expect(keyToLocal('secondary_bg_color')).toBe('secondaryBackgroundColor');
-    expect(keyToLocal('text_color')).toBe('textColor');
-  });
-});
-
-describe('keyToExternal', () => {
-  it('should replace [A-Z] with _[a-z]. Then replace "background" and "_background" with "^bg" and "_bg"', () => {
-    expect(keyToExternal('backgroundColor')).toBe('bg_color');
-    expect(keyToExternal('secondaryBackgroundColor')).toBe('secondary_bg_color');
-    expect(keyToExternal('textColor')).toBe('text_color');
-  });
-});

package/src/theme-params/__tests__/parseThemeParams.ts

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { parseThemeParams } from '../parseThemeParams';
-
-[
-  ['accent_text_color', 'accentTextColor'],
-  ['bg_color', 'backgroundColor'],
-  ['button_color', 'buttonColor'],
-  ['button_text_color', 'buttonTextColor'],
-  ['destructive_text_color', 'destructiveTextColor'],
-  ['header_bg_color', 'headerBackgroundColor'],
-  ['hint_color', 'hintColor'],
-  ['link_color', 'linkColor'],
-  ['secondary_bg_color', 'secondaryBackgroundColor'],
-  ['section_header_text_color', 'sectionHeaderTextColor'],
-  ['section_bg_color', 'sectionBackgroundColor'],
-  ['subtitle_text_color', 'subtitleTextColor'],
-  ['text_color', 'textColor'],
-].forEach(([from, to]) => {
-  describe(to, () => {
-    it(`should throw if "${from}" property contains not a string in format "#RRGGBB"`, () => {
-      expect(() => parseThemeParams({ [from]: 999 })).toThrow();
-    });
-
-    it(`should map to "${to}" property parsing it as string in "#RRGGBB" format`, () => {
-      expect(parseThemeParams({ [from]: '#aabbcc' })).toStrictEqual({ [to]: '#aabbcc' });
-    });
-  });
-});

package/src/theme-params/__tests__/serializeThemeParams.ts

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { serializeThemeParams } from '../serializeThemeParams';
-
-[
-  ['accent_text_color', 'accentTextColor'],
-  ['bg_color', 'backgroundColor'],
-  ['button_color', 'buttonColor'],
-  ['button_text_color', 'buttonTextColor'],
-  ['destructive_text_color', 'destructiveTextColor'],
-  ['header_bg_color', 'headerBackgroundColor'],
-  ['hint_color', 'hintColor'],
-  ['link_color', 'linkColor'],
-  ['secondary_bg_color', 'secondaryBackgroundColor'],
-  ['section_header_text_color', 'sectionHeaderTextColor'],
-  ['section_bg_color', 'sectionBackgroundColor'],
-  ['subtitle_text_color', 'subtitleTextColor'],
-  ['text_color', 'textColor'],
-].forEach(([to, from]) => {
-  describe(from, () => {
-    it(`should omit the "${to}" property in case this property is missing`, () => {
-      expect(serializeThemeParams({})).not.toMatch(`"${to}"`);
-    });
-
-    it(`should map this property to "${to}" property`, () => {
-      expect(serializeThemeParams({ [from]: '#aabbcc' })).toBe(`{"${to}":"#aabbcc"}`);
-    });
-  });
-});

package/src/theme-params/__tests__/themeParamsParser.ts

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { themeParamsParser } from '../themeParamsParser';
-
-[
-  ['accent_text_color', 'accentTextColor'],
-  ['bg_color', 'backgroundColor'],
-  ['button_color', 'buttonColor'],
-  ['button_text_color', 'buttonTextColor'],
-  ['destructive_text_color', 'destructiveTextColor'],
-  ['header_bg_color', 'headerBackgroundColor'],
-  ['hint_color', 'hintColor'],
-  ['link_color', 'linkColor'],
-  ['secondary_bg_color', 'secondaryBackgroundColor'],
-  ['section_header_text_color', 'sectionHeaderTextColor'],
-  ['section_bg_color', 'sectionBackgroundColor'],
-  ['subtitle_text_color', 'subtitleTextColor'],
-  ['text_color', 'textColor'],
-].forEach(([from, to]) => {
-  describe(to, () => {
-    it(`should throw if "${from}" property contains not a string in format "#RRGGBB"`, () => {
-      expect(() => themeParamsParser().parse({ [from]: 999 })).toThrow();
-    });
-
-    it(`should map to "${to}" property parsing it as string in "#RRGGBB" format`, () => {
-      expect(themeParamsParser().parse({ [from]: '#aabbcc' })).toStrictEqual({ [to]: '#aabbcc' });
-    });
-  });
-});

package/src/theme-params/index.ts

@@ -1,6 +0,0 @@
-export * from './parseThemeParams.js';
-export * from './requestThemeParams.js';
-export * from './serializeThemeParams.js';
-export * from './ThemeParams.js';
-export * from './themeParamsParser.js';
-export * from './types.js';

package/src/theme-params/keys.ts

@@ -1,24 +0,0 @@
-/**
- * Converts palette key from Telegram application to representation used by the package.
- * @param key - palette key.
- */
-export function keyToLocal(key: string): string {
-  return key
-    // Replace all "background" strings to "bg".
-    .replace(/(^|_)bg/, (_, prefix) => `${prefix}background`)
-    // Convert camel case to snake case.
-    .replace(/_([a-z])/g, (_match, letter) => letter.toUpperCase());
-}
-
-/**
- * Converts palette key from local representation to representation sent from the Telegram
- * application.
- * @param key - palette key.
- */
-export function keyToExternal(key: string): string {
-  return key
-    // Convert camel case to snake case.
-    .replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`)
-    // Replace all "background" strings to "bg".
-    .replace(/(^|_)background/, (_, prefix) => `${prefix}bg`);
-}

package/src/theme-params/parseThemeParams.ts

@@ -1,10 +0,0 @@
-import { themeParamsParser } from './themeParamsParser.js';
-import type { ThemeParamsParsed } from './types.js';
-
-/**
- * Parses incoming value as theme parameters.
- * @param value - value to parse.
- */
-export function parseThemeParams(value: unknown): ThemeParamsParsed {
-  return themeParamsParser().parse(value);
-}

package/src/theme-params/requestThemeParams.ts

@@ -1,13 +0,0 @@
-import { request, type RequestOptions } from '~/bridge/index.js';
-
-import { parseThemeParams } from './parseThemeParams.js';
-import type { ThemeParamsParsed } from './types.js';
-
-/**
- * Requests current theme parameters from the Telegram application.
- * @param options - request options.
- */
-export function requestThemeParams(options: RequestOptions = {}): Promise<ThemeParamsParsed> {
-  return request('web_app_request_theme', 'theme_changed', options)
-    .then(parseThemeParams);
-}

package/src/theme-params/serializeThemeParams.ts

@@ -1,20 +0,0 @@
-import type { RGB } from '~/colors/index.js';
-
-import { keyToExternal } from './keys.js';
-import type { ThemeParamsParsed } from './types.js';
-
-/**
- * Serializes theme parameters to representation sent from the Telegram application.
- */
-export function serializeThemeParams(themeParams: ThemeParamsParsed): string {
-  return JSON.stringify(
-    Object
-      .entries(themeParams)
-      .reduce<Record<string, RGB>>((acc, [key, value]) => {
-      if (value) {
-        acc[keyToExternal(key)] = value;
-      }
-      return acc;
-    }, {}),
-  );
-}

package/src/theme-params/themeParamsParser.ts

@@ -1,22 +0,0 @@
-import {
-  createValueParserGenerator,
-  rgb,
-  toRecord,
-} from '~/parsing/index.js';
-
-import { keyToLocal } from './keys.js';
-import type { ThemeParamsParsed } from './types.js';
-
-export const themeParamsParser = createValueParserGenerator<ThemeParamsParsed>(
-  (value) => {
-    const rgbOptional = rgb().optional();
-
-    return Object
-      .entries(toRecord(value))
-      .reduce<ThemeParamsParsed>((acc, [k, v]) => {
-        acc[keyToLocal(k)] = rgbOptional.parse(v);
-        return acc;
-      }, {});
-  },
-  'ThemeParams',
-);