From af097dc011942160aeceab8dd42d260eded9ef42 Mon Sep 17 00:00:00 2001 From: Cody Jackson Date: Wed, 28 Feb 2024 17:16:34 -0700 Subject: [PATCH] Removed the usage of Vue.util.defineReactive - Saw that the Nuxt component wasn't needed any longer so I removed it instead of trying to work around Vue.util.defineReactive --- shell/components/nuxt/nuxt.js | 101 ---------------------------------- shell/initialize/App.js | 9 +-- shell/initialize/index.js | 13 ----- shell/mixins/fetch.client.js | 33 +++++++---- 4 files changed, 24 insertions(+), 132 deletions(-) delete mode 100644 shell/components/nuxt/nuxt.js diff --git a/shell/components/nuxt/nuxt.js b/shell/components/nuxt/nuxt.js deleted file mode 100644 index 2893752badf..00000000000 --- a/shell/components/nuxt/nuxt.js +++ /dev/null @@ -1,101 +0,0 @@ -import Vue from 'vue' -import { compile } from '../../utils/nuxt' - -import NuxtError from '../../components/templates/error.vue' - -import NuxtChild from './nuxt-child' - -export default { - name: 'Nuxt', - components: { - NuxtChild, - NuxtError - }, - props: { - nuxtChildKey: { - type: String, - default: undefined - }, - keepAlive: Boolean, - keepAliveProps: { - type: Object, - default: undefined - }, - name: { - type: String, - default: 'default' - } - }, - errorCaptured (error) { - // if we receive and error while showing the NuxtError component - // capture the error and force an immediate update so we re-render - // without the NuxtError component - if (this.displayingNuxtError) { - this.errorFromNuxtError = error - this.$forceUpdate() - } - }, - computed: { - routerViewKey () { - // If nuxtChildKey prop is given or current route has children - if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) { - return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params) - } - - const [matchedRoute] = this.$route.matched - - if (!matchedRoute) { - return this.$route.path - } - - const Component = matchedRoute.components.default - - if (Component && Component.options) { - const { options } = Component - - if (options.key) { - return (typeof options.key === 'function' ? options.key(this.$route) : options.key) - } - } - - const strict = /\/$/.test(matchedRoute.path) - return strict ? this.$route.path : this.$route.path.replace(/\/$/, '') - } - }, - beforeCreate () { - Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt) - }, - render (h) { - // if there is no error - if (!this.nuxt.err) { - // Directly return nuxt child - return h('NuxtChild', { - key: this.routerViewKey, - props: this.$props - }) - } - - // if an error occurred within NuxtError show a simple - // error message instead to prevent looping - if (this.errorFromNuxtError) { - this.$nextTick(() => (this.errorFromNuxtError = false)) - - return h('div', {}, [ - h('h2', 'An error occurred while showing the error page'), - h('p', 'Unfortunately an error occurred and while showing the error page another error occurred'), - h('p', `Error details: ${this.errorFromNuxtError.toString()}`), - h('nuxt-link', { props: { to: '/' } }, 'Go back to home') - ]) - } - - // track if we are showing the NuxtError component - this.displayingNuxtError = true - this.$nextTick(() => (this.displayingNuxtError = false)) - - return h(NuxtError, { - props: { - error: this.nuxt.err - } - }) - } -} diff --git a/shell/initialize/App.js b/shell/initialize/App.js index dabed0190d2..5eae21de01c 100644 --- a/shell/initialize/App.js +++ b/shell/initialize/App.js @@ -32,9 +32,6 @@ export default { showErrorPage: false, }), - beforeCreate() { - Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt); - }, created() { // add to window so we can listen when ready window.$globalApp = this; @@ -52,7 +49,7 @@ export default { window.addEventListener('offline', this.refreshOnlineStatus); // Add $nuxt.error() - this.error = this.nuxt.error; + this.error = this.$options.nuxt.error; // Add $nuxt.context this.context = this.$options.context; }, @@ -129,10 +126,10 @@ export default { this.$loading.finish(); }, errorChanged() { - if (this.nuxt.err) { + if (this.$options.nuxt.err) { if (this.$loading) { if (this.$loading.fail) { - this.$loading.fail(this.nuxt.err); + this.$loading.fail(this.$options.nuxt.err); } if (this.$loading.finish) { this.$loading.finish(); diff --git a/shell/initialize/index.js b/shell/initialize/index.js index 1b28946d1e0..4108e0c7e11 100644 --- a/shell/initialize/index.js +++ b/shell/initialize/index.js @@ -4,7 +4,6 @@ import Vue from 'vue'; import { createRouter } from '../config/router.js'; import NuxtChild from '../components/nuxt/nuxt-child.js'; -import Nuxt from '../components/nuxt/nuxt.js'; import App from './App.js'; import { setContext, getLocation, getRouteData, normalizeError } from '../utils/nuxt'; import { createStore } from '../config/store.js'; @@ -68,18 +67,6 @@ loadDirectives(); Vue.component(NuxtChild.name, NuxtChild); Vue.component('NChild', NuxtChild); -// Component NuxtLink is imported in server.js or client.js - -// Component: -Vue.component(Nuxt.name, Nuxt); - -Object.defineProperty(Vue.prototype, '$nuxt', { - get() { - return window.$globalApp; - }, - configurable: true -}); - async function createApp(config = {}) { const router = await createRouter(config); diff --git a/shell/mixins/fetch.client.js b/shell/mixins/fetch.client.js index 030613a151d..febb4349dd9 100644 --- a/shell/mixins/fetch.client.js +++ b/shell/mixins/fetch.client.js @@ -1,4 +1,3 @@ -import Vue from 'vue'; import { hasFetch, normalizeError, addLifecycleHook } from '../utils/nuxt'; export default { @@ -9,14 +8,24 @@ export default { this._fetchDelay = typeof this.$options.fetchDelay === 'number' ? this.$options.fetchDelay : 200; - Vue.util.defineReactive(this, '$fetchState', { - pending: false, - error: null, - timestamp: Date.now() - }); - this.$fetch = $fetch.bind(this); addLifecycleHook(this, 'beforeMount', beforeMount); + }, + + data() { + return { + state: { + pending: false, + error: null, + timestamp: Date.now() + } + }; + }, + + computed: { + $fetchState() { + return this.state; + } } }; @@ -38,8 +47,8 @@ function $fetch() { } async function $_fetch() { // eslint-disable-line camelcase - this.$fetchState.pending = true; - this.$fetchState.error = null; + this.state.pending = true; + this.state.error = null; this._hydrated = false; let error = null; const startTime = Date.now(); @@ -59,7 +68,7 @@ async function $_fetch() { // eslint-disable-line camelcase await new Promise((resolve) => setTimeout(resolve, delayLeft)); } - this.$fetchState.error = error; - this.$fetchState.pending = false; - this.$fetchState.timestamp = Date.now(); + this.state.error = error; + this.state.pending = false; + this.state.timestamp = Date.now(); }