Komponen dan registry

Atlas tidak pernah mengirim komponen ke situs web Anda. Komponen Anda tetap berada di repositori Anda. Kontrak situs memberi tahu Atlas komponen apa yang ada dan bidang apa yang boleh diisi editor.

Cara komponen dideklarasikan

Setiap komponen dalam kontrak memiliki:

• id yang memenuhi syarat, seperti acme.home.hero, dan sebuah versi;
• sebuah jenis: section, block, atau layout;
• bidang bertipe, misalnya heading (teks, wajib, hingga 80 karakter), image (aset), dan cta (tautan).

Editor melihat formulir yang dibangun dari bidang-bidang tersebut. Mereka tidak dapat menambah bidang, menempelkan HTML, atau mengubah markup Anda.

Cara situs web Anda merendernya

Simpan registry kecil di kode Anda yang memetakan setiap id komponen ke komponen React yang merendernya:

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

Validasi props yang diterima komponen Anda dengan cara yang sama seperti Anda memvalidasi input eksternal apa pun.

Menjaga kode dan konten tetap sinkron

Situs web Anda melaporkan komponen yang dipakai untuk membangunnya saat start (POST /deployments). Studio membandingkannya dengan kontrak aktif dan menampilkan salah satu dari:

Status	Arti
In sync	Build yang di-deploy merender kontrak aktif
Missing components	Kontrak memakai komponen yang tidak dimiliki build ini. Deploy kodenya terlebih dahulu
Different contract	Build dibuat untuk versi kontrak yang lain
Unknown contract	Atlas belum pernah melihat kontrak yang dilaporkan build ini
No contract	Belum ada kontrak yang aktif

Rilis Production tidak dapat disetujui selama situs web tidak sinkron. Ini mencegah editor memakai komponen yang belum ada di situs live.

Menambahkan komponen baru

1. Bangun dan uji komponen di kode situs web Anda.
2. Tambahkan ke bundel kontrak beserta bidangnya, dan ke tipe halaman tempat editor boleh menyisipkannya.
3. Validasi dan ajukan kontrak. Admin situs mengaktifkannya.
4. Deploy situs web. Studio menampilkan In sync.
5. Sekarang editor dapat memakainya.