Make language packs load async (digitalocean#204)

* Webpack magic to make language packs async

* Fix jest failing

* Ensure the native language names are always present

* Add loading state for language packs

src/nginxconfig/i18n/en/index.js

@@ -25,6 +25,7 @@ THE SOFTWARE.
 */
 
 import common from './common';
+import languages from './languages';
 import templates from './templates';
 
-export default { common, templates };
+export default { common, languages, templates };

src/nginxconfig/i18n/index.js → src/nginxconfig/i18n/en/languages.js

@@ -24,7 +24,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-export { default as en } from './en';
-export { default as zhCN } from './zh-cn';
-export { default as zhTW } from './zh-tw';
-export { default as ptBR } from './pt-br';
+export default {
+    en: 'English',
+    zhCN: 'Chinese (simplified)',
+    zhTW: 'Chinese (traditional)',
+    ptBR: 'Portuguese (brazilian)',
+};

src/nginxconfig/i18n/en/templates/app.js

@@ -29,10 +29,6 @@ import common from '../common';
 export default {
     title: `${common.nginx}Config`,
     description: `The easiest way to configure a performant, secure, and stable ${common.nginx} server.`,
-    en: 'English',
-    zhCN: 'Chinese (simplified)',
-    zhTW: 'Chinese (traditional)',
-    ptBR: 'Portuguese (brazilian)',
     singleColumnMode: 'Single column mode',
     splitColumnMode: 'Split column mode',
     perWebsiteConfig: 'Per-website config',

src/nginxconfig/i18n/pt-br/index.js

@@ -25,6 +25,7 @@ THE SOFTWARE.
 */
 
 import common from './common';
+import languages from './languages';
 import templates from './templates';
 
-export default { common, templates };
+export default { common, languages, templates };

src/nginxconfig/i18n/pt-br/languages.js

@@ -0,0 +1,32 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+export default {
+    en: 'Inglês',
+    zhCN: 'Chinês (simplificado)',
+    zhTW: 'Chinês (tradicional)',
+    ptBR: 'Português (brasileiro)',
+};

src/nginxconfig/i18n/pt-br/templates/app.js

@@ -29,10 +29,6 @@ import common from '../common';
 export default {
     title: `${common.nginx}Configuração`,
     description: `A maneira mais fácil de configurar um servidor ${common.nginx} de alto desempenho, seguro e estável.`,
-    en: 'Inglês',
-    zhCN: 'Chinês (simplificado)',
-    zhTW: 'Chinês (tradicional)',
-    ptBR: 'Português (brasileiro)',
     singleColumnMode: 'Modo de coluna única',
     splitColumnMode: 'Modo com divisão de colunas',
     perWebsiteConfig: 'Configuração por site',

src/nginxconfig/i18n/setup.js

@@ -0,0 +1,68 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import { defaultPack, defaultPackData } from '../util/language_pack_default';
+import { toSep } from '../util/language_pack_name';
+import { languagePackContext, availablePacks } from '../util/language_pack_context';
+
+Vue.use(VueI18n);
+
+// Load in the full default pack
+const i18nPacks = {};
+i18nPacks[defaultPack] = defaultPackData;
+const loadedI18nPacks = [defaultPack];
+
+// Load in languages data from other packs
+// Use webpack magic to only build chunks for lang/languages.js
+const languagesContext = require.context('.', true, /^\.\/[^/]+\/languages\.js$/, 'sync');
+for (const availablePack of availablePacks) {
+    if (availablePack === defaultPack) continue;
+    i18nPacks[availablePack] = { languages: languagesContext(`./${toSep(availablePack, '-')}/languages.js`).default };
+}
+
+export const i18n = new VueI18n({
+    locale: defaultPack,
+    fallbackLocale: defaultPack,
+    messages: i18nPacks,
+});
+
+const loadLanguagePack = pack => {
+    // If same language, do nothing
+    if (i18n.locale === pack) return;
+
+    // If language already loaded, do nothing
+    if (loadedI18nPacks.includes(pack)) return;
+
+    // Load the pack with webpack magic
+    return languagePackContext(`./${toSep(pack, '-')}/index.js`).then(packData => i18nPacks[pack] = packData.default);
+};
+
+export const setLanguagePack = async pack => {
+    await loadLanguagePack(pack);
+    i18n.locale = pack;
+};

src/nginxconfig/i18n/verify.js

@@ -24,9 +24,18 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
+import { readdirSync } from 'fs';
 import chalk from 'chalk';
-import defaultPack from './default';
-import * as packs from './index';
+import { defaultPack } from '../util/language_pack_default';
+import { fromSep } from '../util/language_pack_name';
+
+// Load all the packs in
+const packs = {};
+const packDirectories = readdirSync(__dirname, { withFileTypes: true })
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => dirent.name);
+for (const packDirectory of packDirectories)
+    packs[fromSep(packDirectory, '-')] = require(`./${packDirectory}/index.js`).default;
 
 // Recursively get all keys in a i18n pack object fragment
 const explore = packFragment => {

src/nginxconfig/i18n/zh-cn/index.js

@@ -25,6 +25,7 @@ THE SOFTWARE.
 */
 
 import common from './common';
+import languages from './languages';
 import templates from './templates';
 
-export default { common, templates };
+export default { common, languages, templates };

src/nginxconfig/i18n/zh-cn/languages.js

@@ -0,0 +1,32 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+export default {
+    en: '英语',
+    zhCN: '简体中文',
+    zhTW: '繁体中文',
+    ptBR: '葡萄牙语 (巴西)',
+};

src/nginxconfig/i18n/zh-cn/templates/app.js

@@ -29,10 +29,6 @@ import common from '../common';
 export default {
     title: `${common.nginx} 配置`,
     description: `配置高性能、安全、稳定的${common.nginx}服务器的最简单方法。`,
-    en: '英语',
-    zhCN: '简体中文',
-    zhTW: '繁体中文',
-    ptBR: '葡萄牙语 (巴西)',
     singleColumnMode: '垂直模式',
     splitColumnMode: '水平模式',
     perWebsiteConfig: '站点配置',

src/nginxconfig/i18n/zh-tw/index.js

@@ -25,6 +25,7 @@ THE SOFTWARE.
 */
 
 import common from './common';
+import languages from './languages';
 import templates from './templates';
 
-export default { common, templates };
+export default { common, languages, templates };

src/nginxconfig/i18n/zh-tw/languages.js

@@ -0,0 +1,32 @@
+/*
+Copyright 2020 DigitalOcean
+
+This code is licensed under the MIT License.
+You may obtain a copy of the License at
+https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE or https://mit-license.org/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and / or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions :
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+export default {
+    en: '英語',
+    zhCN: '簡體中文',
+    zhTW: '繁體中文',
+    ptBR: '葡萄牙語（巴西）',
+};

src/nginxconfig/i18n/zh-tw/templates/app.js

@@ -29,10 +29,6 @@ import common from '../common';
 export default {
     title: `${common.nginx} 配寘`,
     description: `配寘高性能、安全、穩定的${common.nginx}服務器的最簡單方法。`,
-    en: '英語',
-    zhCN: '簡體中文',
-    zhTW: '繁體中文',
-    ptBR: '葡萄牙語（巴西）',
     singleColumnMode: '垂直模式',
     splitColumnMode: '水准模式',
     perWebsiteConfig: '網站配寘',

src/nginxconfig/mount.js

@@ -26,19 +26,9 @@ THE SOFTWARE.
 
 import './scss/style.scss';
 import Vue from 'vue';
-import VueI18n from 'vue-i18n';
 import './util/prism_bundle';
+import { i18n } from './i18n/setup';
 import App from './templates/app';
-import * as i18nPacks from './i18n';
-import i18nDefault from './i18n/default';
-
-Vue.use(VueI18n);
-
-const i18n = new VueI18n({
-    locale: i18nDefault,
-    fallbackLocale: i18nDefault,
-    messages: i18nPacks,
-});
 
 new Vue({
     i18n,