feat(i18n): adds local support

Author: dvcol

.eslintrc.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   plugins: ['@dvcol/presets'],
-  extends: [ 'plugin:@dvcol/presets/vue', 'plugin:@dvcol/presets/base','plugin:@dvcol/presets/jest', 'plugin:@dvcol/presets/vitest'],
+  extends: ['plugin:@dvcol/presets/base', 'plugin:@dvcol/presets/vue', 'plugin:@dvcol/presets/jest', 'plugin:@dvcol/presets/vitest'],
   // to apply jest linting even-though we use vitest
   settings: { jest: { version: 27 } },
   rules: {

package.json

@@ -41,7 +41,7 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@dvcol/eslint-plugin-presets": "^1.3.2",
     "@dvcol/stylelint-plugin-presets": "^1.1.0",
-    "@dvcol/web-extension-utils": "^2.2.0",
+    "@dvcol/web-extension-utils": "^2.3.0",
     "@types/chrome": "^0.0.224",
     "@types/fs-extra": "^11.0.1",
     "@types/jsdom": "^21.1.0",

pnpm-lock.yaml

@@ -11,7 +11,7 @@ export const manifest: Manifest.WebExtensionManifest = {
   name: pkg.title || pkg.name,
   version: pkg.version,
   description: pkg.description,
-  // default_locale: 'en', // TODO i18n
+  default_locale: 'en',
   icons: {
     16: 'icons/icon-512.png',
     48: 'icons/icon-512.png',

scripts/manifest.ts

@@ -1,5 +1,6 @@
 import { exec } from 'child_process';
 
+import { mergeJson } from '@dvcol/web-extension-utils/common';
 import { watch } from 'chokidar';
 import fs from 'fs-extra';
 
@@ -28,8 +29,10 @@ const copyViews = async (views = ['options', 'popup']) => views.map(copyIndexHtm
 /**
  * Copy extension icons to dist folder
  */
-const copyIcons = async () =>
-  isDev ? fs.symlink(resolveParent('icons'), resolveParent('dist/icons'), 'junction') : fs.copySync('icons', 'dist/icons', { overwrite: true });
+const copyIcons = async (_isDev: boolean) => {
+  if (_isDev) return fs.symlink(resolveParent('icons'), resolveParent('dist/icons'), 'junction');
+  return fs.copySync('icons', 'dist/icons', { overwrite: true });
+};
 
 /**
  * Copy extension icons to dist folder
@@ -42,7 +45,12 @@ const copyAssets = async () => fs.symlink(resolveParent('src/assets'), resolvePa
 const prepare = async (hmr = isDev) => {
   writeManifest().catch(e => console.error('Failed to write manifest.json', e));
 
-  copyIcons().catch(e => console.error('Failed to copy extension icons', e));
+  copyIcons(isDev).catch(e => console.error('Failed to copy extension icons', e));
+
+  mergeJson({
+    pattern: 'src/i18n/en/**/*.json',
+    output: 'dist/_locales/en/messages.json',
+  }).catch((e: Error) => console.error('Failed to merge jsons', e));
 
   if (hmr) {
     console.log('Watching changes ...');
@@ -65,6 +73,13 @@ const prepare = async (hmr = isDev) => {
       }
     });
 
+    watch([resolveParent('src/i18n/en/**/*.json')]).on('change', () => {
+      mergeJson({
+        pattern: 'src/i18n/en/**/*.json',
+        output: 'dist/_locales/en/messages.json',
+      }).catch((e: Error) => console.error('Failed to merge jsons', e));
+    });
+
     copyAssets().catch(e => console.error('Failed to write assets', e));
   }
 };

scripts/prepare.ts

@@ -0,0 +1,18 @@
+{
+  "global__app_name": {
+    "message": "Side Trakt",
+    "description": "Extension name."
+  },
+  "global__app_title": {
+    "message": "Side Trakt (companion app for Traskt.tv)",
+    "description": "Extension title."
+  },
+  "global__app_title_popup": {
+    "message": "Side Trakt Popup",
+    "description": "Popup page title field."
+  },
+  "global__app_title_options": {
+    "message": "Side Trakt Options",
+    "description": "Options page title field."
+  }
+}

src/i18n/en/global.json

@@ -61,4 +61,7 @@ export default defineConfig(({ command }) => ({
     globals: true,
     environment: 'jsdom',
   },
+  optimizeDeps: {
+    exclude: ['path', 'fast-glob'],
+  },
 }));