Componentes e o registro

O Atlas nunca envia componentes para o seu site. Seus componentes ficam no seu repositório. O contrato do site diz ao Atlas quais componentes existem e quais campos os editores podem preencher.

Como um componente é declarado

Cada componente do contrato tem:

• um id qualificado, como acme.home.hero, e uma versão;
• um tipo (kind): section, block ou layout;
• campos tipados, por exemplo um heading (texto, obrigatório, até 80 caracteres), uma image (asset) e um cta (link).

Os editores veem um formulário montado a partir desses campos. Eles não podem adicionar campos, colar HTML nem alterar o seu markup.

Como o seu site o renderiza

Mantenha no seu código um pequeno registro que associa cada id de componente ao componente React que o renderiza:

atlas/sections.tsx

import { Hero } from '@/components/hero';
import { FeatureGrid } from '@/components/feature-grid';
import type { AtlasSection } from '@/lib/atlas';

const registry = {
  'acme.home.hero': Hero,
  'acme.home.features': FeatureGrid,
} as const;

export function renderSection(
  section: AtlasSection,
  assets: Record<string, { url: string; alt?: string }>,
) {
  const Component = registry[section.component.id as keyof typeof registry];
  if (!Component) return null; // unknown component: skip it, never guess
  return <Component key={section.id} {...section.props} assets={assets} />;
}

Valide as props que o seu componente recebe da mesma forma que validaria qualquer entrada externa.

Mantendo código e conteúdo sincronizados

Seu site informa os componentes com os quais foi construído quando inicia (POST /deployments). O Studio compara isso com o contrato ativo e mostra um destes estados:

Estado	Significado
In sync	O build implantado renderiza o contrato ativo
Missing components	O contrato usa componentes que este build não tem. Faça o deploy do código primeiro
Different contract	O build foi feito para outra versão do contrato
Unknown contract	O Atlas nunca viu o contrato que este build informa
No contract	Ainda não há um contrato ativo

Um release de Production não pode ser aprovado enquanto o site estiver dessincronizado. Isso impede que os editores usem um componente que ainda não existe no site no ar.

Adicionando um novo componente

1. Construa e teste o componente no código do seu site.
2. Adicione-o ao bundle do contrato com seus campos e aos tipos de página em que os editores podem inseri-lo.
3. Valide e proponha o contrato. Um administrador do site o ativa.
4. Faça o deploy do site. O Studio mostra In sync.
5. Agora os editores podem usá-lo.