ID:WORK-119Status:done
Update Svelte renderer to pass props and snippets to component overrides
Priority:highComplexity:complexMilestone:v1.0.0Source:ADR-008
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
extractComponentInterfacebefore dispatching to registered components - Property values passed as named props (e.g.,
prepTime="15 min") - Top-level refs passed as Svelte 5 snippets (using
createRawSnippetor equivalent) - Anonymous content passed as
childrensnippet - Original
tagprop 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
- In the component dispatch branch of
Renderer.svelte, call extraction utility - Construct snippet functions for each ref using Svelte 5's programmatic snippet API
- Spread extracted properties + snippets +
tagas props to the component - 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.sveltewith extraction and snippet creation - Added
nodeToHtml()for HTML serialization with codeblock/raw-html support - Used
createRawSnippetfor ref and children snippets - Spread extracted properties and snippet props to Component, with
tagalongside - 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
Relationships
Implements
Related
ID:WORK-125Status:done10/10
Add Astro native component override support with ADR-008 named slots
Priority:mediumComplexity:complex
ID:WORK-123Status:done12/12
Create @refrakt-md/react renderer with ADR-008 component interface
Priority:mediumComplexity:complex
ID:WORK-124Status:done12/12
Create @refrakt-md/vue renderer with ADR-008 component interface
Priority:mediumComplexity:complex
ID:WORK-100Status:done5/5
Migrate simple community runes from Model to createContentModelSchema
Priority:highComplexity:simpleMilestone:v1.0.0
History
- 1676387complexityhigh→complex
- f262d7bsource+ADR-008
- c435d57statusready→done
- ☑ 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)
- +5 more criteria
- dca6250milestone+v1.0.0
- ece282cCreated (ready, high, high, svelte, renderer, architecture)