Replacing placeholders/arguments with reactive/virtual elements aka. partial replacing

[seahindeniz]

Hello! 👋🏻

I just came across this library and looks very good!

Firstly, I would like to ask if there's a function or utility or anything that gives the ability to change a part of a text with a real DOM element? I'm not talking about replacing string with a markup, an organic replacement.

Problem

The need is to replace translation with organic elements by referencing them using keys (toc/pp) and using the value inside the element by passing it to the rendering scope to have the following output

Translation

const en = {
  registerTermsOfCondition: 'By registering, you agree to our [Terms of Service][toc] and [Privacy Policy][pp]',
} satisfies BaseTranslation

Solution

By using RegExp, split and mapping, utility can return an array of string or Element | JSX.Element which we can use it on the element.
I haven't tried this solution on any other framework or vanilla way, but I'm pretty sure that it'll work for all.

Utility

const translationChildMatcherExpression = /(\[(?<value>.*?)\]\[(?<key>\w+)\])/;

function translateWithChild(
  content: string,
  children: Record<string, (content: string) => JSX.Element>
) {
  return content
    .split(/(\[.*?\]\[\w+\])/g)
    .map(piece => {
      const match = piece.match(translationChildMatcherExpression);

      if (!match?.groups?.value) return piece;

      const { key, value } = match.groups;

      return children[key](value);
    })
    .filter(Boolean);
}

Usage (SolidJS)

import { A } from '@solidjs/router';
import { useI18nContext } from '~/i18n/i18n-solid';

export const Text = () => {
  const { LL } = useI18nContext();

  return (
    <div>
      {translateWithChild(LL().registerTermsOfCondition(), {
        // The content contains the translated content of the related key
        // which we can use it on the component as a child
        toc: content => <A href="/terms-of-service">{content}</A>,
        // Alternative declaration
        pp(content) {
          return <A href="/privacy-policy">{content}</A>;
        },
      })}
    </div>
  );
};

Output

Additionally

As you can see from the children: Record<string, (content: string) => JSX.Element> parameter, the type of key is string. I'm not sure of this, but maybe it can be type-safe, considering that keyed arguments are type safe.

Overall, I'm also not sure if this approach is best or suitable for this library or may create performance issue. Although, according to SolidJS, all seems good since the rendering part happen under the core reactivity scope