Перейти к основному содержимому

Клиентские библиотеки

Адаптеры фреймворков

TypeScript SDK

Один пакет с шестью точками входа. Импортируйте ту, что соответствует вашей среде выполнения, и сборка с встряхиванием дерева оставит остальное вне вашего бандла.

Где опубликован

@prodantix/sdk on npm.

Установка

Bash
bun add @prodantix/sdk

Точки входа

Каждый подпуть поставляет собственную сборку ESM и CommonJS со своими типами. Корень не зависит от среды выполнения, остальные добавляют то, что нужно конкретной среде.

SubpathWhat it exports
@prodantix/sdkProdantixClient, createClient, evaluateFlag, FlagsClient, MessagesClient
@prodantix/sdk/webcreateWebClient, installAutocapture, installSessionReplay, WebTransport
@prodantix/sdk/nodecreateNodeClient
@prodantix/sdk/cspprodantixConnectSrc, prodantixScriptSrc
@prodantix/sdk/chatmountChat, ChatClient, ChatPanel, resolveAppearance
@prodantix/sdk/messengerfetchMessengerConfig, cachedMessengerConfig, MESSENGER_CACHE_KEY

@prodantix/sdk

Клиент, вычислитель флагов и интерфейсы хранилища и транспорта. Ничто здесь не трогает DOM, поэтому вы можете передать своё хранилище, транспорт, часы или фабрику идентификаторов и запустить это где угодно.

TypeScript
import { createClient, MemoryStorage } from '@prodantix/sdk';

const prodantix = createClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  storage: new MemoryStorage(),
});

prodantix.capture('order.completed', { properties: { amount: 4200, currency: 'XAF' } });
await prodantix.flush();

@prodantix/sdk/web

Браузерная обвязка поверх того же клиента: сохранение в локальном хранилище, отправка маяком при скрытии страницы, а также автозахват просмотров страниц и кликов. Повтор сессии остаётся выключенным, пока вы не укажете хост повтора.

TypeScript
import { createWebClient } from '@prodantix/sdk/web';

const prodantix = createWebClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  flagsHost: 'https://api.prodantix.com',
  autocaptureOptions: { clicks: true, pageviews: true },
});

prodantix.identify('user-42', { set: { plan: 'pro' } });

if (await prodantix.isFeatureEnabled('new-checkout')) {
  // ...
}

// Every per-flag read records one $feature_flag_called exposure.
const variant = await prodantix.getVariant('new-checkout');
if (variant?.key === 'treatment') {
  // ...
}

// A flag targeting a cohort reads this user's memberships from the store;
// pass them yourself to skip the lookup.
if (await prodantix.isFeatureEnabledLocal('members', { cohorts: ['<cohort id>'] })) {
  // ...
}

@prodantix/sdk/node

Тот же клиент с серверными значениями по умолчанию. События буферизуются и отправляются в фоне, поэтому вызывайте shutdown до завершения процесса, иначе последняя пачка так и не уйдёт.

TypeScript
import { createNodeClient } from '@prodantix/sdk/node';

// A node client streams flag changes over Socket.IO by default and refetches
// the snapshot on push; streamFlags: false leaves only the 30s poll.
const prodantix = createNodeClient({
  apiKey: process.env.PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  streamFlags: true,
});

prodantix.capture('job.completed', { properties: { queue: 'emails' } });
await prodantix.shutdown();

@prodantix/sdk/csp

Источники политики безопасности контента, которые нужны приложению, чтобы достучаться до Prodantix. Модуль ничего не импортирует ни из React, ни из браузера, поэтому файл конфигурации сборки может прочитать его напрямую.

TypeScript
import { prodantixConnectSrc, prodantixScriptSrc } from '@prodantix/sdk/csp';

const hosts = {
  ingest: 'https://eu.api.prodantix.com',
  edge: 'https://eu.edge.prodantix.com',
  replay: 'https://eu.replay.prodantix.com',
};

const policy = [
  `connect-src ${prodantixConnectSrc(hosts)}`,
  `script-src ${prodantixScriptSrc(hosts)}`,
].join('; ');

@prodantix/sdk/chat

Виджет поддержки. Смонтируйте его, и вы получите дескриптор, который открывает, закрывает, уничтожает и представляет пользователя. Он отрисовывается внутри закрытого теневого корня, поэтому стили страницы-хозяина до него не добираются.

TypeScript
import { mountChat } from '@prodantix/sdk/chat';

const messenger = mountChat({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
  distinctId: prodantix.distinctId,
});

document.querySelector('#help')?.addEventListener('click', () => messenger.open());

@prodantix/sdk/messenger

Читатель настроек за виджетом: он загружает конфигурацию мессенджера для проекта, кеширует её и сообщает, включён ли мессенджер в этом проекте. Самовыполняющийся сниппет собирается отдельно и через этот подпуть недоступен.

TypeScript
import { fetchMessengerConfig } from '@prodantix/sdk/messenger';

const config = await fetchMessengerConfig({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
});

if (config?.enabled) {
  // the project has the messenger switched on
}