WORK-117
ID:WORK-117Status:done

Implement framework-agnostic extraction logic for component interface

Priority:highComplexity:moderateMilestone:v1.0.0Source:ADR-008
main View source

Relationships

Implements 1
Related 3
Branches 2
main current done
claude/file-naming-convention-LJdwR donechangeset-release/main done
History 5
  1. e900a90
    Created (done)by bjornolofandersson
  2. f262d7b
    Content editedby Claude
  3. c435d57
    statusready→done
    by Claude
  4. dca6250
    Content editedby Claude
  5. ece282c
    Created (ready)by Claude
    Add work items WORK-117 through WORK-122 for ADR-008 implementation

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 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
  • 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

  1. Add extraction function to packages/transform
  2. Iterate children once, partitioning into three buckets based on attributes
  3. Export for use by framework renderers

Resolution

Completed: 2026-04-04

Branch: claude/adr-008-implementation-nBN9K

What was done

  • Added extractComponentInterface() and fromKebabCase() to packages/transform/src/helpers.ts
  • Added ComponentInterface type export
  • Exported new functions from packages/transform/src/index.ts
  • 11 unit tests in packages/transform/test/extract-interface.test.ts

Notes

  • Uses data-field attribute on meta tags (not property) since that's what createComponentRenderable actually produces
  • Returns camelCase keys from kebab-case data-field values via fromKebabCase