@tma.js/sdk-react 3.0.23 → 4.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,25 +1,40 @@
1
1
  # @tma.js/sdk-react
2
2
 
3
- [code-badge]: https://img.shields.io/badge/source-black?logo=github
3
+ React bindings for [@tma.js/sdk](../sdk). The package re-exports the SDK, which is a peer
4
+ dependency and has to be installed too.
4
5
 
5
- [docs-badge]: https://img.shields.io/badge/documentation-blue?logo=gitbook&logoColor=white
6
+ ```bash
7
+ pnpm i @tma.js/sdk @tma.js/sdk-react
8
+ ```
6
9
 
7
- [code-link]: https://github.com/Telegram-Mini-Apps/tma.js/tree/master/tma.js/sdk-react
10
+ ## Components state
8
11
 
9
- [docs-link]: https://docs.telegram-mini-apps.com/packages/tma-js-sdk-react
12
+ Reactive values of SDK components, like `backButton.isVisible` or `mainButton.state`, are
13
+ computed values. Use `useComputed` to re-render a React component whenever such a value changes:
10
14
 
11
- [npm-link]: https://npmjs.com/package/@tma.js/sdk-react
15
+ ```tsx
16
+ import { backButton, mainButton, useComputed } from '@tma.js/sdk-react';
12
17
 
13
- [npm-badge]: https://img.shields.io/npm/v/@tma.js/sdk-react?logo=npm
18
+ function BackButtonStatus() {
19
+ const isVisible = useComputed(backButton.isVisible);
20
+ return <p>Back button is {isVisible ? 'visible' : 'hidden'}</p>;
21
+ }
14
22
 
15
- [size-badge]: https://img.shields.io/bundlephobia/minzip/@tma.js/sdk-react
23
+ function MainButtonText() {
24
+ const { text } = useComputed(mainButton.state);
25
+ return <p>Main button text: {text}</p>;
26
+ }
27
+ ```
16
28
 
17
- [![NPM][npm-badge]][npm-link]
18
- ![Size][size-badge]
19
- [![docs-badge]][docs-link]
20
- [![code-badge]][code-link]
29
+ `useComputed` is based on `useSyncExternalStore`. Pass the second argument to provide the value
30
+ used during server rendering and hydration.
21
31
 
22
- React JS bindings
23
- for [client SDK](https://docs.telegram-mini-apps.com/packages/tma-js-sdk). Includes
24
- hooks, components and utilities for comfortable usage of React JS on the Telegram Mini Apps
25
- platform.
32
+ ## Launch parameters
33
+
34
+ The following hooks compute their value once per component:
35
+
36
+ - `useLaunchParams` returns launch parameters.
37
+ - `useRawLaunchParams` returns launch parameters in the raw format.
38
+ - `useRawInitData` returns init data in the raw format.
39
+ - `useAndroidDeviceData` and `useAndroidDeviceDataFrom` return Android device data from the user
40
+ agent.
@@ -0,0 +1,12 @@
1
+ import { AndroidDeviceData } from '@tma.js/sdk';
2
+ /**
3
+ * @returns Android device data from `navigator.userAgent`.
4
+ * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent
5
+ */
6
+ export declare function useAndroidDeviceData(): AndroidDeviceData;
7
+ /**
8
+ * @returns Android device data from the user agent.
9
+ * @param userAgent - user agent.
10
+ * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent
11
+ */
12
+ export declare function useAndroidDeviceDataFrom(userAgent: string): AndroidDeviceData;
@@ -1,2 +1,4 @@
1
- export * from './hooks.js';
2
1
  export * from '@tma.js/sdk';
2
+ export { useAndroidDeviceData, useAndroidDeviceDataFrom } from './android.js';
3
+ export { useLaunchParams, useRawInitData, useRawLaunchParams } from './launch-params.js';
4
+ export { useComputed } from './useComputed.js';
@@ -0,0 +1,16 @@
1
+ import { LaunchParams } from '@tma.js/sdk';
2
+ /**
3
+ * @returns Launch parameters from any known source.
4
+ * @throws {LaunchParamsRetrieveError} Launch parameters are missing or invalid.
5
+ */
6
+ export declare function useLaunchParams(): LaunchParams;
7
+ /**
8
+ * @returns Launch parameters in the raw format from any known source.
9
+ * @throws {LaunchParamsRetrieveError} Launch parameters are missing.
10
+ */
11
+ export declare function useRawLaunchParams(): string;
12
+ /**
13
+ * @returns Init data in the raw format from any known source.
14
+ * @throws {LaunchParamsRetrieveError} Launch parameters are missing or invalid.
15
+ */
16
+ export declare function useRawInitData(): string | undefined;
@@ -0,0 +1,11 @@
1
+ import { Computed } from '@tma.js/sdk';
2
+ /**
3
+ * @returns The current value, re-rendering the React component whenever it changes.
4
+ * @param computed - computed value, e.g. `backButton.isVisible` or `mainButton.state`.
5
+ * @param getServerSnapshot - function returning the value used during server rendering and
6
+ * hydration. Defaults to `computed`.
7
+ * @example
8
+ * const isVisible = useComputed(backButton.isVisible);
9
+ * const { text } = useComputed(mainButton.state);
10
+ */
11
+ export declare function useComputed<T>(computed: Computed<T>, getServerSnapshot?: () => T): T;
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),r=require("@tma.js/sdk");function n(e,t){return a.useSyncExternalStore(u=>e.sub(u),e,t||e)}function o(e){return a.useMemo(()=>{const t=r.retrieveLaunchParams();return e?r.deepSnakeToCamelObjKeys(t):t},[e])}function i(){return a.useMemo(r.retrieveRawLaunchParams,[])}function s(){return a.useMemo(r.retrieveRawInitData,[])}function c(){return a.useMemo(r.retrieveAndroidDeviceData,[])}function d(e){return a.useMemo(()=>r.retrieveAndroidDeviceDataFrom(e),[e])}exports.useAndroidDeviceData=c;exports.useAndroidDeviceDataFrom=d;exports.useLaunchParams=o;exports.useRawInitData=s;exports.useRawLaunchParams=i;exports.useSignal=n;Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@tma.js/sdk"),a=require("react");function u(){return a.useMemo(r.retrieveAndroidDeviceData,[])}function n(e){return a.useMemo(()=>r.retrieveAndroidDeviceDataFrom(e),[e])}function i(){return a.useMemo(r.retrieveLaunchParams,[])}function o(){return a.useMemo(r.retrieveRawLaunchParams,[])}function s(){return a.useMemo(r.retrieveRawInitData,[])}function c(e,t=e){return a.useSyncExternalStore(e.subscribe,e,t)}exports.useAndroidDeviceData=u;exports.useAndroidDeviceDataFrom=n;exports.useComputed=c;exports.useLaunchParams=i;exports.useRawInitData=s;exports.useRawLaunchParams=o;Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sources":["../src/hooks.ts"],"sourcesContent":["import { useMemo, useSyncExternalStore } from 'react';\nimport {\n retrieveLaunchParams,\n retrieveRawLaunchParams,\n retrieveRawInitData,\n retrieveAndroidDeviceData,\n retrieveAndroidDeviceDataFrom,\n type AndroidDeviceData,\n type RetrieveLaunchParamsResult,\n deepSnakeToCamelObjKeys,\n type DeepConvertSnakeKeysToCamelCase,\n} from '@tma.js/sdk';\n\n/**\n * Returns the underlying signal value updating it each time the signal value changes.\n * @param signal - a signal.\n * @param getServerSnapshot - an optional function returning the signal value snapshot. It is used\n * only during SSR to provide an initial value of the signal. When not set, defaults to the\n * signal itself.\n */\nexport function useSignal<T>(\n signal: {\n (): T;\n sub(fn: VoidFunction): VoidFunction;\n },\n getServerSnapshot?: () => T,\n): T {\n return useSyncExternalStore(\n onStoreChange => signal.sub(onStoreChange),\n signal,\n getServerSnapshot || signal,\n );\n}\n\n/**\n * @returns Launch parameters from any known source.\n * @param camelCase - should the output be camel-cased.\n */\nexport function useLaunchParams(camelCase?: false): RetrieveLaunchParamsResult;\n/**\n * @returns Launch parameters from any known source.\n * @param camelCase - should the output be camel-cased.\n */\nexport function useLaunchParams(\n camelCase: true,\n): DeepConvertSnakeKeysToCamelCase<RetrieveLaunchParamsResult>;\nexport function useLaunchParams(\n camelCase?: boolean,\n): RetrieveLaunchParamsResult | DeepConvertSnakeKeysToCamelCase<RetrieveLaunchParamsResult> {\n return useMemo(() => {\n const lp = retrieveLaunchParams();\n return camelCase ? deepSnakeToCamelObjKeys(lp) : lp;\n }, [camelCase]);\n}\n\n/**\n * @returns Launch parameters in a raw format from any known source.\n * @see retrieveRawLaunchParams\n */\nexport function useRawLaunchParams(): string {\n return useMemo(retrieveRawLaunchParams, []);\n}\n\n/**\n * @returns Raw init data from any known source.\n */\nexport function useRawInitData(): string | undefined {\n return useMemo(retrieveRawInitData, []);\n}\n\n/**\n * Retrieves Android device data from the navigator.userAgent.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n */\nexport function useAndroidDeviceData(): AndroidDeviceData {\n return useMemo(retrieveAndroidDeviceData, []);\n}\n\n/**\n * Retrieves Android device data from the specified User Agent.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n * @param userAgent - user agent.\n */\nexport function useAndroidDeviceDataFrom(userAgent: string): AndroidDeviceData {\n return useMemo(() => retrieveAndroidDeviceDataFrom(userAgent), [userAgent]);\n}\n"],"names":["useSignal","signal","getServerSnapshot","useSyncExternalStore","onStoreChange","useLaunchParams","camelCase","useMemo","lp","retrieveLaunchParams","deepSnakeToCamelObjKeys","useRawLaunchParams","retrieveRawLaunchParams","useRawInitData","retrieveRawInitData","useAndroidDeviceData","retrieveAndroidDeviceData","useAndroidDeviceDataFrom","userAgent","retrieveAndroidDeviceDataFrom"],"mappings":"kIAoBgB,SAAAA,EACdC,EAIAC,EACG,CACI,OAAAC,EAAA,qBACLC,GAAiBH,EAAO,IAAIG,CAAa,EACzCH,EACAC,GAAqBD,CACvB,CACF,CAcO,SAASI,EACdC,EAC0F,CAC1F,OAAOC,UAAQ,IAAM,CACnB,MAAMC,EAAKC,EAAAA,qBAAqB,EACzB,OAAAH,EAAYI,EAAAA,wBAAwBF,CAAE,EAAIA,CAAA,EAChD,CAACF,CAAS,CAAC,CAChB,CAMO,SAASK,GAA6B,CACpC,OAAAJ,EAAA,QAAQK,EAAyB,wBAAA,EAAE,CAC5C,CAKO,SAASC,GAAqC,CAC5C,OAAAN,EAAA,QAAQO,EAAqB,oBAAA,EAAE,CACxC,CAMO,SAASC,GAA0C,CACjD,OAAAR,EAAA,QAAQS,EAA2B,0BAAA,EAAE,CAC9C,CAOO,SAASC,EAAyBC,EAAsC,CAC7E,OAAOX,EAAAA,QAAQ,IAAMY,EAAA,8BAA8BD,CAAS,EAAG,CAACA,CAAS,CAAC,CAC5E"}
1
+ {"version":3,"file":"index.cjs","sources":["../src/android.ts","../src/launch-params.ts","../src/useComputed.ts"],"sourcesContent":["import {\n type AndroidDeviceData,\n retrieveAndroidDeviceData,\n retrieveAndroidDeviceDataFrom,\n} from '@tma.js/sdk';\nimport { useMemo } from 'react';\n\n/**\n * @returns Android device data from `navigator.userAgent`.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n */\nexport function useAndroidDeviceData(): AndroidDeviceData {\n return useMemo(retrieveAndroidDeviceData, []);\n}\n\n/**\n * @returns Android device data from the user agent.\n * @param userAgent - user agent.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n */\nexport function useAndroidDeviceDataFrom(userAgent: string): AndroidDeviceData {\n return useMemo(() => retrieveAndroidDeviceDataFrom(userAgent), [userAgent]);\n}\n","import {\n type LaunchParams,\n retrieveLaunchParams,\n retrieveRawInitData,\n retrieveRawLaunchParams,\n} from '@tma.js/sdk';\nimport { useMemo } from 'react';\n\n/**\n * @returns Launch parameters from any known source.\n * @throws {LaunchParamsRetrieveError} Launch parameters are missing or invalid.\n */\nexport function useLaunchParams(): LaunchParams {\n return useMemo(retrieveLaunchParams, []);\n}\n\n/**\n * @returns Launch parameters in the raw format from any known source.\n * @throws {LaunchParamsRetrieveError} Launch parameters are missing.\n */\nexport function useRawLaunchParams(): string {\n return useMemo(retrieveRawLaunchParams, []);\n}\n\n/**\n * @returns Init data in the raw format from any known source.\n * @throws {LaunchParamsRetrieveError} Launch parameters are missing or invalid.\n */\nexport function useRawInitData(): string | undefined {\n return useMemo(retrieveRawInitData, []);\n}\n","import type { Computed } from '@tma.js/sdk';\nimport { useSyncExternalStore } from 'react';\n\n/**\n * @returns The current value, re-rendering the React component whenever it changes.\n * @param computed - computed value, e.g. `backButton.isVisible` or `mainButton.state`.\n * @param getServerSnapshot - function returning the value used during server rendering and\n * hydration. Defaults to `computed`.\n * @example\n * const isVisible = useComputed(backButton.isVisible);\n * const { text } = useComputed(mainButton.state);\n */\nexport function useComputed<T>(computed: Computed<T>, getServerSnapshot: () => T = computed): T {\n return useSyncExternalStore(computed.subscribe, computed, getServerSnapshot);\n}\n"],"names":["useAndroidDeviceData","useMemo","retrieveAndroidDeviceData","useAndroidDeviceDataFrom","userAgent","retrieveAndroidDeviceDataFrom","useLaunchParams","retrieveLaunchParams","useRawLaunchParams","retrieveRawLaunchParams","useRawInitData","retrieveRawInitData","useComputed","computed","getServerSnapshot","useSyncExternalStore"],"mappings":"kIAWO,SAASA,GAA0C,CACjD,OAAAC,EAAA,QAAQC,EAA2B,0BAAA,EAAE,CAC9C,CAOO,SAASC,EAAyBC,EAAsC,CAC7E,OAAOH,EAAAA,QAAQ,IAAMI,EAAA,8BAA8BD,CAAS,EAAG,CAACA,CAAS,CAAC,CAC5E,CCVO,SAASE,GAAgC,CACvC,OAAAL,EAAA,QAAQM,EAAsB,qBAAA,EAAE,CACzC,CAMO,SAASC,GAA6B,CACpC,OAAAP,EAAA,QAAQQ,EAAyB,wBAAA,EAAE,CAC5C,CAMO,SAASC,GAAqC,CAC5C,OAAAT,EAAA,QAAQU,EAAqB,oBAAA,EAAE,CACxC,CClBgB,SAAAC,EAAeC,EAAuBC,EAA6BD,EAAa,CAC9F,OAAOE,EAAqB,qBAAAF,EAAS,UAAWA,EAAUC,CAAiB,CAC7E"}
package/dist/index.js CHANGED
@@ -1,37 +1,30 @@
1
- import { useSyncExternalStore as a, useMemo as r } from "react";
2
- import { retrieveLaunchParams as u, deepSnakeToCamelObjKeys as o, retrieveRawLaunchParams as i, retrieveRawInitData as c, retrieveAndroidDeviceData as m, retrieveAndroidDeviceDataFrom as s } from "@tma.js/sdk";
1
+ import { retrieveAndroidDeviceData as n, retrieveAndroidDeviceDataFrom as t, retrieveLaunchParams as i, retrieveRawInitData as u, retrieveRawLaunchParams as o } from "@tma.js/sdk";
3
2
  export * from "@tma.js/sdk";
4
- function f(e, t) {
5
- return a(
6
- (n) => e.sub(n),
7
- e,
8
- t || e
9
- );
3
+ import { useMemo as e, useSyncExternalStore as c } from "react";
4
+ function D() {
5
+ return e(n, []);
10
6
  }
11
- function v(e) {
12
- return r(() => {
13
- const t = u();
14
- return e ? o(t) : t;
15
- }, [e]);
7
+ function f(r) {
8
+ return e(() => t(r), [r]);
16
9
  }
17
- function p() {
18
- return r(i, []);
10
+ function v() {
11
+ return e(i, []);
19
12
  }
20
- function h() {
21
- return r(c, []);
13
+ function d() {
14
+ return e(o, []);
22
15
  }
23
- function w() {
24
- return r(m, []);
16
+ function h() {
17
+ return e(u, []);
25
18
  }
26
- function L(e) {
27
- return r(() => s(e), [e]);
19
+ function w(r, a = r) {
20
+ return c(r.subscribe, r, a);
28
21
  }
29
22
  export {
30
- w as useAndroidDeviceData,
31
- L as useAndroidDeviceDataFrom,
23
+ D as useAndroidDeviceData,
24
+ f as useAndroidDeviceDataFrom,
25
+ w as useComputed,
32
26
  v as useLaunchParams,
33
27
  h as useRawInitData,
34
- p as useRawLaunchParams,
35
- f as useSignal
28
+ d as useRawLaunchParams
36
29
  };
37
30
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/hooks.ts"],"sourcesContent":["import { useMemo, useSyncExternalStore } from 'react';\nimport {\n retrieveLaunchParams,\n retrieveRawLaunchParams,\n retrieveRawInitData,\n retrieveAndroidDeviceData,\n retrieveAndroidDeviceDataFrom,\n type AndroidDeviceData,\n type RetrieveLaunchParamsResult,\n deepSnakeToCamelObjKeys,\n type DeepConvertSnakeKeysToCamelCase,\n} from '@tma.js/sdk';\n\n/**\n * Returns the underlying signal value updating it each time the signal value changes.\n * @param signal - a signal.\n * @param getServerSnapshot - an optional function returning the signal value snapshot. It is used\n * only during SSR to provide an initial value of the signal. When not set, defaults to the\n * signal itself.\n */\nexport function useSignal<T>(\n signal: {\n (): T;\n sub(fn: VoidFunction): VoidFunction;\n },\n getServerSnapshot?: () => T,\n): T {\n return useSyncExternalStore(\n onStoreChange => signal.sub(onStoreChange),\n signal,\n getServerSnapshot || signal,\n );\n}\n\n/**\n * @returns Launch parameters from any known source.\n * @param camelCase - should the output be camel-cased.\n */\nexport function useLaunchParams(camelCase?: false): RetrieveLaunchParamsResult;\n/**\n * @returns Launch parameters from any known source.\n * @param camelCase - should the output be camel-cased.\n */\nexport function useLaunchParams(\n camelCase: true,\n): DeepConvertSnakeKeysToCamelCase<RetrieveLaunchParamsResult>;\nexport function useLaunchParams(\n camelCase?: boolean,\n): RetrieveLaunchParamsResult | DeepConvertSnakeKeysToCamelCase<RetrieveLaunchParamsResult> {\n return useMemo(() => {\n const lp = retrieveLaunchParams();\n return camelCase ? deepSnakeToCamelObjKeys(lp) : lp;\n }, [camelCase]);\n}\n\n/**\n * @returns Launch parameters in a raw format from any known source.\n * @see retrieveRawLaunchParams\n */\nexport function useRawLaunchParams(): string {\n return useMemo(retrieveRawLaunchParams, []);\n}\n\n/**\n * @returns Raw init data from any known source.\n */\nexport function useRawInitData(): string | undefined {\n return useMemo(retrieveRawInitData, []);\n}\n\n/**\n * Retrieves Android device data from the navigator.userAgent.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n */\nexport function useAndroidDeviceData(): AndroidDeviceData {\n return useMemo(retrieveAndroidDeviceData, []);\n}\n\n/**\n * Retrieves Android device data from the specified User Agent.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n * @param userAgent - user agent.\n */\nexport function useAndroidDeviceDataFrom(userAgent: string): AndroidDeviceData {\n return useMemo(() => retrieveAndroidDeviceDataFrom(userAgent), [userAgent]);\n}\n"],"names":["useSignal","signal","getServerSnapshot","useSyncExternalStore","onStoreChange","useLaunchParams","camelCase","useMemo","lp","retrieveLaunchParams","deepSnakeToCamelObjKeys","useRawLaunchParams","retrieveRawLaunchParams","useRawInitData","retrieveRawInitData","useAndroidDeviceData","retrieveAndroidDeviceData","useAndroidDeviceDataFrom","userAgent","retrieveAndroidDeviceDataFrom"],"mappings":";;;AAoBgB,SAAAA,EACdC,GAIAC,GACG;AACI,SAAAC;AAAA,IACL,CAAAC,MAAiBH,EAAO,IAAIG,CAAa;AAAA,IACzCH;AAAA,IACAC,KAAqBD;AAAA,EACvB;AACF;AAcO,SAASI,EACdC,GAC0F;AAC1F,SAAOC,EAAQ,MAAM;AACnB,UAAMC,IAAKC,EAAqB;AACzB,WAAAH,IAAYI,EAAwBF,CAAE,IAAIA;AAAA,EAAA,GAChD,CAACF,CAAS,CAAC;AAChB;AAMO,SAASK,IAA6B;AACpC,SAAAJ,EAAQK,GAAyB,EAAE;AAC5C;AAKO,SAASC,IAAqC;AAC5C,SAAAN,EAAQO,GAAqB,EAAE;AACxC;AAMO,SAASC,IAA0C;AACjD,SAAAR,EAAQS,GAA2B,EAAE;AAC9C;AAOO,SAASC,EAAyBC,GAAsC;AAC7E,SAAOX,EAAQ,MAAMY,EAA8BD,CAAS,GAAG,CAACA,CAAS,CAAC;AAC5E;"}
1
+ {"version":3,"file":"index.js","sources":["../src/android.ts","../src/launch-params.ts","../src/useComputed.ts"],"sourcesContent":["import {\n type AndroidDeviceData,\n retrieveAndroidDeviceData,\n retrieveAndroidDeviceDataFrom,\n} from '@tma.js/sdk';\nimport { useMemo } from 'react';\n\n/**\n * @returns Android device data from `navigator.userAgent`.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n */\nexport function useAndroidDeviceData(): AndroidDeviceData {\n return useMemo(retrieveAndroidDeviceData, []);\n}\n\n/**\n * @returns Android device data from the user agent.\n * @param userAgent - user agent.\n * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent\n */\nexport function useAndroidDeviceDataFrom(userAgent: string): AndroidDeviceData {\n return useMemo(() => retrieveAndroidDeviceDataFrom(userAgent), [userAgent]);\n}\n","import {\n type LaunchParams,\n retrieveLaunchParams,\n retrieveRawInitData,\n retrieveRawLaunchParams,\n} from '@tma.js/sdk';\nimport { useMemo } from 'react';\n\n/**\n * @returns Launch parameters from any known source.\n * @throws {LaunchParamsRetrieveError} Launch parameters are missing or invalid.\n */\nexport function useLaunchParams(): LaunchParams {\n return useMemo(retrieveLaunchParams, []);\n}\n\n/**\n * @returns Launch parameters in the raw format from any known source.\n * @throws {LaunchParamsRetrieveError} Launch parameters are missing.\n */\nexport function useRawLaunchParams(): string {\n return useMemo(retrieveRawLaunchParams, []);\n}\n\n/**\n * @returns Init data in the raw format from any known source.\n * @throws {LaunchParamsRetrieveError} Launch parameters are missing or invalid.\n */\nexport function useRawInitData(): string | undefined {\n return useMemo(retrieveRawInitData, []);\n}\n","import type { Computed } from '@tma.js/sdk';\nimport { useSyncExternalStore } from 'react';\n\n/**\n * @returns The current value, re-rendering the React component whenever it changes.\n * @param computed - computed value, e.g. `backButton.isVisible` or `mainButton.state`.\n * @param getServerSnapshot - function returning the value used during server rendering and\n * hydration. Defaults to `computed`.\n * @example\n * const isVisible = useComputed(backButton.isVisible);\n * const { text } = useComputed(mainButton.state);\n */\nexport function useComputed<T>(computed: Computed<T>, getServerSnapshot: () => T = computed): T {\n return useSyncExternalStore(computed.subscribe, computed, getServerSnapshot);\n}\n"],"names":["useAndroidDeviceData","useMemo","retrieveAndroidDeviceData","useAndroidDeviceDataFrom","userAgent","retrieveAndroidDeviceDataFrom","useLaunchParams","retrieveLaunchParams","useRawLaunchParams","retrieveRawLaunchParams","useRawInitData","retrieveRawInitData","useComputed","computed","getServerSnapshot","useSyncExternalStore"],"mappings":";;;AAWO,SAASA,IAA0C;AACjD,SAAAC,EAAQC,GAA2B,EAAE;AAC9C;AAOO,SAASC,EAAyBC,GAAsC;AAC7E,SAAOH,EAAQ,MAAMI,EAA8BD,CAAS,GAAG,CAACA,CAAS,CAAC;AAC5E;ACVO,SAASE,IAAgC;AACvC,SAAAL,EAAQM,GAAsB,EAAE;AACzC;AAMO,SAASC,IAA6B;AACpC,SAAAP,EAAQQ,GAAyB,EAAE;AAC5C;AAMO,SAASC,IAAqC;AAC5C,SAAAT,EAAQU,GAAqB,EAAE;AACxC;AClBgB,SAAAC,EAAeC,GAAuBC,IAA6BD,GAAa;AAC9F,SAAOE,EAAqBF,EAAS,WAAWA,GAAUC,CAAiB;AAC7E;"}
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@tma.js/sdk-react",
3
- "version": "3.0.23",
4
- "description": "React bindings for Mini Apps client SDK. Contains hooks, components and other useful tools which allow usage of React along with Mini Apps client SDK.",
3
+ "version": "4.0.0-rc.0",
4
+ "description": "React bindings for the Telegram Mini Apps SDK.",
5
5
  "author": "Vladislav Kibenko <wolfram.deus@gmail.com>",
6
6
  "homepage": "https://github.com/Telegram-Mini-Apps/tma.js#readme",
7
7
  "repository": {
8
8
  "type": "git",
9
- "url": "git@github.com:Telegram-Mini-Apps/tma.js.git",
9
+ "url": "git+https://github.com/Telegram-Mini-Apps/tma.js.git",
10
10
  "directory": "packages/sdk-react"
11
11
  },
12
12
  "bugs": {
@@ -29,18 +29,17 @@
29
29
  "types": "./dist/dts/index.d.ts",
30
30
  "exports": {
31
31
  ".": {
32
+ "@tma.js/source": "./src/index.ts",
32
33
  "types": "./dist/dts/index.d.ts",
33
34
  "import": "./dist/index.js",
34
35
  "require": "./dist/index.cjs",
35
36
  "default": "./dist/index.cjs"
36
37
  }
37
38
  },
38
- "dependencies": {
39
- "@tma.js/sdk": "^3.3.0"
40
- },
41
39
  "peerDependencies": {
42
- "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
43
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
40
+ "@tma.js/sdk": "^4.0.0-rc.0",
41
+ "@types/react": "^18.0.0 || ^19.0.0",
42
+ "react": "^18.0.0 || ^19.0.0"
44
43
  },
45
44
  "peerDependenciesMeta": {
46
45
  "@types/react": {
@@ -48,15 +47,22 @@
48
47
  }
49
48
  },
50
49
  "devDependencies": {
51
- "@types/react": "^19.0.0",
52
- "react": "^19.0.0",
50
+ "@tma.js/sdk": "^4.0.0-rc.0",
51
+ "@types/react": "^18.3.12",
52
+ "@types/react-dom": "^18.3.1",
53
+ "react": "^18.3.1",
54
+ "react-dom": "^18.3.1",
55
+ "happy-dom": "^20.0.5",
53
56
  "tsconfig": "0.0.2"
54
57
  },
55
58
  "publishConfig": {
56
59
  "access": "public"
57
60
  },
58
61
  "scripts": {
62
+ "test": "vitest --run",
63
+ "lint": "eslint src",
64
+ "lint:fix": "pnpm run lint --fix",
59
65
  "typecheck": "tsc --noEmit",
60
- "build": "vite build"
66
+ "build": "rimraf dist && vite build"
61
67
  }
62
68
  }
@@ -1,42 +0,0 @@
1
- import { AndroidDeviceData, RetrieveLaunchParamsResult, DeepConvertSnakeKeysToCamelCase } from '@tma.js/sdk';
2
- /**
3
- * Returns the underlying signal value updating it each time the signal value changes.
4
- * @param signal - a signal.
5
- * @param getServerSnapshot - an optional function returning the signal value snapshot. It is used
6
- * only during SSR to provide an initial value of the signal. When not set, defaults to the
7
- * signal itself.
8
- */
9
- export declare function useSignal<T>(signal: {
10
- (): T;
11
- sub(fn: VoidFunction): VoidFunction;
12
- }, getServerSnapshot?: () => T): T;
13
- /**
14
- * @returns Launch parameters from any known source.
15
- * @param camelCase - should the output be camel-cased.
16
- */
17
- export declare function useLaunchParams(camelCase?: false): RetrieveLaunchParamsResult;
18
- /**
19
- * @returns Launch parameters from any known source.
20
- * @param camelCase - should the output be camel-cased.
21
- */
22
- export declare function useLaunchParams(camelCase: true): DeepConvertSnakeKeysToCamelCase<RetrieveLaunchParamsResult>;
23
- /**
24
- * @returns Launch parameters in a raw format from any known source.
25
- * @see retrieveRawLaunchParams
26
- */
27
- export declare function useRawLaunchParams(): string;
28
- /**
29
- * @returns Raw init data from any known source.
30
- */
31
- export declare function useRawInitData(): string | undefined;
32
- /**
33
- * Retrieves Android device data from the navigator.userAgent.
34
- * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent
35
- */
36
- export declare function useAndroidDeviceData(): AndroidDeviceData;
37
- /**
38
- * Retrieves Android device data from the specified User Agent.
39
- * @see https://core.telegram.org/bots/webapps#additional-data-in-user-agent
40
- * @param userAgent - user agent.
41
- */
42
- export declare function useAndroidDeviceDataFrom(userAgent: string): AndroidDeviceData;