@vc-shell/framework 1.0.253 → 1.0.255

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.0.255](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.254...v1.0.255) (2024-07-12)
+
+
+### Bug Fixes
+
+* **core:** useDynamicModules fix ([b38d966](https://github.com/VirtoCommerce/vc-shell/commit/b38d9668b410d7bbb0d798f2218f2b6051416cc9))
+
+
+
+## [1.0.254](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.253...v1.0.254) (2024-07-12)
+
+
+### Features
+
+* dynamic module loader ([4d15575](https://github.com/VirtoCommerce/vc-shell/commit/4d15575bb5448e16b4034782bafc7097189742f1))
+
+
+
 ## [1.0.253](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.252...v1.0.253) (2024-07-12)
 
 

package/core/plugins/modularity/index.ts

@@ -137,3 +137,5 @@ export const createAppModule = (
     },
   };
 };
+
+export * from "./loader";

package/core/plugins/modularity/loader.ts

@@ -0,0 +1,95 @@
+import { App, Plugin } from "vue";
+import { Router } from "vue-router";
+
+interface ModuleManifest {
+  file: string;
+  name: string;
+  src: string;
+  isEntry: boolean;
+}
+
+interface CssManifest {
+  file: string;
+  src: string;
+}
+
+interface Manifest {
+  [key: string]: ModuleManifest | CssManifest;
+}
+
+interface Apps {
+  [x: string]: {
+    modules: { id: string; url: string }[];
+  };
+}
+
+function loadCSS(url: string) {
+  return new Promise<void>((resolve, reject) => {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    link.onload = () => resolve();
+    link.onerror = () => reject(new Error(`Failed to load CSS: ${url}`));
+    document.head.appendChild(link);
+  });
+}
+
+export function useDynamicModules(app: App, { router, appName }: { router: Router; appName: string }) {
+  async function load() {
+    try {
+      const appsUrl = "/Modules/$(VirtoCommerce.MarketplaceVendor)/Content/apps.json";
+      const modules: Apps[] = await fetch(appsUrl).then((res) => res.json());
+
+      for (const module of modules) {
+        const appModules = module[appName].modules;
+
+        if (!appModules.length) {
+          throw new Error("Modules not found");
+        }
+
+        for (const module of appModules) {
+          const moduleUrl = module.url.replace(/^([^/])/, "/$1").replace(/([^/])$/, "$1/");
+          const manifestResponse = await fetch(moduleUrl + "manifest.json");
+
+          if (!manifestResponse.ok) {
+            throw new Error(`Failed to load manifest: ${manifestResponse.statusText}`);
+          }
+
+          const manifest: Manifest = await manifestResponse.json();
+
+          // Find entry point
+          const entry = Object.values(manifest).find((file) => (file as ModuleManifest).isEntry);
+
+          if (!entry) {
+            throw new Error("Entry file not found");
+          }
+
+          await Promise.all(
+            Object.values(manifest)
+              .filter((file) => file.file.endsWith(".css"))
+              .map((file) => loadCSS(moduleUrl + `${file.file}`)),
+          ).catch((error) => {
+            console.error("Failed to load styles", error);
+          });
+
+          await import(/* @vite-ignore */ moduleUrl + entry.file).catch((error) => {
+            console.error("Failed to load module", error);
+          });
+
+          Object.values(window.VcShellDynamicModules).forEach((mod) => {
+            app.use((mod as Record<"default", Plugin>)?.default, { router });
+          });
+
+          app.config.globalProperties.$dynamicModules = window.VcShellDynamicModules;
+          app.provide("$dynamicModules", app.config.globalProperties.$dynamicModules);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load modules", error);
+    }
+  }
+
+  return {
+    load,
+  };
+}

package/dist/core/plugins/modularity/index.d.ts

@@ -19,4 +19,5 @@ export declare const createAppModule: (pages: {
         router: Router;
     }): void;
 };
+export * from "./loader";
 //# sourceMappingURL=index.d.ts.map

package/dist/core/plugins/modularity/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/plugins/modularity/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAK,MAAM,KAAK,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAc,MAAM,qDAAqD,CAAC;AAK3G,eAAO,MAAM,YAAY;;aAAuE,OAAO;iBACxF,GAAG,GAAG,IAAI;CAavB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;iBAOX,GAAG,YAAY;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CA2GxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../core/plugins/modularity/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAK,MAAM,KAAK,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAc,MAAM,qDAAqD,CAAC;AAK3G,eAAO,MAAM,YAAY;;aAAuE,OAAO;iBACxF,GAAG,GAAG,IAAI;CAavB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;iBAOX,GAAG,YAAY;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CA2GxD,CAAC;AAEF,cAAc,UAAU,CAAC"}

package/dist/core/plugins/modularity/loader.d.ts

@@ -0,0 +1,9 @@
+import { App } from "vue";
+import { Router } from "vue-router";
+export declare function useDynamicModules(app: App, { router, appName }: {
+    router: Router;
+    appName: string;
+}): {
+    load: () => Promise<void>;
+};
+//# sourceMappingURL=loader.d.ts.map

package/dist/core/plugins/modularity/loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../core/plugins/modularity/loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAU,MAAM,KAAK,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAmCpC,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;;EA0DnG"}