Snippet Contract

Contrato canônico de um Snippet — componente reutilizável importado por Sections.

Esta página é o contrato canônico para Snippets na Corvex.

Um Snippet é um componente React reutilizável usado dentro de sections. Não é registrado em theme.json e não aparece na paleta do Editor como section.

---

MUST — arquivos

snippets/{id}/snippet.jsx    REQUIRED
snippets/{id}/styles.css     OPTIONAL

{id} SHOULD ser kebab-case (product-card, price-badge).

---

MUST — export

snippet.jsx MUST exportar default um componente React.

export default function ProductCard({ product }) {
  return (
    <a href={product.url}>
      <span>{product.title}</span>
    </a>
  );
}

---

MUST — import no build

Sections MUST importar via alias resolvido no build:

import ProductCard from '@corvex/snippets/product-card';

O alias @corvex/snippets/{id} mapeia a snippets/{id}/snippet.jsx.

Equivalente no código do tema: @corvex/theme-sdk para SDK; snippets usam @corvex/snippets/*.

---

Props

• Sem contrato global — o autor do snippet define props.
• SHOULD documentar props no JSDoc ou no guia da section que consome.
• Dados MUST vir de data, settings ou hooks do Theme SDK — não inventar fetch ad hoc sem SDK.

---

MUST NOT

• Não listar snippet em theme.json → sections ou blocks.
• Snippets são importados em JSX — import X from '@corvex/snippets/{id}'.
• SHOULD NOT conter lógica de página inteira — use Section para composição no Editor.

---

Snippet vs Section

	Section	Snippet
Paleta do Editor	Sim	Não
schema.json	Sim	Não
Reutilização	Por instância na página	Por import no código
Settings do merchant	Sim	Não (props do parent)

---

Exemplo mínimo válido

snippets/greeting/snippet.jsx:

export default function Greeting({ text }) {
  return <span className="greeting">{text}</span>;
}

Uso em section:

import Greeting from '@corvex/snippets/greeting';

export default function HelloSection({ settings = {} }) {
  return (
    <section>
      <Greeting text={settings.title || 'Olá'} />
    </section>
  );
}

---

Veja também

• Section Contract
• Product Contract — objeto típico em snippets de card