Convert to script setup

.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
     // Predefines global variables (e.g. browser env predefines 'window' variable)
     env: {
         browser: true,
+        'vue/setup-compiler-macros': true,
     },
 
     // Disable warnings for variables that are accessed but not defined in same file

src/components/UserscriptApp.vue

@@ -1,62 +1,45 @@
-<script lang="ts">
-import { ref, defineComponent, onMounted, computed } from 'vue'
+<script lang="ts" setup>
+import { ref, onMounted, computed } from 'vue'
 import { TITLE } from '@/Constants'
 import { deleteWorkflowRuns } from '@/services/github/deleteWorkflowRuns'
 import { useStore } from '@/store'
 import { isOnWorkflowsPage } from '@/utils/isOnWorkflowsPage'
 import UserscriptAppSettings from './UserscriptAppSettings.vue'
 
-export default defineComponent({
-    components: {
-        UserscriptAppSettings,
-    },
+const store = useStore()
+const numDeletionsLeft = computed(() => store.numDeletionsLeft)
+const run = async() => {
+    if (numDeletionsLeft.value < 1) {
+        console.info(DEFINE.NAME, 'No runs left to run')
+        return
+    }
+
+    await deleteWorkflowRuns(store.numWorkflowRunsToKeep, async() => {
+        store.numDeletionsLeft = numDeletionsLeft.value - 1
+        await store.save()
+    })
+}
+
+const stopDeleting = async() => {
+    store.numDeletionsLeft = 0
+    await store.save()
+}
+
+const startDeleting = async() => {
+    store.numDeletionsLeft = store.numDeletionsPerExecution
+    await store.save()
+    await run()
+}
+
+onMounted(run)
 
-    setup() {
-        const store = useStore()
-        const numDeletionsLeft = computed(() => store.numDeletionsLeft)
-        const run = async() => {
-            if (numDeletionsLeft.value < 1) {
-                console.info(DEFINE.NAME, 'No runs left to run')
-                return
-            }
-
-            await deleteWorkflowRuns(store.numWorkflowRunsToKeep, async() => {
-                store.numDeletionsLeft = numDeletionsLeft.value - 1
-                await store.save()
-            })
-        }
-
-        const stopDeleting = async() => {
-            store.numDeletionsLeft = 0
-            await store.save()
-        }
-
-        const startDeleting = async() => {
-            store.numDeletionsLeft = store.numDeletionsPerExecution
-            await store.save()
-            await run()
-        }
-
-        onMounted(run)
-
-        const loadApp = ref(isOnWorkflowsPage(window.location.href))
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        window.history.pushState = new Proxy(window.history.pushState, {
-            apply: (target, thisArg, argArray: [unknown, string, string]) => {
-                loadApp.value = isOnWorkflowsPage(argArray[2])
-                return target.apply(thisArg, argArray)
-            },
-        })
-
-        return {
-            TITLE,
-            isOpen: ref(false),
-            loadApp,
-
-            numDeletionsLeft,
-            stopDeleting,
-            startDeleting,
-        }
+const isOpen = ref(false)
+const loadApp = ref(isOnWorkflowsPage(window.location.href))
+// eslint-disable-next-line @typescript-eslint/unbound-method
+window.history.pushState = new Proxy(window.history.pushState, {
+    apply: (target, thisArg, argArray: [unknown, string, string]) => {
+        loadApp.value = isOnWorkflowsPage(argArray[2])
+        return target.apply(thisArg, argArray)
     },
 })
 </script>

src/components/UserscriptAppSettings.vue

@@ -1,27 +1,11 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script lang="ts" setup>
 import { TITLE } from '@/Constants'
 import { useStore } from '@/store'
 
-export default defineComponent({
-    emits: [
-        'close',
-    ],
+defineEmits(['close'])
 
-    setup() {
-        const store = useStore()
-        const save = async() => {
-            await store.save()
-        }
-
-        return {
-            TITLE,
-            projectUrl: DEFINE.REPO.url,
-            store,
-            save,
-        }
-    },
-})
+const projectUrl = DEFINE.REPO.url
+const store = useStore()
 </script>
 
 <template>
@@ -58,7 +42,7 @@ export default defineComponent({
         <div class="group actions">
             <a
                 class="btn positive"
-                @click="save(); $emit('close')"
+                @click="store.save(); $emit('close')"
             >
                 Save
             </a>