src/platform/i18n.tsx

@@ -2,7 +2,6 @@ import {
   ParentComponent,
   createContext,
   createMemo,
-  createRenderEffect,
   createResource,
   useContext,
 } from "solid-js";
@@ -12,7 +11,7 @@ import { $settings } from "../settings/stores";
 import { enGB } from "date-fns/locale/en-GB";
 import { useStore } from "@nanostores/solid";
 import type { Locale } from "date-fns";
-import type { Template } from "@solid-primitives/i18n";
+import { resolveTemplate, translator, type Template } from "@solid-primitives/i18n";
 
 async function synchronised(
   name: string,
@@ -181,3 +180,9 @@ export function createStringResource<
     },
   );
 }
+
+export function createTranslator<T extends ImportFn<Record<string, string | Template<any> | undefined>>[],>(...importFns: T) {
+  const res = createStringResource(...importFns)
+
+  return [translator(res[0], resolveTemplate), res] as const
+}

src/settings/Settings.tsx

@@ -27,33 +27,32 @@ import { Title } from "../material/typography.jsx";
 import { css } from "solid-styled";
 import { useSignedInProfiles } from "../masto/acct.js";
 import { signOut, type Account } from "../accounts/stores.js";
-import { format, intlFormat } from "date-fns";
+import { format } from "date-fns";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores.js";
 import { useRegisterSW } from "virtual:pwa-register/solid";
 import {
   autoMatchLangTag,
   autoMatchRegion,
-  createStringResource,
+  createTranslator,
   SUPPORTED_LANGS,
   SUPPORTED_REGIONS,
   useDateFnLocale,
 } from "../platform/i18n.jsx";
-import { resolveTemplate, translator, type Template } from "@solid-primitives/i18n";
+import { type Template } from "@solid-primitives/i18n";
 
 type Strings = {
   ["lang.auto"]: Template<{detected: string}>
 } & Record<string, string | undefined>
 
 const Settings: ParentComponent = () => {
-  const [strings] = createStringResource(
+  const [t] = createTranslator(
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
         default: Strings;
       }>,
     () => import(`./i18n/lang-names.json`)
   );
-  const t = translator(strings, resolveTemplate);
   const navigate = useNavigate();
   const settings$ = useStore($settings);
   const {