OIA-39: Update Plugin Example & Test with Vue-Router (#60)

* support vue-router in plugin test app

* update sample plugin with pinia/router/ability to run itself

* externalze vue-router to dedup

ui-extension-test/package.json

@@ -12,7 +12,8 @@
     "pinia": "^2.0.14",
     "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",

ui-extension-test/src/App.vue

@@ -1,31 +1,6 @@
 <script setup lang="ts">
-// @ts-ignore
-import * as Vue from 'vue/dist/vue.esm-bundler'
-import * as Pinia from 'pinia'
-import PluginContainer from './PluginContainer.vue'
-import addStylesheet from './utils/externalStyles'
-
-(window as any).Vue = Vue;
-(window as any).Pinia = Pinia;
-
-// list of external js files
-const externalScripts = [
-   'http://localhost:5002/uiextension.es.js'
-]
-
-// list of external css assets
-const externalStylesheets = [
-  'http://localhost:5002/style.css'
-]
-
-for (const stylesheet of externalStylesheets) {
-  addStylesheet(stylesheet)
-}
 </script>
 
 <template>
-  This is the UI Extension APP used as an extension container
-  <div v-for="script of externalScripts" :key="script">
-    <PluginContainer :script="script" />
-  </div>
+  <router-view></router-view>
 </template>

ui-extension-test/src/Plugin.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import PluginContainer from './PluginContainer.vue'
+import addStylesheet from './utils/externalStyles'
+
+// list of external js files
+const externalScripts = [
+   'http://localhost:5002/uiextension.es.js'
+]
+
+// list of external css assets
+const externalStylesheets = [
+  'http://localhost:5002/style.css'
+]
+
+for (const stylesheet of externalStylesheets) {
+  addStylesheet(stylesheet)
+}
+</script>
+
+<template>
+  This is the UI Extension APP used as an extension container
+  <div v-for="script of externalScripts" :key="script">
+    <PluginContainer :script="script" />
+  </div>
+</template>

ui-extension-test/src/main.ts

@@ -1,6 +1,21 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from 'pinia'
+import * as Vue from 'vue/dist/vue.esm-bundler'
+import * as Pinia from 'pinia'
+import * as VueRouter from 'vue-router'
+import externalComponent from './utils/externalComponent'
+import Router from './router'
 
-createApp(App).use(createPinia()).mount('#app')
+(window as any)['VRouter'] = Router;
+(window as any).Vue = Vue;
+(window as any).Pinia = Pinia;
+(window as any).VueRouter = VueRouter;
+
+await externalComponent('http://localhost:5002/uiextension.es.js')
+
+createApp(App)
+  .use(createPinia())
+  .use(Router)
+  .mount('#app')
 

ui-extension-test/src/router/index.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import PluginVue from '../Plugin.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Plugin',
+      component: PluginVue,
+    },
+    {
+      path: '/:pathMatch(.*)*', // catch other paths and redirect
+      redirect: '/'
+    }
+  ]
+})
+
+export default router

ui-extension/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ui-extension",
   "version": "0.0.0",
-   "files" : [
-      "dist"
-   ],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/uiextension.umd.js",
   "module": "./dist/uiextension.es.js",
   "exports": {
@@ -12,20 +12,22 @@
       "require": "./dist/uiextension.umd.js"
     }
   },
-
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --config vite.config.dev.ts",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview --port 5002"
   },
   "dependencies": {
-    "vue": "^3.2.25",
-    "vite-plugin-externals": "^0.3.4"
+    "pinia": "^2.0.14",
+    "vite-plugin-externals": "^0.5.0",
+    "vue": "^3.2.37",
+    "vue-router": "^4.0.16"
   },
   "devDependencies": {
+    "@types/node": "^18.0.0",
     "@vitejs/plugin-vue": "^2.2.0",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",
-    "vue-tsc": "^0.29.8"
+    "vue-tsc": "^0.38.1"
   }
 }

ui-extension/src/App.vue

@@ -1,12 +1,8 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
+<script setup lang="ts"></script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="This is an example UI Extension component plugin installed at runtime as a Karaf feature" />
+  <router-view></router-view>
 </template>
 
 <style scoped>

ui-extension/src/components/HelloWorld.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
 const count = ref(0)
 </script>
 
 <template>
-  <h1>{{ msg }}</h1>
+  <h1>This is an example UI Extension component plugin installed at runtime as a Karaf feature</h1>
 
   <p>
     For more information:

ui-extension/src/composables/useRouter.ts

@@ -0,0 +1,9 @@
+import router from '../router'
+import { Router } from 'vue-router'
+
+// for plugin routing, use this hook
+const useRouter = (): Router => {
+  return (window as any).VRouter || router
+}
+
+export default useRouter

ui-extension/src/main.ts

@@ -1,4 +1,14 @@
 import App from './App.vue'
+import { createApp } from 'vue'
+import router from './router'
+import { createPinia } from 'pinia'
+
+const envMode = import.meta.env.MODE
 
 //@ts-ignore
 window['uiextension'] = App
+
+// used to run plugin by itself
+if (envMode === 'development') {
+  createApp(App).use(router).use(createPinia()).mount('#app')
+}

ui-extension/src/router/index.ts

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory, Router } from 'vue-router'
+import HelloWorld from '../components/HelloWorld.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'hello',
+    component: HelloWorld,
+  },
+]
+
+const VRouter: Router = (window as any).VRouter
+if (VRouter) {
+  for (const route of routes) {
+    const { path, name, component } = route
+    VRouter.addRoute('Plugin', { path: path.slice(1), name, component })
+  }
+}
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router

ui-extension/tsconfig.json

@@ -9,8 +9,8 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  //"references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

ui-extension/vite.config.dev.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()]
+})

ui-extension/vite.config.ts

@@ -6,9 +6,11 @@ import {viteExternalsPlugin} from 'vite-plugin-externals'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-      vue(),
+    vue(),
     viteExternalsPlugin({
-      vue: 'Vue'
+      vue: 'Vue',
+      pinia: 'Pinia',
+      'vue-router': 'VueRouter'
     })
   ],
   build: {
@@ -19,14 +21,16 @@ export default defineConfig({
       fileName: (format) => `uiextension.${format}.js`
     },
     rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      external: ['vue'],
-      output: {
+        // make sure to externalize deps that shouldn't be bundled
+        // into your library
+        external: ['vue', 'pinia', 'vue-router'],
+        output: {
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          vue: 'Vue'
+          vue: 'Vue',
+          pinia: 'Pinia',
+          'vue-router': 'VueRouer'
         }
       }
     }