Upgrade to Vue 3 (digitalocean#331)

* Dependency updates * Upgrade to Vue 3 (WIP) * Fix reactivity of imported domains (the object gets replaced by a proxy) * Cleaner access of proxy for domain imports * Remove upgrade note about reactivity issue * Fix locale switching * Remove upgrade note about language issue * Patch Vue 3 issues with pretty-checkbox-vue * Remove upgrade note about checkbox issue * Fix extra slot for checkboxes and radios * Set checkmark as default for extra slot * Use patched pretty-checkbox-vue from do-vue * Fix removing domains * Switch to main do-vue/do-bulma
dkuspawono · Mar 21, 2022 · ebca910 · ebca910
1 parent 2899382
commit ebca910
Show file tree

Hide file tree

Showing 23 changed files with 1,993 additions and 5,561 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,8 +46,8 @@
   "dependencies": {
     "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",
+    "do-bulma": "github:do-community/do-bulma",
+    "do-vue": "github:do-community/do-vue",
     "escape-html": "^1.0.3",
     "files-diff": "0.0.6",
     "json-to-pretty-yaml": "^1.2.2",
@@ -56,32 +56,32 @@
     "prismjs": "^1.27.0",
     "qs": "^6.10.3",
     "simple-js-sha2-256": "^1.0.7",
-    "vue": "^2.6.14",
-    "vue-i18n": "^8.27.0",
-    "vue-select": "^3.16.0",
+    "vue": "^3.2.31",
+    "vue-i18n": "^9.1.9",
+    "vue-select": "^4.0.0-beta.2",
     "webpack-require-from": "^1.8.6"
   },
   "devDependencies": {
     "@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",
+    "@babel/runtime": "^7.17.2",
+    "@vue/cli-service": "^5.0.1",
     "ajv": "^8.10.0",
     "chalk": "^5.0.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.21.0",
+    "core-js": "^3.21.1",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
-    "eslint": "^8.8.0",
+    "eslint": "^8.9.0",
     "eslint-plugin-vue": "^8.4.1",
     "esm": "^3.2.25",
-    "jest": "^27.4.7",
+    "jest": "^27.5.1",
     "node-fetch": "^3.2.0",
     "postcss": "^8.4.6",
-    "sass": "^1.49.7",
-    "sass-loader": "^11.1.1",
-    "stylelint": "^14.3.0",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
+    "stylelint": "^14.5.1",
     "stylelint-config-standard-scss": "^3.0.0",
     "stylelint-order": "^5.0.0",
     "vue-template-compiler": "^2.6.14",

diff --git a/src/nginxconfig/i18n/setup.js b/src/nginxconfig/i18n/setup.js
@@ -24,12 +24,9 @@ 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 { createI18n } from 'vue-i18n';
 import { defaultPack, defaultPackData, toSep, availablePacks } from '../util/language_packs';
 
-Vue.use(VueI18n);
-
 // Load in the full default pack
 const i18nPacks = {};
 i18nPacks[defaultPack] = defaultPackData;
@@ -57,7 +54,7 @@ export const getI18n = async () => {
     }
 
     // Store and return the i18n instance with the loaded packs
-    i18n = new VueI18n({
+    i18n = createI18n({
         locale: defaultPack,
         fallbackLocale: defaultPack,
         messages: i18nPacks,
@@ -88,5 +85,5 @@ export const setLanguagePack = async pack => {
 
     // Load the pack if not already loaded, and set it as active
     await loadLanguagePack(pack);
-    i18n.locale = pack;
+    i18n.global.locale = pack;
 };
diff --git a/src/nginxconfig/mount.js b/src/nginxconfig/mount.js
@@ -26,16 +26,14 @@ THE SOFTWARE.
 
 // Load in the app
 import './scss/style.scss';
-import Vue from 'vue';
+import { createApp } from 'vue';
 import './util/prism_bundle';
 import { getI18n } from './i18n/setup';
 import App from './templates/app';
 
 // Load the i18n languages and run the app
 getI18n().then(i18n => {
-    new Vue({
-        i18n,
-        render: h => h(App),
-    }).$mount('#app');
+    const app = createApp(App);
+    app.use(i18n);
+    app.mount('#app');
 });
-
diff --git a/src/nginxconfig/templates/app.vue b/src/nginxconfig/templates/app.vue
@@ -79,14 +79,13 @@ THE SOFTWARE.
                         </ul>
                     </div>
 
-                    <template v-for="data in activeDomains">
-                        <Domain
-                            :key="data[1]"
-                            :ref="`domain-${data[1]}`"
-                            :data="data[0]"
-                            :style="{ display: data[1] === active ? undefined : 'none' }"
-                        ></Domain>
-                    </template>
+                    <Domain
+                        v-for="data in activeDomains"
+                        :key="data[1]"
+                        :ref="`domain-${data[1]}`"
+                        :data="data[0]"
+                        :style="{ display: data[1] === active ? undefined : 'none' }"
+                    ></Domain>
 
                     <h2>{{ $t('templates.app.globalConfig') }}</h2>
                     <Global :data="global"></Global>
@@ -100,16 +99,15 @@ THE SOFTWARE.
                 <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-touch`">
                     <h2>{{ $t('templates.app.configFiles') }}</h2>
                     <div ref="files" class="columns is-multiline files">
-                        <template v-for="confContents in confFilesOutput">
-                            <component
-                                :is="getPrismComponent(confContents[0])"
-                                :key="confContents[2]"
-                                :name="confContents[0]"
-                                :conf="confContents[1]"
-                                :half="Object.keys(confFilesOutput).length > 1 && !splitColumn"
-                                @copied="codeCopiedEvent(confContents[3])"
-                            ></component>
-                        </template>
+                        <component
+                            v-for="confContents in confFilesOutput"
+                            :is="getPrismComponent(confContents[0])"
+                            :key="confContents[2]"
+                            :name="confContents[0]"
+                            :conf="confContents[1]"
+                            :half="Object.keys(confFilesOutput).length > 1 && !splitColumn"
+                            @copied="codeCopiedEvent(confContents[3])"
+                        ></component>
                     </div>
                 </div>
             </div>
@@ -317,7 +315,7 @@ THE SOFTWARE.
             },
             remove(index) {
                 const name = this.$data.domains[index].server.domain.computed;
-                this.$set(this.$data.domains, index, null);
+                this.$data.domains[index] = null;
                 if (this.$data.active === index) this.$data.active = this.$data.domains.findIndex(d => d !== null);
 
                 // Analytics

diff --git a/src/nginxconfig/templates/domain_sections/https.vue b/src/nginxconfig/templates/domain_sections/https.vue
@@ -35,7 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${httpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="https" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.https.enableEncryptedSslConnection') }}
                             </PrettyCheck>
                         </div>
@@ -53,7 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${http2Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http2" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.https.enableHttp2Connections') }}
                             </PrettyCheck>
                         </div>
@@ -71,7 +69,6 @@ THE SOFTWARE.
                     <div :class="`control${http3Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http3" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.https.enableHttp3Connections') }}
                             </PrettyCheck>
                         </div>
@@ -107,7 +104,6 @@ THE SOFTWARE.
                     <div :class="`control${forceHttpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="forceHttps" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 (http://{{ $parent.$props.data.server.domain.computed }}
                                 <i class="fas fa-long-arrow-alt-right"></i>
                                 https://{{ $parent.$props.data.server.domain.computed }})
@@ -127,7 +123,6 @@ THE SOFTWARE.
                     <div :class="`control${hstsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hsts" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.https.enableStrictTransportSecurity') }}
                             </PrettyCheck>
                         </div>
@@ -136,7 +131,6 @@ THE SOFTWARE.
                     <div v-if="hstsSubdomainsEnabled" :class="`control${hstsSubdomainsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hstsSubdomains" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.https.enableIncludeSubDomains') }}
                             </PrettyCheck>
                         </div>
@@ -145,7 +139,6 @@ THE SOFTWARE.
                     <div v-if="hstsPreloadEnabled" :class="`control${hstsPreloadChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="hstsPreload" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.https.enablePreload') }}
                             </PrettyCheck>
                         </div>
@@ -166,7 +159,6 @@ THE SOFTWARE.
                     >
                         <div class="radio">
                             <PrettyRadio v-model="certType" :value="value" class="p-default p-round p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t(name) }}
                             </PrettyRadio>
                         </div>
@@ -232,11 +224,11 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
-    import PrettyRadio from 'pretty-checkbox-vue/radio';
     import ExternalLink from 'do-vue/src/templates/external_link';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
+    import PrettyRadio from '../inputs/radio';
 
     const defaults = {
         https: {

diff --git a/src/nginxconfig/templates/domain_sections/logging.vue b/src/nginxconfig/templates/domain_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
@@ -35,7 +35,6 @@ THE SOFTWARE.
                     <div :class="`control${accessLogChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="accessLog" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                             </PrettyCheck>
                         </div>
@@ -53,7 +52,6 @@ THE SOFTWARE.
                     <div :class="`control${errorLogChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="errorLog" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.logging.enableForThisDomain') }}
                             </PrettyCheck>
                         </div>
@@ -65,9 +63,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         accessLog: {

diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
@@ -56,7 +56,6 @@ THE SOFTWARE.
                     <div :class="`control${phpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="php" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.php.enablePhp') }}
                             </PrettyCheck>
                         </div>
@@ -126,7 +125,6 @@ THE SOFTWARE.
                     <div :class="`control${wordPressRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="wordPressRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.php.enableWordPressRules') }}
                             </PrettyCheck>
                         </div>
@@ -144,7 +142,6 @@ THE SOFTWARE.
                     <div :class="`control${drupalRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="drupalRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.php.enableDrupalRules') }}
                             </PrettyCheck>
                         </div>
@@ -162,7 +159,6 @@ THE SOFTWARE.
                     <div :class="`control${magentoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="magentoRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.php.enableMagentoRules') }}
                             </PrettyCheck>
                         </div>
@@ -180,7 +176,6 @@ THE SOFTWARE.
                     <div :class="`control${joomlaRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="joomlaRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.php.enableJoomlaRules') }}
                             </PrettyCheck>
                         </div>
@@ -192,10 +187,10 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import VueSelect from 'vue-select';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     // Value -> i18n key
     const serverOptions = {

diff --git a/src/nginxconfig/templates/domain_sections/python.vue b/src/nginxconfig/templates/domain_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
@@ -56,7 +56,6 @@ THE SOFTWARE.
                     <div :class="`control${pythonChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="python" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.python.enablePython') }}
                             </PrettyCheck>
                         </div>
@@ -74,7 +73,6 @@ THE SOFTWARE.
                     <div :class="`control${djangoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="djangoRules" class="p-default p-curve p-fill p-icon">
-                                <i slot="extra" class="icon fas fa-check"></i>
                                 {{ $t('templates.domainSections.python.enableDjangoRules') }}
                             </PrettyCheck>
                         </div>
@@ -86,9 +84,9 @@ THE SOFTWARE.
 </template>
 
 <script>
-    import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import PrettyCheck from '../inputs/checkbox';
 
     const defaults = {
         python: {