[DNM] React 19

.github/dependabot.yml

@@ -23,15 +23,6 @@ updates:
       - dependency-name: 'react-router'
       # https://jira.dev.bbc.co.uk/browse/NEWSWORLDSERVICE-2099: Delete path-to-regexp dependency
       - dependency-name: 'path-to-regexp'
-      # https://jira.dev.bbc.co.uk/browse/NEWSWORLDSERVICE-2187: Latest major version of react has breaking changes
-      - dependency-name: 'react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: 'react-dom'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@types/react'
-        update-types: ['version-update:semver-major']
-      - dependency-name: '@types/react-dom'
-        update-types: ['version-update:semver-major']
     labels:
       - 'dependencies'
     groups:

.storybook/DocsDecorator/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import {
   DocsContainer,
   DocsContextProps,

.storybook/withServicesDecorator/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Helmet } from 'react-helmet';
 import { StoryProps } from '#app/models/types/storybook';
 import { Services, Variants } from '#app/models/types/global';

package.json

@@ -13,7 +13,8 @@
     "@optimizely/js-sdk-utils": "0.4.0",
     "uuid": "3.4.0",
     "[email protected]": "patch:winston@npm:3.8.2#.yarn/patches/winston-npm-3.8.2-2035e9cac4.patch",
-    "cookie": "0.7.1"
+    "cookie": "0.7.1",
+    "react-is": "19.0.0"
   },
   "workspaces": {
     "packages": [
@@ -120,8 +121,8 @@
     "morgan": "1.10.0",
     "polyfill-crypto.getrandomvalues": "1.0.0",
     "ramda": "0.30.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-helmet": "6.1.0",
     "react-lazyload": "3.2.1",
     "react-router-config": "5.1.1",
@@ -185,8 +186,8 @@
     "@types/jsdom": "21.1.7",
     "@types/loadable__component": "5.13.9",
     "@types/ramda": "0.30.2",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "@types/react-helmet": "6.1.11",
     "@types/react-lazyload": "^3.2.0",
     "@types/react-router-dom": "5.3.3",

scripts/bundleSize/bundleSizeConfig.js

@@ -7,5 +7,5 @@
  * We are allowing a variance of -5 on `MIN_SIZE` and +5 on `MAX_SIZE` to avoid the need for frequent changes, as bundle sizes can fluctuate
  */
 
-export const MIN_SIZE = 640 - 5;
-export const MAX_SIZE = 1174 + 5;
+export const MIN_SIZE = 681 - 5;
+export const MAX_SIZE = 1216 + 5;

src/app/components/ATIAnalytics/amp/types.d.ts

@@ -1,4 +1,4 @@
-declare namespace JSX {
+declare namespace React.JSX {
   /*
    * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791).
    * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125).

src/app/components/Ad/Amp/types.d.ts

@@ -1,4 +1,4 @@
-declare namespace JSX {
+declare namespace React.JSX {
   /*
    * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791).
    * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125).

src/app/components/AmpExperiment/types.d.ts

@@ -1,4 +1,4 @@
-declare namespace JSX {
+declare namespace React.JSX {
   interface IntrinsicElements {
     'amp-experiment': React.PropsWithChildren<
       ScriptHTMLAttributes<HTMLScriptElement>

src/app/components/AmpIframe/index.tsx

@@ -75,7 +75,7 @@ const AmpIframe = ({
               Show more
             </button>
           </div>
-          <amp-img layout="fill" src={image} placeholder />
+          <amp-img layout="fill" src={image} placeholder="true" />
         </AmpIframeElement>
       </GridItemMedium>
     </>

src/app/components/Billboard/index.tsx

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 /* @jsxFrag React.Fragment */
-import { forwardRef } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 import { jsx } from '@emotion/react';
 import useViewTracker from '#app/hooks/useViewTracker';
 import useClickTrackerHandler from '#app/hooks/useClickTrackerHandler';
@@ -35,7 +35,7 @@ const Billboard = forwardRef(
       eventTrackingData,
       showLiveLabel,
     }: BillboardProps,
-    viewRef,
+    viewRef: ForwardedRef<HTMLDivElement>,
   ) => {
     const clickTrackerHandler = useClickTrackerHandler(eventTrackingData);
 

src/app/components/ChartbeatAnalytics/amp/types.d.ts

@@ -1,4 +1,4 @@
-declare namespace JSX {
+declare namespace React.JSX {
   /*
    * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791).
    * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125).

src/app/components/ChartbeatAnalytics/index.test.tsx

@@ -119,7 +119,7 @@ describe('Charbeats Analytics Container', () => {
       {
         chartbeatConfig: expectedConfig,
       },
-      {},
+      undefined,
     );
     expect(testUtils.getConfig).toHaveBeenCalledTimes(1);
     expect(container.firstChild).not.toBeNull();

src/app/components/Curation/CurationPromo/index.tsx

@@ -46,13 +46,20 @@ const CurationPromo = ({
 
   return (
     <Promo>
-      <Promo.Image src={imageUrl} alt={imageAlt} lazyLoad={lazy} isAmp={isAmp}>
-        {isMedia && (
-          <Promo.MediaIcon type={type}>
-            {showDuration ? mediaDuration : ''}
-          </Promo.MediaIcon>
-        )}
-      </Promo.Image>
+      {imageUrl && (
+        <Promo.Image
+          src={imageUrl}
+          alt={imageAlt}
+          lazyLoad={lazy}
+          isAmp={isAmp}
+        >
+          {isMedia && (
+            <Promo.MediaIcon type={type}>
+              {showDuration ? mediaDuration : ''}
+            </Promo.MediaIcon>
+          )}
+        </Promo.Image>
+      )}
       <Promo.Heading as={`h${headingLevel}`}>
         {isMedia ? (
           <Promo.A href={link} aria-labelledby={id}>

src/app/components/Curation/HierarchicalGrid/index.test.tsx

@@ -82,7 +82,7 @@ describe('Hierarchical Grid Curation', () => {
 
   it('should render the last published date', async () => {
     const { getByText } = render(
-      <HierarchicalGrid summaries={mediaFixture} />,
+      <HierarchicalGrid headingLevel={headingLevel} summaries={mediaFixture} />,
       {
         service: 'mundo',
       },
@@ -109,16 +109,22 @@ describe('Hierarchical Grid Curation', () => {
   });
 
   it('should display LiveLabel on a Live Promo', () => {
-    const container = render(<HierarchicalGrid summaries={mediaFixture} />, {
-      service: 'mundo',
-    });
+    const container = render(
+      <HierarchicalGrid headingLevel={headingLevel} summaries={mediaFixture} />,
+      {
+        service: 'mundo',
+      },
+    );
     expect(container.getByText('EN VIVO')).toBeInTheDocument();
   });
 
   it('should not display a timestamp on a Live Promo', () => {
-    const container = render(<HierarchicalGrid summaries={liveFixtures} />, {
-      service: 'mundo',
-    });
+    const container = render(
+      <HierarchicalGrid headingLevel={headingLevel} summaries={liveFixtures} />,
+      {
+        service: 'mundo',
+      },
+    );
     expect(container.queryByText('13 noviembre 2022')).not.toBeInTheDocument();
   });
 });

src/app/components/Curation/HierarchicalGrid/index.tsx

@@ -87,10 +87,10 @@ const HiearchicalGrid = ({
               <Promo>
                 <Promo.Image
                   useLargeImages={useLargeImages}
-                  src={promo.imageUrl || ''}
+                  src={promo.imageUrl || null}
                   alt={promo.imageAlt}
                   lazyLoad={lazyLoadImages}
-                  fetchpriority={fetchpriority}
+                  fetchPriority={fetchpriority}
                   isAmp={isAmp}
                 >
                   {isMedia && (
@@ -124,9 +124,11 @@ const HiearchicalGrid = ({
                     <Promo.A href={promo.link}>
                       {isLive ? (
                         <LiveLabel
-                          {...(isFirstPromo && {
-                            className: 'first-promo',
-                          })}
+                          {...(isFirstPromo
+                            ? {
+                                className: 'first-promo',
+                              }
+                            : undefined)}
                         >
                           {promo.title}
                         </LiveLabel>

src/app/components/EmbedConsentBanner/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, PropsWithChildren } from 'react';
+import React, { useState, PropsWithChildren, type JSX } from 'react';
 import ConsentBanner from './ConsentBanner';
 
 import { SocialEmbedProviders } from '../../models/types/global';

src/app/components/FrostedGlassPromo/types.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { EventTrackingBlock } from '../../models/types/eventTracking';
 
 export type ImageProps = {

src/app/components/Image/index.tsx

@@ -30,7 +30,7 @@ type Props = {
   sizes?: string;
   src: string;
   width?: number;
-  fetchpriority?: 'high';
+  fetchPriority?: 'high';
   hasCaption?: boolean;
 };
 
@@ -59,7 +59,7 @@ const Image = ({
   src,
   width,
   children,
-  fetchpriority,
+  fetchPriority,
   hasCaption,
 }: PropsWithChildren<Props>) => {
   const { pageType, isLite } = useContext(RequestContext);
@@ -109,8 +109,8 @@ const Image = ({
             rel="preload"
             as="image"
             href={src}
-            imagesrcset={srcSet}
-            imagesizes={sizes}
+            imageSrcSet={srcSet}
+            imageSizes={sizes}
           />
         </Helmet>
       )}
@@ -159,7 +159,7 @@ const Image = ({
               attribution={attribution}
               {...(srcSet && { srcSet: imgSrcSet })}
               {...(imgSizes && { sizes: imgSizes })}
-              {...(preload && { 'data-hero': true })}
+              {...(preload && { 'data-hero': 'true' })}
             />
           </>
         ) : (
@@ -190,7 +190,7 @@ const Image = ({
                   ? styles.imageFixedAspectRatio
                   : styles.imageResponsiveRatio,
               ]}
-              fetchpriority={fetchpriority}
+              fetchPriority={fetchPriority}
               style={{
                 aspectRatio: hasFixedAspectRatio
                   ? `${aspectRatioX} / ${aspectRatioY}`

src/app/components/Image/types.d.ts

@@ -1,4 +1,4 @@
-declare namespace JSX {
+declare namespace React.JSX {
   /*
    * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791).
    * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125).
@@ -15,21 +15,14 @@ declare namespace JSX {
     src?: string;
     srcSet?: string;
     width?: number;
-    placeholder?: boolean;
-  }
-  /*
-   * Overrides type for link with missing imagesrcset and imagesizes attributes
-   */
-  interface LinkProps extends React.LinkHTMLAttributes<HTMLLinkElement> {
-    imagesrcset?: string;
-    imagesizes?: string;
+    placeholder?: string | boolean;
   }
+
   interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-    fetchpriority?: string;
+    fetchPriority?: string;
   }
   interface IntrinsicElements {
     'amp-img': AmpImgProps;
-    link: LinkProps;
     img: ImageProps;
   }
 }

src/app/components/MaskedImage/index.tsx

@@ -57,7 +57,7 @@ const MaskedImage = ({
         sizes="(min-width: 1008px) 660px, 100vw"
         width={800}
         height={533}
-        fetchpriority="high"
+        fetchPriority="high"
         preload
         placeholder={showPlaceholder}
       />

src/app/components/MediaLoader/Amp/index.tsx

@@ -45,6 +45,7 @@ const AmpMediaLoader = ({
       >
         <div
           data-e2e="image-placeholder"
+          // @ts-expect-error - placeholder is an AMP specific attribute
           placeholder=""
           css={styles.ampIframePlaceholder}
         />

src/app/components/MediaLoader/Placeholder/Guidance/index.tsx

@@ -20,7 +20,7 @@ const Guidance = ({
       guidanceMessage && styles.guidanceWrapperWithMessage,
     ]}
     data-e2e="media-player__guidance"
-    {...(className && { className })}
+    {...(className ? { className } : undefined)}
   >
     {guidanceMessage && (
       <strong

src/app/components/MediaLoader/Placeholder/PlayButton/index.tsx

@@ -39,7 +39,7 @@ const PlayButton = ({
       type="button"
       css={styles.button}
       onClick={onClick}
-      {...(className && { className })}
+      {...(className ? { className } : undefined)}
     >
       <VisuallyHiddenText>{hiddenText}</VisuallyHiddenText>
       <div

src/app/components/MessageBanner/index.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useContext, forwardRef } from 'react';
+import { useContext, forwardRef, ForwardedRef } from 'react';
 import { jsx } from '@emotion/react';
 import useViewTracker from '#app/hooks/useViewTracker';
 import { EventTrackingMetadata } from '#app/models/types/eventTracking';
@@ -32,7 +32,7 @@ const Banner = forwardRef(
       eventTrackingData,
       id = 'message-banner-1',
     }: MessageBannerProps,
-    viewRef,
+    viewRef: ForwardedRef<HTMLDivElement>,
   ) => {
     const { dir } = useContext(ServiceContext);
     const isRtl = dir === 'rtl';

src/app/components/MostRead/Amp/index.tsx

@@ -75,11 +75,18 @@ const AmpMostRead = ({ endpoint, size = 'default' }: AmpMostReadProps) => {
         width="300"
         height="50"
       >
-        <p css={styles.paragraph} fallback="">
+        <p
+          css={styles.paragraph}
+          // @ts-expect-error - fallback is an AMP specific attribute
+          fallback=""
+        >
           {fallbackText}
         </p>
 
-        <template type="amp-mustache">
+        <template
+          // @ts-expect-error - type is an AMP specific attribute in this context
+          type="amp-mustache"
+        >
           <MostReadItemWrapper dir={direction} columnLayout="oneColumn">
             <MostReadRank
               service={service}

src/app/components/MostRead/Amp/types.d.ts

@@ -1,4 +1,4 @@
-declare namespace JSX {
+declare namespace React.JSX {
   /*
    * AMP currently doesn't have built-in types for TypeScript, but it's in their roadmap (https://github.com/ampproject/amphtml/issues/13791).
    * As a workaround you can manually create custom types (https://stackoverflow.com/a/50601125).

src/app/components/MostRead/Section/index.tsx

@@ -13,7 +13,7 @@ const MostReadSection = ({
     aria-labelledby="Most-Read"
     data-e2e="most-read"
     data-testid="most-read"
-    {...(className && { className })}
+    {...(className ? { className } : undefined)}
   >
     {children}
   </section>