Dependency updates + full ESM (#327)

* Dependency updates * Fix eslint issues * Switch to esm fully * Fix Jest tests * Update to node 16, force mini-css-extract-plugin to 1.x * More dep updates * Use correct NPM version in Actions * Fix mini-css-extract-plugin version overrides * Don't rely on Webpack for available languages
2022-02-04 21:10:20 +00:00 · 2022-02-04 21:10:20 +00:00 · 387a47b014
parent 26e907bd81
commit 387a47b014
45 changed files with 28690 additions and 8945 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -8,9 +8,10 @@ module.exports = {
    'plugin:vue/recommended',
  ],
  parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
    ecmaVersion: 2018,
    sourceType: 'module',
+    requireConfigFile: false,
  },
  rules: {
    'linebreak-style': ['error', 'unix'],
@ -27,6 +28,7 @@ module.exports = {
    }],
    'vue/no-unused-vars': 0,
    'vue/html-self-closing': 0,
+    'vue/multi-word-component-names': 0,
  },
  globals: {
    'describe': true,
--- a/.github/workflows/do-spaces-workflow.yml
+++ b/.github/workflows/do-spaces-workflow.yml
@ -7,16 +7,21 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@v2

-    - name: Read .nvmrc
-      run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
-      id: nvm
+      - name: Read Node.js & NPM versions
+        run: |
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions

-    - name: Use Node.js (.nvmrc)
-      uses: actions/setup-node@v1
+      - name: Use correct Node.js version
+        uses: actions/setup-node@v2
        with:
-        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"

      - name: Install dependencies
        run: npm ci
--- a/.github/workflows/gh-pages-workflow.yml
+++ b/.github/workflows/gh-pages-workflow.yml
@ -10,16 +10,21 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@v2

-    - name: Read .nvmrc
-      run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
-      id: nvm
+      - name: Read Node.js & NPM versions
+        run: |
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions

-    - name: Use Node.js (.nvmrc)
-      uses: actions/setup-node@v1
+      - name: Use correct Node.js version
+        uses: actions/setup-node@v2
        with:
-        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"

      - name: Install dependencies
        run: npm ci
--- a/.github/workflows/test-workflow.yml
+++ b/.github/workflows/test-workflow.yml
@ -7,16 +7,21 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-    - uses: actions/checkout@v1
+      - uses: actions/checkout@v2

-    - name: Read .nvmrc
-      run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
-      id: nvm
+      - name: Read Node.js & NPM versions
+        run: |
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions

-    - name: Use Node.js (.nvmrc)
-      uses: actions/setup-node@v1
+      - name: Use correct Node.js version
+        uses: actions/setup-node@v2
        with:
-        node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"

      - name: Install dependencies
        run: npm ci
@ -28,16 +33,21 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2

-      - name: Read .nvmrc
-        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
-        id: nvm
+      - name: Read Node.js & NPM versions
+        run: |
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions

-      - name: Use Node.js (.nvmrc)
-        uses: actions/setup-node@v1
+      - name: Use correct Node.js version
+        uses: actions/setup-node@v2
        with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"

      - name: Install dependencies
        run: npm ci
@ -49,16 +59,21 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2

-      - name: Read .nvmrc
-        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
-        id: nvm
+      - name: Read Node.js & NPM versions
+        run: |
+          echo "##[set-output name=NODE;]$(cat package.json | jq -r '.engines.node')"
+          echo "##[set-output name=NPM;]$(cat package.json | jq -r '.engines.npm')"
+        id: versions

-      - name: Use Node.js (.nvmrc)
-        uses: actions/setup-node@v1
+      - name: Use correct Node.js version
+        uses: actions/setup-node@v2
        with:
-          node-version: "${{ steps.nvm.outputs.NVMRC }}"
+          node-version: "${{ steps.versions.outputs.NODE }}"
+
+      - name: Use correct NPM version
+        run: npm i -g npm@"${{ steps.versions.outputs.NPM }}"

      - name: Install dependencies
        run: npm ci
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-v14.17.5
+v16.13.2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,9 +5,11 @@
  "private": true,
  "license": "MIT",
  "engines": {
-    "node": "14.17.5"
+    "node": "16.13.2",
+    "npm": "8.4.1"
  },
  "main": "src/nginxconfig/mount.js",
+  "type": "module",
  "scripts": {
    "build": "npm run build:clean && npm run build:template && npm run build:prism && npm run build:static && npm run build:tool",
    "build:clean": "do-vue clean",
@ -19,12 +21,12 @@
    "dev:tool": "vue-cli-service serve src/nginxconfig/mount.js",
    "deploy:spaces:comment": "do-vue comment nginxconfig",
    "test": "npm run test:eslint && npm run test:sass-lint && npm run test:i18n-packs && npm run test:jest",
-    "test:jest": "jest /test/.*.js?$",
+    "test:jest": "jest --env=jsdom /test/.*.js?$",
    "test:fix": "npm run test:eslint:fix",
    "test:eslint": "eslint 'src/**/*.{js,vue}'",
    "test:eslint:fix": "npm run test:eslint -- --fix",
    "test:sass-lint": "sass-lint 'src/**/*.scss' --verbose --no-exit --config .sasslintrc",
-    "test:i18n-packs": "node -r esm src/nginxconfig/i18n/verify.js"
+    "test:i18n-packs": "node --es-module-specifier-resolution=node src/nginxconfig/i18n/verify.js"
  },
  "jest": {
    "testRegex": "/test/.*.js?$"
@ -42,7 +44,7 @@
  },
  "homepage": "https://github.com/digitalocean/nginxconfig.io#readme",
  "dependencies": {
-    "clipboard": "^2.0.8",
+    "clipboard": "^2.0.10",
    "clone": "^2.1.2",
    "do-bulma": "git+https://github.com/do-community/do-bulma.git",
    "do-vue": "git+https://github.com/do-community/do-vue.git",
@ -51,35 +53,39 @@
    "json-to-pretty-yaml": "^1.2.2",
    "memory-tar-create": "0.0.3",
    "pretty-checkbox-vue": "^1.1.9",
-    "prismjs": "^1.25.0",
-    "qs": "^6.10.1",
+    "prismjs": "^1.26.0",
+    "qs": "^6.10.3",
    "simple-js-sha2-256": "^1.0.7",
-    "vue": "^2.6.12",
-    "vue-i18n": "^8.24.4",
-    "vue-select": "^3.11.2",
-    "webpack-require-from": "^1.8.4"
+    "vue": "^2.6.14",
+    "vue-i18n": "^8.27.0",
+    "vue-select": "^3.16.0",
+    "webpack-require-from": "^1.8.6"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/runtime": "^7.14.0",
-    "@vue/cli-service": "^5.0.0-beta.1",
-    "babel-eslint": "^10.1.0",
-    "chalk": "^4.1.1",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/runtime": "^7.17.0",
+    "@vue/cli-service": "^5.0.0-rc.2",
+    "ajv": "^8.10.0",
+    "chalk": "^5.0.0",
    "copyfiles": "^2.4.1",
-    "core-js": "^3.12.1",
+    "core-js": "^3.21.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^7.26.0",
-    "eslint-plugin-vue": "^7.9.0",
+    "eslint": "^8.8.0",
+    "eslint-plugin-vue": "^8.4.1",
    "esm": "^3.2.25",
-    "jest": "^26.6.3",
-    "node-fetch": "^2.6.7",
-    "postcss": "^8.2.15",
-    "sass": "^1.32.13",
+    "jest": "^27.4.7",
+    "node-fetch": "^3.2.0",
+    "postcss": "^8.4.6",
+    "sass": "^1.49.7",
    "sass-lint": "git+https://github.com/do-community/sass-lint.git",
    "sass-loader": "^11.1.1",
-    "vue-template-compiler": "^2.6.12",
-    "webpack-bundle-analyzer": "^4.4.2"
+    "vue-template-compiler": "^2.6.14",
+    "webpack-bundle-analyzer": "^4.5.0"
+  },
+  "overrides": {
+    "mini-css-extract-plugin": "^1.6.2"
  }
 }
--- a/src/nginxconfig/build/prism.js
+++ b/src/nginxconfig/build/prism.js
@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,9 +24,9 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

-const fs = require('fs').promises;
-const path = require('path');
-const fetch = require('node-fetch');
+import { promises as fs } from 'fs';
+import { URL } from 'url';
+import fetch from 'node-fetch';

 const main = async () => {
    const resp = await fetch('https://assets.digitalocean.com/prism/prism.css');
@ -35,8 +35,11 @@ const main = async () => {
    // Fix $676767 -> #676767
    const fixed = text.replace(/:\s*\$((?:[0-9a-fA-F]{3}){1,2});/g, ':#$1;');

-    const buildDir = path.join(__dirname, '..', '..', '..', 'build');
-    await fs.writeFile(path.join(buildDir, 'prism.css'), fixed);
+    const buildDir = '../../../build';
+    await fs.writeFile(new URL(`${buildDir}/prism.css`, import.meta.url), fixed);
 };

-main().then(() => {});
+main().then(() => {}).catch(err => {
+    console.error(err);
+    process.exit(1);
+});
--- a/src/nginxconfig/build/template.js
+++ b/src/nginxconfig/build/template.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,25 +24,21 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

-const path = require('path');
-const fs = require('fs');
+import fs from 'fs';
+import { URL } from 'url';

 // Fetch the posthtml template and convert it to an ejs template
 const main = () => {
-    const buildDir = path.join(__dirname, '..', '..', '..', 'build');
-    let template = fs.readFileSync(path.join(buildDir, 'base.html'), 'utf8');
+    const buildDir = '../../../build';
+    let template = fs.readFileSync(new URL(`${buildDir}/base.html`, import.meta.url), 'utf8');

    // Inject our title now
    template = template.replace('<block name="title"><title>DigitalOcean</title></block>', '<title>NGINXConfig | DigitalOcean</title>');

-    // We don't need the head/script blocks, vue-cli-service handles those
-    template = template.replace('<block name="head"></block>', '');
-    template = template.replace('<block name="script"></block>', '');
-
    // Inject our app mounting point
    template = template.replace('<block name="content"></block>', '<div id="app"></div>');

-    fs.writeFileSync(path.join(buildDir, 'index.html'), template);
+    fs.writeFileSync(new URL(`${buildDir}/index.html`, import.meta.url), template);
 };

 main();
--- a/src/nginxconfig/generators/to_yaml.js
+++ b/src/nginxconfig/generators/to_yaml.js
@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,7 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

-const yaml = require('json-to-pretty-yaml');
+import yaml from 'json-to-pretty-yaml';

 export default yamlConf => {
    return yaml.stringify(yamlConf);
--- a/src/nginxconfig/i18n/setup.js
+++ b/src/nginxconfig/i18n/setup.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -26,9 +26,7 @@ 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';
+import { defaultPack, defaultPackData, toSep, availablePacks } from '../util/language_packs';

 Vue.use(VueI18n);

@ -37,32 +35,58 @@ const i18nPacks = {};
 i18nPacks[defaultPack] = defaultPackData;
 const loadedI18nPacks = [defaultPack];

+// Cache the i18n instance
+let i18n = null;
+
+export const getI18n = async () => {
+    // Use cached if available
+    if (i18n) return i18n;
+
    // 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');
+    // These are eagerly loaded by Webpack, so don't generate extra chunks, and return an already resolved Promise
    for (const availablePack of availablePacks) {
        if (availablePack === defaultPack) continue;
-    i18nPacks[availablePack] = { languages: languagesContext(`./${toSep(availablePack, '-')}/languages.js`).default };
+        if (i18nPacks[availablePack]) continue;
+        const { default: languageData } = await import(
+            /* webpackInclude: /i18n\/[^/]+\/languages\.js$/ */
+            /* webpackMode: "eager" */
+            `./${toSep(availablePack, '-')}/languages.js`
+        );
+        i18nPacks[availablePack] = { languages: languageData };
    }

-export const i18n = new VueI18n({
+    // Store and return the i18n instance with the loaded packs
+    i18n = new VueI18n({
        locale: defaultPack,
        fallbackLocale: defaultPack,
        messages: i18nPacks,
    });
+    return i18n;
+};

-const loadLanguagePack = pack => {
+const loadLanguagePack = async 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);
+    // Load in the full pack
+    // Use webpack magic to only build chunks for lang/index.js
+    const { default: packData } = await import(
+        /* webpackInclude: /i18n\/[^/]+\/index\.js$/ */
+        /* webpackMode: "lazy" */
+        `./${toSep(pack, '-')}/index.js`
+    );
+    i18nPacks[pack] = packData;
 };

 export const setLanguagePack = async pack => {
+    // If i18n not loaded, do nothing
+    if (!i18n) return;
+
+    // Load the pack if not already loaded, and set it as active
    await loadLanguagePack(pack);
    i18n.locale = pack;
 };
--- a/src/nginxconfig/i18n/verify.js
+++ b/src/nginxconfig/i18n/verify.js
@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -26,19 +26,11 @@ THE SOFTWARE.

 import { readdirSync, readFileSync } from 'fs';
 import { join, sep } from 'path';
+import { URL } from 'url';
 import chalk from 'chalk';
-import { defaultPack } from '../util/language_pack_default';
-import { toSep, fromSep } from '../util/language_pack_name';
+import { defaultPack, availablePacks, toSep, fromSep } from '../util/language_packs';
 import snakeToCamel from '../util/snake_to_camel';

-// 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 => {
    const foundKeys = new Set();
@ -61,7 +53,7 @@ const explore = packFragment => {
 const files = directory => {
    const foundFiles = new Set();

-    for (const dirent of readdirSync(join(__dirname, directory), { withFileTypes: true })) {
+    for (const dirent of readdirSync(new URL(`./${directory}`, import.meta.url), { withFileTypes: true })) {
        const base = join(directory, dirent.name);

        // If this is a file, store it
@ -83,7 +75,7 @@ const files = directory => {

 // Get all the todo items in a file
 const todos = file => {
-    const content = readFileSync(join(__dirname, file), 'utf8');
+    const content = readFileSync(new URL(`./${file}`, import.meta.url), 'utf8');
    const lines = content.split('\n');
    const items = [];

@ -105,6 +97,15 @@ const fileToObject = file => file
    // Replace sep with period and use camelCase
    .split(sep).map(dir => snakeToCamel(dir)).join('.');

+const main = async () => {
+    // Load all the packs in
+    const packs = {};
+    const packDirectories = readdirSync(new URL('./', import.meta.url), { withFileTypes: true })
+        .filter(dirent => dirent.isDirectory())
+        .map(dirent => dirent.name);
+    for (const packDirectory of packDirectories)
+        packs[fromSep(packDirectory, '-')] = await import(`./${packDirectory}/index.js`).then(pack => pack.default);
+
    // Get all the keys for the default "source" language pack
    const defaultKeys = explore(packs[defaultPack]);

@ -149,10 +150,10 @@ for (const [pack, packData] of Object.entries(packs)) {
        // Output the pack results
        if (warnings.length)
            for (const warning of warnings)
-            console.log(`  ${chalk.yellow('warning')} ${warning}`);
+                console.warn(`  ${chalk.yellow('warning')} ${warning}`);
        if (errors.length)
            for (const error of errors)
-            console.log(`  ${chalk.red('error')}   ${error}`);
+                console.error(`  ${chalk.red('error')}   ${error}`);
        if (!errors.length && !warnings.length)
            console.log(`  ${chalk.green('No issues')}`);

@ -163,5 +164,21 @@ for (const [pack, packData] of Object.entries(packs)) {
        console.log(chalk.reset());
    }

+    // Check available language packs
+    const packKeys = Object.keys(packs);
+    const missingPacks = packKeys.filter(x => !availablePacks.includes(x));
+    const extraPacks = availablePacks.filter(x => !packKeys.includes(x));
+
+    // Missing packs and extra packs are errors
+    missingPacks.forEach(pack => console.error(`${chalk.red('error')} Language pack \`${pack}\` not included in \`availablePacks\``));
+    extraPacks.forEach(pack => console.error(`${chalk.red('error')} Language pack \`${pack}\` included in \`availablePacks\` but not found`));
+    if (missingPacks.length || extraPacks.length) hadError = true;
+
    // Exit 1 if we had errors
    if (hadError) process.exit(1);
+};
+
+main().then(() => {}).catch(err => {
+    console.error(err);
+    process.exit(1);
+});
--- a/src/nginxconfig/mount.js
+++ b/src/nginxconfig/mount.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -28,11 +28,14 @@ THE SOFTWARE.
 import './scss/style.scss';
 import Vue from 'vue';
 import './util/prism_bundle';
-import { i18n } from './i18n/setup';
+import { getI18n } from './i18n/setup';
 import App from './templates/app';

-// Run the app
+// Load the i18n languages and run the app
+getI18n().then(i18n => {
    new Vue({
        i18n,
        render: h => h(App),
    }).$mount('#app');
+});
+
--- a/src/nginxconfig/scss/_fields.scss
+++ b/src/nginxconfig/scss/_fields.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -214,7 +214,7 @@ THE SOFTWARE.

          color: $dark-grey;
          font-size: 14px;
-          padding-left: calc(#{$margin / 2} + 1.5em);
+          padding-left: calc(#{$margin * .5} + 1.5em);
          text-indent: initial;

          &::before,
--- a/src/nginxconfig/templates/app.vue
+++ b/src/nginxconfig/templates/app.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -33,7 +33,8 @@ THE SOFTWARE.
            <template #header>
            </template>
            <template #buttons>
-                <VueSelect v-model="lang"
+                <VueSelect
+                    v-model="lang"
                    :options="i18nPacks"
                    :clearable="false"
                    :reduce="s => s.value"
@ -79,7 +80,8 @@ THE SOFTWARE.
                    </div>

                    <template v-for="data in activeDomains">
-                        <Domain :key="data[1]"
+                        <Domain
+                            :key="data[1]"
                            :ref="`domain-${data[1]}`"
                            :data="data[0]"
                            :style="{ display: data[1] === active ? undefined : 'none' }"
@ -131,8 +133,7 @@ THE SOFTWARE.
    import isObject from '../util/is_object';
    import analytics from '../util/analytics';
    import browserLanguage from '../util/browser_language';
-    import { defaultPack } from '../util/language_pack_default';
-    import { availablePacks } from '../util/language_pack_context';
+    import { defaultPack, availablePacks } from '../util/language_packs';

    import { setLanguagePack } from '../i18n/setup';
    import generators from '../generators';
--- a/src/nginxconfig/templates/callouts/contribute.vue
+++ b/src/nginxconfig/templates/callouts/contribute.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -34,7 +34,8 @@ THE SOFTWARE.
                <i class="fas fa-times"></i>
            </a>
        </div>
-        <a href="https://github.com/digitalocean/nginxconfig.io"
+        <a
+            href="https://github.com/digitalocean/nginxconfig.io"
            class="button is-primary"
            target="_blank"
            @click="linkClickEvent"
--- a/src/nginxconfig/templates/callouts/droplet.vue
+++ b/src/nginxconfig/templates/callouts/droplet.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -28,7 +28,8 @@ THE SOFTWARE.
    <div class="callout">
        <p>
            {{ $t('templates.callouts.droplet.lookingForAPlaceToDeploy') }}
-            <ExternalLink :text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
+            <ExternalLink
+                :text="$t('templates.callouts.droplet.tryOutDigitalOceansDroplet')"
                link="https://marketplace.digitalocean.com/apps/lemp"
                @click.native="linkClickEvent"
            ></ExternalLink>
--- a/src/nginxconfig/templates/domain.vue
+++ b/src/nginxconfig/templates/domain.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -42,7 +42,8 @@ THE SOFTWARE.
                </ul>
            </div>

-            <component :is="tab"
+            <component
+                :is="tab"
                v-for="tab in tabs"
                :key="tab.key"
                :ref="tab.key"
--- a/src/nginxconfig/templates/domain_sections/https.vue
+++ b/src/nginxconfig/templates/domain_sections/https.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -81,11 +81,13 @@ THE SOFTWARE.
                        <label class="text message is-warning">
                            <span class="message-body">
                                {{ $t('templates.domainSections.https.http3IsANonStandardModule') }}
-                                <ExternalLink :text="$t('templates.domainSections.https.http3NginxQuicReadme')"
+                                <ExternalLink
+                                    :text="$t('templates.domainSections.https.http3NginxQuicReadme')"
                                    link="https://quic.nginx.org/README"
                                ></ExternalLink>
                                {{ $t('templates.domainSections.https.http3OrThe') }}
-                                <ExternalLink :text="$t('templates.domainSections.https.http3CloudflareQuicheProject')"
+                                <ExternalLink
+                                    :text="$t('templates.domainSections.https.http3CloudflareQuicheProject')"
                                    link="https://github.com/cloudflare/quiche/tree/master/extras/nginx"
                                ></ExternalLink>
                                {{ $t('templates.domainSections.https.http3ForBuildingNginxWithHttp3') }}
@ -158,7 +160,8 @@ THE SOFTWARE.
            </div>
            <div class="field-body">
                <div class="field">
-                    <div v-for="(name, value) in $props.data.certType.options"
+                    <div
+                        v-for="(name, value) in $props.data.certType.options"
                        :class="`control${certTypeChanged && value === certType ? ' is-changed' : ''}`"
                    >
                        <div class="radio">
@ -179,7 +182,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${letsEncryptEmailChanged ? ' is-changed' : ''}`">
-                        <input v-model="letsEncryptEmail"
+                        <input
+                            v-model="letsEncryptEmail"
                            class="input"
                            type="text"
                            :placeholder="$props.data.letsEncryptEmail.computed"
@ -196,7 +200,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${sslCertificateChanged ? ' is-changed' : ''}`">
-                        <input v-model="sslCertificate"
+                        <input
+                            v-model="sslCertificate"
                            class="input"
                            type="text"
                            :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.crt`"
@ -213,7 +218,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${sslCertificateKeyChanged ? ' is-changed' : ''}`">
-                        <input v-model="sslCertificateKey"
+                        <input
+                            v-model="sslCertificateKey"
                            class="input"
                            type="text"
                            :placeholder="`${$parent.$parent.$data.global.nginx.nginxConfigDirectory.computed}/ssl/${$parent.$props.data.server.domain.computed}.key`"
--- a/src/nginxconfig/templates/domain_sections/onion.vue
+++ b/src/nginxconfig/templates/domain_sections/onion.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -49,7 +49,8 @@ THE SOFTWARE.
                        </div>
                        <div class="control">
                            <label class="text">
-                                <ExternalLink :text="$t('templates.domainSections.onion.learnMoreAboutOnionServices')"
+                                <ExternalLink
+                                    :text="$t('templates.domainSections.onion.learnMoreAboutOnionServices')"
                                    link="https://community.torproject.org/onion-services/"
                                ></ExternalLink>
                            </label>
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -72,7 +72,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${phpServerChanged ? ' is-changed' : ''}`">
-                        <VueSelect ref="phpServerSelect"
+                        <VueSelect
+                            ref="phpServerSelect"
                            v-model="phpServer"
                            :options="phpServerOptions"
                            :clearable="false"
@ -80,7 +81,8 @@ THE SOFTWARE.
                        ></VueSelect>
                    </div>

-                    <div v-if="phpServerCustomEnabled"
+                    <div
+                        v-if="phpServerCustomEnabled"
                        :class="`control${phpServerCustomChanged ? ' is-changed' : ''}`"
                    >
                        <input v-model="phpServerCustom" class="input" type="text" :placeholder="$props.data.phpServerCustom.default" />
@ -96,7 +98,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${phpBackupServerChanged ? ' is-changed' : ''}`">
-                        <VueSelect ref="phpBackupServerSelect"
+                        <VueSelect
+                            ref="phpBackupServerSelect"
                            v-model="phpBackupServer"
                            :options="phpBackupServerOptions"
                            :clearable="false"
@ -104,7 +107,8 @@ THE SOFTWARE.
                        ></VueSelect>
                    </div>

-                    <div v-if="phpBackupServerCustomEnabled"
+                    <div
+                        v-if="phpBackupServerCustomEnabled"
                        :class="`control${phpBackupServerCustomChanged ? ' is-changed' : ''}`"
                    >
                        <input v-model="phpBackupServerCustom" class="input" type="text" :placeholder="$props.data.phpBackupServerCustom.default" />
--- a/src/nginxconfig/templates/domain_sections/presets.vue
+++ b/src/nginxconfig/templates/domain_sections/presets.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -41,7 +41,8 @@ THE SOFTWARE.
            </div>

            <div class="buttons-group">
-                <a v-for="(preset, key) in $props.data"
+                <a
+                    v-for="(preset, key) in $props.data"
                    :class="`button${preset.computed ? ' is-primary' : ''}`"
                    @click="setPreset(key)"
                >
--- a/src/nginxconfig/templates/domain_sections/restrict.vue
+++ b/src/nginxconfig/templates/domain_sections/restrict.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -192,7 +192,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${responseCodeChanged ? ' is-changed' : ''}`">
-                        <input v-model.number="responseCode"
+                        <input
+                            v-model.number="responseCode"
                            :class="['input', validResponseCode ? '' : 'is-danger']"
                            type="number"
                            min="100"
--- a/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/domain_sections/reverse_proxy.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -72,7 +72,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div :class="`field${pathChanged ? ' is-changed' : ''}`">
                    <div class="control">
-                        <input v-model="path"
+                        <input
+                            v-model="path"
                            class="input"
                            type="text"
                            :placeholder="$props.data.path.default"
@ -89,7 +90,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div :class="`field${proxyPassChanged ? ' is-changed' : ''}`">
                    <div class="control">
-                        <input v-model="proxyPass"
+                        <input
+                            v-model="proxyPass"
                            class="input"
                            type="text"
                            :placeholder="$props.data.proxyPass.default"
--- a/src/nginxconfig/templates/domain_sections/routing.vue
+++ b/src/nginxconfig/templates/domain_sections/routing.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -50,7 +50,8 @@ THE SOFTWARE.
            </div>
            <div class="field-body">
                <div class="field">
-                    <div v-for="value in $props.data.index.options"
+                    <div
+                        v-for="value in $props.data.index.options"
                        :class="`control${indexChanged && value === index ? ' is-changed' : ''}`"
                    >
                        <div class="radio">
@ -97,7 +98,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div :class="`field${fallbackPhpPathChanged ? ' is-changed' : ''}`">
                    <div class="control">
-                        <input v-model="fallbackPhpPath"
+                        <input
+                            v-model="fallbackPhpPath"
                            class="input"
                            type="text"
                            :placeholder="$props.data.fallbackPhpPath.default"
--- a/src/nginxconfig/templates/footer.vue
+++ b/src/nginxconfig/templates/footer.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -32,11 +32,13 @@ THE SOFTWARE.
            </p>
            <p>
                {{ $t('templates.footer.thisToolIs') }}
-                <ExternalLink :text="$t('templates.footer.openSourceOnGitHub')"
+                <ExternalLink
+                    :text="$t('templates.footer.openSourceOnGitHub')"
                    link="https://github.com/digitalocean/nginxconfig.io"
                ></ExternalLink>
                {{ $t('templates.footer.underThe') }}
-                <ExternalLink :text="$t('templates.footer.mit')"
+                <ExternalLink
+                    :text="$t('templates.footer.mit')"
                    link="https://github.com/digitalocean/nginxconfig.io/blob/master/LICENSE"
                ></ExternalLink>
                {{ $t('templates.footer.license') }}
@ -44,11 +46,13 @@ THE SOFTWARE.
            </p>
            <p>
                {{ $t('templates.footer.originallyCreatedBy') }}
-                <ExternalLink :text="$t('templates.footer.balintSzekeres')"
+                <ExternalLink
+                    :text="$t('templates.footer.balintSzekeres')"
                    link="https://b4lint.hu/"
                ></ExternalLink>,
                {{ $t('templates.footer.maintainedBy') }}
-                <ExternalLink :text="$t('templates.footer.digitalOcean')"
+                <ExternalLink
+                    :text="$t('templates.footer.digitalOcean')"
                    link="https://github.com/digitalocean/nginxconfig.io"
                ></ExternalLink>.
            </p>
--- a/src/nginxconfig/templates/global.vue
+++ b/src/nginxconfig/templates/global.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -37,7 +37,8 @@ THE SOFTWARE.
            </ul>
        </div>

-        <component :is="tab"
+        <component
+            :is="tab"
            v-for="tab in tabs"
            :key="tab.key"
            :ref="tab.key"
--- a/src/nginxconfig/templates/global_sections/https.vue
+++ b/src/nginxconfig/templates/global_sections/https.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -67,7 +67,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field">
                        <div class="field">
-                            <div v-for="(name, value) in $props.data.sslProfile.options"
+                            <div
+                                v-for="(name, value) in $props.data.sslProfile.options"
                                :class="`control${sslProfileChanged && value === sslProfile ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
@ -97,7 +98,8 @@ THE SOFTWARE.
                            </div>
                        </div>
                        <div v-if="$props.data.ocspCloudflare.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspCloudflareType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspCloudflareType.options"
                                :class="`control${ocspCloudflareTypeChanged && value === ocspCloudflareType ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
@ -118,7 +120,8 @@ THE SOFTWARE.
                            </div>
                        </div>
                        <div v-if="$props.data.ocspGoogle.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspGoogleType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspGoogleType.options"
                                :class="`control${ocspGoogleTypeChanged && value === ocspGoogleType ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
@ -139,7 +142,8 @@ THE SOFTWARE.
                            </div>
                        </div>
                        <div v-if="$props.data.ocspOpenDns.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspOpenDnsType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspOpenDnsType.options"
                                :class="`control${ocspOpenDnsTypeChanged && value === ocspOpenDnsType ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
@ -160,7 +164,8 @@ THE SOFTWARE.
                            </div>
                        </div>
                        <div v-if="$props.data.ocspQuad9.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspQuad9Type.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspQuad9Type.options"
                                :class="`control${ocspQuad9TypeChanged && value === ocspQuad9Type ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
@ -181,7 +186,8 @@ THE SOFTWARE.
                            </div>
                        </div>
                        <div v-if="$props.data.ocspVerisign.computed" class="control field is-horizontal is-expanded">
-                            <div v-for="(name, value) in $props.data.ocspVerisignType.options"
+                            <div
+                                v-for="(name, value) in $props.data.ocspVerisignType.options"
                                :class="`control${ocspVerisignTypeChanged && value === ocspVerisignType ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
@ -203,7 +209,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field">
                        <div :class="`control${letsEncryptRootChanged ? ' is-changed' : ''}`">
-                            <input v-model="letsEncryptRoot"
+                            <input
+                                v-model="letsEncryptRoot"
                                class="input"
                                type="text"
                                :placeholder="$props.data.letsEncryptRoot.default"
@ -220,7 +227,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field">
                        <div :class="`control${letsEncryptCertRootChanged ? ' is-changed' : ''}`">
-                            <input v-model="letsEncryptCertRoot"
+                            <input
+                                v-model="letsEncryptCertRoot"
                                class="input"
                                type="text"
                                :placeholder="$props.data.letsEncryptCertRoot.default"
--- a/src/nginxconfig/templates/global_sections/logging.vue
+++ b/src/nginxconfig/templates/global_sections/logging.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -33,7 +33,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
-                        <input v-model="accessLog"
+                        <input
+                            v-model="accessLog"
                            class="input"
                            type="text"
                            :placeholder="$props.data.accessLog.default"
@ -50,7 +51,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
-                        <input v-model="errorLog"
+                        <input
+                            v-model="errorLog"
                            class="input"
                            type="text"
                            :placeholder="$props.data.errorLog.default"
--- a/src/nginxconfig/templates/global_sections/nginx.vue
+++ b/src/nginxconfig/templates/global_sections/nginx.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -33,7 +33,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${nginxConfigDirectoryChanged ? ' is-changed' : ''}`">
-                        <input v-model="nginxConfigDirectory"
+                        <input
+                            v-model="nginxConfigDirectory"
                            class="input"
                            type="text"
                            :placeholder="$props.data.nginxConfigDirectory.default"
@ -50,7 +51,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${workerProcessesChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="workerProcesses"
+                        <VueSelect
+                            v-model="workerProcesses"
                            :options="$props.data.workerProcesses.options"
                            :clearable="false"
                        ></VueSelect>
@ -66,7 +68,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${userChanged ? ' is-changed' : ''}`">
-                        <input v-model="user"
+                        <input
+                            v-model="user"
                            class="input"
                            type="text"
                            :placeholder="$props.data.user.default"
@ -83,7 +86,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${pidChanged ? ' is-changed' : ''}`">
-                        <input v-model="pid"
+                        <input
+                            v-model="pid"
                            class="input"
                            type="text"
                            :placeholder="$props.data.pid.default"
@ -100,7 +104,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field has-addons">
                    <div :class="`control is-expanded${clientMaxBodySizeChanged ? ' is-changed' : ''}`">
-                        <input v-model.number="clientMaxBodySize"
+                        <input
+                            v-model.number="clientMaxBodySize"
                            class="input"
                            type="number"
                            min="0"
@ -124,7 +129,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${typesHashMaxSizeChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="typesHashMaxSize"
+                        <VueSelect
+                            v-model="typesHashMaxSize"
                            :options="$props.data.typesHashMaxSize.options"
                            :clearable="false"
                        ></VueSelect>
@ -140,7 +146,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${typesHashBucketSizeChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="typesHashBucketSize"
+                        <VueSelect
+                            v-model="typesHashBucketSize"
                            :options="$props.data.typesHashBucketSize.options"
                            :clearable="false"
                        ></VueSelect>
--- a/src/nginxconfig/templates/global_sections/performance.vue
+++ b/src/nginxconfig/templates/global_sections/performance.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -82,7 +82,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${assetsExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="assetsExpiration"
+                        <input
+                            v-model="assetsExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.assetsExpiration.default"
@ -99,7 +100,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${mediaExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="mediaExpiration"
+                        <input
+                            v-model="mediaExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.mediaExpiration.default"
@ -116,7 +118,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${svgExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="svgExpiration"
+                        <input
+                            v-model="svgExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.svgExpiration.default"
@ -133,7 +136,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${fontsExpirationChanged ? ' is-changed' : ''}`">
-                        <input v-model="fontsExpiration"
+                        <input
+                            v-model="fontsExpiration"
                            class="input"
                            type="text"
                            :placeholder="$props.data.fontsExpiration.default"
--- a/src/nginxconfig/templates/global_sections/python.vue
+++ b/src/nginxconfig/templates/global_sections/python.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -48,7 +48,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${pythonServerChanged ? ' is-changed' : ''}`">
-                        <input v-model="pythonServer"
+                        <input
+                            v-model="pythonServer"
                            class="input"
                            type="text"
                            :placeholder="$props.data.pythonServer.default"
--- a/src/nginxconfig/templates/global_sections/reverse_proxy.vue
+++ b/src/nginxconfig/templates/global_sections/reverse_proxy.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -49,7 +49,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field has-addons">
                        <div :class="`control is-expanded${proxyConnectTimeoutChanged ? ' is-changed' : ''}`">
-                            <input v-model.number="proxyConnectTimeout"
+                            <input
+                                v-model.number="proxyConnectTimeout"
                                class="input"
                                type="number"
                                min="0"
@ -73,7 +74,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field has-addons">
                        <div :class="`control is-expanded${proxySendTimeoutChanged ? ' is-changed' : ''}`">
-                            <input v-model.number="proxySendTimeout"
+                            <input
+                                v-model.number="proxySendTimeout"
                                class="input"
                                type="number"
                                min="0"
@ -97,7 +99,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field has-addons">
                        <div :class="`control is-expanded${proxyReadTimeoutChanged ? ' is-changed' : ''}`">
-                            <input v-model.number="proxyReadTimeout"
+                            <input
+                                v-model.number="proxyReadTimeout"
                                class="input"
                                type="number"
                                min="0"
@ -121,7 +124,8 @@ THE SOFTWARE.
                <div class="field-body">
                    <div class="field">
                        <div class="field">
-                            <div v-for="(name, value) in $props.data.proxyCoexistenceXForwarded.options"
+                            <div
+                                v-for="(name, value) in $props.data.proxyCoexistenceXForwarded.options"
                                :class="`control${proxyCoexistenceXForwardedChanged && value === proxyCoexistenceXForwarded ? ' is-changed' : ''}`"
                            >
                                <div class="radio">
--- a/src/nginxconfig/templates/global_sections/security.vue
+++ b/src/nginxconfig/templates/global_sections/security.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -33,7 +33,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${referrerPolicyChanged ? ' is-changed' : ''}`">
-                        <VueSelect v-model="referrerPolicy"
+                        <VueSelect
+                            v-model="referrerPolicy"
                            :options="$props.data.referrerPolicy.options"
                            :clearable="false"
                        ></VueSelect>
@ -49,7 +50,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${contentSecurityPolicyChanged ? ' is-changed' : ''}`">
-                        <input v-model="contentSecurityPolicy"
+                        <input
+                            v-model="contentSecurityPolicy"
                            class="input"
                            type="text"
                            :placeholder="$props.data.contentSecurityPolicy.default"
@ -57,7 +59,8 @@ THE SOFTWARE.
                    </div>
                    <div v-if="hasWordPress && !hasWordPressUnsafeEval" class="control">
                        <label class="text message is-warning">
-                            <span class="message-body"
+                            <span
+                                class="message-body"
                                v-html="$t('templates.globalSections.security.whenUsingWordPressUnsafeEvalIsOftenRequiredToAllowFunctionality')"
                            ></span>
                        </label>
@ -73,7 +76,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${permissionsPolicyChanged ? ' is-changed' : ''}`">
-                        <input v-model="permissionsPolicy"
+                        <input
+                            v-model="permissionsPolicy"
                            class="input"
                            type="text"
                            :placeholder="$props.data.permissionsPolicy.default"
@ -144,7 +148,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div :class="`control${securityTxtChanged ? ' is-changed' : ''}`">
-                        <input v-model="securityTxtPath"
+                        <input
+                            v-model="securityTxtPath"
                            class="input"
                            type="text"
                            :placeholder="$props.data.securityTxtPath.default"
--- a/src/nginxconfig/templates/global_sections/tools.vue
+++ b/src/nginxconfig/templates/global_sections/tools.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -70,7 +70,8 @@ THE SOFTWARE.
            <div class="field-body">
                <div class="field">
                    <div class="control">
-                        <input v-model="shareLink"
+                        <input
+                            v-model="shareLink"
                            class="input"
                            type="text"
                            readonly="readonly"
--- a/src/nginxconfig/templates/setup.vue
+++ b/src/nginxconfig/templates/setup.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -35,7 +35,8 @@ THE SOFTWARE.
                </ul>
            </div>

-            <component :is="tab"
+            <component
+                :is="tab"
                v-for="tab in tabs"
                :key="tab.key"
                :data="$props.data"
--- a/src/nginxconfig/templates/setup_sections/certbot.vue
+++ b/src/nginxconfig/templates/setup_sections/certbot.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -32,7 +32,8 @@ THE SOFTWARE.
                    {{ $t('templates.setupSections.certbot.commentOutSslDirectivesInConfiguration') }}
                    <br />
                </p>
-                <BashPrism :key="sitesAvailable"
+                <BashPrism
+                    :key="sitesAvailable"
                    :cmd="`sed -i -r 's/(listen .*443)/\\1; #/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\\1/g; s/(server \\{)/\\1\\n    ssl off;/g' ${sitesAvailable}`"
                    @copied="codeCopiedEvent('Disable ssl directives')"
                ></BashPrism>
@ -43,7 +44,8 @@ THE SOFTWARE.
                    {{ $t('templates.setupSections.certbot.reloadYourNginxServer') }}
                    <br />
                </p>
-                <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
+                <BashPrism
+                    cmd="sudo nginx -t && sudo systemctl reload nginx"
                    @copied="codeCopiedEvent('Reload nginx')"
                ></BashPrism>
            </li>
@ -53,7 +55,8 @@ THE SOFTWARE.
                    {{ $t('templates.setupSections.certbot.obtainSslCertificatesFromLetsEncrypt') }}
                    <br />
                </p>
-                <BashPrism :key="certbotCmds"
+                <BashPrism
+                    :key="certbotCmds"
                    :cmd="certbotCmds"
                    @copied="codeCopiedEvent('Obtain certificates using certbot')"
                ></BashPrism>
@ -64,7 +67,8 @@ THE SOFTWARE.
                    {{ $t('templates.setupSections.certbot.uncommentSslDirectivesInConfiguration') }}
                    <br />
                </p>
-                <BashPrism :key="sitesAvailable"
+                <BashPrism
+                    :key="sitesAvailable"
                    :cmd="`sed -i -r -z 's/#?; ?#//g; s/(server \\{)\\n    ssl off;/\\1/g' ${sitesAvailable}`"
                    @copied="codeCopiedEvent('Enable ssl directives')"
                ></BashPrism>
@ -75,7 +79,8 @@ THE SOFTWARE.
                    {{ $t('templates.setupSections.certbot.reloadYourNginxServer') }}
                    <br />
                </p>
-                <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
+                <BashPrism
+                    cmd="sudo nginx -t && sudo systemctl reload nginx"
                    @copied="codeCopiedEvent('Reload nginx (2)')"
                ></BashPrism>
            </li>
@ -85,10 +90,12 @@ THE SOFTWARE.
                    {{ $t('templates.setupSections.certbot.configureCertbotToReloadNginxOnCertificateRenewal') }}
                    <br />
                </p>
-                <BashPrism cmd="echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
+                <BashPrism
+                    cmd="echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
                    @copied="codeCopiedEvent('Create nginx auto-restart on renewal')"
                ></BashPrism>
-                <BashPrism cmd="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
+                <BashPrism
+                    cmd="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"
                    @copied="codeCopiedEvent('Enable execution of auto-restart')"
                ></BashPrism>
            </li>
--- a/src/nginxconfig/templates/setup_sections/download.vue
+++ b/src/nginxconfig/templates/setup_sections/download.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -50,7 +50,8 @@ THE SOFTWARE.
                <p>
                    <span v-html="$t('templates.setupSections.download.navigateToYourNginxConfigurationDirectoryOnYourServer')"></span>
                    <br />
-                    <BashPrism :key="$props.data.global.nginx.nginxConfigDirectory.computed"
+                    <BashPrism
+                        :key="$props.data.global.nginx.nginxConfigDirectory.computed"
                        :cmd="`cd ${$props.data.global.nginx.nginxConfigDirectory.computed}`"
                        @copied="codeCopiedEvent('Navigate to nginx config directory')"
                    ></BashPrism>
@ -61,7 +62,8 @@ THE SOFTWARE.
                <p>
                    <span v-html="$t('templates.setupSections.download.createABackupOfYourCurrentNginxConfiguration')"></span>
                    <br />
-                    <BashPrism cmd="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"
+                    <BashPrism
+                        cmd="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"
                        @copied="codeCopiedEvent('Create nginx config backup tar')"
                    ></BashPrism>
                </p>
@ -71,7 +73,8 @@ THE SOFTWARE.
                <p>
                    <span v-html="$t('templates.setupSections.download.extractTheNewCompressedConfigurationArchiveUsingTar')"></span>
                    <br />
-                    <BashPrism :key="$parent.tarName"
+                    <BashPrism
+                        :key="$parent.tarName"
                        :cmd="`tar -xzvf ${$parent.tarName} | xargs chmod 0644`"
                        @copied="codeCopiedEvent('Extract new nginx config tar')"
                    ></BashPrism>
--- a/src/nginxconfig/templates/setup_sections/go_live.vue
+++ b/src/nginxconfig/templates/setup_sections/go_live.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -32,7 +32,8 @@ THE SOFTWARE.
        <p>
            {{ $t('templates.setupSections.goLive.reloadNginxToLoadInYourNewConfiguration') }}
            <br />
-            <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"
+            <BashPrism
+                cmd="sudo nginx -t && sudo systemctl reload nginx"
                @copied="codeCopiedEvent('Reload nginx')"
            ></BashPrism>
        </p>
--- a/src/nginxconfig/templates/setup_sections/ssl.vue
+++ b/src/nginxconfig/templates/setup_sections/ssl.vue
@ -1,5 +1,5 @@
 <!--
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -31,7 +31,8 @@ THE SOFTWARE.
                <p>
                    <span v-html="$t('templates.setupSections.ssl.generateDiffieHellmanKeysByRunningThisCommandOnYourServer')"></span>
                    <br />
-                    <BashPrism :key="`${$props.data.global.nginx.nginxConfigDirectory.computed}-${diffieHellmanValue}`"
+                    <BashPrism
+                        :key="`${$props.data.global.nginx.nginxConfigDirectory.computed}-${diffieHellmanValue}`"
                        :cmd="`openssl dhparam -out ${$props.data.global.nginx.nginxConfigDirectory.computed}/dhparam.pem ${diffieHellmanValue}`"
                        @copied="codeCopiedEvent('Generate diffie-hellman keys')"
                    ></BashPrism>
@ -42,11 +43,13 @@ THE SOFTWARE.
                <p>
                    <span v-html="$t('templates.setupSections.ssl.createACommonAcmeChallengeDirectoryForLetsEncrypt')"></span>
                    <br />
-                    <BashPrism :key="letsEncryptDir"
+                    <BashPrism
+                        :key="letsEncryptDir"
                        :cmd="`mkdir -p ${letsEncryptDir}`"
                        @copied="codeCopiedEvent('Create let\'s encrypt directory')"
                    ></BashPrism>
-                    <BashPrism :key="`${nginxUser}-${letsEncryptDir}`"
+                    <BashPrism
+                        :key="`${nginxUser}-${letsEncryptDir}`"
                        :cmd="`chown ${nginxUser} ${letsEncryptDir}`"
                        @copied="codeCopiedEvent('Set let\'s encrypt directory ownership')"
                    ></BashPrism>
--- a/src/nginxconfig/util/browser_language.js
+++ b/src/nginxconfig/util/browser_language.js
@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,7 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

-import { fromSep } from './language_pack_name';
+import { fromSep } from './language_packs';

 export default availablePacks => {
    if (typeof window === 'object' && typeof window.navigator === 'object') {
--- a/src/nginxconfig/util/language_pack_context.js
+++ b/src/nginxconfig/util/language_pack_context.js
@ -1,37 +0,0 @@
-/*
-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 { fromSep } from './language_pack_name';
-
-// Use webpack magic to only build chunks for lang/index.js, not subdirectories (e.g. lang/templates/index.js)
-export const languagePackContext = require.context('../i18n', true, /^\.\/[^/]+\/index\.js$/, 'lazy');
-
-// Webpack magic to get all the packs that are available
-export const availablePacks = Object.freeze(languagePackContext
-    .keys()
-    .map(pack => pack.match(/^\.\/([^/]+)\/index\.js$/))
-    .filter(pack => pack !== null)
-    .map(pack => fromSep(pack[1], '-')));
--- a/src/nginxconfig/util/language_pack_default.js
+++ b/src/nginxconfig/util/language_pack_default.js
@ -1,30 +0,0 @@
-/*
-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 const defaultPack = 'en';
-
-export { default as defaultPackData } from '../i18n/en';
--- a/src/nginxconfig/util/language_pack_name.js
+++ b/src/nginxconfig/util/language_pack_name.js
@ -1,5 +1,5 @@
 /*
-Copyright 2020 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,6 +24,10 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

+export const defaultPack = 'en';
+
+export { default as defaultPackData } from '../i18n/en';
+
 export const toSep = (pack, sep) => pack
    .match(/^([a-z]+)([A-Z]*)$/)
    .slice(1)
@ -32,3 +36,16 @@ export const toSep = (pack, sep) => pack
    .join(sep);

 export const fromSep = (pack, sep) => pack.split(sep, 2)[0].toLowerCase() + (pack.split(sep, 2)[1] || '').toUpperCase();
+
+// Export a static array of all language packs
+export const availablePacks = Object.freeze([
+    'de',
+    'en',
+    'es',
+    'fr',
+    'pl',
+    'ptBR',
+    'ru',
+    'zhCN',
+    'zhTW',
+]);
--- a/vue.config.js
+++ b/vue.config.js
@ -1,5 +1,5 @@
 /*
-Copyright 2021 DigitalOcean
+Copyright 2022 DigitalOcean

 This code is licensed under the MIT License.
 You may obtain a copy of the License at
@ -24,12 +24,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */

-const path = require('path');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
-const WebpackRequireFrom = require('webpack-require-from');
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import DuplicatePackageCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
+import WebpackRequireFrom from 'webpack-require-from';
+import { URL, fileURLToPath } from 'url';

-module.exports = {
+export default {
    publicPath: './',
    outputDir: 'dist',
    filenameHashing: false, // Don't hash the output, so we can embed on the DigitalOcean Community
@ -43,10 +43,10 @@ module.exports = {
            // Fix dynamic imports from CDN (inject as first entry point before any imports can happen)
            { apply: compiler => {
                compiler.options.entry.app.import.unshift(
-                    path.join(__dirname, 'src', 'nginxconfig', 'build', 'webpack-dynamic-import.js'),
+                    fileURLToPath(new URL('src/nginxconfig/build/webpack-dynamic-import.js', import.meta.url)),
                );
            } },
-            new WebpackRequireFrom({ methodName: '__webpackDynamicImportURL' }),
+            new WebpackRequireFrom({ methodName: '__webpackDynamicImportURL', suppressErrors: true }),
            // Analyze the bundle
            new BundleAnalyzerPlugin({ analyzerMode: 'static', openAnalyzer: false }),
            new DuplicatePackageCheckerPlugin(),
@ -68,7 +68,7 @@ module.exports = {

        // Use a custom HTML template
        config.plugin('html').tap(options => {
-            options[0].template = path.join(__dirname, 'build', 'index.html');
+            options[0].template = fileURLToPath(new URL('build/index.html', import.meta.url));
            return options;
        });
    },