Plugins für Plugins möglich.

Man kann nun Plugins für Plugins schreiben. Dabei können die Routes vom ursprünglichen Plugin überschrieben werden.
Außerdem wird unterschieden zwischen required und optional (loadPlugins) Plugins.

routes werden nun kombiniert und die MainLinks ebenfalls.

src/boot/plugins.ts

@@ -13,13 +13,15 @@ interface EssentialLink {
 }
 
 interface Plugin {
-  router: PluginRouteConfig[];
+  name: string;
-  store?: Module<never, never>;
+  routes: PluginRouteConfig[] | RouteConfig[];
+  store?: Module<never, never>[];
   mainLink: PluginMainLink;
+  requiredModules: string[];
 }
 
 interface PluginMainLink extends PluginChildLink {
-  children: PluginChildLink[] | [];
+  children: PluginChildLink[];
 }
 
 interface PluginChildLink {
@@ -29,20 +31,136 @@ interface PluginChildLink {
   icon: string;
 }
 
+const config = {
+  // Do not change required Modules !!
+  requiredModules: ['user'],
+  // here you can import plugins.
+  loadModules: ['plugin1', 'user-plugin']
+};
+
 export { PluginRouteConfig, Plugin, PluginChildLink, PluginMainLink };
 
+function combineRoutes(
+  target: RouteConfig[],
+  source: RouteConfig[]
+): RouteConfig[] {
+  // iterate first layer e.g. /main, /login etc.
+  source.forEach((sourceRouteConfig: RouteConfig) => {
+    const targetRouteConfig: RouteConfig | undefined = target.find(
+      (routeConfig: RouteConfig) => {
+        return sourceRouteConfig.path == routeConfig.path;
+      }
+    );
+    if (targetRouteConfig) {
+      sourceRouteConfig.children?.forEach(
+        (sourcePluginChildRouteConfig: RouteConfig) => {
+          const targetPluginRouteConfig:
+            | RouteConfig
+            | undefined = targetRouteConfig.children?.find(
+            (routeConfig: RouteConfig) => {
+              return sourcePluginChildRouteConfig.path == routeConfig.path;
+            }
+          );
+          if (targetPluginRouteConfig) {
+            if (targetPluginRouteConfig.children) {
+              targetPluginRouteConfig.children = Object.assign(
+                targetPluginRouteConfig.children,
+                sourcePluginChildRouteConfig.children
+              );
+            } else {
+              targetPluginRouteConfig.children =
+                sourcePluginChildRouteConfig.children;
+            }
+          } else {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            targetRouteConfig.children.push(sourcePluginChildRouteConfig);
+          }
+        }
+      );
+    } else {
+      target.push(sourceRouteConfig);
+    }
+  });
+  return target;
+}
+
+function combineMainLinks(
+  target: PluginMainLink[],
+  source: PluginMainLink
+): PluginMainLink[] {
+  console.log('target', target);
+  console.log('source', source);
+  const targetPluginMainLink: PluginMainLink | undefined = target.find(
+    (targetPluginMainLink: PluginMainLink) => {
+      console.log(targetPluginMainLink.title, source.title);
+      return targetPluginMainLink.title == source.title;
+    }
+  );
+  console.log('targetPluginMainLink', targetPluginMainLink);
+  if (targetPluginMainLink) {
+    source.children.forEach((sourcePluginChildLink: PluginChildLink) => {
+      targetPluginMainLink.children.push(sourcePluginChildLink);
+    });
+  } else {
+    console.log('push source', source);
+    target.push(source);
+  }
+  console.log('merged', target);
+  return target;
+}
+
 // "async" is optional;
 // more info on params: https://quasar.dev/quasar-cli/cli-documentation/boot-files#Anatomy-of-a-boot-file
-export default boot(({ Vue, router }) => {
+export default boot(({ Vue, router, store }) => {
-  const plugins = require.context('src/plugins', true, /.+\/plugin.ts$/);
+  const pluginsContext = require.context('src/plugins', true, /.+\/plugin.ts$/);
-  const pluginMainLinks: PluginMainLink[] = [];
+  let pluginMainLinks: PluginMainLink[] = [];
-  plugins.keys().forEach((fileName: string) => {
+  const plugins: Plugin[] = [];
+  pluginsContext.keys().forEach((fileName: string) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    router.addRoutes(plugins(fileName).default.router);
+    plugins.push(pluginsContext(fileName).default);
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    pluginMainLinks.push(plugins(fileName).default.mainLink);
   });
+
+  let routes: RouteConfig[] = [];
+
+  config.requiredModules.forEach(requiredModule => {
+    const plugin = plugins.find(plugin => {
+      return plugin.name == requiredModule;
+    });
+    if (plugin) {
+      routes = combineRoutes(routes, plugin.routes);
+      if (plugin.store) {
+        plugin.store.forEach(store_module => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+          store.registerModule(store_module);
+        });
+      }
+      pluginMainLinks = combineMainLinks(pluginMainLinks, plugin.mainLink);
+    } else {
+      console.exception(`Don't find required Plugin ${requiredModule}`);
+    }
+  });
+
+  config.loadModules.forEach(loadModule => {
+    const plugin = plugins.find(plugin => {
+      return plugin.name == loadModule;
+    });
+    if (plugin) {
+      routes = combineRoutes(routes, plugin.routes);
+      if (plugin.store) {
+        plugin.store.forEach(store_module => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+          store.registerModule(store_module);
+        });
+      }
+      pluginMainLinks = combineMainLinks(pluginMainLinks, plugin.mainLink);
+    } else {
+      console.exception(`Don't find Plugin ${loadModule}`);
+    }
+  });
+  console.log(routes);
+  router.addRoutes(routes);
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   Vue.prototype.$flaschengeist_plugins = pluginMainLinks;
-  console.log(plugins);
+  console.log(pluginMainLinks);
 });

src/layouts/MainLayout.vue

@@ -103,15 +103,6 @@ import { PluginMainLink } from 'boot/plugins';
 import { defineComponent, ref, computed } from '@vue/composition-api';
 
 const links = [
-  {
-    name: 'home',
-    title: 'home',
-    icon: 'mdi-home',
-    children: [
-      { title: 'Neues Home', link: 'newHome', icon: 'mdi-google-home' },
-      { title: 'Altes Home', link: 'oldHome', icon: 'mdi-home-modern' }
-    ]
-  },
   {
     name: 'about',
     title: 'about',
@@ -162,11 +153,14 @@ export default defineComponent({
         | PluginMainLink
         | undefined = ctx.root.$flaschengeist_plugins.find(
         (plugin: PluginMainLink) => {
-          return plugin.name == ctx.root.$route.matched[1].name;
+          if (ctx.root.$route.matched.length > 1) {
+            return plugin.name == ctx.root.$route.matched[1].name;
+          }
         }
       );
       console.log(test);
-      if (typeof test == undefined) {
+      console.log(typeof test);
+      if (test == undefined) {
         return [];
       } else {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment

src/pages/Login.vue

@@ -47,7 +47,7 @@ export default defineComponent({
 
     function doLogin() {
       console.log(username.value, password.value);
-      void ctx.root.$router.push({ name: 'home' });
+      void ctx.root.$router.push({ name: 'main' });
     }
 
     return { username, password, doLogin, rules };

src/pages/home/Home.vue

@@ -1,24 +0,0 @@
-<template>
-  <q-page padding class="fit row justify-center content-center items-center">
-    <q-card class="col-4" height="" v-if="$route.name == 'home'">
-      <q-card-section>
-        Home
-      </q-card-section>
-      <q-card-section>
-        {{ a }}
-      </q-card-section>
-    </q-card>
-    <router-view />
-  </q-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-export default defineComponent({
-  // name: 'PageName'
-  setup(_, ctx) {
-    const a = ctx.root.$flaschengeist_plugins;
-    return { a };
-  }
-});
-</script>

src/pages/home/NewHome.vue

@@ -1,14 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section>
-      Neues Zuhause
-    </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-export default defineComponent({
-  // name: 'PageName'
-});
-</script>

src/pages/home/OldHome.vue

@@ -1,14 +0,0 @@
-<template>
-  <q-card class="col-4" height="">
-    <q-card-section>
-      Altes Zuhause
-    </q-card-section>
-  </q-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-export default defineComponent({
-  // name: 'PageName'
-});
-</script>

src/plugins/plugin-example-2/plugin.ts

@@ -1,30 +0,0 @@
-import { Plugin } from 'boot/plugins';
-import routes from 'src/plugins/plugin-example-2/routes';
-
-const plugin: Plugin = {
-  router: routes,
-  mainLink: {
-    name: 'plugin2',
-    title: 'Plugin2',
-    link: 'plugin2',
-    icon: 'mdi-toy-brick-plus',
-    children: [
-      {
-        name: 'plugin2',
-        title: 'Neues Plugin2',
-        link: 'plugin2_1',
-        icon: 'mdi-information-outline'
-      },
-      {
-        name: 'plugin2',
-        title: 'Altes Plugin2',
-        link: 'plugin2_2',
-        icon: 'mdi-information-variant'
-      }
-    ]
-  }
-};
-
-const mainLink = plugin.mainLink;
-export { mainLink };
-export default plugin;

src/plugins/plugin-example/plugin.ts

@@ -1,31 +1,33 @@
-import { Plugin } from 'boot/plugins';
+import { Plugin, PluginMainLink } from 'boot/plugins';
 import routes from 'src/plugins/plugin-example/routes';
 
-const plugin: Plugin = {
+const mainLink: PluginMainLink = {
-  router: routes,
+  name: 'plugin1',
-  mainLink: {
+  title: 'Plugin1',
-    name: 'plugin1',
+  link: 'plugin1',
-    title: 'Plugin1',
+  icon: 'mdi-toy-brick',
-    link: 'plugin1',
+  children: [
-    icon: 'mdi-toy-brick',
+    {
-    children: [
+      name: 'plugin1',
-      {
+      title: 'Neues Plugin1',
-        name: 'plugin1',
+      link: 'plugin1_1',
-        title: 'Neues Plugin1',
+      icon: 'mdi-information-outline'
-        link: 'plugin1_1',
+    },
-        icon: 'mdi-information-outline'
+    {
-      },
+      name: 'plugin1',
-      {
+      title: 'Altes Plugin1',
-        name: 'plugin1',
+      link: 'plugin1_2',
-        title: 'Altes Plugin1',
+      icon: 'mdi-information-variant'
-        link: 'plugin1_2',
+    }
-        icon: 'mdi-information-variant'
+  ]
-      }
-    ]
-  }
 };
 
-const mainLink = plugin.mainLink;
+const plugin: Plugin = {
+  routes,
+  mainLink,
+  name: mainLink.name,
+  requiredModules: []
+};
 
 export { mainLink };
 

src/plugins/user-plugin/plugin.ts

@@ -0,0 +1,33 @@
+import { Plugin, PluginMainLink } from 'boot/plugins';
+import routes from './routes';
+
+const mainLink: PluginMainLink = {
+  name: 'user-plugin',
+  title: 'User',
+  link: 'user',
+  icon: 'mdi-account',
+  children: [
+    {
+      name: 'user-plugin',
+      title: 'Erstes Plugin für User',
+      link: 'user-plugin1',
+      icon: 'mdi-account-plus'
+    },
+    {
+      name: 'user-plugin',
+      title: 'Zweites Plugin für User',
+      link: 'user-plugin2',
+      icon: 'mdi-account-minus'
+    }
+  ]
+};
+
+const plugin: Plugin = {
+  routes,
+  mainLink,
+  name: mainLink.name,
+  requiredModules: ['user']
+};
+
+export { mainLink };
+export default plugin;

src/plugins/user-plugin/routes/index.ts

@@ -8,21 +8,18 @@ const routes: RouteConfig[] = [
     },
     children: [
       {
-        path: 'plugin2',
+        path: 'user',
-        name: 'plugin2',
+        name: 'user',
-        components: {
+        component: () => import('src/plugins/user/pages/User.vue'),
-          default: () => import('../pages/Plugin.vue'),
-          'plugin-nav': () => import('../components/navigation/PluginLinks.vue')
-        },
         children: [
           {
-            path: 'plugin2_1',
+            path: 'user-plugin',
-            name: 'plugin2_1',
+            name: 'user-plugin1',
             component: () => import('../pages/NewPlugin.vue')
           },
           {
-            path: 'plugin2_2',
+            path: 'user-plugin2',
-            name: 'plugin2_2',
+            name: 'user-plugin2',
             component: () => import('../pages/OldPlugin.vue')
           }
         ]

src/plugins/user/pages/User.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <q-page
+      padding
+      class="fit row justify-center content-center items-center"
+      v-if="$route.name == mainLink.link"
+    >
+      <q-card class="col-4" height="">
+        <q-card-section>
+          {{ mainLink.title }}
+        </q-card-section>
+      </q-card>
+    </q-page>
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import { mainLink } from '../plugin';
+export default defineComponent({
+  // name: 'PageName'
+  setup(_, ctx) {
+    const a = ctx.root.$flaschengeist_plugins;
+    return { a, mainLink };
+  }
+});
+</script>

src/plugins/user/plugin.ts

@@ -0,0 +1,21 @@
+import { Plugin, PluginMainLink } from 'boot/plugins';
+import routes from './routes';
+
+const mainLink: PluginMainLink = {
+  name: 'user',
+  title: 'User',
+  link: 'user',
+  icon: 'mdi-account',
+  children: []
+};
+
+const plugin: Plugin = {
+  routes,
+  mainLink,
+  name: mainLink.name,
+  requiredModules: []
+};
+
+export { mainLink };
+
+export default plugin;

src/plugins/user/routes/index.ts

@@ -0,0 +1,17 @@
+import { RouteConfig } from 'vue-router';
+
+const routes: RouteConfig[] = [
+  {
+    path: '/main',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: 'user',
+        name: 'user',
+        component: () => import('../pages/User.vue')
+      }
+    ]
+  }
+];
+
+export default routes;

src/router/routes.ts

@@ -15,25 +15,9 @@ const routes: RouteConfig[] = [
   },
   {
     path: '/main',
+    name: 'main',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      {
-        name: 'home',
-        path: 'home',
-        component: () => import('pages/home/Home.vue'),
-        children: [
-          {
-            name: 'newHome',
-            path: 'newHome',
-            component: () => import('pages/home/NewHome.vue')
-          },
-          {
-            name: 'oldHome',
-            path: 'oldHome',
-            component: () => import('pages/home/OldHome.vue')
-          }
-        ]
-      },
       {
         name: 'about',
         path: 'about',