Convert 6 utils to TypeScript

.eslintrc.js

@@ -18,7 +18,13 @@ module.exports = {
     'plugin:@intlify/vue-i18n/recommended',
   ],
   // required to lint *.vue files
-  plugins: ['@typescript-eslint', 'vue', 'vuejs-accessibility', 'unicorn'],
+  plugins: [
+    '@typescript-eslint',
+    'eslint-plugin-tsdoc',
+    'vue',
+    'vuejs-accessibility',
+    'unicorn',
+  ],
   // add your custom rules here
   rules: {
     semi: [2, 'never'],
@@ -75,6 +81,14 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': ['warn'],
     '@typescript-eslint/no-var-requires': ['warn'],
   },
+  overrides: [
+    {
+      files: ['*.ts'],
+      rules: {
+        'tsdoc/syntax': 'warn',
+      },
+    },
+  ],
   settings: {
     'vue-i18n': {
       localeDir: './src/locales/*.{json}',

Dockerfile

@@ -76,7 +76,7 @@ COPY pnpm-lock.yaml .
 COPY .npmrc .
 
 # copy the nuxt configuration file
-COPY --from=builder /usr/app/nuxt.config.js .
+COPY --from=builder /usr/app/nuxt.config.ts .
 
 # copy distribution directory with the static content
 COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt
@@ -106,4 +106,3 @@ EXPOSE 8443
 
 # run the application in static mode
 ENTRYPOINT ["pnpm", "run", "start"]
-

nuxt-template-overrides/README.md

@@ -1,6 +1,6 @@
 # Nuxt vue-app template overrides
 
-Due to a CSS ordering bug that we haven't been able to find any other solutions for, we've had to override the Nuxt templates for the `App.js` and `index.js` files to prevent any Vue components from being imported before the static CSS assets in the `nuxt.config.js`.
+Due to a CSS ordering bug that we haven't been able to find any other solutions for, we've had to override the Nuxt templates for the `App.js` and `index.js` files to prevent any Vue components from being imported before the static CSS assets in the `nuxt.config.ts`.
 
 ## Described changes
 

nuxt.config.js → nuxt.config.ts

@@ -1,9 +1,13 @@
+import type { NuxtConfig } from '@nuxt/types'
+
 import pkg from './package.json'
 import locales from './src/locales/scripts/valid-locales.json'
+
 import { VIEWPORTS } from './src/constants/screens'
-import { dev } from './src/utils/dev'
+
+import { isProd } from './src/utils/node-env'
+import { sentryConfig } from './src/utils/sentry-config'
 import { env } from './src/utils/env'
-import { sentry } from './src/utils/sentry-config'
 
 /**
  * The default metadata for the site. Can be extended and/or overwritten per page. And even in components!
@@ -51,6 +55,7 @@ const meta = [
 
 if (process.env.NODE_ENV === 'production') {
   meta.push({
+    // @ts-expect-error: 'http-equiv' isn't allowed here by Nuxt
     'http-equiv': 'Content-Security-Policy',
     content: 'upgrade-insecure-requests',
   })
@@ -99,7 +104,7 @@ const head = {
   ],
 }
 
-export default {
+const config: NuxtConfig = {
   // eslint-disable-next-line no-undef
   version: pkg.version, // used to purge cache :)
   cache: {
@@ -116,9 +121,9 @@ export default {
   router: {
     middleware: 'middleware',
   },
-  components: {
-    dirs: [{ path: '~/components', extensions: ['vue'], pathPrefix: false }],
-  },
+  components: [
+    { path: '~/components', extensions: ['vue'], pathPrefix: false },
+  ],
   plugins: [
     { src: '~/plugins/url-change.js' },
     { src: '~/plugins/migration-notice.js' },
@@ -134,7 +139,7 @@ export default {
   ],
   head,
   env,
-  dev,
+  dev: !isProd,
   buildModules: [
     '@nuxt/typescript-build',
     '@nuxtjs/composition-api/module',
@@ -195,7 +200,7 @@ export default {
    * {@link https://github.com/nuxt-community/redirect-module#usage}
    */
   redirect: [{ from: '^/photos/(.*)$', to: '/image/$1', statusCode: 301 }],
-  sentry,
+  sentry: sentryConfig,
   build: {
     templates: [
       {
@@ -245,3 +250,5 @@ export default {
     },
   },
 }
+
+export default config

package.json

@@ -27,8 +27,8 @@
     "e2e:ci": "start-server-and-test run-server http://localhost:8443 test:e2e",
     "generate-e2e-tests": "playwright codegen localhost:8443/",
     "types": "tsc --noEmit",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
-    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
+    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
+    "lintfix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore --ignore-path .eslintignore .",
     "format": "prettier --write .",
     "format:test": "prettier --check .",
     "vue-i18n-check": "vue-i18n-extract report --vueFiles './src/**/*.?(js|vue)' --languageFiles './src/locales/*.?(json)'",
@@ -108,6 +108,7 @@
     "eslint-config-prettier": "^8.1.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-tsdoc": "^0.2.14",
     "eslint-plugin-unicorn": "^35.0.0",
     "eslint-plugin-vue": "^7.8.0",
     "eslint-plugin-vuejs-accessibility": "^0.6.1",

src/components/SketchFabViewer.vue

@@ -16,6 +16,7 @@
 
 <script>
 import loadScript from '~/utils/load-script'
+import { log } from '~/utils/console'
 
 const sketchfabUrl =
   'https://static.sketchfab.com/api/sketchfab-viewer-1.10.1.js'
@@ -34,11 +35,11 @@ export default {
         success: (api) => {
           api.addEventListener('viewerready', () => {
             this.loading = false
-            console.log('LOADED!')
+            log('LOADED!')
           })
         },
         error: () => {
-          console.log('Viewer error')
+          log('Viewer error')
         },
       },
       loading: true,

src/components/VButton.vue

@@ -31,7 +31,7 @@ import {
   computed,
 } from '@nuxtjs/composition-api'
 import VLink from '~/components/VLink.vue'
-import { warn } from '@/utils/warn'
+import { warn } from '~/utils/console'
 
 /**
  * A button component that behaves just like a regular HTML `button` element

src/components/VIcon/VIcon.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script>
+import { isTest } from '~/utils/node-env'
+
 /**
  * Displays the given icon in a 24px × 24px square.
  */
@@ -33,7 +35,7 @@ export default {
       /**
        * In `jest` our icons get transformed to Vue components
        */
-      type: process.env.NODE_ENV === 'test' ? Object : String,
+      type: isTest ? Object : String,
       required: true,
     },
     /**

src/components/VItemGroup/VItem.vue

@@ -74,7 +74,7 @@ import {
   VItemGroupFocusContextKey,
 } from './VItemGroup.vue'
 import { VPopoverContentContextKey } from '~/components/VPopover/VPopoverContent.vue'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export default defineComponent({
   name: 'VItem',

src/components/VModal/VMobileModalContent.vue

@@ -45,7 +45,7 @@
 import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 import { useDialogContent } from '~/composables/use-dialog-content'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 import closeIcon from '~/assets/icons/close.svg'
 

src/components/VModal/VModalContent.vue

@@ -42,7 +42,7 @@ import { defineComponent, toRefs, ref } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
 import VTeleport from '~/components/VTeleport/VTeleport'
 import { useDialogContent } from '~/composables/use-dialog-content'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import closeIcon from '~/assets/icons/close.svg'

src/components/VPopover/VPopoverContent.vue

@@ -21,7 +21,7 @@
 <script>
 import { defineComponent, toRefs, ref, provide } from '@nuxtjs/composition-api'
 import { usePopoverContent } from '~/composables/use-popover-content'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 import { propTypes } from './VPopoverContent.types'
 

src/components/VPopover/meta/VPopover.stories.js

@@ -2,6 +2,8 @@ import VPopover from '~/components/VPopover/VPopover.vue'
 import VButton from '~/components/VButton'
 import { placements as popoverPlacements } from '@popperjs/core'
 
+import { log } from '~/utils/console'
+
 export default {
   component: VPopover,
   title: 'Components/VPopover',
@@ -37,8 +39,8 @@ const SinglePopoverStory = (args, { argTypes }) => ({
   `,
   components: { VPopover, VButton },
   setup() {
-    const onOpen = () => console.log('opened!')
-    const onClose = () => console.log('closed!')
+    const onOpen = () => log('opened!')
+    const onClose = () => log('closed!')
 
     return { onOpen, onClose }
   },

src/components/VTeleport/VTeleportTarget.vue

@@ -1,7 +1,7 @@
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
 import { targets } from './meta/targets'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export default defineComponent({
   name: 'VTeleportTarget',

src/components/meta/DropdownButton.stories.js

@@ -1,5 +1,7 @@
 import DropdownButton from '~/components/DropdownButton'
 
+import { log } from '~/utils/console'
+
 export default {
   title: 'Components/DropdownButton',
   component: DropdownButton,
@@ -41,13 +43,13 @@ export const Default = (args, { argTypes }) => ({
   },
   computed: {
     activeItem() {
-      console.log(this)
+      log(this)
       return this.items.find((item) => item.active)
     },
   },
   methods: {
     onClick(event) {
-      console.log(event)
+      log(event)
       alert('clicked!')
     },
     setActive(toActivate) {

src/composables/use-focus-on-show.js

@@ -3,7 +3,7 @@ import { getFirstTabbableIn } from 'reakit-utils/tabbable'
 import { hasFocusWithin } from 'reakit-utils/hasFocusWithin'
 import { ensureFocus } from 'reakit-utils/ensureFocus'
 
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 
 export const noFocusableElementWarning =
   "It's recommended to have at least one tabbable element inside dialog. The dialog element has been automatically focused. If this is the intended behavior, pass `tabIndex={0}` to the dialog element to disable this warning."

src/data/api-service.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { warn } from '~/utils/warn'
+import { warn } from '~/utils/console'
 import { AUDIO, IMAGE } from '~/constants/media'
 
 const DEFAULT_REQUEST_TIMEOUT = 30000

src/locales/scripts/get-validated-locales.js

@@ -10,8 +10,8 @@ const { addFetchedTranslationStatus } = require('./get-translations-status')
 /**
  * Returns a list of locale objects with at least one translated string
  * @returns {{
- * translated: import('./types').i18nLocaleProps[],
- * untranslated: import('./types').i18nLocaleProps[]
+ * translated: import('./types').I18nLocaleProps[],
+ * untranslated: import('./types').I18nLocaleProps[]
  * }}
  */
 const getValidatedLocales = async () => {

src/locales/scripts/types.d.ts

@@ -1,3 +1,9 @@
-/**
- * @typedef {{ code: string, wpLocale?: string, file?: string, iso?: string, name: string, dir?: string, translated?: number }} i18nLocaleProps
- */
+export interface I18nLocaleProps {
+  code: string
+  name: string
+  wpLocale?: string
+  file?: string
+  iso?: string
+  dir?: string
+  translated?: number
+}