How to insert components into translation

[alphaCastor]

Hi there,
Thanks for your work, it is really easy to work with that library.

Now I faced with one thing I don't know how to resolve.
I am working on an app and I have many texts like that:

As you can see here we have some components between raw text. Is it any way I can achieve it with library?

I would like to achieve something like that:

en.json

"key": "I highly recommend to charge ::link1 every day. On ::link2 step we will need to craft 12 pieces of food. It will require 12 days to get that amount of quartzes or you can buy it from Trading Post for gold. You can easily charge it moving to ::wp1 or ::wp2 and interacting with hero points:"

and in component:

{t('charged_quarz', { link1: LinkComponent, link2: LinkComponent, wp1: WpComponent, wp2: WpComponent })

[jarda-svoboda]

Hi @alphaCastor.
As far as I know, the only way how to achieve that is to use Svelte's render method together with @html special tag like this:

<script>
  import {browser} from '$app/environment';
</script>

{@html $t('key', { link: browser ? null : LinkComponent.render({/* component props */}).html })}

Note that the nested component won't be reactive (changing the component props won't re-render the component).

Hope that helps..