WithABProvider

[oliverlloyd]

What does this change?

This refactors how we set the ABProvider by moving it into a WithABProvider wrapper component

Why?

So that it will be easier to set more of these providers in future as we move over to islands

[github-actions]

Size Change: +186 B (0%)

Total Size: 1.19 MB

Filename	Size	Change
dotcom-rendering/dist/1214.js	2.14 kB	+28 B (+1%)
dotcom-rendering/dist/1214.legacy.js	2.19 kB	+30 B (+1%)
dotcom-rendering/dist/frontend.server.js	302 kB	+19 B (0%)
dotcom-rendering/dist/react.js	86.7 kB	+44 B (0%)
dotcom-rendering/dist/react.legacy.js	93.5 kB	+65 B (0%)

ℹ️ View Unchanged

Filename	Size
dotcom-rendering/dist/1376.js	3.63 kB
dotcom-rendering/dist/1376.legacy.js	3.82 kB
dotcom-rendering/dist/1672.js	3.72 kB
dotcom-rendering/dist/1924.js	4.56 kB
dotcom-rendering/dist/1924.legacy.js	4.7 kB
dotcom-rendering/dist/1983.js	13.8 kB
dotcom-rendering/dist/1983.legacy.js	14.4 kB
dotcom-rendering/dist/2666.js	30.6 kB
dotcom-rendering/dist/3213.js	13 kB
dotcom-rendering/dist/3213.legacy.js	13.2 kB
dotcom-rendering/dist/3215.js	4.88 kB
dotcom-rendering/dist/3215.legacy.js	5.05 kB
dotcom-rendering/dist/3321.legacy.js	28.5 kB
dotcom-rendering/dist/3397.js	240 B
dotcom-rendering/dist/3397.legacy.js	251 B
dotcom-rendering/dist/343.js	3.73 kB
dotcom-rendering/dist/343.legacy.js	3.91 kB
dotcom-rendering/dist/3639.js	5.24 kB
dotcom-rendering/dist/3639.legacy.js	5.42 kB
dotcom-rendering/dist/3777.legacy.js	6.41 kB
dotcom-rendering/dist/4415.legacy.js	3.56 kB
dotcom-rendering/dist/45.legacy.js	3.55 kB
dotcom-rendering/dist/4576.js	235 B
dotcom-rendering/dist/4576.legacy.js	247 B
dotcom-rendering/dist/4850.js	235 B
dotcom-rendering/dist/4850.legacy.js	246 B
dotcom-rendering/dist/4999.js	17.9 kB
dotcom-rendering/dist/4999.legacy.js	18.5 kB
dotcom-rendering/dist/5217.js	233 B
dotcom-rendering/dist/5217.legacy.js	245 B
dotcom-rendering/dist/53.js	4.11 kB
dotcom-rendering/dist/53.legacy.js	4.12 kB
dotcom-rendering/dist/5373.legacy.js	3.58 kB
dotcom-rendering/dist/5585.js	5.26 kB
dotcom-rendering/dist/5585.legacy.js	5.41 kB
dotcom-rendering/dist/602.js	8.66 kB
dotcom-rendering/dist/602.legacy.js	8.92 kB
dotcom-rendering/dist/6348.js	4.58 kB
dotcom-rendering/dist/6348.legacy.js	4.75 kB
dotcom-rendering/dist/6372.legacy.js	3.89 kB
dotcom-rendering/dist/6400.js	21.5 kB
dotcom-rendering/dist/6400.legacy.js	21.5 kB
dotcom-rendering/dist/6684.js	241 B
dotcom-rendering/dist/6684.legacy.js	252 B
dotcom-rendering/dist/6916.js	8.25 kB
dotcom-rendering/dist/6916.legacy.js	8.71 kB
dotcom-rendering/dist/6965.js	2.65 kB
dotcom-rendering/dist/6965.legacy.js	2.71 kB
dotcom-rendering/dist/7051.js	7.22 kB
dotcom-rendering/dist/7051.legacy.js	7.37 kB
dotcom-rendering/dist/7317.js	3.4 kB
dotcom-rendering/dist/7489.js	3.4 kB
dotcom-rendering/dist/7754.legacy.js	3.56 kB
dotcom-rendering/dist/8080.js	3.52 kB
dotcom-rendering/dist/8080.legacy.js	3.7 kB
dotcom-rendering/dist/8294.js	232 B
dotcom-rendering/dist/8294.legacy.js	244 B
dotcom-rendering/dist/8330.js	3.21 kB
dotcom-rendering/dist/8497.js	4.01 kB
dotcom-rendering/dist/8748.js	232 B
dotcom-rendering/dist/8748.legacy.js	243 B
dotcom-rendering/dist/9212.js	3.4 kB
dotcom-rendering/dist/9641.js	5.23 kB
dotcom-rendering/dist/9641.legacy.js	5.4 kB
dotcom-rendering/dist/9776.js	5.15 kB
dotcom-rendering/dist/9776.legacy.js	5.33 kB
dotcom-rendering/dist/9884.js	17 kB
dotcom-rendering/dist/9884.legacy.js	17.3 kB
dotcom-rendering/dist/atomIframe.js	1.87 kB
dotcom-rendering/dist/atomIframe.legacy.js	2.14 kB
dotcom-rendering/dist/bootCmp.js	7.39 kB
dotcom-rendering/dist/bootCmp.legacy.js	10.9 kB
dotcom-rendering/dist/braze-web-sdk-core.js	36.1 kB
dotcom-rendering/dist/braze-web-sdk-core.legacy.js	36.1 kB
dotcom-rendering/dist/cmp.js	7.51 kB
dotcom-rendering/dist/coreVitals.js	4.03 kB
dotcom-rendering/dist/coreVitals.legacy.js	4.33 kB
dotcom-rendering/dist/dynamicImport.js	3 kB
dotcom-rendering/dist/dynamicImport.legacy.js	3.29 kB
dotcom-rendering/dist/embedIframe.js	1.88 kB
dotcom-rendering/dist/embedIframe.legacy.js	2.14 kB
dotcom-rendering/dist/ga.js	3.88 kB
dotcom-rendering/dist/ga.legacy.js	4.14 kB
dotcom-rendering/dist/guardian-braze-components-banner.js	10.6 kB
dotcom-rendering/dist/guardian-braze-components-banner.legacy.js	10.6 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.js	6.61 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.legacy.js	6.62 kB
dotcom-rendering/dist/initDiscussion.js	7.49 kB
dotcom-rendering/dist/initDiscussion.legacy.js	7.74 kB
dotcom-rendering/dist/InteractiveBlockComponent.js	3.05 kB
dotcom-rendering/dist/InteractiveBlockComponent.legacy.js	3.18 kB
dotcom-rendering/dist/islands.js	7.63 kB
dotcom-rendering/dist/islands.legacy.js	8.38 kB
dotcom-rendering/dist/MostViewedFooterData.js	6.25 kB
dotcom-rendering/dist/MostViewedFooterData.legacy.js	6.34 kB
dotcom-rendering/dist/newsletterEmbedIframe.js	2.03 kB
dotcom-rendering/dist/newsletterEmbedIframe.legacy.js	2.29 kB
dotcom-rendering/dist/ophan.js	7.18 kB
dotcom-rendering/dist/ophan.legacy.js	7.38 kB
dotcom-rendering/dist/readerRevenueDevUtils.js	891 B
dotcom-rendering/dist/readerRevenueDevUtils.legacy.js	952 B
dotcom-rendering/dist/relativeTime.js	2.41 kB
dotcom-rendering/dist/relativeTime.legacy.js	2.68 kB
dotcom-rendering/dist/sentry.js	677 B
dotcom-rendering/dist/sentry.legacy.js	689 B
dotcom-rendering/dist/sentryLoader.js	4.75 kB
dotcom-rendering/dist/sentryLoader.legacy.js	7.71 kB
dotcom-rendering/dist/shimport.js	2.75 kB
dotcom-rendering/dist/shimport.legacy.js	2.76 kB
dotcom-rendering/dist/SignInGateMain.js	1.84 kB
dotcom-rendering/dist/SignInGateMain.legacy.js	1.88 kB
dotcom-rendering/dist/YoutubeBlockComponent.js	2.9 kB
dotcom-rendering/dist/YoutubeBlockComponent.legacy.js	3.03 kB

_{compressed-size-action}

[jamesgorrie]

The code looks good. Is the main reason to encapsulate the logic?

const cypressAbSwitches = getCypressSwitches();
const windowHash = window && window.location && window.location.hash;

Otherwise it does just appear to be wrapping a Provider in a FunctionComponent?

[oliverlloyd]

Is the main reason to encapsulate the logic?

Essentially, yes. Once we start moving components that have AB tests into islands then they will either need to set their own ABProvider or we abstract that somehow and I want that experience to be as seamless as possible. I'm not yet 100% sure the best way to offer that api but this seems a good first step.