Skip to content

Update react-crossword and unify usage across articles and editions #13876

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 2, 2025

Conversation

DanielCliftonGuardian
Copy link
Contributor

@DanielCliftonGuardian DanielCliftonGuardian commented Apr 30, 2025

What does this change?

Updates the react-crossword dependency to the latest version. This change standardises the usage of the module for both crossword articles and editions, leveraging the latest features and fixes.

This change relies on an update to the editions crossword data model guardian/frontend#27943

Why?

Resolves #13864

Screenshots

Before After
before after

Copy link

github-actions bot commented Apr 30, 2025

Size Change: -741 B (-0.08%)

Total Size: 973 kB

Filename Size Change
dotcom-rendering/dist/1656.client.web.********************.js 49.6 kB -720 B (-1.43%)
ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1008.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/1032.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/117.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1823.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/2045.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/2161.client.web.********************.js 3.88 kB 0 B
dotcom-rendering/dist/223.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/2270.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/2309.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/2345.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/2360.client.web.********************.js 19.9 kB 0 B
dotcom-rendering/dist/2502.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/302.client.web.********************.js 8.84 kB 0 B
dotcom-rendering/dist/3226.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/3292.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/3308.client.web.********************.js 3.12 kB 0 B
dotcom-rendering/dist/3485.client.web.********************.js 4.67 kB 0 B
dotcom-rendering/dist/3598.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/3605.client.web.********************.js 15.1 kB 0 B
dotcom-rendering/dist/3619.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/3950.client.web.********************.js 3.36 kB 0 B
dotcom-rendering/dist/4133.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/4258.client.web.********************.js 4.08 kB 0 B
dotcom-rendering/dist/4306.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/4308.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/4324.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/4457.client.web.********************.js 6.26 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/476.client.web.********************.js 5.42 kB 0 B
dotcom-rendering/dist/5144.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/5448.client.web.********************.js 4.37 kB 0 B
dotcom-rendering/dist/545.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/5455.client.web.********************.js 7.15 kB 0 B
dotcom-rendering/dist/562.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/6038.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/6217.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/6480.client.web.********************.js 3.68 kB 0 B
dotcom-rendering/dist/6540.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/6541.client.web.********************.js 2.91 kB 0 B
dotcom-rendering/dist/6562.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/6584.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/6722.client.web.********************.js 3.03 kB 0 B
dotcom-rendering/dist/6802.client.web.********************.js 2.51 kB 0 B
dotcom-rendering/dist/6873.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/695.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB 0 B
dotcom-rendering/dist/732.client.web.********************.js 3.07 kB 0 B
dotcom-rendering/dist/7398.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/7487.client.web.********************.js 4.23 kB 0 B
dotcom-rendering/dist/7927.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/8107.client.web.********************.js 20.3 kB 0 B
dotcom-rendering/dist/8151.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/8212.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/8385.client.web.********************.js 3.88 kB 0 B
dotcom-rendering/dist/8387.client.web.********************.js 2.78 kB 0 B
dotcom-rendering/dist/8436.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/8602.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/8619.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/864.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/8942.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/8973.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/8985.client.web.********************.js 11.1 kB 0 B
dotcom-rendering/dist/9018.client.web.********************.js 3.73 kB 0 B
dotcom-rendering/dist/9135.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/9139.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/9376.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/960.client.web.********************.js 7.99 kB 0 B
dotcom-rendering/dist/967.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/9709.client.web.********************.js 2.73 kB 0 B
dotcom-rendering/dist/9822.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/9837.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/9870.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.43 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.61 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.61 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.68 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.3 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.98 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.2 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB +1 B (0%)
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.5 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.1 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 16.1 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.4 kB -22 B (-0.05%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 854 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.83 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.96 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.56 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.49 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.65 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.24 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.37 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.7 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.14 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.62 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.26 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.2 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.21 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.91 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 487 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.18 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 893 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 919 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.35 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.46 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.8 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.52 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.85 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.06 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.32 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B 0 B

compressed-size-action

@DanielCliftonGuardian DanielCliftonGuardian added the run_chromatic Runs chromatic when label is applied label Apr 30, 2025
@DanielCliftonGuardian DanielCliftonGuardian changed the title Use the latest version of react crossword with editions Update react-crossword and unify usage across articles and editions Apr 30, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Apr 30, 2025
@DanielCliftonGuardian DanielCliftonGuardian marked this pull request as ready for review May 1, 2025 13:56
@DanielCliftonGuardian DanielCliftonGuardian requested a review from a team as a code owner May 1, 2025 13:56
@DanielCliftonGuardian DanielCliftonGuardian added the run_chromatic Runs chromatic when label is applied label May 1, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 1, 2025
@DanielCliftonGuardian DanielCliftonGuardian added the run_chromatic Runs chromatic when label is applied label May 2, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 2, 2025
@DanielCliftonGuardian DanielCliftonGuardian added the run_chromatic Runs chromatic when label is applied label May 2, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 2, 2025
Copy link
Contributor

@JamieB-gu JamieB-gu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

A few comments but all non-blocking, let's look at them in a follow-up PR after this is merged?

Comment on lines -2 to +4
crosswords: FEEditionsCrossword[];
};

type FECrosswordEntry = {
id: string;
number: number;
humanNumber: string;
direction: 'across' | 'down';
position: { x: number; y: number };
separatorLocations: {
','?: number[];
'-'?: number[];
};
length: number;
clue: string;
group: string[];
solution?: string;
format?: string;
};

type FECrosswordDimensions = {
cols: number;
rows: number;
};
import type { CAPICrossword } from '@guardian/react-crossword/dist/@types/CAPI';

export type FEEditionsCrossword = {
name: string;
type: string;
number: number;
date: string;
dimensions: FECrosswordDimensions;
entries: FECrosswordEntry[];
solutionAvailable: boolean;
hasNumbers: boolean;
randomCluesOrdering: boolean;
instructions?: string;
creator?: { name: string; webUrl: string };
pdf?: string;
annotatedSolution?: string;
dateSolutionAvailable: string;
export type CAPICrosswords = {
newCrosswords: CAPICrossword[];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: we should probably avoid importing from this directory. In the article crossword player we have something like this to get access to this type:

import type { CrosswordProps } from '@guardian/react-crossword';

type CAPICrossword = CrosswordProps['data'];

pdf?: string;
annotatedSolution?: string;
dateSolutionAvailable: string;
export type CAPICrosswords = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: we should probably still call this FEEditionsCrosswords across the codebase for consistency.

@@ -1,14 +1,11 @@
import Crossword from '@guardian/react-crossword';
import { Crossword } from '@guardian/react-crossword';
import type { CAPICrossword } from '@guardian/react-crossword/dist/@types/CAPI';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: we should probably avoid importing from this directory. In the article crossword player we have something like this to get access to this type:

import type { CrosswordProps } from '@guardian/react-crossword';

type CAPICrossword = CrosswordProps['data'];

@@ -1,14 +1,7 @@
/* eslint-disable ssr-friendly/no-dom-globals-in-module-scope */
// @ts-expect-error: Cannot find module
import css from '@guardian/react-crossword/lib/index.css';
import type { CAPICrossword } from '@guardian/react-crossword/dist/@types/CAPI';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: we should probably avoid importing from this directory. In the article crossword player we have something like this to get access to this type:

import type { CrosswordProps } from '@guardian/react-crossword';

type CAPICrossword = CrosswordProps['data'];

@@ -1,8 +1,8 @@
import type { FEEditionsCrossword } from '../../src/types/editionsCrossword';
import type { CAPICrossword } from '@guardian/react-crossword/dist/@types/CAPI';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: we should probably avoid importing from this directory. In the article crossword player we have something like this to get access to this type:

import type { CrosswordProps } from '@guardian/react-crossword';

type CAPICrossword = CrosswordProps['data'];

@DanielCliftonGuardian DanielCliftonGuardian merged commit 7a7d2ca into main May 2, 2025
33 checks passed
@DanielCliftonGuardian DanielCliftonGuardian deleted the use-react-crossword-editions branch May 2, 2025 16:09
@prout-bot
Copy link

Seen on PROD (merged by @DanielCliftonGuardian 7 minutes and 50 seconds ago) Please check your changes!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Sunday Quick Crossword grid not appearing on iPad Editions
4 participants