@tma.js/sdk-react 0.5.4 → 1.0.0

package/src/provider/SDKProvider.tsx

@@ -1,47 +1,64 @@
-import React, {
-  memo,
-  useEffect,
-  useMemo,
-  useState,
-  type PropsWithChildren,
-} from 'react';
-import { init, type InitOptions } from '@tma.js/sdk';
+import { init } from '@tma.js/sdk';
+import React, { useEffect, useMemo, useState } from 'react';
 
-import { sdkContext } from './context.js';
-import type { SDKComponents, SDKContext } from './types.js';
+import { SDKContext } from './SDKContext.js';
+import type { SDKContextType, SDKProviderProps } from './types.js';
+import type { InitResult } from '../types.js';
 
-export type SDKInitOptions = InitOptions;
+function AsyncProvider({ options, children }: SDKProviderProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<unknown | undefined>();
+  const [initResult, setInitResult] = useState<InitResult | undefined>();
 
-export type SDKProviderProps = PropsWithChildren<{ initOptions?: SDKInitOptions }>;
-
-/**
- * Component which provides access to SDK components.
- */
-export const SDKProvider = memo<SDKProviderProps>((props) => {
-  const { children, initOptions } = props;
-  const [didInit, setDidInit] = useState(false);
-  const [error, setError] = useState<null | unknown>(null);
-  const [components, setComponents] = useState<SDKComponents | null>(null);
-
-  // Initialize SDK on DOM attach.
   useEffect(() => {
-    // Update init status.
-    setDidInit(true);
+    setLoading(true);
 
-    // Init SDK.
-    init(initOptions)
-      .then(setComponents)
-      .catch(setError);
+    init({ ...options, async: true })
+      .then(setInitResult)
+      .catch(setError)
+      .finally(() => setLoading(false));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const context = useMemo<SDKContext>(() => ({
-    components,
-    didInit,
-    error,
-  }), [didInit, components, error]);
+  const context = useMemo<SDKContextType>(() => {
+    const result: SDKContextType = { loading };
+    if (error) {
+      result.error = error;
+    }
+
+    if (initResult) {
+      result.initResult = initResult;
+    }
+
+    return result;
+  }, [loading, initResult, error]);
+
+  return <SDKContext.Provider value={context}>{children}</SDKContext.Provider>;
+}
 
-  return <sdkContext.Provider value={context}>{children}</sdkContext.Provider>;
-});
+function SyncProvider({ options = {}, children }: SDKProviderProps) {
+  const context = useMemo<SDKContextType>(() => {
+    const result: SDKContextType = { loading: false };
 
-SDKProvider.displayName = 'SDKProvider';
+    try {
+      result.initResult = init({ ...options, async: false });
+    } catch (e) {
+      result.error = e;
+    }
+
+    return result;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <SDKContext.Provider value={context}>{children}</SDKContext.Provider>;
+}
+
+/**
+ * Component which provides access to SDK initialization state.
+ */
+export function SDKProvider(props: SDKProviderProps) {
+  // eslint-disable-next-line react/destructuring-assignment
+  return props.options?.async
+    ? <AsyncProvider {...props} />
+    : <SyncProvider {...props} />;
+}

package/src/provider/index.ts

@@ -1,5 +1,7 @@
-export * from './context.js';
-export * from './hocs.js';
-export * from './hooks.js';
+export * from './SDKContext.js';
 export * from './SDKProvider.js';
 export * from './types.js';
+export * from './useInitResultDynamicValue.js';
+export * from './useInitResultValue.js';
+export * from './useSDKContext.js';
+export * from './withSDKContext.js';

package/src/provider/types.ts

@@ -1,34 +1,27 @@
-import type { InitResult } from '@tma.js/sdk';
+import type { PropsWithChildren } from 'react';
 
-/**
- * List of provided SDK components.
- */
-export type SDKComponents = InitResult;
+import type { InitOptions, InitResult } from '../types.js';
 
-/**
- * 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 type SDKProviderProps = PropsWithChildren<{
+  /**
+   * Init function options.
+   */
+  options?: InitOptions;
+}>;
 
-export interface SDKContext {
+export interface SDKContextType {
   /**
-   * Components ready to use. This value will be null until initialization
-   * is done.
+   * Error occurred during initialization.
    */
-  components: SDKComponents | null;
+  error?: unknown;
 
   /**
-   * States, that SDK called `init()` method.
+   * Initialization result.
    */
-  didInit: boolean;
+  initResult?: InitResult;
 
   /**
-   * Error occurred during initialization.
+   * True if SDK is loading.
    */
-  error: unknown | null;
+  loading: boolean;
 }

package/src/provider/useInitResultDynamicValue.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+import { useInitResultValue } from './useInitResultValue.js';
+import type {
+  DynamicInitResultKey,
+  InitResultValue,
+  Trackable,
+} from '../types.js';
+
+function shallowCopy<T>(value: T): T {
+  return Object.create(
+    Object.getPrototypeOf(value),
+    Object.getOwnPropertyDescriptors(value),
+  );
+}
+
+export function useInitResultDynamicValue<K extends DynamicInitResultKey>(
+  initResultKey: K,
+): InitResultValue<K> {
+  // Extract init result value.
+  const initial = useInitResultValue(initResultKey);
+
+  // Create value which will be returned to the external environment.
+  const [copy, setCopy] = useState(shallowCopy(initial));
+
+  // Effect which listens to change event and calls update.
+  useEffect(() => {
+    return (initial as Trackable).on('change', () => {
+      setCopy(shallowCopy(initial));
+    });
+  }, [initial]);
+
+  return copy;
+}

package/src/provider/useInitResultValue.ts

@@ -0,0 +1,16 @@
+import { useSDKContext } from './useSDKContext.js';
+import type { InitResultKey, InitResultValue } from '../types.js';
+
+/**
+ * Returns value by its field name from SDK init result.
+ * @param key - init result key.
+ * @throws {Error} SDK is not initialized.
+ */
+export function useInitResultValue<K extends InitResultKey>(key: K): InitResultValue<K> {
+  const { initResult } = useSDKContext();
+
+  if (!initResult) {
+    throw new Error(`Unable to get init result key "${key}" as long as SDK is not initialized`);
+  }
+  return initResult[key];
+}

package/src/provider/useSDKContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { SDKContext } from './SDKContext.js';
+import type { SDKContextType } from './types.js';
+
+/**
+ * Returns current SDK information.
+ */
+export function useSDKContext(): SDKContextType {
+  return useContext(SDKContext);
+}

package/src/provider/withSDKContext.tsx

@@ -0,0 +1,21 @@
+import React, { type ComponentType } from 'react';
+
+import type { SDKContextType } from './types.js';
+import { useSDKContext } from './useSDKContext.js';
+
+/**
+ * HOC which passes SDK context to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withSDKContext<P extends { sdk?: SDKContextType }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'sdk'>> {
+  return function WithSDKContext(props: Omit<P, 'sdk'>) {
+    const p = {
+      ...props,
+      sdk: useSDKContext(),
+    } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/tools/back-button.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve BackButton component.
+ */
+export const useBackButton = createHook('backButton', true);
+
+/**
+ * HOC to wrap specified component to pass BackButton instance.
+ */
+export const withBackButton = createHoc('backButton', useBackButton);

package/src/tools/closing-behavior.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve ClosingBehavior component.
+ */
+export const useClosingBehavior = createHook('closingBehavior', true);
+
+/**
+ * HOC to wrap specified component to pass ClosingBehavior instance.
+ */
+export const withClosingBehavior = createHoc('closingBehavior', useClosingBehavior);

package/src/tools/cloud-storage.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve CloudStorage component.
+ */
+export const useCloudStorage = createHook('cloudStorage');
+
+/**
+ * HOC to wrap specified component to pass CloudStorage instance.
+ */
+export const withCloudStorage = createHoc('cloudStorage', useCloudStorage);

package/src/tools/haptic-feedback.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve HapticFeedback component.
+ */
+export const useHapticFeedback = createHook('hapticFeedback');
+
+/**
+ * HOC to wrap specified component to pass HapticFeedback instance.
+ */
+export const withHapticFeedback = createHoc('hapticFeedback', useHapticFeedback);

package/src/tools/index.ts

@@ -0,0 +1,16 @@
+export * from './back-button.js';
+export * from './closing-behavior.js';
+export * from './cloud-storage.js';
+export * from './haptic-feedback.js';
+export * from './init-data.js';
+export * from './init-data-raw.js';
+export * from './invoice.js';
+export * from './launch-params.js';
+export * from './main-button.js';
+export * from './mini-app.js';
+export * from './popup.js';
+export * from './post-event.js';
+export * from './qr-scanner.js';
+export * from './theme-params.js';
+export * from './utils.js';
+export * from './viewport.js';

package/src/tools/init-data-raw.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve init data raw representation.
+ */
+export const useInitDataRaw = createHook('initDataRaw');
+
+/**
+ * HOC to wrap specified component to pass init data raw representation.
+ */
+export const withInitDataRaw = createHoc('initDataRaw', useInitDataRaw);

package/src/tools/init-data.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve InitData component.
+ */
+export const useInitData = createHook('initData');
+
+/**
+ * HOC to wrap specified component to pass InitData instance.
+ */
+export const withInitData = createHoc('initData', useInitData);

package/src/tools/invoice.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Invoice component.
+ */
+export const useInvoice = createHook('invoice', true);
+
+/**
+ * HOC to wrap specified component to pass Invoice instance.
+ */
+export const withInvoice = createHoc('invoice', useInvoice);

package/src/tools/launch-params.tsx

@@ -0,0 +1,21 @@
+import { type LaunchParams, retrieveLaunchData } from '@tma.js/sdk';
+import React, { type ComponentType, useMemo } from 'react';
+
+/**
+ * Hooks to retrieve launch parameters.
+ */
+export function useLaunchParams(): LaunchParams {
+  return useMemo(() => retrieveLaunchData().launchParams, []);
+}
+
+/**
+ * HOC to wrap specified component to pass launch parameters.
+ * @param Component - wrapped component.
+ */
+export function withLaunchParams<P extends { launchParams?: LaunchParams }>(
+  Component: ComponentType<P>,
+) {
+  return function WithInvoice(props: P) {
+    return <Component {...props} launchParams={useLaunchParams()} />;
+  };
+}

package/src/tools/main-button.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve MainButton component.
+ */
+export const useMainButton = createHook('mainButton', true);
+
+/**
+ * HOC to wrap specified component to pass MainButton instance.
+ */
+export const withMainButton = createHoc('mainButton', useMainButton);

package/src/tools/mini-app.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve MiniApp component.
+ */
+export const useMiniApp = createHook('miniApp', true);
+
+/**
+ * HOC to wrap specified component to pass MiniApp instance.
+ */
+export const withMiniApp = createHoc('miniApp', useMiniApp);

package/src/tools/popup.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Popup component.
+ */
+export const usePopup = createHook('popup', true);
+
+/**
+ * HOC to wrap specified component to pass Popup instance.
+ */
+export const withPopup = createHoc('popup', usePopup);

package/src/tools/post-event.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve postEvent function.
+ */
+export const usePostEvent = createHook('postEvent');
+
+/**
+ * HOC to wrap specified component to pass postEvent function.
+ */
+export const withPostEvent = createHoc('postEvent', usePostEvent);

package/src/tools/qr-scanner.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve QRScanner component.
+ */
+export const useQRScanner = createHook('qrScanner', true);
+
+/**
+ * HOC to wrap specified component to pass QRScanner instance.
+ */
+export const withQRScanner = createHoc('qrScanner', useQRScanner);

package/src/tools/theme-params.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve ThemeParams component.
+ */
+export const useThemeParams = createHook('themeParams', true);
+
+/**
+ * HOC to wrap specified component to pass ThemeParams instance.
+ */
+export const withThemeParams = createHoc('themeParams', useThemeParams);

package/src/tools/utils.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Utils component.
+ */
+export const useUtils = createHook('utils');
+
+/**
+ * HOC to wrap specified component to pass Utils instance.
+ */
+export const withUtils = createHoc('utils', useUtils);

package/src/tools/viewport.ts

@@ -0,0 +1,12 @@
+import { createHoc } from '../createHoc.js';
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Viewport component.
+ */
+export const useViewport = createHook('viewport', true);
+
+/**
+ * HOC to wrap specified component to pass Viewport instance.
+ */
+export const withViewport = createHoc('viewport', useViewport);

package/src/types.ts

@@ -0,0 +1,29 @@
+import type { InitOptions, InitResult } from '@tma.js/sdk';
+
+export { InitOptions, InitResult };
+
+export interface Trackable {
+  on(event: 'change', listener: () => void): () => void;
+}
+
+/**
+ * SDK init result keys, which describe values with trackable changes.
+ */
+export type DynamicInitResultKey = {
+  [K in InitResultKey]-?: InitResultValue<K> extends Trackable ? K : never;
+}[InitResultKey];
+
+/**
+ * SDK init result keys, which describe static values.
+ */
+export type StaticInitResultKey = Exclude<InitResultKey, DynamicInitResultKey>;
+
+/**
+ * SDK initialization result key.
+ */
+export type InitResultKey = keyof InitResult;
+
+/**
+ * Returns SDK init result value type by its key.
+ */
+export type InitResultValue<K extends InitResultKey> = InitResult[K];

package/dist/dts/lib/back-button/index.d.ts

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

package/dist/dts/lib/back-button/types.d.ts

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

package/dist/dts/lib/back-button/useBackButton.d.ts

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

package/dist/dts/lib/back-button/withBackButton.d.ts

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

package/dist/dts/lib/closing-behavior/index.d.ts

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

package/dist/dts/lib/closing-behavior/types.d.ts

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

package/dist/dts/lib/closing-behavior/useClosingBehaviour.d.ts

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

package/dist/dts/lib/closing-behavior/withClosingBehaviour.d.ts

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

package/dist/dts/lib/cloud-storage.d.ts

@@ -1,14 +0,0 @@
-import { type ComponentType } from 'react';
-import type { CloudStorage } from '@tma.js/sdk';
-/**
- * Returns CloudStorage component instance.
- */
-export declare function useCloudStorage(): CloudStorage;
-/**
- * HOC which passes CloudStorage SDK component to wrapped React component.
- * @param Component - component to wrap.
- */
-export declare function withCloudStorage<P extends {
-    cloudStorage?: CloudStorage;
-}>(Component: ComponentType<P>): ComponentType<Omit<P, 'cloudStorage'>>;
-export type { CloudStorage };

package/dist/dts/lib/haptic-feedback/index.d.ts

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-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/dts/lib/hooks.d.ts

@@ -1,26 +0,0 @@
-import type { PostEvent } from '@tma.js/sdk';
-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 {};