Make module configs translateable

Website/src/components/ConfigureView/libs.ts

@@ -12,7 +12,7 @@ import { Markdown, PromoBanner } from "./components";
 import { useActivity } from "@Hooks/useActivity";
 import { Toolbar } from "@Components/onsenui/Toolbar";
 import { SuFile } from "@Native/SuFile";
-import { os } from "@Native/Os";
+import { StringsProvider, useStrings } from "@Hooks/useStrings";
 
 export const libraries = [
   {
@@ -52,6 +52,13 @@ export const libraries = [
       useNativeProperties: useNativeProperties,
       useNativeStorage: useNativeStorage,
       useTheme: useTheme,
+      useStrings: useStrings,
+    },
+  },
+  {
+    name: "@mmrl/providers",
+    __esModule: {
+      StringsProvider: StringsProvider,
     },
   },
 

Website/src/hooks/useStrings.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { SetValue, useNativeStorage } from "./useNativeStorage";
-import { StringDeclaration, strs, useLanguageMap } from "./../locales/declaration";
+import { StringDeclaration, Strs, useLanguageMap } from "./../locales/declaration";
 import { useSettings } from "./useSettings";
 
 interface StrContext {
@@ -25,14 +25,18 @@ export interface AvailableLangs {
   value: str;
 }
 
+interface StringsProviderProps extends React.PropsWithChildren {
+  data: Strs;
+}
+
 /**
  *
  * @param strings The first element is the default language
  */
-export const StringsProvider = (props: React.PropsWithChildren) => {
+export const StringsProvider = (props: StringsProviderProps) => {
   const { settings } = useSettings();
 
-  const defaultLanguage = Object.keys(strs)[0];
+  const defaultLanguage = Object.keys(props.data)[0];
   const currentLanguage = React.useMemo(() => settings.language.value, [settings]);
 
   const format = React.useCallback((template: string, object?: object) => {
@@ -52,8 +56,8 @@ export const StringsProvider = (props: React.PropsWithChildren) => {
 
   const strings = React.useCallback(
     (key: string, fmt?: object) => {
-      const currentLang = strs[currentLanguage];
-      const defaultLang = strs[defaultLanguage];
+      const currentLang = props.data[currentLanguage];
+      const defaultLang = props.data[defaultLanguage];
 
       if (currentLang[key] !== undefined) {
         return format(currentLang[key], fmt);

Website/src/index.tsx

@@ -17,6 +17,7 @@ import { MMRLAnchor } from "./custom-elements/anchor";
 
 import "onsenui/css/onsenui.css";
 import "@Styles/default.scss";
+import { strs } from "./locales/declaration";
 
 ons.platform.select("android");
 
@@ -32,7 +33,7 @@ ons.ready(() => {
     <React.StrictMode>
       <ModConfProvider>
         <SettingsProvider>
-          <StringsProvider>
+          <StringsProvider data={strs}>
             <ThemeProvider>
               <Preventer prevent="contextmenu">
                 <RepoProvider>

Website/src/locales/declaration.ts

@@ -8,7 +8,7 @@ import React from "react";
  */
 export type StringDeclaration = keyof typeof en;
 
-type Strs = {
+export type Strs = {
   [code: str]: Partial<Record<StringDeclaration, str>>;
 };