diff --git a/shell/components/ResourceList/index.vue b/shell/components/ResourceList/index.vue index 18217979b48..b3078a962ea 100644 --- a/shell/components/ResourceList/index.vue +++ b/shell/components/ResourceList/index.vue @@ -45,7 +45,7 @@ export default { const schema = this.schema; if ( this.hasListComponent ) { - // If you provide your own list then call its asyncData + // If you provide your own list then call its fetch const importer = this.listComponent; const component = (await importer())?.default; diff --git a/shell/initialize/App.js b/shell/initialize/App.js index c261bea0be5..0d38145e290 100644 --- a/shell/initialize/App.js +++ b/shell/initialize/App.js @@ -1,7 +1,4 @@ // Taken from @nuxt/vue-app/template/App.js - -import Vue from 'vue'; - import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, sanitizeComponent } from '../utils/nuxt'; @@ -106,17 +103,6 @@ export default { } } - if (page.$options.asyncData) { - p.push( - promisify(page.$options.asyncData, this.context) - .then((newData) => { - for (const key in newData) { - Vue.set(page.$data, key, newData[key]); - } - }) - ); - } - return Promise.all(p); }); diff --git a/shell/initialize/client.js b/shell/initialize/client.js index 7a5171d4d27..6f8e50405d4 100644 --- a/shell/initialize/client.js +++ b/shell/initialize/client.js @@ -4,8 +4,6 @@ import Vue from 'vue'; import fetch from 'unfetch'; import middleware from '../config/middleware.js'; import { - applyAsyncData, - promisify, middlewareSeries, sanitizeComponent, resolveRouteComponents, @@ -274,7 +272,6 @@ async function render(to, from, next) { // Update ._data and other properties if hot reloaded Components.forEach((Component) => { if (Component._Ctor && Component._Ctor.options) { - Component.options.asyncData = Component._Ctor.options.asyncData; Component.options.fetch = Component._Ctor.options.fetch; } }); @@ -332,14 +329,14 @@ async function render(to, from, next) { let instances; - // Call asyncData & fetch hooks on components matched by the route. + // Call fetch hooks on components matched by the route. await Promise.all(Components.map((Component, i) => { // Check if only children route changed Component._path = compile(to.matched[matches[i]].path)(to.params); Component._dataRefresh = false; const childPathChanged = Component._path !== _lastPaths[i]; - // Refresh component (call asyncData & fetch) when: + // Refresh component (call fetch) when: // Route path changed part includes current component // Or route param changed part includes current component and watchParam is not `false` // Or route query is changed and watchQuery returns `true` @@ -369,28 +366,9 @@ async function render(to, from, next) { const promises = []; - const hasAsyncData = ( - Component.options.asyncData && - typeof Component.options.asyncData === 'function' - ); - const hasFetch = Boolean(Component.options.fetch) && Component.options.fetch.length; - const loadingIncrease = (hasAsyncData && hasFetch) ? 30 : 45; - - // Call asyncData(context) - if (hasAsyncData) { - const promise = promisify(Component.options.asyncData, app.context); - - promise.then((asyncDataResult) => { - applyAsyncData(Component, asyncDataResult); - - if (this.$loading.increase) { - this.$loading.increase(loadingIncrease); - } - }); - promises.push(promise); - } + const loadingIncrease = hasFetch ? 30 : 45; // Check disabled page loading this.$loading.manual = Component.options.loading === false; @@ -485,11 +463,6 @@ function fixPrepatch(to, ___) { }); checkForErrors(this); - - // Hot reloading - if (isDev) { - setTimeout(() => hotReloadAPI(this), 100); - } }); } @@ -505,108 +478,6 @@ function nuxtReady(_app) { } } -const noopData = () => { - return {}; -}; -const noopFetch = () => {}; - -// Special hot reload with asyncData(context) -function getNuxtChildComponents($parent, $components = []) { - $parent.$children.forEach(($child) => { - if ($child.$vnode && $child.$vnode.data.nuxtChild && !$components.find((c) => (c.$options.__file === $child.$options.__file))) { - $components.push($child); - } - if ($child.$children && $child.$children.length) { - getNuxtChildComponents($child, $components); - } - }); - - return $components; -} - -function hotReloadAPI(_app) { - if (!module.hot) { - return; - } - - const $components = getNuxtChildComponents(window.$globalApp, []); - - $components.forEach(addHotReload.bind(_app)); -} - -function addHotReload($component, depth) { - if ($component.$vnode.data._hasHotReload) { - return; - } - $component.$vnode.data._hasHotReload = true; - - const _forceUpdate = $component.$forceUpdate.bind($component.$parent); - - $component.$vnode.context.$forceUpdate = async() => { - const Components = getMatchedComponents(router.currentRoute); - let Component = Components[depth]; - - if (!Component) { - return _forceUpdate(); - } - if (typeof Component === 'object' && !Component.options) { - // Updated via vue-router resolveAsyncComponents() - Component = Vue.extend(Component); - Component._Ctor = Component; - } - this.error(); - const promises = []; - const next = function(path) { - this.$loading.finish && this.$loading.finish(); - router.push(path); - }; - - await setContext(app, { - route: router.currentRoute, - isHMR: true, - next: next.bind(this) - }); - const context = app.context; - - if (this.$loading.start && !this.$loading.manual) { - this.$loading.start(); - } - - callMiddleware.call(this, Components, context) - .then(() => { - return callMiddleware.call(this, Components, context); - }) - - .then(() => { - // Call asyncData(context) - const pAsyncData = promisify(Component.options.asyncData || noopData, context); - - pAsyncData.then((asyncDataResult) => { - applyAsyncData(Component, asyncDataResult); - this.$loading.increase && this.$loading.increase(30); - }); - promises.push(pAsyncData); - - // Call fetch() - Component.options.fetch = Component.options.fetch || noopFetch; - let pFetch = Component.options.fetch.length && Component.options.fetch(context); - - if (!pFetch || (!(pFetch instanceof Promise) && (typeof pFetch.then !== 'function'))) { - pFetch = Promise.resolve(pFetch); - } - pFetch.then(() => this.$loading.increase && this.$loading.increase(30)); - promises.push(pFetch); - - return Promise.all(promises); - }) - .then(() => { - this.$loading.finish && this.$loading.finish(); - _forceUpdate(); - setTimeout(() => hotReloadAPI(this), 100); - }); - }; -} - async function mountApp(__app) { // Set global variables app = __app.app; @@ -628,11 +499,6 @@ async function mountApp(__app) { Vue.nextTick(() => { // Call window.{{globals.readyCallback}} callbacks nuxtReady(_app); - - if (isDev) { - // Enable hot reloading - hotReloadAPI(_app); - } }); }; diff --git a/shell/pages/c/_cluster/auth/config/index.vue b/shell/pages/c/_cluster/auth/config/index.vue index d443baafd7b..20933078381 100644 --- a/shell/pages/c/_cluster/auth/config/index.vue +++ b/shell/pages/c/_cluster/auth/config/index.vue @@ -37,7 +37,7 @@ export default { hasListComponent, hasEditComponent, - // Provided by asyncData later + // Provided by fetch later enabled: false, nonLocal: null, }; diff --git a/shell/utils/nuxt.js b/shell/utils/nuxt.js index 3f6e8f639a8..12d2ce3d150 100644 --- a/shell/utils/nuxt.js +++ b/shell/utils/nuxt.js @@ -72,34 +72,6 @@ export function getChildrenComponentInstancesUsingFetch(vm, instances = []) { return instances; } -export function applyAsyncData(Component, asyncData) { - if ( - // For SSR, we once all this function without second param to just apply asyncData - // Prevent doing this for each SSR request - !asyncData && Component.options.__hasNuxtData - ) { - return; - } - - const ComponentData = Component.options._originDataFn || Component.options.data || function() { - return {}; - }; - - Component.options._originDataFn = ComponentData; - - Component.options.data = function() { - const data = ComponentData.call(this, this); - - return { ...data, ...asyncData }; - }; - - Component.options.__hasNuxtData = true; - - if (Component._Ctor && Component._Ctor.options) { - Component._Ctor.options.data = Component.options.data; - } -} - export function sanitizeComponent(Component) { // If Component already sanitized if (Component.options && Component._Ctor === Component) { @@ -297,7 +269,7 @@ export function promisify(fn, context) { let promise; if (fn.length === 2) { - console.warn('Callback-based asyncData, fetch or middleware calls are deprecated. Please switch to promises or async/await syntax'); // eslint-disable-line no-console + console.warn('Callback-based fetch or middleware calls are deprecated. Please switch to promises or async/await syntax'); // eslint-disable-line no-console // fn(context, callback) promise = new Promise((resolve) => {