Components

Components are reusable compile-time templates in Quire, not runtime scripts or components loaded by the browser.

Component definition

component ProductCard(item: Product, showPrice: Boolean) {
  card productCard {
    text productTitle {
      value item.title
      variant "title"
    }

    if showPrice {
      price productPrice {
        value item.price
      }
    }
  }
}

• Parameters are schema-typed.
• Components are emitted as ordinary block nodes after expansion.
• Recursive expansion is rejected by the compiler.

Using a component

use ProductCard featured {
  item product
  showPrice true
}

Component arguments are plain attributes (name valueExpression) unless a slot is provided.

Partial and include

partial is an alias for component-style templates, and include is the template-use form:

partial ProductCard(item: Product) {
  card productCard {
    slot media {
      image fallback {
        src item.featuredImage.url
        alt item.featuredImage.alt
      }
    }
  }
}

include ProductCard featured {
  item product
  slot media {
    image cover {
      src product.featuredImage.url
      alt product.featuredImage.alt
    }
  }
}

If no slot body is supplied at use time, the slot default body in the definition emits.

Safety and diagnostics

• Components and partials expand at compile time.
• There is no runtime component loading from Quire source.
• Diagnostics cover:
  • unknown components
  • invalid component arguments
  • recursive component definitions
  • duplicate or missing exported component names

Example in the canonical source set

import { Nav, Hero, Features, CTA, Footer } from "../../library/standard"

quire StretchPressHome {
  model {
    page: StretchPressPage
    navItems: StandardNavItem[]
    legalItems: StandardNavItem[]
    features: StandardFeature[]
  }

  route "/"
  title page.metaTitle

  include Nav nav { brand "StretchPress" }
  include Hero hero { title page.title }
  include Footer footer { brand "StretchPress" }
}

This comes from examples/site/home.quire.