CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     - Requirements can use them so repeatables and challenges can be "buy max" without any extra effort
     - Conversions now use formulas instead of the old scaling functions system, allowing for arbitrary functions that are much easier to follow
     - Modifiers have a new getFormula property
+- Feature decorators, which simplify the process of adding extra values to features
 - Action feature, which is a clickable with a cooldown
 - ETA util (calculates time until a specific amount of a resource, based on its current gain rate)
 - createCollapsibleAchievements util

src/features/achievements/achievement.tsx

@@ -2,6 +2,7 @@ import { computed } from "@vue/reactivity";
 import { isArray } from "@vue/shared";
 import Select from "components/fields/Select.vue";
 import AchievementComponent from "features/achievements/Achievement.vue";
+import { Decorator, GenericDecorator } from "features/decorators/common";
 import {
     CoercableComponent,
     Component,
@@ -137,9 +138,11 @@ export type GenericAchievement = Replace<
  * @param optionsFunc Achievement options.
  */
 export function createAchievement<T extends AchievementOptions>(
-    optionsFunc?: OptionsFunc<T, BaseAchievement, GenericAchievement>
+    optionsFunc?: OptionsFunc<T, BaseAchievement, GenericAchievement>,
+    ...decorators: GenericDecorator[]
 ): Achievement<T> {
     const earned = persistent<boolean>(false, false);
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const achievement =
             optionsFunc?.call(feature, feature) ??
@@ -148,6 +151,10 @@ export function createAchievement<T extends AchievementOptions>(
         achievement.type = AchievementType;
         achievement[Component] = AchievementComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(achievement);
+        }
+
         achievement.earned = earned;
         achievement.complete = function () {
             earned.value = true;
@@ -179,6 +186,8 @@ export function createAchievement<T extends AchievementOptions>(
             }
         };
 
+        Object.assign(achievement, decoratedData);
+
         processComputable(achievement as T, "visibility");
         setDefault(achievement, "visibility", Visibility.Visible);
         const visibility = achievement.visibility as ProcessedComputable<Visibility | boolean>;
@@ -219,6 +228,11 @@ export function createAchievement<T extends AchievementOptions>(
         processComputable(achievement as T, "showPopups");
         setDefault(achievement, "showPopups", true);
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(achievement);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(achievement)), {});
         achievement[GatherProps] = function (this: GenericAchievement) {
             const {
                 visibility,
@@ -242,7 +256,8 @@ export function createAchievement<T extends AchievementOptions>(
                 classes,
                 mark,
                 small,
-                id
+                id,
+                ...decoratedProps
             };
         };
 

src/features/action.tsx

@@ -31,6 +31,7 @@ import { coerceComponent, isCoercableComponent, render } from "util/vue";
 import { computed, Ref, ref, unref } from "vue";
 import { BarOptions, createBar, GenericBar } from "./bars/bar";
 import { ClickableOptions } from "./clickables/clickable";
+import { Decorator, GenericDecorator } from "./decorators/common";
 
 /** A symbol used to identify {@link Action} features. */
 export const ActionType = Symbol("Action");
@@ -102,9 +103,11 @@ export type GenericAction = Replace<
  * @param optionsFunc Action options.
  */
 export function createAction<T extends ActionOptions>(
-    optionsFunc?: OptionsFunc<T, BaseAction, GenericAction>
+    optionsFunc?: OptionsFunc<T, BaseAction, GenericAction>,
+    ...decorators: GenericDecorator[]
 ): Action<T> {
     const progress = persistent<DecimalSource>(0);
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const action =
             optionsFunc?.call(feature, feature) ??
@@ -116,8 +119,13 @@ export function createAction<T extends ActionOptions>(
         // Required because of display changing types
         const genericAction = action as unknown as GenericAction;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(action);
+        }
+
         action.isHolding = ref(false);
         action.progress = progress;
+        Object.assign(action, decoratedData);
 
         processComputable(action as T, "visibility");
         setDefault(action, "visibility", Visibility.Visible);
@@ -229,6 +237,11 @@ export function createAction<T extends ActionOptions>(
             }
         };
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(action);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(action)));
         action[GatherProps] = function (this: GenericAction) {
             const {
                 display,
@@ -252,7 +265,8 @@ export function createAction<T extends ActionOptions>(
                 canClick,
                 small,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 

src/features/bars/bar.ts

@@ -1,4 +1,5 @@
 import BarComponent from "features/bars/Bar.vue";
+import { Decorator, GenericDecorator } from "features/decorators/common";
 import type {
     CoercableComponent,
     GenericComponent,
@@ -101,14 +102,22 @@ export type GenericBar = Replace<
  * @param optionsFunc Bar options.
  */
 export function createBar<T extends BarOptions>(
-    optionsFunc: OptionsFunc<T, BaseBar, GenericBar>
+    optionsFunc: OptionsFunc<T, BaseBar, GenericBar>,
+    ...decorators: GenericDecorator[]
 ): Bar<T> {
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const bar = optionsFunc.call(feature, feature);
         bar.id = getUniqueID("bar-");
         bar.type = BarType;
         bar[Component] = BarComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(bar);
+        }
+
+        Object.assign(bar, decoratedData);
+
         processComputable(bar as T, "visibility");
         setDefault(bar, "visibility", Visibility.Visible);
         processComputable(bar as T, "width");
@@ -124,6 +133,11 @@ export function createBar<T extends BarOptions>(
         processComputable(bar as T, "display");
         processComputable(bar as T, "mark");
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(bar);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(bar)), {});
         bar[GatherProps] = function (this: GenericBar) {
             const {
                 progress,
@@ -155,7 +169,8 @@ export function createBar<T extends BarOptions>(
                 baseStyle,
                 fillStyle,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 

src/features/challenges/challenge.tsx

@@ -1,6 +1,7 @@
 import { isArray } from "@vue/shared";
 import Toggle from "components/fields/Toggle.vue";
 import ChallengeComponent from "features/challenges/Challenge.vue";
+import { Decorator, GenericDecorator } from "features/decorators/common";
 import type {
     CoercableComponent,
     GenericComponent,
@@ -148,10 +149,12 @@ export type GenericChallenge = Replace<
  * @param optionsFunc Challenge options.
  */
 export function createChallenge<T extends ChallengeOptions>(
-    optionsFunc: OptionsFunc<T, BaseChallenge, GenericChallenge>
+    optionsFunc: OptionsFunc<T, BaseChallenge, GenericChallenge>,
+    ...decorators: GenericDecorator[]
 ): Challenge<T> {
     const completions = persistent(0);
     const active = persistent(false, false);
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const challenge = optionsFunc.call(feature, feature);
 
@@ -159,8 +162,14 @@ export function createChallenge<T extends ChallengeOptions>(
         challenge.type = ChallengeType;
         challenge[Component] = ChallengeComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(challenge);
+        }
+
         challenge.completions = completions;
         challenge.active = active;
+        Object.assign(challenge, decoratedData);
+
         challenge.completed = computed(() =>
             Decimal.gt((challenge as GenericChallenge).completions.value, 0)
         );
@@ -258,6 +267,11 @@ export function createChallenge<T extends ChallengeOptions>(
             });
         }
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(challenge);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(challenge)), {});
         challenge[GatherProps] = function (this: GenericChallenge) {
             const {
                 active,
@@ -287,7 +301,8 @@ export function createChallenge<T extends ChallengeOptions>(
                 mark,
                 id,
                 toggle,
-                requirements
+                requirements,
+                ...decoratedProps
             };
         };
 

src/features/clickables/clickable.ts

@@ -1,4 +1,5 @@
 import ClickableComponent from "features/clickables/Clickable.vue";
+import { Decorator, GenericDecorator } from "features/decorators/common";
 import type {
     CoercableComponent,
     GenericComponent,
@@ -95,8 +96,10 @@ export type GenericClickable = Replace<
  * @param optionsFunc Clickable options.
  */
 export function createClickable<T extends ClickableOptions>(
-    optionsFunc?: OptionsFunc<T, BaseClickable, GenericClickable>
+    optionsFunc?: OptionsFunc<T, BaseClickable, GenericClickable>,
+    ...decorators: GenericDecorator[]
 ): Clickable<T> {
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const clickable =
             optionsFunc?.call(feature, feature) ??
@@ -105,6 +108,12 @@ export function createClickable<T extends ClickableOptions>(
         clickable.type = ClickableType;
         clickable[Component] = ClickableComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(clickable);
+        }
+
+        Object.assign(clickable, decoratedData);
+
         processComputable(clickable as T, "visibility");
         setDefault(clickable, "visibility", Visibility.Visible);
         processComputable(clickable as T, "canClick");
@@ -131,6 +140,11 @@ export function createClickable<T extends ClickableOptions>(
             };
         }
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(clickable);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(clickable)), {});
         clickable[GatherProps] = function (this: GenericClickable) {
             const {
                 display,
@@ -154,7 +168,8 @@ export function createClickable<T extends ClickableOptions>(
                 canClick,
                 small,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 

src/features/conversion.ts

@@ -15,6 +15,7 @@ import { convertComputable, processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
+import { GenericDecorator } from "./decorators/common";
 
 /** An object that configures a {@link Conversion}. */
 export interface ConversionOptions {
@@ -123,11 +124,16 @@ export type GenericConversion = Replace<
  * @see {@link createIndependentConversion}.
  */
 export function createConversion<T extends ConversionOptions>(
-    optionsFunc: OptionsFunc<T, BaseConversion, GenericConversion>
+    optionsFunc: OptionsFunc<T, BaseConversion, GenericConversion>,
+    ...decorators: GenericDecorator[]
 ): Conversion<T> {
     return createLazyProxy(feature => {
         const conversion = optionsFunc.call(feature, feature);
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(conversion);
+        }
+
         (conversion as GenericConversion).formula = conversion.formula(
             Formula.variable(conversion.baseResource)
         );
@@ -187,6 +193,10 @@ export function createConversion<T extends ConversionOptions>(
         processComputable(conversion as T, "buyMax");
         setDefault(conversion, "buyMax", true);
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(conversion);
+        }
+
         return conversion as unknown as Conversion<T>;
     });
 }

src/features/decorators/bonusDecorator.ts

@@ -0,0 +1,97 @@
+import { Replace } from "features/feature";
+import Decimal, { DecimalSource } from "util/bignum";
+import { Computable, GetComputableType, ProcessedComputable, processComputable } from "util/computed";
+import { Ref, computed, unref } from "vue";
+import { Decorator } from "./common";
+
+export interface BonusAmountFeatureOptions {
+    bonusAmount: Computable<DecimalSource>;
+    totalAmount?: Computable<DecimalSource>;
+}
+export interface BonusCompletionsFeatureOptions {
+    bonusCompletions: Computable<DecimalSource>;
+    totalCompletions?: Computable<DecimalSource>;
+}
+
+export interface BaseBonusAmountFeature {
+    amount: Ref<DecimalSource>;
+    bonusAmount: ProcessedComputable<DecimalSource>;
+    totalAmount?: Ref<DecimalSource>;
+}
+export interface BaseBonusCompletionsFeature {
+    completions: Ref<DecimalSource>;
+    bonusCompletions: ProcessedComputable<DecimalSource>;
+    totalCompletions?: Ref<DecimalSource>;
+}
+
+export type BonusAmountFeature<T extends BonusAmountFeatureOptions> = Replace<
+    T, { bonusAmount: GetComputableType<T["bonusAmount"]>; }
+>;
+export type BonusCompletionsFeature<T extends BonusCompletionsFeatureOptions> = Replace<
+    T, { bonusAmount: GetComputableType<T["bonusCompletions"]>; }
+>;
+
+export type GenericBonusAmountFeature = Replace<
+    BonusAmountFeature<BonusAmountFeatureOptions>,
+    {
+        bonusAmount: ProcessedComputable<DecimalSource>;
+        totalAmount: ProcessedComputable<DecimalSource>;
+    }
+>;
+export type GenericBonusCompletionsFeature = Replace<
+    BonusCompletionsFeature<BonusCompletionsFeatureOptions>,
+    {
+        bonusCompletions: ProcessedComputable<DecimalSource>;
+        totalCompletions: ProcessedComputable<DecimalSource>;
+    }
+>;
+
+/**
+ * Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".  
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusAmountFeatureOptions}.  
+ * Additionally, the base feature must have an `amount` property.  
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusAmountFeature}.
+ * @example ```ts
+ * createRepeatable<RepeatableOptions & BonusAmountFeatureOptions>(() => ({
+ *   bonusAmount: noPersist(otherRepeatable.amount),
+ *   ...
+ * }), bonusAmountDecorator) as GenericRepeatable & GenericBonusAmountFeature
+ */
+export const bonusAmountDecorator: Decorator<BonusAmountFeatureOptions, BaseBonusAmountFeature, GenericBonusAmountFeature> = {
+    preConstruct(feature) {
+        if (feature.amount === undefined) {
+            console.error(`Decorated feature ${feature.id} does not contain the required 'amount' property"`);
+        }
+    },
+    postConstruct(feature) {
+        processComputable(feature, "bonusAmount");
+        if (feature.totalAmount === undefined) {
+            feature.totalAmount = computed(() => Decimal.add(
+                unref(feature.amount ?? 0),
+                unref(feature.bonusAmount as ProcessedComputable<DecimalSource>)
+            ));
+        }
+    }
+}
+
+/**
+ * Allows the addition of "bonus levels" to the decorated feature, with an accompanying "total amount".  
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode BonusCompletionFeatureOptions}.  
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericBonusCompletionFeature}.
+ * @example ```ts
+ * createChallenge<ChallengeOptions & BonusCompletionFeatureOptions>(() => ({
+ *   bonusCompletions: noPersist(otherChallenge.completions),
+ *   ...
+ * }), bonusCompletionDecorator) as GenericChallenge & GenericBonusCompletionFeature
+ */
+export const bonusCompletionsDecorator: Decorator<BonusCompletionsFeatureOptions, BaseBonusCompletionsFeature, GenericBonusCompletionsFeature> = {
+    postConstruct(feature) {
+        processComputable(feature, "bonusCompletions");
+        if (feature.totalCompletions === undefined) {
+            feature.totalCompletions = computed(() => Decimal.add(
+                unref(feature.completions ?? 0),
+                unref(feature.bonusCompletions as ProcessedComputable<DecimalSource>)
+            ));
+        }
+    }
+}

src/features/decorators/common.ts

@@ -0,0 +1,43 @@
+import { Replace, OptionsObject } from "../feature";
+import { Computable, GetComputableType, processComputable, ProcessedComputable } from "util/computed";
+import { Persistent, State } from "game/persistence";
+
+export type Decorator<FeatureOptions, BaseFeature = object, GenericFeature = BaseFeature, S extends State = State> = {
+    getPersistentData?(): Record<string, Persistent<S>>;
+    preConstruct?(feature: OptionsObject<FeatureOptions,BaseFeature & {id:string},GenericFeature>): void;
+    postConstruct?(feature: OptionsObject<FeatureOptions,BaseFeature & {id:string},GenericFeature>): void;
+    getGatheredProps?(feature: OptionsObject<FeatureOptions,BaseFeature & {id:string},GenericFeature>): Partial<OptionsObject<FeatureOptions,BaseFeature & {id:string},GenericFeature>>
+}
+
+export type GenericDecorator = Decorator<unknown>;
+
+export interface EffectFeatureOptions {
+    effect: Computable<any>;
+}
+
+export type EffectFeature<T extends EffectFeatureOptions> = Replace<
+    T, { effect: GetComputableType<T["effect"]>; }
+>;
+
+export type GenericEffectFeature = Replace<
+    EffectFeature<EffectFeatureOptions>,
+    { effect: ProcessedComputable<any>; }
+>;
+
+/**
+ * Allows the usage of an `effect` field in the decorated feature.  
+ * To function properly, the `createFeature()` function must have its generic type extended by {@linkcode EffectFeatureOptions}.  
+ * To allow access to the decorated values outside the `createFeature()` function, the output type must be extended by {@linkcode GenericEffectFeature}.
+ * @example ```ts
+ * createRepeatable<RepeatableOptions & EffectFeatureOptions>(() => ({
+ *   effect() { return Decimal.pow(2, this.amount); },
+ *   ...
+ * }), effectDecorator) as GenericUpgrade & GenericEffectFeature;
+ * ```
+ */
+export const effectDecorator: Decorator<EffectFeatureOptions, unknown, GenericEffectFeature> = {
+    postConstruct(feature) {
+        processComputable(feature, "effect");
+    }
+}
+

src/features/feature.ts

@@ -42,7 +42,9 @@ export type Replace<T, S> = S & Omit<T, keyof S>;
  * with "this" bound to what the type will eventually be processed into.
  * Intended for making lazily evaluated objects.
  */
-export type OptionsFunc<T, R = unknown, S = R> = (obj: R) => T & Partial<R> & ThisType<T & S>;
+export type OptionsFunc<T, R = unknown, S = R> = (obj: R) => OptionsObject<T,R,S>;
+
+export type OptionsObject<T, R = unknown, S = R> = T & Partial<R> & ThisType<T & S>;
 
 let id = 0;
 /**

src/features/repeatable.tsx

@@ -30,6 +30,7 @@ import { createLazyProxy } from "util/proxies";
 import { coerceComponent, isCoercableComponent } from "util/vue";
 import type { Ref } from "vue";
 import { computed, unref } from "vue";
+import { Decorator, GenericDecorator } from "./decorators/common";
 
 /** A symbol used to identify {@link Repeatable} features. */
 export const RepeatableType = Symbol("Repeatable");
@@ -129,19 +130,27 @@ export type GenericRepeatable = Replace<
  * @param optionsFunc Repeatable options.
  */
 export function createRepeatable<T extends RepeatableOptions>(
-    optionsFunc: OptionsFunc<T, BaseRepeatable, GenericRepeatable>
+    optionsFunc: OptionsFunc<T, BaseRepeatable, GenericRepeatable>,
+    ...decorators: GenericDecorator[]
 ): Repeatable<T> {
     const amount = persistent<DecimalSource>(0);
-    return createLazyProxy(feature => {
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
+    return createLazyProxy<Repeatable<T>, Repeatable<T>>(feature => {
         const repeatable = optionsFunc.call(feature, feature);
 
         repeatable.id = getUniqueID("repeatable-");
         repeatable.type = RepeatableType;
         repeatable[Component] = ClickableComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(repeatable);
+        }
+
         repeatable.amount = amount;
         repeatable.amount[DefaultValue] = repeatable.initialAmount ?? 0;
 
+        Object.assign(repeatable, decoratedData);
+
         const limitRequirement = {
             requirementMet: computed(() =>
                 Decimal.sub(
@@ -223,14 +232,12 @@ export function createRepeatable<T extends RepeatableOptions>(
                         {currDisplay.showAmount === false ? null : (
                             <div>
                                 <br />
-                                {unref(genericRepeatable.limit) === Decimal.dInf ? (
-                                    <>Amount: {formatWhole(genericRepeatable.amount.value)}</>
-                                ) : (
-                                    <>
-                                        Amount: {formatWhole(genericRepeatable.amount.value)} /{" "}
-                                        {formatWhole(unref(genericRepeatable.limit))}
-                                    </>
-                                )}
+                                joinJSX(
+                                    <>Amount: {formatWhole(genericRepeatable.amount.value)}</>,
+                                    {unref(genericRepeatable.limit) !== Decimal.dInf ? (
+                                        <> / {formatWhole(unref(genericRepeatable.limit))}</>
+                                    ) : undefined}
+                                )
                             </div>
                         )}
                         {currDisplay.effectDisplay == null ? null : (
@@ -263,6 +270,11 @@ export function createRepeatable<T extends RepeatableOptions>(
         processComputable(repeatable as T, "small");
         processComputable(repeatable as T, "maximize");
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(repeatable);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(repeatable)), {});
         repeatable[GatherProps] = function (this: GenericRepeatable) {
             const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
                 this;
@@ -275,7 +287,8 @@ export function createRepeatable<T extends RepeatableOptions>(
                 canClick,
                 small,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 

src/features/trees/tree.ts

@@ -1,3 +1,4 @@
+import { Decorator, GenericDecorator } from "features/decorators/common";
 import type {
     CoercableComponent,
     GenericComponent,
@@ -101,8 +102,10 @@ export type GenericTreeNode = Replace<
  * @param optionsFunc Tree Node options.
  */
 export function createTreeNode<T extends TreeNodeOptions>(
-    optionsFunc?: OptionsFunc<T, BaseTreeNode, GenericTreeNode>
+    optionsFunc?: OptionsFunc<T, BaseTreeNode, GenericTreeNode>,
+    ...decorators: GenericDecorator[]
 ): TreeNode<T> {
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const treeNode =
             optionsFunc?.call(feature, feature) ??
@@ -111,6 +114,12 @@ export function createTreeNode<T extends TreeNodeOptions>(
         treeNode.type = TreeNodeType;
         treeNode[Component] = TreeNodeComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(treeNode);
+        }
+
+        Object.assign(decoratedData);
+
         processComputable(treeNode as T, "visibility");
         setDefault(treeNode, "visibility", Visibility.Visible);
         processComputable(treeNode as T, "canClick");
@@ -122,6 +131,10 @@ export function createTreeNode<T extends TreeNodeOptions>(
         processComputable(treeNode as T, "style");
         processComputable(treeNode as T, "mark");
 
+        for (const decorator of decorators) {
+            decorator.postConstruct?.(treeNode);
+        }
+
         if (treeNode.onClick) {
             const onClick = treeNode.onClick.bind(treeNode);
             treeNode.onClick = function (e) {
@@ -139,6 +152,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
             };
         }
 
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(treeNode)), {});
         treeNode[GatherProps] = function (this: GenericTreeNode) {
             const {
                 display,
@@ -164,7 +178,8 @@ export function createTreeNode<T extends TreeNodeOptions>(
                 glowColor,
                 canClick,
                 mark,
-                id
+                id,
+                ...decoratedProps
             };
         };
 

src/features/upgrades/upgrade.ts

@@ -1,4 +1,5 @@
 import { isArray } from "@vue/shared";
+import { Decorator, GenericDecorator } from "features/decorators/common";
 import type {
     CoercableComponent,
     GenericComponent,
@@ -14,11 +15,13 @@ import {
     setDefault,
     Visibility
 } from "features/feature";
+import { createResource } from "features/resources/resource";
 import UpgradeComponent from "features/upgrades/Upgrade.vue";
 import type { GenericLayer } from "game/layers";
 import type { Persistent } from "game/persistence";
 import { persistent } from "game/persistence";
 import {
+createCostRequirement,
     createVisibilityRequirement,
     payRequirements,
     Requirements,
@@ -115,16 +118,24 @@ export type GenericUpgrade = Replace<
  * @param optionsFunc Upgrade options.
  */
 export function createUpgrade<T extends UpgradeOptions>(
-    optionsFunc: OptionsFunc<T, BaseUpgrade, GenericUpgrade>
+    optionsFunc: OptionsFunc<T, BaseUpgrade, GenericUpgrade>,
+    ...decorators: GenericDecorator[]
 ): Upgrade<T> {
     const bought = persistent<boolean>(false, false);
+    const decoratedData = decorators.reduce((current, next) => Object.assign(current, next.getPersistentData?.()), {});
     return createLazyProxy(feature => {
         const upgrade = optionsFunc.call(feature, feature);
         upgrade.id = getUniqueID("upgrade-");
         upgrade.type = UpgradeType;
         upgrade[Component] = UpgradeComponent as GenericComponent;
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(upgrade);
+        }
+
         upgrade.bought = bought;
+        Object.assign(upgrade, decoratedData);
+
         upgrade.canPurchase = computed(() => requirementsMet(upgrade.requirements));
         upgrade.purchase = function () {
             const genericUpgrade = upgrade as GenericUpgrade;
@@ -150,6 +161,11 @@ export function createUpgrade<T extends UpgradeOptions>(
         processComputable(upgrade as T, "display");
         processComputable(upgrade as T, "mark");
 
+        for (const decorator of decorators) {
+            decorator.preConstruct?.(upgrade);
+        }
+
+        const decoratedProps = decorators.reduce((current, next) => Object.assign(current, next.getGatheredProps?.(upgrade)), {});
         upgrade[GatherProps] = function (this: GenericUpgrade) {
             const {
                 display,
@@ -173,7 +189,8 @@ export function createUpgrade<T extends UpgradeOptions>(
                 bought,
                 mark,
                 id,
-                purchase
+                purchase,
+                ...decoratedProps
             };
         };