Work on channels, render content of messages.

src/lib/i18n.tsx

@@ -0,0 +1,54 @@
+import { IntlContext } 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) }</>;
+}