Merge pull request #307 from Telegram-Mini-Apps/306-bug-tmajssdk-reac…

…t-istma-function-returns-incorrect-value-on-some-devices Fix incorrect `isTMA` behavior in native apps
Telegram-Mini-Apps · May 13, 2024 · 1aea3a8 · 1aea3a8
2 parents 5a9f1df + a77d249
commit 1aea3a8
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 59 deletions.
diff --git a/.changeset/khaki-parrots-love.md b/.changeset/khaki-parrots-love.md
@@ -0,0 +1,5 @@
+---
+"@tma.js/sdk": patch
+---
+
+Fix `isTMA` incorrect behavior in native apps.
diff --git a/apps/local-playground/index.html b/apps/local-playground/index.html
@@ -9,6 +9,7 @@
   <title>Document</title>
 </head>
 <body>
+  <script type="module" src="src/eruda.ts"></script>
   <script type="module" src="src/index.ts"></script>
 </body>
 </html>
diff --git a/apps/local-playground/package.json b/apps/local-playground/package.json
@@ -7,5 +7,11 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
+  },
+  "dependencies": {
+    "tsconfig": "workspace:*"
+  },
+  "devDependencies": {
+    "eruda": "^3.0.1"
   }
 }
diff --git a/apps/local-playground/src/eruda.ts b/apps/local-playground/src/eruda.ts
@@ -0,0 +1,3 @@
+import eruda from 'eruda';
+
+eruda.init();
diff --git a/apps/local-playground/src/index.ts b/apps/local-playground/src/index.ts
@@ -8,23 +8,6 @@
  * import { postEvent } from '@/sdk';
  */
 
-// import { initBackButton } from '@/sdk';
-//
-// const bb = initBackButton();
-//
-// // setDebug(true);
-//
-// bb.show();
-//
-// // on('main_button_pressed', console.warn);
+import { postEvent } from '@/sdk';
 
-
-import { setDebug } from '@packages/sdk/src/debug/debug.js';
-import { postEvent } from '@packages/sdk/src/mini-apps/methods/postEvent.js';
-// import { on } from '@packages/sdk/src/mini-apps/events/listening/on.js';
-
-setDebug(true);
-
-postEvent('web_app_setup_back_button', { is_visible: true, });
-postEvent('web_app_setup_settings_button', { is_visible: true, });
-// on('back_button_pressed', console.warn);
+postEvent('web_app_expand');
diff --git a/apps/local-playground/tsconfig.json b/apps/local-playground/tsconfig.json
@@ -1,36 +1,21 @@
 {
-  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "tsconfig/esnext-dom.json",
   "compilerOptions": {
-    "composite": false,
-    "declaration": false,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "inlineSources": true,
-    "isolatedModules": true,
-    "lib": [
-      "esnext",
-      "DOM"
-    ],
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "preserveWatchOutput": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "strict": true,
-    "target": "es5",
     "paths": {
-      "@/*": ["../../packages/*/src/index.ts"],
-      "@packages/*": ["../../packages/*"]
+      "@/*": [
+        "../../packages/*/src/index.ts"
+      ]
     }
   },
-  "exclude": ["node_modules"],
+  "exclude": [
+    "node_modules"
+  ],
   "include": [
     "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
   ]
-//  "references": [
-//    "./tsconfig.node.json"
-//  ]
 }
diff --git a/apps/local-playground/tsconfig.node.json b/apps/local-playground/tsconfig.node.json
@@ -1,6 +1,10 @@
 {
+  "extends": "tsconfig/esnext.json",
   "compilerOptions": {
+    "composite": true,
     "module": "NodeNext"
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }
diff --git a/apps/local-playground/vite.config.ts b/apps/local-playground/vite.config.ts
@@ -15,8 +15,8 @@ export default defineConfig({
   server: {
     port: 443,
     https: {
-      cert: readFileSync(resolve(dir, '../../https-cert.pem')),
-      key: readFileSync(resolve(dir, '../../https-key.pem')),
+      cert: readFileSync(resolve(dir, '../../tma.internal.pem')),
+      key: readFileSync(resolve(dir, '../../tma.internal-key.pem')),
     },
     host: 'tma.internal',
   },

diff --git a/packages/sdk/src/env/isTMA.test.ts b/packages/sdk/src/env/isTMA.test.ts
@@ -1,8 +1,9 @@
-import { expect, it, vi } from 'vitest';
+import { afterEach, expect, it, vi } from 'vitest';
 import type { FnToSpy } from '@test-utils/types.js';
 
 import { request as requestFn } from '@/bridge/utils/request.js';
 import { isTMA } from '@/env/isTMA.js';
+import { createWindow } from '@test-utils/createWindow.js';
 
 const request = requestFn as unknown as FnToSpy<typeof requestFn>;
 
@@ -12,14 +13,33 @@ vi.mock('@/bridge/utils/request.js', async () => {
   };
 });
 
-it('should return promise with true value resolved, if requesting theme parameters was successful', () => {
-  request.mockImplementationOnce(async () => ({}));
-  expect(isTMA()).resolves.toBe(true);
+afterEach(() => {
+  vi.resetAllMocks();
 });
 
-it('should return promise with false value resolved, if requesting theme parameters was unsuccessful', () => {
-  request.mockImplementationOnce(async () => {
-    throw new Error('Timed out.');
-  });
-  expect(isTMA()).resolves.toBe(false);
+it('should return true if current window contains TelegramWebviewProxy property', () => {
+  createWindow({
+    TelegramWebviewProxy: {},
+  } as any);
+  expect(isTMA()).resolves.toBe(true);
 });
+
+it(
+  'should return promise with true value resolved, if requesting theme parameters was successful',
+  () => {
+    createWindow();
+    request.mockImplementationOnce(async () => ({}));
+    expect(isTMA()).resolves.toBe(true);
+  },
+);
+
+it(
+  'should return promise with false value resolved, if requesting theme parameters was unsuccessful',
+  () => {
+    createWindow();
+    request.mockImplementationOnce(async () => {
+      throw new Error('Timed out.');
+    });
+    expect(isTMA()).resolves.toBe(false);
+  },
+);
diff --git a/packages/sdk/src/env/isTMA.ts b/packages/sdk/src/env/isTMA.ts
@@ -1,9 +1,13 @@
 import { request } from '@/bridge/utils/request.js';
+import { hasWebviewProxy } from '@/env/hasWebviewProxy.js';
 
 /**
  * Returns true in case, current environment is Telegram Mini Apps.
  */
 export async function isTMA(): Promise<boolean> {
+  if (hasWebviewProxy(window)) {
+    return true;
+  }
   try {
     await request({ method: 'web_app_request_theme', event: 'theme_changed', timeout: 100 });
     return true;

diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
@@ -209,6 +209,7 @@ export { setDebug } from '@/debug/debug.js';
  */
 export { initWeb } from '@/env/initWeb.js';
 export { isIframe } from '@/env/isIframe.js';
+export { isSSR } from '@/env/isSSR.js';
 export { isTMA } from '@/env/isTMA.js';
 
 /**

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml