revite/src/lib/i18n.tsx

import { IntlContext, translate } from "preact-i18n";
import { useContext } from "preact/hooks";

import { Children } from "../types/Preact";

interface Fields {
    [key: string]: Children;
}

interface Props {
    id: string;
    fields: Fields;
}

export interface IntlType {
    intl: {
        dictionary: {
            [key: string]: Object | string;
        };
    };
}

// This will exhibit O(2^n) behaviour.
function recursiveReplaceFields(input: string, fields: Fields) {
    const key = Object.keys(fields)[0];
    if (key) {
        const { [key]: field, ...restOfFields } = fields;
        if (typeof field === "undefined") return [input];

        const values: (Children | string[])[] = input
            .split(`{{${key}}}`)
            .map((v) => recursiveReplaceFields(v, restOfFields));

        for (let i = values.length - 1; i > 0; i -= 2) {
            values.splice(i, 0, field);
        }

        return values.flat();
    } else {
        // base case
        return [input];
    }
}

export function TextReact({ id, fields }: Props) {
    const { intl } = useContext(IntlContext) as unknown as IntlType;

    const path = id.split(".");
    let entry = intl.dictionary[path.shift()!];
    for (let key of path) {
        // @ts-expect-error
        entry = entry[key];
    }

    return <>{recursiveReplaceFields(entry as string, fields)}</>;
}

export function useTranslation() {
    const { intl } = useContext(IntlContext) as unknown as IntlType;
    return (id: string, fields?: Object, plural?: number, fallback?: string) =>
        translate(id, "", intl.dictionary, fields, plural, fallback);
}