VueCraft NPM

SSR, живые обновления и метаданные ​

SSR / гидратация ​

Сериализуйте флаги на сервере и передайте их клиенту, чтобы предотвратить расхождение при гидратации.

ts
// server.ts
import { serializeFlags } from 'vue-feature-toggles'

const provider = createFeatureProvider({ loader: fetchFlags })
await provider.reload()
const ssrState = serializeFlags(provider) // → Record<string, FlagValue>
// внедрить в HTML: window.__FEATURE_FLAGS__ = ${JSON.stringify(ssrState)}
ts
// клиентский main.ts
app.use(FeatureToggles, {
  ssrState: window.__FEATURE_FLAGS__, // синхронно предзаполняет флаги
  loader: async () => fetchFlags(), // обновляет в фоне
})

При использовании модуля Nuxt SSR-гидратация обрабатывается автоматически через nuxtApp.payload.

Живые обновления (SSE / WebSocket) ​

Флаги обновляются в реальном времени, когда сервер отправляет изменения — поллинг не требуется.

ts
// SSE
app.use(FeatureToggles, {
  loader: async () => fetch('/api/flags').then((r) => r.json()),
  liveUpdates: { type: 'sse', url: '/api/flags/stream' },
})

// WebSocket
app.use(FeatureToggles, {
  liveUpdates: {
    type: 'websocket',
    url: 'wss://flags.example.com/ws',
    reconnectDelay: 5000, // мс, по умолчанию: 3000
  },
})

Сервер должен отправлять JSON-объект только с изменёнными флагами — неизменённые флаги сохраняются.

json
{ "betaSearch": true }

Метаданные флагов и срок действия ​

ts
app.use(FeatureToggles, {
  flags: { newDashboard: true, christmasBanner: true },
  meta: {
    newDashboard: {
      description: 'New dashboard with charts',
      owner: 'team-frontend',
      addedAt: '2025-03-01',
      ticket: 'PROJ-1234',
    },
  },
  expiry: {
    christmasBanner: '2025-01-10',
  },
})
ts
const { getFlagMeta, isExpired } = useFeatureProvider()

getFlagMeta('newDashboard') // → { description, owner, addedAt, ticket }
isExpired('christmasBanner') // → true после 2025-01-10

Для истёкших флагов в консоли разработчика выводится предупреждение. Метаданные видны в <FeatureDevTools> и CLI.