Clean up entry logic for vue.config (rancher#11048)

* Cleanup entry for vue configuration Rename reserved function terms Correct extendApp initialization by passing Vue attribute Avoid reserved name Vue Set more unique and meaningful file names Remove deprecated code added with rebase Add vue instance to mountApp Add comments and references to TODO issue Restore function declaration over binding issue Rename apps and correct issue with the render Rebase residual cleanup Remove unnecessary env var related to Nuxt Remove deprecated confit assignment Revert render function refactoring * Fix Dashboard version issue
aalves08 · May 29, 2024 · 43ef5fc · 43ef5fc
1 parent c3cbd73
commit 43ef5fc
Show file tree

Hide file tree

Showing 13 changed files with 293 additions and 195 deletions.
diff --git a/shell/components/__tests__/TabTitle.test.ts b/shell/components/__tests__/TabTitle.test.ts
@@ -30,7 +30,7 @@ describe('component: TabTitle', () => {
     return mocks;
   }
 
-  function createStore(mocks: any) {
+  function mockStore(mocks: any) {
     return new Vuex.Store({
       getters: {
         isExplorer() {
@@ -53,7 +53,7 @@ describe('component: TabTitle', () => {
     const mocks = createMocks();
 
     mocks.isExplorer = true;
-    const store = createStore(mocks);
+    const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
       slots: { default: mocks.child }, store, localVue
@@ -66,7 +66,7 @@ describe('component: TabTitle', () => {
     const mocks = createMocks();
 
     mocks.currentCluster.isHarvester = true;
-    const store = createStore(mocks);
+    const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
       slots: { default: mocks.child }, store, localVue
@@ -80,7 +80,7 @@ describe('component: TabTitle', () => {
 
     mocks.currentCluster = null;
     mocks.withFallback = 'product';
-    const store = createStore(mocks);
+    const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
       slots: { default: mocks.child }, store, localVue
@@ -91,7 +91,7 @@ describe('component: TabTitle', () => {
 
   it('should call console error when not passed a string as a child', () => {
     const mocks = createMocks();
-    const store = createStore(mocks);
+    const store = mockStore(mocks);
 
     global.console = { error: jest.fn() };
 
@@ -104,7 +104,7 @@ describe('component: TabTitle', () => {
 
   it('should only show child', () => {
     const mocks = createMocks();
-    const store = createStore(mocks);
+    const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
       slots: { default: mocks.child }, propsData: { breadcrumb: false }, store, localVue
@@ -118,7 +118,7 @@ describe('component: TabTitle', () => {
 
     mocks.isExplorer = true;
 
-    const store = createStore(mocks);
+    const store = mockStore(mocks);
 
     shallowMount(TabTitle, {
       slots: { default: mocks.child }, propsData: { includeVendor: false }, store, localVue

diff --git a/shell/config/router/index.js b/shell/config/router/index.js
@@ -12,7 +12,7 @@ export const routerOptions = {
   fallback: false
 };
 
-export function createRouter(config) {
+export function extendRouter(config) {
   const base = (config._app && config._app.basePath) || routerOptions.base;
   const router = new Router({ ...routerOptions, base });
 

diff --git a/shell/config/store.js b/shell/config/store.js
@@ -75,8 +75,8 @@ let store = {};
   }
 })();
 
-// createStore
-export const createStore = store instanceof Function ? store : () => {
+// extendStore
+export const extendStore = store instanceof Function ? store : () => {
   return new Vuex.Store(Object.assign({ strict: (process.env.NODE_ENV !== 'production') }, store));
 };
 

diff --git a/shell/core/plugins.js b/shell/core/plugins.js
@@ -7,7 +7,7 @@ import { ExtensionPoint } from './types';
 
 const MODEL_TYPE = 'models';
 
-export default function(context, inject, Vue) {
+export default function(context, inject, vueApp) {
   const {
     app, store, $axios, redirect
   } = context;
@@ -407,6 +407,6 @@ export default function(context, inject, Vue) {
       },
     },
     context,
-    Vue
+    vueApp
   );
 }
diff --git a/shell/directives/index.js b/shell/directives/index.js
diff --git a/shell/initialize/index.js → shell/initialize/app-extended.js b/shell/initialize/index.js → shell/initialize/app-extended.js
@@ -1,49 +1,23 @@
 // Taken from @nuxt/vue-app/template/index.js
 // This file was generated during Nuxt migration
-
-import Vue from 'vue';
-import { createRouter } from '@shell/config/router';
-import NuxtChild from '@shell/components/nuxt/nuxt-child';
-import App from '@shell/initialize/App';
+import AppView from '@shell/initialize/App';
 import { setContext, getLocation, getRouteData, normalizeError } from '@shell/utils/nuxt';
-import { createStore } from '@shell/config/store';
+import { extendRouter } from '@shell/config/router';
+import { extendStore } from '@shell/config/store';
 import { UPGRADED, _FLAGGED, _UNFLAG } from '@shell/config/query-params';
-import { loadDirectives } from '@shell/directives/index';
-import { installPlugins } from '@shell/initialize/plugins';
-
-// Prevent extensions from overriding existing directives
-// Hook into Vue.directive and keep track of the directive names that have been added
-// and prevent an existing directive from being overwritten
-const directiveNames = {};
-const vueDirective = Vue.directive;
-
-Vue.directive = function(name) {
-  if (directiveNames[name]) {
-    console.log(`Can not override directive: ${ name }`); // eslint-disable-line no-console
-
-    return;
-  }
-
-  directiveNames[name] = true;
-
-  vueDirective.apply(Vue, arguments);
-};
-
-// Load the directives from the plugins - we do this with a function so we know
-// these are initialized here, after the code above which keeps track of them and
-// prevents over-writes
-loadDirectives(Vue);
-
-// Component: <NuxtChild>
-Vue.component(NuxtChild.name, NuxtChild);
-Vue.component('NChild', NuxtChild);
+import { installInjectedPlugins } from 'initialize/install-plugins.js';
 
-async function createApp() {
-  // eslint-disable-next-line no-undef
-  const config = nuxt.publicRuntimeConfig;
-  const router = await createRouter(config);
+/**
+ * Bundle Vue app component and configuration to be executed on entry
+ * TODO: #11070 - Remove Nuxt residuals
+ * @param {*} vueApp Vue instance
+ * @returns
+ */
+async function extendApp(vueApp) {
+  const config = { rancherEnv: process.env.rancherEnv, dashboardVersion: process.env.version };
+  const router = extendRouter(config);
 
-  const store = createStore();
+  const store = extendStore();
 
   // Add this.$router into store actions/mutations
   store.$router = router;
@@ -52,17 +26,17 @@ async function createApp() {
 
   // here we inject the router and store to all child components,
   // making them available everywhere as `this.$router` and `this.$store`.
-  const app = {
+  const appPartials = {
     store,
     router,
     nuxt: {
       err:     null,
       dateErr: null,
       error(err) {
         err = err || null;
-        app.context._errored = Boolean(err);
+        appPartials.context._errored = Boolean(err);
         err = err ? normalizeError(err) : null;
-        let nuxt = app.nuxt; // to work with @vue/composition-api, see https://github.com/nuxt/nuxt.js/issues/6517#issuecomment-573280207
+        let nuxt = appPartials.nuxt; // to work with @vue/composition-api, see https://github.com/nuxt/nuxt.js/issues/6517#issuecomment-573280207
 
         if (this) {
           nuxt = this.nuxt || this.$options.nuxt;
@@ -73,41 +47,41 @@ async function createApp() {
         return err;
       }
     },
-    ...App
+    ...AppView
   };
 
   // Make app available into store via this.app
-  store.app = app;
+  store.app = appPartials;
 
-  const next = (location) => app.router.push(location);
+  const next = (location) => appPartials.router.push(location);
   // Resolve route
 
   const path = getLocation(router.options.base, router.options.mode);
   const route = router.resolve(path).route;
 
   // Set context to app.context
-  await setContext(app, {
+  await setContext(appPartials, {
     store,
     route,
     next,
-    error:   app.nuxt.error.bind(app),
+    error:   appPartials.nuxt.error.bind(appPartials),
     payload: undefined,
     req:     undefined,
     res:     undefined
   });
 
-  await installPlugins(app, Vue);
+  await installInjectedPlugins(appPartials, vueApp);
 
   // Wait for async component to be resolved first
   await new Promise((resolve, reject) => {
     // Ignore 404s rather than blindly replacing URL in browser
-    const { route } = router.resolve(app.context.route.fullPath);
+    const { route } = router.resolve(appPartials.context.route.fullPath);
 
     if (!route.matched.length) {
       return resolve();
     }
 
-    router.replace(app.context.route.fullPath, resolve, (err) => {
+    router.replace(appPartials.context.route.fullPath, resolve, (err) => {
       // https://github.com/vuejs/vue-router/blob/v3.4.3/src/util/errors.js
       if (!err._isRouter) {
         return reject(err);
@@ -118,9 +92,9 @@ async function createApp() {
 
       // navigated to a different route in router guard
       const unregister = router.afterEach(async(to, from) => {
-        app.context.route = await getRouteData(to);
-        app.context.params = to.params || {};
-        app.context.query = to.query || {};
+        appPartials.context.route = await getRouteData(to);
+        appPartials.context.params = to.params || {};
+        appPartials.context.query = to.query || {};
         unregister();
         resolve();
       });
@@ -143,9 +117,9 @@ async function createApp() {
 
   return {
     store,
-    app,
+    app: appPartials,
     router
   };
 }
 
-export { createApp };
+export { extendApp };