Migrate a bunch o components to script setup

front/package.json

@@ -56,6 +56,7 @@
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
     "@types/qs": "6.9.7",
+    "@types/showdown": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "5.30.0",
     "@vitejs/plugin-vue": "2.3.3",
     "@vue/compiler-sfc": "3.2.37",

front/src/components/About.vue

@@ -39,7 +39,9 @@ const headerStyle = computed(() => {
     return ''
   }
 
-  return (`background-image: url(${store.getters['instance/absoluteUrl'](banner.value)})`)
+  return { 
+    backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})` 
+  }
 })
 </script>
 

front/src/components/AboutPod.vue

@@ -1,3 +1,64 @@
+<script setup lang="ts">
+import { useStore } from '~/store'
+import { get } from 'lodash-es'
+import showdown from 'showdown'
+import { humanSize } from '~/utils/filters'
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+const markdown = new showdown.Converter()
+
+const store = useStore()
+const nodeinfo = computed(() => store.state.instance.nodeinfo)
+
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  title: $pgettext('Head/About/Title', 'About')
+}))
+
+const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale')
+const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
+const longDescription = computed(() => get(nodeinfo.value, 'metadata.longDescription'))
+const rules = computed(() => get(nodeinfo.value, 'metadata.rules'))
+const terms = computed(() => get(nodeinfo.value, 'metadata.terms'))
+const contactEmail = computed(() => get(nodeinfo.value, 'metadata.contactEmail'))
+const anonymousCanListen = computed(() => get(nodeinfo.value, 'metadata.library.anonymousCanListen'))
+const allowListEnabled = computed(() => get(nodeinfo.value, 'metadata.allowList.enabled'))
+const version = computed(() => get(nodeinfo.value, 'software.version'))
+const openRegistrations = computed(() => get(nodeinfo.value, 'openRegistrations'))
+const defaultUploadQuota = computed(() => get(nodeinfo.value, 'metadata.defaultUploadQuota'))
+const federationEnabled = computed(() => get(nodeinfo.value, 'metadata.library.federationEnabled'))
+
+const onDesktop = computed(() => window.innerWidth > 800)
+
+const stats = computed(() => {
+  const data = {
+    users: get(nodeinfo.value, 'usage.users.activeMonth', null),
+    hours: get(nodeinfo.value, 'metadata.library.music.hours', null),
+    artists: get(nodeinfo.value, 'metadata.library.artists.total', null),
+    albums: get(nodeinfo.value, 'metadata.library.albums.total', null),
+    tracks: get(nodeinfo.value, 'metadata.library.tracks.total', null),
+    listenings: get(nodeinfo.value, 'metadata.usage.listenings.total', null)
+  }
+
+  if (data.users === null || data.artists === null) {
+    return
+  }
+
+  return data
+})
+
+const headerStyle = computed(() => {
+  if (!banner.value) {
+    return ''
+  }
+
+  return { 
+    backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})` 
+  }
+})
+</script>
+
 <template>
   <main
     v-title="labels.title"
@@ -428,103 +489,3 @@
     </div>
   </main>
 </template>
-
-<script>
-import { mapState } from 'vuex'
-import { get } from 'lodash-es'
-import showdown from 'showdown'
-import { humanSize } from '~/utils/filters'
-
-export default {
-  setup () {
-    return { humanSize }
-  },
-  data () {
-    return {
-      markdown: new showdown.Converter(),
-      showAllowedDomains: false
-    }
-  },
-  computed: {
-
-    ...mapState({
-      nodeinfo: state => state.instance.nodeinfo
-    }),
-    labels () {
-      return {
-        title: this.$pgettext('Head/About/Title', 'About')
-      }
-    },
-    podName () {
-      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
-    },
-    banner () {
-      return get(this.nodeinfo, 'metadata.banner')
-    },
-    shortDescription () {
-      return get(this.nodeinfo, 'metadata.shortDescription')
-    },
-    longDescription () {
-      return get(this.nodeinfo, 'metadata.longDescription')
-    },
-    rules () {
-      return get(this.nodeinfo, 'metadata.rules')
-    },
-    terms () {
-      return get(this.nodeinfo, 'metadata.terms')
-    },
-    stats () {
-      const data = {
-        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: get(this.nodeinfo, 'metadata.library.music.hours', null),
-        artists: get(this.nodeinfo, 'metadata.library.artists.total', null),
-        albums: get(this.nodeinfo, 'metadata.library.albums.total', null),
-        tracks: get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: get(this.nodeinfo, 'metadata.usage.listenings.total', null)
-      }
-      if (data.users === null || data.artists === null) {
-        return
-      }
-      return data
-    },
-    contactEmail () {
-      return get(this.nodeinfo, 'metadata.contactEmail')
-    },
-    anonymousCanListen () {
-      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
-    },
-    allowListEnabled () {
-      return get(this.nodeinfo, 'metadata.allowList.enabled')
-    },
-    allowListDomains () {
-      return get(this.nodeinfo, 'metadata.allowList.domains')
-    },
-    version () {
-      return get(this.nodeinfo, 'software.version')
-    },
-    openRegistrations () {
-      return get(this.nodeinfo, 'openRegistrations')
-    },
-    defaultUploadQuota () {
-      return get(this.nodeinfo, 'metadata.defaultUploadQuota')
-    },
-    federationEnabled () {
-      return get(this.nodeinfo, 'metadata.library.federationEnabled')
-    },
-    headerStyle () {
-      if (!this.banner) {
-        return ''
-      }
-      return (
-        'background-image: url(' +
-        this.$store.getters['instance/absoluteUrl'](this.banner) +
-        ')'
-      )
-    },
-    onDesktop () {
-      if (window.innerWidth > 800) return true
-      return false
-    }
-  }
-}
-</script>

front/src/components/Home.vue

@@ -1,3 +1,66 @@
+<script setup lang="ts">
+import { get } from 'lodash-es'
+import showdown from 'showdown'
+import AlbumWidget from '~/components/audio/album/Widget.vue'
+import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
+import LoginForm from '~/components/auth/LoginForm.vue'
+import SignupForm from '~/components/auth/SignupForm.vue'
+import { humanSize } from '~/utils/filters'
+import { useStore } from '~/store'
+import { computed } from 'vue'
+import { whenever } from '@vueuse/core'
+import { useGettext } from 'vue3-gettext'
+import { useRouter } from 'vue-router'
+
+const markdown = new showdown.Converter()
+
+const { $pgettext } = useGettext()
+const labels = computed(() => ({
+  title: $pgettext('Head/Home/Title', 'Home')
+}))
+
+const store = useStore()
+const nodeinfo = computed(() => store.state.instance.nodeinfo)
+
+const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') || 'Funkwhale')
+const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
+const shortDescription = computed(() => get(nodeinfo.value, 'metadata.shortDescription'))
+const longDescription = computed(() => get(nodeinfo.value, 'metadata.longDescription'))
+const rules = computed(() => get(nodeinfo.value, 'metadata.rules'))
+const contactEmail = computed(() => get(nodeinfo.value, 'metadata.contactEmail'))
+const anonymousCanListen = computed(() => get(nodeinfo.value, 'metadata.library.anonymousCanListen'))
+const openRegistrations = computed(() => get(nodeinfo.value, 'openRegistrations'))
+const defaultUploadQuota = computed(() => get(nodeinfo.value, 'metadata.defaultUploadQuota'))
+
+const stats = computed(() => {
+  const users = get(nodeinfo.value, 'usage.users.activeMonth', null)
+  const hours = get(nodeinfo.value, 'metadata.library.music.hours', 0)
+  
+  if (users === null) {
+    return null
+  }
+
+  return { users, hours }
+})
+
+const headerStyle = computed(() => {
+  if (!banner.value) {
+    return ''
+  }
+
+  return { 
+    backgroundImage: `url(${store.getters['instance/absoluteUrl'](banner.value)})` 
+  }
+})
+
+// TODO (wvffle): Check if needed
+const router = useRouter()
+whenever(() => store.state.auth.authenticated, () => {
+  console.log('Authenticated, redirecting to /library…')
+  router.push('/library')
+})
+</script>
+
 <template>
   <main
     v-title="labels.title"
@@ -39,24 +102,24 @@
           >
             <div class="ui stackable grid">
               <div class="eight wide column">
-                <p v-if="!renderedDescription">
+                <p v-if="!longDescription">
                   <translate translate-context="Content/Home/Paragraph">
                     No description available.
                   </translate>
                 </p>
-                <template v-if="renderedDescription || rules">
+                <template v-if="longDescription || rules">
                   <sanitized-html
-                    v-if="renderedDescription"
+                    v-if="longDescription"
                     id="renderedDescription"
-                    :html="renderedDescription"
+                    :html="markdown.makeHtml(longDescription)"
                   />
                   <div
-                    v-if="renderedDescription"
+                    v-if="longDescription"
                     class="ui hidden divider"
                   />
                   <div class="ui relaxed list">
                     <div
-                      v-if="renderedDescription"
+                      v-if="longDescription"
                       class="item"
                     >
                       <i class="arrow right icon" />
@@ -323,106 +386,3 @@
     </section>
   </main>
 </template>
-
-<script>
-import { get } from 'lodash-es'
-import { mapState } from 'vuex'
-import showdown from 'showdown'
-import AlbumWidget from '~/components/audio/album/Widget.vue'
-import ChannelsWidget from '~/components/audio/ChannelsWidget.vue'
-import LoginForm from '~/components/auth/LoginForm.vue'
-import SignupForm from '~/components/auth/SignupForm.vue'
-import { humanSize } from '~/utils/filters'
-
-export default {
-  components: {
-    AlbumWidget,
-    ChannelsWidget,
-    LoginForm,
-    SignupForm
-  },
-  data () {
-    return {
-      markdown: new showdown.Converter(),
-      excerptLength: 2, // html nodes,
-      humanSize
-    }
-  },
-  computed: {
-    ...mapState({
-      nodeinfo: state => state.instance.nodeinfo
-    }),
-    labels () {
-      return {
-        title: this.$pgettext('Head/Home/Title', 'Home')
-      }
-    },
-    podName () {
-      return get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
-    },
-    banner () {
-      return get(this.nodeinfo, 'metadata.banner')
-    },
-    shortDescription () {
-      return get(this.nodeinfo, 'metadata.shortDescription')
-    },
-    longDescription () {
-      return get(this.nodeinfo, 'metadata.longDescription')
-    },
-    rules () {
-      return get(this.nodeinfo, 'metadata.rules')
-    },
-    renderedDescription () {
-      if (!this.longDescription) {
-        return
-      }
-      const doc = this.markdown.makeHtml(this.longDescription)
-      return doc
-    },
-    stats () {
-      const data = {
-        users: get(this.nodeinfo, 'usage.users.activeMonth', null),
-        hours: get(this.nodeinfo, 'metadata.library.music.hours', null)
-      }
-      if (data.users === null || data.artists === null) {
-        return
-      }
-      return data
-    },
-    contactEmail () {
-      return get(this.nodeinfo, 'metadata.contactEmail')
-    },
-    defaultUploadQuota () {
-      return get(this.nodeinfo, 'metadata.defaultUploadQuota')
-    },
-    anonymousCanListen () {
-      return get(this.nodeinfo, 'metadata.library.anonymousCanListen')
-    },
-    openRegistrations () {
-      return get(this.nodeinfo, 'openRegistrations')
-    },
-    headerStyle () {
-      if (!this.banner) {
-        return ''
-      }
-      return (
-        'background-image: url(' +
-        this.$store.getters['instance/absoluteUrl'](this.banner) +
-        ')'
-      )
-    }
-  },
-  watch: {
-    '$store.state.auth.authenticated': {
-      handler (v) {
-        if (v) {
-          console.log('Authenticated, redirecting to /library…')
-          this.$router.push('/library')
-        }
-      },
-      immediate: true
-    }
-  }
-
-}
-</script>

front/src/components/Logo.vue

@@ -1,3 +1,13 @@
+<script setup lang="ts">
+interface Props {
+  fill?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  fill: '#222222'
+})
+</script>
+
 <template>
   <svg
     id="layer_1"
@@ -39,12 +49,3 @@
     </g>
   </svg>
 </template>
-
-<script>
-
-export default {
-  props: {
-    fill: { type: String, default: '#222222' }
-  }
-}
-</script>

front/src/components/LogoText.vue

@@ -1,3 +1,17 @@
+<script setup lang="ts">
+interface Props {
+  primary?: string
+  secondary?: string
+  text?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  primary: '#009fe3',
+  secondary: 'var(--text-color)',
+  text: 'var(--text-color)'
+})
+</script>
+
 <template>
   <svg
     viewBox="0 0 271.66678 53.49133"
@@ -36,13 +50,3 @@
     </g>
   </svg>
 </template>
-
-<script>
-export default {
-  props: {
-    primary: { type: String, default: '#009fe3' },
-    secondary: { type: String, default: 'var(--text-color)' },
-    text: { type: String, default: 'var(--text-color)' }
-  }
-}
-</script>

front/src/components/PageNotFound.vue

@@ -1,3 +1,15 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useGettext } from 'vue3-gettext'
+
+const path = window.location.href
+
+const { $pgettext } = useGettext()
+const labels = computed(() => ({ 
+  title: $pgettext('Head/*/Title', 'Page Not Found')
+}))
+</script>
+
 <template>
   <main
     class="main pusher"
@@ -33,20 +45,3 @@
     </section>
   </main>
 </template>
-
-<script>
-export default {
-  data: function () {
-    return {
-      path: window.location.href
-    }
-  },
-  computed: {
-    labels () {
-      return {
-        title: this.$pgettext('Head/*/Title', 'Page Not Found')
-      }
-    }
-  }
-}
-</script>

front/src/components/ServiceMessages.vue

@@ -8,8 +8,3 @@
     <slot />
   </div>
 </template>
-
-<script>
-
-export default {}
-</script>

front/src/router/routes/index.ts

@@ -3,6 +3,7 @@ import settings from './settings'
 import library from './library'
 import content from './content'
 import manage from './manage'
+import store from '~/store'
 import auth from './auth'
 import user from './user'
 
@@ -10,7 +11,11 @@ export default [
   {
     path: '/',
     name: 'index',
-    component: () => import('~/components/Home.vue')
+    component: () => import('~/components/Home.vue'),
+    beforeEnter (to, from, next) {
+      if (store.state.auth.authenticated) return next('/library')
+      return next()
+    }
   },
   {
     path: '/index.html',

front/src/store/auth.ts

@@ -4,7 +4,7 @@ import { Module } from 'vuex'
 import { RootState } from '~/store/index'
 import useFormData from '~/composables/useFormData'
 
-export type Permission = 'settings' | 'library' | 'moderation' | 'admin'
+export type Permission = 'settings' | 'library' | 'moderation'
 export interface State {
   authenticated: boolean
   username: string
@@ -73,8 +73,7 @@ const store: Module<State, RootState> = {
     availablePermissions: {
       settings: false,
       library: false,
-      moderation: false,
+      moderation: false
-      admin: false
     },
     profile: null,
     oauth: getDefaultOauth(),
@@ -98,8 +97,7 @@ const store: Module<State, RootState> = {
       state.availablePermissions = {
         settings: false,
         library: false,
-        moderation: false,
+        moderation: false
-        admin: false
       }
     },
     profile: (state, value) => {
@@ -115,8 +113,7 @@ const store: Module<State, RootState> = {
         state.availablePermissions = {
           settings: false,
           library: false,
-          moderation: false,
+          moderation: false
-          admin: false
         }
       }
     },

front/yarn.lock

@@ -1483,6 +1483,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/showdown@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/showdown/-/showdown-2.0.0.tgz#3e800eca8573848cac4e5555f4377ba3a0e7b1f2"
+  integrity sha512-70xBJoLv+oXjB5PhtA8vo7erjLDp9/qqI63SRHm4REKrwuPOLs8HhXwlZJBJaB4kC18cCZ1UUZ6Fb/PLFW4TCA==
+
 "@types/sizzle@*":
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"