@tma.js/sdk-react 0.4.3

package/dist/types/lib/haptic-feedback/types.d.ts

@@ -0,0 +1 @@
+export type { HapticFeedback } from '@tma.js/sdk';

package/dist/types/lib/haptic-feedback/useHapticFeedback.d.ts

@@ -0,0 +1,5 @@
+import type { HapticFeedback } from './types.js';
+/**
+ * Returns HapticFeedback component instance.
+ */
+export declare function useHapticFeedback(): HapticFeedback;

package/dist/types/lib/haptic-feedback/withHapticFeedback.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { HapticFeedback } from './types.js';
+/**
+ * HOC which passes HapticFeedback SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withHapticFeedback<P extends {
+    hapticFeedback?: HapticFeedback;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'hapticFeedback'>>;

package/dist/types/lib/hooks.d.ts

@@ -0,0 +1,26 @@
+import type { PostEvent } from '@tma.js/sdk/types';
+interface Trackable {
+    on: (event: any, ...args: any[]) => void;
+    off: (event: any, ...args: any[]) => void;
+}
+type EventName<T extends Trackable> = T extends {
+    on(event: infer E, ...args: any[]): any;
+} ? E : never;
+/**
+ * The hook which returns function used for force update.
+ */
+export declare function useForceUpdate(): (() => void);
+/**
+ * The hook which listens to the specified object events and calls force update
+ * in case, some of them was emitted.
+ * @param trackable - object which allows events listening.
+ * @param events - events to listen. This array will be memoized during first
+ * hook call.
+ */
+export declare function useEventsTracking<T extends Trackable>(trackable: T, events: EventName<T>[]): void;
+/**
+ * Returns event posting function which was created during SDK
+ * initialization.
+ */
+export declare function usePostEvent(): PostEvent;
+export {};

package/dist/types/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from './back-button/index.js';
+export * from './closing-behavior/index.js';
+export * from './haptic-feedback/index.js';
+export * from './init-data/index.js';
+export * from './launch-params/index.js';
+export * from './main-button/index.js';
+export * from './popup/index.js';
+export * from './qr-scanner/index.js';
+export * from './theme-params/index.js';
+export * from './viewport/index.js';
+export * from './web-app/index.js';
+export * from './cloud-storage.js';
+export { usePostEvent } from './hooks.js';

package/dist/types/lib/init-data/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useInitData.js';
+export * from './withInitData.js';

package/dist/types/lib/init-data/types.d.ts

@@ -0,0 +1 @@
+export type { InitData } from '@tma.js/sdk';

package/dist/types/lib/init-data/useInitData.d.ts

@@ -0,0 +1,5 @@
+import type { InitData } from './types.js';
+/**
+ * Returns InitData component instance.
+ */
+export declare function useInitData(): InitData | null;

package/dist/types/lib/init-data/withInitData.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { InitData } from './types.js';
+/**
+ * HOC which passes InitData SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withInitData<P extends {
+    initData?: InitData;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'initData'>>;

package/dist/types/lib/launch-params/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useLaunchParams.js';
+export * from './withLaunchParams.js';

package/dist/types/lib/launch-params/types.d.ts

@@ -0,0 +1 @@
+export type { LaunchParams } from '@tma.js/sdk';

package/dist/types/lib/launch-params/useLaunchParams.d.ts

@@ -0,0 +1,5 @@
+import type { LaunchParams } from './types.js';
+/**
+ * The hook which returns launch parameters initially passed to Web App.
+ */
+export declare function useLaunchParams(): LaunchParams;

package/dist/types/lib/launch-params/withLaunchParams.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { LaunchParams } from './types.js';
+/**
+ * HOC which passes launch parameters to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withLaunchParams<P extends {
+    launchParams?: LaunchParams;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'launchParams'>>;

package/dist/types/lib/main-button/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useMainButton.js';
+export * from './withMainButton.js';

package/dist/types/lib/main-button/types.d.ts

@@ -0,0 +1 @@
+export type { MainButton } from '@tma.js/sdk';

package/dist/types/lib/main-button/useMainButton.d.ts

@@ -0,0 +1,5 @@
+import type { MainButton } from './types.js';
+/**
+ * Returns MainButton component instance.
+ */
+export declare function useMainButton(): MainButton;

package/dist/types/lib/main-button/withMainButton.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { MainButton } from './types.js';
+/**
+ * HOC which passes MainButton SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withMainButton<P extends {
+    mainButton?: MainButton;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'mainButton'>>;

package/dist/types/lib/popup/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './usePopup.js';
+export * from './withPopup.js';

package/dist/types/lib/popup/types.d.ts

@@ -0,0 +1 @@
+export type { Popup } from '@tma.js/sdk';

package/dist/types/lib/popup/usePopup.d.ts

@@ -0,0 +1,5 @@
+import type { Popup } from './types.js';
+/**
+ * Returns Popup component instance.
+ */
+export declare function usePopup(): Popup;

package/dist/types/lib/popup/withPopup.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { Popup } from './types.js';
+/**
+ * HOC which passes Popup SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withPopup<P extends {
+    popup?: Popup;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'popup'>>;

package/dist/types/lib/qr-scanner/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useQRScanner.js';
+export * from './withQRScanner.js';

package/dist/types/lib/qr-scanner/types.d.ts

@@ -0,0 +1 @@
+export type { QRScanner } from '@tma.js/sdk';

package/dist/types/lib/qr-scanner/useQRScanner.d.ts

@@ -0,0 +1,5 @@
+import type { QRScanner } from './types.js';
+/**
+ * Returns QRScanner component instance.
+ */
+export declare function useQRScanner(): QRScanner;

package/dist/types/lib/qr-scanner/withQRScanner.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { QRScanner } from './types.js';
+/**
+ * HOC which passes QRScanner SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withQRScanner<P extends {
+    qrScanner?: QRScanner;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'qrScanner'>>;

package/dist/types/lib/theme-params/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useThemeParams.js';
+export * from './withThemeParams.js';

package/dist/types/lib/theme-params/types.d.ts

@@ -0,0 +1 @@
+export type { ThemeParams } from '@tma.js/sdk';

package/dist/types/lib/theme-params/useThemeParams.d.ts

@@ -0,0 +1,5 @@
+import type { ThemeParams } from './types.js';
+/**
+ * Returns ThemeParams component instance.
+ */
+export declare function useThemeParams(): ThemeParams;

package/dist/types/lib/theme-params/withThemeParams.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { ThemeParams } from './types.js';
+/**
+ * HOC which passes ThemeParams SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withThemeParams<P extends {
+    themeParams?: ThemeParams;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'themeParams'>>;

package/dist/types/lib/viewport/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useViewport.js';
+export * from './withViewport.js';

package/dist/types/lib/viewport/types.d.ts

@@ -0,0 +1 @@
+export type { Viewport } from '@tma.js/sdk';

package/dist/types/lib/viewport/useViewport.d.ts

@@ -0,0 +1,5 @@
+import type { Viewport } from './types.js';
+/**
+ * Returns Viewport component instance.
+ */
+export declare function useViewport(): Viewport;

package/dist/types/lib/viewport/withViewport.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { Viewport } from './types.js';
+/**
+ * HOC which passes Viewport SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withViewport<P extends {
+    viewport?: Viewport;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'viewport'>>;

package/dist/types/lib/web-app/index.d.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useWebApp.js';
+export * from './withWebApp.js';

package/dist/types/lib/web-app/types.d.ts

@@ -0,0 +1 @@
+export type { WebApp } from '@tma.js/sdk';

package/dist/types/lib/web-app/useWebApp.d.ts

@@ -0,0 +1,5 @@
+import type { WebApp } from './types.js';
+/**
+ * Returns WebApp component instance.
+ */
+export declare function useWebApp(): WebApp;

package/dist/types/lib/web-app/withWebApp.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { WebApp } from './types.js';
+/**
+ * HOC which passes WebApp SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withWebApp<P extends {
+    webApp?: WebApp;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'webApp'>>;

package/dist/types/provider/SDKProvider.d.ts

@@ -0,0 +1,10 @@
+import React, { type PropsWithChildren } from 'react';
+import { type InitOptions } from '@tma.js/sdk';
+export type SDKInitOptions = InitOptions;
+export type SDKProviderProps = PropsWithChildren<{
+    initOptions?: SDKInitOptions;
+}>;
+/**
+ * Component which provides access to SDK components.
+ */
+export declare const SDKProvider: React.NamedExoticComponent<SDKProviderProps>;

package/dist/types/provider/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SDKContext } from './types.js';
+export declare const sdkContext: import("react").Context<SDKContext>;

package/dist/types/provider/hocs.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentType } from 'react';
+import type { SDKContext } from './types.js';
+/**
+ * HOC which passes SDK context to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export declare function withSDK<P extends {
+    sdk?: SDKContext;
+}>(Component: ComponentType<P>): ComponentType<Omit<P, 'sdk'>>;

package/dist/types/provider/hooks.d.ts

@@ -0,0 +1,11 @@
+import type { SDKComponent, SDKComponentName } from './types.js';
+/**
+ * Returns current SDK information.
+ */
+export declare const useSDK: () => import("./types.js").SDKContext;
+/**
+ * Returns value by its field name from SDK init result.
+ * @param name - component name.
+ * @throws {Error} SDK is not initialized.
+ */
+export declare function useUnit<N extends SDKComponentName>(name: N): SDKComponent<N>;

package/dist/types/provider/index.d.ts

@@ -0,0 +1,5 @@
+export * from './context.js';
+export * from './hocs.js';
+export * from './hooks.js';
+export * from './SDKProvider.js';
+export * from './types.js';

package/dist/types/provider/types.d.ts

@@ -0,0 +1,28 @@
+import type { InitResult } from '@tma.js/sdk';
+/**
+ * List of provided SDK components.
+ */
+export type SDKComponents = InitResult;
+/**
+ * Known SDK component name.
+ */
+export type SDKComponentName = keyof SDKComponents;
+/**
+ * Returns SDK component type by its name.
+ */
+export type SDKComponent<N extends SDKComponentName> = SDKComponents[N];
+export interface SDKContext {
+    /**
+     * Components ready to use. This value will be null until initialization
+     * is done.
+     */
+    components: SDKComponents | null;
+    /**
+     * States, that SDK called `init()` method.
+     */
+    didInit: boolean;
+    /**
+     * Error occurred during initialization.
+     */
+    error: unknown | null;
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@tma.js/sdk-react",
+  "version": "0.4.3",
+  "description": "React bindings for Web Apps client SDK. Contains hooks, components and other useful tools which allow usage of React along with Web Apps client SDK.",
+  "author": "Vladislav Kibenko <wolfram.deus@gmail.com>",
+  "homepage": "https://github.com/Telegram-Mini-Apps/tma.js#readme",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Telegram-Mini-Apps/tma.js.git",
+    "directory": "packages/sdk-react"
+  },
+  "bugs": {
+    "url": "https://github.com/Telegram-Mini-Apps/tma.js/issues"
+  },
+  "keywords": [
+    "telegram-mini-apps",
+    "typescript",
+    "sdk",
+    "react"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "dist/lib/index.cjs",
+  "browser": "dist/lib/browser.js",
+  "module": "dist/lib/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/lib/index.mjs",
+      "require": "./dist/lib/index.cjs",
+      "default": "./dist/lib/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/lib/*.mjs",
+      "require": "./dist/lib/*.cjs",
+      "default": "./dist/lib/*.cjs"
+    }
+  },
+  "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@tma.js/bridge": "1.3.2",
+    "@tma.js/sdk": "0.11.3"
+  },
+  "devDependencies": {
+    "tsconfig": "0.0.2",
+    "eslint-config-custom": "0.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint -c .eslintrc.cjs src/**/*",
+    "build": "rimraf dist && rollup --config rollup.config.js"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './lib/index.js';
+export * from './provider/index.js';

package/src/lib/back-button/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useBackButton.js';
+export * from './withBackButton.js';

package/src/lib/back-button/types.ts

@@ -0,0 +1 @@
+export type { BackButton } from '@tma.js/sdk';

package/src/lib/back-button/useBackButton.ts

@@ -0,0 +1,13 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { BackButton } from './types.js';
+
+/**
+ * Returns BackButton component instance.
+ */
+export function useBackButton(): BackButton {
+  const backButton = useUnit('backButton');
+  useEventsTracking(backButton, ['isVisibleChanged']);
+
+  return backButton;
+}

package/src/lib/back-button/withBackButton.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useBackButton } from './useBackButton.js';
+import type { BackButton } from './types.js';
+
+/**
+ * HOC which passes BackButton SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withBackButton<P extends { backButton?: BackButton }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'backButton'>> {
+  return function WithBackButton(props: Omit<P, 'backButton'>) {
+    const p = { ...props, backButton: useBackButton() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/closing-behavior/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useClosingBehaviour.js';
+export * from './withClosingBehaviour.js';

package/src/lib/closing-behavior/types.ts

@@ -0,0 +1 @@
+export type { ClosingBehaviour } from '@tma.js/sdk';

package/src/lib/closing-behavior/useClosingBehaviour.ts

@@ -0,0 +1,13 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { ClosingBehaviour } from './types.js';
+
+/**
+ * Returns ClosingBehaviour component instance.
+ */
+export function useClosingBehaviour(): ClosingBehaviour {
+  const component = useUnit('closingBehavior');
+  useEventsTracking(component, ['isConfirmationNeededChanged']);
+
+  return component;
+}

package/src/lib/closing-behavior/withClosingBehaviour.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useClosingBehaviour } from './useClosingBehaviour.js';
+import type { ClosingBehaviour } from './types.js';
+
+/**
+ * HOC which passes ClosingBehaviour SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withClosingBehaviour<P extends { closingBehaviour?: ClosingBehaviour }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'closingBehaviour'>> {
+  return function WithClosingConfirmation(props: Omit<P, 'closingBehaviour'>) {
+    const p = { ...props, closingBehaviour: useClosingBehaviour() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/cloud-storage.tsx

@@ -0,0 +1,28 @@
+import React, { type ComponentType } from 'react';
+
+import type { CloudStorage } from '@tma.js/sdk';
+
+import { useUnit } from '../provider/index.js';
+
+/**
+ * Returns CloudStorage component instance.
+ */
+export function useCloudStorage(): CloudStorage {
+  return useUnit('cloudStorage');
+}
+
+/**
+ * HOC which passes CloudStorage SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withCloudStorage<P extends { cloudStorage?: CloudStorage }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'cloudStorage'>> {
+  return function WithCloudStorage(props: Omit<P, 'cloudStorage'>) {
+    const p = { ...props, cloudStorage: useCloudStorage() } as P;
+
+    return <Component {...p} />;
+  };
+}
+
+export type { CloudStorage };

package/src/lib/haptic-feedback/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useHapticFeedback.js';
+export * from './withHapticFeedback.js';

package/src/lib/haptic-feedback/types.ts

@@ -0,0 +1 @@
+export type { HapticFeedback } from '@tma.js/sdk';

package/src/lib/haptic-feedback/useHapticFeedback.ts

@@ -0,0 +1,9 @@
+import { useUnit } from '../../provider/index.js';
+import type { HapticFeedback } from './types.js';
+
+/**
+ * Returns HapticFeedback component instance.
+ */
+export function useHapticFeedback(): HapticFeedback {
+  return useUnit('haptic');
+}

package/src/lib/haptic-feedback/withHapticFeedback.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useHapticFeedback } from './useHapticFeedback.js';
+import type { HapticFeedback } from './types.js';
+
+/**
+ * HOC which passes HapticFeedback SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withHapticFeedback<P extends { hapticFeedback?: HapticFeedback }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'hapticFeedback'>> {
+  return function WithHapticFeedback(props: Omit<P, 'hapticFeedback'>) {
+    const p = { ...props, hapticFeedback: useHapticFeedback() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/hooks.ts

@@ -0,0 +1,51 @@
+import { useCallback, useState, useEffect } from 'react';
+import type { PostEvent } from '@tma.js/sdk/types';
+import { useUnit } from '../provider/index.js';
+
+interface Trackable {
+  on: (event: any, ...args: any[]) => void;
+  off: (event: any, ...args: any[]) => void;
+}
+
+type EventName<T extends Trackable> = T extends {
+  on(event: infer E, ...args: any[]): any
+} ? E : never;
+
+/**
+ * The hook which returns function used for force update.
+ */
+export function useForceUpdate(): (() => void) {
+  const [, setHash] = useState(0);
+  // TODO: Maybe just assign new symbol?
+  return useCallback(() => setHash((hash) => (hash + 1) % 1_000_000), []);
+}
+
+/**
+ * The hook which listens to the specified object events and calls force update
+ * in case, some of them was emitted.
+ * @param trackable - object which allows events listening.
+ * @param events - events to listen. This array will be memoized during first
+ * hook call.
+ */
+export function useEventsTracking<T extends Trackable>(
+  trackable: T,
+  events: EventName<T>[],
+) {
+  const forceUpdate = useForceUpdate();
+
+  useEffect(() => {
+    // Start listening to each event.
+    events.forEach((event) => trackable.on(event, forceUpdate));
+
+    // On cleanup remove event listeners.
+    return () => events.forEach((event) => trackable.off(event, forceUpdate));
+  }, [trackable, forceUpdate, events]);
+}
+
+/**
+ * Returns event posting function which was created during SDK
+ * initialization.
+ */
+export function usePostEvent(): PostEvent {
+  return useUnit('postEvent');
+}