Add script setup and typescript config

front/.eslintrc.js

@@ -5,7 +5,9 @@ module.exports = {
   },
   extends: [
     'plugin:vue/recommended',
-    'standard'
+    '@vue/typescript/recommended',
+    '@vue/standard'
+
   ],
   globals: {
     Atomics: 'readonly',
@@ -13,13 +15,13 @@ module.exports = {
   },
   parserOptions: {
     ecmaVersion: 2020,
-    sourceType: 'module',
+    sourceType: 'module'
   },
   plugins: [
     'vue'
   ],
   rules: {
-    "vue/no-v-html": "off", // TODO: tackle this properly
+    'vue/no-v-html': 'off', // TODO: tackle this properly
-    "vue/no-use-v-if-with-v-for": "off"
+    'vue/no-use-v-if-with-v-for': 'off'
   }
 }

front/package.json

@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@vue/composition-api": "1.4.9",
-    "@vueuse/core": "8.2.5",
+    "@vueuse/core": "8.2.6",
     "axios": "0.26.1",
     "axios-auth-refresh": "3.2.2",
     "diff": "5.0.0",
@@ -29,6 +29,7 @@
     "lodash": "4.17.21",
     "moment": "2.29.3",
     "qs": "6.10.5",
+    "pinia": "^2.0.13",
     "register-service-worker": "1.7.2",
     "sanitize-html": "2.7.0",
     "sass": "1.49.11",
@@ -41,7 +42,6 @@
     "vue-router": "3.5.4",
     "vue-upload-component": "2.8.22",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.2",
     "vuex-persistedstate": "4.1.0",
     "vuex-router-sync": "5.0.0"
   },
@@ -49,6 +49,9 @@
     "@babel/core": "7.17.12",
     "@babel/plugin-transform-runtime": "7.17.12",
     "@babel/preset-env": "7.16.11",
+    "@typescript-eslint/eslint-plugin": "^5.19.0",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "10.4.7",
     "babel-core": "7.0.0-bridge.0",
@@ -57,6 +60,7 @@
     "easygettext": "2.17.0",
     "eslint": "8.11.0",
     "eslint-config-standard": "16.0.3",
+    "eslint-config-standard-with-typescript": "^21.0.1",
     "eslint-plugin-html": "6.2.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-node": "11.1.0",
@@ -66,7 +70,10 @@
     "jest-cli": "27.5.1",
     "moxios": "0.4.0",
     "sinon": "13.0.2",
-    "vite": "2.8.6",
+    "typescript": "^4.6.3",
+    "unplugin-vue-components": "^0.19.3",
+    "unplugin-vue2-script-setup": "^0.10.2",
+    "vite": "2.9.5",
     "vite-plugin-vue2": "1.9.3",
     "vue-jest": "3.0.7",
     "vue-template-compiler": "2.6.14"

front/src/components.d.ts

@@ -0,0 +1,164 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+import '@vue/runtime-core'
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    About: typeof import('./components/About.vue')['default']
+    AboutPod: typeof import('./components/AboutPod.vue')['default']
+    AccountsTable: typeof import('./components/manage/moderation/AccountsTable.vue')['default']
+    ActionFeedback: typeof import('./components/common/ActionFeedback.vue')['default']
+    ActionTable: typeof import('./components/common/ActionTable.vue')['default']
+    ActorAvatar: typeof import('./components/common/ActorAvatar.vue')['default']
+    ActorLink: typeof import('./components/common/ActorLink.vue')['default']
+    AjaxButton: typeof import('./components/common/AjaxButton.vue')['default']
+    AlbumBase: typeof import('./components/library/AlbumBase.vue')['default']
+    AlbumDetail: typeof import('./components/library/AlbumDetail.vue')['default']
+    AlbumDropdown: typeof import('./components/library/AlbumDropdown.vue')['default']
+    AlbumEdit: typeof import('./components/library/AlbumEdit.vue')['default']
+    AlbumForm: typeof import('./components/channels/AlbumForm.vue')['default']
+    AlbumModal: typeof import('./components/channels/AlbumModal.vue')['default']
+    Albums: typeof import('./components/library/Albums.vue')['default']
+    AlbumSelect: typeof import('./components/channels/AlbumSelect.vue')['default']
+    AlbumsTable: typeof import('./components/manage/library/AlbumsTable.vue')['default']
+    ApplicationEdit: typeof import('./components/auth/ApplicationEdit.vue')['default']
+    ApplicationForm: typeof import('./components/auth/ApplicationForm.vue')['default']
+    ApplicationNew: typeof import('./components/auth/ApplicationNew.vue')['default']
+    ArtistBase: typeof import('./components/library/ArtistBase.vue')['default']
+    ArtistDetail: typeof import('./components/library/ArtistDetail.vue')['default']
+    ArtistEdit: typeof import('./components/library/ArtistEdit.vue')['default']
+    ArtistLabel: typeof import('./components/audio/ArtistLabel.vue')['default']
+    Artists: typeof import('./components/library/Artists.vue')['default']
+    ArtistsTable: typeof import('./components/manage/library/ArtistsTable.vue')['default']
+    AttachmentInput: typeof import('./components/common/AttachmentInput.vue')['default']
+    Authorize: typeof import('./components/auth/Authorize.vue')['default']
+    Builder: typeof import('./components/library/radios/Builder.vue')['default']
+    Button: typeof import('./components/radios/Button.vue')['default']
+    Card: typeof import('./components/playlists/Card.vue')['default']
+    CardList: typeof import('./components/playlists/CardList.vue')['default']
+    ChannelCard: typeof import('./components/audio/ChannelCard.vue')['default']
+    ChannelEntries: typeof import('./components/audio/ChannelEntries.vue')['default']
+    ChannelEntryCard: typeof import('./components/audio/ChannelEntryCard.vue')['default']
+    ChannelForm: typeof import('./components/audio/ChannelForm.vue')['default']
+    ChannelSerieCard: typeof import('./components/audio/ChannelSerieCard.vue')['default']
+    ChannelSeries: typeof import('./components/audio/ChannelSeries.vue')['default']
+    ChannelsTable: typeof import('./components/manage/ChannelsTable.vue')['default']
+    ChannelsWidget: typeof import('./components/audio/ChannelsWidget.vue')['default']
+    CollapseLink: typeof import('./components/common/CollapseLink.vue')['default']
+    ContentForm: typeof import('./components/common/ContentForm.vue')['default']
+    CopyInput: typeof import('./components/common/CopyInput.vue')['default']
+    DangerousButton: typeof import('./components/common/DangerousButton.vue')['default']
+    DomainsTable: typeof import('./components/manage/moderation/DomainsTable.vue')['default']
+    Duration: typeof import('./components/common/Duration.vue')['default']
+    EditCard: typeof import('./components/library/EditCard.vue')['default']
+    EditDetail: typeof import('./components/library/EditDetail.vue')['default']
+    EditForm: typeof import('./components/library/EditForm.vue')['default']
+    EditList: typeof import('./components/library/EditList.vue')['default']
+    Editor: typeof import('./components/playlists/Editor.vue')['default']
+    EditsCardList: typeof import('./components/manage/library/EditsCardList.vue')['default']
+    EmbedWizard: typeof import('./components/audio/EmbedWizard.vue')['default']
+    EmptyState: typeof import('./components/common/EmptyState.vue')['default']
+    ExpandableDiv: typeof import('./components/common/ExpandableDiv.vue')['default']
+    FetchButton: typeof import('./components/federation/FetchButton.vue')['default']
+    FileUpload: typeof import('./components/library/FileUpload.vue')['default']
+    FileUploadWidget: typeof import('./components/library/FileUploadWidget.vue')['default']
+    Filter: typeof import('./components/library/radios/Filter.vue')['default']
+    FilterModal: typeof import('./components/moderation/FilterModal.vue')['default']
+    Footer: typeof import('./components/Footer.vue')['default']
+    Form: typeof import('./components/playlists/Form.vue')['default']
+    FsBrowser: typeof import('./components/library/FsBrowser.vue')['default']
+    FsLogs: typeof import('./components/library/FsLogs.vue')['default']
+    GlobalEvents: typeof import('./components/utils/global-events.vue')['default']
+    Home: typeof import('./components/Home.vue')['default']
+    HumanDate: typeof import('./components/common/HumanDate.vue')['default']
+    HumanDuration: typeof import('./components/common/HumanDuration.vue')['default']
+    ImportStatusModal: typeof import('./components/library/ImportStatusModal.vue')['default']
+    InlineSearchBar: typeof import('./components/common/InlineSearchBar.vue')['default']
+    InstancePolicyCard: typeof import('./components/manage/moderation/InstancePolicyCard.vue')['default']
+    InstancePolicyForm: typeof import('./components/manage/moderation/InstancePolicyForm.vue')['default']
+    InstancePolicyModal: typeof import('./components/manage/moderation/InstancePolicyModal.vue')['default']
+    InvitationForm: typeof import('./components/manage/users/InvitationForm.vue')['default']
+    InvitationsTable: typeof import('./components/manage/users/InvitationsTable.vue')['default']
+    LibrariesTable: typeof import('./components/manage/library/LibrariesTable.vue')['default']
+    Library: typeof import('./components/library/Library.vue')['default']
+    LibraryFollowButton: typeof import('./components/audio/LibraryFollowButton.vue')['default']
+    LibraryWidget: typeof import('./components/federation/LibraryWidget.vue')['default']
+    LicenseSelect: typeof import('./components/channels/LicenseSelect.vue')['default']
+    List: typeof import('./components/favorites/List.vue')['default']
+    LoginForm: typeof import('./components/auth/LoginForm.vue')['default']
+    LoginModal: typeof import('./components/common/LoginModal.vue')['default']
+    Logo: typeof import('./components/Logo.vue')['default']
+    LogoText: typeof import('./components/LogoText.vue')['default']
+    Logout: typeof import('./components/auth/Logout.vue')['default']
+    Message: typeof import('./components/common/Message.vue')['default']
+    MobileRow: typeof import('./components/audio/podcast/MobileRow.vue')['default']
+    Modal: typeof import('./components/semantic/Modal.vue')['default']
+    NoteForm: typeof import('./components/manage/moderation/NoteForm.vue')['default']
+    NotesThread: typeof import('./components/manage/moderation/NotesThread.vue')['default']
+    NotificationRow: typeof import('./components/notifications/NotificationRow.vue')['default']
+    Ordering: typeof import('./components/mixins/Ordering.vue')['default']
+    PageNotFound: typeof import('./components/PageNotFound.vue')['default']
+    Pagination: typeof import('./components/Pagination.vue')['default']
+    PasswordInput: typeof import('./components/forms/PasswordInput.vue')['default']
+    PlayButton: typeof import('./components/audio/PlayButton.vue')['default']
+    Player: typeof import('./components/audio/Player.vue')['default']
+    PlayIndicator: typeof import('./components/audio/track/PlayIndicator.vue')['default']
+    PlaylistModal: typeof import('./components/playlists/PlaylistModal.vue')['default']
+    PlayOptions: typeof import('./components/mixins/PlayOptions.vue')['default']
+    Plugin: typeof import('./components/auth/Plugin.vue')['default']
+    Podcasts: typeof import('./components/library/Podcasts.vue')['default']
+    Queue: typeof import('./components/Queue.vue')['default']
+    Radios: typeof import('./components/library/Radios.vue')['default']
+    RemoteSearchForm: typeof import('./components/RemoteSearchForm.vue')['default']
+    RenderedDescription: typeof import('./components/common/RenderedDescription.vue')['default']
+    Report: typeof import('./components/mixins/Report.vue')['default']
+    ReportCard: typeof import('./components/manage/moderation/ReportCard.vue')['default']
+    ReportCategoryDropdown: typeof import('./components/moderation/ReportCategoryDropdown.vue')['default']
+    ReportModal: typeof import('./components/moderation/ReportModal.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Row: typeof import('./components/audio/podcast/Row.vue')['default']
+    Search: typeof import('./components/audio/Search.vue')['default']
+    SearchBar: typeof import('./components/audio/SearchBar.vue')['default']
+    ServiceMessages: typeof import('./components/ServiceMessages.vue')['default']
+    SetInstanceModal: typeof import('./components/SetInstanceModal.vue')['default']
+    Settings: typeof import('./components/auth/Settings.vue')['default']
+    SettingsGroup: typeof import('./components/admin/SettingsGroup.vue')['default']
+    ShortcutsModal: typeof import('./components/ShortcutsModal.vue')['default']
+    Sidebar: typeof import('./components/Sidebar.vue')['default']
+    SignupForm: typeof import('./components/auth/SignupForm.vue')['default']
+    SignupFormBuilder: typeof import('./components/admin/SignupFormBuilder.vue')['default']
+    SmartSearch: typeof import('./components/mixins/SmartSearch.vue')['default']
+    SubscribeButton: typeof import('./components/channels/SubscribeButton.vue')['default']
+    SubsonicTokenForm: typeof import('./components/auth/SubsonicTokenForm.vue')['default']
+    Table: typeof import('./components/audio/podcast/Table.vue')['default']
+    TagDetail: typeof import('./components/library/TagDetail.vue')['default']
+    TagsSelector: typeof import('./components/library/TagsSelector.vue')['default']
+    TagsTable: typeof import('./components/manage/library/TagsTable.vue')['default']
+    Themes: typeof import('./components/mixins/Themes.vue')['default']
+    Tooltip: typeof import('./components/common/Tooltip.vue')['default']
+    TrackBase: typeof import('./components/library/TrackBase.vue')['default']
+    TrackDetail: typeof import('./components/library/TrackDetail.vue')['default']
+    TrackEdit: typeof import('./components/library/TrackEdit.vue')['default']
+    TrackFavoriteIcon: typeof import('./components/favorites/TrackFavoriteIcon.vue')['default']
+    TrackPlaylistIcon: typeof import('./components/playlists/TrackPlaylistIcon.vue')['default']
+    TracksTable: typeof import('./components/manage/library/TracksTable.vue')['default']
+    Translations: typeof import('./components/mixins/Translations.vue')['default']
+    UploadDetail: typeof import('./components/library/UploadDetail.vue')['default']
+    UploadForm: typeof import('./components/channels/UploadForm.vue')['default']
+    UploadMetadataForm: typeof import('./components/channels/UploadMetadataForm.vue')['default']
+    UploadModal: typeof import('./components/channels/UploadModal.vue')['default']
+    UploadsTable: typeof import('./components/manage/library/UploadsTable.vue')['default']
+    UserLink: typeof import('./components/common/UserLink.vue')['default']
+    UserMenu: typeof import('./components/common/UserMenu.vue')['default']
+    UserModal: typeof import('./components/common/UserModal.vue')['default']
+    Username: typeof import('./components/common/Username.vue')['default']
+    UserRequestCard: typeof import('./components/manage/moderation/UserRequestCard.vue')['default']
+    UsersTable: typeof import('./components/manage/users/UsersTable.vue')['default']
+    VolumeControl: typeof import('./components/audio/VolumeControl.vue')['default']
+    Widget: typeof import('./components/playlists/Widget.vue')['default']
+  }
+}
+
+export {}

front/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client",
+      "vue/ref-macros",
+    ],
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/*.d.ts", "src/**/*.ts", "src/**/*.vue"]
+}

front/vite.config.js

@@ -1,7 +1,7 @@
-// vite.config.js
-
 import { defineConfig } from 'vite'
-import { createVuePlugin as vue } from 'vite-plugin-vue2'
+import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
+import Components from 'unplugin-vue-components/vite'
+import ScriptSetup from 'unplugin-vue2-script-setup/vite'
 
 import path from 'path'
 
@@ -23,7 +23,18 @@ if (process.env.GITPOD_WORKSPACE_URL) {
 export default defineConfig({
   envPrefix: "VUE_",
   plugins: [
-    vue(),
+    // https://github.com/underfin/vite-plugin-vue2
+    Vue2(),
+
+    // https://github.com/antfu/unplugin-vue2-script-setup
+    ScriptSetup(),
+
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      dts: 'src/components.d.ts',
+      transformer: 'vue2'
+    }),
+
     {
       name: 'fix-fomantic-ui-css',
       transform (src, id) {