@vkontakte/vk-bridge-mock

VK Bridge Mock

This library mocks VK Bridge methods.

Usage

Use in your code instead of using vk-bridge by following way:

import bridge from '@vkontakte/vk-bridge-mock';

// App init
bridge.send('VKWebAppInit');

bridge.send('VKWebAppGetUserInfo', {}).then(data => {
  // Do something
});

Or event-based way:

import bridge from '@vkontakte/vk-bridge-mock';

// App init
bridge.send('VKWebAppInit');

bridge.subscribe(e => {
  if (e.detail.type === 'VKWebAppGetUserInfoResult') {
    // Do something
  }
});

bridge.send('VKWebAppGetUserInfo', {});

Please note that some methods may only receive (for example, VKWebAppUpdateConfig, VKWebAppViewHide, VKWebAppViewRestore, etc.). To obtain data from them you need to use the event-based way and callReceiveOnlyMethod()

import bridge, { callReceiveOnlyMethod } from '@vkontakte/vk-bridge-mock';

// App init
bridge.send('VKWebAppInit');

bridge.subscribe(e => {
  if (e.detail.type === 'VKWebAppUpdateConfig') {
    // Do something
  }
});

// Use this function when you need to get data
callReceiveOnlyMethod('VKWebAppUpdateConfig');

For use without code bundler, include the file dist/browser.min.js and use as follows

<script src="https://unpkg.com/@vkontakte/vk-bridge-mock/dist/browser.min.js"></script>

<script>
  // Sends event to client
  vkBridgeMock.send('VKWebAppInit');

  vkBridgeMock.subscribe(e => {
    if (e.detail.type === 'VKWebAppUpdateConfig') {
      // Do something
    }
  });

  // Use this function when you need to get data
  vkBridgeCallReceiveOnlyMethod('VKWebAppUpdateConfig');
</script>

More documentation regarding VK Bridge is here.

Using with VK Mini Apps API

You can also use this library in conjunction with VK Mini Apps API:

import { VKMiniAppAPI } from '@vkontakte/vk-mini-apps-api';
import bridgeMock from '@vkontakte/vk-bridge-mock';

// Creating API instance
const api = new VKMiniAppAPI(bridgeMock);

// Using methods
api.getUserInfo().then(userInfo => {
  // Do something with mock data of user info
});