@tma.js/sdk 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tma.js/sdk",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "TypeScript Source Development Kit for Telegram Mini Apps client application.",
   "author": "Vladislav Kibenko <wolfram.deus@gmail.com>",
   "homepage": "https://github.com/Telegram-Mini-Apps/tma.js#readme",

package/src/bridge/events/__tests__/onTelegramEvent.ts

@@ -4,17 +4,12 @@ import { createWindow, type WindowSpy } from '../../../../test-utils/createWindo
 import { dispatchWindowMessageEvent } from '../../../../test-utils/dispatchWindowMessageEvent';
 import { onTelegramEvent } from '../onTelegramEvent';
 
-let windowSpy: WindowSpy;
-
-beforeEach(() => {
-  windowSpy = createWindow();
-});
-
 afterEach(() => {
-  windowSpy.mockRestore();
+  vi.restoreAllMocks()
 });
 
 it('should call passed callback with event type and data in case, window generated "message" event with data, presented as object with properties "eventType" (string) and "eventData" (unknown). Object is converted to string.', () => {
+  createWindow({ env: 'iframe' });
   const callback = vi.fn();
   onTelegramEvent(callback);
 
@@ -25,6 +20,7 @@ it('should call passed callback with event type and data in case, window generat
 });
 
 it('should not define event handlers twice in case, window object contains "TelegramGameProxy_receiveEvent" property.', () => {
+  createWindow();
   (window as any).TelegramGameProxy_receiveEvent = true;
 
   onTelegramEvent(vi.fn());
@@ -32,6 +28,7 @@ it('should not define event handlers twice in case, window object contains "Tele
 });
 
 it('should call passed callback with event type and data in case, external environment generated event.', () => {
+  createWindow();
   const callback = vi.fn();
   onTelegramEvent(callback);
 
@@ -42,6 +39,7 @@ it('should call passed callback with event type and data in case, external envir
 });
 
 it('should ignore a message event with unexpected data', () => {
+  createWindow();
   const callback = vi.fn();
   onTelegramEvent(callback);
 

package/src/bridge/events/onTelegramEvent.ts

@@ -4,13 +4,15 @@ import { parseMessage } from '~/bridge/parseMessage.js';
  * Emits event sent from Telegram native application like it was sent in
  * default web environment between 2 iframes. It dispatches new MessageEvent
  * and expects it to be handled via `window.addEventListener('message', ...)`
- * as developer would do it to handle messages sent from parent iframe.
+ * as developer would do it to handle messages sent from the parent iframe.
  * @param eventType - event name.
  * @param eventData - event payload.
  */
 function emitEvent(eventType: string, eventData: unknown): void {
   window.dispatchEvent(new MessageEvent('message', {
     data: JSON.stringify({ eventType, eventData }),
+    // We specify window.parent to imitate the case, it sent us this event.
+    source: window.parent,
   }));
 }
 
@@ -65,6 +67,10 @@ export function onTelegramEvent(cb: (eventType: string, eventData: unknown) => v
 
   // We expect Telegram to send us new event through "message" event.
   window.addEventListener('message', (event) => {
+    if (event.source !== window.parent) {
+      return;
+    }
+
     try {
       const { eventType, eventData } = parseMessage(event.data);
       cb(eventType, eventData);

package/src/classnames/__tests__/mergeClassNames.ts

@@ -3,7 +3,7 @@ import { expect, it } from 'vitest';
 import { mergeClassNames } from '../mergeClassNames';
 
 it('should ignore non-object values', () => {
-  expect(mergeClassNames({}, null, undefined, false, true, {}));
+  expect(mergeClassNames({}, null, undefined, false, true, { tma: 'good' })).toStrictEqual({ tma: 'good' });
 });
 
 it('should merge objects keys by values applying classNames function', () => {

package/src/classnames/mergeClassNames.ts

@@ -1,13 +1,13 @@
-import { classNames } from './classNames.js';
+import { isRecord } from '~/misc/index.js';
 
-type FilterUnion<U> = Exclude<U, number | string | null | undefined | any[] | boolean>;
+import { classNames } from './classNames.js';
 
 /**
  * Returns union keys removing those, which values are not strings.
  */
-type UnionFilteredKeys<U> = U extends U
+type UnionStringKeys<U> = U extends U
   ? {
-    [K in keyof U]: U[K] extends string ? K : never
+    [K in keyof U]-?: U[K] extends string | undefined ? K : never;
   }[keyof U]
   : never;
 
@@ -16,32 +16,24 @@ type UnionFilteredKeys<U> = U extends U
  */
 type UnionRequiredKeys<U> = U extends U
   ? {
-    [K in UnionFilteredKeys<U>]-?: ({} extends { [P in K]: U[K] } ? never : K)
-  }[UnionFilteredKeys<U>]
+    [K in UnionStringKeys<U>]: ({} extends Pick<U, K> ? never : K)
+  }[UnionStringKeys<U>]
   : never;
 
 /**
  * Returns union optional keys.
  */
-type UnionOptionalKeys<U> = Exclude<UnionFilteredKeys<U>, UnionRequiredKeys<U>>;
+type UnionOptionalKeys<U> = Exclude<UnionStringKeys<U>, UnionRequiredKeys<U>>;
 
-type MergeClassNames<Tuple extends any[]> = Tuple[number] extends infer Union
-  ? FilterUnion<Union> extends infer UnionFiltered
+type MergeClassNames<Tuple extends any[]> =
+  // Removes all types from union which will be ignored by the mergeClassNames function.
+  Exclude<Tuple[number], number | string | null | undefined | any[] | boolean> extends infer Union
     ? {
-      [K in UnionRequiredKeys<UnionFiltered>]: string;
-    } & {
-      [K in UnionOptionalKeys<UnionFiltered>]?: string;
-    }
-    : never
-  : never;
-
-/**
- * Returns true in case, passed value is Record.
- * @param value
- */
-function isObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(null);
-}
+    [K in UnionRequiredKeys<Union>]: string;
+  } & {
+    [K in UnionOptionalKeys<Union>]?: string;
+  }
+    : never;
 
 /**
  * Merges 2 sets of parameters. Function expects passing an array of objects with values, which
@@ -51,7 +43,7 @@ function isObject(value: unknown): value is Record<string, unknown> {
  */
 export function mergeClassNames<T extends any[]>(...partials: T): MergeClassNames<T> {
   return partials.reduce<MergeClassNames<T>>((acc, partial) => {
-    if (!isObject(partial)) {
+    if (!isRecord(partial)) {
       return acc;
     }
 

package/src/css/__tests__/bindMiniAppCSSVars.ts

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,14 @@
+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/{init/css → css}/bindMiniAppCSSVars.ts

@@ -1,4 +1,5 @@
-import { setCSSVar } from '~/init/css/setCSSVar.js';
+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';
 
@@ -26,16 +27,18 @@ export function bindMiniAppCSSVars(miniApp: MiniApp, themeParams: ThemeParams):
       secondaryBackgroundColor,
     } = themeParams;
 
-    if (miniApp.headerColor === 'bg_color') {
-      if (backgroundColor) {
-        setCSSVar('--tg-header-color', backgroundColor);
-      }
-    } else if (miniApp.headerColor === 'secondary_bg_color') {
-      if (secondaryBackgroundColor) {
-        setCSSVar('--tg-header-color', secondaryBackgroundColor);
-      }
-    } else {
+    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);
     }
   };
 

package/src/{init/css → css}/bindViewportCSSVars.ts

@@ -23,7 +23,7 @@ import { setCSSVar } from './setCSSVar.js';
 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`);
+  const setStableHeight = () => setCSSVar('--tg-viewport-stable-height', `${viewport.stableHeight}px`);
 
   // TODO: Should probably add debounce or throttle.
   viewport.on('change:height', setHeight);

package/src/css/index.ts

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

package/src/index.ts

@@ -57,6 +57,12 @@ export {
   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,

package/src/init/css/processCSSVarsOption.ts

@@ -1,10 +1,8 @@
+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 { bindMiniAppCSSVars } from './bindMiniAppCSSVars.js';
-import { bindThemeCSSVars } from './bindThemeCSSVars.js';
-import { bindViewportCSSVars } from './bindViewportCSSVars.js';
 import type { InitCSSVarsOption, InitCSSVarsSpecificOption } from '../types.js';
 
 /**