Improve LocalModCard performance

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);
  }

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>