Merge pull request #292 from Telegram-Mini-Apps/feature/sdk-3-0

New major release. SDK 2.0

.changeset/a-a-a.md

@@ -0,0 +1,6 @@
+---
+"@tma.js/sdk-react": minor
+"@tma.js/sdk-solid": minor
+---
+
+Remove the `DisplayGate` component. Rework all hooks, HOCs and the SDK provider to make bindings work a bit different way.

.changeset/giant-tips-fly.md

@@ -0,0 +1,5 @@
+---
+"@tma.js/sdk": major
+---
+
+Completely rework the package. In this release we have focused on improving the bundle size, writing more tests, providing new navigation features and fulfilling Mini Apps functionality

.changeset/light-nails-add.md

@@ -0,0 +1,6 @@
+---
+"@tma.js/react-router-integration": minor
+"@tma.js/solid-router-integration": minor
+---
+
+Rework the integration utilities according to the changes done in the new major SDK version. Fix some known problems.

.changeset/old-seahorses-join.md

@@ -0,0 +1,5 @@
+---
+"@tma.js/init-data-node": patch
+---
+
+Change referred distributive files in the `package.json`.

.github/workflows/run-changeset.yml

@@ -35,8 +35,8 @@ jobs:
       - name: Build packages
         run: pnpm run ci:packages:build
 
-      - name: Lint packages
-        run: pnpm run ci:packages:lint
+#      - name: Lint packages
+#        run: pnpm run ci:packages:lint
 
       - name: Check packages types
         run: pnpm run ci:packages:typecheck

.github/workflows/test-pull-request.yml

@@ -34,8 +34,8 @@ jobs:
       - name: Build packages
         run: pnpm run ci:packages:build
 
-      - name: Lint packages
-        run: pnpm run ci:packages:lint
+#      - name: Lint packages
+#        run: pnpm run ci:packages:lint
 
       - name: Check packages types
         run: pnpm run ci:packages:typecheck

.gitignore

@@ -11,7 +11,6 @@ coverage
 # next.js
 .next/
 out/
-build
 dist
 
 # misc

apps/docs/platform/about.md

@@ -62,7 +62,7 @@ applications:
 - [Telegram for macOS](https://github.com/overtake/TelegramSwift) `macos`;
 - [Telegram Desktop](https://github.com/telegramdesktop/tdesktop) `tdesktop`;
 - [Telegram Web A](https://github.com/Ajaxy/telegram-tt) `weba`;
-- [Telegram Web K](https://github.com/morethanwords/tweb) `webk`;
+- [Telegram Web K](https://github.com/morethanwords/tweb) `web`;
 
 Other applications either don't have implementation for Telegram Mini Apps, or
 support it too poorly. This will probably be useful in the next sections of the

apps/docs/platform/events.md

@@ -55,7 +55,7 @@ defined function.
 Here is an example:
 
 ```typescript
-window.Telegram.WebView.receiveEvent('popup_closed', { 
+window.Telegram.WebView.receiveEvent('popup_closed', {
   button_id: 'cancel'
 });
 ```
@@ -110,6 +110,45 @@ Available since: **v6.1**
 
 User clicked the [Back Button](back-button.md).
 
+### `biometry_auth_requested`
+
+Available since: **v7.2**
+
+Biometry authentication request completed. This event usually occurs in a response to the
+[web_app_request_auth](methods.md#web-app-biometry-request-auth) method.
+
+If authentication was successful, the event contains a token from the local secure storage.
+
+| Field  | Type                         | Description                                                                                                |
+|--------|------------------------------|------------------------------------------------------------------------------------------------------------|
+| status | `'failed'` or `'authorized'` | Authentication status.                                                                                     |
+| token  | `string`                     | _Optional_. Token from the local secure storage saved previously. Passed only if `status` is `authorized`. |
+
+### `biometry_info_received`
+
+Available since: **v7.2**
+
+Biometry settings were received.
+
+| Field            | Type                   | Description                                                                   |
+|------------------|------------------------|-------------------------------------------------------------------------------|
+| available        | `boolean`              | Shows whether biometry is available.                                          |
+| access_requested | `boolean`              | Shows whether permission to use biometrics has been requested.                |
+| access_granted   | `boolean`              | Shows whether permission to use biometrics has been granted.                  |
+| device_id        | `string`               | A unique device identifier that can be used to match the token to the device. |
+| token_saved      | `boolean`              | Show whether local secure storage contains previously saved token.            |
+| type             | `'face'` or `'finger'` | The type of biometrics currently available on the device.                     |
+
+### `biometry_token_updated`
+
+Available since: **v7.2**
+
+Biometry token was updated.
+
+| Field  | Type                   | Description    |
+|--------|------------------------|----------------|
+| status | `updated` or `removed` | Update status. |
+
 ### `clipboard_text_received`
 
 Available since: **v6.4**

apps/docs/platform/methods.md

@@ -114,6 +114,57 @@ event.
 
 Notifies parent iframe about the current iframe is going to reload.
 
+### `web_app_biometry_get_info`
+
+Available since: **v7.2**
+
+Requests current biometry settings.
+
+### `web_app_biometry_open_settings`
+
+Available since: **v7.2**
+
+Opens the biometric access settings for bots. Useful when you need to request biometrics
+access to users who haven't granted it yet.
+
+::: info
+
+This method can be called only in response to user interaction with the Mini
+App interface (e.g. a click inside the Mini App or on the main button)
+
+:::
+
+### `web_app_biometry_request_access`
+
+Available since: **v7.2**
+
+Requests permission to use biometrics.
+
+| Field  | Type     | Description                                                                                                                      |
+|--------|----------|----------------------------------------------------------------------------------------------------------------------------------|
+| reason | `string` | _Optional_. The text to be displayed to a user in the popup describing why the bot needs access to biometrics, 0-128 characters. |
+
+### `web_app_biometry_request_auth`
+
+Available since: **v7.2**
+
+Authenticates the user using biometrics.
+
+| Field  | Type     | Description                                                                                                                                                                                       |
+|--------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| reason | `string` | _Optional_. The text to be displayed to a user in the popup describing why you are asking them to authenticate and what action you will be taking based on that authentication, 0-128 characters. |
+
+### `web_app_biometry_update_token`
+
+Available since: **v7.2**
+
+Updates the biometric token in secure storage on the device. To remove the token, pass an empty
+string.
+
+| Field | Type     | Description                                     |
+|-------|----------|-------------------------------------------------|
+| token | `string` | Token to store. Has max length of 1024 symbols. |
+
 ### `web_app_close`
 
 Closes Mini App.

apps/local-playground/index.html

@@ -9,6 +9,6 @@
   <title>Document</title>
 </head>
 <body>
-  <script type="module" src="./index.ts"></script>
+  <script type="module" src="src/index.ts"></script>
 </body>
 </html>

apps/local-playground/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview"
   }
 }

apps/local-playground/src/index.ts

@@ -0,0 +1,30 @@
+/**
+ * You can import any code from other packages here. There are currently 2 shortcuts:
+ *
+ * 1. "@packages/*". Provides access to "packages" directory:
+ * import { postEvent } from '@packages/sdk/src/index.js';
+ *
+ * 2. "@/*". Provides easy access to packages' index files:
+ * import { postEvent } from '@/sdk';
+ */
+
+// import { initBackButton } from '@/sdk';
+//
+// const bb = initBackButton();
+//
+// // setDebug(true);
+//
+// bb.show();
+//
+// // on('main_button_pressed', console.warn);
+
+
+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);

apps/local-playground/tsconfig.json

@@ -11,7 +11,7 @@
       "esnext",
       "DOM"
     ],
-    "module": "ESNext",
+    "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
@@ -20,11 +20,17 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "ESNext",
+    "target": "es5",
     "paths": {
       "@/*": ["../../packages/*/src/index.ts"],
       "@packages/*": ["../../packages/*"]
     }
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "include": [
+    "src"
+  ]
+//  "references": [
+//    "./tsconfig.node.json"
+//  ]
 }

apps/local-playground/tsconfig.node.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext"
+  },
+  "include": ["vite.config.ts"]
+}

apps/local-playground/vite.config.ts

@@ -1,33 +1,28 @@
+import { readFileSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-// TODO: Add docs link for getServerOptions.
-
-/**
- * Returns Vite dev server options.
- */
-// function getServerOptions(): ServerOptions {
-//   const dir = dirname(fileURLToPath(import.meta.url));
-//
-//   return {
-//     port: 443,
-//     https: {
-//       cert: readFileSync(resolve(dir, '../../https-cert.pem')),
-//       key: readFileSync(resolve(dir, '../../https-key.pem')),
-//     },
-//     host: 'tma.internal',
-//   };
-// }
+const dir = dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   plugins: [tsconfigPaths()],
   // Uncomment this line in case, you would like to run Vite dev server using HTTPS. In this case,
   // you will need correct certificate, private key and DNS configuration for your custom domain.
   // For this purpose you could use mkcert:
   // https://github.com/FiloSottile/mkcert
-  // server: getServerOptions(),
   server: {
-    host: true,
+    port: 443,
+    https: {
+      cert: readFileSync(resolve(dir, '../../https-cert.pem')),
+      key: readFileSync(resolve(dir, '../../https-key.pem')),
+    },
+    host: 'tma.internal',
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
   },
 });
 

apps/react/.eslintrc.cjs

@@ -0,0 +1,36 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended'
+  ],
+  overrides: [
+    {
+      env: {
+        node: true
+      },
+      files: [
+        '.eslintrc.{js,cjs}'
+      ],
+      parserOptions: {
+        'sourceType': 'script'
+      }
+    }
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    '@typescript-eslint',
+    'react'
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 0,
+  }
+};

apps/react/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.pem