Raw translation?

[huuff]

I've got a specific use case (though I don't think it's rare) where I want to embed a (localized) link inside a translation, something like this would do:

{
  "payment_accept_terms": "By proceeding, you confirm that you've read and accepted our <a href=\"http://example.org/en/terms\">terms and conditions</a>",
}

Where the href attribute would also differ depending on the locale. This would work great, but when using t! directly, I get something like this:

My current solution

I can fix this with component interpolation, but it feels weird and cumbersome. First, I need to get the href out of the translation text:

{
  "payment_accept_terms": "By proceeding, you confirm that you've read and accepted our <a>terms and conditions</a>",
}

Then, I add the urls as a separate key:

{
  "urls": {
    "terms_and_conditions": "https://example.org/en/terms"
  }
}

And finally, I use component interpolation at the call site:

 {t!(i18n, payment_accept_terms, <a> = move |it| view!(<a href=t!(i18n, urls.terms_and_conditions)>{it}</a>))}

My question

Is there any nicer way of doing this? Maybe something like a t_raw! macro that just substitutes the text as a raw view!?

[Baptistemontan]

{t!(i18n, payment_accept_terms, <a> = move |it| view!(<a href=t!(i18n, urls.terms_and_conditions)>{it}</a>))}

That does look awfull yes...

Nicest thing I can think of is

#[component]
fn TermsAndConditionsLink(children: Children) -> impl IntoView {
  let i18n = use_i18n();
  view! {
    <a href=t!(i18n, urls.terms_and_conditions)>
      {children}
    </a>
  }
}

t!(i18n, payment_accept_terms, <a> = <TermsAndConditionsLink />)

I'll think of a way to make that easier

[huuff]

Thanks! That does look nicer.

I also have some other links I want to interpolate, but maybe I could write wrappers like these with a simple macro.

The simplest way I can think of right now is a t_raw macro (though I don't know how hard that'd be to implement at the moment). Maybe some extensions to component interpolation like allow passing attributes would help but that does definitely look harder.

[Baptistemontan]

Maybe some extensions to component interpolation like allow passing attributes would help but that does definitely look harder

That is actually easier, the parsing would be a pain but in practice it's better

[huuff]

That's nice to hear! I just started using the library today (and I love it!) so I couldn't make any informed opinions on this but syntax seems hard to settle on... I was thinking on something like:

{
  "payment_accept_terms": "By proceeding, you confirm that you've read and accepted our <a href=\"http://example.org/en/terms\">terms and conditions</a>",
}

And at callsite:

t!(i18n, payment_accept_terms, <a href> = <LocalizedLink href=href />)

Many hard things though:

• This is only the abbreviated syntax, not sure how would that look for the closure syntax, since for components, props are named but for closures args are positional
• What's the type of arguments? Supporting only &'static str seems acceptable, but also feels kinda limiting
• Parsing really looks like a pain

Also not sure whether there are many more usecases for this

[huuff]

I've found a very suitable workaround for me:

 <p inner_html={t!(i18n, contact.newsletter.choice)}/>

Where the translation is:

  "contact": {
    "newsletter": {
      "choice": "I want to recieve special discounts and offers and I accept the <a href=\"#\">privacy policy</a>"
    },
}

(Sorry I don't have a smaller example, this is what I was working on right now)

Basically, having the raw html in the translation, wrap it in a component and insert it using inner_html. You could even wrap this in a component so it looks nicer.