@tma.js/sdk 1.4.1 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tma.js/sdk",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "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/__tests__/parseMessage.ts

@@ -0,0 +1,23 @@
+import { it, expect } from 'vitest';
+
+import { parseMessage } from '../parseMessage';
+
+it('should parse value as JSON with properties { eventType: string; eventData?: unknown }', () => {
+  expect(parseMessage({ eventType: 1 })).toEqual({ eventType: '1' });
+  expect(parseMessage({ eventType: 'test' })).toEqual({ eventType: 'test' });
+  expect(parseMessage({ eventType: 'test', eventData: 123 })).toEqual({
+    eventType: 'test',
+    eventData: 123,
+  });
+
+  expect(parseMessage('{"eventType":1}')).toEqual({ eventType: '1' });
+  expect(parseMessage('{"eventType":"test"}')).toEqual({ eventType: 'test' });
+  expect(parseMessage('{"eventType":"test","eventData":123}')).toEqual({
+    eventType: 'test',
+    eventData: 123,
+  });
+});
+
+it('should throw if eventType property is missing', () => {
+  expect(() => parseMessage({})).toThrow();
+});

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

@@ -1,24 +1,18 @@
-import { json, string } from '~/parsing/index.js';
-
-/**
- * Extracts event data from native application event.
- */
-const eventDataJson = json<{ eventType: string; eventData?: unknown }>({
-  eventType: string(),
-  eventData: (value) => value,
-});
+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,
   }));
 }
 
@@ -73,8 +67,12 @@ 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 } = eventDataJson.parse(event.data);
+      const { eventType, eventData } = parseMessage(event.data);
       cb(eventType, eventData);
     } catch {
       // We ignore incorrect messages as they could be generated by any other code.

package/src/bridge/index.ts

@@ -2,5 +2,6 @@ export * from './env/index.js';
 export * from './errors/index.js';
 export * from './events/index.js';
 export * from './methods/index.js';
-export * from './invoke-custom-method.js';
+export * from './invokeCustomMethod.js';
+export * from './parseMessage.js';
 export * from './request.js';

package/src/bridge/parseMessage.ts

@@ -0,0 +1,28 @@
+import { json, string } from '~/parsing/index.js';
+
+/**
+ * Message format used in communication between client and Telegram applications.
+ */
+export interface MiniAppsMessage {
+  /**
+   * Event name.
+   */
+  eventType: string;
+  /**
+   * Event parameters.
+   */
+  eventData?: unknown;
+}
+
+const parser = json<MiniAppsMessage>({
+  eventType: string(),
+  eventData: (value) => value,
+});
+
+/**
+ * Parses value as a message between client and Telegram applications.
+ * @param value - value to parse.
+ */
+export function parseMessage(value: unknown): MiniAppsMessage {
+  return parser.parse(value);
+}

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/index.ts

@@ -10,6 +10,7 @@ export {
   on,
   off,
   once,
+  parseMessage,
   postEvent,
   request,
   subscribe,