chore: Move i18n generation, pre-commit hooks (outline#3410)

Author: tommoor

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

i18next-parser.config.js

@@ -80,4 +80,8 @@ module.exports = {
   //   message: "${defaultValue}",
   //   description: "${maxLength}", // t('my-key', {maxLength: 150})
   // }
+
+  i18nextOptions: {
+    compatibilityJSON: "v3",
+  },
 };

lint-staged.config.mjs

@@ -0,0 +1,12 @@
+export default {
+  // Efficiently run prettier and translation updates on changes to JS and
+  // TypeScript files
+  "**/*.[tj]s?(x)": [
+    (f) => (f.length > 20 ? `yarn lint --fix` : `eslint ${f.join(" ")} --fix`),
+    () => `yarn build:i18n`,
+    () => "git add shared/i18n/locales/en_US/translation.json",
+  ],
+
+  // Automatically de-duplicate packages as yarn is terrible at it
+  "(yarn.lock|package.json)": () => `yarn yarn-deduplicate yarn.lock`,
+};

package.json

@@ -12,10 +12,10 @@
     "build": "yarn clean && yarn build:webpack && yarn build:i18n && yarn build:server",
     "start": "node ./build/server/index.js",
     "dev": "NODE_ENV=development yarn concurrently -n api,collaboration  -c \"blue,magenta\" \"node --inspect=0.0.0.0 build/server/index.js --services=collaboration,websockets,admin,web,worker\"",
-    "dev:watch": "nodemon --exec \"yarn build:server && yarn build:i18n && yarn dev\" -e js,ts --ignore build/ --ignore app/ --ignore shared/editor",
+    "dev:watch": "nodemon --exec \"yarn build:server && yarn dev\" -e js,ts --ignore build/ --ignore app/ --ignore shared/editor",
     "lint": "eslint app server shared",
     "deploy": "git push heroku master",
-    "prepare": "yarn yarn-deduplicate yarn.lock",
+    "prepare": "husky install",
     "heroku-postbuild": "yarn build:webpack && yarn build:server && yarn copy:i18n && yarn db:migrate",
     "sequelize:migrate": "sequelize db:migrate",
     "db:create-migration": "sequelize migration:create",
@@ -159,7 +159,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.13.0",
+    "react-i18next": "^11.16.6",
     "react-medium-image-zoom": "^3.1.3",
     "react-portal": "^4.2.0",
     "react-router-dom": "^5.2.0",
@@ -296,11 +296,13 @@
     "eslint-plugin-react-hooks": "^4.1.0",
     "fetch-test-server": "^1.1.0",
     "html-webpack-plugin": "4.5.1",
-    "i18next-parser": "^4.7.0",
+    "husky": "^7.0.4",
+    "i18next-parser": "^6.3.0",
     "jest-cli": "^27.4.5",
     "jest-fetch-mock": "^3.0.3",
     "koa-webpack-dev-middleware": "^1.4.5",
     "koa-webpack-hot-middleware": "^1.0.3",
+    "lint-staged": "^12.3.8",
     "nodemon": "^2.0.15",
     "prettier": "^2.0.5",
     "react-refresh": "^0.9.0",

server/routes/index.ts

@@ -133,9 +133,12 @@ router.get("/locales/:lng.json", async (ctx) => {
 
   await send(ctx, path.join(lng, "translation.json"), {
     setHeaders: (res) => {
-      if (process.env.NODE_ENV === "production") {
-        res.setHeader("Cache-Control", `max-age=${7 * 24 * 60 * 60}`);
-      }
+      res.setHeader(
+        "Cache-Control",
+        process.env.NODE_ENV === "production"
+          ? `max-age=${7 * 24 * 60 * 60}`
+          : "no-cache"
+      );
     },
     root: path.join(__dirname, "../../shared/i18n/locales"),
   });

shared/i18n/index.ts

@@ -84,6 +84,7 @@ export const initI18n = () => {
     .use(backend)
     .use(initReactI18next)
     .init({
+      compatibilityJSON: "v3",
       backend: {
         // this must match the path defined in routes. It's the path that the
         // frontend UI code will hit to load missing translations.