@tma.js/sdk 0.13.2 → 0.13.3

package/src/components/ThemeParams/ThemeParams.ts

@@ -9,40 +9,6 @@ import { State } from '../../state/index.js';
 
 import type { ThemeParamsEvents, ThemeParamsState } from './types.js';
 
-function prepareThemeParams(value: ThemeParamsType): ThemeParamsState {
-  const {
-    accentTextColor = null,
-    backgroundColor = null,
-    buttonColor = null,
-    buttonTextColor = null,
-    destructiveTextColor = null,
-    headerBackgroundColor = null,
-    hintColor = null,
-    linkColor = null,
-    secondaryBackgroundColor = null,
-    sectionBackgroundColor = null,
-    sectionHeaderTextColor = null,
-    subtitleTextColor = null,
-    textColor = null,
-  } = value;
-
-  return {
-    accentTextColor,
-    backgroundColor,
-    buttonColor,
-    buttonTextColor,
-    destructiveTextColor,
-    headerBackgroundColor,
-    hintColor,
-    linkColor,
-    secondaryBackgroundColor,
-    sectionBackgroundColor,
-    sectionHeaderTextColor,
-    subtitleTextColor,
-    textColor,
-  };
-}
-
 /**
  * Contains information about currently used theme by application.
  * @see https://core.telegram.org/bots/webapps#themeparams
@@ -71,7 +37,7 @@ export class ThemeParams {
    */
   static sync(themeParams: ThemeParams): void {
     on('theme_changed', (event) => {
-      themeParams.state.set(prepareThemeParams(parse(event.theme_params)));
+      themeParams.state.set(parse(event.theme_params));
     });
   }
 
@@ -94,35 +60,59 @@ export class ThemeParams {
   private readonly state: State<ThemeParamsState>;
 
   constructor(params: ThemeParamsType) {
-    this.state = new State(prepareThemeParams(params), this.ee);
+    this.state = new State(params, this.ee);
+  }
+
+  get accentTextColor(): RGB | null {
+    return this.get('accentTextColor');
   }
 
   /**
    * Returns background color.
    */
   get backgroundColor(): RGB | null {
-    return this.state.get('backgroundColor');
+    return this.get('backgroundColor');
   }
 
   /**
    * Returns button color.
    */
   get buttonColor(): RGB | null {
-    return this.state.get('buttonColor');
+    return this.get('buttonColor');
   }
 
   /**
    * Returns button text color.
    */
   get buttonTextColor(): RGB | null {
-    return this.state.get('buttonTextColor');
+    return this.get('buttonTextColor');
+  }
+
+  get destructiveTextColor(): RGB | null {
+    return this.get('destructiveTextColor');
+  }
+
+  /**
+   * Retrieves palette color value by its name.
+   * @param key - palette key name.
+   */
+  get(key: keyof ThemeParamsType): RGB | null {
+    return this.state.get(key) || null;
+  }
+
+  getState(): ThemeParamsType {
+    return this.state.getState();
+  }
+
+  get headerBackgroundColor(): RGB | null {
+    return this.get('headerBackgroundColor');
   }
 
   /**
    * Returns hint color.
    */
   get hintColor(): RGB | null {
-    return this.state.get('hintColor');
+    return this.get('hintColor');
   }
 
   /**
@@ -137,7 +127,7 @@ export class ThemeParams {
    * Returns current link color.
    */
   get linkColor(): RGB | null {
-    return this.state.get('linkColor');
+    return this.get('linkColor');
   }
 
   /**
@@ -154,13 +144,25 @@ export class ThemeParams {
    * Returns secondary background color.
    */
   get secondaryBackgroundColor(): RGB | null {
-    return this.state.get('secondaryBackgroundColor');
+    return this.get('secondaryBackgroundColor');
+  }
+
+  get sectionBackgroundColor(): RGB | null {
+    return this.get('sectionBackgroundColor');
+  }
+
+  get sectionHeaderTextColor(): RGB | null {
+    return this.get('sectionHeaderTextColor');
+  }
+
+  get subtitleTextColor(): RGB | null {
+    return this.get('subtitleTextColor');
   }
 
   /**
    * Returns text color.
    */
   get textColor(): RGB | null {
-    return this.state.get('textColor');
+    return this.get('textColor');
   }
 }

package/src/components/ThemeParams/types.ts

@@ -1,15 +1,8 @@
-import type { HasUndefined, If } from '@tma.js/util-types';
 import type { ThemeParams } from '@tma.js/theme-params';
 
 import type { StateEvents } from '../../state/index.js';
 
-export type ThemeParamsState = {
-  [K in keyof ThemeParams]-?: If<
-    HasUndefined<ThemeParams[K]>,
-    Exclude<ThemeParams[K], undefined> | null,
-    ThemeParams[K]
-  >;
-};
+export type ThemeParamsState = ThemeParams;
 
 export type ThemeParamsEvents = StateEvents<ThemeParamsState>;
 

package/src/init/css.ts

@@ -33,30 +33,6 @@ function setSizeVariable(name: string, size: number) {
   setVariable(name, `${size}px`);
 }
 
-/**
- * Creates CSS variables based on theme parameters.
- * @param themeParams - ThemeParams instance.
- */
-function createThemeVariables(themeParams: ThemeParams): void {
-  const {
-    backgroundColor,
-    buttonTextColor,
-    secondaryBackgroundColor,
-    hintColor,
-    buttonColor,
-    linkColor,
-    textColor,
-  } = themeParams;
-
-  setColorVariable('--tg-theme-bg-color', backgroundColor);
-  setColorVariable('--tg-theme-button-color', buttonColor);
-  setColorVariable('--tg-theme-button-text-color', buttonTextColor);
-  setColorVariable('--tg-theme-hint-color', hintColor);
-  setColorVariable('--tg-theme-link-color', linkColor);
-  setColorVariable('--tg-theme-secondary-bg-color', secondaryBackgroundColor);
-  setColorVariable('--tg-theme-text-color', textColor);
-}
-
 /**
  * Creates CSS variables based on Mini App background and header colors with
  * theme parameters.
@@ -72,16 +48,9 @@ function createWebAppVariables(webApp: WebApp, themeParams: ThemeParams): void {
 }
 
 /**
- * Creates CSS variables connected with theme parameters.
- *
- * Created variables:
- * - `--tg-theme-bg-color`
- * - `--tg-theme-button-color`
- * - `--tg-theme-button-text-color`
- * - `--tg-theme-hint-color`
- * - `--tg-theme-link-color`
- * - `--tg-theme-secondary-bg-color`
- * - `--tg-theme-text-color`
+ * Creates CSS variables connected with theme parameters. Created CSS variables names are
+ * following the pattern "--tg-theme-{name}". {name} is a theme parameters key name converted
+ * from snake to kebab case.
  *
  * Variables are being automatically updated in case, corresponding properties
  * updated in passed ThemeParams instance.
@@ -89,7 +58,14 @@ function createWebAppVariables(webApp: WebApp, themeParams: ThemeParams): void {
  * @param themeParams - ThemeParams instance.
  */
 export function bindThemeCSSVariables(themeParams: ThemeParams): void {
-  const actualize = () => createThemeVariables(themeParams);
+  const actualize = () => {
+    const state = themeParams.getState();
+
+    Object.entries(state).forEach(([k, v]) => {
+      const key = k.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+      setColorVariable(`--tg-theme-${key}`, v || null);
+    });
+  };
 
   themeParams.on('changed', actualize);
 

package/src/state/State.ts

@@ -1,6 +1,6 @@
 import type { EventEmitter } from '@tma.js/event-emitter';
 
-import type { StateEvents, StringKeys } from './types.js';
+import type { StateEvents } from './types.js';
 
 /**
  * Represents state which is observable via passed EventEmitter.
@@ -15,18 +15,18 @@ export class State<S extends object> {
     }
   }
 
-  private internalSet<K extends StringKeys<S>>(key: K, value: S[K]): boolean {
+  private internalSet<K extends keyof S>(key: K, value: S[K]): boolean {
     if (this.state[key] === value) {
       return false;
     }
 
     this.state[key] = value;
-    this.emit(`${key}Changed`, value);
+    this.emit(`${String(key)}Changed`, value);
 
     return true;
   }
 
-  set<K extends StringKeys<S>>(key: K, value: S[K]): void;
+  set<K extends keyof S>(key: K, value: S[K]): void;
   set(state: Partial<S>): void;
   set(keyOrState: any, value?: any): void {
     let didChange = false;
@@ -47,7 +47,11 @@ export class State<S extends object> {
     }
   }
 
-  get<K extends StringKeys<S>>(key: K): Readonly<S[K]> {
+  get<K extends keyof S>(key: K): Readonly<S[K]> {
     return this.state[key];
   }
+
+  getState() {
+    return { ...this.state };
+  }
 }