@tma.js/sdk 1.4.4 → 1.4.7

package/src/navigation/HashNavigator/HashNavigator.ts

@@ -1,220 +0,0 @@
-import { off, on, postEvent } from '~/bridge/index.js';
-import { EventEmitter } from '~/event-emitter/index.js';
-
-import { drop } from './drop.js';
-import { go } from './go.js';
-import type {
-  HashNavigatorEventsMap,
-  HashNavigatorOptions,
-} from './types.js';
-import { Navigator } from '../Navigator/index.js';
-import type {
-  NavigationEntry,
-  NavigatorConEntry,
-  PerformGoOptions,
-  PerformPushOptions,
-  PerformReplaceOptions,
-} from '../Navigator/types.js';
-
-const CURSOR_VOID = 0;
-const CURSOR_BACK = 1;
-const CURSOR_FORWARD = 2;
-
-export class HashNavigator extends Navigator<Promise<void>> {
-  /**
-   * Creates navigator from current window location hash.
-   * @param options - options passed to constructor.
-   */
-  static fromLocation(options?: HashNavigatorOptions): HashNavigator {
-    const {
-      search,
-      pathname,
-      hash,
-    } = new URL(
-      window.location.hash.slice(1),
-      window.location.href,
-    );
-
-    return new HashNavigator([{ search, pathname, hash }], 0, options);
-  }
-
-  private readonly ee = new EventEmitter<HashNavigatorEventsMap>();
-
-  private attached = false;
-
-  constructor(
-    entries: NavigatorConEntry[],
-    entriesCursor: number,
-    options: HashNavigatorOptions = {},
-  ) {
-    super(entries, entriesCursor, {
-      ...options,
-      loggerPrefix: 'HashNavigator',
-    });
-  }
-
-  /**
-   * Handles window "popstate" event.
-   * @param state - event state.
-   */
-  private onPopState = async ({ state }: PopStateEvent) => {
-    this.logger.log('"popstate" event received. State:', state);
-
-    // In case state is null, we recognize current event as occurring whenever user clicks
-    // any anchor.
-    // TODO: Should we do it?
-    if (state === null) {
-      return this.push(window.location.hash.slice(1));
-    }
-
-    // There is only one case when state can be CURSOR_VOID - when history contains
-    // only one element. In this case, we should return user to the current history element.
-    if (state === CURSOR_VOID) {
-      this.logger.log('Void reached. Moving history forward');
-      window.history.forward();
-      return;
-    }
-
-    // User pressed Back button.
-    if (state === CURSOR_BACK) {
-      return this.back();
-    }
-
-    // User pressed Forward button.
-    if (state === CURSOR_FORWARD) {
-      return this.forward();
-    }
-  };
-
-  protected async performGo(options: PerformGoOptions): Promise<void> {
-    if (!options.updated) {
-      return;
-    }
-
-    if (this.attached) {
-      await this.syncHistory();
-    }
-
-    this.emitChanged(options.before, options.after);
-  }
-
-  protected async performPush({ before, after }: PerformPushOptions): Promise<void> {
-    if (this.attached) {
-      await this.syncHistory();
-    }
-
-    this.emitChanged(before, after);
-  }
-
-  protected async performReplace(options: PerformReplaceOptions): Promise<void> {
-    if (!options.updated) {
-      return;
-    }
-
-    if (this.attached) {
-      window.history.replaceState(null, '', `#${this.path}`);
-    }
-
-    this.emitChanged(options.before, options.after);
-  }
-
-  /**
-   * Synchronizes current navigator state with browser history.
-   */
-  private async syncHistory(): Promise<void> {
-    // Remove history change event listener to get rid of side effects related to possible
-    // future calls of history.go.
-    window.removeEventListener('popstate', this.onPopState);
-
-    const hash = `#${this.path}`;
-
-    // Drop the browser history and work with the clean one.
-    await drop();
-
-    // Actualize Telegram Mini Apps BackButton state.
-    postEvent('web_app_setup_back_button', { is_visible: this.canGoBack });
-
-    if (this.canGoBack && this.canGoForward) {
-      // We have both previous and next elements. History should be:
-      // [back, *current*, forward]
-      this.logger.log('Setting up history: [<-, *, ->]');
-
-      window.history.replaceState(CURSOR_BACK, '');
-      window.history.pushState(null, '', hash);
-      window.history.pushState(CURSOR_FORWARD, '');
-
-      await go(-1);
-    } else if (this.canGoBack) {
-      // We have only previous element. History should be:
-      // [back, *current*]
-      this.logger.log('Setting up history: [<-, *]');
-
-      window.history.replaceState(CURSOR_BACK, '');
-      window.history.pushState(null, '', hash);
-    } else if (this.canGoForward) {
-      // We have only next element. History should be:
-      // [*current*, forward]
-      this.logger.log('Setting up history: [*, ->]');
-
-      window.history.replaceState(null, hash);
-      window.history.pushState(CURSOR_FORWARD, '');
-
-      await go(-1);
-    } else {
-      // We have no back and next elements. History should be:
-      // [void, *current*]
-      this.logger.log('Setting up history: [~, *]');
-
-      window.history.replaceState(CURSOR_VOID, '');
-      window.history.pushState(null, '', hash);
-    }
-
-    window.addEventListener('popstate', this.onPopState);
-  }
-
-  private emitChanged(from: NavigationEntry, to: NavigationEntry) {
-    this.ee.emit('change', {
-      navigator: this,
-      from,
-      to,
-    });
-  }
-
-  /**
-   * Attaches current navigator to the browser history allowing navigator to manipulate it.
-   */
-  async attach(): Promise<void> {
-    if (this.attached) {
-      return;
-    }
-    this.logger.log('Attaching', this);
-    this.attached = true;
-    on('back_button_pressed', this.back);
-    return this.syncHistory();
-  }
-
-  back = () => super.back();
-
-  /**
-   * Detaches current navigator from the browser history.
-   */
-  detach() {
-    if (!this.attached) {
-      return;
-    }
-    this.logger.log('Detaching', this);
-    this.attached = false;
-    window.removeEventListener('popstate', this.onPopState);
-    off('back_button_pressed', this.back);
-  }
-
-  /**
-   * Adds new event listener.
-   */
-  on = this.ee.on.bind(this.ee);
-
-  /**
-   * Removes event listener.
-   */
-  off = this.ee.off.bind(this.ee);
-}

package/src/navigation/HashNavigator/__tests__/HashNavigator.ts

@@ -1,144 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { HashNavigator } from '../HashNavigator';
-
-// TODO: Add more tests.
-
-describe('constructor', () => {
-  it('should throw an error if entries list is empty', () => {
-    expect(() => new HashNavigator([], 0)).toThrow('Entries list should not be empty.');
-  });
-
-  it('should throw an error if cursor equals to higher than entries count', () => {
-    expect(() => new HashNavigator([{ pathname: '/' }], 1))
-      .toThrow('Cursor should be less than entries count.');
-    expect(() => new HashNavigator([{ pathname: '/' }], 2))
-      .toThrow('Cursor should be less than entries count.');
-  });
-});
-
-describe('methods', () => {
-  // describe('go', () => {
-  // });
-  //
-  // describe('forward', () => {
-  // });
-  //
-  // describe('back', () => {
-  // });
-
-  describe('getEntries', () => {
-    it('should return deep clone of navigator entries', () => {
-      const initialEntries = [{
-        search: '?b',
-        hash: '#c',
-        pathname: '/a',
-      }];
-      const navigator = new HashNavigator(initialEntries, 0);
-      const entries = navigator.getEntries();
-
-      expect(entries).toStrictEqual(initialEntries);
-      expect(entries).not.toBe(initialEntries);
-
-      expect(entries[0]).toStrictEqual(initialEntries[0]);
-      expect(entries[0]).not.toBe(initialEntries[0]);
-    });
-  });
-
-  // describe('push', () => {
-  // });
-  //
-  describe('replace', () => {
-    it('should replace current entry', () => {
-      const navigator = new HashNavigator([{
-        search: '?b',
-        hash: '#c',
-        pathname: '/a',
-      }], 0);
-      const [prevEntry] = navigator.getEntries();
-
-      expect(navigator.cursor).toBe(0);
-      navigator.replace('/b');
-      const [entry] = navigator.getEntries();
-
-      expect(prevEntry).not.toStrictEqual(entry);
-      expect(navigator.cursor).toBe(0);
-    });
-  });
-});
-
-describe('getters', () => {
-  describe('pathname', () => {
-    it('should return current entry pathname', () => {
-      expect(new HashNavigator([{ pathname: '/abc' }], 0).pathname).toBe('/abc');
-    });
-  });
-
-  describe('search', () => {
-    it('should return current entry search', () => {
-      expect(
-        new HashNavigator([{
-          search: '?a=1',
-          pathname: '/',
-        }], 0).search,
-      ).toBe('?a=1');
-    });
-  });
-
-  describe('hash', () => {
-    it('should return current entry hash', () => {
-      expect(
-        new HashNavigator([{
-          hash: '#abc',
-          pathname: '/',
-        }], 0).hash,
-      ).toBe('#abc');
-    });
-  });
-
-  describe('path', () => {
-    it('should combine current entry pathname, search and hash', () => {
-      expect(
-        new HashNavigator([{
-          search: '?b',
-          hash: '#c',
-          pathname: '/a',
-        }], 0).path,
-      ).toBe('/a?b#c');
-    });
-  });
-
-  describe('canGoBack', () => {
-    it('should return false if cursor === 0', () => {
-      expect(
-        new HashNavigator([{ pathname: '/' }], 0).canGoBack,
-      ).toBe(false);
-    });
-
-    it('should return true if cursor > 0', () => {
-      expect(
-        new HashNavigator([
-          { pathname: '/a' },
-          { pathname: '/b' },
-        ], 1).canGoBack,
-      ).toBe(true);
-    });
-  });
-
-  describe('canGoForward', () => {
-    it('should return false if cursor === entries.length - 1', () => {
-      expect(
-        new HashNavigator([{ pathname: '/' }], 0).canGoForward,
-      ).toBe(false);
-    });
-
-    it('should return true if cursor < entries.length - 1', () => {
-      expect(
-        new HashNavigator([
-          { pathname: '/a' },
-          { pathname: '/b' },
-        ], 0).canGoForward,
-      ).toBe(true);
-    });
-  });
-});

package/src/navigation/HashNavigator/__tests__/drop.ts

@@ -1,42 +0,0 @@
-import { afterEach, expect, it, vi } from 'vitest';
-
-import { drop } from '../drop';
-
-// TODO: Add more tests.
-
-function mockHistoryLength(length: number) {
-  vi
-    .spyOn(window.history, 'length', 'get')
-    .mockImplementation(() => length);
-}
-
-function mockPushState(impl?: History['pushState']) {
-  const spy = vi.spyOn(window.history, 'pushState');
-
-  if (impl) {
-    spy.mockImplementation(impl);
-  }
-}
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-it('should do nothing in case, history contains only 1 element', () => {
-  const pushStateSpy = vi.fn();
-  mockHistoryLength(1);
-  mockPushState(pushStateSpy);
-
-  expect(pushStateSpy).not.toHaveBeenCalled();
-});
-
-it('should push empty state', () => {
-  const pushStateSpy = vi.fn();
-  mockHistoryLength(2);
-  mockPushState(pushStateSpy);
-
-  drop();
-
-  expect(pushStateSpy).toHaveBeenCalledOnce();
-  expect(pushStateSpy).toHaveBeenCalledWith(null, '');
-});

package/src/navigation/HashNavigator/__tests__/go.ts

@@ -1,9 +0,0 @@
-import { expect, it } from 'vitest';
-
-import { go } from '../go';
-
-// TODO: Add more tests.
-
-it('should return true if delta is 0', () => {
-  expect(go(0)).resolves.toBe(true);
-});

package/src/navigation/HashNavigator/drop.ts

@@ -1,36 +0,0 @@
-import { go } from './go.js';
-
-/**
- * Drops current browser history switching browser history cursor to the first one entry.
- */
-export async function drop(): Promise<void> {
-  if (window.history.length <= 1) {
-    return;
-  }
-
-  // Push empty state to cut states we have no access to.
-  window.history.pushState(null, '');
-
-  // By this line of code we cover the most recent case, when application is opened in WebView,
-  // but not in iframe. Applications opened in WebView have simple browser history containing
-  // only entries belonging to the current web application.
-  const goPerformed = await go(1 - window.history.length);
-  if (goPerformed) {
-    return;
-  }
-
-  // Nevertheless, iframe works a bit different in context of browser history. Calling
-  // window.history.length in iframe will return browser history information related to the
-  // external web environment too (e.g. browser tab). So, iframe shares the browser history with
-  // the external application, but has no access to its history entries. Calling window.history.go
-  // pointing out to the entry belonging to the external application will have no impact, so the
-  // previous idea with go(1 - ...) will not work.
-  //
-  // This is the reason why we iteratively call go(-1) to meet the entry which is recognized as
-  // the initial one for the current iframe.
-  let shouldGoBack = await go(-1);
-  while (shouldGoBack) {
-    // eslint-disable-next-line no-await-in-loop
-    shouldGoBack = await go(-1);
-  }
-}

package/src/navigation/HashNavigator/go.ts

@@ -1,28 +0,0 @@
-/**
- * Performs window.history.go operation waiting for it to be completed.
- * @param delta - history change delta.
- */
-export async function go(delta: number): Promise<boolean> {
-  if (delta === 0) {
-    return true;
-  }
-
-  // We expect popstate event to occur during some time. Yeah, this seems tricky and not stable,
-  // but it seems like we have no other way out. Waiting for Navigation API to be implemented in
-  // browsers.
-  return Promise.race<boolean>([
-    new Promise((res) => {
-      window.addEventListener('popstate', function listener() {
-        window.removeEventListener('popstate', listener);
-        res(true);
-      });
-
-      window.history.go(delta);
-    }),
-
-    // Usually, it takes about 1ms to emit this event, but we use some buffer.
-    new Promise((res) => {
-      setTimeout(res, 50, false);
-    }),
-  ]);
-}

package/src/navigation/HashNavigator/index.ts

@@ -1,2 +0,0 @@
-export * from './HashNavigator.js';
-export * from './types.js';

package/src/navigation/HashNavigator/types.ts

@@ -1,41 +0,0 @@
-import type { HashNavigator } from './HashNavigator.js';
-import type { NavigatorOptions } from '../Navigator/index.js';
-import type { NavigationEntry } from '../Navigator/types.js';
-
-export type HashNavigatorOptions = Omit<NavigatorOptions, 'loggerPrefix'>;
-
-interface ChangeEventPayload {
-  /**
-   * Navigator instance.
-   */
-  navigator: HashNavigator;
-
-  /**
-   * Previous navigation state.
-   */
-  from: NavigationEntry;
-
-  /**
-   * Current navigation state.
-   */
-  to: NavigationEntry;
-}
-
-export interface HashNavigatorEventsMap {
-  /**
-   * Being called whenever current history changes.
-   * @param event - generated event.
-   */
-  change: (event: ChangeEventPayload) => void;
-}
-
-/**
- * Navigator event name.
- */
-export type HashNavigatorEventName = keyof HashNavigatorEventsMap;
-
-/**
- * Navigator event listener.
- */
-export type HashNavigatorEventListener<E extends HashNavigatorEventName> =
-  HashNavigatorEventsMap[E];