@tma.js/sdk 1.4.4 → 1.4.7

package/src/colors/__tests__/toRGB.ts

@@ -1,23 +0,0 @@
-import { expect, it } from 'vitest';
-
-import { toRGB } from '../toRGB';
-
-it('should return same value in case, full version of RGB is passed', () => {
-  expect(toRGB('#ffffff')).toBe('#ffffff');
-});
-
-it('should return full RGB value in case, its short presentation is passed', () => {
-  expect(toRGB('#abc')).toBe('#aabbcc');
-});
-
-it('should return RGB representation of rgb(*,*,*) pattern', () => {
-  expect(toRGB('rgb(6,56,11)')).toBe('#06380b');
-});
-
-it('should return RGB representation of rgba(*,*,*) pattern', () => {
-  expect(toRGB('rgba(6,56,11,22)')).toBe('#06380b');
-});
-
-it('should throw an error in other cases', () => {
-  expect(() => toRGB('abc')).toThrow();
-});

package/src/colors/index.ts

@@ -1,5 +0,0 @@
-export * from './isColorDark.js';
-export * from './isRGB.js';
-export * from './isRGBShort.js';
-export * from './toRGB.js';
-export * from './types.js';

package/src/colors/isColorDark.ts

@@ -1,22 +0,0 @@
-import { toRGB } from './toRGB.js';
-
-/**
- * Returns true in case, the color is recognized as dark.
- * @param color - color in any format acceptable by toRGB function.
- * @see toRGB
- */
-export function isColorDark(color: string): boolean {
-  // Convert color to RGB.
-  const rgb = toRGB(color);
-
-  // Real formula: hsp = Math.sqrt(0.299 * r * r + 0.587 * g * g + 0.114 * b * b)
-  // See: https://stackoverflow.com/a/596243
-  const hsp = Math.sqrt(
-    [0.299, 0.587, 0.114].reduce<number>((acc, modifier, idx) => {
-      // Extract part of #RRGGBB pattern and convert it to DEC.
-      const dec = parseInt(rgb.slice(1 + idx * 2, 1 + (idx + 1) * 2), 16);
-      return acc + dec * dec * modifier;
-    }, 0),
-  );
-  return hsp < 120;
-}

package/src/colors/isRGB.ts

@@ -1,9 +0,0 @@
-import type { RGB } from './types.js';
-
-/**
- * Returns true in case, passed value has #RRGGBB format.
- * @param value - value to check.
- */
-export function isRGB(value: string): value is RGB {
-  return /^#[\da-f]{6}$/i.test(value);
-}

package/src/colors/isRGBShort.ts

@@ -1,9 +0,0 @@
-import type { RGBShort } from './types.js';
-
-/**
- * Returns true in case, passed value has #RGB format.
- * @param value - value to check.
- */
-export function isRGBShort(value: string): value is RGBShort {
-  return /^#[\da-f]{3}$/i.test(value);
-}

package/src/colors/toRGB.ts

@@ -1,49 +0,0 @@
-import { isRGB } from './isRGB.js';
-import { isRGBShort } from './isRGBShort.js';
-import type { RGB } from './types.js';
-
-/**
- * Converts passed value to #RRGGBB format. Accepts following color formats:
- * - `#RGB`
- * - `#RRGGBB`
- * - `rgb(1,2,3)`
- * - `rgba(1,2,3,4)`
- * @param value - value to convert.
- * @throws {Error} Passed value does not satisfy any of known RGB formats.
- */
-export function toRGB(value: string): RGB {
-  // Remove all spaces.
-  const clean = value.replace(/\s/g, '').toLowerCase();
-
-  // Value already has required format.
-  if (isRGB(clean)) {
-    return clean;
-  }
-
-  // Convert from #RGB.
-  if (isRGBShort(clean)) {
-    let color = '#';
-
-    for (let i = 0; i < 3; i += 1) {
-      color += clean[1 + i].repeat(2);
-    }
-    return color as RGB;
-  }
-
-  // Example valid values: rgb(0,3,10) rgba(32,114,8,0)
-  const match = clean.match(/^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/)
-    || clean.match(/^rgba\((\d{1,3}),(\d{1,3}),(\d{1,3}),\d{1,3}\)$/);
-
-  // In case, this didn't work as well, we can't extract RGB color from passed
-  // text.
-  if (match === null) {
-    throw new Error(`Value "${value}" does not satisfy any of known RGB formats.`);
-  }
-
-  // Otherwise, take R, G and B components, convert to hex and create #RRGGBB
-  // string.
-  return match.slice(1).reduce((acc, component) => {
-    const formatted = parseInt(component, 10).toString(16);
-    return acc + (formatted.length === 1 ? '0' : '') + formatted;
-  }, '#') as RGB;
-}

package/src/colors/types.ts

@@ -1,9 +0,0 @@
-/**
- * Color in format #RGB.
- */
-export type RGBShort = `#${string}`;
-
-/**
- * Color in format #RRGGBB.
- */
-export type RGB = `#${string}`;

package/src/css/__tests__/bindMiniAppCSSVars.ts

@@ -1,175 +0,0 @@
-import { expect, vi, it, SpyInstance, afterEach, beforeAll, describe } from 'vitest';
-import { ThemeParams } from '../../theme-params';
-import { dispatchWindowMessageEvent } from '../../../test-utils/dispatchWindowMessageEvent';
-import { bindMiniAppCSSVars } from '../bindMiniAppCSSVars';
-import { MiniApp } from '../../mini-app';
-
-let setCSSPropertySpy: SpyInstance<[string, string, string?], void>;
-
-beforeAll(() => {
-  setCSSPropertySpy = vi
-    .spyOn(document.documentElement.style, 'setProperty')
-    .mockImplementation(() => {
-    });
-});
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('background', () => {
-  it('should set --tg-background-color equal to miniApp.backgroundColor', () => {
-    bindMiniAppCSSVars(
-      new MiniApp({
-        backgroundColor: '#111111',
-        headerColor: '#222222',
-        botInline: false,
-        version: '7.0',
-        createRequestId() {
-          return 'abc';
-        },
-      }),
-      new ThemeParams({}),
-    );
-
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-background-color', '#111111');
-  });
-
-  it('should update --tg-background-color according to the changes applied to mini app background color', () => {
-    const ma = new MiniApp({
-      backgroundColor: '#111111',
-      headerColor: '#222222',
-      botInline: false,
-      version: '7.0',
-      postEvent() {
-      },
-      createRequestId() {
-        return 'abc';
-      },
-    });
-
-    bindMiniAppCSSVars(ma, new ThemeParams({}));
-    setCSSPropertySpy.mockClear();
-
-    ma.setBackgroundColor('#999999');
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-background-color', '#999999');
-  });
-});
-
-describe('header', () => {
-  it('should set --tg-header-color equal to miniApp.headerColor if this value is RGB', () => {
-    bindMiniAppCSSVars(
-      new MiniApp({
-        backgroundColor: '#111111',
-        headerColor: '#222222',
-        botInline: false,
-        version: '7.0',
-        createRequestId() {
-          return 'abc';
-        },
-      }),
-      new ThemeParams({}),
-    );
-
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-header-color', '#222222');
-  });
-
-  it('should set --tg-header-color equal to themeParams.backgroundColor if miniApp.headerColor = "bg_color" and backgroundColor property is presented in theme params', () => {
-    const tp = new ThemeParams({});
-    tp.listen();
-
-    bindMiniAppCSSVars(
-      new MiniApp({
-        backgroundColor: '#111111',
-        headerColor: 'bg_color',
-        botInline: false,
-        version: '7.0',
-        createRequestId() {
-          return 'abc';
-        },
-      }),
-      tp,
-    );
-
-    // Background only.
-    expect(setCSSPropertySpy).toHaveBeenCalledTimes(1);
-    setCSSPropertySpy.mockClear();
-
-    dispatchWindowMessageEvent('theme_changed', {
-      theme_params: {
-        bg_color: '#ffffff',
-      },
-    });
-
-    expect(setCSSPropertySpy).toHaveBeenCalledTimes(1);
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-header-color', '#ffffff');
-  });
-
-  it('should set --tg-header-color equal to themeParams.secondaryBackgroundColor if miniApp.headerColor = "secondary_bg_color" and secondaryBackgroundColor property is presented in theme params', () => {
-    const tp = new ThemeParams({});
-    tp.listen();
-
-    bindMiniAppCSSVars(
-      new MiniApp({
-        backgroundColor: '#111111',
-        headerColor: 'secondary_bg_color',
-        botInline: false,
-        version: '7.0',
-        createRequestId() {
-          return 'abc';
-        },
-      }),
-      tp,
-    );
-
-    // Background only.
-    expect(setCSSPropertySpy).toHaveBeenCalledTimes(1);
-    setCSSPropertySpy.mockClear();
-
-    dispatchWindowMessageEvent('theme_changed', {
-      theme_params: {
-        secondary_bg_color: '#000000',
-      },
-    });
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-header-color', '#000000');
-  });
-
-  it('should actualize --tg-header-color if either mini app or theme params changed', () => {
-    const ma = new MiniApp({
-      backgroundColor: '#111111',
-      headerColor: '#aabbcc',
-      botInline: false,
-      version: '7.0',
-      postEvent() {},
-      createRequestId() {
-        return 'abc';
-      },
-    });
-    const tp = new ThemeParams({
-      backgroundColor: '#ffffff',
-      secondaryBackgroundColor: '#000000',
-    });
-    tp.listen();
-
-    bindMiniAppCSSVars(ma, tp);
-    setCSSPropertySpy.mockClear();
-
-    ma.setHeaderColor('bg_color');
-    expect(setCSSPropertySpy).toHaveBeenCalledTimes(1);
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-header-color', '#ffffff');
-    setCSSPropertySpy.mockClear();
-
-    ma.setHeaderColor('secondary_bg_color');
-    expect(setCSSPropertySpy).toHaveBeenCalledTimes(1);
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-header-color', '#000000');
-    setCSSPropertySpy.mockClear();
-
-    dispatchWindowMessageEvent('theme_changed', {
-      theme_params: {
-        secondary_bg_color: '#abcdef',
-      },
-    });
-    expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-header-color', '#abcdef');
-    setCSSPropertySpy.mockClear();
-  });
-});

package/src/css/__tests__/bindThemeCSSVars.ts

@@ -1,52 +0,0 @@
-import { expect, vi, it, SpyInstance, afterEach, beforeAll } from 'vitest';
-import { bindThemeCSSVars } from '../bindThemeCSSVars';
-import { ThemeParams } from '../../theme-params';
-import { dispatchWindowMessageEvent } from '../../../test-utils/dispatchWindowMessageEvent';
-
-let setCSSPropertySpy: SpyInstance<[string, string, string?], void>;
-
-beforeAll(() => {
-  setCSSPropertySpy = vi
-    .spyOn(document.documentElement.style, 'setProperty')
-    .mockImplementation(() => {
-    });
-});
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-it('should set --tg-theme-{key} CSS vars, where key is a kebab-cased theme keys', () => {
-  bindThemeCSSVars(new ThemeParams({
-    backgroundColor: '#abcdef',
-    accentTextColor: '#000011',
-  }));
-
-  expect(setCSSPropertySpy).toHaveBeenCalledTimes(2);
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-theme-background-color', '#abcdef');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-theme-accent-text-color', '#000011');
-});
-
-it('should update --tg-theme-{key}variables to the values, received in the Theme change events', async () => {
-  const tp = new ThemeParams({
-    backgroundColor: '#abcdef',
-    accentTextColor: '#000011',
-  });
-  bindThemeCSSVars(tp);
-  setCSSPropertySpy.mockClear();
-
-  await tp.listen();
-
-  dispatchWindowMessageEvent('theme_changed', {
-    theme_params: {
-      bg_color: '#111111',
-      accent_text_color: '#222222',
-      text_color: '#333333',
-    },
-  });
-
-  expect(setCSSPropertySpy).toHaveBeenCalledTimes(3);
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-theme-background-color', '#111111');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-theme-accent-text-color', '#222222');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-theme-text-color', '#333333');
-});

package/src/css/__tests__/bindViewportCSSVars.ts

@@ -1,55 +0,0 @@
-import { expect, vi, it, SpyInstance, afterEach, beforeAll } from 'vitest';
-import { bindViewportCSSVars } from '../bindViewportCSSVars';
-import { Viewport } from '../../viewport';
-import { dispatchWindowMessageEvent } from '../../../test-utils/dispatchWindowMessageEvent';
-
-let setCSSPropertySpy: SpyInstance<[string, string, string?], void>;
-
-beforeAll(() => {
-  setCSSPropertySpy = vi
-    .spyOn(document.documentElement.style, 'setProperty')
-    .mockImplementation(() => {
-    });
-});
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-it('should set --tg-viewport-height = viewport.height, --tg-viewport-width = viewport.width, --tg-viewport-stable-height = viewport.stableHeight', () => {
-  bindViewportCSSVars(new Viewport({
-    height: 192,
-    width: 1000,
-    isExpanded: false,
-    stableHeight: 200,
-  }));
-
-  expect(setCSSPropertySpy).toHaveBeenCalledTimes(3);
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-viewport-height', '192px');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-viewport-width', '1000px');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-viewport-stable-height', '200px');
-});
-
-it('should update --tg-viewport-height, --tg-viewport-width, --tg-viewport-stable-height according to the values, received in the Viewport change events', () => {
-  const viewport = new Viewport({
-    height: 192,
-    width: 1000,
-    isExpanded: false,
-    stableHeight: 200,
-  });
-  bindViewportCSSVars(viewport);
-  setCSSPropertySpy.mockClear();
-
-  viewport.listen();
-  dispatchWindowMessageEvent('viewport_changed', {
-    height: 900,
-    is_state_stable: true,
-    is_expanded: false,
-    width: 1800,
-  })
-
-  expect(setCSSPropertySpy).toHaveBeenCalledTimes(3);
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-viewport-height', '900px');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-viewport-width', '1800px');
-  expect(setCSSPropertySpy).toHaveBeenCalledWith('--tg-viewport-stable-height', '900px');
-});

package/src/css/__tests__/setCSSVar.ts

@@ -1,14 +0,0 @@
-import { afterEach, expect, it, vi } from 'vitest';
-import { setCSSVar } from '../setCSSVar';
-
-afterEach(() => {
-  vi.restoreAllMocks();
-})
-
-it('should call document.documentElement.style.setProperty with passed "name" and "value" arguments', () => {
-  const spy = vi.spyOn(document.documentElement.style, 'setProperty').mockImplementation(() => {});
-
-  setCSSVar('tma', 'is cool')
-  expect(spy).toHaveBeenCalledOnce();
-  expect(spy).toHaveBeenCalledWith('tma', 'is cool');
-})

package/src/css/bindMiniAppCSSVars.ts

@@ -1,51 +0,0 @@
-import { isRGB } from '~/colors/index.js';
-import { setCSSVar } from '~/css/setCSSVar.js';
-import type { MiniApp } from '~/mini-app/index.js';
-import type { ThemeParams } from '~/theme-params/index.js';
-
-/**
- * Creates CSS variables connected with WebApp background and header colors based on
- * passed WebApp and ThemeParams instances.
- *
- * Created variables:
- * - `--tg-background-color`
- * - `--tg-header-color`
- *
- * Variables are being automatically updated in case, corresponding properties are updating.
- *
- * @param miniApp - MiniApp instance.
- * @param themeParams - ThemeParams instance.
- */
-export function bindMiniAppCSSVars(miniApp: MiniApp, themeParams: ThemeParams): void {
-  const actualizeBackground = () => {
-    setCSSVar('--tg-background-color', miniApp.backgroundColor);
-  };
-
-  const actualizeHeader = () => {
-    const {
-      backgroundColor,
-      secondaryBackgroundColor,
-    } = themeParams;
-
-    if (isRGB(miniApp.headerColor)) {
-      setCSSVar('--tg-header-color', miniApp.headerColor);
-      return;
-    }
-
-    if (miniApp.headerColor === 'bg_color' && backgroundColor) {
-      setCSSVar('--tg-header-color', backgroundColor);
-      return;
-    }
-
-    if (miniApp.headerColor === 'secondary_bg_color' && secondaryBackgroundColor) {
-      setCSSVar('--tg-header-color', secondaryBackgroundColor);
-    }
-  };
-
-  themeParams.on('change', actualizeHeader);
-  miniApp.on('change:backgroundColor', actualizeBackground);
-  miniApp.on('change:headerColor', actualizeHeader);
-
-  actualizeBackground();
-  actualizeHeader();
-}

package/src/css/bindThemeCSSVars.ts

@@ -1,31 +0,0 @@
-import type { ThemeParams } from '~/theme-params/index.js';
-
-import { setCSSVar } from './setCSSVar.js';
-
-/**
- * Creates CSS variables connected with theme parameters. Created CSS variables names are
- * following the pattern "--tg-theme-{name}". {name} is a theme parameters key name converted
- * from snake to kebab case.
- *
- * Variables are being automatically updated in case, corresponding properties
- * updated in passed ThemeParams instance.
- *
- * @param themeParams - ThemeParams instance.
- */
-export function bindThemeCSSVars(themeParams: ThemeParams): void {
-  const actualize = () => {
-    const state = themeParams.getState();
-
-    Object.entries(state).forEach(([k, v]) => {
-      if (v) {
-        const key = k
-          .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-        setCSSVar(`--tg-theme-${key}`, v);
-      }
-    });
-  };
-
-  themeParams.on('change', actualize);
-
-  actualize();
-}

package/src/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-stable-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/css/index.ts

@@ -1,4 +0,0 @@
-export * from './bindMiniAppCSSVars.js';
-export * from './bindThemeCSSVars.js';
-export * from './bindViewportCSSVars.js';
-export * from './setCSSVar.js';

package/src/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);
-}