ID:WORK-117Status:done
Implement framework-agnostic extraction logic for component interface
Priority:highComplexity:moderateMilestone:v1.0.0Source:ADR-008
Summary
Add a shared extraction utility that partitions a serialized tag's children into three categories: properties (meta tags with property attribute), named refs (top-level children with data-name attribute), and anonymous content (everything else). This utility is framework-agnostic and will be consumed by each framework's renderer.
Acceptance Criteria
- New
extractComponentInterface(tag)function inpackages/transform/src/helpers.ts(or new file) - Returns
{ properties: Record<string, string>, refs: Record<string, SerializedTag[]>, children: RenderableTreeNode[] } - Properties extracted from children where
attributes.propertyis set, keyed by property name, value fromattributes.content - Refs extracted from top-level children where
attributes['data-name']is set, keyed by data-name value - Nested refs (children inside other refs) are NOT extracted — they stay inside their parent ref
- Remaining children (neither property nor named ref) returned as anonymous content
- Unit tests covering: basic extraction, nested refs stay nested, empty cases, mixed children
Approach
- Add extraction function to
packages/transform - Iterate children once, partitioning into three buckets based on attributes
- Export for use by framework renderers
Resolution
Completed: 2026-04-04
Branch: claude/adr-008-implementation-nBN9K
What was done
- Added
extractComponentInterface()andfromKebabCase()topackages/transform/src/helpers.ts - Added
ComponentInterfacetype export - Exported new functions from
packages/transform/src/index.ts - 11 unit tests in
packages/transform/test/extract-interface.test.ts
Notes
- Uses
data-fieldattribute on meta tags (notproperty) since that's whatcreateComponentRenderableactually produces - Returns camelCase keys from kebab-case
data-fieldvalues viafromKebabCase
Relationships
Implements
History
- f262d7bsource+ADR-008
- c435d57statusready→done
- ☑ New `extractComponentInterface(tag)` function in `packages/transform/src/helpers.ts` (or new file)
- ☑ Returns `{ properties: Record<string, string>, refs: Record<string, SerializedTag[]>, children: RenderableTreeNode[] }`
- ☑ Properties extracted from children where `attributes.property` is set, keyed by property name, value from `attributes.content`
- +4 more criteria
- dca6250milestone+v1.0.0
- ece282cCreated (ready, high, moderate, transform, renderer, architecture)