Removing asyncData references and unused hot module reload code

rancher · Apr 29, 2024 · 3cdf3ec · 3cdf3ec
1 parent 7d282bf
commit 3cdf3ec
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 182 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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) => {