Update Nuxt and create shared folder (#5187)

* Update nuxt version

* Move utils, types and constants to shared folder

frontend/.storybook/decorators/with-rtl.js

@@ -1,5 +1,4 @@
 import { useI18n } from "#imports"
-
 import { ref, watch, onMounted, reactive, h } from "vue"
 
 import { useEffect } from "@storybook/preview-api"

frontend/.storybook/decorators/with-theme.ts

@@ -1,10 +1,10 @@
 import { watch, onMounted, reactive, h } from "vue"
-import { useEffect, useGlobals } from "@storybook/preview-api"
 
-import { EffectiveColorMode } from "~/types/ui"
+import { useEffect, useGlobals } from "@storybook/preview-api"
 
-import { useDarkMode } from "~/composables/use-dark-mode"
+import { EffectiveColorMode } from "#shared/types/ui"
 import { useUiStore } from "~/stores/ui"
+import { useDarkMode } from "~/composables/use-dark-mode"
 
 import VThemeSelect from "~/components/VThemeSelect/VThemeSelect.vue"
 

frontend/.storybook/preview.ts

@@ -1,5 +1,4 @@
-import { VIEWPORTS } from "~/constants/screens"
-
+import { VIEWPORTS } from "#shared/constants/screens"
 import { WithUiStore } from "~~/.storybook/decorators/with-ui-store"
 import { WithRTL } from "~~/.storybook/decorators/with-rtl"
 import { WithTheme } from "~~/.storybook/decorators/with-theme"

frontend/bin/get-custom-event-names.js

@@ -11,7 +11,7 @@ const ts = require("typescript")
 const analyticsTypesModule = path.resolve(
   __dirname,
   "..",
-  "src",
+  "shared",
   "types",
   "analytics.ts"
 )

frontend/i18n/locales/scripts/axios.js

@@ -1,6 +1,6 @@
 const axios = require("axios")
 
-const { userAgent } = require("../../../src/constants/user-agent")
+const { userAgent } = require("../../../shared/constants/user-agent")
 
 module.exports = module.exports = axios.create({
   headers: { "User-Agent": userAgent },

frontend/i18n/locales/scripts/bulk-download.js

@@ -1,5 +1,4 @@
 const { pipeline } = require("stream/promises")
-
 const { createWriteStream } = require("fs")
 
 const AdmZip = require("adm-zip")

frontend/nuxt.config.ts

@@ -1,6 +1,6 @@
 import { defineNuxtConfig } from "nuxt/config"
 
-import { disallowedBots } from "./src/constants/disallowed-bots"
+import { disallowedBots } from "./shared/constants/disallowed-bots"
 import locales from "./i18n/locales/scripts/valid-locales.json"
 
 import type { LocaleObject } from "@nuxtjs/i18n"

frontend/package.json

@@ -108,14 +108,14 @@
     "jsdom": "^25.0.0",
     "node-html-parser": "^6.1.13",
     "npm-run-all2": "^7.0.0",
-    "nuxt": "3.13.2",
+    "nuxt": "^3.14.1592",
     "rimraf": "^6.0.1",
     "storybook": "^8.3.6",
     "talkback": "^4.2.0",
     "typescript": "5.6.3",
     "vitest": "^2.1.4",
     "vitest-dom": "^0.1.1",
-    "vue": "3.5.13",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5",
     "vue-tsc": "2.1.10",
     "vue-i18n": "10.0.5"

frontend/scripts/document-media.js

@@ -182,7 +182,7 @@ function extractComments(node, ast) {
  * @returns {ts.SourceFile} the AST for the media types file
  */
 function getAst() {
-  const tsFilePath = path.resolve(__dirname, "../src/types/media.ts")
+  const tsFilePath = path.resolve(__dirname, "../shared/types/media.ts")
   console.log(`Parsing ${tsFilePath}.`)
 
   return ts.createSourceFile(

frontend/server/plugins/sentry.ts

@@ -2,7 +2,6 @@ import { useRuntimeConfig, useAppConfig } from "#imports"
 
 import { defineNitroPlugin } from "nitropack/runtime"
 import * as Sentry from "@sentry/node"
-
 import { logger } from "~~/server/utils/logger"
 
 export default defineNitroPlugin((nitroApp) => {

frontend/server/utils/logger.ts

@@ -1,6 +1,6 @@
 import { consola } from "consola"
 
-import { LOCAL, PRODUCTION, STAGING } from "~/constants/deploy-env"
+import { LOCAL, PRODUCTION, STAGING } from "#shared/constants/deploy-env"
 
 /**
  * This logger is used only in the Nitro server.

frontend/src/constants/filters.ts → frontend/shared/constants/filters.ts

@@ -1,8 +1,13 @@
-import { ALL_MEDIA, AUDIO, IMAGE, VIDEO, MODEL_3D } from "~/constants/media"
-import { ACTIVE_LICENSES } from "~/constants/license"
-import { deepFreeze } from "~/utils/deep-freeze"
-
-import type { SearchType } from "~/constants/media"
+import {
+  ALL_MEDIA,
+  AUDIO,
+  IMAGE,
+  VIDEO,
+  MODEL_3D,
+} from "#shared/constants/media"
+import { ACTIVE_LICENSES } from "#shared/constants/license"
+import type { SearchType } from "#shared/constants/media"
+import { deepFreeze } from "#shared/utils/deep-freeze"
 
 export interface FilterItem {
   code: string

frontend/src/types/analytics.ts → frontend/shared/types/analytics.ts

@@ -3,13 +3,13 @@ import type {
   SearchType,
   SupportedMediaType,
   SupportedSearchType,
-} from "~/constants/media"
-import type { ReportReason } from "~/constants/content-report"
-import type { FilterCategory } from "~/constants/filters"
-import { ResultKind } from "~/types/result"
-import { RequestKind } from "~/types/fetch-state"
-import { Collection } from "~/types/search"
-import { License } from "~/constants/license"
+} from "#shared/constants/media"
+import type { ReportReason } from "#shared/constants/content-report"
+import type { FilterCategory } from "#shared/constants/filters"
+import type { License } from "#shared/constants/license"
+import type { ResultKind } from "#shared/types/result"
+import type { RequestKind } from "#shared/types/fetch-state"
+import type { Collection } from "#shared/types/search"
 
 export type AudioInteraction = "play" | "pause" | "seek"
 export type AudioInteractionData = Exclude<

frontend/src/types/collection-component-props.ts → frontend/shared/types/collection-component-props.ts

@@ -1,6 +1,6 @@
-import { type SupportedSearchType, IMAGE, AUDIO } from "~/constants/media"
-import type { AudioDetail, ImageDetail } from "~/types/media"
-import type { ResultKind, Results } from "~/types/result"
+import { type SupportedSearchType, IMAGE, AUDIO } from "#shared/constants/media"
+import type { AudioDetail, ImageDetail } from "#shared/types/media"
+import type { ResultKind, Results } from "#shared/types/result"
 
 export type SingleResultProps = {
   kind: ResultKind

frontend/src/types/cookies.ts → frontend/shared/types/cookies.ts

@@ -1,4 +1,4 @@
-import type { FeatureState } from "~/constants/feature-flag"
+import type { FeatureState } from "#shared/constants/feature-flag"
 import { UiState } from "~/stores/ui"
 
 const baseCookieOptions = {

frontend/src/types/feature-flag.ts → frontend/shared/types/feature-flag.ts

@@ -4,8 +4,8 @@ import type {
   FeatureState,
   FlagStatus,
   Storage,
-} from "~/constants/feature-flag"
-import type { DeployEnv } from "~/constants/deploy-env"
+} from "#shared/constants/feature-flag"
+import type { DeployEnv } from "#shared/constants/deploy-env"
 
 export type FlagName = keyof (typeof featureData)["features"]
 

frontend/src/types/fetch-state.ts → frontend/shared/types/fetch-state.ts

@@ -1,5 +1,5 @@
-import type { ErrorCode } from "~/constants/errors"
-import type { SupportedSearchType } from "~/constants/media"
+import type { ErrorCode } from "#shared/constants/errors"
+import type { SupportedSearchType } from "#shared/constants/media"
 
 /**
  * Describes the kind of API request that was made.

frontend/src/types/media.ts → frontend/shared/types/media.ts

@@ -3,13 +3,13 @@
 // The source code of this package is parsed to create the media properties
 // documentation by the script `scripts/document-media.js`.
 
-import type { SupportedMediaType } from "~/constants/media"
-import type { License, LicenseVersion } from "~/constants/license"
+import type { SupportedMediaType } from "#shared/constants/media"
+import type { License, LicenseVersion } from "#shared/constants/license"
 import {
   SENSITIVITY_RESPONSE_PARAM,
   Sensitivity,
-} from "~/constants/content-safety"
-import { AUDIO, IMAGE } from "~/constants/media"
+} from "#shared/constants/content-safety"
+import { AUDIO, IMAGE } from "#shared/constants/media"
 
 export interface Tag {
   name: string

frontend/src/types/result.ts → frontend/shared/types/result.ts

@@ -1,5 +1,5 @@
-import { ALL_MEDIA, AUDIO, IMAGE } from "~/constants/media"
-import { AudioDetail, ImageDetail } from "~/types/media"
+import { ALL_MEDIA, AUDIO, IMAGE } from "#shared/constants/media"
+import type { AudioDetail, ImageDetail } from "#shared/types/media"
 
 export type ResultKind = "search" | "related" | "collection"
 export type ImageResults = {

frontend/src/types/search.ts → frontend/shared/types/search.ts

@@ -1,4 +1,4 @@
-import { INCLUDE_SENSITIVE_QUERY_PARAM } from "~/constants/content-safety"
+import { INCLUDE_SENSITIVE_QUERY_PARAM } from "#shared/constants/content-safety"
 
 export type Collection = "tag" | "creator" | "source"
 export type SearchStrategy = "default" | Collection

frontend/src/utils/attribution-html.ts → frontend/shared/utils/attribution-html.ts

@@ -5,13 +5,13 @@
  */
 import enJson from "~~/i18n/locales/en.json"
 
-import type { Media } from "~/types/media"
+import type { LicenseElement } from "#shared/constants/license"
 import {
   getElements,
   getFullLicenseName,
   isPublicDomain,
-} from "~/utils/license"
-import type { LicenseElement } from "~/constants/license"
+} from "#shared/utils/license"
+import type { Media } from "#shared/types/media"
 
 import type { Composer } from "vue-i18n"
 

frontend/src/utils/content-safety.ts → frontend/shared/utils/content-safety.ts

@@ -2,14 +2,14 @@
  * Contains utilities related to content safety.
  */
 
-import { hash, rand as prng } from "~/utils/prng"
-import { log } from "~/utils/console"
 import {
   USER_REPORTED,
   PROVIDER_SUPPLIED,
   TEXT_FILTERED,
   Sensitivity,
-} from "~/constants/content-safety"
+} from "#shared/constants/content-safety"
+import { hash, rand as prng } from "#shared/utils/prng"
+import { log } from "~/utils/console"
 
 /**
  * Get an array of randomly selected sensitive content flags for an item with

frontend/src/utils/errors.ts → frontend/shared/utils/errors.ts

@@ -1,5 +1,5 @@
-import { clientSideErrorCodes, NO_RESULT } from "~/constants/errors"
-import type { FetchingError } from "~/types/fetch-state"
+import { clientSideErrorCodes, NO_RESULT } from "#shared/constants/errors"
+import type { FetchingError } from "#shared/types/fetch-state"
 
 const NON_RETRYABLE_ERROR_CODES = [429, 500, 404] as const
 const isNonRetryableErrorStatusCode = (statusCode: number | undefined) => {

frontend/src/utils/get-additional-sources.ts → frontend/shared/utils/get-additional-sources.ts

@@ -1,7 +1,6 @@
-import type { MediaType } from "~/constants/media"
-import type { PaginatedSearchQuery } from "~/types/search"
-
-import { MODEL_3D } from "~/constants/media"
+import type { MediaType } from "#shared/constants/media"
+import { MODEL_3D } from "#shared/constants/media"
+import type { PaginatedSearchQuery } from "#shared/types/search"
 
 /**
  * Describes the query format used by the URL builder functions of additional

frontend/src/utils/license.ts → frontend/shared/utils/license.ts

@@ -7,13 +7,13 @@ import type {
   License,
   LicenseVersion,
   LicenseElement,
-} from "~/constants/license"
+} from "#shared/constants/license"
 import {
   CC_LICENSES,
   DEPRECATED_CC_LICENSES,
   PUBLIC_DOMAIN_MARKS,
-} from "~/constants/license"
-import { camelCase } from "~/utils/case"
+} from "#shared/constants/license"
+import { camelCase } from "#shared/utils/case"
 
 import type { Composer } from "vue-i18n"
 

frontend/src/utils/query-utils.ts → frontend/shared/utils/query-utils.ts

@@ -1,4 +1,4 @@
-import { SupportedMediaType } from "~/constants/media"
+import { SupportedMediaType } from "#shared/constants/media"
 
 import type { LocationQueryValue } from "vue-router"
 

frontend/src/utils/search-query-transform.ts → frontend/shared/utils/search-query-transform.ts

@@ -5,24 +5,22 @@ import {
   FilterItem,
   Filters,
   mediaFilterKeys,
-} from "~/constants/filters"
+} from "#shared/constants/filters"
 import {
   ALL_MEDIA,
   mediaTypes,
   SearchType,
   SupportedSearchType,
   supportedSearchTypes,
-} from "~/constants/media"
-import { INCLUDE_SENSITIVE_QUERY_PARAM } from "~/constants/content-safety"
-import { deepClone } from "~/utils/clone"
-
-import {
+} from "#shared/constants/media"
+import { INCLUDE_SENSITIVE_QUERY_PARAM } from "#shared/constants/content-safety"
+import { deepClone } from "#shared/utils/clone"
+import { firstParam } from "#shared/utils/query-utils"
+import type {
   SearchFilterKeys,
   PaginatedSearchQuery,
   SearchFilterQuery,
-} from "~/types/search"
-
-import { firstParam } from "~/utils/query-utils"
+} from "#shared/types/search"
 
 import type { LocationQuery } from "vue-router"
 

frontend/src/app.vue

@@ -7,16 +7,13 @@ import {
   useRuntimeConfig,
 } from "#imports"
 
+import { meta as commonMeta } from "#shared/constants/meta"
+import { favicons } from "#shared/constants/favicons"
 import { useUiStore } from "~/stores/ui"
 import { useFeatureFlagStore } from "~/stores/feature-flag"
-
 import { useLayout } from "~/composables/use-layout"
 import { useDarkMode } from "~/composables/use-dark-mode"
 
-import { meta as commonMeta } from "~/constants/meta"
-
-import { favicons } from "~/constants/favicons"
-
 import VSkipToContentButton from "~/components/VSkipToContentButton.vue"
 
 const { updateBreakpoint } = useLayout()

frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue

@@ -3,12 +3,11 @@
  * Displays the cover art for the audio in a square aspect ratio.
  */
 import { useI18n } from "#imports"
-
 import { toRefs, ref, onMounted } from "vue"
 
-import { rand, hash } from "~/utils/prng"
-import { lerp, dist, bezier, Point } from "~/utils/math"
-import type { AudioDetail } from "~/types/media"
+import { rand, hash } from "#shared/utils/prng"
+import { lerp, dist, bezier, Point } from "#shared/utils/math"
+import type { AudioDetail } from "#shared/types/media"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 
 const props = defineProps<{

frontend/src/components/VAudioThumbnail/meta/VAudioThumbnail.stories.ts

@@ -1,9 +1,9 @@
-import { Meta, type StoryObj } from "@storybook/vue3"
 import { h } from "vue"
 
+import { Meta, type StoryObj } from "@storybook/vue3"
 import { getAudioObj } from "~~/test/unit/fixtures/audio"
 
-import { AudioDetail } from "~/types/media"
+import type { AudioDetail } from "#shared/types/media"
 
 import VAudioThumbnail from "~/components/VAudioThumbnail/VAudioThumbnail.vue"
 

frontend/src/components/VAudioTrack/VAudioControl.vue

@@ -3,11 +3,15 @@
  * Displays the control for switching between the playing and paused states of
  * a media file.
  */
-import { computed } from "vue"
 
-import { AudioLayout, AudioStatus, statusVerbMap } from "~/constants/audio"
-import type { ButtonConnections } from "~/types/button"
+import { computed } from "vue"
 
+import {
+  AudioLayout,
+  AudioStatus,
+  statusVerbMap,
+} from "#shared/constants/audio"
+import type { ButtonConnections } from "#shared/types/button"
 import { useHydrating } from "~/composables/use-hydrating"
 
 import VIconButton from "~/components/VIconButton/VIconButton.vue"