chore: upgrade to composition API

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">

src/components/ChilledMusic.vue

@@ -20,27 +20,19 @@
   </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
+}>()
+
+const emit = defineEmits<{
+  play: []
+  pause: []
+}>()
 
-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
@@ -95,10 +87,4 @@ export default defineComponent({
 watchEffect(() => {
   props.play ? chilledcow.video?.play() : chilledcow.video?.pause()
 })
-
-    return {
-      ready
-    }
-  }
-})
 </script>

src/components/DevSession.vue

@@ -11,18 +11,16 @@
   </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 props = defineProps<{
+  position: string
+  isTurn: boolean
+  session: string
+}>()
+
 const store = useMainStore()
 
 const isDev1 = props.position === '1'
@@ -31,7 +29,7 @@ export default defineComponent({
 
 const dev = computed(() => (isDev1 ? store.dev1 : store.dev2))
 
-    const setDev = (event: InputEvent) => {
+const setDev = (event: Event) => {
   const name = (event.target as HTMLInputElement).value
   isDev1 ? store.setDev1(name) : store.setDev2(name)
 }
@@ -43,15 +41,6 @@ export default defineComponent({
       : store.setDev2(placeholder.value)
   }
 }
-
-    return {
-      placeholder,
-      dev,
-      setDev,
-      check
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

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>

src/components/SWNewVersion.vue

@@ -8,13 +8,10 @@
   </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)
 
 onMounted(() => {
@@ -24,12 +21,7 @@ export default defineComponent({
   })
 })
 
-    return {
-      newVersion,
-      reload: () => location.reload(true)
-    }
-  }
-})
+const reload = () => location.reload()
 </script>
 
 <style lang="scss" scoped>

src/components/SpotifyMusic.vue

@@ -9,19 +9,19 @@
   </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 props = defineProps<{
+  play: boolean
+}>()
+
+const emit = defineEmits<{
+  play: []
+  pause: []
+}>()
+
 const onPlay = () => {
   if (!props.play) {
     emit('play')
@@ -33,13 +33,10 @@ export default defineComponent({
     emit('pause')
   }
 }
+
 const { ready, play, pause } = useSpotify(onPlay, onPause)
 
 watchEffect(() => {
   props.play ? play() : pause()
 })
-
-    return { ready, play, pause }
-  }
-})
 </script>

src/components/ZoneMusic.vue

@@ -55,24 +55,23 @@
   </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 ChilledMusic = defineAsyncComponent(() => import('@/components/ChilledMusic.vue'))
+const SpotifyMusic = defineAsyncComponent(() => import('@/components/SpotifyMusic.vue'))
+
+defineProps<{
+  play: boolean
+}>()
+
+const emit = defineEmits<{
+  play: []
+  pause: []
+}>()
+
 const store = useMainStore()
 const song = computed(() => store.song)
 const {
@@ -90,19 +89,6 @@ export default defineComponent({
 const onPause = () => {
   emit('pause')
 }
-
-    return {
-      isMusicAvailable,
-      hasSpotify,
-      setHasSpotify,
-      hasMusic,
-      setHasMusic,
-      onPlay,
-      onPause,
-      song
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/views/Home.vue

@@ -65,24 +65,19 @@
   </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 props = withDefaults(defineProps<{
+  play?: boolean
+}>(), {
+  play: false
+})
+
 const {
   interval,
   start,
@@ -103,20 +98,6 @@ export default defineComponent({
     start()
   }
 })
-
-    return {
-      interval,
-      toggle,
-      start,
-      pause,
-      clear,
-      timeState,
-      time,
-      session,
-      isDev1Turn
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

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>

src/views/SpotifyCallback.vue

@@ -2,15 +2,11 @@
   <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()
@@ -18,6 +14,4 @@ export default defineComponent({
 store.setHasMusic(true)
 useSpotifyConnect(route.hash)
 router.replace({ name: 'Home' })
-  }
-})
 </script>