Add Rich Text Support to SolidJS i18n

[0-don]

Describe The Problem To Be Solved

Currently, we can't add links or styled text inside i18n translations in SolidJS. We need a simple way to add components like or tags within our translated text, similar to how next-intl does it.

Suggest A Solution

Add a simple t.rich() method that allows mapping custom tags to Solid components:

Example usage:

{
  "message": "Please refer to <guidelines>{name}</guidelines>"
}

const t = useTranslations();

t.rich('message', {
  guidelines: (text) => <A href="/guidelines">{text}</A>
  name: "the guidelines"
})

Key features:

• Support basic tag mapping
• Work with existing SolidJS components
• Keep the same simple API as regular translations

This would give us an easy way to add links and formatting to our translations while keeping the code clean and maintainable.

[thetarnav]

I like the simple concept
Maybe not that rich here is a method on whatever t is
If this could be done as a separate helper I wouldn't really mind
Don't see a way to make this type-safe though
At least not without codegen
So the "maintainable" part is up for debate

[0-don]

Thanks for the feedback @thetarnav

You're right about the implementation concerns. I think we could start simple with just basic runtime validation of the tags and mapping object. No need to overcomplicate things with type safety or codegen at this stage.

The separate helper approach you suggested makes sense too. The main goal is just to enable basic rich text support in translations.

[atk]

I like the idea of a resolveTags helper. Not being type safe may be a drawback, but not one that should concern us. We should use a callback function that emits a warning in DEV and strips the tags in prod.

[joaofranciscoguarda]

This is a must need. Not the best/easiest way to implement it, but some feature is better than no feature

[0-don]

I found a good example which next-intl uses internally
https://github.com/formatjs/formatjs/blob/main/packages/icu-messageformat-parser/parser.ts#L346

[masylum]

I would love this!

[niko-gardenanet]

A workaround would be returning JSX instead of strings and pass in a component like this:

{
  message: (Guidelines: ParentComponent, name: string) => <>Please refer to <Guidelines>{params.name}</Guidelines></>
}

t(
  "message",
  (props) => <A href="/guidelines">{props.children}</A>,
  "the guidelines"
)

[atk]

Dynamic components are not yet supported like this IIRC. You would need to use Dynamic, but otherwise, it illustrates well what is meant.

[niko-gardenanet]

I'm using the above solution right now and it works without issues as far as i can tell

[atk]

Ah, then that's already fixed, it seems.

[jamiemlaw]

I've been running into this issue too.

My solution so far is to use a custom template resolver:

export function resolveTemplateWithJSX(
  template: string,
  args?: Record<string, string | JSX.Element>,
): string | JSX.Element | JSX.Element[] {
  if (!args) return template;

  const regex = /\{\{\s*(\w+)\s*\}\}/g;
  const parts: (string | JSX.Element)[] = [];
  let lastIndex = 0;
  let match: RegExpExecArray | null;
  let hasJSXElement = false;

  while ((match = regex.exec(template)) !== null) {
    if (match.index > lastIndex) {
      parts.push(template.slice(lastIndex, match.index));
    }

    const key = match[1];
    const value = args[key];

    if (typeof value !== "string") {
      hasJSXElement = true;
    }

    parts.push(value ?? match[0]);
    lastIndex = regex.lastIndex;
  }

  if (lastIndex < template.length) {
    parts.push(template.slice(lastIndex));
  }

  return hasJSXElement ? parts : parts.join("");
}

And then with a dictionary of

{
  "hello": "Hello {{ name }}",
  "forMoreInformation": "For more information, {{ clickHere }}",
  "clickHere": "click here"
}

I can write my component like this:

const t = i18n.translator(dict, resolveTemplateWithJSX);

...

<p>
  {t("forMoreInformation", {
    clickHere: <a href="https://www.example.com">{t("clickHere"}</span>,
  })}
</p>

BUT: the issue is that TypeScript doesn't like that the resolver can return JSX.

The recommended solution is to annotate the translator type

const t = i18n.translator(dict, resolveTemplateWithJSX) as <K extends keyof Dictionary>(
  key: K,
  args?: Record<string, string | number | boolean | JSX.Element>,
) => string | JSX.Element | JSX.Element[] | undefined;

but this seems really clunky to have to do every time. Are there any other solutions?