Merge pull request #2178 from dandi/vue3-migration

Vue 3 Migration

vue3/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

vue3/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

vue3/.gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+.vite
+components.d.ts
+typed-router.d.ts
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

vue3/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

vue3/eslint.config.js

@@ -0,0 +1,38 @@
+/**
+ * .eslint.js
+ *
+ * ESLint configuration file.
+ */
+
+import pluginVue from 'eslint-plugin-vue'
+import pluginVuetify from 'eslint-plugin-vuetify'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/recommended'],
+  ...pluginVuetify.configs['flat/recommended'],
+  ...vueTsEslintConfig(),
+
+  {
+    rules: {
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true,
+        },
+      ],
+      'vue/multi-word-component-names': 'off',
+    }
+  }
+]

vue3/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "dandi-archive",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "20.x"
+  },
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --fix"
+  },
+  "dependencies": {
+    "@apidevtools/json-schema-ref-parser": "^11.7.3",
+    "@mdi/font": "7.4.47",
+    "@resonant/oauth-client": "^0.9.2",
+    "axios": "^1.7.9",
+    "core-js": "^3.37.1",
+    "dompurify": "^3.2.3",
+    "filesize": "^10.1.6",
+    "marked": "^15.0.6",
+    "moment": "^2.30.1",
+    "pinia": "^2.3.0",
+    "roboto-fontface": "*",
+    "vue": "^3.4.31",
+    "vuetify": "^3.6.14"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/node": "^22.9.0",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "eslint-plugin-vuetify": "^2.5.1",
+    "npm-run-all2": "^7.0.1",
+    "sass": "1.77.8",
+    "sass-embedded": "^1.77.8",
+    "typescript": "~5.6.3",
+    "unplugin-fonts": "^1.1.1",
+    "unplugin-vue-components": "^0.27.2",
+    "unplugin-vue-router": "^0.10.0",
+    "vite": "^5.4.10",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-vuetify": "^2.0.3",
+    "vue-router": "^4.4.0",
+    "vue-tsc": "^2.1.10"
+  }
+}

web/src/App.vue → vue3/src/App.vue

@@ -17,21 +17,19 @@
       {{ SERVER_DOWNTIME_MESSAGE }}
     </v-main>
     <v-snackbar
-      :value="showError"
+      :model-value="showError"
       :timeout="-1"
-      top
-      right
+      location="top right"
       color="error"
     >
       <span>
         Sorry, something went wrong on our side (the developers have been notified).
         Please try that operation again later.
       </span>
-      <template #action="{ attrs }">
+      <template #actions>
         <v-btn
           color="white"
-          text
-          v-bind="attrs"
+          variant="text"
           @click="showError = false"
         >
           Close
@@ -42,7 +40,7 @@
 </template>
 
 <script setup lang="ts">
-import Vue, { onMounted, ref } from 'vue';
+import { getCurrentInstance, onMounted, ref } from 'vue';
 
 import { dandiRest } from '@/rest';
 import { useDandisetStore } from '@/stores/dandiset';
@@ -59,7 +57,7 @@ const connectedToServer = ref(true);
 
 // Catch any unhandled errors and display a snackbar prompt notifying the user.
 const showError = ref(false);
-Vue.config.errorHandler = (err: Error) => {
+getCurrentInstance().appContext.config.errorHandler = (err: Error) => {
   showError.value = true;
   throw err;
 };

web/src/components/AppBar/ApiKeyItem.vue → vue3/src/components/AppBar/ApiKeyItem.vue

@@ -3,19 +3,18 @@
     <v-list-item-action class="mr-2">
       <!-- ".stop" prevents closing the parent v-menu when this is clicked -->
       <v-btn
-        icon
+        variant="text"
         @click.stop="refreshApiKey"
       >
         <v-icon>mdi-reload</v-icon>
       </v-btn>
-    </v-list-item-action>
-    <v-list-item-content>
+
       <CopyText
         :text="apiKey"
         label="API Key"
         icon-hover-text="Copy API key to clipboard"
       />
-    </v-list-item-content>
+    </v-list-item-action>
   </v-list-item>
 </template>
 

web/src/components/AppBar/AppBar.vue → vue3/src/components/AppBar/AppBar.vue

@@ -1,72 +1,61 @@
 <template>
-  <v-app-bar app>
+  <v-app-bar>
     <v-menu
-      v-if="$vuetify.breakpoint.mobile"
-      open-on-hover
-      offset-y
-      close-delay="300"
+      v-if="isMobile"
+      :close-delay="300"
+      location="bottom"
     >
-      <template #activator="{on}">
-        <v-app-bar-nav-icon v-on="on" />
+      <template #activator="{ props }">
+        <v-app-bar-nav-icon v-bind="props" />
       </template>
       <v-list>
-        <v-list-item-group>
-          <template v-for="navItem in navItems">
-            <v-list-item
-              v-if="!navItem.if || navItem.if()"
-              :key="navItem.text"
-              :to="navItem.external ? undefined : {name: navItem.to}"
-              :href="navItem.external ? navItem.to : undefined"
-              :target="navItem.external ? '_blank' : undefined"
-              :rel="navItem.external ? 'noopener' : undefined"
-              exact
-              text
-            >
-              <v-list-item-content
-                v-if="!navItem.external"
-                text
-                class="text-md"
-              >
+        <template v-for="navItem in navItems">
+          <v-list-item
+            v-if="!navItem.if || navItem.if()"
+            :key="navItem.text"
+            :to="navItem.external ? undefined : {name: navItem.to}"
+            :href="navItem.external ? navItem.to : undefined"
+            :target="navItem.external ? '_blank' : undefined"
+            :rel="navItem.external ? 'noopener' : undefined"
+            exact
+            text
+          >
+            <template v-if="!navItem.external">
+              <v-list-item-title class="text-md">
                 {{ navItem.text }}
-              </v-list-item-content>
-              <v-list-item-content
-                v-if="navItem.external"
-                :href="navItem.to"
-                target="_blank"
-                rel="noopener"
-                text
-              >
+              </v-list-item-title>
+            </template>
+            <template v-if="navItem.external">
+              <v-list-item-title class="text-md">
                 {{ navItem.text }}
-              </v-list-item-content>
+              </v-list-item-title>
               <v-icon
-                v-if="navItem.external"
                 class="ml-1"
-                small
+                size="small"
               >
                 mdi-open-in-new
               </v-icon>
-            </v-list-item>
-          </template>
-        </v-list-item-group>
+            </template>
+          </v-list-item>
+        </template>
       </v-list>
     </v-menu>
     <router-link to="/">
       <v-img
         alt="DANDI logo"
-        contain
-        width="100px"
+        :width="100"
         :src="logo"
         class="mr-3"
       />
     </router-link>
-    <v-toolbar-items v-if="!$vuetify.breakpoint.mobile">
+    <v-toolbar-items v-if="!isMobile">
       <template v-for="navItem in navItems">
         <v-btn
           v-if="!navItem.external && (!navItem.if || navItem.if())"
           :key="navItem.text"
           :to="{name: navItem.to}"
           exact
-          text
+          variant="text"
         >
           {{ navItem.text }}
         </v-btn>
@@ -76,12 +65,12 @@
           :href="navItem.to"
           target="_blank"
           rel="noopener"
-          text
+          variant="text"
         >
           {{ navItem.text }}
           <v-icon
             class="ml-1"
-            small
+            size="small"
           >
             mdi-open-in-new
           </v-icon>
@@ -96,27 +85,28 @@
         <v-btn
           :disabled="!user?.approved"
           :to="{ name: 'createDandiset' }"
-          exact
           class="mx-3"
           color="primary"
-          rounded
+          variant="elevated"
+          rounded="pill"
         >
           New Dandiset
         </v-btn>
         <UserMenu />
       </template>
       <template v-else>
         <v-tooltip
-          bottom
+          location="bottom"
           :disabled="cookiesEnabled"
         >
-          <template #activator="{ on }">
-            <div v-on="on">
+          <template #activator="{ props }">
+            <div v-bind="props">
               <v-btn
                 id="login"
                 class="mx-1"
                 color="primary"
-                rounded
+                variant="elevated"
+                rounded="pill"
                 :disabled="!cookiesEnabled"
                 @click="login"
               >
@@ -133,6 +123,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useDisplay } from 'vuetify';
 
 import {
   cookiesEnabled as cookiesEnabledFunc,
@@ -154,6 +145,9 @@ interface NavigationItem {
   external: boolean,
 }
 
+const display = useDisplay();
+const isMobile = computed(() => display.mobile.value);
+
 const cookiesEnabled = computed(cookiesEnabledFunc);
 const loggedIn = computed(loggedInFunc);
 const insideIFrame = computed(insideIFrameFunc);