fix(build): typescript target esnext

- upgrade to Node 20
- upgrade to Next 14
- upgrade to React 18.2
- upgrade dev dependencies for linting and typescript
- fixes related to upgrades and build errors

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true,
+    es2022: true,
     node: true,
     'jest/globals': true
   },

.tool-versions

@@ -1 +1 @@
-nodejs 16.16.0
+nodejs 20.11.0

@types/index.d.ts

@@ -10,6 +10,22 @@ declare global {
       thisArg?: any
     ): number;
   }
+
+  export interface HTMLDivElement {
+    inert?: boolean | '';
+  }
+}
+
+declare module 'react' {
+  export interface DOMAttributes {}
+  export interface HTMLAttributes<T> extends DOMAttributes<T> {
+    /**
+     * Boolean attribute indicating that the browser will ignore the element.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert MDN Web Docs}
+     */
+    inert?: '';
+  }
 }
 
 declare module '*.svg' {

Dockerfile

@@ -1,5 +1,5 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:20-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -11,7 +11,7 @@ RUN yarn install --frozen-lockfile
 # RUN npm ci
 
 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
@@ -29,7 +29,7 @@ RUN yarn build
 # RUN npm run build
 
 # Production image, copy all the files and run next
-FROM node:16-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 LABEL org.prx.spire.publish.ecr="WEB_SERVER"

components/BackgroundImage/BackgroundImage.tsx

@@ -23,10 +23,10 @@ const BackgroundImage: React.FC<IBackgroundImageProps> = ({
     <PrxImage
       className={styles.image}
       src={imageUrl}
-      layout="fill"
-      objectFit="cover"
-      aria-hidden
+      alt=""
+      fill
       priority
+      aria-hidden
     />
   </div>
 );

components/Embed/Embed.tsx

@@ -283,29 +283,23 @@ const Embed = ({ config, data }: IEmbedProps) => {
               {canShowCoverArt && (
                 <div
                   className={styles.coverArt}
-                  {...(modalShown && {
-                    inert: 'inert'
-                  })}
+                  {...(modalShown && { inert: '' })}
                 >
                   <CoverArt />
 
                   {showClosedCaptionFeed && (
                     <div
                       className={clsx(styles.modals, styles.closedCaptionsFeed)}
                       id="embed-closed-caption-modal"
-                      {...(!closedCaptionsShown && {
-                        inert: 'inert'
-                      })}
+                      {...(!closedCaptionsShown && { inert: '' })}
                     />
                   )}
                 </div>
               )}
 
               <div
                 className={styles.playerContainer}
-                {...(modalShown && {
-                  inert: 'inert'
-                })}
+                {...(modalShown && { inert: '' })}
               >
                 <BackgroundImage
                   imageUrl={bgImageUrl}
@@ -320,7 +314,6 @@ const Embed = ({ config, data }: IEmbedProps) => {
                   {!canShowCoverArt && playerLayout && (
                     <div className={styles.thumbnail}>
                       <PlayerThumbnail
-                        layout="raw"
                         width={playerLayout?.thumbnailSize}
                         height={playerLayout?.thumbnailSize}
                       />
@@ -351,9 +344,7 @@ const Embed = ({ config, data }: IEmbedProps) => {
                       ref={playerControlsRef}
                       className={clsx(styles.controls, menuShownClass)}
                       {...(showMenu &&
-                        playerLayout?.name === 'compact' && {
-                          inert: 'inert'
-                        })}
+                        playerLayout?.name === 'compact' && { inert: '' })}
                     >
                       {canShowPlaylist && (
                         <PreviousButton
@@ -386,9 +377,7 @@ const Embed = ({ config, data }: IEmbedProps) => {
                       ref={playerMenuRef}
                       className={clsx(styles.menu, menuShownClass)}
                       {...(!showMenu &&
-                        playerLayout?.name === 'compact' && {
-                          inert: 'inert'
-                        })}
+                        playerLayout?.name === 'compact' && { inert: '' })}
                       style={{
                         // Initialize hidden in compact layout to prevent content flash.
                         ...(playerLayout?.name === 'compact' && {
@@ -477,19 +466,15 @@ const Embed = ({ config, data }: IEmbedProps) => {
                   <div
                     className={styles.modals}
                     id="embed-closed-caption-modal"
-                    {...(!closedCaptionsShown && {
-                      inert: 'inert'
-                    })}
+                    {...(!closedCaptionsShown && { inert: '' })}
                   />
                 )}
               </div>
 
               {canShowPlaylist && (
                 <div
                   className={styles.playlist}
-                  {...(modalShown && {
-                    inert: 'inert'
-                  })}
+                  {...(modalShown && { inert: '' })}
                 >
                   <Playlist style={{ height: '100%' }} />
                 </div>
@@ -499,9 +484,7 @@ const Embed = ({ config, data }: IEmbedProps) => {
                 <div
                   className={styles.modals}
                   id="embed-modals"
-                  {...(!modalShown && {
-                    inert: 'inert'
-                  })}
+                  {...(!modalShown && { inert: '' })}
                 />
               )}
             </Player>

components/Listen/Episode/Episode.tsx

@@ -142,7 +142,7 @@ const Episode = ({ data, onClose }: IEpisodeProps) => {
             <PrxImage
               src={thumbSrc}
               alt={`Thumbnail for "${title}".`}
-              layout="fill"
+              fill
               sizes={thumbSizes}
             />
           </div>
@@ -191,17 +191,15 @@ const Episode = ({ data, onClose }: IEpisodeProps) => {
             {showViewNav && (
               <nav className={styles.viewNav}>
                 {episodeViews.map((viewName) => (
-                  <Link passHref href={`#${viewName}`} key={viewName}>
-                    <a
-                      href={`#${viewName}`}
-                      className={styles.viewNavButton}
-                      onClick={() => {
-                        setView(viewName);
-                      }}
-                      data-current={view === viewName}
-                    >
-                      {viewName}
-                    </a>
+                  <Link
+                    href={`#${viewName}`}
+                    onClick={() => {
+                      setView(viewName);
+                    }}
+                    data-current={view === viewName}
+                    key={viewName}
+                  >
+                    {viewName}
                   </Link>
                 ))}
               </nav>

components/Listen/EpisodeList/EpisodeCard/EpisodeCard.tsx

@@ -87,7 +87,7 @@ const EpisodeCard = ({ index, episode, onEpisodeClick }: IEpisodeCardProps) => {
               title={`Thumbnail for "${title}".`}
               src={thumbSrc}
               alt={`Thumbnail for "${title}".`}
-              layout="fill"
+              fill
               sizes={thumbSizes}
             />
             <span className={styles.buttons}>

components/Listen/FooterPlayer/FooterPlayer.tsx

@@ -72,7 +72,7 @@ const FooterPlayer = forwardRef<HTMLDivElement, IFooterPlayerProps>(
             <PrxImage
               src={thumbSrc}
               alt={`Thumbnail for "${title}".`}
-              layout="fill"
+              fill
               sizes={thumbSizes}
             />
           </div>

components/Listen/Listen.tsx

@@ -318,7 +318,7 @@ const Listen = ({ config, data }: IListenPageProps) => {
             <PrxImage
               src={bgImageUrl}
               alt={`Logo for ${title}`}
-              layout="fill"
+              fill
               sizes={logoSizes}
             />
           </div>
@@ -342,7 +342,7 @@ const Listen = ({ config, data }: IListenPageProps) => {
         <div className={styles.main}>
           <div
             className={clsx(styles.viewContainer, styles.podcastView)}
-            {...(view.indexOf('podcast') === -1 && { inert: 'inert' })}
+            {...(view.indexOf('podcast') === -1 && { inert: '' })}
           >
             <div className={styles.podcastInfo}>
               <div className={styles.podcastContent}>
@@ -361,7 +361,7 @@ const Listen = ({ config, data }: IListenPageProps) => {
           </div>
           <div
             className={clsx(styles.viewContainer, styles.episodeView)}
-            {...(view.indexOf('episode') === -1 && { inert: 'inert' })}
+            {...(view.indexOf('episode') === -1 && { inert: '' })}
           >
             <Episode
               key={episode?.guid}

components/Marquee/Marquee.tsx

@@ -6,16 +6,15 @@
 import type React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
-import clsx from 'clsx';
 import styles from './Marquee.module.scss';
 
 export interface IMarqueeProps extends React.PropsWithChildren<{}> {}
 
 const Marquee: React.FC<IMarqueeProps> = ({ children }) => {
   const [marqueeOffset, setMarqueeOffset] = useState(0);
   const [marqueeSpeed, setMarqueeSpeed] = useState(0);
-  const contentRef = useRef(null);
-  const rootRef = useRef(null);
+  const contentRef = useRef<HTMLDivElement>();
+  const rootRef = useRef<HTMLDivElement>();
   const timeoutRef = useRef(null);
 
   const updateMarqueeOffset = useCallback(() => {
@@ -49,24 +48,22 @@ const Marquee: React.FC<IMarqueeProps> = ({ children }) => {
 
   return (
     <div className={styles.root} ref={rootRef}>
-      <motion.div
-        ref={contentRef}
-        className={clsx(styles.content, {
-          [styles.marqueeOn]: marqueeOffset < 0
-        })}
-        animate={{ x: [0, marqueeOffset] }}
-        initial={{ x: 0 }}
-        transition={{
-          repeat: Infinity,
-          repeatType: 'reverse',
-          repeatDelay: 0.5,
-          delay: 1,
-          duration: marqueeSpeed
-          // ease: 'linear'
-        }}
-      >
-        {children}
-      </motion.div>
+      <div className={styles.content} ref={contentRef}>
+        <motion.div
+          animate={{ x: [0, marqueeOffset] }}
+          initial={{ x: 0 }}
+          transition={{
+            repeat: Infinity,
+            repeatType: 'reverse',
+            repeatDelay: 0.5,
+            delay: 1,
+            duration: marqueeSpeed
+            // ease: 'linear'
+          }}
+        >
+          {children}
+        </motion.div>
+      </div>
     </div>
   );
 };