Composants et registre

Atlas ne livre jamais de composants à votre site web. Vos composants restent dans votre dépôt. Le contrat de site indique à Atlas quels composants existent et quels champs les éditeurs peuvent renseigner.

Comment un composant est déclaré

Chaque composant du contrat possède :

• un identifiant qualifié, tel que acme.home.hero, et une version ;
• un type : section, block ou layout ;
• des champs typés, par exemple un heading (texte, obligatoire, jusqu’à 80 caractères), une image (asset) et un cta (lien).

Les éditeurs voient un formulaire construit à partir de ces champs. Ils ne peuvent ni ajouter de champs, ni coller du HTML, ni modifier votre balisage.

Comment votre site web en produit le rendu

Conservez dans votre code un petit registre qui associe chaque identifiant de composant au composant React qui en produit le rendu :

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} />;
}

Validez les props que reçoit votre composant comme vous valideriez n’importe quelle entrée externe.

Garder le code et le contenu synchronisés

Votre site web signale les composants avec lesquels il a été construit lorsqu’il démarre (POST /deployments). Studio compare cela avec le contrat actif et affiche l’un des états suivants :

État	Signification
In sync	Le build déployé produit le rendu du contrat actif
Missing components	Le contrat utilise des composants que ce build ne possède pas. Déployez d’abord le code
Different contract	Le build a été réalisé pour une autre version du contrat
Unknown contract	Atlas n’a jamais vu le contrat que ce build signale
No contract	Aucun contrat n’est encore actif

Une release Production ne peut pas être approuvée tant que le site web n’est pas synchronisé. Cela empêche les éditeurs d’utiliser un composant qui n’existe pas encore sur le site en production.

Ajouter un nouveau composant

1. Construisez et testez le composant dans le code de votre site web.
2. Ajoutez-le au bundle de contrat avec ses champs, ainsi qu’aux types de pages où les éditeurs peuvent l’insérer.
3. Validez et proposez le contrat. Un administrateur du site l’active.
4. Déployez le site web. Studio affiche In sync.
5. Les éditeurs peuvent maintenant l’utiliser.