Beam: Функціональні прапори для фронтенду за допомогою Laravel Pennant

Beam — це бібліотека для управління функціональними флагами на фронтенді, яка базується на Laravel Pennant. Вона має легку вагу, простий API на основі промісів та відмінну підтримку TypeScript. Також бібліотека пропонує зручні хуки для React і композиції для Vue.

// Отримання одного флага
import { useFeatureFlag } from '@beacon-hq/beam/react';

export function FeatureGate() {
    const { status, loading, refresh } = useFeatureFlag('new-ui');

    if (loading) return <span>Завантаження…</span>;
    return (
        <div>
            {status ? 'Функція активна' : 'Функція неактивна'}
            <button onClick={() => refresh()}>Оновити</button>
        </div>
    );
}

/*
`useFeatureFlag` повертає:
{
    featureFlag: string;
    status: boolean;
    value?: any,
    loading: boolean,
    refresh: fn () => void
}
*/

Beam також підтримує область видимості та додаткові залежності, які тригерять повторне завантаження при зміні:

import { useFeatureFlag } from '@beacon-hq/beam/react';

function Profile({ userId }: { userId: number }) {
  const scope = { userId };
  const feature = useFeatureFlag('beta-ui', { deps: [userId] }, scope);
  return feature.status ? <NewUI /> : <LegacyUI />;
}

Щоб почати роботу з цією бібліотекою, ознайомтеся з документацією Beam. Вихідний код доступний на GitHub за посиланням beacon-hq/beam. Фронтенд-бібліотека працює в поєднанні з beacon-hq/pennant-beam — залежністю для Composer