Merge pull request #1206 from ebkr/mod-card-dependencies

Improve LocalModCard performance
ebkr · Feb 15, 2024 · d3542e8 · d3542e8
2 parents a2a11b1 + 0c748a4
commit d3542e8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 28 deletions.
diff --git a/src/components/views/LocalModList.vue b/src/components/views/LocalModList.vue
@@ -47,8 +47,6 @@
                 @updateMod="updateMod"
                 @viewDependencyList="viewDependencyList"
                 @downloadDependency="downloadDependency"
-                :disabledDependencies="getDisabledDependencies(mod)"
-                :missingDependencies="getMissingDependencies(mod)"
                 :expandedByDefault="cardExpanded"
                 :showSort="$store.getters['profile/canSortMods']"
                 :funkyMode="funkyMode" />
@@ -141,25 +139,6 @@ import SearchAndSort from './LocalModList/SearchAndSort.vue';
             }
         }
 
-        getMissingDependencies(mod: ManifestV2): string[] {
-            return mod.getDependencies().filter((dependency: string) => {
-                // Include in filter if mod isn't found.
-                return this.$store.state.localModList.find(
-                    (localMod: ManifestV2) => dependency.toLowerCase().startsWith(localMod.getName().toLowerCase() + "-")
-                ) === undefined;
-            });
-        }
-
-        getDisabledDependencies(mod: ManifestV2): ManifestV2[] {
-            const dependencies = mod
-                .getDependencies()
-                .map((x) => x.toLowerCase().substring(0, x.lastIndexOf('-') + 1));
-
-            return this.$store.state.localModList.filter(
-                (mod: ManifestV2) => !mod.isEnabled() && dependencies.includes(mod.getName().toLowerCase() + '-')
-            );
-        }
-
         getDependantList(mod: ManifestV2): Set<ManifestV2> {
             return Dependants.getDependantList(mod, this.$store.state.localModList);
         }

diff --git a/src/components/views/LocalModList/LocalModCard.vue b/src/components/views/LocalModList/LocalModCard.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import { ExpandableCard, Link } from '../../all';
 import DonateButton from '../../buttons/DonateButton.vue';
 import ManifestV2 from '../../../model/ManifestV2';
@@ -17,12 +17,6 @@ export default class LocalModCard extends Vue {
     @Prop({required: true})
     readonly mod!: ManifestV2;
 
-    @Prop({required: true})
-    readonly disabledDependencies!: ManifestV2[];
-
-    @Prop({required: true})
-    readonly missingDependencies!: string[];
-
     @Prop({required: true})
     readonly expandedByDefault!: boolean;
 
@@ -32,6 +26,9 @@ export default class LocalModCard extends Vue {
     @Prop({required: true})
     readonly funkyMode!: boolean;
 
+    disabledDependencies: ManifestV2[] = [];
+    missingDependencies: string[] = [];
+
     get donationLink() {
         return this.tsMod ? this.tsMod.getDonationLink() : undefined;
     }
@@ -40,10 +37,42 @@ export default class LocalModCard extends Vue {
         return ModBridge.isCachedLatestVersion(this.mod);
     }
 
+    get localModList(): ManifestV2[] {
+        return this.$store.state.localModList;
+    }
+
     get tsMod() {
         return ModBridge.getCachedThunderstoreModFromMod(this.mod);
     }
 
+    @Watch("localModList")
+    updateDependencies() {
+        if (this.mod.getDependencies().length === 0) {
+            return;
+        }
+
+        const dependencies = this.mod.getDependencies();
+        const dependencyNames = dependencies.map(dependencyStringToModName);
+        const foundDependencies: ManifestV2[] = [];
+
+        for (const mod of this.localModList) {
+            if (foundDependencies.length === dependencyNames.length) {
+                break;
+            }
+
+            if (dependencyNames.includes(mod.getName())) {
+                foundDependencies.push(mod);
+            }
+        }
+
+        const foundNames = foundDependencies.map((mod) => mod.getName());
+
+        this.disabledDependencies = foundDependencies.filter((d) => !d.isEnabled());
+        this.missingDependencies = dependencies.filter(
+            (d) => !foundNames.includes(dependencyStringToModName(d))
+        );
+    }
+
     disableMod() {
         this.$emit('disableMod', this.mod);
     }
@@ -67,6 +96,14 @@ export default class LocalModCard extends Vue {
     viewDependencyList() {
         this.$emit('viewDependencyList', this.mod);
     }
+
+    created() {
+        this.updateDependencies();
+    }
+}
+
+function dependencyStringToModName(x: string) {
+    return x.substring(0, x.lastIndexOf('-'));
 }
 </script>