From d650cda84f96e8326cd575b4af997990bdbf87e4 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 22 May 2022 12:13:47 -0500
Subject: [PATCH] Using getFirstFeature and Collapsible won't re-render each
 frame

---
 src/components/layout/Collapsible.vue |  8 ++++----
 src/util/vue.tsx                      | 14 +++++++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/layout/Collapsible.vue b/src/components/layout/Collapsible.vue
index 0565c3e..ede26af 100644
--- a/src/components/layout/Collapsible.vue
+++ b/src/components/layout/Collapsible.vue
@@ -9,8 +9,8 @@
 
 <script setup lang="ts">
 import { CoercableComponent } from "features/feature";
-import { coerceComponent } from "util/vue";
-import { computed, Ref } from "vue";
+import { computeComponent } from "util/vue";
+import { Ref, toRef } from "vue";
 import Col from "./Column.vue";
 
 const props = defineProps<{
@@ -19,8 +19,8 @@ const props = defineProps<{
     content: CoercableComponent;
 }>();
 
-const displayComponent = computed(() => coerceComponent(props.display));
-const contentComponent = computed(() => coerceComponent(props.content));
+const displayComponent = computeComponent(toRef(props, "display"));
+const contentComponent = computeComponent(toRef(props, "content"));
 </script>
 
 <style scoped>
diff --git a/src/util/vue.tsx b/src/util/vue.tsx
index e8b51ca..b132cb6 100644
--- a/src/util/vue.tsx
+++ b/src/util/vue.tsx
@@ -5,6 +5,7 @@ import {
     Component as ComponentKey,
     GatherProps,
     GenericComponent,
+    jsx,
     JSXFunction,
     Visibility
 } from "features/feature";
@@ -146,10 +147,16 @@ export function setupHoldToClick(
     return { start, stop, handleHolding };
 }
 
-export function getFirstFeature<T extends { visibility: ProcessedComputable<Visibility> }>(
+export function getFirstFeature<
+    T extends VueFeature & { visibility: ProcessedComputable<Visibility> }
+>(
     features: T[],
     filter: (feature: T) => boolean
-): { firstFeature: Ref<T | undefined>; hiddenFeatures: Ref<T[]> } {
+): {
+    firstFeature: Ref<T | undefined>;
+    collapsedContent: JSXFunction;
+    hasCollapsedContent: Ref<boolean>;
+} {
     const filteredFeatures = computed(() =>
         features.filter(
             feature => unref(feature.visibility) === Visibility.Visible && filter(feature)
@@ -157,7 +164,8 @@ export function getFirstFeature<T extends { visibility: ProcessedComputable<Visi
     );
     return {
         firstFeature: computed(() => filteredFeatures.value[0]),
-        hiddenFeatures: computed(() => filteredFeatures.value.slice(1))
+        collapsedContent: jsx(() => renderCol(...filteredFeatures.value.slice(1))),
+        hasCollapsedContent: computed(() => filteredFeatures.value.length > 1)
     };
 }