7x31
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Upgrade to Vue 3 (WIP)

This commit is contained in:
MattIPv4 2022-02-18 20:32:33 +00:00
parent eb3ce57789
commit 0f0d7c36b0
22 changed files with 623 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

741
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -47,7 +47,7 @@
"clipboard": "^2.0.10",
"clone": "^2.1.2",
"do-bulma": "github:do-community/do-bulma",
"do-vue": "github:do-community/do-vue",
"do-vue": "github:do-community/do-vue#MattIPv4/vue-3",
"escape-html": "^1.0.3",
"files-diff": "0.0.6",
"json-to-pretty-yaml": "^1.2.2",
@ -56,9 +56,9 @@
"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.18.1",
"vue": "^3.2.31",
"vue-i18n": "^9.1.9",
"vue-select": "^4.0.0-beta.2",
"webpack-require-from": "^1.8.6"
},
"devDependencies": {

7
src/nginxconfig/i18n/setup.js
View File

@ -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,

19
src/nginxconfig/mount.js
View File

@ -26,16 +26,25 @@ 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');
});
/*
Vue 3 upgrade notes:
- pretty-checkbox-vue is not compatible with Vue 3, find alternate solution for templates/inputs/(checkbox|radio).vue
- Selecting a different language is not updating strings anywhere
- Adding a second domain and reloading the page half loads the second domain settings
(tab + dupe warning show correct, but input shows incorrect and the dupe warning is showing)
*/

34
src/nginxconfig/templates/app.vue
View File

@ -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>

4
src/nginxconfig/templates/domain_sections/https.vue
View File

@ -232,11 +232,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: {

4
src/nginxconfig/templates/domain_sections/logging.vue
View File

@ -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
@ -65,9 +65,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: {

2
src/nginxconfig/templates/domain_sections/php.vue
View File

@ -192,10 +192,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 = {

4
src/nginxconfig/templates/domain_sections/python.vue
View File

@ -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
@ -86,9 +86,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: {

2
src/nginxconfig/templates/domain_sections/restrict.vue
View File

@ -208,9 +208,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 = {
getMethod: {

2
src/nginxconfig/templates/domain_sections/reverse_proxy.vue
View File

@ -104,9 +104,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 = {
reverseProxy: {

4
src/nginxconfig/templates/domain_sections/routing.vue
View File

@ -130,10 +130,10 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';
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 = {
root: {

4
src/nginxconfig/templates/domain_sections/server.vue
View File

@ -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
@ -148,9 +148,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 = {
domain: {

4
src/nginxconfig/templates/global_sections/docker.vue
View File

@ -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
@ -81,10 +81,10 @@ 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 analytics from '../../util/analytics';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
dockerfile: {

4
src/nginxconfig/templates/global_sections/https.vue
View File

@ -242,11 +242,11 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import PrettyRadio from 'pretty-checkbox-vue/radio';
import clone from 'clone';
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 ipType = {
default: 'ipv4',

2
src/nginxconfig/templates/global_sections/logging.vue
View File

@ -165,9 +165,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: {

2
src/nginxconfig/templates/global_sections/performance.vue
View File

@ -150,10 +150,10 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
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';
const defaults = {
gzipCompression: {

2
src/nginxconfig/templates/global_sections/reverse_proxy.vue
View File

@ -144,9 +144,9 @@ THE SOFTWARE.
</template>
<script>
import PrettyRadio from 'pretty-checkbox-vue/radio';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import PrettyRadio from '../inputs/radio';
const defaults = {
proxyConnectTimeout: {

2
src/nginxconfig/templates/global_sections/security.vue
View File

@ -162,10 +162,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';
const defaults = {
referrerPolicy: {

2
src/nginxconfig/templates/global_sections/tools.vue
View File

@ -146,12 +146,12 @@ THE SOFTWARE.
</template>
<script>
import PrettyCheck from 'pretty-checkbox-vue/check';
import Modal from 'do-vue/src/templates/modal';
import delegatedFromDefaults from '../../util/delegated_from_defaults';
import computedFromDefaults from '../../util/computed_from_defaults';
import shareQuery from '../../util/share_query';
import analytics from '../../util/analytics';
import PrettyCheck from '../inputs/checkbox';
const defaults = {
modularizedStructure: {

8
src/nginxconfig/templates/inputs/checkbox.vue Normal file
View File

@ -0,0 +1,8 @@
<script>
// import PrettyCheckbox from 'pretty-checkbox-vue/check';
// export default PrettyCheckbox;
// TODO: pretty-checkbox-vue is not compatible with Vue 3
export default {};
</script>

8
src/nginxconfig/templates/inputs/radio.vue Normal file
View File

@ -0,0 +1,8 @@
<script>
// import PrettyRadio from 'pretty-checkbox-vue/radio';
// export default PrettyRadio;
// TODO: pretty-checkbox-vue is not compatible with Vue 3
export default {};
</script>