Tipo de demo · 19

Feature flags no editor — interruptores e o que cada um liga

Use isto quando o leitor precisa sentir como as configurações dependem umas das outras — um painel de interruptores em que ligar um exige silenciosamente outro, e a tela avisa no instante em que o conjunto fica inconsistente.

Este é um exemplar copiável. Leve o estágio <section id="toggle-it"> para uma lição real construída a partir de assets/lesson-template.html, mantendo os design tokens na íntegra.

1

O que este formato faz

Uma feature flag é só um interruptor liga/desliga para uma parte do seu produto — ligue e um recurso aparece, desligue e ele some, sem mudar código. O detalhe é que os recursos se apoiam uns nos outros. O reluzente novo checkout só faz sentido se o novo carrinho já estiver rodando por baixo dele. Ligue o checkout com o carrinho desligado e você publicou um botão que não leva a lugar nenhum.

O trabalho deste painel é tornar esse erro impossível de não notar. No instante em que você liga uma flag cujo suporte está desligado, um aviso vermelho desliza por baixo dela dizendo exatamente o que está faltando — e uma linha de resumo no rodapé sempre informa o conjunto de recursos que estão de fato no ar.

Pense nisto como… os interruptores de luz de uma casa nova. Acender a luz da varanda não faz nada se o disjuntor principal daquela ala estiver desligado. Um bom painel não fica simplesmente apagado — ele coloca uma etiqueta no interruptor: "precisa ligar o disjuntor antes."

Por baixo dos panos

Cada flag é um booleano indexado por um id estável (new_checkout, new_cart, …). Um mapa de dependências separado registra, para cada flag, os ids que ela exige: new_checkout → [new_cart]. Após cada toggle, o editor recalcula, para cada flag habilitada, se todas as flags exigidas também estão habilitadas. Qualquer flag que está ligada mas tem uma dependência desligada fica não satisfeita e renderiza um aviso inline.

O conjunto ativo que o resumo lê não é simplesmente "toda flag que está ligada" — é o conjunto que o sistema honraria. Uma flag com dependência quebrada aparece como ligada no editor (você de fato a alternou), mas é marcada como não entregue, porque publicá-la sem o seu suporte seria o bug. A correção "Habilitar dependência" é uma conveniência que liga o requisito faltante para que o aviso desapareça em um clique.

2

Experimente você mesmo

Acione os interruptores. Ligue new-checkout com new-cart desligado e veja o aviso aparecer. A linha de resumo no rodapé sempre diz quais recursos estão de fato no ar.

new-cart

Carrinho de compras reconstruído com atualização de preços em tempo real. A base sobre a qual todo o resto se apoia.

exige: nada — recurso base
new-checkout

Fluxo de checkout em página única. Lê seus itens diretamente do novo carrinho.

exige: new-cart
express-pay

Pagamento por carteira em um toque. Vive dentro do novo checkout, então precisa que ele esteja ligado antes.

exige: new-checkout
gift-receipts

Oculta os preços em um recibo imprimível. Funciona sozinho — sem dependências.

exige: nada — recurso base

Conjunto de recursos ativos

Um mapa comanda todos os avisos

As flags são um registro booleano plano; um segundo objeto lista os requisitos. Após qualquer toggle, o editor confere cada flag habilitada contra a sua lista requires. Uma flag que está ligada mas tem um requisito faltando fica não satisfeita — ela desenha o aviso inline e é excluída do conjunto ativo que o resumo informa.

const flags = { new_cart:false, new_checkout:false, express_pay:false, gift_receipts:false };

const requires = {
  new_cart:      [],                  // recurso base
  new_checkout:  ['new_cart'],        // precisa do carrinho por baixo
  express_pay:   ['new_checkout'],    // vive dentro do checkout
  gift_receipts: []
};

function missingDeps(id) {
  return requires[id].filter(dep => !flags[dep]);   // requisitos desligados
}

function activeSet() {
  // ligada E todos os requisitos satisfeitos = de fato entregue
  return Object.keys(flags).filter(id => flags[id] && missingDeps(id).length === 0);
}