Skip to content

Build a component

Briefing, not authority. (R) rule at linked source · (O) dated upstream fact · (P) procedure · (C) open work · (G) not established.

WHAT THIS MEANS IN DRUPAL

A reusable visual unit with a typed contract (props, slots). Two kinds: SDC (Twig, theme-owned, server-rendered) or Canvas Code Component (React/Preact, npm, Canvas CLI) (R) site-building §7.

OWNER

  • Generic primitives and tokens: Studio UI, checked first (R) site-building §8.
  • Drupal-specific presentation: theme (R) site-building §16, §39.
  • Local code-component workflow: Canvas CLI (R) how-we-build §17.

PREREQUISITES

  1. (P) Fill the pre-build report; empty WHY_NEW_CODE_IS_REQUIRED means stop (R) site-building §38.
  2. (P) Placement decision: generic UI, Drupal-specific, site-specific (R) site-building §39.

DO THIS

  1. (P) Reuse or generalize at the owner before creating (R) site-building §8.
  2. (P) Typed props, small API, slots for children; variants are props, not new components (R) DRY §2-10.
  3. (P) npm dependencies declared, never copied (R) site-building §9.
  4. (P) npx canvas validate before npx canvas push (R) how-we-build §19; procedure Canvas CLI.
  5. (P) Accessibility is acceptance (R) site-building §29.

WATCH FOR

  • Cacheability and access must survive reuse (R) DRY §44-45.
  • Credentials and OAuth tokens never committed (R) how-we-build §20.

DO NOT

  • New component because copy changed (R) site-building §5.
  • Copy Studio UI or node_modules, CDN tags, edit generated output (R) site-building §8-9.
  • Competing Canvas validator or bespoke mount script (R) how-we-build §19, standard §8.

OWNERSHIP / CAN-SHOULD-MAY

  • CAN: Canvas CLI, theme repo.
  • SHOULD: fix defects at the producer, never in the consumer (R) site-building §24.
  • MAY: push only after validate passes.

DO NOT REDISCOVER

  • SDC vs Code Component is chosen by capability, not language preference (R) site-building §7.

CONFLICTS

None found in current sources.

GO DEEPER

Anchored sources: frontmatter authority_sources. Expires last_verified + 30d.