Made modifiers lazy

src/data/common.tsx

@@ -20,6 +20,7 @@ import type {
     ProcessedComputable
 } from "util/computed";
 import { convertComputable, processComputable } from "util/computed";
+import { createLazyProxy } from "util/proxies";
 import { renderJSX } from "util/vue";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
@@ -253,10 +254,14 @@ export interface Section {
 /**
  * Takes an array of modifier "sections", and creates a JSXFunction that can render all those sections, and allow each section to be collapsed.
  * Also returns a list of persistent refs that are used to control which sections are currently collapsed.
+ * @param sectionsFunc A function that returns the sections to display.
  */
 export function createCollapsibleModifierSections(
-    sections: Section[]
+    sectionsFunc: () => Section[]
 ): [JSXFunction, Persistent<boolean>[]] {
+    return createLazyProxy(() => {
+        const sections = sectionsFunc();
+
         const processedBase = sections.map(s => convertComputable(s.base));
         const processedBaseText = sections.map(s => convertComputable(s.baseText));
         const processedVisible = sections.map(s => convertComputable(s.visible));
@@ -309,6 +314,7 @@ export function createCollapsibleModifierSections(
             return <>{sectionJSX}</>;
         });
         return [jsxFunc, collapsed];
+    });
 }
 
 /**

src/game/modifiers.tsx

@@ -6,6 +6,7 @@ import Decimal, { format } from "util/bignum";
 import type { WithRequired } from "util/common";
 import type { Computable, ProcessedComputable } from "util/computed";
 import { convertComputable } from "util/computed";
+import { createLazyProxy } from "util/proxies";
 import { renderJSX } from "util/vue";
 import { computed, unref } from "vue";
 
@@ -44,17 +45,31 @@ export type ModifierFromOptionalParams<T, S> = T extends undefined
     ? Omit<WithRequired<Modifier, "revert" | "description">, "enabled">
     : WithRequired<Modifier, "revert" | "enabled" | "description">;
 
+/** An object that configures an additive modifier via {@link createAdditiveModifier}. */
+export interface AdditiveModifierOptions<
+    T extends Computable<CoercableComponent> | undefined,
+    S extends Computable<boolean> | undefined
+> {
+    /** The amount to add to the input value. */
+    addend: Computable<DecimalSource>;
+    /** Description of what this modifier is doing. */
+    description?: T;
+    /** A computable that will be processed and passed directly into the returned modifier. */
+    enabled?: S;
+}
+
 /**
  * Create a modifier that adds some value to the input value.
- * @param addend The amount to add to the input value.
+ * @param optionsFunc Additive modifier options.
- * @param description Description of what this modifier is doing.
- * @param enabled A computable that will be processed and passed directly into the returned modifier.
  */
 export function createAdditiveModifier<
     T extends Computable<CoercableComponent> | undefined,
     S extends Computable<boolean> | undefined,
     R = ModifierFromOptionalParams<T, S>
->(addend: Computable<DecimalSource>, description?: T, enabled?: S): R {
+>(optionsFunc: () => AdditiveModifierOptions<T, S>): R {
+    return createLazyProxy(() => {
+        const { addend, description, enabled } = optionsFunc();
+
         const processedAddend = convertComputable(addend);
         const processedDescription = convertComputable(description);
         const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
@@ -79,20 +94,35 @@ export function createAdditiveModifier<
                               ) : null}
                           </div>
                       ))
-    } as unknown as R;
+        };
+    }) as unknown as R;
+}
+
+/** An object that configures an multiplicative modifier via {@link createMultiplicativeModifier}. */
+export interface MultiplicativeModifierOptions<
+    T extends Computable<CoercableComponent> | undefined,
+    S extends Computable<boolean> | undefined
+> {
+    /** The amount to multiply the input value by. */
+    multiplier: Computable<DecimalSource>;
+    /** Description of what this modifier is doing. */
+    description?: T;
+    /** A computable that will be processed and passed directly into the returned modifier. */
+    enabled?: S;
 }
 
 /**
  * Create a modifier that multiplies the input value by some value.
- * @param multiplier The value to multiply the input value by.
+ * @param optionsFunc Multiplicative modifier options.
- * @param description Description of what this modifier is doing.
- * @param enabled A computable that will be processed and passed directly into the returned modifier.
  */
 export function createMultiplicativeModifier<
     T extends Computable<CoercableComponent> | undefined,
     S extends Computable<boolean> | undefined,
     R = ModifierFromOptionalParams<T, S>
->(multiplier: Computable<DecimalSource>, description?: T, enabled?: S): R {
+>(optionsFunc: () => MultiplicativeModifierOptions<T, S>): R {
+    return createLazyProxy(() => {
+        const { multiplier, description, enabled } = optionsFunc();
+
         const processedMultiplier = convertComputable(multiplier);
         const processedDescription = convertComputable(description);
         const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
@@ -105,7 +135,9 @@ export function createMultiplicativeModifier<
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                          <span class="modifier-amount">x{format(unref(processedMultiplier))}</span>
+                              <span class="modifier-amount">
+                                  x{format(unref(processedMultiplier))}
+                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@@ -114,20 +146,35 @@ export function createMultiplicativeModifier<
                               ) : null}
                           </div>
                       ))
-    } as unknown as R;
+        };
+    }) as unknown as R;
+}
+
+/** An object that configures an exponential modifier via {@link createExponentialModifier}. */
+export interface ExponentialModifierOptions<
+    T extends Computable<CoercableComponent> | undefined,
+    S extends Computable<boolean> | undefined
+> {
+    /** The amount to raise the input value to the power of. */
+    exponent: Computable<DecimalSource>;
+    /** Description of what this modifier is doing. */
+    description?: T;
+    /** A computable that will be processed and passed directly into the returned modifier. */
+    enabled?: S;
 }
 
 /**
  * Create a modifier that raises the input value to the power of some value.
- * @param exponent The value to raise the input value to the power of.
+ * @param optionsFunc Exponential modifier options.
- * @param description Description of what this modifier is doing.
- * @param enabled A computable that will be processed and passed directly into the returned modifier.
  */
 export function createExponentialModifier<
     T extends Computable<CoercableComponent> | undefined,
     S extends Computable<boolean> | undefined,
     R = ModifierFromOptionalParams<T, S>
->(exponent: Computable<DecimalSource>, description?: T, enabled?: S): R {
+>(optionsFunc: () => ExponentialModifierOptions<T, S>): R {
+    return createLazyProxy(() => {
+        const { exponent, description, enabled } = optionsFunc();
+
         const processedExponent = convertComputable(exponent);
         const processedDescription = convertComputable(description);
         const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
@@ -140,7 +187,9 @@ export function createExponentialModifier<
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                          <span class="modifier-amount">^{format(unref(processedExponent))}</span>
+                              <span class="modifier-amount">
+                                  ^{format(unref(processedExponent))}
+                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@@ -149,7 +198,8 @@ export function createExponentialModifier<
                               ) : null}
                           </div>
                       ))
-    } as unknown as R;
+        };
+    }) as unknown as R;
 }
 
 /**