Composition with ownership

Components and expansion provenance

Components let LZR reuse structure without losing source ownership. A rendered element can come from a shared component template while its values are owned by a call-site attribute, slot, or data binding.

Call site

<hero
  title="Ship fast with Hypermake"
  date="2024-05-12"
  tags="lzr, inspector"
  image="/img/og.png"
  alt="Build graph"
/>

Component definition

<article class="prose">
  <h1>{{ title }}</h1>
  <time datetime="{{ date }}">
    {{ date }}
  </time>
  <ul class="tags">...</ul>
  <img src="{{ image }}"
       alt="{{ alt }}" />
</article>

Expanded output

<article class="prose"
  data-hm-from="src://_components/feature-card.html">
  <h1>Ship fast with Hypermake</h1>
  <time datetime="2024-05-12">2024-05-12</time>
  <ul class="tags">
    <li>lzr</li><li>inspector</li>
  </ul>
  <img src="/img/og.png" alt="Build graph" />
</article>

Edit guidance

Rendered span	Owned by	Origin	Guidance
`<h1>...</h1>`	title	Call site	Call-site attribute.
`<time>...</time>`	date	Call site	Call-site attribute.
`<li>lzr</li>`	tags	Call site	Call-site attribute.
`<img alt=... />`	alt	Call site	Call-site attribute.
`<article class=prose>`	class	Component	Component template.
`data-hm-from`	metadata	Component	Provenance metadata.

Component graph checks shell

hypermake affected-by src/components/component-bound.html
hypermake explain rendered/public/components/component-bound.html
hypermake diagnostics src/components/component-bound.html