@tma.js/sdk-solid 0.1.19 → 1.0.0

package/src/createHook.ts

@@ -0,0 +1,33 @@
+import type { Accessor } from 'solid-js';
+
+import { useInitResultDynamicValue, useInitResultValue } from './provider/index.js';
+import type {
+  DynamicInitResultKey,
+  InitResultKey,
+  InitResultValue,
+  StaticInitResultKey,
+} from './types.js';
+
+export type Hook<K extends InitResultKey> = () => Accessor<InitResultValue<K>>;
+
+/**
+ * Creates hook to retrieve static init result value.
+ * @param initResultKey - init result key.
+ */
+export function createHook<K extends StaticInitResultKey>(initResultKey: K): Hook<K>;
+
+/**
+ * Creates hook to retrieve dynamic init result value.
+ * @param initResultKey - init result key.
+ * @param dynamic - flag to let function know this init result value is dynamic.
+ */
+export function createHook<K extends DynamicInitResultKey>(
+  initResultKey: K,
+  dynamic: true,
+): Hook<K>;
+
+export function createHook(initResultKey: InitResultKey, dynamic?: true): Hook<any> {
+  return dynamic
+    ? () => useInitResultDynamicValue(initResultKey as DynamicInitResultKey)
+    : () => useInitResultValue(initResultKey);
+}

package/src/index.ts

@@ -1,6 +1,28 @@
-export * from './context.js';
-export * from './hooks.js';
-export * from './SDKProvider.jsx';
-export * from './types.js';
-export * from './useSDK.js';
-export { classNames, mergeClassNames } from '@tma.js/utils';
+export {
+  useThemeParams,
+  useInitData,
+  useBackButton,
+  useClosingBehavior,
+  useInitDataRaw,
+  useCloudStorage,
+  useLaunchParams,
+  useMainButton,
+  useHapticFeedback,
+  useInvoice,
+  useMiniApp,
+  usePopup,
+  usePostEvent,
+  useQRScanner,
+  useUtils,
+  useViewport,
+} from './tools/index.js';
+export {
+  useSDKContext,
+  SDKProvider,
+  type SDKProviderProps,
+  type SDKContextType,
+} from './provider/index.js';
+export type {
+  InitOptions,
+  InitResult,
+} from './types.js';

package/src/provider/SDKContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'solid-js';
+
+import type { SDKContextType } from './types.js';
+
+export const SDKContext = createContext<SDKContextType>({
+  loading: () => false,
+  error: () => undefined,
+  initResult: () => undefined,
+}, { name: 'SDKContext' });

package/src/provider/SDKProvider.tsx

@@ -0,0 +1,21 @@
+import { init } from '@tma.js/sdk';
+import { createMemo, createResource } from 'solid-js';
+
+import { SDKContext } from './SDKContext.js';
+import type { SDKProviderProps } from './types.js';
+
+export function SDKProvider(props: SDKProviderProps) {
+  const [data] = createResource(() => props.options, init);
+
+  const initResult = createMemo(() => {
+    return data.state === 'ready' ? data() : undefined;
+  });
+  const loading = createMemo(() => data.loading);
+  const error = createMemo(() => (data.error === undefined ? null : data.error));
+
+  return (
+    <SDKContext.Provider value={{ initResult, loading, error }}>
+      {props.children}
+    </SDKContext.Provider>
+  );
+}

package/src/provider/index.ts

@@ -0,0 +1,6 @@
+export * from './SDKContext.js';
+export * from './SDKProvider.js';
+export * from './types.js';
+export * from './useSDKContext.js';
+export * from './useInitResultDynamicValue.js';
+export * from './useInitResultValue.js';

package/src/provider/types.ts

@@ -0,0 +1,26 @@
+import type { InitOptions, InitResult } from '@tma.js/sdk';
+import type { Accessor, ParentProps } from 'solid-js';
+
+export type SDKProviderProps = ParentProps<{
+  /**
+   * Init function options.
+   */
+  options?: InitOptions;
+}>;
+
+export interface SDKContextType {
+  /**
+   * Error occurred during initialization.
+   */
+  error: Accessor<unknown | undefined>;
+
+  /**
+   * Initialization result.
+   */
+  initResult: Accessor<InitResult | undefined>;
+
+  /**
+   * True if SDK is loading.
+   */
+  loading: Accessor<boolean>;
+}

package/src/provider/useInitResultDynamicValue.ts

@@ -0,0 +1,34 @@
+import {
+  type Accessor,
+  createEffect,
+  createSignal,
+  onCleanup,
+} from 'solid-js';
+
+import { useInitResultValue } from './useInitResultValue.js';
+import type {
+  DynamicInitResultKey,
+  InitResultValue,
+  Trackable,
+} from '../types.js';
+
+export function useInitResultDynamicValue<K extends DynamicInitResultKey>(
+  initResultKey: K,
+): Accessor<InitResultValue<K>> {
+  // Extract init result value.
+  const initial = useInitResultValue(initResultKey);
+
+  // Create value which will be returned to the external environment.
+  const [signal, setSignal] = createSignal(initial(), { equals: false });
+
+  // Effect which listens to change event and calls update.
+  createEffect(() => {
+    onCleanup(
+      (initial() as Trackable).on('change', () => {
+        setSignal((prev) => prev);
+      }),
+    );
+  });
+
+  return signal;
+}

package/src/provider/useInitResultValue.ts

@@ -0,0 +1,23 @@
+import { type Accessor, createMemo } from 'solid-js';
+
+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): Accessor<InitResultValue<K>> {
+  const { initResult } = useSDKContext();
+
+  // eslint-disable-next-line solid/reactivity
+  return createMemo<InitResultValue<K>>(() => {
+    const result = initResult();
+
+    if (!result) {
+      throw new Error(`Unable to get init result key "${key}" as long as SDK is not initialized`);
+    }
+    return result[key];
+  });
+}

package/src/provider/useSDKContext.ts

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

package/src/tools/back-button.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve BackButton component.
+ */
+export const useBackButton = createHook('backButton', true);

package/src/tools/closing-behavior.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve ClosingBehavior component.
+ */
+export const useClosingBehavior = createHook('closingBehavior', true);

package/src/tools/cloud-storage.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve CloudStorage component.
+ */
+export const useCloudStorage = createHook('cloudStorage');

package/src/tools/haptic-feedback.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve HapticFeedback component.
+ */
+export const useHapticFeedback = createHook('hapticFeedback');

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 './viewport.js';
+export * from './utils.js';

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

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve init data raw representation.
+ */
+export const useInitDataRaw = createHook('initDataRaw');

package/src/tools/init-data.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve InitData component.
+ */
+export const useInitData = createHook('initData');

package/src/tools/invoice.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Invoice component.
+ */
+export const useInvoice = createHook('invoice', true);

package/src/tools/launch-params.tsx

@@ -0,0 +1,8 @@
+import { type LaunchParams, retrieveLaunchData } from '@tma.js/sdk';
+
+/**
+ * Hooks to retrieve launch parameters.
+ */
+export function useLaunchParams(): LaunchParams {
+  return retrieveLaunchData().launchParams;
+}

package/src/tools/main-button.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve MainButton component.
+ */
+export const useMainButton = createHook('mainButton', true);

package/src/tools/mini-app.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve MiniApp component.
+ */
+export const useMiniApp = createHook('miniApp', true);

package/src/tools/popup.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Popup component.
+ */
+export const usePopup = createHook('popup', true);

package/src/tools/post-event.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve postEvent function.
+ */
+export const usePostEvent = createHook('postEvent');

package/src/tools/qr-scanner.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve QRScanner component.
+ */
+export const useQRScanner = createHook('qrScanner', true);

package/src/tools/theme-params.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve ThemeParams component.
+ */
+export const useThemeParams = createHook('themeParams', true);

package/src/tools/utils.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Utils component.
+ */
+export const useUtils = createHook('utils');

package/src/tools/viewport.ts

@@ -0,0 +1,6 @@
+import { createHook } from '../createHook.js';
+
+/**
+ * Hook to retrieve Viewport component.
+ */
+export const useViewport = createHook('viewport', true);

package/src/types.ts

@@ -1,13 +1,29 @@
-import type { InitResult, InitOptions } from '@tma.js/sdk';
-import type { Accessor } from 'solid-js';
-
-export type SDKInitOptions = InitOptions;
-export type SDKInitResult = InitResult;
-export type SDKInitResultKey = keyof SDKInitResult;
-export type SDKInitResultValue<K extends SDKInitResultKey> = SDKInitResult[K];
-
-export interface SDKContextType {
-  initResult: Accessor<SDKInitResult | null>;
-  loading: Accessor<boolean>;
-  error: Accessor<unknown | null>;
-}
+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/SDKProvider.d.ts

@@ -1,6 +0,0 @@
-import { type ParentProps } from 'solid-js';
-import type { SDKInitOptions } from './types.js';
-export type SDKProviderProps = ParentProps<{
-    initOptions?: SDKInitOptions;
-}>;
-export declare function SDKProvider(props: SDKProviderProps): any;

package/dist/dts/useDynamicInitResultValue.d.ts

@@ -1,21 +0,0 @@
-import { type Accessor } from 'solid-js';
-import type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.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;
-type DynamicComponentKey = {
-    [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable ? K : never;
-}[SDKInitResultKey];
-/**
- * Extracts value from the SDK init result by specified key and listens to its all specified
- * events, making the returned value to update.
- * @param initResult - SDK init result.
- * @param key - SDK init result key.
- * @param events - tracked events list.
- */
-export declare function useDynamicInitResultValue<K extends DynamicComponentKey>(initResult: Accessor<SDKInitResult>, key: K, events: EventName<SDKInitResultValue<K>>[]): Accessor<SDKInitResultValue<K>>;
-export {};

package/dist/dts/useInitResultValue.d.ts

@@ -1,8 +0,0 @@
-import { type Accessor } from 'solid-js';
-import type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
-/**
- * Extracts value from the SDK init result by key.
- * @param result - init result accessor.
- * @param key - key to extract.
- */
-export declare function useInitResultValue<K extends SDKInitResultKey>(result: Accessor<SDKInitResult>, key: K): Accessor<SDKInitResultValue<K>>;

package/dist/dts/useSDK.d.ts

@@ -1,9 +0,0 @@
-import { type Accessor } from 'solid-js';
-import type { SDKInitResultKey, SDKInitResultValue } from './types.js';
-export type SDK = {
-    [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>;
-};
-/**
- * Returns ready to use SDK components.
- */
-export declare function useSDK(): SDK;

package/src/SDKProvider.tsx

@@ -1,24 +0,0 @@
-import { createMemo, createResource, type ParentProps } from 'solid-js';
-import { init } from '@tma.js/sdk';
-
-import { SDKContext } from './context.js';
-import type { SDKInitOptions } from './types.js';
-
-export type SDKProviderProps = ParentProps<{ initOptions?: SDKInitOptions }>;
-
-export function SDKProvider(props: SDKProviderProps) {
-  const initOptions = createMemo(() => props.initOptions || {});
-  const [data] = createResource(initOptions, init);
-
-  const initResult = createMemo(() => {
-    return data.state === 'ready' ? data() : null;
-  });
-  const loading = createMemo(() => data.loading);
-  const error = createMemo(() => data.error === undefined ? null : data.error);
-
-  return (
-    <SDKContext.Provider value={{ initResult, loading, error }}>
-      {props.children}
-    </SDKContext.Provider>
-  );
-}

package/src/context.ts

@@ -1,5 +0,0 @@
-import { createContext } from 'solid-js';
-
-import type { SDKContextType } from './types.js';
-
-export const SDKContext = createContext<SDKContextType>(undefined, { name: 'SDKContext' });

package/src/hooks.ts

@@ -1,16 +0,0 @@
-import { useContext } from 'solid-js';
-
-import { SDKContext } from './context.js';
-import type { SDKContextType } from './types.js';
-
-/**
- * Uses SDKContext context.
- */
-export function useSDKContext(): SDKContextType {
-  const context = useContext(SDKContext);
-
-  if (context === undefined) {
-    throw new Error('useSDKContext hook was used outside of SDKProvider.');
-  }
-  return context;
-}

package/src/useDynamicInitResultValue.ts

@@ -1,52 +0,0 @@
-import { createEffect, createSignal, onCleanup, type Accessor } from 'solid-js';
-import { useInitResultValue } from './useInitResultValue.js';
-import type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.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;
-
-type DynamicComponentKey = {
-  [K in SDKInitResultKey]: SDKInitResultValue<K> extends Trackable ? K : never;
-}[SDKInitResultKey];
-
-/**
- * Extracts value from the SDK init result by specified key and listens to its all specified
- * events, making the returned value to update.
- * @param initResult - SDK init result.
- * @param key - SDK init result key.
- * @param events - tracked events list.
- */
-export function useDynamicInitResultValue<K extends DynamicComponentKey>(
-  initResult: Accessor<SDKInitResult>,
-  key: K,
-  events: EventName<SDKInitResultValue<K>>[],
-): Accessor<SDKInitResultValue<K>> {
-  // Get original value from init result.
-  const initResultValue = useInitResultValue(initResult, key);
-
-  // Here we store value, which should always update it in case, some of its props
-  // were changed/
-  const [value, setValue] = createSignal(initResultValue(), { equals: false });
-
-  createEffect(() => {
-    const value = initResultValue();
-    const listener = () => {
-      // We use prev => prev on purpose. This will make Solid sure, something inside
-      // dynamic value changed.
-      setValue(prev => prev);
-    };
-
-    events.forEach(event => value.on(event, listener));
-    onCleanup(() => {
-      events.forEach(event => value.off(event, listener));
-    });
-  });
-
-  return value;
-}

package/src/useInitResultValue.ts

@@ -1,14 +0,0 @@
-import { createMemo, type Accessor } from 'solid-js';
-import type { SDKInitResult, SDKInitResultKey, SDKInitResultValue } from './types.js';
-
-/**
- * Extracts value from the SDK init result by key.
- * @param result - init result accessor.
- * @param key - key to extract.
- */
-export function useInitResultValue<K extends SDKInitResultKey>(
-  result: Accessor<SDKInitResult>,
-  key: K
-): Accessor<SDKInitResultValue<K>> {
-  return createMemo(() => result()[key]);
-}

package/src/useSDK.ts

@@ -1,54 +0,0 @@
-import { createMemo, type Accessor } from 'solid-js';
-
-import { useSDKContext } from './hooks.js';
-import { useInitResultValue } from './useInitResultValue.js';
-import { useDynamicInitResultValue } from './useDynamicInitResultValue.js';
-import type { SDKInitResultKey, SDKInitResultValue } from './types.js';
-
-export type SDK = {
-  [K in SDKInitResultKey]: Accessor<SDKInitResultValue<K>>
-};
-
-/**
- * Returns ready to use SDK components.
- */
-export function useSDK(): SDK {
-  const { initResult } = useSDKContext();
-
-  const sdk = createMemo(() => {
-    const result = initResult();
-
-    if (result === null) {
-      throw new Error('Unable to use SDK as it is not ready.');
-    }
-    return result;
-  });
-
-  return {
-    backButton: useDynamicInitResultValue(sdk, 'backButton', ['isVisibleChanged']),
-    closingBehavior: useDynamicInitResultValue(sdk, 'closingBehavior', ['isConfirmationNeededChanged']),
-    cloudStorage: useInitResultValue(sdk, 'cloudStorage'),
-    haptic: useInitResultValue(sdk, 'haptic'),
-    initData: useInitResultValue(sdk, 'initData'),
-    initDataRaw: useInitResultValue(sdk, 'initDataRaw'),
-    mainButton: useDynamicInitResultValue(sdk, 'mainButton', [
-      'backgroundColorChanged',
-      'isVisibleChanged',
-      'isProgressVisibleChanged',
-      'isEnabledChanged',
-      'textChanged',
-      'textColorChanged',
-    ]),
-    popup: useDynamicInitResultValue(sdk, 'popup', ['isOpenedChanged']),
-    postEvent: useInitResultValue(sdk, 'postEvent'),
-    qrScanner: useDynamicInitResultValue(sdk, 'qrScanner', ['isOpenedChanged']),
-    themeParams: useDynamicInitResultValue(sdk, 'themeParams', ['changed']),
-    viewport: useDynamicInitResultValue(sdk, 'viewport', [
-      'heightChanged',
-      'isExpandedChanged',
-      'stableHeightChanged',
-      'widthChanged',
-    ]),
-    webApp: useDynamicInitResultValue(sdk, 'webApp', ['backgroundColorChanged', 'headerColorChanged']),
-  };
-}