i18n: add placeholder support

packages/i18n/src/react/exports.js

@@ -1,11 +1,12 @@
 import { AppContext } from "@primate/frontend/react";
 import { useContext } from "react";
-import locale from "./locale.js";
+import reactive_locale from "./locale.js";
+import resolve from "../shared/resolve.js";
 
 export default (key, placeholders) => {
-  locale.init();
-  const { i18n } = useContext(AppContext).context;
-  return i18n.locales[i18n.locale][key] ?? key;
+  reactive_locale.init();
+  const { locales, locale } = useContext(AppContext).context.i18n;
+  return resolve(locales[locale], key, placeholders);
 };
 
-export { locale };
+export { reactive_locale as locale };

packages/i18n/src/shared/resolve.js

@@ -0,0 +1,9 @@
+export default (locale, key, placeholders = {}) => {
+  if (locale[key] === undefined) {
+    return key;
+  }
+
+  return Object.entries(placeholders).reduce((translated, [p_key, p_value]) =>
+    translated.replaceAll(new RegExp(`\\{${p_key}\\}`, "gu"), () => p_value),
+  locale[key]);
+};

packages/i18n/src/solid/exports.js

@@ -1,11 +1,12 @@
 import { AppContext } from "@primate/frontend/solid";
 import { useContext } from "solid-js";
-import locale from "./locale.js";
+import reactive_locale from "./locale.js";
+import resolve from "../shared/resolve.js";
 
 export default (key, placeholders) => {
-  locale.init();
-  const { i18n } = useContext(AppContext).context();
-  return i18n.locales[i18n.locale][key] ?? key;
+  reactive_locale.init();
+  const { locales, locale } = useContext(AppContext).context().i18n;
+  return resolve(locales[locale], key, placeholders);
 };
 
-export { locale };
+export { reactive_locale as locale };

packages/i18n/src/svelte/exports.js

@@ -1,10 +1,11 @@
 import { derived } from "svelte/store";
 import { getContext } from "svelte";
-import locale_store from "./locale.js";
+import reactive_locale from "./locale.js";
+import resolve from "../shared/resolve.js";
 
-export default derived(locale_store, locale => (key, placeholders) => {
+export default derived(reactive_locale, locale => (key, placeholders) => {
   const { locales } = getContext("__primate__").i18n;
-  return locales[locale][key] ?? key;
+  return resolve(locales[locale], key, placeholders);
 });
 
-export { locale_store as locale };
+export { reactive_locale as locale };