build(frontend): update frontend packages 2024-08-21 (#1828)

Updates packages: typescript vue-tsc vuetify @typescript-eslint packages vite-plugin-checker and makes some necessary changes. Fixes #1750
dreammall-earth · Aug 21, 2024 · 8446bb8 · 8446bb8
1 parent 8aa3a3b
commit 8446bb8
Show file tree

Hide file tree

Showing 20 changed files with 12,220 additions and 14,561 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -79,7 +79,7 @@
     "vue": "3.4.35",
     "vue-i18n": "9.13.0",
     "vue3-toastify": "^0.2.2",
-    "vuetify": "^3.5.17",
+    "vuetify": "^3.7.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {
@@ -101,8 +101,8 @@
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.14.8",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/test-utils": "^2.4.6",
     "chromatic": "^11.7.0",
@@ -138,12 +138,12 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "ts-node": "^10.9.2",
     "tsx": "^4.15.7",
-    "typescript": "^5.4.5",
-    "vite-plugin-checker": "^0.6.4",
+    "typescript": "^5.5.4",
+    "vite-plugin-checker": "^0.7.2",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vuetify": "^2.0.3",
     "vitest": "^2.0.4",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.29"
   },
   "imports": {
     "#components/*": "./src/components/*",

diff --git a/frontend/renderer/+onRenderHtml.ts b/frontend/renderer/+onRenderHtml.ts
@@ -67,7 +67,10 @@ async function renderToString(app: App) {
     err = err_
   }
   const appHtml = await renderToString_(app)
-  if (err) throw err
+  if (err) {
+    if (err instanceof Error) throw err
+    else throw new Error(String(err))
+  }
   return appHtml
 }
 

diff --git a/frontend/scripts/buildServer/import.meta.url-polyfill.ts b/frontend/scripts/buildServer/import.meta.url-polyfill.ts
@@ -1,7 +1,8 @@
-/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any */
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 export const importMetaUrl =
   typeof document === 'undefined'
-    ? (new (require('url').URL)('file:' + __filename) as URL).href
+    ? // eslint-disable-next-line @typescript-eslint/no-require-imports
+      (new (require('url').URL)('file:' + __filename) as URL).href
     : (document.currentScript && (document.currentScript as any).src) ||
       new URL('main.js', document.baseURI).href
diff --git a/frontend/server/index.ts b/frontend/server/index.ts
@@ -29,7 +29,8 @@ const hasToken = (cookieString: string | undefined) => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     return !!JSON.parse(parse(cookieString).auth).user
   } catch (error) {
-    return false
+    if (error instanceof SyntaxError) return false
+    throw error
   }
 }
 

diff --git a/frontend/src/components/cockpit/about-me/__snapshots__/AboutMeView.test.ts.snap b/frontend/src/components/cockpit/about-me/__snapshots__/AboutMeView.test.ts.snap
@@ -96,7 +96,11 @@ exports[`AboutMeView > renders 1`] = `
               <!---->
               <div
                 class="v-progress-linear__background"
-                style="width: 100%;"
+                style="opacity: NaN;"
+              />
+              <div
+                class="v-progress-linear__buffer"
+                style="opacity: NaN; width: 0%;"
               />
               <transition-stub
                 appear="false"
@@ -680,7 +684,11 @@ exports[`AboutMeView > renders initials 1`] = `
               <!---->
               <div
                 class="v-progress-linear__background"
-                style="width: 100%;"
+                style="opacity: NaN;"
+              />
+              <div
+                class="v-progress-linear__buffer"
+                style="opacity: NaN; width: 0%;"
               />
               <transition-stub
                 appear="false"
@@ -1264,7 +1272,11 @@ exports[`AboutMeView > renders without social media accounts 1`] = `
               <!---->
               <div
                 class="v-progress-linear__background"
-                style="width: 100%;"
+                style="opacity: NaN;"
+              />
+              <div
+                class="v-progress-linear__buffer"
+                style="opacity: NaN; width: 0%;"
               />
               <transition-stub
                 appear="false"

diff --git a/frontend/src/components/cockpit/about-me/__snapshots__/EditSocialMedia.test.ts.snap b/frontend/src/components/cockpit/about-me/__snapshots__/EditSocialMedia.test.ts.snap
@@ -81,7 +81,11 @@ exports[`EditSocialMedia > renders 1`] = `
                   <!---->
                   <div
                     class="v-progress-linear__background"
-                    style="width: 100%;"
+                    style="opacity: NaN;"
+                  />
+                  <div
+                    class="v-progress-linear__buffer"
+                    style="opacity: NaN; width: 0%;"
                   />
                   <transition-stub
                     appear="false"
@@ -236,7 +240,11 @@ exports[`EditSocialMedia > renders 1`] = `
                   <!---->
                   <div
                     class="v-progress-linear__background"
-                    style="width: 100%;"
+                    style="opacity: NaN;"
+                  />
+                  <div
+                    class="v-progress-linear__buffer"
+                    style="opacity: NaN; width: 0%;"
                   />
                   <transition-stub
                     appear="false"

diff --git a/frontend/src/components/cockpit/about-me/__snapshots__/EditUserDetails.test.ts.snap b/frontend/src/components/cockpit/about-me/__snapshots__/EditUserDetails.test.ts.snap
@@ -81,7 +81,11 @@ exports[`EditUserDetails > renders 1`] = `
                   <!---->
                   <div
                     class="v-progress-linear__background"
-                    style="width: 100%;"
+                    style="opacity: NaN;"
+                  />
+                  <div
+                    class="v-progress-linear__buffer"
+                    style="opacity: NaN; width: 0%;"
                   />
                   <transition-stub
                     appear="false"
@@ -236,7 +240,11 @@ exports[`EditUserDetails > renders 1`] = `
                   <!---->
                   <div
                     class="v-progress-linear__background"
-                    style="width: 100%;"
+                    style="opacity: NaN;"
+                  />
+                  <div
+                    class="v-progress-linear__buffer"
+                    style="opacity: NaN; width: 0%;"
                   />
                   <transition-stub
                     appear="false"

diff --git a/frontend/src/components/cockpit/cockpit-card/CockpitCard.vue b/frontend/src/components/cockpit/cockpit-card/CockpitCard.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
 </script>
 
 <style scoped lang="scss">
+@use 'sass:map';
 @import 'vuetify/lib/styles/settings/_variables';
 
 .cockpit-card {
@@ -46,7 +47,7 @@ const props = defineProps<{
   border-width: 0.5px;
 }
 
-@media #{map-get($display-breakpoints, 'md-and-up')} {
+@media #{map.get($display-breakpoints, 'md-and-up')} {
   .narrow {
     --card-width: 335px;
   }

diff --git a/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap b/frontend/src/components/menu/__snapshots__/UserInfo.test.ts.snap
@@ -16,7 +16,6 @@ exports[`UserInfo > renders 1`] = `
       aria-owns="v-menu-0"
       class="user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
       data-v-607bdd70=""
-      targetref="[object Object]"
     >
       
       <div

diff --git a/frontend/src/components/tablesDrawer/TablesDrawer.vue b/frontend/src/components/tablesDrawer/TablesDrawer.vue
@@ -2,10 +2,9 @@
   <v-navigation-drawer
     v-model="isVisible"
     :location="location"
-    width="auto"
+    mobile
     class="menu-drawer px-4"
     :class="[{ 'changing-orientation': isChangingOrientation }]"
-    :style="drawerStyle"
   >
     <v-text-field
       v-model="searchValue"
@@ -76,10 +75,6 @@ const filteredItems = computed(() => {
 const currentLocation = ref(props.location)
 const isChangingOrientation = ref(false)
 
-const drawerStyle = computed(() => ({
-  transition: isChangingOrientation.value ? 'none' : undefined,
-}))
-
 watch(
   () => props.location,
   (newLocation) => {
@@ -97,6 +92,7 @@ watch(
 </script>
 
 <style scoped lang="scss">
+@use 'sass:map';
 @import 'vuetify/lib/styles/settings/_variables';
 
 .menu-drawer {
@@ -116,7 +112,7 @@ watch(
   transition: none !important;
 }
 
-@media #{map-get($display-breakpoints, 'sm-and-down')} {
+@media #{map.get($display-breakpoints, 'sm-and-down')} {
   .menu-drawer {
     left: var(--sides) !important;
     z-index: 2000 !important;
@@ -128,7 +124,7 @@ watch(
   }
 }
 
-@media #{map-get($display-breakpoints, 'md-and-up')} {
+@media #{map.get($display-breakpoints, 'md-and-up')} {
   .menu-drawer {
     border-radius: 20px 0 0 20px;
   }

diff --git a/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap b/frontend/src/components/tablesDrawer/__snapshots__/TablesDrawer.test.ts.snap
@@ -13,7 +13,7 @@ exports[`TablesDrawer > renders correctly 1`] = `
       class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4"
       data-v-cf2c9067=""
       drawer="true"
-      style="right: 0px; z-index: 1004; transform: translateX(110%); position: fixed; height: calc(100% - 0px - 0px); top: 0px; bottom: 0px;"
+      style="right: 0px; z-index: 1004; transform: translateX(256px); position: fixed; transition: none !important; height: calc(100% - 0px - 0px); top: 0px; bottom: 0px; width: 256px;"
     >
       <!---->
       <!---->
@@ -50,7 +50,11 @@ exports[`TablesDrawer > renders correctly 1`] = `
                   <!---->
                   <div
                     class="v-progress-linear__background"
-                    style="width: 100%;"
+                    style="opacity: NaN;"
+                  />
+                  <div
+                    class="v-progress-linear__buffer"
+                    style="opacity: NaN; width: 0%;"
                   />
                   <transition-stub
                     appear="false"

diff --git a/frontend/src/layouts/DefaultLayout.vue b/frontend/src/layouts/DefaultLayout.vue
@@ -115,7 +115,7 @@ import TablesDrawer from '#components/tablesDrawer/TablesDrawer.vue'
 import { JoinMyTableMutationResult, joinMyTableMutation } from '#mutations/joinMyTableMutation'
 import GlobalErrorHandler from '#plugins/globalErrorHandler'
 
-const isTablesDrawerVisible = defineModel<boolean>()
+const isTablesDrawerVisible = ref(false)
 
 const toggleDrawer = () => {
   isTablesDrawerVisible.value = !isTablesDrawerVisible.value
@@ -150,6 +150,7 @@ const enterTable = async () => {
 </script>
 
 <style scoped lang="scss">
+@use 'sass:map';
 @import '#root/src/assets/scss/style';
 @import 'vuetify/lib/styles/settings/_variables';
 
@@ -163,7 +164,7 @@ const enterTable = async () => {
     margin-top: 70px;
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+  @media #{map.get($display-breakpoints, 'sm-and-down')} {
     .page-container {
       margin-bottom: 50px;
     }
@@ -221,11 +222,11 @@ const enterTable = async () => {
   transition: bottom 0.75s;
 
   &--active {
-    @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    @media #{map.get($display-breakpoints, 'sm-and-down')} {
       bottom: 60px;
     }
 
-    @media #{map-get($display-breakpoints, 'md-and-up')} {
+    @media #{map.get($display-breakpoints, 'md-and-up')} {
       bottom: 120px;
     }
   }

diff --git a/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap b/frontend/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
@@ -18,7 +18,7 @@ exports[`DefaultLayout > renders 1`] = `
       <header
         class="v-toolbar v-toolbar--flat v-toolbar--density-default v-theme--light v-locale--is-ltr v-app-bar app-bar"
         data-v-75d0be1e=""
-        style="top: 0px; z-index: 1006; transform: translateY(0%); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
+        style="top: 0px; z-index: 1006; transform: translateY(0px); position: fixed; transition: none !important; left: 0px; width: calc(100% - 0px - 0px);"
       >
         <!---->
         
@@ -679,7 +679,6 @@ exports[`DefaultLayout > renders 1`] = `
                     aria-owns="v-menu-1"
                     class="ml-2 user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
                     data-v-607bdd70=""
-                    targetref="[object Object]"
                   >
                     
                     <div
@@ -755,7 +754,7 @@ exports[`DefaultLayout > renders 1`] = `
       <nav
         class="v-navigation-drawer v-navigation-drawer--right v-navigation-drawer--temporary v-theme--light v-navigation-drawer--mobile menu-drawer px-4 changing-orientation"
         data-v-cf2c9067=""
-        style="bottom: 0px; z-index: 1004; transform: translateX(110%); position: fixed; right: 0px; height: calc(100% - 70px - 0px); top: 70px; transition: none;"
+        style="bottom: 0px; z-index: 1004; transform: translateX(256px); position: fixed; transition: none !important; height: calc(100% - 70px - 0px); width: 256px; right: 0px; top: 70px;"
       >
         <!---->
         <!---->
@@ -792,7 +791,11 @@ exports[`DefaultLayout > renders 1`] = `
                     <!---->
                     <div
                       class="v-progress-linear__background"
-                      style="width: 100%;"
+                      style="opacity: NaN;"
+                    />
+                    <div
+                      class="v-progress-linear__buffer"
+                      style="opacity: NaN; width: 0%;"
                     />
                     <transition-stub
                       appear="false"
@@ -1652,7 +1655,7 @@ exports[`DefaultLayout > renders 1`] = `
           class="v-btn v-btn--elevated v-theme--light v-btn--density-default v-btn--variant-elevated main-button main-button--border-gradient main-button-auto assistant-button"
           data-v-2b63c1fe=""
           data-v-75d0be1e=""
-          style="background-color: #f09630; color: #000; caret-color: #000; height: auto; width: auto;"
+          style="background-color: #f09630; color: #000; caret-color: #000; width: auto; height: auto;"
           type="button"
         >
           
@@ -1693,7 +1696,7 @@ exports[`DefaultLayout > renders 1`] = `
           class="v-btn v-btn--elevated v-theme--light v-btn--density-default v-btn--variant-elevated main-button main-button--border-yellow main-button-auto new-table-button"
           data-v-2b63c1fe=""
           data-v-75d0be1e=""
-          style="background-color: #f09630; color: #000; caret-color: #000; height: auto; width: auto;"
+          style="background-color: #f09630; color: #000; caret-color: #000; width: auto; height: auto;"
           type="button"
         >
           
@@ -1734,7 +1737,7 @@ exports[`DefaultLayout > renders 1`] = `
           class="v-btn v-btn--elevated v-theme--light v-btn--density-default v-btn--variant-elevated main-button main-button--border-blue main-button-auto new-project-button"
           data-v-2b63c1fe=""
           data-v-75d0be1e=""
-          style="background-color: #f09630; color: #000; caret-color: #000; height: auto; width: auto;"
+          style="background-color: #f09630; color: #000; caret-color: #000; width: auto; height: auto;"
           type="button"
         >
           
@@ -2295,7 +2298,6 @@ exports[`DefaultLayout > renders 1`] = `
           aria-owns="v-menu-8"
           class="mx-auto user-info rounded-pill d-flex flex-row text-icon border-sm align-center justify-center"
           data-v-607bdd70=""
-          targetref="[object Object]"
         >
           
           <div

diff --git a/frontend/src/pages/Guard.spec.ts b/frontend/src/pages/Guard.spec.ts
@@ -16,13 +16,11 @@ describe('global route guard', () => {
 
   describe('unauthenticated', () => {
     it('throws and redirects', () => {
-      try {
-        // eslint-disable-next-line vitest/require-to-throw-message
-        expect(guard({ hasToken: false } as PageContextServer)).toThrow()
-      } catch (error) {
-        // eslint-disable-next-line vitest/no-conditional-expect
-        expect(redirect).toHaveBeenCalledWith('/signin')
-      }
+      /* We expect redirect('/signin') to be thrown, but it's an object,
+         which is not an acceptable argument for toThrow(). */
+      /* eslint-disable-next-line vitest/require-to-throw-message */
+      expect(() => guard({ hasToken: false } as PageContextServer)).toThrow()
+      expect(redirect).toHaveBeenCalledWith('/signin')
     })
   })