Merge branch 'feature/i18n-type-constraint' of https://github.com/shilangyu/lemmy-ui into shilangyu-feature/i18n-type-constraint

generate_translations.js

@@ -1,27 +1,68 @@
-fs = require('fs');
+const fs = require("fs");
 
-let translationDir = 'lemmy-translations/translations/';
-let outDir = 'src/shared/translations/';
+const translationDir = "lemmy-translations/translations/";
+const outDir = "src/shared/translations/";
 fs.mkdirSync(outDir, { recursive: true });
 fs.readdir(translationDir, (_err, files) => {
   files.forEach(filename => {
-    const lang = filename.split('.')[0];
+    const lang = filename.split(".")[0];
     try {
       const json = JSON.parse(
-        fs.readFileSync(translationDir + filename, 'utf8')
+        fs.readFileSync(translationDir + filename, "utf8")
       );
-      var data = `export const ${lang} = {\n  translation: {`;
-      for (var key in json) {
+      let data = `export const ${lang} = {\n  translation: {`;
+      for (const key in json) {
         if (key in json) {
           const value = json[key].replace(/"/g, '\\"');
-          data = `${data}\n    ${key}: "${value}",`;
+          data += `\n    ${key}: "${value}",`;
         }
       }
-      data += '\n  },\n};';
-      const target = outDir + lang + '.ts';
+      data += "\n  },\n};";
+      const target = outDir + lang + ".ts";
       fs.writeFileSync(target, data);
     } catch (err) {
       console.error(err);
     }
   });
 });
+
+// generate types for i18n keys
+const baseLanguage = "en";
+
+fs.readFile(`${translationDir}${baseLanguage}.json`, "utf8", (_, fileStr) => {
+  const keys = Object.keys(JSON.parse(fileStr));
+
+  const data = `import { i18n } from "i18next";
+
+declare module "i18next" {
+  export type I18nKeys = 
+${keys.map(key => `    | "${key}"`).join("\n")};
+  
+  export interface TFunctionTyped {
+    // basic usage
+    <
+      TResult extends TFunctionResult = string,
+      TInterpolationMap extends Record<string, unknown> = StringMap
+    >(
+      key: I18nKeys | I18nKeys[],
+      options?: TOptions<TInterpolationMap> | string
+    ): TResult;
+    // overloaded usage
+    <
+      TResult extends TFunctionResult = string,
+      TInterpolationMap extends Record<string, unknown> = StringMap
+    >(
+      key: I18nKeys | I18nKeys[],
+      defaultValue?: string,
+      options?: TOptions<TInterpolationMap> | string
+    ): TResult;
+  }
+
+  export interface i18nTyped extends i18n {
+    t: TFunctionTyped;
+  }
+}
+`;
+
+  fs.writeFileSync(`${outDir}i18next.d.ts`, data);
+});

src/assets/css/main.css

@@ -228,17 +228,20 @@ hr {
   height: 1.5em;
   width: 1.5em;
   background: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.4);
   border-bottom-left-radius: 0.25rem !important;
   border-top-right-radius: 0.25rem !important;
 }
 
 .link-overlay:hover {
   transition: 0.1s;
+  -webkit-transition: 0.1s;
   opacity: 1;
 }
 
 .link-overlay {
   transition: opacity 0.1s ease-in-out;
+  -webkit-transition: opacity 0.1s ease-in-out;
   position: absolute;
   opacity: 0;
   left: 0;
@@ -246,6 +249,7 @@ hr {
   width: 100%;
   padding: 10px;
   background: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .placeholder {
@@ -285,6 +289,7 @@ pre {
 }
 .hide-input {
   background: transparent !important;
+  background-color: transparent !important;
   width: 0px !important;
   padding: 0 !important;
 }

src/shared/components/no-match.tsx

@@ -1,8 +1,11 @@
+import { I18nKeys } from "i18next";
 import { Component } from "inferno";
 import { i18n } from "../i18next";
 
 export class NoMatch extends Component<any, any> {
-  private errCode = new URLSearchParams(this.props.location.search).get("err");
+  private errCode = new URLSearchParams(this.props.location.search).get(
+    "err"
+  ) as I18nKeys;
 
   constructor(props: any, context: any) {
     super(props, context);

src/shared/i18next.ts

@@ -1,4 +1,4 @@
-import i18next from "i18next";
+import i18next, { i18nTyped } from "i18next";
 import { getLanguage } from "./utils";
 import { en } from "./translations/en";
 import { el } from "./translations/el";
@@ -84,4 +84,6 @@ i18next.init({
   interpolation: { format },
 });
 
-export { i18next as i18n, resources };
+export const i18n = i18next as i18nTyped;
+
+export { resources };