chore: upgrade to composition API

src/App.vue

@@ -6,16 +6,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue'
 import SWNewVersion from '@/components/SWNewVersion.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    SWNewVersion
-  }
-})
 </script>
 
 <style lang="scss">

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 {
+const props = defineProps<{
-  defineComponent,
+  play: boolean
-  onMounted,
+}>()
-  watchEffect,
-  reactive,
-  onUnmounted,
-  ref
-} from 'vue'
 
-export default defineComponent({
+const emit = defineEmits<{
-  name: 'ChilledMusic',
+  play: []
-  props: {
+  pause: []
-    play: {
+}>()
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(props, { emit }) {
-    const ready = ref(false)
-    const chilledcow = reactive<{ video: Plyr | null }>({
-      video: null
-    })
 
-    const onPlay = () => {
+const ready = ref(false)
-      if (!props.play) {
+const chilledcow = reactive<{ video: Plyr | null }>({
-        emit('play')
+  video: null
-      }
+})
-    }
 
-    const onPause = () => {
+const onPlay = () => {
-      if (props.play) {
+  if (!props.play) {
-        emit('pause')
+    emit('play')
-      }
-    }
-
-    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 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>

src/components/DevSession.vue

@@ -11,47 +11,36 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useMainStore } from '@/store'
 
-export default defineComponent({
+const props = defineProps<{
-  name: 'DevSession',
+  position: string
-  props: {
+  isTurn: boolean
-    position: { type: String, required: true },
+  session: string
-    isTurn: { type: Boolean, required: true },
+}>()
-    session: { type: String, required: true }
-  },
-  setup(props) {
-    const store = useMainStore()
 
-    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 dev = computed(() => (isDev1 ? store.dev1 : store.dev2))
-      const name = (event.target as HTMLInputElement).value
-      isDev1 ? store.setDev1(name) : store.setDev2(name)
-    }
 
-    const check = () => {
+const setDev = (event: Event) => {
-      if (!dev.value) {
+  const name = (event.target as HTMLInputElement).value
-        isDev1
+  isDev1 ? store.setDev1(name) : store.setDev2(name)
-          ? store.setDev1(placeholder.value)
+}
-          : store.setDev2(placeholder.value)
-      }
-    }
 
-    return {
+const check = () => {
-      placeholder,
+  if (!dev.value) {
-      dev,
+    isDev1
-      setDev,
+      ? store.setDev1(placeholder.value)
-      check
+      : store.setDev2(placeholder.value)
-    }
   }
-})
+}
 </script>
 
 <style lang="scss" scoped>

src/components/IntervalInput.vue

@@ -28,26 +28,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue'
 import { useInterval } from '@/hooks/useInterval'
 
-export default defineComponent({
+defineProps<{
-  name: 'IntervalInput',
+  editable: boolean
-  props: {
+}>()
-    editable: { type: Boolean, required: true }
-  },
-  setup() {
-    const { interval, isMinuteSession, minus, plus } = useInterval()
 
-    return {
+const { interval, isMinuteSession, minus, plus } = useInterval()
-      interval,
-      isMinuteSession,
-      minus,
-      plus
-    }
-  }
-})
 </script>
 
 <style lang="scss" scoped>

src/components/SWNewVersion.vue

@@ -8,28 +8,20 @@
   </transition>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { addEventBusListener } from 'retrobus'
 
-export default defineComponent({
+const newVersion = ref(false)
-  name: 'SWNewVersion',
-  setup() {
-    const newVersion = ref(false)
 
-    onMounted(() => {
+onMounted(() => {
-      addEventBusListener('new-version', () => (newVersion.value = true), {
+  addEventBusListener('new-version', () => (newVersion.value = true), {
-        retro: true,
+    retro: true,
-        once: true
+    once: true
-      })
+  })
-    })
-
-    return {
-      newVersion,
-      reload: () => location.reload(true)
-    }
-  }
 })
+
+const reload = () => location.reload()
 </script>
 
 <style lang="scss" scoped>

src/components/SpotifyMusic.vue

@@ -9,37 +9,34 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, watchEffect } from 'vue'
+import { watchEffect } from 'vue'
 import { useSpotify } from '@/hooks/useSpotify'
 
-export default defineComponent({
+const props = defineProps<{
-  name: 'SpotifyMusic',
+  play: boolean
-  props: {
+}>()
-    play: {
-      type: Boolean,
-      required: true
-    }
-  },
-  setup(props, { emit }) {
-    const onPlay = () => {
-      if (!props.play) {
-        emit('play')
-      }
-    }
 
-    const onPause = () => {
+const emit = defineEmits<{
-      if (props.play) {
+  play: []
-        emit('pause')
+  pause: []
-      }
+}>()
-    }
-    const { ready, play, pause } = useSpotify(onPlay, onPause)
 
-    watchEffect(() => {
+const onPlay = () => {
-      props.play ? play() : pause()
+  if (!props.play) {
-    })
+    emit('play')
-
-    return { ready, play, pause }
   }
+}
+
+const onPause = () => {
+  if (props.play) {
+    emit('pause')
+  }
+}
+
+const { ready, play, pause } = useSpotify(onPlay, onPause)
+
+watchEffect(() => {
+  props.play ? play() : pause()
 })
 </script>

src/components/ZoneMusic.vue

@@ -55,54 +55,40 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, computed } from 'vue'
+import { computed, defineAsyncComponent } from 'vue'
 import { useMainStore } from '@/store'
 import { useMusic } from '@/hooks/useMusic'
 
-export default defineComponent({
+const ChilledMusic = defineAsyncComponent(() => import('@/components/ChilledMusic.vue'))
-  name: 'ZoneMusic',
+const SpotifyMusic = defineAsyncComponent(() => import('@/components/SpotifyMusic.vue'))
-  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 onPlay = () => {
+defineProps<{
-      emit('play')
+  play: boolean
-    }
+}>()
 
-    const onPause = () => {
+const emit = defineEmits<{
-      emit('pause')
+  play: []
-    }
+  pause: []
+}>()
 
-    return {
+const store = useMainStore()
-      isMusicAvailable,
+const song = computed(() => store.song)
-      hasSpotify,
+const {
-      setHasSpotify,
+  isMusicAvailable,
-      hasMusic,
+  hasSpotify,
-      setHasMusic,
+  setHasSpotify,
-      onPlay,
+  hasMusic,
-      onPause,
+  setHasMusic
-      song
+} = useMusic()
-    }
+
-  }
+const onPlay = () => {
-})
+  emit('play')
+}
+
+const onPause = () => {
+  emit('pause')
+}
 </script>
 
 <style lang="scss" scoped>

src/views/Home.vue

@@ -65,56 +65,37 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, onMounted } from 'vue'
+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({
+const props = withDefaults(defineProps<{
-  name: 'Home',
+  play?: boolean
-  components: {
+}>(), {
-    DevSession,
+  play: false
-    ZoneMusic,
+})
-    IntervalInput
-  },
-  props: {
-    play: { type: Boolean, default: false }
-  },
-  setup(props) {
-    const {
-      interval,
-      start,
-      pause,
-      clear,
-      timeState,
-      time,
-      session,
-      isDev1Turn
-    } = useTimer()
 
-    const toggle = () => {
+const {
-      timeState.value === 'stopped' ? start() : pause()
+  interval,
-    }
+  start,
+  pause,
+  clear,
+  timeState,
+  time,
+  session,
+  isDev1Turn
+} = useTimer()
 
-    onMounted(() => {
+const toggle = () => {
-      if (props.play) {
+  timeState.value === 'stopped' ? start() : pause()
-        start()
+}
-      }
-    })
 
-    return {
+onMounted(() => {
-      interval,
+  if (props.play) {
-      toggle,
+    start()
-      start,
-      pause,
-      clear,
-      timeState,
-      time,
-      session,
-      isDev1Turn
-    }
   }
 })
 </script>

src/views/Privacy.vue

@@ -2,12 +2,7 @@
   <section class="privacy" v-t="'privacy'"></section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Home'
-})
 </script>
 
 <style lang="scss" scoped>

src/views/SpotifyCallback.vue

@@ -2,22 +2,16 @@
   <div class="spotify-callback"></div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useSpotifyConnect } from '@/hooks/useSpotify'
 import { useMainStore } from '@/store'
 
-export default defineComponent({
+const router = useRouter()
-  name: 'SpotifyCallback',
+const route = useRoute()
-  setup() {
+const store = useMainStore()
-    const router = useRouter()
-    const route = useRoute()
-    const store = useMainStore()
 
-    store.setHasMusic(true)
+store.setHasMusic(true)
-    useSpotifyConnect(route.hash)
+useSpotifyConnect(route.hash)
-    router.replace({ name: 'Home' })
+router.replace({ name: 'Home' })
-  }
-})
 </script>