Make every component use GenericComponent

some projects seem to require this and others not?

src/features/achievements/achievement.tsx

@@ -3,6 +3,7 @@ import {
     CoercableComponent,
     Component,
     GatherProps,
+    GenericComponent,
     getUniqueID,
     isVisible,
     OptionsFunc,
@@ -48,7 +49,7 @@ export interface BaseAchievement {
     earned: Persistent<boolean>;
     complete: VoidFunction;
     type: typeof AchievementType;
-    [Component]: typeof AchievementComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -79,7 +80,7 @@ export function createAchievement<T extends AchievementOptions>(
         const achievement = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         achievement.id = getUniqueID("achievement-");
         achievement.type = AchievementType;
-        achievement[Component] = AchievementComponent;
+        achievement[Component] = AchievementComponent as GenericComponent;
 
         achievement.earned = earned;
         achievement.complete = function () {

src/features/bars/bar.ts

@@ -40,7 +40,7 @@ export interface BarOptions {
 export interface BaseBar {
     id: string;
     type: typeof BarType;
-    [Component]: typeof BarComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -77,7 +77,7 @@ export function createBar<T extends BarOptions>(
         const bar = optionsFunc();
         bar.id = getUniqueID("bar-");
         bar.type = BarType;
-        bar[Component] = BarComponent;
+        bar[Component] = BarComponent as GenericComponent;
 
         processComputable(bar as T, "visibility");
         setDefault(bar, "visibility", Visibility.Visible);

src/features/boards/board.ts

@@ -1,5 +1,5 @@
 import BoardComponent from "features/boards/Board.vue";
-import type { OptionsFunc, Replace, StyleValue } from "features/feature";
+import type { GenericComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
 import {
     Component,
     findFeatures,
@@ -178,7 +178,7 @@ export interface BaseBoard {
     selectedAction: Ref<GenericBoardNodeAction | null>;
     mousePosition: Ref<{ x: number; y: number } | null>;
     type: typeof BoardType;
-    [Component]: typeof BoardComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -221,7 +221,7 @@ export function createBoard<T extends BoardOptions>(
         const board = optionsFunc();
         board.id = getUniqueID("board-");
         board.type = BoardType;
-        board[Component] = BoardComponent;
+        board[Component] = BoardComponent as GenericComponent;
 
         if (board.state) {
             deletePersistent(state);

src/features/challenges/challenge.tsx

@@ -1,7 +1,13 @@
 import { isArray } from "@vue/shared";
 import Toggle from "components/fields/Toggle.vue";
 import ChallengeComponent from "features/challenges/Challenge.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import {
     Component,
     GatherProps,
@@ -67,7 +73,7 @@ export interface BaseChallenge {
     toggle: VoidFunction;
     complete: (remainInChallenge?: boolean) => void;
     type: typeof ChallengeType;
-    [Component]: typeof ChallengeComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -106,7 +112,7 @@ export function createChallenge<T extends ChallengeOptions>(
 
         challenge.id = getUniqueID("challenge-");
         challenge.type = ChallengeType;
-        challenge[Component] = ChallengeComponent;
+        challenge[Component] = ChallengeComponent as GenericComponent;
 
         challenge.completions = completions;
         challenge.active = active;

src/features/clickables/clickable.ts

@@ -42,7 +42,7 @@ export interface ClickableOptions {
 export interface BaseClickable {
     id: string;
     type: typeof ClickableType;
-    [Component]: typeof ClickableComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -73,7 +73,7 @@ export function createClickable<T extends ClickableOptions>(
         const clickable = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         clickable.id = getUniqueID("clickable-");
         clickable.type = ClickableType;
-        clickable[Component] = ClickableComponent;
+        clickable[Component] = ClickableComponent as GenericComponent;
 
         processComputable(clickable as T, "visibility");
         setDefault(clickable, "visibility", Visibility.Visible);

src/features/grids/grid.ts

@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import GridComponent from "features/grids/Grid.vue";
 import type { Persistent, State } from "game/persistence";
@@ -206,7 +212,7 @@ export interface BaseGrid {
     cells: Record<string | number, GridCell>;
     cellState: Persistent<Record<string | number, State>>;
     type: typeof GridType;
-    [Component]: typeof GridComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -242,7 +248,7 @@ export function createGrid<T extends GridOptions>(
     return createLazyProxy(() => {
         const grid = optionsFunc();
         grid.id = getUniqueID("grid-");
-        grid[Component] = GridComponent;
+        grid[Component] = GridComponent as GenericComponent;
 
         grid.cellState = cellState;
 

src/features/infoboxes/infobox.ts

@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import InfoboxComponent from "features/infoboxes/Infobox.vue";
 import type { Persistent } from "game/persistence";
@@ -30,7 +36,7 @@ export interface BaseInfobox {
     id: string;
     collapsed: Persistent<boolean>;
     type: typeof InfoboxType;
-    [Component]: typeof InfoboxComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -63,7 +69,7 @@ export function createInfobox<T extends InfoboxOptions>(
         const infobox = optionsFunc();
         infobox.id = getUniqueID("infobox-");
         infobox.type = InfoboxType;
-        infobox[Component] = InfoboxComponent;
+        infobox[Component] = InfoboxComponent as GenericComponent;
 
         infobox.collapsed = collapsed;
 

src/features/links/links.ts

@@ -1,4 +1,4 @@
-import type { OptionsFunc, Replace } from "features/feature";
+import type { GenericComponent, OptionsFunc, Replace } from "features/feature";
 import { GatherProps, Component } from "features/feature";
 import type { Position } from "game/layers";
 import type { Computable, GetComputableType, ProcessedComputable } from "util/computed";
@@ -22,7 +22,7 @@ export interface LinksOptions {
 
 export interface BaseLinks {
     type: typeof LinksType;
-    [Component]: typeof LinksComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -46,7 +46,7 @@ export function createLinks<T extends LinksOptions>(
     return createLazyProxy(() => {
         const links = optionsFunc();
         links.type = LinksType;
-        links[Component] = LinksComponent;
+        links[Component] = LinksComponent as GenericComponent;
 
         processComputable(links as T, "links");
 

src/features/milestones/milestone.tsx

@@ -69,7 +69,7 @@ export interface BaseMilestone {
     earned: Persistent<boolean>;
     complete: VoidFunction;
     type: typeof MilestoneType;
-    [Component]: typeof MilestoneComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -99,7 +99,7 @@ export function createMilestone<T extends MilestoneOptions>(
         const milestone = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         milestone.id = getUniqueID("milestone-");
         milestone.type = MilestoneType;
-        milestone[Component] = MilestoneComponent;
+        milestone[Component] = MilestoneComponent as GenericComponent;
 
         milestone.earned = earned;
         milestone.complete = function () {

src/features/repeatable.tsx

@@ -1,6 +1,12 @@
 import { isArray } from "@vue/shared";
 import ClickableComponent from "features/clickables/Clickable.vue";
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, jsx, setDefault, Visibility } from "features/feature";
 import { DefaultValue, Persistent, persistent } from "game/persistence";
 import {
@@ -88,7 +94,7 @@ export interface BaseRepeatable {
     /** A symbol that helps identify features of the same type. */
     type: typeof RepeatableType;
     /** The Vue component used to render this feature. */
-    [Component]: typeof ClickableComponent;
+    [Component]: GenericComponent;
     /** A function to gather the props the vue component requires for this feature. */
     [GatherProps]: () => Record<string, unknown>;
 }
@@ -131,7 +137,7 @@ export function createRepeatable<T extends RepeatableOptions>(
 
         repeatable.id = getUniqueID("repeatable-");
         repeatable.type = RepeatableType;
-        repeatable[Component] = ClickableComponent;
+        repeatable[Component] = ClickableComponent as GenericComponent;
 
         repeatable.amount = amount;
         repeatable.amount[DefaultValue] = repeatable.initialAmount ?? 0;

src/features/tabs/tab.ts

@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID } from "features/feature";
 import TabComponent from "features/tabs/Tab.vue";
 import type { Computable, GetComputableType } from "util/computed";
@@ -15,7 +21,7 @@ export interface TabOptions {
 export interface BaseTab {
     id: string;
     type: typeof TabType;
-    [Component]: typeof TabComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -37,7 +43,7 @@ export function createTab<T extends TabOptions>(
         const tab = optionsFunc();
         tab.id = getUniqueID("tab-");
         tab.type = TabType;
-        tab[Component] = TabComponent;
+        tab[Component] = TabComponent as GenericComponent;
 
         tab[GatherProps] = function (this: GenericTab) {
             const { display } = this;

src/features/tabs/tabFamily.ts

@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import {
     Component,
     GatherProps,
@@ -37,7 +43,7 @@ export interface TabButtonOptions {
 
 export interface BaseTabButton {
     type: typeof TabButtonType;
-    [Component]: typeof TabButtonComponent;
+    [Component]: GenericComponent;
 }
 
 export type TabButton<T extends TabButtonOptions> = Replace<
@@ -73,7 +79,7 @@ export interface BaseTabFamily {
     activeTab: Ref<GenericTab | CoercableComponent | null>;
     selected: Persistent<string>;
     type: typeof TabFamilyType;
-    [Component]: typeof TabFamilyComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -107,13 +113,13 @@ export function createTabFamily<T extends TabFamilyOptions>(
 
         tabFamily.id = getUniqueID("tabFamily-");
         tabFamily.type = TabFamilyType;
-        tabFamily[Component] = TabFamilyComponent;
+        tabFamily[Component] = TabFamilyComponent as GenericComponent;
 
         tabFamily.tabs = Object.keys(tabs).reduce<Record<string, GenericTabButton>>(
             (parsedTabs, tab) => {
                 const tabButton: TabButtonOptions & Partial<BaseTabButton> = tabs[tab]();
                 tabButton.type = TabButtonType;
-                tabButton[Component] = TabButtonComponent;
+                tabButton[Component] = TabButtonComponent as GenericComponent;
 
                 processComputable(tabButton as TabButtonOptions, "visibility");
                 setDefault(tabButton, "visibility", Visibility.Visible);

src/features/trees/tree.ts

@@ -1,4 +1,10 @@
-import type { CoercableComponent, OptionsFunc, Replace, StyleValue } from "features/feature";
+import type {
+    CoercableComponent,
+    GenericComponent,
+    OptionsFunc,
+    Replace,
+    StyleValue
+} from "features/feature";
 import { Component, GatherProps, getUniqueID, setDefault, Visibility } from "features/feature";
 import type { Link } from "features/links/links";
 import type { GenericReset } from "features/reset";
@@ -39,7 +45,7 @@ export interface TreeNodeOptions {
 export interface BaseTreeNode {
     id: string;
     type: typeof TreeNodeType;
-    [Component]: typeof TreeNodeComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -72,7 +78,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
         const treeNode = optionsFunc?.() ?? ({} as ReturnType<NonNullable<typeof optionsFunc>>);
         treeNode.id = getUniqueID("treeNode-");
         treeNode.type = TreeNodeType;
-        treeNode[Component] = TreeNodeComponent;
+        treeNode[Component] = TreeNodeComponent as GenericComponent;
 
         processComputable(treeNode as T, "visibility");
         setDefault(treeNode, "visibility", Visibility.Visible);
@@ -157,7 +163,7 @@ export interface BaseTree {
     isResetting: Ref<boolean>;
     resettingNode: Ref<GenericTreeNode | null>;
     type: typeof TreeType;
-    [Component]: typeof TreeComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -186,7 +192,7 @@ export function createTree<T extends TreeOptions>(
         const tree = optionsFunc();
         tree.id = getUniqueID("tree-");
         tree.type = TreeType;
-        tree[Component] = TreeComponent;
+        tree[Component] = TreeComponent as GenericComponent;
 
         tree.isResetting = ref(false);
         tree.resettingNode = shallowRef(null);

src/features/upgrades/upgrade.ts

@@ -61,7 +61,7 @@ export interface BaseUpgrade {
     canPurchase: Ref<boolean>;
     purchase: VoidFunction;
     type: typeof UpgradeType;
-    [Component]: typeof UpgradeComponent;
+    [Component]: GenericComponent;
     [GatherProps]: () => Record<string, unknown>;
 }
 
@@ -92,7 +92,7 @@ export function createUpgrade<T extends UpgradeOptions>(
         const upgrade = optionsFunc();
         upgrade.id = getUniqueID("upgrade-");
         upgrade.type = UpgradeType;
-        upgrade[Component] = UpgradeComponent;
+        upgrade[Component] = UpgradeComponent as GenericComponent;
 
         upgrade.bought = bought;
         upgrade.canPurchase = computed(() => requirementsMet(upgrade.requirements));