Componentes y el registro

Atlas nunca envía componentes a su sitio web. Sus componentes permanecen en su repositorio. El contrato del sitio le indica a Atlas qué componentes existen y qué campos pueden rellenar los editores.

Cómo se declara un componente

Cada componente del contrato tiene:

• un id cualificado, como acme.home.hero, y una versión;
• un tipo: section, block o layout;
• campos tipados, por ejemplo un heading (texto, obligatorio, hasta 80 caracteres), una image (recurso) y un cta (enlace).

Los editores ven un formulario construido a partir de esos campos. No pueden añadir campos, pegar HTML ni cambiar su marcado.

Cómo lo renderiza su sitio web

Mantenga en su código un pequeño registro que asigne cada id de componente al componente React que lo 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 las props que recibe su componente del mismo modo que validaría cualquier entrada externa.

Mantener sincronizados el código y el contenido

Su sitio web informa de los componentes con los que fue construido cuando arranca (POST /deployments). Studio lo compara con el contrato activo y muestra uno de estos estados:

Estado	Significado
In sync	La compilación desplegada renderiza el contrato activo
Missing components	El contrato usa componentes que esta compilación no tiene. Despliegue primero el código
Different contract	La compilación se hizo para otra versión del contrato
Unknown contract	Atlas nunca ha visto el contrato que informa esta compilación
No contract	Todavía no hay ningún contrato activo

No se puede aprobar un lanzamiento a Producción mientras el sitio web esté desincronizado. Esto impide que los editores usen un componente que todavía no existe en el sitio en vivo.

Añadir un componente nuevo

1. Construya y pruebe el componente en el código de su sitio web.
2. Añádalo al paquete de contrato con sus campos y a los tipos de página donde los editores puedan insertarlo.
3. Valide y proponga el contrato. Un administrador del sitio lo activa.
4. Despliegue el sitio web. Studio muestra In sync.
5. Los editores ya pueden usarlo.