Unbundle javascript language files (librenms#10788)

* Unbundle javascript language files
automatically generated for each install

* update docs

* update laravel-vue-i18n-generator
a newer (unreleased) verison is need for English fallback to work

.gitignore

@@ -36,7 +36,6 @@ _ide_helper.php
 _ide_helper_models.php
 resources/views/menu/custom.blade.php
 resources/js/vue-i18n-locales.generated.js
-resources/js/lang/*
 
 # Docs #
 ########

composer.json

@@ -37,7 +37,7 @@
         "fico7489/laravel-pivot": "^3.0",
         "influxdb/influxdb-php": "^1.14",
         "laravel/laravel": "5.8.*",
-        "martinlindhe/laravel-vue-i18n-generator": "^0.1.40",
+        "martinlindhe/laravel-vue-i18n-generator": "^0.1.42",
         "oriceon/toastr-5-laravel": "dev-master",
         "pear/console_color2": "^0.1",
         "pear/console_table": "^1.3",
@@ -113,7 +113,7 @@
         "post-install-cmd": [
             "LibreNMS\\ComposerHelper::postInstall",
             "Illuminate\\Foundation\\ComposerScripts::postInstall",
-            "@php artisan vue-i18n:generate"
+            "@php artisan vue-i18n:generate --multi-locales --format=umd"
         ],
         "post-update-cmd": [
             "Illuminate\\Foundation\\ComposerScripts::postUpdate"

config/vue-i18n-generator.php

@@ -55,7 +55,7 @@
     | Note: the path will be prepended to point to the App directory.
     |
     */
-    'jsPath' => '/resources/js/lang/',
+    'jsPath' => '/html/js/lang/',
     'jsFile' => '/resources/js/vue-i18n-locales.generated.js',
 
     /*

doc/Developing/Dynamic-Config.md

@@ -19,9 +19,10 @@ If the user is overriding the option in config.php it would use the format `$con
 The config definition system inherently supports translation. You must add the English names in the 
 `resoures/lang/en/settings.php` file (and other languages if you can).
 
-    Note: Right now the Vue.js translation is a little cumbersome.  First you need to update the language
-    files, then run `./lnms vue-i18n:generate`, run `npm run development` or `npm run watch`, then hard refresh your web
-    page.
+To update the javascript translation files, run:
+
+    ./lnms vue-i18n:generate --multi-locales --format=umd
+    npm run production
 
 # Definition Format
 

html/js/lang/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

html/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=f5ee9cf4b3ad30065a4e",
+    "/js/app.js": "/js/app.js?id=6db986ee2004e2d0968e",
     "/css/app.css": "/css/app.css?id=17e56994706c74ee9663",
     "/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
     "/js/vendor.js": "/js/vendor.js?id=dc98201378abb0b1bb08"

resources/js/plugins/i18n.js

@@ -24,8 +24,6 @@
 
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-// import en from '../lang/en.js'
-import messages from '../vue-i18n-locales.generated.js';
 
 Vue.use(VueI18n);
 
@@ -34,38 +32,5 @@ export const i18n = new VueI18n({
     fallbackLocale: 'en',
     silentFallbackWarn: true,
     silentTranslationWarn: true,
-    messages: messages,
+    messages: window.vuei18nLocales
 });
-
-// re-enable after vue-i8ln-generator is working for split locales
-/*
-const loadedLanguages = ['en']; // our default language that is preloaded
-
-function setI18nLanguage (lang) {
-    i18n.locale = lang
-    axios.defaults.headers.common['Accept-Language'] = lang
-    document.querySelector('html').setAttribute('lang', lang)
-    return lang
-}
-
-export function loadLanguageAsync(lang) {
-    // If the same language
-    if (i18n.locale === lang) {
-        return Promise.resolve(setI18nLanguage(lang))
-    }
-
-    // If the language was already loaded
-    if (loadedLanguages.includes(lang)) {
-        return Promise.resolve(setI18nLanguage(lang))
-    }
-
-    // If the language hasn't been loaded yet
-    return import(`../lang/${lang}.js`).then(
-        messages => {
-            i18n.setLocaleMessage(lang, messages.default)
-            loadedLanguages.push(lang)
-            return setI18nLanguage(lang)
-        }
-    )
-}
-*/

resources/views/settings/index.blade.php

@@ -21,6 +21,8 @@
 
 @push('scripts')
     @routes
+    <script src="{{ asset(mix('/js/lang/en.js')) }}"></script>
+    <script src="{{ asset(mix('/js/lang/' . app()->getLocale() . '.js')) }}"></script>
     <script src="{{ asset(mix('/js/manifest.js')) }}"></script>
     <script src="{{ asset(mix('/js/vendor.js')) }}"></script>
     <script src="{{ asset(mix('/js/app.js')) }}"></script>

webpack.mix.js

@@ -15,4 +15,4 @@ mix.setPublicPath('html/')
     .js('resources/js/app.js', 'js')
     .sass('resources/sass/app.scss', 'css')
     .extract()
-    .version();
+    .version('html/js/lang/*.js');