Dependency updates (#373)

* Bump Node.js to 16.16.0

* Minor version dependency updates

* Major version dependency updates

* Resolve dependency vulnerability

.eslintrc.cjs

@@ -29,6 +29,7 @@ module.exports = {
     'vue/no-unused-vars': 0,
     'vue/html-self-closing': 0,
     'vue/multi-word-component-names': 0,
+    'vue/no-reserved-component-names': 0,
   },
   globals: {
     'describe': true,

.nvmrc

@@ -1 +1 @@
-v16.13.2
+v16.16.0

package.json

@@ -5,8 +5,8 @@
   "private": true,
   "license": "MIT",
   "engines": {
-    "node": "16.13.2",
+    "node": "^16.16.0",
-    "npm": "8.4.1"
+    "npm": "^8.11.0"
   },
   "main": "src/nginxconfig/mount.js",
   "type": "module",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/digitalocean/nginxconfig.io#readme",
   "dependencies": {
-    "clipboard": "^2.0.10",
+    "clipboard": "^2.0.11",
     "clone": "^2.1.2",
     "do-bulma": "github:do-community/do-bulma",
     "do-vue": "github:do-community/do-vue",
@@ -53,42 +53,48 @@
     "json-to-pretty-yaml": "^1.2.2",
     "memory-tar-create": "0.0.3",
     "pretty-checkbox-vue": "^1.1.9",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.28.0",
-    "qs": "^6.10.3",
+    "qs": "^6.11.0",
     "simple-js-sha2-256": "^1.0.7",
-    "vue": "^3.2.31",
+    "vue": "^3.2.37",
-    "vue-i18n": "^9.1.9",
+    "vue-i18n": "^9.1.10",
-    "vue-select": "^4.0.0-beta.2",
+    "vue-select": "^4.0.0-beta.3",
     "webpack-require-from": "^1.8.6"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.17.0",
+    "@babel/eslint-parser": "^7.18.2",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/plugin-transform-runtime": "^7.18.6",
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.18.6",
-    "@babel/runtime": "^7.17.2",
+    "@babel/runtime": "^7.18.6",
-    "@vue/cli-service": "^5.0.1",
+    "@vue/cli-service": "^5.0.8",
-    "ajv": "^8.10.0",
+    "ajv": "^8.11.0",
-    "chalk": "^5.0.0",
+    "chalk": "^5.0.1",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.21.1",
+    "core-js": "^3.23.4",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^8.9.0",
+    "eslint": "^8.19.0",
-    "eslint-plugin-vue": "^8.4.1",
+    "eslint-plugin-vue": "^9.2.0",
     "esm": "^3.2.25",
-    "jest": "^27.5.1",
+    "jest": "^28.1.2",
-    "node-fetch": "^3.2.0",
+    "jest-environment-jsdom": "^28.1.2",
-    "postcss": "^8.4.6",
+    "node-fetch": "^3.2.6",
-    "sass": "^1.49.8",
+    "postcss": "^8.4.14",
-    "sass-loader": "^12.6.0",
+    "sass": "^1.53.0",
-    "stylelint": "^14.5.1",
+    "sass-loader": "^13.0.2",
-    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard-scss": "^4.0.0",
     "stylelint-order": "^5.0.0",
-    "vue-template-compiler": "^2.6.14",
+    "vue-template-compiler": "^2.7.4",
-    "webpack": "^5.69.1",
+    "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "overrides": {
+    "@vue/cli-service": {
       "mini-css-extract-plugin": "^1.6.2"
+    },
+    "pretty-checkbox-vue": {
+      "vue": "$vue"
+    }
   }
 }

src/nginxconfig/templates/app.vue

@@ -100,8 +100,8 @@ THE SOFTWARE.
                     <h2>{{ $t('templates.app.configFiles') }}</h2>
                     <div ref="files" class="columns is-multiline files">
                         <component
-                            v-for="confContents in confFilesOutput"
                             :is="getPrismComponent(confContents[0])"
+                            v-for="confContents in confFilesOutput"
                             :key="confContents[2]"
                             :name="confContents[0]"
                             :conf="confContents[1]"
@@ -119,6 +119,7 @@ THE SOFTWARE.
 </template>
 
 <script>
+    import { defineAsyncComponent } from 'vue';
     import clone from 'clone';
     import sha2_256 from 'simple-js-sha2-256';
     import escape from 'escape-html';
@@ -158,8 +159,8 @@ THE SOFTWARE.
             ContributeCallout,
             Setup,
             NginxPrism,
-            YamlPrism: () => import('./prism/yaml'),
+            YamlPrism: defineAsyncComponent(() => import('./prism/yaml')),
-            DockerPrism: () => import('./prism/docker'),
+            DockerPrism: defineAsyncComponent(() => import('./prism/docker')),
         },
         data() {
             return {