WORK-119
ID:WORK-119Status:done

Update Svelte renderer to pass props and snippets to component overrides

Priority:highComplexity:complexMilestone: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 6
  1. e900a90
    Created (done)by bjornolofandersson
  2. 1676387
    Content editedby Claude
  3. f262d7b
    Content editedby Claude
  4. c435d57
    statusready→done
    by Claude
  5. dca6250
    Content editedby Claude
  6. ece282c
    Created (ready)by Claude
    Add work items WORK-117 through WORK-122 for ADR-008 implementation

Summary

Update the Svelte 5 Renderer to use the extraction utility from WORK-100 when dispatching to a registered component override. Properties become scalar props, top-level refs become Svelte 5 snippets, anonymous content becomes the children snippet, and the original tag object is passed alongside as an escape hatch.

Acceptance Criteria

  • Renderer calls extractComponentInterface before dispatching to registered components
  • Property values passed as named props (e.g., prepTime="15 min")
  • Top-level refs passed as Svelte 5 snippets (using createRawSnippet or equivalent)
  • Anonymous content passed as children snippet
  • Original tag prop still passed alongside for backwards compatibility
  • Existing element overrides (Table, Pre) continue to work unchanged
  • Snippets contain identity-transformed content (BEM classes, structure intact)
  • Integration test: mock component receives correct props, snippets, and tag

Approach

  1. In the component dispatch branch of Renderer.svelte, call extraction utility
  2. Construct snippet functions for each ref using Svelte 5's programmatic snippet API
  3. Spread extracted properties + snippets + tag as props to the component
  4. Test with an example rune component override

Resolution

Completed: 2026-04-04

Branch: claude/adr-008-implementation-nBN9K

What was done

  • Updated packages/svelte/src/Renderer.svelte with extraction and snippet creation
  • Added nodeToHtml() for HTML serialization with codeblock/raw-html support
  • Used createRawSnippet for ref and children snippets
  • Spread extracted properties and snippet props to Component, with tag alongside
  • 6 integration tests in packages/svelte/test/renderer-extraction.test.ts

Notes

  • Snippets render static HTML via createRawSnippet (sufficient for identity-transformed content)
  • Element overrides unchanged (extraction only applies to Component dispatch path)
  • VOID_ELEMENTS set added to Renderer for proper void element handling in HTML output