ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: lead with shape contrast for variable attributes

Browse Source 
Follow-up on the PR #603 review. The previous fix named both attributes
but didn't make their distinct shapes / roles obvious; a reader could
still wonder "are these two views of the same data?". Now the doc
opens with the shape contrast (array of declarations vs object of
values) and the section closes with a numbered precedence layering so
the merge order is unambiguous.

- compositions.md: replaced the bullet list with a shape-first
  description ("JSON array of declarations" vs "JSON object keyed by
  variable id"), an explicit "they aren't redundant" line, and a
  numbered list of the three precedence layers (declared default →
  host data-variable-values → CLI --variables).
- skills/hyperframes-cli/SKILL.md: highlighted the same shape contrast
  inside the parametrized-renders paragraph (declarations array vs
  values object).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
James
2026-05-04 20:26:20 +00:00
committed by James Russo
co-authored by Claude Opus 4.7
parent 22bcd7a18b
commit 21243b6957
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/docs/compositions.md
+8 -4
View File
@@ -26,12 +26,16 @@ Use `npx hyperframes compositions` to see all compositions in a project.
## Variables
Two attributes work together:
Two attributes with different shapes and different jobs:
- **`data-composition-variables`** on the `<html>` root *declares* the variables (id, type, label, default).
- **`data-variable-values`** on a sub-comp host element *overrides* values for that one instance.
- **`data-composition-variables`** on the `<html>` root — a JSON **array of declarations** (`{id, type, label, default}` per entry). Defines the schema: which variables exist, what type they are, and what defaults to use when no override is provided.
- **`data-variable-values`** on a sub-comp host element — a JSON **object keyed by variable id** (`{"title":"Pro","price":"$29"}`). Carries per-instance overrides for that one mount of the sub-composition.
Inside any composition script, `window.__hyperframes.getVariables()` returns the merged result of declarations + overrides. CLI `npx hyperframes render --variables '{...}'` provides a top-level override that layers the same way.
They aren't redundant — one is "what variables does this composition have?" and the other is "what values should this particular embed use?" Inside any composition script, `window.__hyperframes.getVariables()` returns the merged result. Layering, lowest to highest precedence:
1. Declared defaults from `data-composition-variables`
2. Per-instance overrides from the host's `data-variable-values` (sub-comp embeds only)
3. CLI overrides from `npx hyperframes render --variables '{...}'` (top-level renders only)
```html
<!-- compositions/card.html -->