Implemented: support to use remote module in the app(#863)

hotwax · Nov 27, 2024 · 7ed3d56 · 7ed3d56
1 parent 5276866
commit 7ed3d56
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",
     "@ionic/vue-router": "^7.6.0",
+    "@module-federation/runtime": "^0.7.7",
     "@types/encoding-japanese": "^2.0.5",
     "@types/file-saver": "^2.0.5",
     "@types/luxon": "^2.3.2",

diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
@@ -3,3 +3,6 @@ declare module '*.vue' {
   const component: ReturnType<typeof defineComponent>
   export default component
 }
+
+
+declare module "fulfillment_module_federation/*";
diff --git a/src/store/modules/rejection/actions.ts b/src/store/modules/rejection/actions.ts
@@ -73,18 +73,31 @@ const actions: ActionTree<RejectionState, RootState> = {
             }
             const resp = await UtilService.fetchRejectReasons(payload)
 
-            if (!hasError(resp) && resp.data.count > 0) {
+            const sampleData = [{
+              description: "Inactive store",
+              enumId: "INACTIVE_STOR",
+              enumName: "Inactive store",
+              enumTypeId: "REPORT_NO_VAR",
+              sequenceNum: 1
+            }]
+
+            console.log('usedReasons', usedReasons);
+
+            // if (!hasError(resp)) {
               const reasonCountDetail = usedReasons.reduce((reasonDetail: any, reason: any) => {
                 reasonDetail[reason.val.trim().toUpperCase()] = reason;
                 return reasonDetail;
               }, {});
-              usedRejectionReasons = resp.data.docs
+
+              console.log('reasonCountDetail', reasonCountDetail)
+
+              usedRejectionReasons = sampleData
               usedRejectionReasons.map((rejectionReason: any) => {
                 rejectionReason.count = reasonCountDetail[rejectionReason.enumId]?.count
               })
-            } else {
-              throw resp.data
-            }
+            // } else {
+            //   throw resp.data
+            // }
           }
         } else {
           throw resp.data;

diff --git a/src/views/OrderDetail.vue b/src/views/OrderDetail.vue
@@ -312,6 +312,8 @@
               </ion-label>
             </ion-item>
           </ion-card>
+
+          <Component :is="dynamicComponent" :category="category" :order="order" :userProfile="userProfile" />
         </div>
 
         <h4 class="ion-padding-top ion-padding-start" v-if="order.shipGroups?.length">{{ translate('Other shipments in this order') }}</h4>
@@ -418,7 +420,7 @@ import {
   modalController,
   popoverController
 } from "@ionic/vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineAsyncComponent, defineComponent, shallowRef } from "vue";
 import { mapGetters, useStore } from "vuex";
 import { useRouter } from 'vue-router'
 import {
@@ -466,6 +468,7 @@ import ShippingLabelActionPopover from '@/components/ShippingLabelActionPopover.
 import GenerateTrackingCodeModal from '@/components/GenerateTrackingCodeModal.vue';
 import TrackingCodeModal from '@/components/TrackingCodeModal.vue';
 import GiftCardActivationModal from '@/components/GiftCardActivationModal.vue';
+import { init, loadRemote } from '@module-federation/runtime';
 
 export default defineComponent({
   name: "OrderDetail",
@@ -521,7 +524,8 @@ export default defineComponent({
       facilityCarriers: 'carrier/getFacilityCarriers',
       userProfile: 'user/getUserProfile',
       isShipNowDisabled: 'user/isShipNowDisabled',
-      isUnpackDisabled: 'user/isUnpackDisabled'
+      isUnpackDisabled: 'user/isUnpackDisabled',
+      instanceUrl: "user/getInstanceUrl"
     })
   },
   data() {
@@ -548,7 +552,8 @@ export default defineComponent({
       carrierPartyId: "",
       carrierMethods:[] as any,
       isUpdatingCarrierDetail: false,
-      orderInvoicingInfo: {} as any
+      orderInvoicingInfo: {} as any,
+      dynamicComponent: "" as any
     }
   },
   async ionViewDidEnter() {
@@ -569,7 +574,56 @@ export default defineComponent({
     // Fetching shipment label errors 
     await this.fetchShipmentLabelError()
   },
+  async mounted() {
+    await init({
+      name: 'fulfillment',
+      remotes: [
+        {
+          name: 'fulfillment_module_federation',
+          entry: 'http://localhost:8100/remoteEntry.js',
+        },
+      ],
+      shared: {
+        vue: { shareConfig: { requiredVersion: '^3.2.26', singleton: true, eager: true } },
+        "vue-logger-plugin": { shareConfig: { requiredVersion: '^2.2.3', singleton: true, eager: true } },
+        "vue-router": { shareConfig: { requiredVersion: '^4.0.12', singleton: true, eager: true } },
+        vuex: { shareConfig: { requiredVersion: '^4.0.1', singleton: true, eager: true } },
+        "vuex-persistedstate": { shareConfig: { requiredVersion: '^4.0.0-beta.3', singleton: true, eager: true } },
+        "@ionic/core": { shareConfig: { requiredVersion: '^7.6.0', singleton: true, eager: true } },
+        "@ionic/vue": { shareConfig: { requiredVersion: '^7.6.0', singleton: true, eager: true } },
+        "@ionic/vue-router": { shareConfig: { requiredVersion: '^7.6.0', singleton: true, eager: true } },
+        "@hotwax/app-version-info": { shareConfig: { requiredVersion: '^1.0.0', singleton: true, eager: true } },
+        "@hotwax/apps-theme": { shareConfig: { requiredVersion: '^1.2.6', singleton: true, eager: true } },
+        "@hotwax/dxp-components": { shareConfig: { requiredVersion: '^1.16.0', singleton: true, eager: true } },
+        "@hotwax/oms-api": { shareConfig: { requiredVersion: '^1.16.0', singleton: true, eager: true } },
+      },
+    });
+
+    if(this.instanceUrl.includes("adoc")) {
+      await this.useDynamicImport({ module: "kreweOrderInvoice", instance: "fulfillment_module_federation" })
+    }
+
+    console.log("======registerRemoteModule=====");
+    // const remoteModule = await import('fulfillment_module_federation/');  // <-- Import from remote app
+    // this.store.registerModule('invoice', remoteModule.default);  // Register with Vuex store
+  },
   methods: {
+    async useDynamicImport({ module, instance }: any) {
+      if (!module || !instance) return;
+
+      // const loadComponent = async () => {
+      //   try {
+      //     const { default: Component } = await loadRemote(`${instance}/${module}`) as any;
+      //     console.log("Component", Component)
+      //     this.dynamicComponent = await shallowRef(defineAsyncComponent(() => import(Component)));
+      //   } catch (error) {
+      //     console.error(`Error loading remote module ${instance}/${module}:`, error);
+      //   }
+      // };
+
+      this.dynamicComponent = await shallowRef(defineAsyncComponent(() => import("fulfillment_module_federation/kreweOrderInvoice")));
+      // await loadComponent();
+    },
     async fetchShipmentLabelError() {
       const shipmentIds = this.order?.shipmentIds?.length > 0 ? this.order?.shipmentIds : this.order.shipments?.map((shipment: any) => shipment.shipmentId);
       if (shipmentIds && shipmentIds.length > 0) {

diff --git a/vue.config.js b/vue.config.js
@@ -1,3 +1,4 @@
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const path = require('path')
 require("@hotwax/app-version-info")
 module.exports = {
@@ -6,6 +7,36 @@ module.exports = {
       alias: {
         vue: path.resolve('./node_modules/vue')
       }
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+        name: "fulfillment",
+        filename: "remoteEntry.js",
+        shared: {
+          vue: { singleton: true, eager: true },
+          "vue-logger-plugin": { singleton: true, eager: true },
+          "vue-router": { singleton: true, eager: true },
+          vuex: { singleton: true, eager: true },
+          "vuex-persistedstate": { singleton: true, eager: true },
+          "@ionic/core": { singleton: true, eager: true },
+          "@ionic/vue": { singleton: true, eager: true },
+          "@ionic/vue-router": { singleton: true, eager: true },
+          "@hotwax/app-version-info": { singleton: true, eager: true },
+          "@hotwax/apps-theme": { singleton: true, eager: true },
+          "@hotwax/dxp-components": { singleton: true, eager: true },
+          "@hotwax/oms-api": { singleton: true, eager: true },
+        },
+      })
+    ],
+    optimization: {
+      splitChunks: false,
+      runtimeChunk: false
+    },
+  },
+  devServer: {
+    port: 8100, // Ensure this port is different from the host
+    headers: {
+      "Access-Control-Allow-Origin": "*", // Allow all origins (for development only)
     }
   },
   runtimeCompiler: true,