Update Nuxt to v3.12.1 (#1720)

* Update Nuxt dependencies * Fix ref access in ChartDisplay * Fix feature flags cookie options type error * Specify type-only imports * Fix shorthands access to tags outside of reactive scope * Replace most useRoute calls with useRoute from vue-router Nuxt's version of this composable is horrendously broken (nuxt/nuxt#21340) * Import all svgs with ?component parameter Fixes weird hydration issues + gives correct type
modrinth · Jun 14, 2024 · 34fd9d2 · 34fd9d2
1 parent c6d8476
commit 34fd9d2
Show file tree

Hide file tree

Showing 68 changed files with 5,564 additions and 4,744 deletions.
diff --git a/components/ui/Badge.vue b/components/ui/Badge.vue
@@ -35,19 +35,19 @@
 </template>
 
 <script setup>
-import ModrinthIcon from '~/assets/images/logo.svg'
-import ModeratorIcon from '~/assets/images/sidebar/admin.svg'
-import CreatorIcon from '~/assets/images/utils/box.svg'
-import ListIcon from '~/assets/images/utils/list.svg'
-import EyeOffIcon from '~/assets/images/utils/eye-off.svg'
-import DraftIcon from '~/assets/images/utils/file-text.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import ArchiveIcon from '~/assets/images/utils/archive.svg'
-import ProcessingIcon from '~/assets/images/utils/updated.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import LockIcon from '~/assets/images/utils/lock.svg'
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import CloseIcon from '~/assets/images/utils/check-circle.svg'
+import ModrinthIcon from '~/assets/images/logo.svg?component'
+import ModeratorIcon from '~/assets/images/sidebar/admin.svg?component'
+import CreatorIcon from '~/assets/images/utils/box.svg?component'
+import ListIcon from '~/assets/images/utils/list.svg?component'
+import EyeOffIcon from '~/assets/images/utils/eye-off.svg?component'
+import DraftIcon from '~/assets/images/utils/file-text.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import ArchiveIcon from '~/assets/images/utils/archive.svg?component'
+import ProcessingIcon from '~/assets/images/utils/updated.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import LockIcon from '~/assets/images/utils/lock.svg?component'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?component'
+import CloseIcon from '~/assets/images/utils/check-circle.svg?component'
 
 defineProps({
   type: {

diff --git a/components/ui/Breadcrumbs.vue b/components/ui/Breadcrumbs.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
 
 defineProps({
   linkStack: {

diff --git a/components/ui/Checkbox.vue b/components/ui/Checkbox.vue
@@ -25,8 +25,8 @@
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg'
-import DropdownIcon from '~/assets/images/utils/dropdown.svg'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?component'
 
 export default {
   components: {

diff --git a/components/ui/Chips.vue b/components/ui/Chips.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
 
 export default {
   components: {

diff --git a/components/ui/CopyCode.vue b/components/ui/CopyCode.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import CheckIcon from '~/assets/images/utils/check.svg'
-import ClipboardCopyIcon from '~/assets/images/utils/clipboard-copy.svg'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import ClipboardCopyIcon from '~/assets/images/utils/clipboard-copy.svg?component'
 
 export default {
   components: {

diff --git a/components/ui/EnvironmentIndicator.vue b/components/ui/EnvironmentIndicator.vue
@@ -48,10 +48,10 @@
   </span>
 </template>
 <script setup>
-import InfoIcon from '~/assets/images/utils/info.svg'
-import ClientIcon from '~/assets/images/utils/client.svg'
-import GlobeIcon from '~/assets/images/utils/globe.svg'
-import ServerIcon from '~/assets/images/utils/server.svg'
+import InfoIcon from '~/assets/images/utils/info.svg?component'
+import ClientIcon from '~/assets/images/utils/client.svg?component'
+import GlobeIcon from '~/assets/images/utils/globe.svg?component'
+import ServerIcon from '~/assets/images/utils/server.svg?component'
 
 defineProps({
   type: {

diff --git a/components/ui/Modal.vue b/components/ui/Modal.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import CrossIcon from '~/assets/images/utils/x.svg'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
 
 export default {
   components: {

diff --git a/components/ui/ModalConfirm.vue b/components/ui/ModalConfirm.vue
@@ -35,8 +35,8 @@
 
 <script>
 import { renderString } from 'omorphia'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import TrashIcon from '~/assets/images/utils/trash.svg'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import TrashIcon from '~/assets/images/utils/trash.svg?component'
 import Modal from '~/components/ui/Modal.vue'
 
 export default {

diff --git a/components/ui/ModalCreation.vue b/components/ui/ModalCreation.vue
@@ -74,8 +74,8 @@
 
 <script>
 import { Multiselect } from 'vue-multiselect'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import CheckIcon from '~/assets/images/utils/right-arrow.svg'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import CheckIcon from '~/assets/images/utils/right-arrow.svg?component'
 import Modal from '~/components/ui/Modal.vue'
 
 export default {

diff --git a/components/ui/NavStackItem.vue b/components/ui/NavStackItem.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
 
 export default {
   components: {

diff --git a/components/ui/NotificationItem.vue b/components/ui/NotificationItem.vue
@@ -289,15 +289,15 @@
 
 <script setup>
 import { renderString } from 'omorphia'
-import InvitationIcon from '~/assets/images/utils/user-plus.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import NotificationIcon from '~/assets/images/sidebar/notifications.svg'
-import ReadIcon from '~/assets/images/utils/check-circle.svg'
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import VersionIcon from '~/assets/images/utils/version.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import ExternalIcon from '~/assets/images/utils/external.svg'
+import InvitationIcon from '~/assets/images/utils/user-plus.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
+import NotificationIcon from '~/assets/images/sidebar/notifications.svg?component'
+import ReadIcon from '~/assets/images/utils/check-circle.svg?component'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?component'
+import VersionIcon from '~/assets/images/utils/version.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import ExternalIcon from '~/assets/images/utils/external.svg?component'
 import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
 import { getProjectLink, getVersionLink } from '~/helpers/projects.js'
 import { getUserLink } from '~/helpers/users.js'

diff --git a/components/ui/Pagination.vue b/components/ui/Pagination.vue
@@ -51,9 +51,9 @@
 </template>
 
 <script>
-import GapIcon from '~/assets/images/utils/gap.svg'
-import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg'
-import RightArrowIcon from '~/assets/images/utils/right-arrow.svg'
+import GapIcon from '~/assets/images/utils/gap.svg?component'
+import LeftArrowIcon from '~/assets/images/utils/left-arrow.svg?component'
+import RightArrowIcon from '~/assets/images/utils/right-arrow.svg?component'
 
 export default {
   components: {

diff --git a/components/ui/ProjectCard.vue b/components/ui/ProjectCard.vue
@@ -94,10 +94,10 @@ import Categories from '~/components/ui/search/Categories.vue'
 import Badge from '~/components/ui/Badge.vue'
 import EnvironmentIndicator from '~/components/ui/EnvironmentIndicator.vue'
 
-import CalendarIcon from '~/assets/images/utils/calendar.svg'
-import EditIcon from '~/assets/images/utils/updated.svg'
-import DownloadIcon from '~/assets/images/utils/download.svg'
-import HeartIcon from '~/assets/images/utils/heart.svg'
+import CalendarIcon from '~/assets/images/utils/calendar.svg?component'
+import EditIcon from '~/assets/images/utils/updated.svg?component'
+import DownloadIcon from '~/assets/images/utils/download.svg?component'
+import HeartIcon from '~/assets/images/utils/heart.svg?component'
 import Avatar from '~/components/ui/Avatar.vue'
 
 export default {

diff --git a/components/ui/ProjectMemberHeader.vue b/components/ui/ProjectMemberHeader.vue
@@ -108,14 +108,14 @@
 <script setup>
 import { formatProjectType } from '~/plugins/shorthands.js'
 
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
-import DropdownIcon from '~/assets/images/utils/dropdown.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import RequiredIcon from '~/assets/images/utils/asterisk.svg'
-import SuggestionIcon from '~/assets/images/utils/lightbulb.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import SendIcon from '~/assets/images/utils/send.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import RequiredIcon from '~/assets/images/utils/asterisk.svg?component'
+import SuggestionIcon from '~/assets/images/utils/lightbulb.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
+import SendIcon from '~/assets/images/utils/send.svg?component'
 import { acceptTeamInvite, removeTeamMember } from '~/helpers/teams.js'
 
 const props = defineProps({

diff --git a/components/ui/VersionFilterControl.vue b/components/ui/VersionFilterControl.vue
@@ -86,7 +86,7 @@
 <script setup>
 import { Multiselect } from 'vue-multiselect'
 import Checkbox from '~/components/ui/Checkbox.vue'
-import ClearIcon from '~/assets/images/utils/clear.svg'
+import ClearIcon from '~/assets/images/utils/clear.svg?component'
 
 const props = defineProps({
   versions: {
@@ -98,7 +98,7 @@ const props = defineProps({
 })
 const emit = defineEmits(['switch-page'])
 
-const route = useRoute()
+const route = useNativeRoute()
 
 const tags = useTags()
 
@@ -131,7 +131,7 @@ const selectedVersionTypes = shallowRef(getArrayOrString(route.query.c) ?? [])
 
 async function updateQuery() {
   const router = useRouter()
-  const route = useRoute()
+  const route = useNativeRoute()
 
   await router.replace({
     query: {

diff --git a/components/ui/charts/ChartDisplay.vue b/components/ui/charts/ChartDisplay.vue
@@ -160,7 +160,7 @@
                     <div
                       :style="{
                         '--color-brand': isUsingProjectColors
-                          ? intToRgba(project.color, project.id, theme.value ?? undefined)
+                          ? intToRgba(project.color, project.id, theme ?? undefined)
                           : getDefaultColor(project.id),
                       }"
                       class="legend__item__color"
@@ -306,7 +306,7 @@ import { analyticsSetToCSVString, intToRgba } from '~/utils/analytics.js'
 
 import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from '#components'
 
-import PaletteIcon from '~/assets/icons/palette.svg'
+import PaletteIcon from '~/assets/icons/palette.svg?component'
 
 const router = useRouter()
 const theme = useTheme()

diff --git a/components/ui/report/ReportInfo.vue b/components/ui/report/ReportInfo.vue
@@ -91,9 +91,9 @@
 import { renderHighlightedString } from '~/helpers/highlight.js'
 import Avatar from '~/components/ui/Avatar.vue'
 import Badge from '~/components/ui/Badge.vue'
-import ReportIcon from '~/assets/images/utils/report.svg'
-import UnknownIcon from '~/assets/images/utils/unknown.svg'
-import VersionIcon from '~/assets/images/utils/version.svg'
+import ReportIcon from '~/assets/images/utils/report.svg?component'
+import UnknownIcon from '~/assets/images/utils/unknown.svg?component'
+import VersionIcon from '~/assets/images/utils/version.svg?component'
 import ThreadSummary from '~/components/ui/thread/ThreadSummary.vue'
 import CopyCode from '~/components/ui/CopyCode.vue'
 

diff --git a/components/ui/thread/ConversationThread.vue b/components/ui/thread/ConversationThread.vue
@@ -199,13 +199,13 @@
 import { OverflowMenu, MarkdownEditor, DropdownIcon } from 'omorphia'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import CopyCode from '~/components/ui/CopyCode.vue'
-import ReplyIcon from '~/assets/images/utils/reply.svg'
-import SendIcon from '~/assets/images/utils/send.svg'
-import CloseIcon from '~/assets/images/utils/check-circle.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import EyeOffIcon from '~/assets/images/utils/eye-off.svg'
-import CheckIcon from '~/assets/images/utils/check.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
+import ReplyIcon from '~/assets/images/utils/reply.svg?component'
+import SendIcon from '~/assets/images/utils/send.svg?component'
+import CloseIcon from '~/assets/images/utils/check-circle.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import EyeOffIcon from '~/assets/images/utils/eye-off.svg?component'
+import CheckIcon from '~/assets/images/utils/check.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
 import ThreadMessage from '~/components/ui/thread/ThreadMessage.vue'
 import { isStaff } from '~/helpers/users.js'
 import { isApproved, isRejected } from '~/helpers/projects.js'

diff --git a/components/ui/thread/ThreadSummary.vue b/components/ui/thread/ThreadSummary.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?component'
 import ThreadMessage from '~/components/ui/thread/ThreadMessage.vue'
 
 const props = defineProps({

diff --git a/composables/auth.js b/composables/auth.js
@@ -94,7 +94,7 @@ export const initAuth = async (oldToken = null) => {
 
 export const getAuthUrl = (provider, redirect = '') => {
   const config = useRuntimeConfig()
-  const route = useRoute()
+  const route = useNativeRoute()
 
   if (redirect === '') {
     redirect = route.path

diff --git a/composables/compact-number.ts b/composables/compact-number.ts
@@ -1,5 +1,5 @@
 import { createFormatter, type Formatter } from '@vintl/compact-number'
-import { IntlController } from '@vintl/vintl/controller'
+import type { IntlController } from '@vintl/vintl/controller'
 
 const formatters = new WeakMap<IntlController<any>, Formatter>()
 

diff --git a/composables/featureFlags.ts b/composables/featureFlags.ts
@@ -1,4 +1,4 @@
-import { CookieOptions } from '#app'
+import type { CookieOptions } from '#app'
 
 export type ProjectDisplayMode = 'list' | 'grid' | 'gallery'
 export type DarkColorTheme = 'dark' | 'oled' | 'retro'
@@ -58,13 +58,13 @@ export type AllFeatureFlags = {
 
 export type PartialFeatureFlags = Partial<AllFeatureFlags>
 
-const COOKIE_OPTIONS: CookieOptions<PartialFeatureFlags> = {
+const COOKIE_OPTIONS = {
   maxAge: 60 * 60 * 24 * 365 * 10,
   sameSite: 'lax',
   secure: true,
   httpOnly: false,
   path: '/',
-}
+} satisfies CookieOptions<PartialFeatureFlags>
 
 export const useFeatureFlags = () =>
   useState<AllFeatureFlags>('featureFlags', () => {

diff --git a/composables/how-ago.ts b/composables/how-ago.ts
@@ -1,5 +1,5 @@
 import { createFormatter, type Formatter } from '@vintl/how-ago'
-import { IntlController } from '@vintl/vintl/controller'
+import type { IntlController } from '@vintl/vintl/controller'
 
 const formatters = new WeakMap<IntlController<any>, Formatter>()
 

diff --git a/composables/nuxt-bugfest.ts b/composables/nuxt-bugfest.ts
@@ -0,0 +1 @@
+export { useRoute as useNativeRoute } from 'vue-router'
diff --git a/composables/route-params.js b/composables/route-params.js
@@ -5,6 +5,6 @@
  * @returns {import('vue').Ref<string | string[] | undefined>}
  */
 export const useRouteId = (key = 'id') => {
-  const route = useRoute()
+  const route = useNativeRoute()
   return route.params?.[key] || undefined
 }
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -428,21 +428,21 @@ import {
   Button,
   ReportIcon,
 } from 'omorphia'
-import HamburgerIcon from '~/assets/images/utils/hamburger.svg'
-import CrossIcon from '~/assets/images/utils/x.svg'
-import SearchIcon from '~/assets/images/utils/search.svg'
-
-import NotificationIcon from '~/assets/images/sidebar/notifications.svg'
-import SettingsIcon from '~/assets/images/sidebar/settings.svg'
-import ModerationIcon from '~/assets/images/sidebar/admin.svg'
-import HomeIcon from '~/assets/images/sidebar/home.svg'
-
-import MoonIcon from '~/assets/images/utils/moon.svg'
-import SunIcon from '~/assets/images/utils/sun.svg'
-import PlusIcon from '~/assets/images/utils/plus.svg'
-import DropdownIcon from '~/assets/images/utils/dropdown.svg'
-import LogOutIcon from '~/assets/images/utils/log-out.svg'
-import ChartIcon from '~/assets/images/utils/chart.svg'
+import HamburgerIcon from '~/assets/images/utils/hamburger.svg?component'
+import CrossIcon from '~/assets/images/utils/x.svg?component'
+import SearchIcon from '~/assets/images/utils/search.svg?component'
+
+import NotificationIcon from '~/assets/images/sidebar/notifications.svg?component'
+import SettingsIcon from '~/assets/images/sidebar/settings.svg?component'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?component'
+import HomeIcon from '~/assets/images/sidebar/home.svg?component'
+
+import MoonIcon from '~/assets/images/utils/moon.svg?component'
+import SunIcon from '~/assets/images/utils/sun.svg?component'
+import PlusIcon from '~/assets/images/utils/plus.svg?component'
+import DropdownIcon from '~/assets/images/utils/dropdown.svg?component'
+import LogOutIcon from '~/assets/images/utils/log-out.svg?component'
+import ChartIcon from '~/assets/images/utils/chart.svg?component'
 
 import NavRow from '~/components/ui/NavRow.vue'
 import ModalCreation from '~/components/ui/ModalCreation.vue'
@@ -460,7 +460,7 @@ const flags = useFeatureFlags()
 const tags = useTags()
 
 const config = useRuntimeConfig()
-const route = useRoute()
+const route = useNativeRoute()
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 
 const verifyEmailBannerMessages = defineMessages({
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { useRoute as useNativeRoute } from 'vue-router'