refactor: cleaned up old composables to follow proper conventions

src/components/LogOutput/LogOutput.vue

@@ -29,12 +29,15 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Vigad } from '@/proc/Vigad';
-import { isRunning } from '@/composables/useRunning/useRunning';
+import useRunning from '@/composables/useRunning/useRunning';
 
 const props = defineProps<{
     captureAreaId: number;
 }>();
 
+// Use the useRunning composable to get the isRunning state and the start/stop functions
+const { isRunning } = useRunning();
+
 /**
  * Get singelton instance reference to vigad
  */
@@ -90,6 +93,7 @@ watch(isRunning, (newValue) => {
     max-height: 400px;
     overflow-y: auto;
 }
+
 .reverse {
     display: flex;
     flex-direction: column-reverse;

src/components/MainVideoStream/MainVideoStream.vue

@@ -42,9 +42,14 @@ import { useElementSize } from '@vueuse/core';
 import { Vigad } from '@/proc/Vigad';
 // @ts-ignore
 import VueDragResize from 'vue3-drag-resize';
-import { isRerendering } from '@/composables/useForceRerender/useForceRerender';
+import useForceRerender from '@/composables/useForceRerender/useForceRerender';
 import { Rectangle } from './Rectangle';
 
+/**
+ * Use the useForceRerender composable to get the isRerendering state and the forceRerender functions
+ */
+const { isRerendering } = useForceRerender();
+
 /**
  * Get singelton instance reference to vigad
  */

src/components/Navigation/Navigation.vue

@@ -32,8 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import { isRunning } from '@/composables/useRunning/useRunning';
+import useRunning from '@/composables/useRunning/useRunning';
 import SettingsPrompt from '@/components/SettingsPrompt/SettingsPrompt.vue';
+
+// Use the useRunning composable to get the isRunning state
+const { isRunning } = useRunning();
 </script>
 
 <style lang="scss" scoped></style>

src/composables/useForceRerender/useForceRerender.test.ts

@@ -1,12 +1,11 @@
 import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
-import {
-    useForceRerender,
-    isRerendering,
-} from '@/composables/useForceRerender/useForceRerender';
+import useForceRerender from '@/composables/useForceRerender/useForceRerender';
 
 describe('useForceRerender Composable', () => {
     it('should trigger a rerender when called', async () => {
+        const { isRerendering, forceRerender } = useForceRerender();
+
         const text = 'Component to rerender';
 
         const wrapper = mount({
@@ -23,7 +22,7 @@ describe('useForceRerender Composable', () => {
         });
 
         // Call the useForceRerender composable
-        await useForceRerender();
+        await forceRerender();
 
         // Check that the component has rerendered
         expect(wrapper.text()).toBe(text);

src/composables/useForceRerender/useForceRerender.ts

@@ -3,20 +3,27 @@ import { nextTick, ref } from 'vue';
 /**
  * Reactive boolean that can be used to force a component to rerender.
  */
-export const isRerendering = ref(true);
+const isRerendering = ref(true);
 
 /**
  * Tries to rerender the component by removing it from the DOM and adding it back in.
  *
- * Only works if the compnent has a v-if="rerender" directive. active
+ * Only works if the component has a v-if="rerender" directive.
  */
-export const useForceRerender = async () => {
-    // Remove component from the DOM
-    isRerendering.value = false;
+export default function useForceRerender() {
+    const forceRerender = async () => {
+        // Remove component from the DOM
+        isRerendering.value = false;
 
-    // Wait for the change to get flushed to the DOM
-    await nextTick();
+        // Wait for the change to get flushed to the DOM
+        await nextTick();
 
-    // Add the component back in
-    isRerendering.value = true;
-};
+        // Add the component back in
+        isRerendering.value = true;
+    };
+
+    return {
+        forceRerender,
+        isRerendering,
+    };
+}

src/composables/useRunning/useRunning.ts

@@ -5,35 +5,41 @@ import useNotificationSystem from '@/composables/useNotificationSystem/useNotifi
 /**
  * Reactive boolean that can be used to check the capture status.
  */
-export const isRunning = ref(false);
+const isRunning = ref(false);
 
 /**
  * Function that can be used to start and stop the capturing.
  */
-export const useRunning = () => {
+export default function useRunning() {
     const vigad = Vigad.getInstance();
 
-    const start = () => {
+    /**
+     * Start capturing.
+     */
+    const start = (): void => {
         isRunning.value = true;
         vigad.startTesseract();
         useNotificationSystem().createNotification({
             title: 'Started Capturing',
-            message: 'Capturing is now running'
+            message: 'Capturing is now running',
         });
     };
 
-    const stop = () => {
+    /**
+     * Stop capturing.
+     */
+    const stop = (): void => {
         isRunning.value = false;
         vigad.stopTesseract();
         useNotificationSystem().createWarningNotification({
             title: 'Stopped Capturing',
-            message: 'Capturing was stopped'
-        })
+            message: 'Capturing was stopped',
+        });
     };
 
     return {
         isRunning,
         start,
         stop,
     };
-};
+}

src/views/CapturePage.vue

@@ -7,15 +7,15 @@
                 prepend-icon="mdi-play"
                 variant="tonal"
                 :disabled="captureAreas.length === 0"
-                @click="useRunning().start()"
+                @click="start()"
                 >Start</v-btn
             >
             <v-btn
                 v-else
                 class="rounded-pill"
                 prepend-icon="mdi-stop"
                 variant="tonal"
-                @click="useRunning().stop()"
+                @click="stop()"
                 >Stop</v-btn
             >
         </template>
@@ -41,11 +41,13 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRunning, isRunning } from '@/composables/useRunning/useRunning';
 import { Vigad } from '@/proc/Vigad';
-
 import ViewComponent from '@/components/ViewComponent/ViewComponent.vue';
 import LogOutput from '@/components/LogOutput/LogOutput.vue';
+import useRunning from '@/composables/useRunning/useRunning';
+
+// Use the useRunning composable to get the isRunning state and the start/stop functions
+const { isRunning, start, stop } = useRunning();
 
 /**
  * Get singelton instance reference to vigad

src/views/RegexView.vue

@@ -46,12 +46,13 @@ import { ref } from 'vue';
 import ViewComponent from '@/components/ViewComponent/ViewComponent.vue';
 import CaptureAreaSearchValue from '@/components/capture-area/CaptureAreaSearchValue/CaptureAreaSearchValue.vue';
 import { Vigad } from '@/proc/Vigad';
-import {
-    isRerendering,
-    useForceRerender,
-} from '@/composables/useForceRerender/useForceRerender';
+import useForceRerender from '@/composables/useForceRerender/useForceRerender';
 import useNotificationSystem from '@/composables/useNotificationSystem/useNotificationSystem';
 
+/**
+ * Use the useForceRerender composable to get the isRerendering state and the forceRerender functions
+ */
+const { isRerendering, forceRerender } = useForceRerender();
 
 /**
  * Get singelton instance reference to vigad
@@ -68,9 +69,9 @@ const captureAreas = ref(vigad.value.getAllCaptureAreas());
  */
 async function addCaptureArea() {
     vigad.value.addCaptureArea(100, 100, 0, 0);
-    await useForceRerender();
+    await forceRerender();
     useNotificationSystem().createNotification({
-        title: 'New Capture Area added'
+        title: 'New Capture Area added',
     });
 }
 </script>