From d0b9dde86893e800e42af0bdc2691dd0fbf795e2 Mon Sep 17 00:00:00 2001
From: Heriberto Luna <hluna006@fiu.edu>
Date: Fri, 13 Dec 2024 14:00:20 -0500
Subject: [PATCH] Added the vue3-sfc-loader to ActionMenuItem

---
 src/components/kytos/napp/ActionMenuItem.vue | 59 +++++++++++++++++++-
 1 file changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/components/kytos/napp/ActionMenuItem.vue b/src/components/kytos/napp/ActionMenuItem.vue
index ee05aea..76fcf5d 100644
--- a/src/components/kytos/napp/ActionMenuItem.vue
+++ b/src/components/kytos/napp/ActionMenuItem.vue
@@ -6,7 +6,60 @@
 
 <script>
 import Vue from 'vue'
-import httpVueLoader from "./httpVueLoader.js"
+import { loadModule } from "vue3-sfc-loader"
+ 
+const options = {
+
+  moduleCache: {
+    vue: Vue
+  },
+
+  pathResolve({ refPath, relPath }, options) {
+
+    if (relPath === '.')
+      return refPath;
+
+    if (relPath[0] !== '.' && relPath[0] !== '/')
+      return relPath;
+
+    return String(new URL(relPath, refPath === undefined ? window.location : refPath));
+  },
+
+  handleModule: async function (type, getContentData, path, options) {
+
+    switch (type) {
+      case '.css':
+        options.addStyle(await getContentData(false));
+        return null;
+      case '.kytos':
+        console.log("Kytos detected");
+        return null;
+      default: return undefined; // let vue3-sfc-loader handle this
+    }
+  },
+
+  async getFile(url) {
+
+    const res = await fetch(url);
+    if (!res.ok)
+      throw Object.assign(new Error(url + ' ' + res.statusText), { res });
+    return await res.text();
+  },
+
+  addStyle(textContent) {
+
+    const style = Object.assign(document.createElement('style'), { textContent });
+    const ref = document.head.getElementsByTagName('style')[0] || null;
+    document.head.insertBefore(style, ref);
+  },
+
+  log(type, ...args) {
+
+    console.log("vue3-sfc-loader log:");
+    console[type](...args);
+  }
+
+}
 
 export default {
   name: 'k-action-menu-item',
@@ -36,8 +89,8 @@ export default {
       $.each(self.components, function(index, component){
         if('url' in component){
           // random is needed to avoid cache of components.
-          var url = self.$kytos_server+component.url+"?random="+Math.random()
-          Vue.component(component.name, httpVueLoader(url))
+          var url = self.$kytos_server+component.url
+          self.$kytos.component(component.name, Vue.defineAsyncComponent( () => loadModule(url, options) ))
         }
       })
     },