Frontend: Reformat gettext.config.js with eslint

Signed-off-by: Michael Mayer <michael@photoprism.app>

frontend/gettext.config.js

@@ -0,0 +1,43 @@
+const glob = require("glob");
+const fs = require("fs");
+const path = require("path");
+
+// Find all .po files in the frontend/src/locales
+const poFiles = glob.sync("src/locales/*.po");
+if (poFiles.length === 0) {
+  console.error("No .po files found in src/locales");
+  process.exit(1);
+}
+
+// Find output folder or create the new one in assets/static/locales
+const outputDir = path.resolve(__dirname, "../assets/static/locales");
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+// Copy .po files from frontend/src/locales to assets/static/locales
+poFiles.forEach((filePath) => {
+  const fileName = path.basename(filePath);
+  const destinationPath = path.join(outputDir, fileName);
+  fs.copyFileSync(filePath, destinationPath);
+});
+
+// Find all languages codes from .po files (cut file names without .po)
+const languageCodes = poFiles.map((filePath) => {
+  const fileName = path.basename(filePath);
+  return fileName.replace(".po", "");
+});
+
+// Transform files from .po to .json in the assets/static/locales
+module.exports = {
+  input: {
+    path: path.resolve(__dirname, "../assets/static/locales"),
+    include: ["**/*.po"],
+  },
+  output: {
+    path: path.resolve(__dirname, "../assets/static/locales"),
+    jsonPath: "",
+    locales: languageCodes,
+    splitJson: true,
+  },
+};

frontend/src/app.js

@@ -71,7 +71,7 @@ window.$isMobile = $isMobile;
 
 $config.progress(50);
 
-$config.update().finally(() => {
+$config.update().finally(async () => {
   // Initialize libs and framework.
   $config.progress(66);
 
@@ -114,9 +114,6 @@ $config.update().finally(() => {
     });
   };
 
-  // Create Vue 3 Gettext instance.
-  const gettext = createGettext($config);
-
   // Create Vuetify 3 instance.
   const vuetify = createVuetify({
     defaults,
@@ -139,7 +136,10 @@ $config.update().finally(() => {
   // Use Vuetify 3.
   app.use(vuetify);
 
-  // Use Vue 3 Gettext.
+  await $config.loadLanguageAsync($config.getLanguageLocale());
+
+  // Create and use Vue 3 Gettext instance.
+  const gettext = createGettext($config);
   app.use(gettext);
 
   // Use HTML sanitizer with v-sanitize directive.

frontend/src/app/routes.js

@@ -26,7 +26,6 @@ Additional information can be found in our Developer Guide:
 import Photos from "page/photos.vue";
 import Albums from "page/albums.vue";
 import AlbumPhotos from "page/album/photos.vue";
-import Places from "page/places.vue";
 import Browse from "page/library/browse.vue";
 import Errors from "page/library/errors.vue";
 import Labels from "page/labels.vue";
@@ -278,13 +277,13 @@ export default [
   {
     name: "places",
     path: "/places",
-    component: Places,
+    component: () => import(/* webpackChunkName: "places-page" */ "page/places.vue"),
     meta: { title: $gettext("Places"), requiresAuth: true },
   },
   {
     name: "places_view",
     path: "/places/view/:s",
-    component: Places,
+    component: () => import(/* webpackChunkName: "places-page" */ "page/places.vue"),
     meta: { title: $gettext("Places"), requiresAuth: true },
   },
   {

frontend/src/common/config.js

@@ -26,7 +26,6 @@ Additional information can be found in our Developer Guide:
 import $api from "common/api";
 import $event from "common/event";
 import * as themes from "options/themes";
-import translations from "locales/translations.json";
 import { Languages } from "options/options";
 import { Photo } from "model/photo";
 import { onInit, onSetTheme } from "common/hooks";
@@ -48,7 +47,7 @@ export default class Config {
     this.updating = false;
 
     this.$vuetify = null;
-    this.translations = translations;
+    this.translations = null;
 
     if (!values || !values.siteTitle) {
       // Omit warning in unit tests.
@@ -417,6 +416,20 @@ export default class Config {
     return !this.allowAny(resource, perm);
   }
 
+  // getLanguageJson loading the json file by language abbreviation (e.g. "en" or "zh_TW" (minimum 2 letters).)
+  async loadLanguageAsync (locale) {
+    try {
+      // Dynamically import the translation JSON file based on the selected language
+      const file = await import(/* webpackChunkName: "[request]" */`../../../assets/static/locales/${locale}.json`);
+
+      // Apply translations
+      this.translations = file.default;
+      this.setLanguage(locale, true);
+    } catch (error) {
+      console.error(`Error loading language file for ${locale}:`, error);
+    }
+  };
+
   // setLanguage sets the ISO/IEC 15897 locale,
   // e.g. "en" or "zh_TW" (minimum 2 letters).
   setLanguage(locale, apply) {

frontend/src/locales/en.json

@@ -0,0 +1 @@
+{"en":{"Next":"Next"}}

frontend/webpack.config.js

@@ -64,6 +64,16 @@ const config = {
   devtool: isDev ? "inline-source-map" : false,
   optimization: {
     minimize: !isDev,
+    splitChunks: {
+      cacheGroups: {
+        places: {
+          test: /[\\/]page[\\/]places\.vue$/,
+          name: "places-page",
+          enforce: true,
+        },
+        vendors: false,
+      },
+    },
   },
   entry: {
     app: PATHS.app,
@@ -72,17 +82,15 @@ const config = {
   },
   output: {
     path: PATHS.build,
-    publicPath: PATHS.public,
-    filename: "[name].[contenthash].js",
+    filename: '[name].[contenthash].js',
     clean: true,
+    chunkFilename: 'locales/[name].json',
   },
   resolve: {
     modules: isCustom ? [PATHS.custom, PATHS.src, PATHS.modules] : [PATHS.src, PATHS.modules],
     preferRelative: true,
     alias: {
-      // TODO: change it
-      vue$: "vue/dist/vue.runtime.esm-bundler.js",
-      // vue: isDev ? "vue/dist/vue.js" : "vue/dist/vue.min.js",
+      vue$: isDev ? "vue/dist/vue.esm-bundler.js" : "vue/dist/vue.runtime.esm-bundler.js",
     },
   },
   plugins: [