Update Svelte renderer to pass props and snippets to component overrides

claude/file-naming-convention-LJdwR View source

Relationships

ID:ADR-008Status:accepted

Framework-native component interface for rune overrides

Date:2026-04-04

ID:WORK-123Status:done

Create @refrakt-md/react renderer with ADR-008 component interface

Priority:mediumComplexity:complex

ID:WORK-124Status:done

Create @refrakt-md/vue renderer with ADR-008 component interface

Priority:mediumComplexity:complex

ID:WORK-125Status:done

Add Astro native component override support with ADR-008 named slots

Priority:mediumComplexity:complex

claude/file-naming-convention-LJdwR current done

main done changeset-release/main done

Apr 21, 01:29 PMbbbb94c
Created (done)by bjornolofandersson
Apr 21, 01:17 PMf2b3512
Content editedby Claude
Add {ID}-{slug}.md filename convention + migrate filenames subcommand

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

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 + tag as 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.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