Made TreeNodes VueFeatures

src/features/trees/Tree.vue

@@ -1,37 +1,17 @@
 <template>
-    <span class="row" v-for="(row, index) in unref(nodes)" :key="index" v-bind="$attrs">
-        <TreeNode
-            v-for="(node, nodeIndex) in row"
-            :key="nodeIndex"
-            v-bind="gatherNodeProps(node)"
-        />
-    </span>
-    <span class="left-side-nodes" v-if="unref(leftSideNodes)">
-        <TreeNode
-            v-for="(node, nodeIndex) in unref(leftSideNodes)"
-            :key="nodeIndex"
-            v-bind="gatherNodeProps(node)"
-            small
-        />
-    </span>
-    <span class="side-nodes" v-if="unref(rightSideNodes)">
-        <TreeNode
-            v-for="(node, nodeIndex) in unref(rightSideNodes)"
-            :key="nodeIndex"
-            v-bind="gatherNodeProps(node)"
-            small
-        />
-    </span>
+    <component :is="nodesComp" />
+    <component v-if="leftNodesComp" :is="leftNodesComp" />
+    <component v-if="rightNodesComp" :is="rightNodesComp" />
     <Links v-if="branches" :links="unref(branches)" />
 </template>
 
-<script lang="ts">
+<script lang="tsx">
 import "components/common/table.css";
 import { GenericTreeNode, TreeBranch } from "features/trees/tree";
-import { processedPropType } from "util/vue";
-import { defineComponent, unref } from "vue";
-import TreeNode from "./TreeNode.vue";
+import { coerceComponent, processedPropType, renderJSX, unwrapRef } from "util/vue";
+import { Component, defineComponent, shallowRef, toRefs, unref, watchEffect } from "vue";
 import Links from "features/links/Links.vue";
+import { jsx } from "features/feature";
 
 export default defineComponent({
     props: {
@@ -43,40 +23,51 @@ export default defineComponent({
         rightSideNodes: processedPropType<GenericTreeNode[]>(Array),
         branches: processedPropType<TreeBranch[]>(Array)
     },
-    components: { TreeNode, Links },
-    setup() {
-        function gatherNodeProps(node: GenericTreeNode) {
-            const {
-                display,
-                visibility,
-                style,
-                classes,
-                onClick,
-                onHold,
-                color,
-                glowColor,
-                canClick,
-                mark,
-                id
-            } = node;
-            return {
-                display,
-                visibility,
-                style,
-                classes,
-                onClick,
-                onHold,
-                color,
-                glowColor,
-                canClick,
-                mark,
-                id
-            };
-        }
+    components: { Links },
+    setup(props) {
+        const { nodes, leftSideNodes, rightSideNodes } = toRefs(props);
+
+        const nodesComp = shallowRef<Component | "">();
+        watchEffect(() => {
+            const currNodes = unwrapRef(nodes);
+            nodesComp.value = coerceComponent(
+                jsx(() => (
+                    <>
+                        {currNodes.map(row => (
+                            <span class="row">{row.map(renderJSX)}</span>
+                        ))}
+                    </>
+                ))
+            );
+        });
+
+        const leftNodesComp = shallowRef<Component | "">();
+        watchEffect(() => {
+            const currNodes = unwrapRef(leftSideNodes);
+            leftNodesComp.value = currNodes
+                ? coerceComponent(
+                      jsx(() => (
+                          <span class="left-side-nodes small">{currNodes.map(renderJSX)}</span>
+                      ))
+                  )
+                : "";
+        });
+
+        const rightNodesComp = shallowRef<Component | "">();
+        watchEffect(() => {
+            const currNodes = unwrapRef(rightSideNodes);
+            rightNodesComp.value = currNodes
+                ? coerceComponent(
+                      jsx(() => <span class="side-nodes small">{currNodes.map(renderJSX)}</span>)
+                  )
+                : "";
+        });
 
         return {
-            gatherNodeProps,
-            unref
+            unref,
+            nodesComp,
+            leftNodesComp,
+            rightNodesComp
         };
     }
 });
@@ -98,4 +89,13 @@ export default defineComponent({
     right: 15px;
     top: 65px;
 }
+
+.small :deep(.treeNode) {
+    height: 60px;
+    width: 60px;
+}
+
+.small :deep(.treeNode) > *:first-child {
+    font-size: 30px;
+}
 </style>

src/features/trees/TreeNode.vue

@@ -5,7 +5,6 @@
         :class="{
             treeNode: true,
             can: unref(canClick),
-            small: unref(small),
             ...unref(classes)
         }"
     >
@@ -67,8 +66,7 @@ export default defineComponent({
         id: {
             type: String,
             required: true
-        },
-        small: processedPropType<boolean>(Boolean)
+        }
     },
     components: {
         MarkNode,
@@ -114,18 +112,4 @@ export default defineComponent({
     text-transform: capitalize;
     display: flex;
 }
-
-.treeNode.small {
-    height: 60px;
-    width: 60px;
-}
-
-.treeNode.small > *:first-child {
-    font-size: 30px;
-}
-
-.ghost {
-    visibility: hidden;
-    pointer-events: none;
-}
 </style>

src/features/trees/tree.ts

@@ -13,6 +13,7 @@ import { Link } from "features/links/links";
 import { GenericReset } from "features/reset";
 import { displayResource, Resource } from "features/resources/resource";
 import TreeComponent from "features/trees/Tree.vue";
+import TreeNodeComponent from "features/trees/TreeNode.vue";
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
 import {
     Computable,
@@ -45,6 +46,8 @@ export interface TreeNodeOptions {
 export interface BaseTreeNode {
     id: string;
     type: typeof TreeNodeType;
+    [Component]: typeof TreeNodeComponent;
+    [GatherProps]: () => Record<string, unknown>;
 }
 
 export type TreeNode<T extends TreeNodeOptions> = Replace<
@@ -76,6 +79,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
         const treeNode = optionsFunc();
         treeNode.id = getUniqueID("treeNode-");
         treeNode.type = TreeNodeType;
+        treeNode[Component] = TreeNodeComponent;
 
         processComputable(treeNode as T, "visibility");
         setDefault(treeNode, "visibility", Visibility.Visible);
@@ -105,6 +109,35 @@ export function createTreeNode<T extends TreeNodeOptions>(
             };
         }
 
+        treeNode[GatherProps] = function (this: GenericTreeNode) {
+            const {
+                display,
+                visibility,
+                style,
+                classes,
+                onClick,
+                onHold,
+                color,
+                glowColor,
+                canClick,
+                mark,
+                id
+            } = this;
+            return {
+                display,
+                visibility,
+                style,
+                classes,
+                onClick,
+                onHold,
+                color,
+                glowColor,
+                canClick,
+                mark,
+                id
+            };
+        };
+
         return treeNode as unknown as TreeNode<T>;
     });
 }