Add runtime example

paulpestov · Oct 11, 2023 · 8368c5f · 8368c5f
1 parent 0476e95
commit 8368c5f
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 20 deletions.
diff --git a/core/src/components/modules-container.vue b/core/src/components/modules-container.vue
@@ -1,19 +1,10 @@
 <script setup>
- import {store} from "@/store";
  import {EventBus} from "@/event-bus";
- import {defineAsyncComponent, ref} from "vue";
- const { modules } = store.config
- const comps = ref([])
- modules.forEach(module => {
-   if (module === 'plugin-1') {
-     comps.value.push(defineAsyncComponent(() => import('../../../plugin-1/src/app.vue')))
-   }
- })
 </script>
 
 <template>
   <div style="border: 1px solid; padding: 10px;">
-    <component v-for="comp in comps" :is="comp" :event-bus="EventBus"></component>
+    <component is="PluginOne" :event-bus="EventBus"></component>
   </div>
 </template>
 

diff --git a/core/src/main.js b/core/src/main.js
@@ -4,7 +4,9 @@ import { store } from './store.js'
 
 window.AppCore = function AppCore(config = {}) {
   store.config = config
-  createApp(App).mount('#app')
+  const plugin1 = config.modules[0]
+
+  createApp(App).use(plugin1).mount('#app')
 }
 
-export default window.AppCore;
+export default window.AppCore
diff --git a/core/vite.config.js b/core/vite.config.js
@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'node:path'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
@@ -14,11 +15,30 @@ export default defineConfig({
     }
   },
   build: {
+    // rollupOptions: {
+    //   output: {
+    //     entryFileNames: 'core.js',
+    //     assetFileNames: 'core.css',
+    //   }
+    // }
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__dirname, 'src/main.js'),
+      name: 'Core',
+      // the proper extensions will be added
+      fileName: 'core',
+    },
     rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
       output: {
-        entryFileNames: 'core.js',
-        assetFileNames: 'core.css',
-      }
-    }
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
   }
 })
diff --git a/index.html b/index.html
@@ -3,16 +3,25 @@
 <head>
   <meta charset="UTF-8">
   <title>Vue Modular App Test</title>
-  <script type="module" crossorigin src="core/dist/core.js"></script>
+    <script type="importmap">
+    {
+      "imports": {
+        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+      }
+    }
+  </script>
+  <script type="module" crossorigin src="core/dist/core.mjs"></script>
+  <script type="module" crossorigin src="plugin-1/dist/plugin-1.mjs"></script>
 </head>
 <body>
 
 <div id="app"></div>
-<div id="plugin"></div>
 <script>
   window.onload = () => {
     new window.AppCore({
-      modules: ['plugin-1']
+      modules: [
+        window.Plugin1
+      ]
     })
   }
 </script>

diff --git a/plugin-1/src/main.js b/plugin-1/src/main.js
@@ -1,3 +1,11 @@
 import App from './app.vue'
 
-export { App as Plugin1 }
+// export { App as Plugin1 }
+
+window.Plugin1 =  {
+  install: (app, options) => {
+    // Plugin code goes here
+    console.log(app)
+    app.component('PluginOne', App);
+  }
+}
diff --git a/plugin-1/vite.config.js b/plugin-1/vite.config.js
@@ -14,6 +14,12 @@ export default defineConfig({
     }
   },
   build: {
+    // rollupOptions: {
+    //   output: {
+    //     entryFileNames: 'plugin-1.js',
+    //     assetFileNames: 'plugin-1.css',
+    //   }
+    // }
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(__dirname, 'src/main.js'),