From 5a306fa74181c81af09e4c9647ccf7abce268754 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 24 Jan 2026 21:24:46 +0100
Subject: [PATCH] chore: upgrade to composition API

---
 src/App.vue                      |  10 +--
 src/components/ChilledMusic.vue  | 134 ++++++++++++++-----------------
 src/components/DevSession.vue    |  53 +++++-------
 src/components/IntervalInput.vue |  22 ++---
 src/components/SWNewVersion.vue  |  28 +++----
 src/components/SpotifyMusic.vue  |  51 ++++++------
 src/components/ZoneMusic.vue     |  70 +++++++---------
 src/views/Home.vue               |  65 ++++++---------
 src/views/Privacy.vue            |   7 +-
 src/views/SpotifyCallback.vue    |  20 ++---
 10 files changed, 180 insertions(+), 280 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1ec30e3..838ef47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,16 +6,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import SWNewVersion from '@/components/SWNewVersion.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    SWNewVersion
-  }
-})
 </script>
 
 <style lang="scss">
diff --git a/src/components/ChilledMusic.vue b/src/components/ChilledMusic.vue
index 2c64fb7..3820ce5 100644
--- a/src/components/ChilledMusic.vue
+++ b/src/components/ChilledMusic.vue
@@ -20,85 +20,71 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import Plyr from 'plyr'
+import { onMounted, watchEffect, reactive, onUnmounted, ref } from 'vue'
 
-import {
-  defineComponent,
-  onMounted,
-  watchEffect,
-  reactive,
-  onUnmounted,
-  ref
-} from 'vue'
+const props = defineProps<{
+  play: boolean
+}>()
 
-export default defineComponent({
-  name: 'ChilledMusic',
-  props: {
-    play: {
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(props, { emit }) {
-    const ready = ref(false)
-    const chilledcow = reactive<{ video: Plyr | null }>({
-      video: null
-    })
+const emit = defineEmits<{
+  play: []
+  pause: []
+}>()
 
-    const onPlay = () => {
-      if (!props.play) {
-        emit('play')
-      }
-    }
+const ready = ref(false)
+const chilledcow = reactive<{ video: Plyr | null }>({
+  video: null
+})
 
-    const onPause = () => {
-      if (props.play) {
-        emit('pause')
-      }
-    }
-
-    const init = () => {
-      chilledcow.video = new Plyr('#player', {
-        youtube: {
-          noCookie: true,
-          rel: 0,
-          showinfo: 0,
-          iv_load_policy: 3,
-          modestbranding: 1
-        },
-        quality: {
-          default: 240,
-          options: [240]
-        }
-      })
-      chilledcow.video.on('error', init)
-      chilledcow.video.on('play', onPlay)
-      chilledcow.video.on('pause', onPause)
-      chilledcow.video.on('ready', () => {
-        ready.value = true
-        if (props.play) {
-          chilledcow.video?.play()
-        }
-      })
-    }
-
-    onMounted(init)
-
-    onUnmounted(() => {
-      chilledcow.video?.off('error', init)
-      chilledcow.video?.off('play', onPlay)
-      chilledcow.video?.off('pause', onPause)
-      chilledcow.video?.destroy()
-    })
-
-    watchEffect(() => {
-      props.play ? chilledcow.video?.play() : chilledcow.video?.pause()
-    })
-
-    return {
-      ready
-    }
+const onPlay = () => {
+  if (!props.play) {
+    emit('play')
   }
+}
+
+const onPause = () => {
+  if (props.play) {
+    emit('pause')
+  }
+}
+
+const init = () => {
+  chilledcow.video = new Plyr('#player', {
+    youtube: {
+      noCookie: true,
+      rel: 0,
+      showinfo: 0,
+      iv_load_policy: 3,
+      modestbranding: 1
+    },
+    quality: {
+      default: 240,
+      options: [240]
+    }
+  })
+  chilledcow.video.on('error', init)
+  chilledcow.video.on('play', onPlay)
+  chilledcow.video.on('pause', onPause)
+  chilledcow.video.on('ready', () => {
+    ready.value = true
+    if (props.play) {
+      chilledcow.video?.play()
+    }
+  })
+}
+
+onMounted(init)
+
+onUnmounted(() => {
+  chilledcow.video?.off('error', init)
+  chilledcow.video?.off('play', onPlay)
+  chilledcow.video?.off('pause', onPause)
+  chilledcow.video?.destroy()
+})
+
+watchEffect(() => {
+  props.play ? chilledcow.video?.play() : chilledcow.video?.pause()
 })
 </script>
diff --git a/src/components/DevSession.vue b/src/components/DevSession.vue
index 2d49f8d..92432be 100644
--- a/src/components/DevSession.vue
+++ b/src/components/DevSession.vue
@@ -11,47 +11,36 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+<script setup lang="ts">
+import { ref, computed } from 'vue'
 import { useMainStore } from '@/store'
 
-export default defineComponent({
-  name: 'DevSession',
-  props: {
-    position: { type: String, required: true },
-    isTurn: { type: Boolean, required: true },
-    session: { type: String, required: true }
-  },
-  setup(props) {
-    const store = useMainStore()
+const props = defineProps<{
+  position: string
+  isTurn: boolean
+  session: string
+}>()
 
-    const isDev1 = props.position === '1'
+const store = useMainStore()
 
-    const placeholder = ref(`dev ${props.position}`)
+const isDev1 = props.position === '1'
 
-    const dev = computed(() => (isDev1 ? store.dev1 : store.dev2))
+const placeholder = ref(`dev ${props.position}`)
 
-    const setDev = (event: InputEvent) => {
-      const name = (event.target as HTMLInputElement).value
-      isDev1 ? store.setDev1(name) : store.setDev2(name)
-    }
+const dev = computed(() => (isDev1 ? store.dev1 : store.dev2))
 
-    const check = () => {
-      if (!dev.value) {
-        isDev1
-          ? store.setDev1(placeholder.value)
-          : store.setDev2(placeholder.value)
-      }
-    }
+const setDev = (event: Event) => {
+  const name = (event.target as HTMLInputElement).value
+  isDev1 ? store.setDev1(name) : store.setDev2(name)
+}
 
-    return {
-      placeholder,
-      dev,
-      setDev,
-      check
-    }
+const check = () => {
+  if (!dev.value) {
+    isDev1
+      ? store.setDev1(placeholder.value)
+      : store.setDev2(placeholder.value)
   }
-})
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue
index 4115a98..5e11d20 100644
--- a/src/components/IntervalInput.vue
+++ b/src/components/IntervalInput.vue
@@ -28,26 +28,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useInterval } from '@/hooks/useInterval'
 
-export default defineComponent({
-  name: 'IntervalInput',
-  props: {
-    editable: { type: Boolean, required: true }
-  },
-  setup() {
-    const { interval, isMinuteSession, minus, plus } = useInterval()
+defineProps<{
+  editable: boolean
+}>()
 
-    return {
-      interval,
-      isMinuteSession,
-      minus,
-      plus
-    }
-  }
-})
+const { interval, isMinuteSession, minus, plus } = useInterval()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SWNewVersion.vue b/src/components/SWNewVersion.vue
index 6737b25..76a9dfa 100644
--- a/src/components/SWNewVersion.vue
+++ b/src/components/SWNewVersion.vue
@@ -8,28 +8,20 @@
   </transition>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { addEventBusListener } from 'retrobus'
 
-export default defineComponent({
-  name: 'SWNewVersion',
-  setup() {
-    const newVersion = ref(false)
+const newVersion = ref(false)
 
-    onMounted(() => {
-      addEventBusListener('new-version', () => (newVersion.value = true), {
-        retro: true,
-        once: true
-      })
-    })
-
-    return {
-      newVersion,
-      reload: () => location.reload(true)
-    }
-  }
+onMounted(() => {
+  addEventBusListener('new-version', () => (newVersion.value = true), {
+    retro: true,
+    once: true
+  })
 })
+
+const reload = () => location.reload()
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/SpotifyMusic.vue b/src/components/SpotifyMusic.vue
index 55f0ecf..1123cc3 100644
--- a/src/components/SpotifyMusic.vue
+++ b/src/components/SpotifyMusic.vue
@@ -9,37 +9,34 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, watchEffect } from 'vue'
+<script setup lang="ts">
+import { watchEffect } from 'vue'
 import { useSpotify } from '@/hooks/useSpotify'
 
-export default defineComponent({
-  name: 'SpotifyMusic',
-  props: {
-    play: {
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(props, { emit }) {
-    const onPlay = () => {
-      if (!props.play) {
-        emit('play')
-      }
-    }
+const props = defineProps<{
+  play: boolean
+}>()
 
-    const onPause = () => {
-      if (props.play) {
-        emit('pause')
-      }
-    }
-    const { ready, play, pause } = useSpotify(onPlay, onPause)
+const emit = defineEmits<{
+  play: []
+  pause: []
+}>()
 
-    watchEffect(() => {
-      props.play ? play() : pause()
-    })
-
-    return { ready, play, pause }
+const onPlay = () => {
+  if (!props.play) {
+    emit('play')
   }
+}
+
+const onPause = () => {
+  if (props.play) {
+    emit('pause')
+  }
+}
+
+const { ready, play, pause } = useSpotify(onPlay, onPause)
+
+watchEffect(() => {
+  props.play ? play() : pause()
 })
 </script>
diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue
index b95a259..5eabe90 100644
--- a/src/components/ZoneMusic.vue
+++ b/src/components/ZoneMusic.vue
@@ -55,54 +55,40 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue'
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue'
 import { useMainStore } from '@/store'
 import { useMusic } from '@/hooks/useMusic'
 
-export default defineComponent({
-  name: 'ZoneMusic',
-  components: {
-    ChilledMusic: () => import('@/components/ChilledMusic.vue'),
-    SpotifyMusic: () => import('@/components/SpotifyMusic.vue')
-  },
-  props: {
-    play: {
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(_, { emit }) {
-    const store = useMainStore()
-    const song = computed(() => store.song)
-    const {
-      isMusicAvailable,
-      hasSpotify,
-      setHasSpotify,
-      hasMusic,
-      setHasMusic
-    } = useMusic()
+const ChilledMusic = defineAsyncComponent(() => import('@/components/ChilledMusic.vue'))
+const SpotifyMusic = defineAsyncComponent(() => import('@/components/SpotifyMusic.vue'))
 
-    const onPlay = () => {
-      emit('play')
-    }
+defineProps<{
+  play: boolean
+}>()
 
-    const onPause = () => {
-      emit('pause')
-    }
+const emit = defineEmits<{
+  play: []
+  pause: []
+}>()
 
-    return {
-      isMusicAvailable,
-      hasSpotify,
-      setHasSpotify,
-      hasMusic,
-      setHasMusic,
-      onPlay,
-      onPause,
-      song
-    }
-  }
-})
+const store = useMainStore()
+const song = computed(() => store.song)
+const {
+  isMusicAvailable,
+  hasSpotify,
+  setHasSpotify,
+  hasMusic,
+  setHasMusic
+} = useMusic()
+
+const onPlay = () => {
+  emit('play')
+}
+
+const onPause = () => {
+  emit('pause')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4fa2478..bcc0f95 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -65,56 +65,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue'
+<script setup lang="ts">
+import { onMounted } from 'vue'
 import { useTimer } from '@/hooks/useTimer'
 import DevSession from '@/components/DevSession.vue'
 import ZoneMusic from '@/components/ZoneMusic.vue'
 import IntervalInput from '@/components/IntervalInput.vue'
 
-export default defineComponent({
-  name: 'Home',
-  components: {
-    DevSession,
-    ZoneMusic,
-    IntervalInput
-  },
-  props: {
-    play: { type: Boolean, default: false }
-  },
-  setup(props) {
-    const {
-      interval,
-      start,
-      pause,
-      clear,
-      timeState,
-      time,
-      session,
-      isDev1Turn
-    } = useTimer()
+const props = withDefaults(defineProps<{
+  play?: boolean
+}>(), {
+  play: false
+})
 
-    const toggle = () => {
-      timeState.value === 'stopped' ? start() : pause()
-    }
+const {
+  interval,
+  start,
+  pause,
+  clear,
+  timeState,
+  time,
+  session,
+  isDev1Turn
+} = useTimer()
 
-    onMounted(() => {
-      if (props.play) {
-        start()
-      }
-    })
+const toggle = () => {
+  timeState.value === 'stopped' ? start() : pause()
+}
 
-    return {
-      interval,
-      toggle,
-      start,
-      pause,
-      clear,
-      timeState,
-      time,
-      session,
-      isDev1Turn
-    }
+onMounted(() => {
+  if (props.play) {
+    start()
   }
 })
 </script>
diff --git a/src/views/Privacy.vue b/src/views/Privacy.vue
index b115803..95ac902 100644
--- a/src/views/Privacy.vue
+++ b/src/views/Privacy.vue
@@ -2,12 +2,7 @@
   <section class="privacy" v-t="'privacy'"></section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Home'
-})
+<script setup lang="ts">
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/SpotifyCallback.vue b/src/views/SpotifyCallback.vue
index bc40550..cbe5498 100644
--- a/src/views/SpotifyCallback.vue
+++ b/src/views/SpotifyCallback.vue
@@ -2,22 +2,16 @@
   <div class="spotify-callback"></div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useRouter, useRoute } from 'vue-router'
 import { useSpotifyConnect } from '@/hooks/useSpotify'
 import { useMainStore } from '@/store'
 
-export default defineComponent({
-  name: 'SpotifyCallback',
-  setup() {
-    const router = useRouter()
-    const route = useRoute()
-    const store = useMainStore()
+const router = useRouter()
+const route = useRoute()
+const store = useMainStore()
 
-    store.setHasMusic(true)
-    useSpotifyConnect(route.hash)
-    router.replace({ name: 'Home' })
-  }
-})
+store.setHasMusic(true)
+useSpotifyConnect(route.hash)
+router.replace({ name: 'Home' })
 </script>