WORK-120
ID:WORK-120Status:done

Export generic type interfaces for rune component overrides

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

Relationships

Implements 1
Branches 3
main current done
claude/file-naming-convention-LJdwR donechangeset-release/main doneclaude/align-sidenav-styling-4MuxV 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

Export generic TypeScript interfaces from rune packages that describe the component override contract — scalar property types derived from schema attributes and renderable slot names parameterized over a generic type. Component authors use these as RecipeProps<Snippet> (Svelte), RecipeProps<ReactNode> (React), etc.

Acceptance Criteria

  • Core runes with component renderables export generic prop interfaces from @refrakt-md/runes
  • Community package runes with component renderables export generic prop interfaces from their respective packages (e.g., RecipeProps from @refrakt-md/learning)
  • Property types match schema attribute types (String → string, Number → string since meta content is always string, enum matches → union literal)
  • Slot names (from top-level refs) typed as R | undefined where R is the generic renderable type parameter
  • children and tag included in every interface (children as R | undefined, tag as SerializedTag)
  • Interfaces default the generic parameter to unknown (Props<R = unknown>)
  • Example usage documented in at least one community package README or doc page
  • Exported types build cleanly with no circular dependencies

Approach

  1. For each rune that uses createComponentRenderable, create a corresponding Props<R> interface
  2. Property types derived from the schema's attributes definition
  3. Slot names derived from the refs keys in createComponentRenderable
  4. Export from the package's public API alongside the schema

Resolution

Completed: 2026-04-04

Branch: claude/adr-008-implementation-nBN9K

What was done

  • Created packages/types/src/component-props.ts with BaseComponentProps<R>, PageSectionSlots<R>, SplitLayoutProperties
  • Created packages/runes/src/props.ts with 37+ core rune interfaces
  • Created props.ts for all 8 community packages (learning, marketing, docs, design, places, media, business, storytelling)
  • Exported types from each package's index.ts
  • Full build passes with no type errors or circular dependencies

Notes

  • Used Approach B from ADR-008 (generic interface with renderable type parameter)
  • Common base types reduce duplication across interfaces
  • Example usage documented in themes/components.md