fix: improve lingui configuration (#1388)

## Description

Currently merge conflicts arise due to the compiled JS and PO
translation files.

This PR is a rework on how we handle extracting and compiling
translations to streamline PRs and merging branches.

## Changes Made

- Remove compiled translation files from being committed
- Extract and compile translations only on build
- Extract will still occur when commits land on main to sync and pull
new translations with Crowdin

.github/workflows/translations-extract.yml

@@ -1,38 +0,0 @@
-# Extract and compile translations for all PRs.
-
-name: 'Extract and compile translations'
-
-on:
-  workflow_call:
-  pull_request:
-    branches: ['main']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
-  cancel-in-progress: true
-
-jobs:
-  extract_translations:
-    name: Extract and compile translations
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-
-      - uses: ./.github/actions/node-install
-
-      - name: Extract and compile translations
-        run: |
-          npm run translate:extract
-          npm run translate:compile
-
-      - name: Check and commit any files created
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@documenso.com'
-          git add packages/lib/translations
-          git diff --staged --quiet --exit-code || (git commit -m "chore: extract translations" && git push)

.github/workflows/translations-upload.yml

@@ -25,10 +25,8 @@ jobs:
 
       - uses: ./.github/actions/node-install
 
-      - name: Extract and compile translations
-        run: |
-          npm run translate:extract
-          npm run translate:compile
+      - name: Extract translations
+        run: npm run translate:extract
 
       - name: Check and commit any files created
         run: |

.husky/pre-commit

@@ -13,9 +13,4 @@ node "$MONOREPO_ROOT/scripts/copy-wellknown.cjs"
 git add "$MONOREPO_ROOT/apps/web/public/"
 git add "$MONOREPO_ROOT/apps/marketing/public/"
 
-echo "Extract and compile translations"
-npm run translate:extract
-npm run translate:compile
-git add "$MONOREPO_ROOT/packages/lib/translations/"
-
 npx lint-staged

apps/marketing/package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0",
   "scripts": {
     "dev": "next dev -p 3001",
-    "build": "next build",
+    "build": "turbo run translate:extract && turbo run translate:compile && next build",
     "start": "next start -p 3001",
     "lint": "next lint",
     "lint:fix": "next lint --fix",

apps/web/package.json

@@ -5,7 +5,7 @@
   "license": "AGPL-3.0",
   "scripts": {
     "dev": "next dev -p 3000",
-    "build": "next build",
+    "build": "turbo run translate:extract && turbo run translate:compile && next build",
     "start": "next start",
     "lint": "next lint",
     "e2e:prepare": "next build && next start",

docker/Dockerfile

@@ -58,6 +58,8 @@ COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/package-lock.json ./package-lock.json
 
+COPY --from=builder /app/lingui.config.ts ./lingui.config.ts
+
 RUN npm ci
 
 # Then copy all the source code (as it changes more often)

packages/lib/client-only/providers/i18n.server.tsx

@@ -15,9 +15,10 @@ type SupportedLanguages = (typeof SUPPORTED_LANGUAGE_CODES)[number];
 async function loadCatalog(lang: SupportedLanguages): Promise<{
   [k: string]: Messages;
 }> {
-  const { messages } = await import(
-    `../../translations/${lang}/${IS_APP_WEB ? 'web' : 'marketing'}.js`
-  );
+  const extension = process.env.NODE_ENV === 'development' ? 'po' : 'js';
+  const context = IS_APP_WEB ? 'web' : 'marketing';
+
+  const { messages } = await import(`../../translations/${lang}/${context}.${extension}`);
 
   return {
     [lang]: messages,

packages/lib/translations/.gitignore

@@ -0,0 +1,4 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Compiled translations.
+*.js

packages/lib/translations/ro/web.js

@@ -1 +0,0 @@
-/*eslint-disable*/module.exports={messages:JSON.parse("{}")};

packages/lib/utils/i18n.ts

@@ -7,9 +7,10 @@ import type { I18nLocaleData, SupportedLanguageCodes } from '../constants/i18n';
 import { APP_I18N_OPTIONS } from '../constants/i18n';
 
 export async function dynamicActivate(i18nInstance: I18n, locale: string) {
-  const { messages } = await import(
-    `../translations/${locale}/${IS_APP_WEB ? 'web' : 'marketing'}.js`
-  );
+  const extension = process.env.NODE_ENV === 'development' ? 'po' : 'js';
+  const context = IS_APP_WEB ? 'web' : 'marketing';
+
+  const { messages } = await import(`../translations/${locale}/${context}.${extension}`);
 
   i18nInstance.loadAndActivate({ locale, messages });
 }

turbo.json

@@ -34,6 +34,9 @@
       "dependsOn": ["^build"],
       "cache": false
     },
+    "translate:extract": {
+      "cache": false
+    },
     "translate:compile": {
       "cache": false
     }