From 33fd0a0a74cb505d3bd7e0ba0f482331cf7c84f1 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Thu, 22 Jan 2026 23:00:45 +0100
Subject: [PATCH] refacto: migrate to composition API everywhere

---
 src/components/FooterTranslation.vue          | 36 ++++++----------
 src/components/GoBack.vue                     | 30 +++++---------
 src/components/LoginGithub.vue                | 25 ++++-------
 .../history/components/LastVisited.vue        | 23 +++--------
 src/shims-vue.d.ts                            |  5 ---
 src/views/AboutApp.vue                        | 14 ++-----
 src/views/RepoList.vue                        | 41 ++++++-------------
 src/views/SpaceCowboy.vue                     | 11 ++---
 8 files changed, 56 insertions(+), 129 deletions(-)

diff --git a/src/components/FooterTranslation.vue b/src/components/FooterTranslation.vue
index 214cf19..a0d4a27 100644
--- a/src/components/FooterTranslation.vue
+++ b/src/components/FooterTranslation.vue
@@ -1,3 +1,16 @@
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n"
+
+import { locales } from "@/locales/message"
+
+const { t } = useI18n()
+const i18n = useI18n()
+
+const toggleLanguage = () =>
+  (i18n.locale.value =
+    locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length])
+</script>
+
 <template>
   <footer class="footer-translation">
     <button class="button" @click="toggleLanguage">
@@ -5,26 +18,3 @@
     </button>
   </footer>
 </template>
-
-<script lang="ts">
-import { defineComponent } from "vue"
-import { useI18n } from "vue-i18n"
-
-import { locales } from "@/locales/message"
-
-export default defineComponent({
-  name: "FooterTranslation",
-  setup() {
-    const { t } = useI18n()
-
-    const i18n = useI18n()
-
-    return {
-      t,
-      toggleLanguage: () =>
-        (i18n.locale.value =
-          locales[(locales.indexOf(i18n.locale.value) + 1) % locales.length]),
-    }
-  },
-})
-</script>
diff --git a/src/components/GoBack.vue b/src/components/GoBack.vue
index b0a09ac..507b691 100644
--- a/src/components/GoBack.vue
+++ b/src/components/GoBack.vue
@@ -1,3 +1,14 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const { push } = useRouter()
+
+const back = () =>
+  push({
+    name: 'Home'
+  })
+</script>
+
 <template>
   <button class="button is-white go-back" @click="back">
     <svg
@@ -20,25 +31,6 @@
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useRouter } from 'vue-router'
-
-export default defineComponent({
-  name: 'GoBack',
-  setup() {
-    const { push } = useRouter()
-
-    return {
-      back: () =>
-        push({
-          name: 'Home'
-        })
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .go-back {
   margin: 10px 0;
diff --git a/src/components/LoginGithub.vue b/src/components/LoginGithub.vue
index f4c121d..7fb0371 100644
--- a/src/components/LoginGithub.vue
+++ b/src/components/LoginGithub.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+const url = new URL('https://github.com/login/oauth/authorize')
+url.searchParams.append('client_id', 'Iv1.87be14adcc912fa0')
+url.searchParams.append('redirect_uri', location.href)
+url.searchParams.append('scope', 'repo')
+</script>
+
 <template>
   <div class="login-github">
     <br />
@@ -28,21 +35,3 @@
     </a>
   </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'LoginGithub',
-  setup() {
-    const url = new URL('https://github.com/login/oauth/authorize')
-    url.searchParams.append('client_id', 'Iv1.87be14adcc912fa0')
-    url.searchParams.append('redirect_uri', location.href)
-    url.searchParams.append('scope', 'repo')
-
-    return {
-      url
-    }
-  }
-})
-</script>
diff --git a/src/modules/history/components/LastVisited.vue b/src/modules/history/components/LastVisited.vue
index 731f387..1655aea 100644
--- a/src/modules/history/components/LastVisited.vue
+++ b/src/modules/history/components/LastVisited.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+import { useLastVisitedRepos } from '@/modules/history/hooks/useLastVisitedRepos.hook'
+
+const { lastVisitedRepos } = useLastVisitedRepos()
+</script>
+
 <template>
   <section v-if="lastVisitedRepos.length" class="last-visited">
     <h4>Last visited repos</h4>
@@ -23,23 +29,6 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import { useLastVisitedRepos } from '@/modules/history/hooks/useLastVisitedRepos.hook'
-
-export default defineComponent({
-  name: 'LastVisited',
-  setup() {
-    const { lastVisitedRepos } = useLastVisitedRepos()
-
-    return {
-      lastVisitedRepos
-    }
-  }
-})
-</script>
-
 <style scoped lang="scss">
 .last-visited {
   li {
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index d6e1b50..6daf038 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,8 +1,3 @@
-declare module "*.vue" {
-  import { defineComponent } from "vue"
-  const component: ReturnType<typeof defineComponent>
-  export default component
-}
 declare module "pouchdb-adapter-indexeddb"
 declare module "@toycode/markdown-it-class"
 declare module "markdown-it-block-embed"
diff --git a/src/views/AboutApp.vue b/src/views/AboutApp.vue
index 576fa32..677f987 100644
--- a/src/views/AboutApp.vue
+++ b/src/views/AboutApp.vue
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+import GoBack from '@/components/GoBack.vue'
+</script>
+
 <template>
   <div class="about content">
     <go-back />
@@ -21,16 +25,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import GoBack from '@/components/GoBack.vue'
-
-export default defineComponent({
-  components: { GoBack }
-})
-</script>
-
 <style lang="scss" scoped>
 .about {
   padding: 1rem;
diff --git a/src/views/RepoList.vue b/src/views/RepoList.vue
index 7cf9f25..d178519 100644
--- a/src/views/RepoList.vue
+++ b/src/views/RepoList.vue
@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+import GoBack from '@/components/GoBack.vue'
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { useRepos } from '@/hooks/useRepos.hook'
+import { useRepoList } from '@/modules/repo/hooks/useRepoList.hook'
+
+const { username } = useGitHubLogin()
+const { isReady } = useRepos()
+const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox } =
+  useRepoList()
+</script>
+
 <template>
   <div class="repo-list">
     <h1 class="title is-1">Repositories</h1>
@@ -78,35 +90,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import GoBack from '@/components/GoBack.vue'
-import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
-import { useRepos } from '@/hooks/useRepos.hook'
-import { useRepoList } from '@/modules/repo/hooks/useRepoList.hook'
-
-export default defineComponent({
-  name: 'RepoList',
-  components: { GoBack },
-  setup() {
-    const { username } = useGitHubLogin()
-    const { isReady } = useRepos()
-    const { favoriteRepos, otherRepos, favoriteCheckboxes, toggleCheckbox } =
-      useRepoList()
-
-    return {
-      isReady,
-      username,
-      favoriteRepos,
-      otherRepos,
-      favoriteCheckboxes,
-      toggleCheckbox
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .repo-list {
   flex: 1;
diff --git a/src/views/SpaceCowboy.vue b/src/views/SpaceCowboy.vue
index 1dfd5ed..0b8c114 100644
--- a/src/views/SpaceCowboy.vue
+++ b/src/views/SpaceCowboy.vue
@@ -1,3 +1,6 @@
+<script lang="ts" setup>
+</script>
+
 <template>
   <main class="space-cowboy content">
     <p>
@@ -44,14 +47,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'SpaceCowboy'
-})
-</script>
-
 <style scoped lang="scss">
 .space-cowboy {
   display: flex;