fix: support Svelte named snippets (#206)

atinux · web-flow · commit 660747e94be5 · 2026-05-21T16:40:00.000+02:00
diff --git a/examples/1.frameworks/sveltekit/src/app.css b/examples/1.frameworks/sveltekit/src/app.css
@@ -207,6 +207,14 @@ a {
   font-size: 20px;
 }
 
+.lazy-card__footer {
+  margin-top: 14px;
+  border-top: 1px solid currentColor;
+  padding-top: 12px;
+  font-size: 14px;
+  opacity: 0.78;
+}
+
 .lazy-card p:last-child {
   margin-bottom: 0;
 }
diff --git a/examples/1.frameworks/sveltekit/src/lib/components/comark/LazyCard.svelte b/examples/1.frameworks/sveltekit/src/lib/components/comark/LazyCard.svelte
@@ -5,10 +5,12 @@
     title = 'Lazy card',
     accent = 'cyan',
     children,
+    footer,
   }: {
     title?: string
     accent?: 'cyan' | 'emerald'
     children?: Snippet
+    footer?: Snippet
   } = $props()
 </script>
 
@@ -18,4 +20,9 @@
   <div>
     {@render children?.()}
   </div>
+  {#if footer}
+    <footer class="lazy-card__footer">
+      {@render footer()}
+    </footer>
+  {/if}
 </section>
diff --git a/examples/1.frameworks/sveltekit/src/lib/content.ts b/examples/1.frameworks/sveltekit/src/lib/content.ts
@@ -9,6 +9,9 @@ This alert is returned from \`componentsManifest\` as a dynamic import and is aw
 
 ::lazy-card{title="Lazy import rendered by SSR" accent="cyan"}
 This component is loaded only when the \`lazy-card\` tag appears in the rendered markdown.
+
+#footer
+Named snippets are forwarded through the lazy component resolver.
 ::
 `.trim()
 
@@ -23,5 +26,8 @@ Use this pattern when you want stable, non-experimental SSR.
 
 ::lazy-card{title="Eager manifest entry" accent="emerald"}
 This card is resolved synchronously from an eager manifest, so it can render during SSR without Svelte's experimental async support.
+
+#footer
+The same \`#footer\` slot works with \`<ComarkRenderer>\` and an eager manifest.
 ::
 `.trim()
diff --git a/packages/comark-svelte/src/components/ComarkNode.svelte b/packages/comark-svelte/src/components/ComarkNode.svelte
@@ -68,6 +68,7 @@ naturally appears inline after the deepest trailing text node.
 
 <script lang="ts">
   import type { ComarkNode as ComarkNodeType, ComponentManifest, NodeRenderData } from 'comark'
+  import type { Snippet } from 'svelte'
   import type { ComponentResolver } from '../types.js'
   import ComarkNode from './ComarkNode.svelte'
   import Resolve from './Resolve.svelte'
@@ -100,6 +101,62 @@ naturally appears inline after the deepest trailing text node.
     'link', 'meta', 'param', 'source', 'track', 'wbr',
   ])
 
+  interface RenderChild {
+    node: ComarkNodeType
+    caretClass: string | null
+  }
+
+  function getSlotName(node: ComarkNodeType): string | null {
+    if (typeof node === 'string' || !Array.isArray(node) || node[0] !== 'template') {
+      return null
+    }
+
+    const props = (node.length >= 2 ? node[1] : {}) ?? {}
+    if (typeof props.name === 'string' && props.name) {
+      return props.name
+    }
+
+    for (const key in props) {
+      if (key.startsWith('#') && key.length > 1) {
+        return key.slice(1)
+      }
+    }
+
+    return null
+  }
+
+  function createChildrenSnippet(
+    snippetChildren: ComarkNodeType[],
+    snippetRenderData: NodeRenderData,
+    snippetCaretClass: string | null,
+  ): Snippet {
+    return ((anchor: unknown) => {
+      const renderNode = ComarkNode as unknown as (anchor: unknown, props: Record<string, unknown>) => void
+      for (let i = 0; i < snippetChildren.length; i++) {
+        renderNode(anchor, {
+          node: snippetChildren[i],
+          components,
+          componentsManifest,
+          resolver: Resolver,
+          caretClass: i === snippetChildren.length - 1 ? snippetCaretClass : null,
+          renderData: snippetRenderData,
+        })
+      }
+    }) as unknown as Snippet
+  }
+
+  function toRenderChildren(
+    sourceChildren: ComarkNodeType[],
+    sourceIndex: number,
+    totalChildren: number,
+    nodeCaretClass: string | null,
+  ): RenderChild[] {
+    return sourceChildren.map((child, index) => ({
+      node: child,
+      caretClass: sourceIndex === totalChildren - 1 && index === sourceChildren.length - 1 ? nodeCaretClass : null,
+    }))
+  }
+
   let { isText, tag, isVoid, children, Component, componentPromise, mappedProps } = $derived.by(() => {
     let isText = false
     let tag: string | null = null
@@ -159,16 +216,50 @@ naturally appears inline after the deepest trailing text node.
       ? { ...renderData, props: mappedProps }
       : renderData,
   )
+
+  let { defaultChildren, namedSlotProps } = $derived.by(() => {
+    const defaultChildren: RenderChild[] = []
+    const slotProps: Record<string, Snippet> = {}
+
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i]
+      const slotName = getSlotName(child)
+      if (slotName) {
+        const slotChildren = (child as unknown as ComarkNodeType[]).slice(2) as ComarkNodeType[]
+        if (slotName === 'default') {
+          defaultChildren.push(...toRenderChildren(slotChildren, i, children.length, caretClass))
+        }
+        else {
+          slotProps[slotName] = createChildrenSnippet(
+            slotChildren,
+            childrenRenderData,
+            i === children.length - 1 ? caretClass : null,
+          )
+        }
+      }
+      else {
+        defaultChildren.push({ node: child, caretClass: i === children.length - 1 ? caretClass : null })
+      }
+    }
+
+    return { defaultChildren, namedSlotProps: slotProps }
+  })
+
+  let componentProps = $derived(
+    Object.keys(namedSlotProps).length > 0
+      ? { ...mappedProps, ...namedSlotProps }
+      : mappedProps,
+  )
 </script>
 
 {#snippet renderChildren()}
-  {#each children as child, i (i)}
+  {#each defaultChildren as child, i (i)}
     <ComarkNode
-      node={child}
+      node={child.node}
       {components}
       {componentsManifest}
       resolver={Resolver}
-      caretClass={i === children.length - 1 ? caretClass : null}
+      caretClass={child.caretClass}
       renderData={childrenRenderData}
     />
   {/each}
@@ -180,11 +271,11 @@ naturally appears inline after the deepest trailing text node.
       style={CARET_STYLE}>{CARET_TEXT}</span
     >{/if}
 {:else if Component}
-  <Component {...mappedProps}>
+  <Component {...componentProps}>
     {@render renderChildren()}
   </Component>
 {:else if componentPromise}
-  <Resolver promise={componentPromise} props={mappedProps}>
+  <Resolver promise={componentPromise} props={componentProps}>
     {@render renderChildren()}
   </Resolver>
 {:else if isVoid}
diff --git a/packages/comark-svelte/test/ComarkNode.svelte.test.ts b/packages/comark-svelte/test/ComarkNode.svelte.test.ts
@@ -4,6 +4,7 @@ import { parse } from 'comark'
 import ComarkRenderer from '../src/components/ComarkRenderer.svelte'
 import ComarkNode from '../src/components/ComarkNode.svelte'
 import Alert from './test-components/Alert.svelte'
+import CardWithFooter from './test-components/CardWithFooter.svelte'
 import ProseH1 from './test-components/ProseH1.svelte'
 
 describe('ComarkNode', () => {
@@ -172,6 +173,25 @@ describe('custom components', () => {
     await expect.element(screen.getByRole('alert')).toHaveClass('alert-info')
   })
 
+  it('passes named slots as Svelte snippet props', async () => {
+    const tree = await parse(`::card{title="My Card"}
+Default slot content.
+
+#footer
+Footer slot content.
+::`)
+    const screen = render(ComarkRenderer, {
+      tree,
+      components: { card: CardWithFooter },
+    })
+    const footer = screen.container.querySelector<HTMLElement>('footer')!
+    expect(footer).not.toBeNull()
+    await expect.element(screen.getByRole('heading', { name: 'My Card', level: 3 })).toBeInTheDocument()
+    await expect.element(screen.getByText('Default slot content.')).toBeInTheDocument()
+    await expect.element(footer).toHaveTextContent('Footer slot content.')
+    expect(screen.container.querySelector('template[name="footer"]')).toBeNull()
+  })
+
   it('resolves custom components from componentsManifest', async () => {
     const tree = await parse('::alert{type="warning"}\nLazy content\n::')
     const screen = render(ComarkRenderer, {
diff --git a/packages/comark-svelte/test/ComarkNode.test.ts b/packages/comark-svelte/test/ComarkNode.test.ts
@@ -6,6 +6,7 @@ import ComarkNode from '../src/components/ComarkNode.svelte'
 import ComarkAsync from '../src/async/ComarkAsync.svelte'
 import Alert from './test-components/Alert.svelte'
 import Card from './test-components/Card.svelte'
+import CardWithFooter from './test-components/CardWithFooter.svelte'
 import ProseH1 from './test-components/ProseH1.svelte'
 
 /** Strip Svelte SSR hydration comments from rendered HTML */
@@ -247,6 +248,23 @@ describe('custom components', () => {
     expect(output).toContain(' text')
   })
 
+  it('passes named slots as Svelte snippet props during SSR', async () => {
+    const tree = await parse(`::card{title="My Card"}
+Default slot content.
+
+#footer
+Footer slot content.
+::`)
+    const { body } = render(ComarkRenderer, {
+      props: { tree, components: { card: CardWithFooter } },
+    })
+    const output = html(body)
+    expect(output).toContain('<h3>My Card</h3>')
+    expect(output).toContain('<p>Default slot content.</p>')
+    expect(output).toContain('<footer>Footer slot content.</footer>')
+    expect(output).not.toContain('<template')
+  })
+
   it('resolves eager componentsManifest entries during SSR', async () => {
     const tree = await parse('::alert{type="warning"}\nLazy content\n::')
     const { body } = render(ComarkRenderer, {
@@ -281,6 +299,29 @@ describe('custom components', () => {
     expect(output).toContain('Lazy content')
   })
 
+  it('passes named slots through async componentsManifest entries during SSR', async () => {
+    const { body } = await render(ComarkAsync, {
+      props: {
+        markdown: `::card{title="Async Card"}
+Default slot content.
+
+#footer
+Footer slot content.
+::`,
+        componentsManifest: (name: string) => {
+          if (name === 'card') {
+            return Promise.resolve({ default: CardWithFooter })
+          }
+        },
+      },
+    })
+    const output = html(body)
+    expect(output).toContain('<h3>Async Card</h3>')
+    expect(output).toContain('<p>Default slot content.</p>')
+    expect(output).toContain('<footer>Footer slot content.</footer>')
+    expect(output).not.toContain('<template')
+  })
+
   it('keeps componentsManifest caches isolated by manifest function', async () => {
     await render(ComarkAsync, {
       props: {
diff --git a/packages/comark-svelte/test/test-components/CardWithFooter.svelte b/packages/comark-svelte/test/test-components/CardWithFooter.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  let {
+    title = '',
+    children,
+    footer,
+  }: {
+    title?: string
+    children?: Snippet
+    footer?: Snippet
+  } = $props()
+</script>
+
+<div class="card">
+  <h3>{title}</h3>
+  {@render children?.()}
+  <footer>{@render footer?.()}</footer>
+</div>

Original file line number	Diff line number	Diff line change
`@@ -207,6 +207,14 @@ a {`
`207`	`207`	`font-size: 20px;`
`208`	`208`	`}`
`209`	`209`
	`210`	`+.lazy-card__footer {`
	`211`	`+ margin-top: 14px;`
	`212`	`+ border-top: 1px solid currentColor;`
	`213`	`+ padding-top: 12px;`
	`214`	`+ font-size: 14px;`
	`215`	`+ opacity: 0.78;`
	`216`	`+}`
	`217`	`+`
`210`	`218`	`.lazy-card p:last-child {`
`211`	`219`	`margin-bottom: 0;`
`212`	`220`	`}`