How to change the rendering of a single component from a plugin?

[cshaa]

Hey Sotaro!
First of all, I want to thank you for this library, it's really fun to work with!
I've tried both remark and rehype plugins and I really like how easy it is to modify the produced HTML. However, I'm struggling with the plugin.renderer part a little.

I want to render <a> elements differently based on whether it's an external link, or an internal link. I want to implement this logic in Svelte, so I figured the intended way to do this would be something like:

<script lang="ts">
  import Markdown, { type Plugin } from 'svelte-exmarkdown';
  import Link from '$lib/Link.svelte';
  export let md;

  const linkPlugin: Plugin = {
    renderer: { a: Link },
  };
</script>

<Markdown {md} plugins={[ linkPlugin ]} />

But there are two problems with it. First one is somewhat minor – there doesn't seem to be any way to correctly type the Link component. Regardless of what properties Link has, I always get a type error:

Type 'typeof Link__SvelteComponent_' is not assignable to type 'typeof SvelteComponent'.

Type 'typeof Link__SvelteComponent_' is not assignable to type 'typeof SvelteComponent'.
  Types of construct signatures are incompatible.
    Type 'new (options: ComponentConstructorOptions<{ (Link's props here) }>) => Link__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
      The types of '$$prop_def' are incompatible between these types.
        Type '{ (Link's props here) }' is not assignable to type 'Props'.
          '{ (Link's props here) }' is assignable to the constraint of type 'Props', but 'Props' could be instantiated with a different subtype of constraint 'Record<string, any>'.

I say minor, because it is relatively easy to walkaround using type coercion:

import type { SvelteComponent } from 'svelte';
const linkPlugin: Plugin = {
  renderer: { a: Link as SvelteComponent }
};

However, the second problem seems larger: the Link component recieves in its props the HTML AST node it should render, including the AST nodes of all its children. However, I don't want to modify how the children are rendered – I only want to modify the single <a> element. Right now it seems to me that I have to take care of rendering the entire subtree myself – and if I did, all other renderer plugins would stop working inside <a>.

Is there any way to let the library take care of rendering the child nodes?

[ssssota]

Thank you for your question!

Sorry for the hard to read documents.

I have prepared a example for your reference.
It is important to prepare a bridge component.
Please check this example: https://stackblitz.com/edit/svelte-exmarkdown-custom-link?file=src%2FApp.svelte

[cshaa]

Awesome, thanks! :)