⊷ Token Beam Widget Example

Integration Code

import { SyncClient, pluginLinks, createCollection } from 'token-beam';
import type { TokenSyncPayload } from 'token-beam';

function getSyncServerUrl() {
  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
    return 'ws://localhost:8080';
  }
  return `${location.protocol === 'https:' ? 'wss:' : 'ws:'}//${location.host}`;
}

const SYNC_SERVER_URL = getSyncServerUrl();

let syncClient: SyncClient<TokenSyncPayload> | null = null;
let sessionToken: string | null = null;

function initSync() {
  if (syncClient) {
    syncClient.disconnect();
  }

  syncClient = new SyncClient<TokenSyncPayload>({
    serverUrl: SYNC_SERVER_URL,
    clientType: 'web',
    origin: 'Token Beam Widget',
    icon: { type: 'unicode', value: '⊷' },
    onPaired: (token) => {
      sessionToken = token;
      updateWidgetStatus('ready', token);
    },
    onTargetConnected: () => {
      updateWidgetStatus('syncing', sessionToken ?? undefined);
    },
    onDisconnected: () => {
      updateWidgetStatus('disconnected');
    },
    onError: (error) => {
      if (error.includes('client disconnected')) {
        updateWidgetStatus('ready', sessionToken ?? undefined);
        return;
      }
      updateWidgetStatus('error', undefined, error);
    },
  });

  syncClient.connect();
}

function syncTokens(color: string) {
  if (!syncClient) return;

  const payload = createCollection('colors', {
    primary: color,
  });

  syncClient.sync(payload);
}

initSync();